Storybook: Convert final CSF stories (#24283)

* Convert BigValue and GraphLegend

* Convert last stories

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

@@ -1,5 +1,4 @@
-import { storiesOf } from '@storybook/react';
+import { text, select, number, color } from '@storybook/addon-knobs';
-import { text } from '@storybook/addon-knobs';
 import { BigValue, BigValueColorMode, BigValueGraphMode } from './BigValue';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { renderComponentWithTheme } from '../../utils/storybook/withTheme';
@@ -8,51 +7,45 @@ const getKnobs = () => {
   return {
     value: text('value', '$5022'),
     title: text('title', 'Total Earnings'),
+    colorMode: select('Color mode', [BigValueColorMode.Value, BigValueColorMode.Background], BigValueColorMode.Value),
+    graphMode: select('Graph mode', [BigValueGraphMode.Area, BigValueGraphMode.Line], BigValueGraphMode.Area),
+    width: number('Width', 400, { range: true, max: 800, min: 200 }),
+    height: number('Height', 300, { range: true, max: 800, min: 200 }),
+    color: color('Value color', 'red'),
   };
 };
 
-const BigValueStories = storiesOf('Visualizations/BigValue', module);
+export default {
+  title: 'Visualizations/BigValue',
+  component: BigValue,
+  decorators: [withCenteredStory],
+};
 
-BigValueStories.addDecorator(withCenteredStory);
+export const basic = () => {
+  const { value, title, colorMode, graphMode, height, width, color } = getKnobs();
 
-interface StoryOptions {
+  return renderComponentWithTheme(BigValue, {
-  colorMode: BigValueColorMode;
+    width: width,
-  graphMode: BigValueGraphMode;
+    height: height,
-  width?: number;
+    colorMode: colorMode,
-  height?: number;
+    graphMode: graphMode,
-  noSparkline?: boolean;
+    value: {
-}
+      text: value,
-
+      numeric: 5022,
-function addStoryForMode(options: StoryOptions) {
+      color: color,
-  BigValueStories.add(`Color: ${options.colorMode}`, () => {
+      title,
-    const { value, title } = getKnobs();
+    },
-
+    sparkline: {
-    return renderComponentWithTheme(BigValue, {
+      minX: 0,
-      width: options.width || 400,
+      maxX: 5,
-      height: options.height || 300,
+      data: [
-      colorMode: options.colorMode,
+        [0, 10],
-      graphMode: options.graphMode,
+        [1, 20],
-      value: {
+        [2, 15],
-        text: value,
+        [3, 25],
-        numeric: 5022,
+        [4, 5],
-        color: 'red',
+        [5, 10],
-        title,
+      ],
-      },
+    },
-      sparkline: {
-        minX: 0,
-        maxX: 5,
-        data: [
-          [0, 10],
-          [1, 20],
-          [2, 15],
-          [3, 25],
-          [4, 5],
-          [5, 10],
-        ],
-      },
-    });
   });
-}
+};
-
-addStoryForMode({ colorMode: BigValueColorMode.Value, graphMode: BigValueGraphMode.Area });
-addStoryForMode({ colorMode: BigValueColorMode.Background, graphMode: BigValueGraphMode.Line });

packages/grafana-ui/src/components/Graph/GraphLegend.story.tsx

@@ -1,15 +1,16 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
-
 import { GraphLegend } from './GraphLegend';
 import { action } from '@storybook/addon-actions';
 import { select, number } from '@storybook/addon-knobs';
 import { withHorizontallyCenteredStory } from '../../utils/storybook/withCenteredStory';
-import { generateLegendItems } from '../Legend/Legend.story';
+import { generateLegendItems } from '../Legend/Legend';
 import { LegendPlacement, LegendDisplayMode } from '../Legend/Legend';
 
-const GraphLegendStories = storiesOf('Visualizations/Graph/GraphLegend', module);
+export default {
-GraphLegendStories.addDecorator(withHorizontallyCenteredStory);
+  title: 'Visualizations/Graph/GraphLegend',
+  component: GraphLegend,
+  decororators: [withHorizontallyCenteredStory],
+};
 
 const getStoriesKnobs = (isList = false) => {
   const statsToDisplay = select<any>(
@@ -54,7 +55,7 @@ const getStoriesKnobs = (isList = false) => {
   };
 };
 
-GraphLegendStories.add('list', () => {
+export const list = () => {
   const { statsToDisplay, numberOfSeries, containerWidth, legendPlacement } = getStoriesKnobs(true);
   return (
     <div style={{ width: containerWidth }}>
@@ -77,9 +78,9 @@ GraphLegendStories.add('list', () => {
       />
     </div>
   );
-});
+};
 
-GraphLegendStories.add('table', () => {
+export const table = () => {
   const { statsToDisplay, numberOfSeries, containerWidth, legendPlacement } = getStoriesKnobs();
   return (
     <div style={{ width: containerWidth }}>
@@ -102,4 +103,4 @@ GraphLegendStories.add('table', () => {
       />
     </div>
   );
-});
+};

packages/grafana-ui/src/components/Graph/GraphLegend.tsx

@@ -10,7 +10,7 @@ import { ThemeContext } from '../../themes/ThemeContext';
 import { css } from 'emotion';
 import { selectThemeVariant } from '../../themes/index';
 
-interface GraphLegendProps extends LegendProps {
+export interface GraphLegendProps extends LegendProps {
   displayMode: LegendDisplayMode;
   sortBy?: string;
   sortDesc?: boolean;

packages/grafana-ui/src/components/Graph/GraphWithLegend.story.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 
 import { select, text } from '@storybook/addon-knobs';
-import { withHorizontallyCenteredStory } from '../../utils/storybook/withCenteredStory';
+import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { GraphWithLegend, GraphWithLegendProps } from './GraphWithLegend';
 
 import { LegendPlacement, LegendDisplayMode } from '../Legend/Legend';
 import { GraphSeriesXY, FieldType, ArrayVector, dateTime, FieldColorMode } from '@grafana/data';
-const GraphWithLegendStories = storiesOf('Visualizations/Graph/GraphWithLegend', module);
+
-GraphWithLegendStories.addDecorator(withHorizontallyCenteredStory);
+export default {
+  title: 'Visualizations/Graph',
+  component: GraphWithLegend,
+  decorator: [withCenteredStory],
+};
 
 const series: GraphSeriesXY[] = [
   {
@@ -104,7 +107,7 @@ const getStoriesKnobs = () => {
   };
 };
 
-GraphWithLegendStories.add('default', () => {
+export const graphWithLegend = () => {
   const { legendPlacement, rightAxisSeries, renderLegendAsTable } = getStoriesKnobs();
   const props: GraphWithLegendProps = {
     series: series.map(s => {
@@ -138,4 +141,4 @@ GraphWithLegendStories.add('default', () => {
   };
 
   return <GraphWithLegend {...props} />;
-});
+};

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

@@ -1,26 +1,9 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
+import { LegendList, LegendPlacement, LegendItem, LegendTable, generateLegendItems } from './Legend';
-import { LegendList, LegendPlacement, LegendItem, LegendTable } from './Legend';
-import tinycolor from 'tinycolor2';
-import { DisplayValue } from '@grafana/data';
 import { number, select, text } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
 import { GraphLegendListItem, GraphLegendTableRow, GraphLegendItemProps } from '../Graph/GraphLegendItem';
 
-export const generateLegendItems = (numberOfSeries: number, statsToDisplay?: DisplayValue[]): LegendItem[] => {
-  const alphabet = 'abcdefghijklmnopqrstuvwxyz'.split('');
-
-  return [...new Array(numberOfSeries)].map((item, i) => {
-    return {
-      label: `${alphabet[i].toUpperCase()}-series`,
-      color: tinycolor.fromRatio({ h: i / alphabet.length, s: 1, v: 1 }).toHexString(),
-      isVisible: true,
-      yAxis: 1,
-      displayValues: statsToDisplay || [],
-    };
-  });
-};
-
 const getStoriesKnobs = (table = false) => {
   const numberOfSeries = number('Number of series', 3);
   const containerWidth = select(
@@ -87,9 +70,13 @@ const getStoriesKnobs = (table = false) => {
   };
 };
 
-const LegendStories = storiesOf('Visualizations/Legend', module);
+export default {
+  title: 'Visualizations/Legend',
+  component: LegendList,
+  subcomponents: { LegendTable },
+};
 
-LegendStories.add('list', () => {
+export const list = () => {
   const { numberOfSeries, itemRenderer, containerWidth, rightAxisSeries, legendPlacement } = getStoriesKnobs();
   let items = generateLegendItems(numberOfSeries);
 
@@ -110,9 +97,9 @@ LegendStories.add('list', () => {
       <LegendList itemRenderer={itemRenderer} items={items} placement={legendPlacement} />
     </div>
   );
-});
+};
 
-LegendStories.add('table', () => {
+export const table = () => {
   const { numberOfSeries, itemRenderer, containerWidth, rightAxisSeries, legendPlacement } = getStoriesKnobs(true);
   let items = generateLegendItems(numberOfSeries);
 
@@ -139,4 +126,4 @@ LegendStories.add('table', () => {
       <LegendTable itemRenderer={itemRenderer} items={items} columns={['', 'min', 'max']} placement={legendPlacement} />
     </div>
   );
-});
+};

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

@@ -2,6 +2,21 @@ import { DisplayValue } from '@grafana/data';
 
 import { LegendList } from './LegendList';
 import { LegendTable } from './LegendTable';
+import tinycolor from 'tinycolor2';
+
+export const generateLegendItems = (numberOfSeries: number, statsToDisplay?: DisplayValue[]): LegendItem[] => {
+  const alphabet = 'abcdefghijklmnopqrstuvwxyz'.split('');
+
+  return [...new Array(numberOfSeries)].map((item, i) => {
+    return {
+      label: `${alphabet[i].toUpperCase()}-series`,
+      color: tinycolor.fromRatio({ h: i / alphabet.length, s: 1, v: 1 }).toHexString(),
+      isVisible: true,
+      yAxis: 1,
+      displayValues: statsToDisplay || [],
+    };
+  });
+};
 
 export enum LegendDisplayMode {
   List = 'list',

packages/grafana-ui/src/components/Legend/LegendTable.tsx

@@ -4,7 +4,7 @@ import { LegendComponentProps } from './Legend';
 import { Icon } from '../Icon/Icon';
 import { ThemeContext } from '../../themes/ThemeContext';
 
-interface LegendTableProps extends LegendComponentProps {
+export interface LegendTableProps extends LegendComponentProps {
   columns: string[];
   sortBy?: string;
   sortDesc?: boolean;

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

@@ -1,6 +1,5 @@
 import React, { PureComponent } from 'react';
 
-import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { StatsPicker } from './StatsPicker';
@@ -61,9 +60,13 @@ export class WrapperWithState extends PureComponent<any, State> {
   }
 }
 
-const story = storiesOf('Pickers and Editors/StatsPicker', module);
+export default {
-story.addDecorator(withCenteredStory);
+  title: 'Pickers and Editors/StatsPicker',
-story.add('picker', () => {
+  component: StatsPicker,
+  decorators: [withCenteredStory],
+};
+
+export const picker = () => {
   const { placeholder, defaultStat, allowMultiple, initialStats } = getKnobs();
 
   return (
@@ -76,4 +79,4 @@ story.add('picker', () => {
       />
     </div>
   );
-});
+};