IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Stories cleanup

Browse Source
This commit is contained in:
Dominik Prokop 2019-01-25 12:03:42 +01:00
parent 5032c74b79
commit f01441f4a7
7 changed files with 176 additions and 204 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.tsx
View File

@ -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.add('Color picker', () => {
ColorPickerStories.addDecorator(withCenteredStory).addDecorator(withKnobs);
ColorPickerStories.add('default', () => {
const { selectedTheme, enableNamedColors } = getColorPickerKnobs();
return (
<UseState initialState="#00ff00">

70
packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.story.tsx
View File

@ -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}
/>
);
});

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

@ -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>
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<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,
};
}
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'
);
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>
);
});

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

@ -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 (
<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>
);
});
});

38
packages/grafana-ui/src/utils/storybook/UseState.tsx Normal file
View File

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

14
packages/grafana-ui/src/utils/storybook/themeKnob.ts Normal file
View File

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

19
packages/grafana-ui/src/utils/storybook/withCenteredStory.tsx Normal file
View File

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