IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2026-07-30 00:08:10 -05:00
Code Issues Packages Projects Releases Wiki Activity

Another storybook csf conversion (#24097)

Browse Source 
* Convert Spinner to CSF

* Convert TableInputCSV to CSF

* Convert ToggleButtonGroup to CSF

* Convert ValueMappingsEditor to CSF

* Convert useDelayedSwitch to CSF
This commit is contained in:
Jess
2020-04-30 17:00:05 +03:00
committed by GitHub
parent 9939d3bb38
commit ab60a8d37a
5 changed files with 35 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/grafana-ui/src/components/Spinner/Spinner.story.tsx
+8 -5
View File
@@ -1,15 +1,18 @@
import React from 'react'; import React from 'react';
import { storiesOf } from '@storybook/react';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import { Spinner } from './Spinner'; import { Spinner } from './Spinner';
const story = storiesOf('Visualizations/Spinner', module); export default {
story.addDecorator(withCenteredStory); title: 'Visualizations/Spinner',
story.add('spinner', () => { component: Spinner,
decorators: [withCenteredStory],
};
export const basic = () => {
return ( return (
<div> <div>
<Spinner /> <Spinner />
</div> </div>
); );
}); };
packages/grafana-ui/src/components/TableInputCSV/TableInputCSV.story.internal.tsx
+7 -6
View File
@@ -1,16 +1,17 @@
import React from 'react'; import React from 'react';
import { storiesOf } from '@storybook/react';
import TableInputCSV from './TableInputCSV'; import TableInputCSV from './TableInputCSV';
import { action } from '@storybook/addon-actions'; import { action } from '@storybook/addon-actions';
import { DataFrame } from '@grafana/data'; import { DataFrame } from '@grafana/data';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
const TableInputStories = storiesOf('Forms/TableInputCSV', module); export default {
title: 'Forms/TableInputCSV',
component: TableInputCSV,
decorators: [withCenteredStory],
};
TableInputStories.addDecorator(withCenteredStory); export const basic = () => {
TableInputStories.add('default', () => {
return ( return (
<TableInputCSV <TableInputCSV
width={400} width={400}
@@ -22,4 +23,4 @@ TableInputStories.add('default', () => {
}} }}
/> />
); );
}); };
packages/grafana-ui/src/components/ToggleButtonGroup/ToggleButtonGroup.story.internal.tsx
+7 -6
View File
@@ -1,12 +1,15 @@
import React from 'react'; import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions'; import { action } from '@storybook/addon-actions';
import { ToggleButton, ToggleButtonGroup } from './ToggleButtonGroup'; import { ToggleButton, ToggleButtonGroup } from './ToggleButtonGroup';
import { UseState } from '../../utils/storybook/UseState'; import { UseState } from '../../utils/storybook/UseState';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
const ToggleButtonGroupStories = storiesOf('Forms/Legacy/ToggleButtonGroup', module); export default {
title: 'Forms/Legacy/ToggleButtonGroup',
component: ToggleButtonGroup,
decorators: [withCenteredStory],
};
const options = [ const options = [
{ value: 'first', label: 'First' }, { value: 'first', label: 'First' },
@@ -14,9 +17,7 @@ const options = [
{ value: 'third', label: 'Third' }, { value: 'third', label: 'Third' },
]; ];
ToggleButtonGroupStories.addDecorator(withCenteredStory); export const basic = () => {
ToggleButtonGroupStories.add('default', () => {
return ( return (
<UseState <UseState
initialState={{ initialState={{
@@ -46,4 +47,4 @@ ToggleButtonGroupStories.add('default', () => {
}} }}
</UseState> </UseState>
); );
}); };
packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.story.tsx
+6 -4
View File
@@ -1,10 +1,12 @@
import React from 'react'; import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions'; import { action } from '@storybook/addon-actions';
import { ValueMappingsEditor } from './ValueMappingsEditor'; import { ValueMappingsEditor } from './ValueMappingsEditor';
const ValueMappingsEditorStories = storiesOf('Pickers and Editors/ValueMappingsEditor', module); export default {
title: 'Pickers and Editors/ValueMappingsEditor',
component: ValueMappingsEditor,
};
ValueMappingsEditorStories.add('default', () => { export const basic = () => {
return <ValueMappingsEditor valueMappings={[]} onChange={action('Mapping changed')} />; return <ValueMappingsEditor valueMappings={[]} onChange={action('Mapping changed')} />;
}); };
packages/grafana-ui/src/utils/useDelayedSwitch.story.internal.tsx
+7 -5
View File
@@ -1,6 +1,5 @@
import React from 'react'; import React from 'react';
import { storiesOf } from '@storybook/react';
import { withCenteredStory } from './storybook/withCenteredStory'; import { withCenteredStory } from './storybook/withCenteredStory';
import { useDelayedSwitch } from './useDelayedSwitch'; import { useDelayedSwitch } from './useDelayedSwitch';
import { boolean, number } from '@storybook/addon-knobs'; import { boolean, number } from '@storybook/addon-knobs';
@@ -19,8 +18,11 @@ function StoryWrapper() {
return <div>{valueDelayed ? 'ON' : 'OFF'}</div>; return <div>{valueDelayed ? 'ON' : 'OFF'}</div>;
} }
const story = storiesOf('useDelayedSwitch', module); export default {
story.addDecorator(withCenteredStory); title: 'useDelayedSwitch',
story.add('useDelayedSwitch', () => { decorators: [withCenteredStory],
};
export const basic = () => {
return <StoryWrapper />; return <StoryWrapper />;
}); };