From f01441f4a794a42e5494c5f90ba810ffa3dc5918 Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Fri, 25 Jan 2019 12:03:42 +0100 Subject: [PATCH] Stories cleanup --- .../ColorPicker/ColorPicker.story.tsx | 50 ++------ .../ColorPicker/ColorPickerPopover.story.tsx | 70 +++++------ .../ColorPicker/NamedColorsPalette.story.tsx | 116 +++++++----------- .../ColorPicker/SpectrumPalette.story.tsx | 73 +++-------- .../src/utils/storybook/UseState.tsx | 38 ++++++ .../src/utils/storybook/themeKnob.ts | 14 +++ .../src/utils/storybook/withCenteredStory.tsx | 19 +++ 7 files changed, 176 insertions(+), 204 deletions(-) create mode 100644 packages/grafana-ui/src/utils/storybook/UseState.tsx create mode 100644 packages/grafana-ui/src/utils/storybook/themeKnob.ts create mode 100644 packages/grafana-ui/src/utils/storybook/withCenteredStory.tsx diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.tsx index d4a0734fd2f..19ae2fda978 100644 --- a/packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.tsx @@ -1,48 +1,24 @@ -import React, { FunctionComponent } from 'react'; +import React from 'react'; import { storiesOf } from '@storybook/react'; -import { SeriesColorPicker } from './ColorPicker'; -import { ColorPicker } from './ColorPicker'; -import { UseState } from './NamedColorsPalette.story'; -import { withKnobs, select, boolean } from '@storybook/addon-knobs'; +import { withKnobs, boolean } from '@storybook/addon-knobs'; +import { SeriesColorPicker, ColorPicker } from './ColorPicker'; import { action } from '@storybook/addon-actions'; -import { GrafanaTheme } from '../../types'; +import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; +import { UseState } from '../../utils/storybook/UseState'; +import { getThemeKnob } from '../../utils/storybook/themeKnob'; -// TODO: extract to decorators -export const CenteredStory: FunctionComponent<{}> = ({ children }) => { - return ( -
- {children} -
- ); -}; - -const getColorPickerKnobs = (defaultTheme: GrafanaTheme = GrafanaTheme.Light, enableNamedColors?: boolean) => { +const getColorPickerKnobs = () => { return { - selectedTheme: select( - 'Theme', - { - Default: '', - Light: GrafanaTheme.Light, - Dark: GrafanaTheme.Dark, - }, - defaultTheme - ), - enableNamedColors: boolean('Enable named colors', !!enableNamedColors), + selectedTheme: getThemeKnob(), + enableNamedColors: boolean('Enable named colors', false), }; }; -const ColorPickerStories = storiesOf('UI/ColorPicker', module); -ColorPickerStories.addDecorator(story => {story()}); -ColorPickerStories.addDecorator(withKnobs); +const ColorPickerStories = storiesOf('UI/ColorPicker/Pickers', module); -ColorPickerStories.add('Color picker', () => { +ColorPickerStories.addDecorator(withCenteredStory).addDecorator(withKnobs); + +ColorPickerStories.add('default', () => { const { selectedTheme, enableNamedColors } = getColorPickerKnobs(); return ( diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.story.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.story.tsx index a74cbaec889..dc51819a413 100644 --- a/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.story.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.story.tsx @@ -1,44 +1,40 @@ -import React, { FunctionComponent } from 'react'; +import React from 'react'; import { storiesOf } from '@storybook/react'; import { ColorPickerPopover } from './ColorPickerPopover'; -import { withKnobs, select } from '@storybook/addon-knobs'; -import { GrafanaTheme } from '../../types'; +import { withKnobs } from '@storybook/addon-knobs'; + +import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; +import { getThemeKnob } from '../../utils/storybook/themeKnob'; +import { SeriesColorPickerPopover } from './SeriesColorPickerPopover'; + +const ColorPickerPopoverStories = storiesOf('UI/ColorPicker/Popovers', module); + +ColorPickerPopoverStories.addDecorator(withCenteredStory).addDecorator(withKnobs); + +ColorPickerPopoverStories.add('default', () => { + const selectedTheme = getThemeKnob(); -const CenteredStory: FunctionComponent<{}> = ({ children }) => { return ( -
{ + console.log(color); }} - > - {children} -
+ theme={selectedTheme || undefined} + /> ); -}; +}); -storiesOf('UI/ColorPickerPopover', module) - .addDecorator(story => {story()}) - .addDecorator(withKnobs) - .add('default', () => { - const selectedTheme = select( - 'Theme', - { - Default: '', - Light: GrafanaTheme.Light, - Dark: GrafanaTheme.Dark, - }, - GrafanaTheme.Light - ); - return ( - { - console.log(color); - }} - theme={selectedTheme || undefined} - /> - ); - }); +ColorPickerPopoverStories.add('SeriesColorPickerPopover', () => { + const selectedTheme = getThemeKnob(); + + return ( + { + console.log(color); + }} + theme={selectedTheme || undefined} + /> + ); +}); diff --git a/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.story.tsx b/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.story.tsx index d6ac287c7fc..a530318d6c9 100644 --- a/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.story.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.story.tsx @@ -1,80 +1,48 @@ -import React, { FunctionComponent } from 'react'; +import React from 'react'; import { storiesOf } from '@storybook/react'; import { NamedColorsPalette } from './NamedColorsPalette'; -import { getColorName } from '../../utils/namedColorsPalette'; +import { getColorName, BasicGreen, BasicBlue, LightBlue } from '../../utils/namedColorsPalette'; import { withKnobs, select } from '@storybook/addon-knobs'; +import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; +import { UseState } from '../../utils/storybook/UseState'; -const CenteredStory: FunctionComponent<{}> = ({ children }) => { - return ( -
- {children} -
+const NamedColorsPaletteStories = storiesOf('UI/ColorPicker/Palettes/NamedColorsPalette', module); + +NamedColorsPaletteStories.addDecorator(withKnobs).addDecorator(withCenteredStory); + +NamedColorsPaletteStories.add('Named colors swatch - support for named colors', () => { + const selectedColor = select( + 'Selected color', + { + Green: 'green', + Red: 'red', + 'Light blue': 'light-blue', + }, + 'red' ); -}; -interface StateHolderProps { - initialState: T; - children: (currentState: T, updateState: (nextState: T) => void) => JSX.Element; -} - -export class UseState extends React.Component, { value: T }> { - constructor(props: StateHolderProps) { - super(props); - this.state = { - value: props.initialState, - }; - } - - static getDerivedStateFromProps(props: StateHolderProps<{}>, state: { value: {} }) { - return { - value: props.initialState, - ...state, - }; - } - - handleStateUpdate = (nextState: T) => { - this.setState({ value: nextState }); - }; - render() { - return this.props.children(this.state.value, this.handleStateUpdate); - } -} - -storiesOf('UI/NamedColorsPalette', module) - .addDecorator(withKnobs) - .addDecorator(story => {story()}) - .add('Named colors swatch - support for named colors', () => { - const selectedColor = select( - 'Selected color', - { - Green: 'green', - Red: 'red', - 'Light blue': 'light-blue', - }, - 'green' - ); - - return ( - - {(selectedColor, updateSelectedColor) => { - return ; - }} - - ); - }) - .add('Named colors swatch - support for hex values', () => { - return ( - - {(selectedColor, updateSelectedColor) => { - return ; - }} - - ); - }); + return ( + + {(selectedColor, updateSelectedColor) => { + return ; + }} + + ); +}).add('Named colors swatch - support for hex values', () => { + const selectedColor = select( + 'Selected color', + { + Green: BasicGreen.variants.dark, + Red: BasicBlue.variants.dark, + 'Light blue': LightBlue.variants.dark, + }, + 'red' + ); + return ( + + {(selectedColor, updateSelectedColor) => { + return ; + }} + + ); +}); diff --git a/packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.story.tsx b/packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.story.tsx index 0425f12d6ec..407564cdfb2 100644 --- a/packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.story.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.story.tsx @@ -1,62 +1,23 @@ -import React, { FunctionComponent } from 'react'; +import React from 'react'; import { storiesOf } from '@storybook/react'; +import { withKnobs } from '@storybook/addon-knobs'; + import SpectrumPalette from './SpectrumPalette'; -import { withKnobs, select } from '@storybook/addon-knobs'; -import { GrafanaTheme } from '../../types'; +import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; +import { UseState } from '../../utils/storybook/UseState'; +import { getThemeKnob } from '../../utils/storybook/themeKnob'; -const CenteredStory: FunctionComponent<{}> = ({ children }) => { +const SpectrumPaletteStories = storiesOf('UI/ColorPicker/Palettes/SpectrumPalette', module); + +SpectrumPaletteStories.addDecorator(withCenteredStory).addDecorator(withKnobs); + +SpectrumPaletteStories.add('Named colors swatch - support for named colors', () => { + const selectedTheme = getThemeKnob(); return ( -
+ {(selectedColor, updateSelectedColor) => { + return ; }} - > - {children} -
+ ); -}; - -interface StateHolderProps { - initialState: T; - children: (currentState: T, updateState: (nextState: T) => void) => JSX.Element; -} - -export class UseState extends React.Component, { value: T }> { - constructor(props: StateHolderProps) { - super(props); - this.state = { - value: props.initialState, - }; - } - - handleStateUpdate = (nextState: T) => { - this.setState({ value: nextState }); - }; - render() { - return this.props.children(this.state.value, this.handleStateUpdate); - } -} - -storiesOf('UI/SpectrumPalette', module) - .addDecorator(story => {story()}) - .addDecorator(withKnobs) - .add('Named colors swatch - support for named colors', () => { - const selectedTheme = select( - 'Theme', - { - Light: GrafanaTheme.Light, - Dark: GrafanaTheme.Dark, - }, - GrafanaTheme.Light - ); - return ( - - {(selectedColor, updateSelectedColor) => { - return ; - }} - - ); - }); +}); diff --git a/packages/grafana-ui/src/utils/storybook/UseState.tsx b/packages/grafana-ui/src/utils/storybook/UseState.tsx new file mode 100644 index 00000000000..cc263b9a456 --- /dev/null +++ b/packages/grafana-ui/src/utils/storybook/UseState.tsx @@ -0,0 +1,38 @@ +import React from 'react'; + +interface StateHolderProps { + initialState: T; + children: (currentState: T, updateState: (nextState: T) => void) => JSX.Element; +} + +export class UseState extends React.Component, { value: T; initialState: T }> { + constructor(props: StateHolderProps) { + super(props); + this.state = { + value: props.initialState, + initialState: props.initialState, // To enable control from knobs + }; + } + // @ts-ignore + static getDerivedStateFromProps(props: StateHolderProps<{}>, state: { value: any; initialState: any }) { + if (props.initialState !== state.initialState) { + return { + initialState: props.initialState, + value: props.initialState, + }; + } + return { + ...state, + value: state.value, + }; + } + + handleStateUpdate = (nextState: T) => { + console.log(nextState); + this.setState({ value: nextState }); + }; + + render() { + return this.props.children(this.state.value, this.handleStateUpdate); + } +} diff --git a/packages/grafana-ui/src/utils/storybook/themeKnob.ts b/packages/grafana-ui/src/utils/storybook/themeKnob.ts new file mode 100644 index 00000000000..a3733462bea --- /dev/null +++ b/packages/grafana-ui/src/utils/storybook/themeKnob.ts @@ -0,0 +1,14 @@ +import { select } from '@storybook/addon-knobs'; +import { GrafanaTheme } from '../../types'; + +export const getThemeKnob = (defaultTheme: GrafanaTheme = GrafanaTheme.Dark) => { + return select( + 'Theme', + { + Default: defaultTheme, + Light: GrafanaTheme.Light, + Dark: GrafanaTheme.Dark, + }, + defaultTheme + ); +}; diff --git a/packages/grafana-ui/src/utils/storybook/withCenteredStory.tsx b/packages/grafana-ui/src/utils/storybook/withCenteredStory.tsx new file mode 100644 index 00000000000..af564616f5a --- /dev/null +++ b/packages/grafana-ui/src/utils/storybook/withCenteredStory.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import { RenderFunction } from '@storybook/react'; + +const CenteredStory: React.FunctionComponent<{}> = ({ children }) => { + return ( +
+ {children} +
+ ); +}; + +export const withCenteredStory = (story: RenderFunction) => {story()};