refactor: migrated from storiesOf to CSF

trutoo · Dec 6, 2019 · bc53099 · bc53099
1 parent 20545ff
commit bc53099
Show file tree

Hide file tree

Showing 13 changed files with 767 additions and 741 deletions.
diff --git a/packages/docs/.storybook/config.jsx b/packages/docs/.storybook/config.jsx
@@ -28,9 +28,6 @@ const setMode = isDark => {
 };
 channel.addListener('DARK_MODE', setMode);
 
-function loadStories() {
-  css.keys().forEach(filename => css(filename));
-  stories.keys().forEach(filename => stories(filename));
-}
-
-configure(loadStories, module);
+// Load Base CSS
+css.keys().forEach(filename => css(filename));
+configure(stories, module);
diff --git a/packages/ui-core/src/components/Button/Button.stories.tsx b/packages/ui-core/src/components/Button/Button.stories.tsx
@@ -1,23 +1,28 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 
 import './Button.css';
 import Button from './Button';
 
-storiesOf('Button', module)
-  .add('default', () => <Button onClick={console.log}>Click me!</Button>)
-  .add('link', () => (
-    <Button type="link" onClick={console.log}>
-      <div>Click me!</div>
-    </Button>
-  ))
-  .add('disabled button', () => (
-    <Button disabled={true} onClick={console.log}>
-      Click me!
-    </Button>
-  ))
-  .add('disabled link', () => (
-    <Button type="link" disabled={true} onClick={console.log}>
-      Click me!
-    </Button>
-  ));
+export default {
+  title: 'Button',
+};
+
+export const basic = () => <Button onClick={console.log}>Click me!</Button>;
+
+export const link = () => (
+  <Button type="link" onClick={console.log}>
+    <div>Click me!</div>
+  </Button>
+);
+
+export const disabledButton = () => (
+  <Button disabled={true} onClick={console.log}>
+    Click me!
+  </Button>
+);
+
+export const disabledLink = () => (
+  <Button type="link" disabled={true} onClick={console.log}>
+    Click me!
+  </Button>
+);
diff --git a/packages/ui-core/src/components/CheckBox/CheckBox.stories.tsx b/packages/ui-core/src/components/CheckBox/CheckBox.stories.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { StateDecorator, Store } from '@sambego/storybook-state';
 
 import './CheckBox.css';
@@ -9,17 +8,20 @@ const store = new Store({
   checked: false,
 });
 
-storiesOf('CheckBox', module)
-  .addDecorator(StateDecorator(store) as any)
-  .add('default', () => (
-    <CheckBox
-      label="Check me!"
-      onChange={state => store.set({ checked: state })}
-      validators={[
-        value => {
-          return !value ? { required: true } : null;
-        },
-      ]}
-      inputProps={{ 'aria-label': 'test' }}
-    />
-  ));
+export default {
+  title: 'CheckBox',
+  decorators: [StateDecorator(store)],
+};
+
+export const basic = () => (
+  <CheckBox
+    label="Check me!"
+    onChange={state => store.set({ checked: state })}
+    validators={[
+      value => {
+        return !value ? { required: true } : null;
+      },
+    ]}
+    inputProps={{ 'aria-label': 'test' }}
+  />
+);
diff --git a/packages/ui-core/src/components/Container/Container.stories.tsx b/packages/ui-core/src/components/Container/Container.stories.tsx
@@ -1,12 +1,15 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 
 import './Container.css';
 import Container from './Container';
 
-storiesOf('Container', module).add('default', () => (
+export default {
+  title: 'Container',
+};
+
+export const basic = () => (
   <Container>
     Vero ipsa ut maxime aspernatur. Officia quibusdam voluptatum voluptatem dolorem provident dolores minus. Ut soluta
     facere consectetur.
   </Container>
-));
+);
diff --git a/packages/ui-core/src/components/Grid/Grid.stories.tsx b/packages/ui-core/src/components/Grid/Grid.stories.tsx
@@ -1,40 +1,44 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 
 import './Grid.css';
 import Grid from './Grid';
 
