mirror of
https://github.com/reduxjs/redux-devtools.git
synced 2025-07-22 22:19:48 +03:00
stash
This commit is contained in:
Nathan Bierema
parent
a1c9d1e122
commit
fddb55ff48
|
|
@ -31,10 +31,10 @@ Default.args = {
|
|||
children: 'Hello Button',
|
||||
};
|
||||
Default.argTypes = {
|
||||
onClick: { table: { disable: true } },
|
||||
type: { table: { disable: true } },
|
||||
mark: { table: { disable: true } },
|
||||
theme: { table: { disable: true } },
|
||||
onClick: { control: { disable: true } },
|
||||
type: { control: { disable: true } },
|
||||
mark: { control: { disable: true } },
|
||||
theme: { control: { disable: true } },
|
||||
};
|
||||
|
||||
export const Mark = Template.bind({});
|
||||
|
|
@ -46,9 +46,9 @@ Mark.args = {
|
|||
children: <MdFiberManualRecord />,
|
||||
};
|
||||
Mark.argTypes = {
|
||||
children: { table: { disable: true } },
|
||||
onClick: { table: { disable: true } },
|
||||
type: { table: { disable: true } },
|
||||
primary: { table: { disable: true } },
|
||||
theme: { table: { disable: true } },
|
||||
children: { control: { disable: true } },
|
||||
onClick: { control: { disable: true } },
|
||||
type: { control: { disable: true } },
|
||||
primary: { control: { disable: true } },
|
||||
theme: { control: { disable: true } },
|
||||
};
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ Default.args = {
|
|||
items,
|
||||
};
|
||||
Default.argTypes = {
|
||||
visible: { table: { disable: true } },
|
||||
items: { table: { disable: true } },
|
||||
onClick: { table: { disable: true } },
|
||||
visible: { control: { disable: true } },
|
||||
items: { control: { disable: true } },
|
||||
onClick: { control: { disable: true } },
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import React from 'react';
|
||||
import Dialog from './';
|
||||
import { schema, uiSchema, formData } from '../Form/stories/schema';
|
||||
import { schema, uiSchema, formData } from '../Form/schema';
|
||||
|
||||
export default {
|
||||
title: 'Dialog',
|
||||
|
|
@ -21,10 +21,10 @@ Default.args = {
|
|||
children: 'Hello Dialog!',
|
||||
};
|
||||
Default.argTypes = {
|
||||
actions: { table: { disable: true } },
|
||||
onDismiss: { table: { disable: true } },
|
||||
onSubmit: { table: { disable: true } },
|
||||
theme: { table: { disable: true } },
|
||||
actions: { control: { disable: true } },
|
||||
onDismiss: { control: { disable: true } },
|
||||
onSubmit: { control: { disable: true } },
|
||||
theme: { control: { disable: true } },
|
||||
};
|
||||
|
||||
export const WithForm = Template.bind({});
|
||||
|
|
@ -39,11 +39,11 @@ WithForm.args = {
|
|||
uiSchema,
|
||||
};
|
||||
WithForm.argTypes = {
|
||||
title: { table: { disable: true } },
|
||||
children: { table: { disable: true } },
|
||||
actions: { table: { disable: true } },
|
||||
modal: { table: { disable: true } },
|
||||
onDismiss: { table: { disable: true } },
|
||||
onSubmit: { table: { disable: true } },
|
||||
theme: { table: { disable: true } },
|
||||
title: { control: { disable: true } },
|
||||
children: { control: { disable: true } },
|
||||
actions: { control: { disable: true } },
|
||||
modal: { control: { disable: true } },
|
||||
onDismiss: { control: { disable: true } },
|
||||
onSubmit: { control: { disable: true } },
|
||||
theme: { control: { disable: true } },
|
||||
};
|
||||
|
|
|
|||
|
|
@ -8,6 +8,9 @@ const EditorContainer = styled.div('', ({ theme }) =>
|
|||
theme.scheme === 'default' && theme.light ? defaultStyle : themedStyle(theme)
|
||||
);
|
||||
|
||||
/**
|
||||
* Based on [CodeMirror](http://codemirror.net/).
|
||||
*/
|
||||
export default class Editor extends Component {
|
||||
componentDidMount() {
|
||||
this.cm = CodeMirror(this.node, {
|
||||
|
|
|
|||
|
|
@ -26,6 +26,12 @@ Default.args = {
|
|||
readOnly: false,
|
||||
autofocus: true,
|
||||
};
|
||||
Default.argTypes = {
|
||||
autofocus: { control: { disable: true } },
|
||||
mode: { control: { disable: true } },
|
||||
theme: { control: { disable: true } },
|
||||
onChange: { control: { disable: true } },
|
||||
};
|
||||
|
||||
const WithTabsTemplate = (args) => <WithTabsComponent {...args} />;
|
||||
|
||||
|
|
@ -34,23 +40,13 @@ WithTabs.args = {
|
|||
lineNumbers: true,
|
||||
align: 'left',
|
||||
};
|
||||
// storiesOf('Editor', module)
|
||||
// .addDecorator(withKnobs)
|
||||
// .add(
|
||||
// 'default',
|
||||
// () => (
|
||||
// <Editor
|
||||
// value={text('value', value)}
|
||||
// lineNumbers={boolean('lineNumbers', true)}
|
||||
// lineWrapping={boolean('lineWrapping', false)}
|
||||
// foldGutter={boolean('foldGutter', true)}
|
||||
// readOnly={boolean('readOnly', false)}
|
||||
// onChange={action('change')}
|
||||
// autofocus
|
||||
// />
|
||||
// ),
|
||||
// { info: 'Based on [CodeMirror](http://codemirror.net/).' }
|
||||
// )
|
||||
// .add('with tabs', () => (
|
||||
// <WithTabs lineNumbers={boolean('lineNumbers', true)} />
|
||||
// ));
|
||||
WithTabs.argTypes = {
|
||||
value: { control: { disable: true } },
|
||||
mode: { control: { disable: true } },
|
||||
lineWrapping: { control: { disable: true } },
|
||||
readOnly: { control: { disable: true } },
|
||||
theme: { control: { disable: true } },
|
||||
foldGutter: { control: { disable: true } },
|
||||
autofocus: { control: { disable: true } },
|
||||
onChange: { control: { disable: true } },
|
||||
};
|
||||
|
|
|
|||
|
|
@ -8,6 +8,9 @@ import customWidgets from './widgets';
|
|||
|
||||
const FormContainer = createStyledComponent(styles, JSONSchemaForm);
|
||||
|
||||
/**
|
||||
* Wrapper around [`react-jsonschema-form`](https://github.com/mozilla-services/react-jsonschema-form) with custom widgets.
|
||||
*/
|
||||
export default class Form extends (PureComponent || Component) {
|
||||
render() {
|
||||
const {
|
||||
|
|
|
|||
24
packages/devui/src/Form/Form.stories.js
Normal file
24
packages/devui/src/Form/Form.stories.js
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
import React from 'react';
|
||||
import Form from './';
|
||||
import { schema, uiSchema, formData } from './schema';
|
||||
|
||||
export default {
|
||||
title: 'Form',
|
||||
component: Form,
|
||||
};
|
||||
|
||||
const Template = (args) => <Form {...args} />;
|
||||
|
||||
export const Default = Template.bind({});
|
||||
Default.args = {
|
||||
formData,
|
||||
schema,
|
||||
uiSchema,
|
||||
submitText: 'Submit',
|
||||
};
|
||||
Default.argTypes = {
|
||||
children: { control: { disable: true } },
|
||||
primaryButton: { control: { disable: true } },
|
||||
noSubmit: { control: { disable: true } },
|
||||
widgets: { control: { disable: true } },
|
||||
};
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { withKnobs, object, text } from '@storybook/addon-knobs';
|
||||
import Form from '../';
|
||||
import { schema, uiSchema, formData } from './schema';
|
||||
|
||||
storiesOf('Form', module)
|
||||
.addDecorator(withKnobs)
|
||||
.add(
|
||||
'default',
|
||||
() => (
|
||||
<Form
|
||||
formData={object('formData', formData)}
|
||||
schema={object('schema', schema)}
|
||||
uiSchema={object('uiSchema', uiSchema)}
|
||||
submitText={text('submitText', 'Submit')}
|
||||
onChange={action('form changed')}
|
||||
onSubmit={action('form submitted')}
|
||||
/>
|
||||
),
|
||||
{
|
||||
info:
|
||||
'Wrapper around [`react-jsonschema-form`](https://github.com/mozilla-services/react-jsonschema-form)' +
|
||||
' with custom widgets.',
|
||||
}
|
||||
);
|
||||
32
packages/devui/src/Notification/Notification.stories.js
Normal file
32
packages/devui/src/Notification/Notification.stories.js
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import Notification from './';
|
||||
|
||||
const Container = styled.div`
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
export default {
|
||||
title: 'Notification',
|
||||
component: Notification,
|
||||
};
|
||||
|
||||
const Template = (args) => (
|
||||
<Container>
|
||||
<Notification {...args} />
|
||||
</Container>
|
||||
);
|
||||
|
||||
export const Default = Template.bind({});
|
||||
Default.args = {
|
||||
type: 'warning',
|
||||
children: 'Hello Notification',
|
||||
};
|
||||
Default.argTypes = {
|
||||
onClose: { control: { disable: true } },
|
||||
theme: { control: { disable: true } },
|
||||
};
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import styled from 'styled-components';
|
||||
import { withKnobs, text, select } from '@storybook/addon-knobs';
|
||||
import Notification from '../';
|
||||
|
||||
export const Container = styled.div`
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
storiesOf('Notification', module)
|
||||
.addDecorator(withKnobs)
|
||||
.add('default', () => (
|
||||
<Container>
|
||||
<Notification
|
||||
type={select(
|
||||
'type',
|
||||
['info', 'success', 'warning', 'error'],
|
||||
'warning'
|
||||
)}
|
||||
onClose={action('notification closed')}
|
||||
>
|
||||
{text('Message', 'Hello Notification')}
|
||||
</Notification>
|
||||
</Container>
|
||||
));
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import SegmentedControl from './';
|
||||
|
||||
const Container = styled.div`
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
export default {
|
||||
title: 'SegmentedControl',
|
||||
component: SegmentedControl,
|
||||
};
|
||||
|
||||
const Template = (args) => (
|
||||
<Container>
|
||||
<SegmentedControl values={['Button1', 'Button2', 'Button3']} {...args} />
|
||||
</Container>
|
||||
);
|
||||
|
||||
export const Default = Template.bind({});
|
||||
Default.args = {
|
||||
selected: 'Button1',
|
||||
disabled: false,
|
||||
};
|
||||
Default.argTypes = {
|
||||
values: { control: { disable: true } },
|
||||
onClick: { control: { disable: true } },
|
||||
theme: { control: { disable: true } },
|
||||
};
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import styled from 'styled-components';
|
||||
import { withKnobs, text, boolean } from '@storybook/addon-knobs';
|
||||
import SegmentedControl from '../';
|
||||
|
||||
export const Container = styled.div`
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
storiesOf('SegmentedControl', module)
|
||||
.addDecorator(withKnobs)
|
||||
.add('default', () => (
|
||||
<Container>
|
||||
<SegmentedControl
|
||||
values={['Button1', 'Button2', 'Button3']}
|
||||
selected={text('selected', 'Button1')}
|
||||
onClick={action('button selected')}
|
||||
disabled={boolean('Disabled', false)}
|
||||
/>
|
||||
</Container>
|
||||
));
|
||||
|
|
@ -6,6 +6,9 @@ import styles from './styles';
|
|||
|
||||
const SelectContainer = createStyledComponent(styles, ReactSelect);
|
||||
|
||||
/**
|
||||
* Wrapper around [React Select](https://github.com/JedWatson/react-select) with themes and new props like `openOuterUp` and `menuMaxHeight`.
|
||||
*/
|
||||
export default class Select extends (PureComponent || Component) {
|
||||
render() {
|
||||
return <SelectContainer {...this.props} />;
|
||||
|
|
|
|||
44
packages/devui/src/Select/Select.stories.js
Normal file
44
packages/devui/src/Select/Select.stories.js
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import Select from './';
|
||||
import { options } from './options';
|
||||
|
||||
const Container = styled.div`
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
> div {
|
||||
width: 90%;
|
||||
}
|
||||
`;
|
||||
|
||||
export default {
|
||||
title: 'Select',
|
||||
component: Select,
|
||||
};
|
||||
|
||||
const Template = (args) => (
|
||||
<Container>
|
||||
<Select options={options} {...args} />
|
||||
</Container>
|
||||
);
|
||||
|
||||
export const Default = Template.bind({});
|
||||
Default.args = {
|
||||
value: 'one',
|
||||
menuMaxHeight: 200,
|
||||
autosize: false,
|
||||
clearable: false,
|
||||
disabled: false,
|
||||
isLoading: false,
|
||||
multi: false,
|
||||
searchable: true,
|
||||
openOuterUp: false,
|
||||
};
|
||||
Default.argTypes = {
|
||||
simpleValue: { control: { disable: true } },
|
||||
valueKey: { control: { disable: true } },
|
||||
};
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { withKnobs, text, number, boolean } from '@storybook/addon-knobs';
|
||||
import Select from '../';
|
||||
import { options } from './options';
|
||||
|
||||
export const Container = styled.div`
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
> div {
|
||||
width: 90%;
|
||||
}
|
||||
`;
|
||||
|
||||
storiesOf('Select', module)
|
||||
.addDecorator(withKnobs)
|
||||
.add(
|
||||
'default',
|
||||
() => (
|
||||
<Container>
|
||||
<Select
|
||||
value={text('value', 'one')}
|
||||
menuMaxHeight={number('menuMaxHeight', 200)}
|
||||
options={options}
|
||||
onChange={action('selected')}
|
||||
autosize={boolean('autosize', false)}
|
||||
clearable={boolean('clearable', false)}
|
||||
disabled={boolean('disabled', false)}
|
||||
isLoading={boolean('isLoading', false)}
|
||||
multi={boolean('multiselect', false)}
|
||||
searchable={boolean('searchable', true)}
|
||||
openOuterUp={boolean('openOuterUp', false)}
|
||||
/>
|
||||
</Container>
|
||||
),
|
||||
{
|
||||
info:
|
||||
'Wrapper around [React Select](https://github.com/JedWatson/react-select) with themes ' +
|
||||
'and new props like `openOuterUp` and `menuMaxHeight`.',
|
||||
}
|
||||
);
|
||||
54
packages/devui/src/Slider/Slider.stories.js
Normal file
54
packages/devui/src/Slider/Slider.stories.js
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import Slider from './';
|
||||
|
||||
const Container = styled.div`
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
export default {
|
||||
title: 'Slider',
|
||||
component: Slider,
|
||||
};
|
||||
|
||||
const Template = (args) => (
|
||||
<Container>
|
||||
<Slider {...args} />
|
||||
</Container>
|
||||
);
|
||||
|
||||
export const Default = Template.bind({});
|
||||
Default.args = {
|
||||
value: 0,
|
||||
min: 0,
|
||||
max: 100,
|
||||
label: 'Slider label',
|
||||
sublabel: '(sublabel}',
|
||||
withValue: false,
|
||||
disabled: false,
|
||||
};
|
||||
Default.argTypes = {
|
||||
onChange: { control: { disable: true } },
|
||||
theme: { control: { disable: true } },
|
||||
};
|
||||
|
||||
// storiesOf('Slider', module)
|
||||
// .addDecorator(withKnobs)
|
||||
// .add('default', () => (
|
||||
// <Container>
|
||||
// <Slider
|
||||
// value={number('value', 0)}
|
||||
// min={number('min', 0)}
|
||||
// max={number('max', 100)}
|
||||
// label={text('label', 'Slider label')}
|
||||
// sublabel={text('sublabel', '(sublabel)')}
|
||||
// withValue={boolean('withValue', false)}
|
||||
// disabled={boolean('disabled', false)}
|
||||
// onChange={action('slider changed')}
|
||||
// />
|
||||
// </Container>
|
||||
// ));
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import styled from 'styled-components';
|
||||
import { withKnobs, number, text, boolean } from '@storybook/addon-knobs';
|
||||
import Slider from '../';
|
||||
|
||||
export const Container = styled.div`
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
storiesOf('Slider', module)
|
||||
.addDecorator(withKnobs)
|
||||
.add('default', () => (
|
||||
<Container>
|
||||
<Slider
|
||||
value={number('value', 0)}
|
||||
min={number('min', 0)}
|
||||
max={number('max', 100)}
|
||||
label={text('label', 'Slider label')}
|
||||
sublabel={text('sublabel', '(sublabel)')}
|
||||
withValue={boolean('withValue', false)}
|
||||
disabled={boolean('disabled', false)}
|
||||
onChange={action('slider changed')}
|
||||
/>
|
||||
</Container>
|
||||
));
|
||||
49
packages/devui/src/Tabs/Tabs.stories.js
Normal file
49
packages/devui/src/Tabs/Tabs.stories.js
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import Tabs from './';
|
||||
import { tabs, simple10Tabs } from './data';
|
||||
|
||||
const Container = styled.div`
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
export default {
|
||||
title: 'Tabs',
|
||||
component: Tabs,
|
||||
};
|
||||
|
||||
const Template = (args) => (
|
||||
<Container>
|
||||
<Tabs {...args} />
|
||||
</Container>
|
||||
);
|
||||
|
||||
export const Default = Template.bind({});
|
||||
Default.args = {
|
||||
tabs: simple10Tabs,
|
||||
selected: '2',
|
||||
main: true,
|
||||
collapsible: true,
|
||||
position: 'left',
|
||||
};
|
||||
Default.argTypes = {
|
||||
tabs: { control: { disable: true } },
|
||||
onClick: { control: { disable: true } },
|
||||
};
|
||||
|
||||
export const WithContent = Template.bind({});
|
||||
WithContent.args = {
|
||||
tabs,
|
||||
selected: 'Tab2',
|
||||
main: false,
|
||||
collapsible: false,
|
||||
position: 'left',
|
||||
};
|
||||
WithContent.argTypes = {
|
||||
tabs: { control: { disable: true } },
|
||||
onClick: { control: { disable: true } },
|
||||
};
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { withKnobs, text, boolean, select } from '@storybook/addon-knobs';
|
||||
import styled from 'styled-components';
|
||||
import Tabs from '../';
|
||||
import { tabs, simple10Tabs } from './data';
|
||||
|
||||
const Container = styled.div`
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
storiesOf('Tabs', module)
|
||||
.addDecorator(withKnobs)
|
||||
.add('default', () => (
|
||||
<Container>
|
||||
<Tabs
|
||||
tabs={simple10Tabs}
|
||||
selected={text('selected', '2')}
|
||||
main={boolean('main', true)}
|
||||
onClick={action('tab selected')}
|
||||
collapsible={boolean('collapsible', true)}
|
||||
position={select('position', ['left', 'right', 'center'], 'left')}
|
||||
/>
|
||||
</Container>
|
||||
))
|
||||
.add('with content', () => (
|
||||
<Tabs
|
||||
tabs={tabs}
|
||||
selected={text('selected', 'Tab2')}
|
||||
main={boolean('main', false)}
|
||||
onClick={action('tab selected')}
|
||||
collapsible={boolean('collapsible', false)}
|
||||
position={select('position', ['left', 'right', 'center'], 'left')}
|
||||
/>
|
||||
));
|
||||
296
packages/devui/src/Toolbar/Toolbar.stories.js
Normal file
296
packages/devui/src/Toolbar/Toolbar.stories.js
Normal file
|
|
@ -0,0 +1,296 @@
|
|||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { MdPlayArrow } from 'react-icons/md';
|
||||
import { MdFiberManualRecord } from 'react-icons/md';
|
||||
import { MdKeyboardArrowLeft } from 'react-icons/md';
|
||||
import { MdKeyboardArrowRight } from 'react-icons/md';
|
||||
import {
|
||||
Toolbar,
|
||||
Divider,
|
||||
Spacer,
|
||||
Button,
|
||||
Select,
|
||||
Slider,
|
||||
SegmentedControl,
|
||||
Tabs as TabsComponent,
|
||||
} from '../';
|
||||
import { options } from '../Select/options';
|
||||
import { simple10Tabs } from '../Tabs/data';
|
||||
|
||||
const Container = styled.div`
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
const SliderContainer = styled.div`
|
||||
width: 90%;
|
||||
height: 80px;
|
||||
`;
|
||||
|
||||
export default {
|
||||
title: 'Toolbar',
|
||||
component: Toolbar,
|
||||
};
|
||||
|
||||
const Template = ({
|
||||
borderPosition,
|
||||
title,
|
||||
tooltipPosition,
|
||||
disabled,
|
||||
onClick,
|
||||
label,
|
||||
}) => (
|
||||
<Container>
|
||||
<Toolbar borderPosition={borderPosition}>
|
||||
<Button
|
||||
title={title}
|
||||
tooltipPosition={tooltipPosition}
|
||||
disabled={disabled}
|
||||
onClick={onClick}
|
||||
>
|
||||
{label}
|
||||
</Button>
|
||||
<Divider />
|
||||
<Button
|
||||
title={title}
|
||||
tooltipPosition={tooltipPosition}
|
||||
disabled={disabled}
|
||||
onClick={onClick}
|
||||
>
|
||||
<MdFiberManualRecord />
|
||||
</Button>
|
||||
<Divider />
|
||||
<Spacer />
|
||||
<Select options={options} />
|
||||
</Toolbar>
|
||||
</Container>
|
||||
);
|
||||
|
||||
export const Default = Template.bind({});
|
||||
Default.args = {
|
||||
borderPosition: 'top',
|
||||
title: 'Hello Tooltip',
|
||||
tooltipPosition: 'top',
|
||||
disabled: false,
|
||||
label: 'Hello Button',
|
||||
};
|
||||
Default.argTypes = {
|
||||
borderPosition: {
|
||||
control: {
|
||||
type: 'select',
|
||||
options: ['top', 'bottom'],
|
||||
},
|
||||
},
|
||||
tooltipPosition: {
|
||||
control: {
|
||||
type: 'select',
|
||||
options: [
|
||||
'top',
|
||||
'bottom',
|
||||
'left',
|
||||
'right',
|
||||
'bottom-left',
|
||||
'bottom-right',
|
||||
'top-left',
|
||||
'top-right',
|
||||
],
|
||||
},
|
||||
},
|
||||
onClick: {
|
||||
action: 'button clicked',
|
||||
},
|
||||
};
|
||||
|
||||
const TabsTemplate = ({
|
||||
title,
|
||||
tooltipPosition,
|
||||
disabled,
|
||||
buttonOnClick,
|
||||
label,
|
||||
selected,
|
||||
main,
|
||||
tabOnClick,
|
||||
collapsible,
|
||||
position,
|
||||
}) => (
|
||||
<Container>
|
||||
<Toolbar>
|
||||
<Button
|
||||
title={title}
|
||||
tooltipPosition={tooltipPosition}
|
||||
disabled={disabled}
|
||||
onClick={buttonOnClick}
|
||||
>
|
||||
{label}
|
||||
</Button>
|
||||
<TabsComponent
|
||||
tabs={simple10Tabs}
|
||||
selected={selected}
|
||||
main={main}
|
||||
onClick={tabOnClick}
|
||||
collapsible={collapsible}
|
||||
position={position}
|
||||
/>
|
||||
<Button
|
||||
title={title}
|
||||
tooltipPosition={tooltipPosition}
|
||||
disabled={disabled}
|
||||
onClick={buttonOnClick}
|
||||
>
|
||||
{label}
|
||||
</Button>
|
||||
</Toolbar>
|
||||
</Container>
|
||||
);
|
||||
|
||||
export const Tabs = TabsTemplate.bind({});
|
||||
Tabs.args = {
|
||||
title: 'Hello Tooltip',
|
||||
tooltipPosition: 'top',
|
||||
disabled: false,
|
||||
label: 'Hello Button',
|
||||
selected: '2',
|
||||
main: true,
|
||||
collapsible: true,
|
||||
position: 'center',
|
||||
};
|
||||
Tabs.argTypes = {
|
||||
tooltipPosition: {
|
||||
control: {
|
||||
type: 'select',
|
||||
options: [
|
||||
'top',
|
||||
'bottom',
|
||||
'left',
|
||||
'right',
|
||||
'bottom-left',
|
||||
'bottom-right',
|
||||
'top-left',
|
||||
'top-right',
|
||||
],
|
||||
},
|
||||
},
|
||||
buttonOnClick: {
|
||||
action: 'button clicked',
|
||||
},
|
||||
tabOnClick: {
|
||||
action: 'tab selected',
|
||||
},
|
||||
position: {
|
||||
control: {
|
||||
type: 'select',
|
||||
options: ['left', 'right', 'center'],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const WithSliderTemplate = ({
|
||||
title,
|
||||
tooltipPosition,
|
||||
playOnClick,
|
||||
value,
|
||||
min,
|
||||
max,
|
||||
label,
|
||||
withValue,
|
||||
onChange,
|
||||
previousStateOnClick,
|
||||
nextStateOnClick,
|
||||
selected,
|
||||
segmentedControlOnClick,
|
||||
}) => (
|
||||
<Container>
|
||||
<SliderContainer>
|
||||
<Toolbar noBorder fullHeight compact>
|
||||
<Button
|
||||
title={title}
|
||||
tooltipPosition={tooltipPosition}
|
||||
onClick={playOnClick}
|
||||
>
|
||||
<MdPlayArrow />
|
||||
</Button>
|
||||
<Slider
|
||||
value={value}
|
||||
min={min}
|
||||
max={max}
|
||||
label={label}
|
||||
withValue={withValue}
|
||||
onChange={onChange}
|
||||
/>
|
||||
<Button
|
||||
title="Previous state"
|
||||
tooltipPosition={tooltipPosition}
|
||||
disabled
|
||||
onClick={previousStateOnClick}
|
||||
>
|
||||
<MdKeyboardArrowLeft />
|
||||
</Button>
|
||||
<Button
|
||||
title="Next state"
|
||||
tooltipPosition={tooltipPosition}
|
||||
onClick={nextStateOnClick}
|
||||
>
|
||||
<MdKeyboardArrowRight />
|
||||
</Button>
|
||||
<SegmentedControl
|
||||
values={['live', '1x']}
|
||||
selected={selected}
|
||||
onClick={segmentedControlOnClick}
|
||||
/>
|
||||
</Toolbar>
|
||||
</SliderContainer>
|
||||
</Container>
|
||||
);
|
||||
|
||||
export const WithSlider = WithSliderTemplate.bind({});
|
||||
WithSlider.args = {
|
||||
title: 'Play',
|
||||
tooltipPosition: 'top',
|
||||
value: 80,
|
||||
min: 0,
|
||||
max: 100,
|
||||
label: 'Slider label',
|
||||
withValue: false,
|
||||
selected: 'live',
|
||||
};
|
||||
WithSlider.argTypes = {
|
||||
tooltipPosition: {
|
||||
control: {
|
||||
type: 'select',
|
||||
options: [
|
||||
'top',
|
||||
'bottom',
|
||||
'left',
|
||||
'right',
|
||||
'bottom-left',
|
||||
'bottom-right',
|
||||
'top-left',
|
||||
'top-right',
|
||||
],
|
||||
},
|
||||
},
|
||||
playOnClick: {
|
||||
action: 'button clicked',
|
||||
},
|
||||
onChange: {
|
||||
action: 'slider changed',
|
||||
},
|
||||
previousStateOnClick: {
|
||||
action: 'previous state clicked',
|
||||
},
|
||||
nextStateOnClick: {
|
||||
action: 'next state clicked',
|
||||
},
|
||||
selected: {
|
||||
control: {
|
||||
type: 'select',
|
||||
options: ['live', '1x'],
|
||||
},
|
||||
},
|
||||
segmentedControlOnClick: {
|
||||
action: 'button selected',
|
||||
},
|
||||
};
|
||||
|
|
@ -1,205 +0,0 @@
|
|||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import styled from 'styled-components';
|
||||
import {
|
||||
withKnobs,
|
||||
text,
|
||||
number,
|
||||
boolean,
|
||||
select,
|
||||
} from '@storybook/addon-knobs';
|
||||
import { MdPlayArrow } from 'react-icons/md';
|
||||
import { MdFiberManualRecord } from 'react-icons/md';
|
||||
import { MdKeyboardArrowLeft } from 'react-icons/md';
|
||||
import { MdKeyboardArrowRight } from 'react-icons/md';
|
||||
import {
|
||||
Toolbar,
|
||||
Divider,
|
||||
Spacer,
|
||||
Button,
|
||||
Select,
|
||||
Slider,
|
||||
SegmentedControl,
|
||||
Tabs,
|
||||
} from '../../';
|
||||
import { options } from '../../Select/stories/options';
|
||||
import { simple10Tabs } from '../../Tabs/stories/data';
|
||||
|
||||
export const Container = styled.div`
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
export const SliderContainer = styled.div`
|
||||
width: 90%;
|
||||
height: 80px;
|
||||
`;
|
||||
|
||||
storiesOf('Toolbar', module)
|
||||
.addDecorator(withKnobs)
|
||||
.add('default', () => (
|
||||
<Container>
|
||||
<Toolbar borderPosition={select('borderPosition', ['top', 'bottom'])}>
|
||||
<Button
|
||||
title={text('Title', 'Hello Tooltip')}
|
||||
tooltipPosition={select('tooltipPosition', [
|
||||
'top',
|
||||
'bottom',
|
||||
'left',
|
||||
'right',
|
||||
'bottom-left',
|
||||
'bottom-right',
|
||||
'top-left',
|
||||
'top-right',
|
||||
])}
|
||||
disabled={boolean('Disabled', false)}
|
||||
onClick={action('button clicked')}
|
||||
>
|
||||
{text('Label', 'Hello Button')}
|
||||
</Button>
|
||||
<Divider />
|
||||
<Button
|
||||
title={text('Title', 'Hello Tooltip')}
|
||||
tooltipPosition={select('tooltipPosition', [
|
||||
'top',
|
||||
'bottom',
|
||||
'left',
|
||||
'right',
|
||||
'bottom-left',
|
||||
'bottom-right',
|
||||
'top-left',
|
||||
'top-right',
|
||||
])}
|
||||
disabled={boolean('Disabled', false)}
|
||||
onClick={action('button clicked')}
|
||||
>
|
||||
<MdFiberManualRecord />
|
||||
</Button>
|
||||
<Divider />
|
||||
<Spacer />
|
||||
<Select options={options} />
|
||||
</Toolbar>
|
||||
</Container>
|
||||
))
|
||||
.add('tabs', () => (
|
||||
<Container>
|
||||
<Toolbar>
|
||||
<Button
|
||||
title={text('Title', 'Hello Tooltip')}
|
||||
tooltipPosition={select('tooltipPosition', [
|
||||
'top',
|
||||
'bottom',
|
||||
'left',
|
||||
'right',
|
||||
'bottom-left',
|
||||
'bottom-right',
|
||||
'top-left',
|
||||
'top-right',
|
||||
])}
|
||||
disabled={boolean('Disabled', false)}
|
||||
onClick={action('button clicked')}
|
||||
>
|
||||
{text('Label', 'Hello Button')}
|
||||
</Button>
|
||||
<Tabs
|
||||
tabs={simple10Tabs}
|
||||
selected={text('selected', '2')}
|
||||
main={boolean('main', true)}
|
||||
onClick={action('tab selected')}
|
||||
collapsible={boolean('collapsible', true)}
|
||||
position={select('position', ['left', 'right', 'center'], 'center')}
|
||||
/>
|
||||
<Button
|
||||
title={text('Title', 'Hello Tooltip')}
|
||||
tooltipPosition={select('tooltipPosition', [
|
||||
'top',
|
||||
'bottom',
|
||||
'left',
|
||||
'right',
|
||||
'bottom-left',
|
||||
'bottom-right',
|
||||
'top-left',
|
||||
'top-right',
|
||||
])}
|
||||
disabled={boolean('Disabled', false)}
|
||||
onClick={action('button clicked')}
|
||||
>
|
||||
{text('Label', 'Hello Button')}
|
||||
</Button>
|
||||
</Toolbar>
|
||||
</Container>
|
||||
))
|
||||
.add('with slider', () => (
|
||||
<Container>
|
||||
<SliderContainer>
|
||||
<Toolbar noBorder fullHeight compact>
|
||||
<Button
|
||||
title={text('play title', 'Play')}
|
||||
tooltipPosition={select('tooltipPosition', [
|
||||
'top',
|
||||
'bottom',
|
||||
'left',
|
||||
'right',
|
||||
'bottom-left',
|
||||
'bottom-right',
|
||||
'top-left',
|
||||
'top-right',
|
||||
])}
|
||||
onClick={action('button clicked')}
|
||||
>
|
||||
<MdPlayArrow />
|
||||
</Button>
|
||||
<Slider
|
||||
value={number('value', 80)}
|
||||
min={number('min', 0)}
|
||||
max={number('max', 100)}
|
||||
label={text('label', 'Slider label')}
|
||||
withValue={boolean('withValue', false)}
|
||||
onChange={action('slider changed')}
|
||||
/>
|
||||
<Button
|
||||
title="Previous state"
|
||||
tooltipPosition={select('tooltipPosition', [
|
||||
'top',
|
||||
'bottom',
|
||||
'left',
|
||||
'right',
|
||||
'bottom-left',
|
||||
'bottom-right',
|
||||
'top-left',
|
||||
'top-right',
|
||||
])}
|
||||
disabled
|
||||
onClick={action('previous state clicked')}
|
||||
>
|
||||
<MdKeyboardArrowLeft />
|
||||
</Button>
|
||||
<Button
|
||||
title="Next state"
|
||||
tooltipPosition={select('tooltipPosition', [
|
||||
'top',
|
||||
'bottom',
|
||||
'left',
|
||||
'right',
|
||||
'bottom-left',
|
||||
'bottom-right',
|
||||
'top-left',
|
||||
'top-right',
|
||||
])}
|
||||
onClick={action('next state clicked')}
|
||||
>
|
||||
<MdKeyboardArrowRight />
|
||||
</Button>
|
||||
<SegmentedControl
|
||||
values={['live', '1x']}
|
||||
selected={select('selected', ['live', '1x'], 'live')}
|
||||
onClick={action('button selected')}
|
||||
/>
|
||||
</Toolbar>
|
||||
</SliderContainer>
|
||||
</Container>
|
||||
));
|
||||
Loading…
Reference in New Issue
Block a user