Stories cleanup

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

-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

-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}
+    />
   );
-};
+});
+
+ColorPickerPopoverStories.add('SeriesColorPickerPopover', () => {
+  const selectedTheme = getThemeKnob();
 
-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
+    <SeriesColorPickerPopover
       color="#BC67E6"
       onChange={color => {
         console.log(color);
@@ -41,4 +37,4 @@ storiesOf('UI/ColorPickerPopover', module)
       theme={selectedTheme || undefined}
     />
   );
-  });
+});

packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.story.tsx

-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;
-}
-
-export class UseState<T> extends React.Component<StateHolderProps<T>, { value: T }> {
-  constructor(props: StateHolderProps<T>) {
-    super(props);
-    this.state = {
-      value: props.initialState,
-    };
-  }
-
-  static getDerivedStateFromProps(props: StateHolderProps<{}>, state: { value: {} }) {
-    return {
-      value: props.initialState,
-      ...state,
-    };
-  }
+const NamedColorsPaletteStories = storiesOf('UI/ColorPicker/Palettes/NamedColorsPalette', module);
 
-  handleStateUpdate = (nextState: T) => {
-    this.setState({ value: nextState });
-  };
-  render() {
-    return this.props.children(this.state.value, this.handleStateUpdate);
-  }
-}
+NamedColorsPaletteStories.addDecorator(withKnobs).addDecorator(withCenteredStory);
 
-storiesOf('UI/NamedColorsPalette', module)
-  .addDecorator(withKnobs)
-  .addDecorator(story => <CenteredStory>{story()}</CenteredStory>)
-  .add('Named colors swatch - support for named colors', () => {
+NamedColorsPaletteStories.add('Named colors swatch - support for named colors', () => {
   const selectedColor = select(
     'Selected color',
     {
@@ -58,7 +18,7 @@ storiesOf('UI/NamedColorsPalette', module)
       Red: 'red',
       'Light blue': 'light-blue',
     },
-      'green'
+    'red'
   );
 
   return (
@@ -68,13 +28,21 @@ storiesOf('UI/NamedColorsPalette', module)
       }}
     </UseState>
   );
-  })
-  .add('Named colors swatch - support for hex values', () => {
+}).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="#00ff00">
+    <UseState initialState={selectedColor}>
       {(selectedColor, updateSelectedColor) => {
         return <NamedColorsPalette color={getColorName(selectedColor)} onChange={updateSelectedColor} />;
       }}
     </UseState>
   );
-  });
+});

packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.story.tsx

-import React, { FunctionComponent } from 'react';
+import React from 'react';
 import { storiesOf } from '@storybook/react';
-import SpectrumPalette from './SpectrumPalette';
-import { withKnobs, select } from '@storybook/addon-knobs';
-import { GrafanaTheme } from '../../types';
+import { withKnobs } from '@storybook/addon-knobs';
 
-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;
-}
+import SpectrumPalette from './SpectrumPalette';
+import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
+import { UseState } from '../../utils/storybook/UseState';
+import { getThemeKnob } from '../../utils/storybook/themeKnob';
 
-export class UseState<T> extends React.Component<StateHolderProps<T>, { value: T }> {
-  constructor(props: StateHolderProps<T>) {
-    super(props);
-    this.state = {
-      value: props.initialState,
-    };
-  }
+const SpectrumPaletteStories = storiesOf('UI/ColorPicker/Palettes/SpectrumPalette', module);
 
-  handleStateUpdate = (nextState: T) => {
-    this.setState({ value: nextState });
-  };
-  render() {
-    return this.props.children(this.state.value, this.handleStateUpdate);
-  }
-}
+SpectrumPaletteStories.addDecorator(withCenteredStory).addDecorator(withKnobs);
 
-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
-    );
+SpectrumPaletteStories.add('Named colors swatch - support for named colors', () => {
+  const selectedTheme = getThemeKnob();
   return (
     <UseState initialState="red">
       {(selectedColor, updateSelectedColor) => {
@@ -59,4 +20,4 @@ storiesOf('UI/SpectrumPalette', module)
       }}
     </UseState>
   );
-  });
+});

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

+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

+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

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