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

Enabled knobs for storybook and implemented some stories

Browse Source
This commit is contained in:
Dominik Prokop
2019-01-18 09:51:34 +01:00
parent 3d2955f24f
commit 0505add7f6
7 changed files with 236 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/grafana-ui/.storybook/addons.ts Normal file
View File

@@ -0,0 +1 @@
import '@storybook/addon-knobs/register';

4
packages/grafana-ui/package.json
View File

@@ -12,11 +12,13 @@
"license": "ISC",
"dependencies": {
"@torkelo/react-select": "2.1.1",
"@types/react-color": "^2.14.0",
"classnames": "^2.2.5",
"jquery": "^3.2.1",
"lodash": "^4.17.10",
"moment": "^2.22.2",
"react": "^16.6.3",
"react-color": "^2.17.0",
"react-custom-scrollbars": "^4.2.1",
"react-dom": "^16.6.3",
"react-highlight-words": "0.11.0",
@@ -29,6 +31,7 @@
},
"devDependencies": {
"@storybook/addon-info": "^4.1.6",
"@storybook/addon-knobs": "^4.1.7",
"@storybook/react": "^4.1.4",
"@types/classnames": "^2.2.6",
"@types/jest": "^23.3.2",
@@ -40,6 +43,7 @@
"@types/react-test-renderer": "^16.0.3",
"@types/react-transition-group": "^2.0.15",
"@types/storybook__addon-info": "^3.4.2",
"@types/storybook__addon-knobs": "^4.0.0",
"@types/storybook__react": "^4.0.0",
"@types/tether-drop": "^1.4.8",
"@types/tinycolor2": "^1.4.1",

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

@@ -1,6 +1,7 @@
import React, { FunctionComponent } from 'react';
import { storiesOf } from '@storybook/react';
import { ColorPickerPopover } from './ColorPickerPopover';
import { ColorPicker } from './ColorPicker';
import { withKnobs, text } from '@storybook/addon-knobs';
const CenteredStory: FunctionComponent<{}> = ({ children }) => {
return (
@@ -17,11 +18,10 @@ const CenteredStory: FunctionComponent<{}> = ({ children }) => {
);
};
storiesOf('UI/ColorPicker', module)
.addDecorator(story => <CenteredStory>{story()}</CenteredStory>)
// .add('Color picker popover', () => {
// return <ColorPickerPopover color="#ff0000" onColorSelect={() => {}} />;
// })
.add('Named colors swatch', () => {
return <ColorPickerPopover color="#ff0000" onColorSelect={() => {}} />;
});
const ColorPickerStories = storiesOf('UI/ColorPicker', module);
ColorPickerStories.addDecorator(story => <CenteredStory>{story()}</CenteredStory>);
ColorPickerStories.addDecorator(withKnobs);
ColorPickerStories.add('Color picker', () => {
return <ColorPicker color={text('Color HEX or Name or RGB string', '#ff0000')} onChange={() => {}} />;
});

44
packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.story.tsx Normal file
View File

@@ -0,0 +1,44 @@
import React, { FunctionComponent } from 'react';
import { storiesOf } from '@storybook/react';
import { ColorPickerPopover } from './ColorPickerPopover';
import { withKnobs, select } from '@storybook/addon-knobs';
import { GrafanaTheme } from '../../types';
const CenteredStory: FunctionComponent<{}> = ({ children }) => {
return (
<div
style={{
height: '100vh ',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
{children}
</div>
);
};
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"
onColorSelect={color => {
console.log(color);
}}
theme={selectedTheme || undefined}
/>
);
});

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

@@ -1,4 +1,4 @@
import React, { Children } from 'react';
import React from 'react';
import NamedColorsPicker from './NamedColorsPicker';
import { Color } from 'csstype';
import { ColorDefinition, getColorName } from '../..//utils/colorsPalette';

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

@@ -1,7 +1,8 @@
import React, { FunctionComponent } from 'react';
import { storiesOf } from '@storybook/react';
import NamedColorsPicker from './NamedColorsPicker';
import NamedColorsPicker from './NamedColorsPicker';
import { Color, getColorName } from '@grafana/ui/src/utils/colorsPalette';
import { withKnobs, select } from '@storybook/addon-knobs';
const CenteredStory: FunctionComponent<{}> = ({ children }) => {
return (
@@ -23,46 +24,69 @@ interface StateHolderProps<T> {
children: (currentState: T, updateState: (nextState: T) => void) => JSX.Element;
}
class UseState<T> extends React.Component<StateHolderProps<T>, {value: T}> {
class UseState<T> extends React.Component<StateHolderProps<T>, { value: T }> {
constructor(props: StateHolderProps<T>) {
super(props)
super(props);
this.state = {
value: props.initialState
}
value: props.initialState,
};
}
static getDerivedStateFromProps(props: StateHolderProps<{}>, state: { value: {} }) {
return {
value: props.initialState,
};
}
handleStateUpdate = (nextState: T) => {
this.setState({value: nextState})
}
this.setState({ value: nextState });
};
render() {
return this.props.children(this.state.value, this.handleStateUpdate)
return this.props.children(this.state.value, this.handleStateUpdate);
}
}
storiesOf('UI/ColorPicker', module)
storiesOf('UI/NamedColorPicker', module)
.addDecorator(withKnobs)
.addDecorator(story => <CenteredStory>{story()}</CenteredStory>)
.add('Named colors swatch - support for named colors', () => {
return(
<UseState initialState="green">
{(selectedColor, updateSelectedColor) => {
return (
<NamedColorsPicker
selectedColor={selectedColor as Color}
onChange={(color) => { updateSelectedColor(color.name);}}
/>
)
}}
</UseState>);
const selectedColor = select(
'Selected color',
{
Green: 'green',
Red: 'red',
'Light blue': 'light-blue',
},
'green'
);
return (
<UseState initialState={selectedColor}>
{(selectedColor, updateSelectedColor) => {
console.log(selectedColor);
return (
<NamedColorsPicker
selectedColor={selectedColor as Color}
onChange={color => {
// @ts-ignore
updateSelectedColor((color).name);
}}
/>
);
}}
</UseState>
);
})
.add('Named colors swatch - support for hex values', () => {
return(
<UseState initialState="#00ff00">
{(selectedColor, updateSelectedColor) => {
return (
<NamedColorsPicker
selectedColor={getColorName(selectedColor)}
onChange={(color) => updateSelectedColor(color.variants.dark)}
/>
)
}}
</UseState>);
return (
<UseState initialState="#00ff00">
{(selectedColor, updateSelectedColor) => {
return (
<NamedColorsPicker
selectedColor={getColorName(selectedColor)}
onChange={color => updateSelectedColor(color.variants.dark)}
/>
);
}}
</UseState>
);
});