Storybook csf conversion (#24084)

* Convert ClipboardButton to CSF

* Convert CallToActionCard to CSF

* Convert BarGauge to CSF

* Convert DataSourceHttpSettings to CSF

* Convert ConfirmModal to CSF

* Convert FormField to CSF

packages/grafana-ui/src/components/BarGauge/BarGauge.story.tsx

@@ -1,4 +1,3 @@
-import { storiesOf } from '@storybook/react';
 import { number, text } from '@storybook/addon-knobs';
 import { BarGauge, Props, BarGaugeDisplayMode } from './BarGauge';
 import { VizOrientation, ThresholdsMode, Field, FieldType, getDisplayProcessor } from '@grafana/data';
@@ -18,75 +17,75 @@ const getKnobs = () => {
   };
 };
 
-const BarGaugeStories = storiesOf('Visualizations/BarGauge', module);
+export default {
+  title: 'Visualizations/BarGauge',
+  component: BarGauge,
+  decorators: [withCenteredStory],
+};
 
-BarGaugeStories.addDecorator(withCenteredStory);
+function addBarGaugeStory(overrides: Partial<Props>) {
+  const {
+    value,
+    title,
+    minValue,
+    maxValue,
+    threshold1Color,
+    threshold2Color,
+    threshold1Value,
+    threshold2Value,
+  } = getKnobs();
 
-function addBarGaugeStory(name: string, overrides: Partial<Props>) {
-  BarGaugeStories.add(name, () => {
-    const {
-      value,
-      title,
-      minValue,
-      maxValue,
-      threshold1Color,
-      threshold2Color,
-      threshold1Value,
-      threshold2Value,
-    } = getKnobs();
-
-    const field: Partial<Field> = {
-      type: FieldType.number,
-      config: {
-        min: minValue,
-        max: maxValue,
-        thresholds: {
-          mode: ThresholdsMode.Absolute,
-          steps: [
-            { value: -Infinity, color: 'green' },
-            { value: threshold1Value, color: threshold1Color },
-            { value: threshold2Value, color: threshold2Color },
-          ],
-        },
+  const field: Partial<Field> = {
+    type: FieldType.number,
+    config: {
+      min: minValue,
+      max: maxValue,
+      thresholds: {
+        mode: ThresholdsMode.Absolute,
+        steps: [
+          { value: -Infinity, color: 'green' },
+          { value: threshold1Value, color: threshold1Color },
+          { value: threshold2Value, color: threshold2Color },
+        ],
       },
-    };
-    field.display = getDisplayProcessor({ field });
+    },
+  };
+  field.display = getDisplayProcessor({ field });
 
-    const props: Props = {
-      theme: {} as any,
-      width: 300,
-      height: 300,
-      value: {
-        text: value.toString(),
-        title: title,
-        numeric: value,
-      },
-      orientation: VizOrientation.Vertical,
-      displayMode: BarGaugeDisplayMode.Basic,
-      field: field.config!,
-      display: field.display!,
-    };
+  const props: Props = {
+    theme: {} as any,
+    width: 300,
+    height: 300,
+    value: {
+      text: value.toString(),
+      title: title,
+      numeric: value,
+    },
+    orientation: VizOrientation.Vertical,
+    displayMode: BarGaugeDisplayMode.Basic,
+    field: field.config!,
+    display: field.display!,
+  };
 
-    Object.assign(props, overrides);
-    return renderComponentWithTheme(BarGauge, props);
-  });
+  Object.assign(props, overrides);
+  return renderComponentWithTheme(BarGauge, props);
 }
 
-addBarGaugeStory('Gradient Vertical', {
+export const gradientVertical = addBarGaugeStory({
   displayMode: BarGaugeDisplayMode.Gradient,
   orientation: VizOrientation.Vertical,
   height: 500,
   width: 100,
 });
 
-addBarGaugeStory('Gradient Horizontal', {
+export const gradientHorizontal = addBarGaugeStory({
   displayMode: BarGaugeDisplayMode.Gradient,
   orientation: VizOrientation.Horizontal,
   height: 100,
   width: 500,
 });
 
-addBarGaugeStory('LCD Horizontal', {
+export const lcdHorizontal = addBarGaugeStory({
   displayMode: BarGaugeDisplayMode.Lcd,
   orientation: VizOrientation.Vertical,
   height: 500,

packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.story.internal.tsx

@@ -1,14 +1,16 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { renderComponentWithTheme } from '../../utils/storybook/withTheme';
 import { CallToActionCard } from './CallToActionCard';
 import { select, text } from '@storybook/addon-knobs';
 import { Button } from '../Button/Button';
 import { action } from '@storybook/addon-actions';
 
-const CallToActionCardStories = storiesOf('Layout/CallToActionCard', module);
+export default {
+  title: 'Layout/CallToActionCard',
+  component: CallToActionCard,
+};
 
-CallToActionCardStories.add('default', () => {
+export const basic = () => {
   const ctaElements: { [key: string]: JSX.Element } = {
     custom: <h1>This is just H1 tag, you can any component as CTA element</h1>,
     button: (
@@ -31,4 +33,4 @@ CallToActionCardStories.add('default', () => {
     callToActionElement: ctaElements[ctaElement],
     footer: text('Call to action footer', 'Renders footer prop content'),
   });
-});
+};

packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.story.internal.tsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
 
-import { storiesOf } from '@storybook/react';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { ClipboardButton } from './ClipboardButton';
 import { Input } from '../Forms/Legacy/Input/Input';
@@ -35,6 +34,10 @@ const Wrapper = () => {
   );
 };
 
-const story = storiesOf('Buttons/ClipboardButton', module);
-story.addDecorator(withCenteredStory);
-story.add('copy to clipboard', () => <Wrapper />);
+export default {
+  title: 'Buttons/ClipboardButton',
+  component: ClipboardButton,
+  decorators: [withCenteredStory],
+};
+
+export const copyToClipboard = () => <Wrapper />;

packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.story.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { text, boolean, select } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
@@ -24,11 +23,13 @@ const defaultActions = {
   },
 };
 
-const ConfirmModalStories = storiesOf('Overlays/ConfirmModal', module);
+export default {
+  title: 'Overlays/ConfirmModal',
+  component: ConfirmModal,
+  decorators: [withCenteredStory],
+};
 
-ConfirmModalStories.addDecorator(withCenteredStory);
-
-ConfirmModalStories.add('default', () => {
+export const basic = () => {
   const { title, body, confirm, icon, visible } = getKnobs();
   const { onConfirm, onDismiss } = defaultActions;
   return (
@@ -42,4 +43,4 @@ ConfirmModalStories.add('default', () => {
       onDismiss={onDismiss}
     />
   );
-});
+};

packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx

@@ -9,7 +9,7 @@ import { HorizontalGroup } from '..';
 
 const defaultIcon: IconName = 'exclamation-triangle';
 
-interface Props {
+export interface Props {
   isOpen: boolean;
   title: string;
   body: React.ReactNode;

packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.story.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
+
 import { DataSourceHttpSettings } from './DataSourceHttpSettings';
 import { DataSourceSettings } from '@grafana/data';
 import { UseState } from '../../utils/storybook/UseState';
@@ -31,9 +31,12 @@ const settingsMock: DataSourceSettings<any, any> = {
   readOnly: true,
 };
 
-const DataSourceHttpSettingsStories = storiesOf('Data Source/DataSourceHttpSettings', module);
+export default {
+  title: 'Data Source/DataSourceHttpSettings',
+  component: DataSourceHttpSettings,
+};
 
-DataSourceHttpSettingsStories.add('default', () => {
+export const basic = () => {
   return (
     <UseState initialState={settingsMock} logState>
       {(dataSourceSettings, updateDataSourceSettings) => {
@@ -48,4 +51,4 @@ DataSourceHttpSettingsStories.add('default', () => {
       }}
     </UseState>
   );
-});
+};

packages/grafana-ui/src/components/FormField/FormField.story.internal.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { number, text } from '@storybook/addon-knobs';
 
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
@@ -14,16 +13,18 @@ const getKnobs = () => {
   };
 };
 
-const FormFieldStories = storiesOf('Forms/Legacy/FormField', module);
+export default {
+  title: 'Forms/Legacy/FormField',
+  component: FormField,
+  decorators: [withCenteredStory],
+};
 
-FormFieldStories.addDecorator(withCenteredStory);
-
-FormFieldStories.add('default', () => {
+export const basic = () => {
   const { inputWidth, label, labelWidth } = getKnobs();
   return <FormField label={label} labelWidth={labelWidth} inputWidth={inputWidth} />;
-});
+};
 
-FormFieldStories.add('with tooltip', () => {
+export const withTooltip = () => {
   const { inputWidth, label, labelWidth, tooltip } = getKnobs();
   return <FormField label={label} labelWidth={labelWidth} inputWidth={inputWidth} tooltip={tooltip} />;
-});
+};