From 951bd7130a9a269b58ffeefa11389cf5daad3d23 Mon Sep 17 00:00:00 2001 From: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com> Date: Tue, 5 May 2020 15:42:36 +0200 Subject: [PATCH] Storybook: Convert final CSF stories (#24283) * Convert BigValue and GraphLegend * Convert last stories (cherry picked from commit a2363f4d0c5288f59a8122bbaf76eb8588a0653c) --- .../components/BigValue/BigValue.story.tsx | 81 +++++++++---------- .../components/Graph/GraphLegend.story.tsx | 19 ++--- .../src/components/Graph/GraphLegend.tsx | 2 +- .../Graph/GraphWithLegend.story.tsx | 15 ++-- .../src/components/Legend/Legend.story.tsx | 33 +++----- .../src/components/Legend/Legend.tsx | 15 ++++ .../src/components/Legend/LegendTable.tsx | 2 +- .../StatsPicker/StatsPicker.story.tsx | 13 +-- 8 files changed, 91 insertions(+), 89 deletions(-) diff --git a/packages/grafana-ui/src/components/BigValue/BigValue.story.tsx b/packages/grafana-ui/src/components/BigValue/BigValue.story.tsx index 4020ca41897..e4dc97ff66a 100644 --- a/packages/grafana-ui/src/components/BigValue/BigValue.story.tsx +++ b/packages/grafana-ui/src/components/BigValue/BigValue.story.tsx @@ -1,5 +1,4 @@ -import { storiesOf } from '@storybook/react'; -import { text } from '@storybook/addon-knobs'; +import { text, select, number, color } 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 { - colorMode: BigValueColorMode; - graphMode: BigValueGraphMode; - width?: number; - height?: number; - noSparkline?: boolean; -} - -function addStoryForMode(options: StoryOptions) { - BigValueStories.add(`Color: ${options.colorMode}`, () => { - const { value, title } = getKnobs(); - - return renderComponentWithTheme(BigValue, { - width: options.width || 400, - height: options.height || 300, - colorMode: options.colorMode, - graphMode: options.graphMode, - value: { - text: value, - numeric: 5022, - color: 'red', - title, - }, - sparkline: { - minX: 0, - maxX: 5, - data: [ - [0, 10], - [1, 20], - [2, 15], - [3, 25], - [4, 5], - [5, 10], - ], - }, - }); + return renderComponentWithTheme(BigValue, { + width: width, + height: height, + colorMode: colorMode, + graphMode: graphMode, + value: { + text: value, + numeric: 5022, + color: color, + 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 }); +}; diff --git a/packages/grafana-ui/src/components/Graph/GraphLegend.story.tsx b/packages/grafana-ui/src/components/Graph/GraphLegend.story.tsx index 73c4b95128c..2d8bdc4a5c4 100644 --- a/packages/grafana-ui/src/components/Graph/GraphLegend.story.tsx +++ b/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); -GraphLegendStories.addDecorator(withHorizontallyCenteredStory); +export default { + title: 'Visualizations/Graph/GraphLegend', + component: GraphLegend, + decororators: [withHorizontallyCenteredStory], +}; const getStoriesKnobs = (isList = false) => { const statsToDisplay = select( @@ -54,7 +55,7 @@ const getStoriesKnobs = (isList = false) => { }; }; -GraphLegendStories.add('list', () => { +export const list = () => { const { statsToDisplay, numberOfSeries, containerWidth, legendPlacement } = getStoriesKnobs(true); return (
@@ -77,9 +78,9 @@ GraphLegendStories.add('list', () => { />
); -}); +}; -GraphLegendStories.add('table', () => { +export const table = () => { const { statsToDisplay, numberOfSeries, containerWidth, legendPlacement } = getStoriesKnobs(); return (
@@ -102,4 +103,4 @@ GraphLegendStories.add('table', () => { />
); -}); +}; diff --git a/packages/grafana-ui/src/components/Graph/GraphLegend.tsx b/packages/grafana-ui/src/components/Graph/GraphLegend.tsx index 60851cbf7be..6028570d1d5 100644 --- a/packages/grafana-ui/src/components/Graph/GraphLegend.tsx +++ b/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; diff --git a/packages/grafana-ui/src/components/Graph/GraphWithLegend.story.tsx b/packages/grafana-ui/src/components/Graph/GraphWithLegend.story.tsx index f9a0caa9ee3..d0755e6532f 100644 --- a/packages/grafana-ui/src/components/Graph/GraphWithLegend.story.tsx +++ b/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 ; -}); +}; diff --git a/packages/grafana-ui/src/components/Legend/Legend.story.tsx b/packages/grafana-ui/src/components/Legend/Legend.story.tsx index 0c17958fe9a..f90a589bee1 100644 --- a/packages/grafana-ui/src/components/Legend/Legend.story.tsx +++ b/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 } from './Legend'; -import tinycolor from 'tinycolor2'; -import { DisplayValue } from '@grafana/data'; +import { LegendList, LegendPlacement, LegendItem, LegendTable, generateLegendItems } from './Legend'; 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', () => { ); -}); +}; -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', () => { ); -}); +}; diff --git a/packages/grafana-ui/src/components/Legend/Legend.tsx b/packages/grafana-ui/src/components/Legend/Legend.tsx index a882b37fa6d..4c2badee42c 100644 --- a/packages/grafana-ui/src/components/Legend/Legend.tsx +++ b/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', diff --git a/packages/grafana-ui/src/components/Legend/LegendTable.tsx b/packages/grafana-ui/src/components/Legend/LegendTable.tsx index da627811b3f..ebaf78edfd4 100644 --- a/packages/grafana-ui/src/components/Legend/LegendTable.tsx +++ b/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; diff --git a/packages/grafana-ui/src/components/StatsPicker/StatsPicker.story.tsx b/packages/grafana-ui/src/components/StatsPicker/StatsPicker.story.tsx index 5a47d10908f..77258c6c043 100644 --- a/packages/grafana-ui/src/components/StatsPicker/StatsPicker.story.tsx +++ b/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 { } } -const story = storiesOf('Pickers and Editors/StatsPicker', module); -story.addDecorator(withCenteredStory); -story.add('picker', () => { +export default { + title: 'Pickers and Editors/StatsPicker', + component: StatsPicker, + decorators: [withCenteredStory], +}; + +export const picker = () => { const { placeholder, defaultStat, allowMultiple, initialStats } = getKnobs(); return ( @@ -76,4 +79,4 @@ story.add('picker', () => { /> ); -}); +};