-storiesOf('Grid', module)
-  .add('default', () => (
-    <div>
-      <Grid className="test" columns={1} columnsSM={2} columnsMD={3} columnsLG={4} columnsXL={5}>
-        <article>Article One</article>
-        <article>Article Two</article>
-        <article>Article Three</article>
-        <article>Article Four</article>
-        <article>Article Five</article>
-      </Grid>
-    </div>
-  ))
-  .add('array', () => (
-    <div>
-      <Grid columns={[2, 5]}>
-        <article>Article One</article>
-        <article>Article Two</article>
-        <article>Article Three</article>
-        <article>Article Four</article>
-        <article>Article Five</article>
-      </Grid>
-    </div>
-  ))
-  .add('override', () => (
-    <div>
-      <Grid columns={[1, 2, 2, 2, 1]} columnsLG={5}>
-        <article>Article One</article>
-        <article>Article Two</article>
-        <article>Article Three</article>
-        <article>Article Four</article>
-        <article>Article Five</article>
-      </Grid>
-    </div>
-  ));
+export default {
+  title: 'Grid',
+};
+
+export const basic = () => (
+  <div>
+    <Grid className="test" columns={1} columnsSM={2} columnsMD={3} columnsLG={4} columnsXL={5}>
+      <article>Article One</article>
+      <article>Article Two</article>
+      <article>Article Three</article>
+      <article>Article Four</article>
+      <article>Article Five</article>
+    </Grid>
+  </div>
+);
+
+export const array = () => (
+  <div>
+    <Grid columns={[2, 5]}>
+      <article>Article One</article>
+      <article>Article Two</article>
+      <article>Article Three</article>
+      <article>Article Four</article>
+      <article>Article Five</article>
+    </Grid>
+  </div>
+);
+
+export const override = () => (
+  <div>
+    <Grid columns={[1, 2, 2, 2, 1]} columnsLG={5}>
+      <article>Article One</article>
+      <article>Article Two</article>
+      <article>Article Three</article>
+      <article>Article Four</article>
+      <article>Article Five</article>
+    </Grid>
+  </div>
+);
diff --git a/packages/ui-core/src/components/RadioButton/RadioButton.stories.tsx b/packages/ui-core/src/components/RadioButton/RadioButton.stories.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { State, Store } from '@sambego/storybook-state';
 
 import './RadioButton.css';
@@ -9,9 +8,13 @@ const store = new Store({
   value: 'value-2',
 });
 
+export default {
+  title: 'RadioButton',
+};
+
 /* Handle differently because radio buttons work as a group and checked must be conditional */
 let index = 0;
-storiesOf('RadioButton', module).add('default', () => {
+export const basic = () => {
   const value = 'value-' + index++;
   return (
     <State store={store}>
@@ -28,4 +31,4 @@ storiesOf('RadioButton', module).add('default', () => {
       )}
     </State>
   );
-});
+};
diff --git a/packages/ui-core/src/components/Select/Select.stories.tsx b/packages/ui-core/src/components/Select/Select.stories.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { StateDecorator, Store } from '@sambego/storybook-state';
 
 import './Select.css';
@@ -44,14 +43,17 @@ const options = [
   },
 ];
 
-storiesOf('Select', module)
-  .addDecorator(StateDecorator(store) as any)
-  .add('default', () => (
-    <Select
-      label="Select me!"
-      options={options}
-      placeholder={'Choose option in list'}
-      onChange={state => store.set({ value: state })}
-      validators={[Validator.required()]}
-    />
-  ));
+export default {
+  title: 'Select',
+  decorators: [StateDecorator(store)],
+};
+
+export const basic = () => (
+  <Select
+    label="Select me!"
+    options={options}
+    placeholder={'Choose option in list'}
+    onChange={state => store.set({ value: state })}
+    validators={[Validator.required()]}
+  />
+);
diff --git a/packages/ui-core/src/components/TextArea/TextArea.stories.tsx b/packages/ui-core/src/components/TextArea/TextArea.stories.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { StateDecorator, Store } from '@sambego/storybook-state';
 
 import './TextArea.css';
@@ -10,13 +9,16 @@ const store = new Store({
   value: '',
 });
 
-storiesOf('TextArea', module)
-  .addDecorator(StateDecorator(store) as any)
-  .add('default', () => (
-    <TextArea
-      label="Paragraph here!"
-      onChange={state => store.set({ value: state })}
-      validators={[Validator.required()]}
-      inputProps={{ 'aria-label': 'test' }}
-    />
-  ));
+export default {
+  title: 'TextArea',
+  decorators: [StateDecorator(store)],
+};
+
+export const basic = () => (
+  <TextArea
+    label="Paragraph here!"
+    onChange={state => store.set({ value: state })}
+    validators={[Validator.required()]}
+    inputProps={{ 'aria-label': 'test' }}
+  />
+);
diff --git a/packages/ui-core/src/components/TextField/TextField.stories.tsx b/packages/ui-core/src/components/TextField/TextField.stories.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { StateDecorator, Store } from '@sambego/storybook-state';
 
 import './TextField.css';
@@ -10,13 +9,16 @@ const store = new Store({
   value: '',
 });
 
-storiesOf('TextField', module)
-  .addDecorator(StateDecorator(store) as any)
-  .add('default', () => (
-    <TextField
-      label="Text here!"
-      onChange={state => store.set({ value: state })}
-      validators={[Validator.required()]}
-      inputProps={{ 'aria-label': 'test' }}
-    />
-  ));
+export default {
+  title: 'TextField',
+  decorators: [StateDecorator(store)],
+};
+
+export const basic = () => (
+  <TextField
+    label="Text here!"
+    onChange={state => store.set({ value: state })}
+    validators={[Validator.required()]}
+    inputProps={{ 'aria-label': 'test' }}
+  />
+);