Storybook: Rewrite stories to CSF (#23989)

* ColorPicker to CSF format

* Convert stories to CSF

* Do not export ClipboardButton

* Update ConfirmButton

* Remove unused imports

* Fix feedback

packages/grafana-ui/src/components/ColorPicker/ColorPicker.mdx

@@ -1,4 +1,5 @@
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta, Props } from '@storybook/addon-docs/blocks';
+import { ColorPicker } from './ColorPicker';
 
 <Meta title="Pickers and Editors/ColorPicker/ColorPicker" />
 
@@ -9,3 +10,5 @@ The `ColorPicker` component group consists of several building blocks that are c
 The `Popover` is a tabbed view where you can switch between `Palettes`. The `NamedColorsPalette` shows an arrangement of preset colors, while the `SpectrumPalette` is an unlimited HSB color picker. The preset colors are opimized to work well with both light and dark theme. `Popover` is triggered, for example, by the series legend of graphs, or by `Pickers`.
 
 The `Pickers` are single circular color fields that show the currently picked color. On click, they open the `Popover`.
+
+<Props of={ColorPicker} />

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

@@ -1,11 +1,11 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { boolean } from '@storybook/addon-knobs';
 import { SeriesColorPicker, ColorPicker } from './ColorPicker';
 import { action } from '@storybook/addon-actions';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { UseState } from '../../utils/storybook/UseState';
 import { renderComponentWithTheme } from '../../utils/storybook/withTheme';
