More Storybook csf conversion (#24090)

* Convert ClipboardButton to CSF

* Convert CallToActionCard to CSF

* Convert BarGauge to CSF

* Convert DataSourceHttpSettings to CSF

* Convert ConfirmModal to CSF

* Convert FormField to CSF

* Convert Input to CSF

* Convert ButtonSelect to CSF

* Removed unused import from ButtonSelect story

* Convert InfoTooltip to CSF

* Convert List to CSF

* Convert QueryField to CSF

* Convert RefreshPicker to CSF

* Convert SecretFormField to CSF

packages/grafana-ui/src/components/Forms/Legacy/Input/Input.story.internal.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import { zip, fromPairs } from 'lodash';
 
-import { storiesOf } from '@storybook/react';
 import { withCenteredStory } from '../../../../utils/storybook/withCenteredStory';
 import { Input } from './Input';
 import { text, select } from '@storybook/addon-knobs';
@@ -35,6 +34,10 @@ const Wrapper = () => {
   return <Input value={value} onChange={e => setValue(e.currentTarget.value)} validationEvents={validations} />;
 };
 
-const story = storiesOf('Forms/Legacy/Input', module);
+export default {
-story.addDecorator(withCenteredStory);
+  title: 'Forms/Legacy/Input',
-story.add('input', () => <Wrapper />);
+  component: Input,
+  decorators: [withCenteredStory],
+};
+
+export const basic = () => <Wrapper />;

packages/grafana-ui/src/components/Forms/Legacy/Select/ButtonSelect.story.internal.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { withKnobs, object, text } from '@storybook/addon-knobs';
 import { withCenteredStory } from '../../../../utils/storybook/withCenteredStory';
@@ -7,11 +6,13 @@ import { UseState } from '../../../../utils/storybook/UseState';
 import { SelectableValue } from '@grafana/data';
 import { ButtonSelect } from './ButtonSelect';
 
-const ButtonSelectStories = storiesOf('Forms/Select/ButtonSelect', module);
+export default {
+  title: 'Forms/Select/ButtonSelect',
+  component: ButtonSelect,
+  decorators: [withCenteredStory, withKnobs],
+};
 
-ButtonSelectStories.addDecorator(withCenteredStory).addDecorator(withKnobs);
+export const basic = () => {
-
-ButtonSelectStories.add('default', () => {
   const intialState: SelectableValue<string> = { label: 'A label', value: 'A value' };
   const value = object<SelectableValue<string>>('Selected Value:', intialState);
   const options = object<Array<SelectableValue<string>>>('Options:', [
@@ -38,4 +39,4 @@ ButtonSelectStories.add('default', () => {
       }}
     </UseState>
   );
-});
+};

packages/grafana-ui/src/components/Forms/Legend.story.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { text } from '@storybook/addon-knobs';
 
 import { Legend } from './Legend';
@@ -10,10 +9,13 @@ const getKnobs = () => {
   };
 };
 
-const story = storiesOf('Forms', module);
+export default {
+  title: 'Forms/Legend',
+  component: Legend,
+};
 
-story.add('Legend', () => {
+export const basic = () => {
   const { label } = getKnobs();
 
   return <Legend>{label}</Legend>;
-});
+};

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

@@ -1,9 +1,13 @@
 import React from 'react';
 
-import { storiesOf } from '@storybook/react';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { InfoTooltip } from './InfoTooltip';
+import { Tooltip } from '../Chart/Tooltip';
 
-const story = storiesOf('Overlays/Tooltip', module);
+export default {
-story.addDecorator(withCenteredStory);
+  title: 'Overlays/Tooltip',
-story.add('InfoTooltip', () => <InfoTooltip>This is the content of the tooltip</InfoTooltip>);
+  component: Tooltip,
+  decorators: [withCenteredStory],
+};
+
+export const basic = () => <InfoTooltip>This is the content of the tooltip</InfoTooltip>;

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

@@ -1,12 +1,14 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { number, select } from '@storybook/addon-knobs';
 import { List } from './List';
 import { css, cx } from 'emotion';
 import tinycolor from 'tinycolor2';
 import { InlineList } from './InlineList';
 
-const ListStories = storiesOf('Layout/List', module);
+export default {
+  title: 'Layout/List',
+  component: List,
+};
 
 const generateListItems = (numberOfItems: number) => {
   return [...new Array(numberOfItems)].map((item, i) => {
@@ -57,12 +59,12 @@ const getStoriesKnobs = (inline = false) => {
   };
 };
 
-ListStories.add('default', () => {
+export const basic = () => {
   const { numberOfItems, renderItem } = getStoriesKnobs();
   return <List items={generateListItems(numberOfItems)} renderItem={renderItem} />;
-});
+};
 
-ListStories.add('inline', () => {
+export const inline = () => {
   const { numberOfItems, renderItem } = getStoriesKnobs(true);
   return <InlineList items={generateListItems(numberOfItems)} renderItem={renderItem} />;
-});
+};

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

@@ -1,12 +1,13 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { QueryField } from './QueryField';
 
-const QueryFieldStories = storiesOf('Data Source/QueryField', module);
+export default {
+  title: 'Data Source/QueryField',
+  component: QueryField,
+  decorators: [withCenteredStory],
+};
 
-QueryFieldStories.addDecorator(withCenteredStory);
+export const basic = () => {
-
-QueryFieldStories.add('default', () => {
   return <QueryField portalOrigin="mock-origin" query="" />;
-});
+};

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

@@ -1,15 +1,16 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { UseState } from '../../utils/storybook/UseState';
 import { RefreshPicker } from './RefreshPicker';
 
-const RefreshSelectStories = storiesOf('Pickers and Editors/RefreshPicker', module);
+export default {
+  title: 'Pickers and Editors/RefreshPicker',
+  component: RefreshPicker,
+  decorators: [withCenteredStory],
+};
 
-RefreshSelectStories.addDecorator(withCenteredStory);
+export const basic = () => {
-
-RefreshSelectStories.add('default', () => {
   return (
     <UseState initialState={'1h'}>
       {(value, updateValue) => {
@@ -29,4 +30,4 @@ RefreshSelectStories.add('default', () => {
       }}
     </UseState>
   );
-});
+};

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { boolean } from '@storybook/addon-knobs';
 
@@ -7,16 +6,19 @@ import { SecretFormField } from './SecretFormField';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { UseState } from '../../utils/storybook/UseState';
 
-const SecretFormFieldStories = storiesOf('Forms/SecretFormField', module);
+export default {
+  title: 'Forms/SecretFormField',
+  component: SecretFormField,
+  decorators: [withCenteredStory],
+};
 
-SecretFormFieldStories.addDecorator(withCenteredStory);
 const getSecretFormFieldKnobs = () => {
   return {
     isConfigured: boolean('Set configured state', false),
   };
 };
 
-SecretFormFieldStories.add('default', () => {
+export const basic = () => {
   const knobs = getSecretFormFieldKnobs();
   return (
     <UseState initialState="Input value">
@@ -35,4 +37,4 @@ SecretFormFieldStories.add('default', () => {
       )}
     </UseState>
   );
-});
+};