diff --git a/packages/devui/src/Button/Button.stories.js b/packages/devui/src/Button/Button.stories.js index 447a6b23..f87480f0 100644 --- a/packages/devui/src/Button/Button.stories.js +++ b/packages/devui/src/Button/Button.stories.js @@ -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: , }; 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 } }, }; diff --git a/packages/devui/src/ContextMenu/ContextMenu.stories.js b/packages/devui/src/ContextMenu/ContextMenu.stories.js index 4ff20129..123e911e 100644 --- a/packages/devui/src/ContextMenu/ContextMenu.stories.js +++ b/packages/devui/src/ContextMenu/ContextMenu.stories.js @@ -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 } }, }; diff --git a/packages/devui/src/Dialog/Dialog.stories.js b/packages/devui/src/Dialog/Dialog.stories.js index 9573ba5e..c43fc37d 100644 --- a/packages/devui/src/Dialog/Dialog.stories.js +++ b/packages/devui/src/Dialog/Dialog.stories.js @@ -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 } }, }; diff --git a/packages/devui/src/Editor/Editor.js b/packages/devui/src/Editor/Editor.js index 8f01bb55..c2d5ab5e 100644 --- a/packages/devui/src/Editor/Editor.js +++ b/packages/devui/src/Editor/Editor.js @@ -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, { diff --git a/packages/devui/src/Editor/Editor.stories.js b/packages/devui/src/Editor/Editor.stories.js index dc6b5f04..06a041ff 100644 --- a/packages/devui/src/Editor/Editor.stories.js +++ b/packages/devui/src/Editor/Editor.stories.js @@ -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) => ; @@ -34,23 +40,13 @@ WithTabs.args = { lineNumbers: true, align: 'left', }; -// storiesOf('Editor', module) -// .addDecorator(withKnobs) -// .add( -// 'default', -// () => ( -// -// ), -// { info: 'Based on [CodeMirror](http://codemirror.net/).' } -// ) -// .add('with tabs', () => ( -// -// )); +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 } }, +}; diff --git a/packages/devui/src/Form/Form.js b/packages/devui/src/Form/Form.js index f982269d..12bb2999 100644 --- a/packages/devui/src/Form/Form.js +++ b/packages/devui/src/Form/Form.js @@ -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 { diff --git a/packages/devui/src/Form/Form.stories.js b/packages/devui/src/Form/Form.stories.js new file mode 100644 index 00000000..f4a17674 --- /dev/null +++ b/packages/devui/src/Form/Form.stories.js @@ -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) =>
; + +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 } }, +}; diff --git a/packages/devui/src/Form/stories/schema.js b/packages/devui/src/Form/schema.js similarity index 100% rename from packages/devui/src/Form/stories/schema.js rename to packages/devui/src/Form/schema.js diff --git a/packages/devui/src/Form/stories/index.js b/packages/devui/src/Form/stories/index.js deleted file mode 100755 index 7a5f9da1..00000000 --- a/packages/devui/src/Form/stories/index.js +++ /dev/null @@ -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', - () => ( - - ), - { - info: - 'Wrapper around [`react-jsonschema-form`](https://github.com/mozilla-services/react-jsonschema-form)' + - ' with custom widgets.', - } - ); diff --git a/packages/devui/src/Notification/Notification.stories.js b/packages/devui/src/Notification/Notification.stories.js new file mode 100644 index 00000000..445b07c0 --- /dev/null +++ b/packages/devui/src/Notification/Notification.stories.js @@ -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) => ( + + + +); + +export const Default = Template.bind({}); +Default.args = { + type: 'warning', + children: 'Hello Notification', +}; +Default.argTypes = { + onClose: { control: { disable: true } }, + theme: { control: { disable: true } }, +}; diff --git a/packages/devui/src/Notification/stories/index.js b/packages/devui/src/Notification/stories/index.js deleted file mode 100644 index 52ad1a60..00000000 --- a/packages/devui/src/Notification/stories/index.js +++ /dev/null @@ -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', () => ( - - - {text('Message', 'Hello Notification')} - - - )); diff --git a/packages/devui/src/SegmentedControl/SegmentedControl.stories.js b/packages/devui/src/SegmentedControl/SegmentedControl.stories.js new file mode 100644 index 00000000..cb74011f --- /dev/null +++ b/packages/devui/src/SegmentedControl/SegmentedControl.stories.js @@ -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) => ( + + + +); + +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 } }, +}; diff --git a/packages/devui/src/SegmentedControl/stories/index.js b/packages/devui/src/SegmentedControl/stories/index.js deleted file mode 100644 index 0912c897..00000000 --- a/packages/devui/src/SegmentedControl/stories/index.js +++ /dev/null @@ -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', () => ( - - - - )); diff --git a/packages/devui/src/Select/Select.js b/packages/devui/src/Select/Select.js index f34b53c0..014fd5bc 100644 --- a/packages/devui/src/Select/Select.js +++ b/packages/devui/src/Select/Select.js @@ -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 ; diff --git a/packages/devui/src/Select/Select.stories.js b/packages/devui/src/Select/Select.stories.js new file mode 100644 index 00000000..43400152 --- /dev/null +++ b/packages/devui/src/Select/Select.stories.js @@ -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) => ( + + - - ), - { - info: - 'Wrapper around [React Select](https://github.com/JedWatson/react-select) with themes ' + - 'and new props like `openOuterUp` and `menuMaxHeight`.', - } - ); diff --git a/packages/devui/src/Slider/Slider.stories.js b/packages/devui/src/Slider/Slider.stories.js new file mode 100644 index 00000000..5978ad9e --- /dev/null +++ b/packages/devui/src/Slider/Slider.stories.js @@ -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) => ( + + + +); + +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', () => ( +// +// +// +// )); diff --git a/packages/devui/src/Slider/stories/index.js b/packages/devui/src/Slider/stories/index.js deleted file mode 100755 index a94384b0..00000000 --- a/packages/devui/src/Slider/stories/index.js +++ /dev/null @@ -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', () => ( - - - - )); diff --git a/packages/devui/src/Tabs/Tabs.stories.js b/packages/devui/src/Tabs/Tabs.stories.js new file mode 100644 index 00000000..2f7999ad --- /dev/null +++ b/packages/devui/src/Tabs/Tabs.stories.js @@ -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) => ( + + + +); + +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 } }, +}; diff --git a/packages/devui/src/Tabs/stories/data.js b/packages/devui/src/Tabs/data.js similarity index 100% rename from packages/devui/src/Tabs/stories/data.js rename to packages/devui/src/Tabs/data.js diff --git a/packages/devui/src/Tabs/stories/index.js b/packages/devui/src/Tabs/stories/index.js deleted file mode 100755 index 4f5eb370..00000000 --- a/packages/devui/src/Tabs/stories/index.js +++ /dev/null @@ -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', () => ( - - - - )) - .add('with content', () => ( - - )); diff --git a/packages/devui/src/Toolbar/Toolbar.stories.js b/packages/devui/src/Toolbar/Toolbar.stories.js new file mode 100644 index 00000000..925e8658 --- /dev/null +++ b/packages/devui/src/Toolbar/Toolbar.stories.js @@ -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, +}) => ( + + + + + + + + - - - )) - .add('tabs', () => ( - - - - - - - - )) - .add('with slider', () => ( - - - - - - - - - - - - ));