+import mdx from './ColorPicker.mdx';
 
 const getColorPickerKnobs = () => {
   return {
@@ -13,11 +13,19 @@ const getColorPickerKnobs = () => {
   };
 };
 
-const ColorPickerStories = storiesOf('Pickers and Editors/ColorPicker/Pickers', module);
+export default {
+  title: 'Pickers and Editors/ColorPicker',
+  component: ColorPicker,
+  subcomponents: { SeriesColorPicker },
+  decorators: [withCenteredStory],
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+};
 
-ColorPickerStories.addDecorator(withCenteredStory);
-
-ColorPickerStories.add('default', () => {
+export const basic = () => {
   const { enableNamedColors } = getColorPickerKnobs();
 
   return (
@@ -34,9 +42,9 @@ ColorPickerStories.add('default', () => {
       }}
     </UseState>
   );
-});
+};
 
-ColorPickerStories.add('Series color picker', () => {
+export const seriesColorPicker = () => {
   const { enableNamedColors } = getColorPickerKnobs();
 
   return (
@@ -65,4 +73,4 @@ ColorPickerStories.add('Series color picker', () => {
       }}
     </UseState>
   );
-});
+};

packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.story.tsx

@@ -1,27 +1,30 @@
-import { storiesOf } from '@storybook/react';
 import { ColorPickerPopover } from './ColorPickerPopover';
 
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { SeriesColorPickerPopover } from './SeriesColorPickerPopover';
 import { renderComponentWithTheme } from '../../utils/storybook/withTheme';
-const ColorPickerPopoverStories = storiesOf('Pickers and Editors/ColorPicker/Popovers', module);
 
-ColorPickerPopoverStories.addDecorator(withCenteredStory);
+export default {
+  title: 'Pickers and Editors/ColorPicker/Popovers',
+  component: ColorPickerPopover,
+  subcomponents: { SeriesColorPickerPopover },
+  decorators: [withCenteredStory],
+};
 
-ColorPickerPopoverStories.add('default', () => {
+export const basic = () => {
   return renderComponentWithTheme(ColorPickerPopover, {
     color: '#BC67E6',
     onChange: (color: any) => {
       console.log(color);
     },
   });
-});
+};
 
-ColorPickerPopoverStories.add('SeriesColorPickerPopover', () => {
+export const seriesColorPickerPopover = () => {
   return renderComponentWithTheme(SeriesColorPickerPopover, {
     color: '#BC67E6',
     onChange: (color: any) => {
       console.log(color);
     },
   });
-});
+};

packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.story.tsx

@@ -1,21 +1,28 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { NamedColorsPalette } from './NamedColorsPalette';
 import { getColorName, getColorDefinitionByName } from '@grafana/data';
 import { select } from '@storybook/addon-knobs';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { renderComponentWithTheme } from '../../utils/storybook/withTheme';
 import { UseState } from '../../utils/storybook/UseState';
+import mdx from './ColorPicker.mdx';
 
 const BasicGreen = getColorDefinitionByName('green');
 const BasicRed = getColorDefinitionByName('red');
 const LightBlue = getColorDefinitionByName('light-blue');
 
-const NamedColorsPaletteStories = storiesOf('Pickers and Editors/ColorPicker/Palettes/NamedColorsPalette', module);
+export default {
+  title: 'Pickers and Editors/ColorPicker/Palettes/NamedColorsPalette',
+  component: NamedColorsPalette,
+  decorators: [withCenteredStory],
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+};
 
-NamedColorsPaletteStories.addDecorator(withCenteredStory);
-
-NamedColorsPaletteStories.add('Named colors swatch - support for named colors', () => {
+export const namedColors = () => {
   const selectedColor = select(
     'Selected color',
     {
@@ -36,16 +43,15 @@ NamedColorsPaletteStories.add('Named colors swatch - support for named colors',
       }}
     </UseState>
   );
-}).add('Named colors swatch - support for hex values', () => {
-  const selectedColor = select(
-    'Selected color',
-    {
-      Green: BasicGreen.variants.dark,
-      Red: BasicRed.variants.dark,
-      'Light blue': LightBlue.variants.dark,
-    },
-    'red'
-  );
+};
+
+export const hexValues = () => {
+  let hexVals: any = {};
+  hexVals[BasicGreen.variants.dark] = BasicGreen.variants.dark;
+  hexVals[BasicRed.variants.dark] = BasicRed.variants.dark;
+  hexVals[LightBlue.variants.dark] = LightBlue.variants.dark;
+
+  const selectedColor = select('Selected color', hexVals, 'red');
   return (
     <UseState initialState={selectedColor}>
       {(selectedColor, updateSelectedColor) => {
@@ -56,4 +62,4 @@ NamedColorsPaletteStories.add('Named colors swatch - support for named colors',
       }}
     </UseState>
   );
-});
+};

packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.tsx

@@ -3,7 +3,7 @@ import { Color, getNamedColorPalette } from '@grafana/data';
 import { Themeable } from '../../types/index';
 import NamedColorsGroup from './NamedColorsGroup';
 
-interface NamedColorsPaletteProps extends Themeable {
+export interface NamedColorsPaletteProps extends Themeable {
   color?: Color;
   onChange: (colorName: string) => void;
 }

packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.story.tsx

@@ -1,15 +1,22 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import SpectrumPalette from './SpectrumPalette';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { UseState } from '../../utils/storybook/UseState';
 import { renderComponentWithTheme } from '../../utils/storybook/withTheme';
+import mdx from './ColorPicker.mdx';
 
-const SpectrumPaletteStories = storiesOf('Pickers and Editors/ColorPicker/Palettes/SpectrumPalette', module);
+export default {
+  title: 'Pickers and Editors/ColorPicker/Palettes/SpectrumPalette',
+  component: SpectrumPalette,
+  decorators: [withCenteredStory],
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+};
 
-SpectrumPaletteStories.addDecorator(withCenteredStory);
-
-SpectrumPaletteStories.add('default', () => {
+export const simple = () => {
   return (
     <UseState initialState="red">
       {(selectedColor, updateSelectedColor) => {
@@ -17,4 +24,4 @@ SpectrumPaletteStories.add('default', () => {
       }}
     </UseState>
   );
-});
+};

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

@@ -1,11 +1,10 @@
-export { ClipboardButton } from '../ClipboardButton/ClipboardButton';
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { text, boolean, select } from '@storybook/addon-knobs';
 import { ConfirmButton } from './ConfirmButton';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { action } from '@storybook/addon-actions';
 import { Button } from '../Button';
+import { DeleteButton } from './DeleteButton';
 
 const getKnobs = () => {
   return {
@@ -27,53 +26,78 @@ const getKnobs = () => {
   };
 };
 
-storiesOf('Buttons/ConfirmButton', module)
-  .addDecorator(withCenteredStory)
-  .add('default', () => {
-    const { size, buttonText, confirmText, confirmVariant, disabled, closeOnConfirm } = getKnobs();
-    return (
-      <>
-        <div className="gf-form-group">
-          <div className="gf-form">
-            <ConfirmButton
-              closeOnConfirm={closeOnConfirm}
-              size={size}
-              confirmText={confirmText}
-              disabled={disabled}
-              confirmVariant={confirmVariant}
-              onConfirm={() => {
-                action('Saved')('save!');
-              }}
-            >
+export default {
+  title: 'Buttons/ConfirmButton',
+  component: ConfirmButton,
+  decorators: [withCenteredStory],
+  subcomponents: { DeleteButton },
+};
+
+export const basic = () => {
+  const { size, buttonText, confirmText, confirmVariant, disabled, closeOnConfirm } = getKnobs();
+  return (
+    <>
+      <div className="gf-form-group">
+        <div className="gf-form">
+          <ConfirmButton
+            closeOnConfirm={closeOnConfirm}
+            size={size}
+            confirmText={confirmText}
+            disabled={disabled}
+            confirmVariant={confirmVariant}
+            onConfirm={() => {
+              action('Saved')('save!');
+            }}
+          >
+            {buttonText}
+          </ConfirmButton>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export const withCustomButton = () => {
+  const { buttonText, confirmText, confirmVariant, disabled, size, closeOnConfirm } = getKnobs();
+  return (
+    <>
+      <div className="gf-form-group">
+        <div className="gf-form">
+          <ConfirmButton
+            closeOnConfirm={closeOnConfirm}
+            size={size}
+            confirmText={confirmText}
+            disabled={disabled}
+            confirmVariant={confirmVariant}
+            onConfirm={() => {
+              action('Saved')('save!');
+            }}
+          >
+            <Button size={size} variant="secondary" icon="pen">
               {buttonText}
-            </ConfirmButton>
-          </div>
+            </Button>
+          </ConfirmButton>
         </div>
-      </>
-    );
-  })
-  .add('with custom button', () => {
-    const { buttonText, confirmText, confirmVariant, disabled, size, closeOnConfirm } = getKnobs();
-    return (
-      <>
-        <div className="gf-form-group">
-          <div className="gf-form">
-            <ConfirmButton
-              closeOnConfirm={closeOnConfirm}
-              size={size}
-              confirmText={confirmText}
-              disabled={disabled}
-              confirmVariant={confirmVariant}
-              onConfirm={() => {
-                action('Saved')('save!');
-              }}
-            >
-              <Button size={size} variant="secondary" icon="pen">
-                {buttonText}
-              </Button>
-            </ConfirmButton>
-          </div>
+      </div>
+    </>
+  );
+};
+
+export const deleteButton = () => {
+  const { disabled, size } = getKnobs();
+  return (
+    <>
+      <div className="gf-form-group">
+        <div className="gf-form">
+          <DeleteButton
+            size={size}
+            disabled={disabled}
+            onConfirm={() => {
+              action('Deleted')('delete!');
+            }}
+          />
         </div>
-      </>
-    );
-  });
+      </div>
+    </>
+  );
+};

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

@@ -52,7 +52,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
   };
 });
 
-interface Props extends Themeable {
+export interface Props extends Themeable {
   className?: string;
   size?: ComponentSize;
   confirmText?: string;

packages/grafana-ui/src/components/ConfirmButton/DeleteButton.story.tsx

@@ -1,34 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { boolean, select } from '@storybook/addon-knobs';
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-import { action } from '@storybook/addon-actions';
-import { DeleteButton } from './DeleteButton';
-
-const getKnobs = () => {
-  return {
-    size: select('Size', ['sm', 'md', 'lg'], 'md'),
-    disabled: boolean('Disabled', false),
-  };
-};
-
-storiesOf('Buttons/ConfirmButton', module)
-  .addDecorator(withCenteredStory)
-  .add('delete button', () => {
-    const { disabled, size } = getKnobs();
-    return (
-      <>
-        <div className="gf-form-group">
-          <div className="gf-form">
-            <DeleteButton
-              size={size}
-              disabled={disabled}
-              onConfirm={() => {
-                action('Deleted')('delete!');
-              }}
-            />
-          </div>
-        </div>
-      </>
-    );
-  });

packages/grafana-ui/src/components/ConfirmButton/DeleteButton.tsx

@@ -3,7 +3,7 @@ import { ConfirmButton } from './ConfirmButton';
 import { ComponentSize } from '../../types/size';
 import { Button } from '../Button';
 
-interface Props {
+export interface Props {
   size?: ComponentSize;
   disabled?: boolean;
   onConfirm(): void;

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

@@ -1,20 +1,22 @@
 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 { TagsInput } from './TagsInput';
 
-const TagsInputStories = storiesOf('Forms/TagsInput', module);
 const mockTags = ['Some', 'Tags', 'With', 'This', 'New', 'Component'];
 
-TagsInputStories.addDecorator(withCenteredStory);
+export default {
+  title: 'Forms/TagsInput',
+  component: TagsInput,
+  decorators: [withCenteredStory],
+};
 
-TagsInputStories.add('default', () => {
+export const basic = () => {
   return <TagsInput tags={[]} onChange={tags => action('tags updated')(tags)} />;
-});
+};
 
-TagsInputStories.add('with mock tags', () => {
+export const withMockTags = () => {
   return (
     <UseState initialState={mockTags}>
       {tags => {
@@ -22,4 +24,4 @@ TagsInputStories.add('with mock tags', () => {
       }}
     </UseState>
   );
-});
+};