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

-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,12 +17,13 @@ const getKnobs = () => {
   };
 };
 
-const BarGaugeStories = storiesOf('Visualizations/BarGauge', module);
-
-BarGaugeStories.addDecorator(withCenteredStory);
+export default {
+  title: 'Visualizations/BarGauge',
+  component: BarGauge,
+  decorators: [withCenteredStory],
+};
 
-function addBarGaugeStory(name: string, overrides: Partial<Props>) {
-  BarGaugeStories.add(name, () => {
+function addBarGaugeStory(overrides: Partial<Props>) {
   const {
     value,
     title,
@@ -69,24 +69,23 @@ function addBarGaugeStory(name: string, overrides: Partial<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

 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

 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

 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);
-
-ConfirmModalStories.addDecorator(withCenteredStory);
+export default {
+  title: 'Overlays/ConfirmModal',
+  component: ConfirmModal,
+  decorators: [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

 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

 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);
-
-FormFieldStories.addDecorator(withCenteredStory);
+export default {
+  title: 'Forms/Legacy/FormField',
+  component: FormField,
+  decorators: [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} />;
-});
+};