Stories cleanup

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 (
-    <div
-      style={{
-        height: '100vh  ',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}
-    >
-      {children}
-    </div>
-  );
-};
-
-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 => <CenteredStory>{story()}</CenteredStory>);
-ColorPickerStories.addDecorator(withKnobs);
+const ColorPickerStories = storiesOf('UI/ColorPicker/Pickers', module);
+
+ColorPickerStories.addDecorator(withCenteredStory).addDecorator(withKnobs);
 
-ColorPickerStories.add('Color picker', () => {
+ColorPickerStories.add('default', () => {
   const { selectedTheme, enableNamedColors } = getColorPickerKnobs();
   return (
     <UseState initialState="#00ff00">

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 (
-    <div
-      style={{
-        height: '100vh  ',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
+    <ColorPickerPopover
+      color="#BC67E6"
+      onChange={color => {
+        console.log(color);
       }}
-    >
-      {children}
-    </div>
+      theme={selectedTheme || undefined}
+    />
   );
-};
+});
 
-storiesOf('UI/ColorPickerPopover', module)
-  .addDecorator(story => <CenteredStory>{story()}</CenteredStory>)
-  .addDecorator(withKnobs)
-  .add('default', () => {
-    const selectedTheme = select(
-      'Theme',
-      {
-        Default: '',
-        Light: GrafanaTheme.Light,
-        Dark: GrafanaTheme.Dark,
-      },
-      GrafanaTheme.Light
-    );
-    return (
-      <ColorPickerPopover
-        color="#BC67E6"
-        onChange={color => {
-          console.log(color);
-        }}
-        theme={selectedTheme || undefined}
-      />
-    );
-  });
+ColorPickerPopoverStories.add('SeriesColorPickerPopover', () => {
+  const selectedTheme = getThemeKnob();
+
+  return (
+    <SeriesColorPickerPopover
+      color="#BC67E6"
+      onChange={color => {
+        console.log(color);
+      }}
+      theme={selectedTheme || undefined}
+    />
+  );
+});

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 (
-    <div
-      style={{
-        height: '100vh  ',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}
-    >
-      {children}
-    </div>
-  );
-};
-
-interface StateHolderProps<T> {
-  initialState: T;
-  children: (currentState: T, updateState: (nextState: T) => void) => JSX.Element;
-}
+const NamedColorsPaletteStories = storiesOf('UI/ColorPicker/Palettes/NamedColorsPalette', module);
 
-export class UseState<T> extends React.Component<StateHolderProps<T>, { value: T }> {
-  constructor(props: StateHolderProps<T>) {
-    super(props);
-    this.state = {
-      value: props.initialState,
-    };
-  }
+NamedColorsPaletteStories.addDecorator(withKnobs).addDecorator(withCenteredStory);
 
-  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 => <CenteredStory>{story()}</CenteredStory>)
-  .add('Named colors swatch - support for named colors', () => {
-    const selectedColor = select(
-      'Selected color',
-      {
-        Green: 'green',
-        Red: 'red',
-        'Light blue': 'light-blue',
-      },
-      'green'
-    );
+NamedColorsPaletteStories.add('Named colors swatch - support for named colors', () => {
+  const selectedColor = select(
+    'Selected color',
+    {
+      Green: 'green',
+      Red: 'red',
+      'Light blue': 'light-blue',
+    },
+    'red'
+  );
 
-    return (
-      <UseState initialState={selectedColor}>
-        {(selectedColor, updateSelectedColor) => {
-          return <NamedColorsPalette color={selectedColor} onChange={updateSelectedColor} />;
-        }}
-      </UseState>
-    );
-  })
-  .add('Named colors swatch - support for hex values', () => {
-    return (
-      <UseState initialState="#00ff00">
-        {(selectedColor, updateSelectedColor) => {
-          return <NamedColorsPalette color={getColorName(selectedColor)} onChange={updateSelectedColor} />;
-        }}
-      </UseState>
-    );
-  });
+  return (
+    <UseState initialState={selectedColor}>
+      {(selectedColor, updateSelectedColor) => {
+        return <NamedColorsPalette color={selectedColor} onChange={updateSelectedColor} />;
+      }}
+    </UseState>
+  );
+}).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 (
+    <UseState initialState={selectedColor}>
+      {(selectedColor, updateSelectedColor) => {
+        return <NamedColorsPalette color={getColorName(selectedColor)} onChange={updateSelectedColor} />;
+      }}
+    </UseState>
+  );
+});

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 SpectrumPaletteStories = storiesOf('UI/ColorPicker/Palettes/SpectrumPalette', module);
 
-const CenteredStory: FunctionComponent<{}> = ({ children }) => {
+SpectrumPaletteStories.addDecorator(withCenteredStory).addDecorator(withKnobs);
+
+SpectrumPaletteStories.add('Named colors swatch - support for named colors', () => {
+  const selectedTheme = getThemeKnob();
   return (
-    <div
-      style={{
-        height: '100vh  ',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
+    <UseState initialState="red">
+      {(selectedColor, updateSelectedColor) => {
+        return <SpectrumPalette theme={selectedTheme} color={selectedColor} onChange={updateSelectedColor} />;
       }}
-    >
-      {children}
-    </div>
+    </UseState>
   );
-};
-
-interface StateHolderProps<T> {
-  initialState: T;
-  children: (currentState: T, updateState: (nextState: T) => void) => JSX.Element;
-}
-
-export class UseState<T> extends React.Component<StateHolderProps<T>, { value: T }> {
-  constructor(props: StateHolderProps<T>) {
-    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 => <CenteredStory>{story()}</CenteredStory>)
-  .addDecorator(withKnobs)
-  .add('Named colors swatch - support for named colors', () => {
-    const selectedTheme = select(
-      'Theme',
-      {
-        Light: GrafanaTheme.Light,
-        Dark: GrafanaTheme.Dark,
-      },
-      GrafanaTheme.Light
-    );
-    return (
-      <UseState initialState="red">
-        {(selectedColor, updateSelectedColor) => {
-          return <SpectrumPalette theme={selectedTheme} color={selectedColor} onChange={updateSelectedColor} />;
-        }}
-      </UseState>
-    );
-  });
+});

packages/grafana-ui/src/utils/storybook/UseState.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+interface StateHolderProps<T> {
+  initialState: T;
+  children: (currentState: T, updateState: (nextState: T) => void) => JSX.Element;
+}
+
+export class UseState<T> extends React.Component<StateHolderProps<T>, { value: T; initialState: T }> {
+  constructor(props: StateHolderProps<T>) {
+    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);
+  }
+}

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
+  );
+};

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 (
+    <div
+      style={{
+        height: '100vh  ',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+export const withCenteredStory = (story: RenderFunction) => <CenteredStory>{story()}</CenteredStory>;