stash

packages/devui/src/Button/Button.stories.js

@@ -31,10 +31,10 @@ Default.args = {
   children: 'Hello Button',
 };
 Default.argTypes = {
-  onClick: { table: { disable: true } },
+  onClick: { control: { disable: true } },
-  type: { table: { disable: true } },
+  type: { control: { disable: true } },
-  mark: { table: { disable: true } },
+  mark: { control: { disable: true } },
-  theme: { table: { 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 } },
+  children: { control: { disable: true } },
-  onClick: { table: { disable: true } },
+  onClick: { control: { disable: true } },
-  type: { table: { disable: true } },
+  type: { control: { disable: true } },
-  primary: { table: { disable: true } },
+  primary: { control: { disable: true } },
-  theme: { table: { disable: true } },
+  theme: { control: { disable: true } },
 };

packages/devui/src/ContextMenu/ContextMenu.stories.js

@@ -30,7 +30,7 @@ Default.args = {
   items,
 };
 Default.argTypes = {
-  visible: { table: { disable: true } },
+  visible: { control: { disable: true } },
-  items: { table: { disable: true } },
+  items: { control: { disable: true } },
-  onClick: { table: { disable: true } },
+  onClick: { control: { disable: true } },
 };

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 } },
+  actions: { control: { disable: true } },
-  onDismiss: { table: { disable: true } },
+  onDismiss: { control: { disable: true } },
-  onSubmit: { table: { disable: true } },
+  onSubmit: { control: { disable: true } },
-  theme: { table: { disable: true } },
+  theme: { control: { disable: true } },
 };
 
 export const WithForm = Template.bind({});
@@ -39,11 +39,11 @@ WithForm.args = {
   uiSchema,
 };
 WithForm.argTypes = {
-  title: { table: { disable: true } },
+  title: { control: { disable: true } },
-  children: { table: { disable: true } },
+  children: { control: { disable: true } },
-  actions: { table: { disable: true } },
+  actions: { control: { disable: true } },
-  modal: { table: { disable: true } },
+  modal: { control: { disable: true } },
-  onDismiss: { table: { disable: true } },
+  onDismiss: { control: { disable: true } },
-  onSubmit: { table: { disable: true } },
+  onSubmit: { control: { disable: true } },
-  theme: { table: { disable: true } },
+  theme: { control: { disable: true } },
 };

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, {

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) => <WithTabsComponent {...args} />;
 
@@ -34,23 +40,13 @@ WithTabs.args = {
   lineNumbers: true,
   align: 'left',
 };
-// storiesOf('Editor', module)
+WithTabs.argTypes = {
-//   .addDecorator(withKnobs)
+  value: { control: { disable: true } },
-//   .add(
+  mode: { control: { disable: true } },
-//     'default',
+  lineWrapping: { control: { disable: true } },
-//     () => (
+  readOnly: { control: { disable: true } },
-//       <Editor
+  theme: { control: { disable: true } },
-//         value={text('value', value)}
+  foldGutter: { control: { disable: true } },
-//         lineNumbers={boolean('lineNumbers', true)}
+  autofocus: { control: { disable: true } },
-//         lineWrapping={boolean('lineWrapping', false)}
+  onChange: { control: { disable: true } },
-//         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)} />
-//   ));

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 {

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) => <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 } },
+};

packages/devui/src/Form/stories/index.js

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

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) => (
+  <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 } },
+};

packages/devui/src/Notification/stories/index.js

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

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) => (
+  <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 } },
+};

packages/devui/src/SegmentedControl/stories/index.js

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

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 <SelectContainer {...this.props} />;

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) => (
+  <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 } },
+};

packages/devui/src/Select/stories/index.js

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

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) => (
+  <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>
+//   ));

packages/devui/src/Slider/stories/index.js

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

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) => (
+  <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 } },
+};

packages/devui/src/Tabs/stories/index.js

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

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,
+}) => (
+  <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',
+  },
+};

packages/devui/src/Toolbar/stories/index.js

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