From aeb88015abbbdda601fa062b2d40dc409d0dfa66 Mon Sep 17 00:00:00 2001 From: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com> Date: Mon, 23 Mar 2020 17:54:48 +0100 Subject: [PATCH] Storybook: Fix broken stories (#22975) * Rewrite to CSF and make it not crash * Move comments to be in generated docs * Fix broken ThresholdsEditor story * Fix breaking Select docs --- .../grafana-data/src/types/displayValue.ts | 15 +++++-- packages/grafana-data/src/types/thresholds.ts | 20 +++++++-- .../components/Forms/Select/Select.story.tsx | 31 +------------- .../components/Forms/Select/mockOptions.tsx | 32 +++++++++++++++ .../components/PieChart/PieChart.story.tsx | 41 ++++++++----------- .../ThresholdsEditor.story.tsx | 36 +++++++++------- .../ValuePicker/ValuePicker.story.tsx | 2 +- 7 files changed, 101 insertions(+), 76 deletions(-) create mode 100644 packages/grafana-ui/src/components/Forms/Select/mockOptions.tsx diff --git a/packages/grafana-data/src/types/displayValue.ts b/packages/grafana-data/src/types/displayValue.ts index 3c5c30d0bb0..b8542c881cb 100644 --- a/packages/grafana-data/src/types/displayValue.ts +++ b/packages/grafana-data/src/types/displayValue.ts @@ -3,9 +3,18 @@ import { FormattedValue } from '../valueFormats'; export type DisplayProcessor = (value: any) => DisplayValue; export interface DisplayValue extends FormattedValue { - numeric: number; // Use isNaN to check if it is a real number - percent?: number; // 0-1 between min & max - color?: string; // color based on configs or Threshold + /** + * Use isNaN to check if it is a real number + */ + numeric: number; + /** + * 0-1 between min & max + */ + percent?: number; + /** + * Color based on configs or Threshold + */ + color?: string; title?: string; } diff --git a/packages/grafana-data/src/types/thresholds.ts b/packages/grafana-data/src/types/thresholds.ts index ecd4046c4bf..4b3079850f0 100644 --- a/packages/grafana-data/src/types/thresholds.ts +++ b/packages/grafana-data/src/types/thresholds.ts @@ -1,17 +1,31 @@ export interface Threshold { value: number; color: string; - state?: string; // Warning, Error, LowLow, Low, OK, High, HighHigh etc + /** + * Warning, Error, LowLow, Low, OK, High, HighHigh etc + */ + state?: string; } +/** + * Display mode + */ export enum ThresholdsMode { Absolute = 'absolute', - Percentage = 'percentage', // between 0 and 1 (based on min/max) + /** + * between 0 and 1 (based on min/max) + */ + Percentage = 'percentage', } +/** + * Config that is passed to the ThresholdsEditor + */ export interface ThresholdsConfig { mode: ThresholdsMode; - // Must be sorted by 'value', first value is always -Infinity + /** + * Must be sorted by 'value', first value is always -Infinity + */ steps: Threshold[]; } diff --git a/packages/grafana-ui/src/components/Forms/Select/Select.story.tsx b/packages/grafana-ui/src/components/Forms/Select/Select.story.tsx index 5e42121c6d2..64aef4fc9ee 100644 --- a/packages/grafana-ui/src/components/Forms/Select/Select.story.tsx +++ b/packages/grafana-ui/src/components/Forms/Select/Select.story.tsx @@ -9,6 +9,7 @@ import { Button } from '../Button'; import { ButtonSelect } from './ButtonSelect'; import { getIconKnob } from '../../../utils/storybook/knobs'; import kebabCase from 'lodash/kebabCase'; +import { generateOptions } from './mockOptions'; export default { title: 'Forms/Select', @@ -16,36 +17,6 @@ export default { decorators: [withCenteredStory, withHorizontallyCenteredStory], }; -export const generateOptions = () => { - const values = [ - 'Sharilyn Markowitz', - 'Naomi Striplin', - 'Beau Bevel', - 'Garrett Starkes', - 'Hildegarde Pedro', - 'Gudrun Seyler', - 'Eboni Raines', - 'Hye Felix', - 'Chau Brito', - 'Heidy Zook', - 'Karima Husain', - 'Virgil Mckinny', - 'Kaley Dodrill', - 'Sharan Ruf', - 'Edgar Loveland', - 'Judie Sanger', - 'Season Bundrick', - 'Ok Vicente', - 'Garry Spitz', - 'Han Harnish', - ]; - - return values.map>(name => ({ - value: kebabCase(name), - label: name, - })); -}; - const loadAsyncOptions = () => { return new Promise>>(resolve => { setTimeout(() => { diff --git a/packages/grafana-ui/src/components/Forms/Select/mockOptions.tsx b/packages/grafana-ui/src/components/Forms/Select/mockOptions.tsx new file mode 100644 index 00000000000..e4d181fb18b --- /dev/null +++ b/packages/grafana-ui/src/components/Forms/Select/mockOptions.tsx @@ -0,0 +1,32 @@ +import { SelectableValue } from '@grafana/data'; +import { kebabCase } from 'lodash'; + +export const generateOptions = () => { + const values = [ + 'Sharilyn Markowitz', + 'Naomi Striplin', + 'Beau Bevel', + 'Garrett Starkes', + 'Hildegarde Pedro', + 'Gudrun Seyler', + 'Eboni Raines', + 'Hye Felix', + 'Chau Brito', + 'Heidy Zook', + 'Karima Husain', + 'Virgil Mckinny', + 'Kaley Dodrill', + 'Sharan Ruf', + 'Edgar Loveland', + 'Judie Sanger', + 'Season Bundrick', + 'Ok Vicente', + 'Garry Spitz', + 'Han Harnish', + ]; + + return values.map>(name => ({ + value: kebabCase(name), + label: name, + })); +}; diff --git a/packages/grafana-ui/src/components/PieChart/PieChart.story.tsx b/packages/grafana-ui/src/components/PieChart/PieChart.story.tsx index bc694429cfa..761afb95d4d 100644 --- a/packages/grafana-ui/src/components/PieChart/PieChart.story.tsx +++ b/packages/grafana-ui/src/components/PieChart/PieChart.story.tsx @@ -1,42 +1,35 @@ -import { storiesOf } from '@storybook/react'; -import { number, text, object } from '@storybook/addon-knobs'; +import React from 'react'; +import { number, object, select } from '@storybook/addon-knobs'; import { PieChart, PieChartType } from './PieChart'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; -import { renderComponentWithTheme } from '../../utils/storybook/withTheme'; + +export default { + title: 'Visualizations/PieChart', + decorators: [withCenteredStory], + component: PieChart, +}; const getKnobs = () => { return { datapoints: object('datapoints', [ { - value: 100, - name: '100', + numeric: 100, + text: '100', color: '#7EB26D', }, { - value: 200, - name: '200', + numeric: 200, + text: '200', color: '#6ED0E0', }, ]), - pieType: text('pieType', PieChartType.PIE), + pieType: select('pieType', [PieChartType.PIE, PieChartType.DONUT], PieChartType.PIE), strokeWidth: number('strokeWidth', 1), - unit: text('unit', 'ms'), }; }; -const PieChartStories = storiesOf('Visualizations/PieChart', module); +export const basic = () => { + const { datapoints, pieType, strokeWidth } = getKnobs(); -PieChartStories.addDecorator(withCenteredStory); - -PieChartStories.add('Pie type: pie', () => { - const { datapoints, pieType, strokeWidth, unit } = getKnobs(); - - return renderComponentWithTheme(PieChart, { - width: 200, - height: 400, - datapoints, - pieType, - strokeWidth, - unit, - }); -}); + return ; +}; diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.story.tsx b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.story.tsx index 968b56e3467..10b3c4faa4a 100644 --- a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.story.tsx +++ b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.story.tsx @@ -1,23 +1,29 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; +import { object } from '@storybook/addon-knobs'; import { ThresholdsEditor } from './ThresholdsEditor'; -import { ThresholdsMode, ThresholdsConfig } from '@grafana/data'; +import { ThresholdsMode } from '@grafana/data'; -const ThresholdsEditorStories = storiesOf('Panel/ThresholdsEditor', module); -const thresholds: ThresholdsConfig = { - mode: ThresholdsMode.Absolute, - steps: [ - { value: -Infinity, color: 'green' }, - { value: 50, color: 'red' }, - ], +export default { + title: 'Panel/ThresholdsEditor', + component: ThresholdsEditor, }; -ThresholdsEditorStories.add('default', () => { - return ; -}); +const getKnobs = () => { + return { + initThresholds: object('Initial thresholds', { + mode: ThresholdsMode.Absolute, + steps: [ + { value: -Infinity, color: 'green' }, + { value: 50, color: 'red' }, + ], + }), + }; +}; -ThresholdsEditorStories.add('with thresholds', () => { - return ; -}); +export const basic = () => ; + +export const withThresholds = () => ( + +); diff --git a/packages/grafana-ui/src/components/ValuePicker/ValuePicker.story.tsx b/packages/grafana-ui/src/components/ValuePicker/ValuePicker.story.tsx index 629141b5c82..fc9038c2864 100644 --- a/packages/grafana-ui/src/components/ValuePicker/ValuePicker.story.tsx +++ b/packages/grafana-ui/src/components/ValuePicker/ValuePicker.story.tsx @@ -2,7 +2,7 @@ import { text } from '@storybook/addon-knobs'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; import { ValuePicker } from './ValuePicker'; import React from 'react'; -import { generateOptions } from '../Forms/Select/Select.story'; +import { generateOptions } from '../Forms/Select/mockOptions'; export default { title: 'General/ValuePicker',