Use Component Story Format for stories (#8108)

The recommended way of writing stories changed in Storybook v5.2 to
the Component Story Format (CSF). Instead of using `storiesOf` and
running everything upon module import, the new story format is a
declarative description of each component that uses ES6 import
semantics.

ui/app/components/ui/button-group/button-group.stories.js

@@ -1,49 +1,52 @@
 import React from 'react'
-import { storiesOf } from '@storybook/react'
 import { action } from '@storybook/addon-actions'
 import ButtonGroup from '.'
 import Button from '../button'
 import { text, boolean } from '@storybook/addon-knobs/react'
 
-storiesOf('ButtonGroup', module)
+export default {
-  .add('with Buttons', () => (
+  title: 'ButtonGroup',
-    <ButtonGroup
+}
-      style={{ width: '300px' }}
+
-      disabled={boolean('Disabled', false)}
+export const withButtons = () => (
-      defaultActiveButtonIndex={1}
+  <ButtonGroup
+    style={{ width: '300px' }}
+    disabled={boolean('Disabled', false)}
+    defaultActiveButtonIndex={1}
+  >
+    <Button
+      onClick={action('cheap')}
     >
-      <Button
+      {text('Button1', 'Cheap')}
-        onClick={action('cheap')}
+    </Button>
-      >
+    <Button
-        {text('Button1', 'Cheap')}
+      onClick={action('average')}
-      </Button>
-      <Button
-        onClick={action('average')}
-      >
-        {text('Button2', 'Average')}
-      </Button>
-      <Button
-        onClick={action('fast')}
-      >
-        {text('Button3', 'Fast')}
-      </Button>
-    </ButtonGroup>
-  ))
-  .add('with a disabled Button', () => (
-    <ButtonGroup
-      style={{ width: '300px' }}
-      disabled={boolean('Disabled', false)}
     >
-      <Button
+      {text('Button2', 'Average')}
-        onClick={action('enabled')}
+    </Button>
-      >
+    <Button
-        {text('Button1', 'Enabled')}
+      onClick={action('fast')}
-      </Button>
+    >
-      <Button
+      {text('Button3', 'Fast')}
-        onClick={action('disabled')}
+    </Button>
-        disabled
+  </ButtonGroup>
-      >
+)
-        {text('Button2', 'Disabled')}
+
-      </Button>
+export const withDisabledButton = () => (
-    </ButtonGroup>
+  <ButtonGroup
-  ))
+    style={{ width: '300px' }}
+    disabled={boolean('Disabled', false)}
+  >
+    <Button
+      onClick={action('enabled')}
+    >
+      {text('Button1', 'Enabled')}
+    </Button>
+    <Button
+      onClick={action('disabled')}
+      disabled
+    >
+      {text('Button2', 'Disabled')}
+    </Button>
+  </ButtonGroup>
+)

ui/app/components/ui/button/button.stories.js

@@ -1,71 +1,78 @@
 import React from 'react'
-import { storiesOf } from '@storybook/react'
 import { action } from '@storybook/addon-actions'
 import Button from '.'
 import { text, boolean } from '@storybook/addon-knobs/react'
 
-// ', 'secondary', 'default', 'warning', 'danger', 'danger-primary', 'link'], 'primary')}
+export default {
-storiesOf('Button', module)
+  title: 'Button',
-  .add('Button - Primary', () => (
+}
-    <Button
+
-      onClick={action('clicked')}
+export const primaryType = () => (
-      type="primary"
+  <Button
-      disabled={boolean('disabled', false)}
+    onClick={action('clicked')}
-    >
+    type="primary"
-      {text('text', 'Click me')}
+    disabled={boolean('disabled', false)}
-    </Button>
+  >
-  ))
+    {text('text', 'Click me')}
-  .add('Button - Secondary', () => (
+  </Button>
-    <Button
+)
-      onClick={action('clicked')}
+
-      type="secondary"
+export const secondaryType = () => (
-      disabled={boolean('disabled', false)}
+  <Button
-    >
+    onClick={action('clicked')}
-      {text('text', 'Click me')}
+    type="secondary"
-    </Button>
+    disabled={boolean('disabled', false)}
-  ))
+  >
-  .add('Button - Default', () => (
+    {text('text', 'Click me')}
-    <Button
+  </Button>
-      onClick={action('clicked')}
+)
-      type="default"
+
-      disabled={boolean('disabled', false)}
+export const defaultType = () => (
-    >
+  <Button
-      {text('text', 'Click me')}
+    onClick={action('clicked')}
-    </Button>
+    type="default"
-  ))
+    disabled={boolean('disabled', false)}
-  .add('Button - Warning', () => (
+  >
-    <Button
+    {text('text', 'Click me')}
-      onClick={action('clicked')}
+  </Button>
-      type="warning"
+)
-      disabled={boolean('disabled', false)}
+
-    >
+export const warningType = () => (
-      {text('text', 'Click me')}
+  <Button
-    </Button>
+    onClick={action('clicked')}
-  ))
+    type="warning"
-  .add('Button - Danger', () => (
+    disabled={boolean('disabled', false)}
-    <Button
+  >
-      onClick={action('clicked')}
+    {text('text', 'Click me')}
-      type="danger"
+  </Button>
-      disabled={boolean('disabled', false)}
+)
-    >
+
-      {text('text', 'Click me')}
+export const dangerType = () => (
-    </Button>
+  <Button
-  ))
+    onClick={action('clicked')}
-  .add('Button - Danger Primary', () => (
+    type="danger"
-    <Button
+    disabled={boolean('disabled', false)}
-      onClick={action('clicked')}
+  >
-      type="danger-primary"
+    {text('text', 'Click me')}
-      disabled={boolean('disabled', false)}
+  </Button>
-    >
+)
-      {text('text', 'Click me')}
+
-    </Button>
+export const dangerPrimaryType = () => (
-  ))
+  <Button
-  .add('Button - Link', () => (
+    onClick={action('clicked')}
-    <Button
+    type="danger-primary"
-      onClick={action('clicked')}
+    disabled={boolean('disabled', false)}
-      type="link"
+  >
-      disabled={boolean('disabled', false)}
+    {text('text', 'Click me')}
-    >
+  </Button>
-      {text('text', 'Click me')}
+)
-    </Button>
+
-  ))
+export const linkType = () => (
+  <Button
+    onClick={action('clicked')}
+    type="link"
+    disabled={boolean('disabled', false)}
+  >
+    {text('text', 'Click me')}
+  </Button>
+)

ui/app/components/ui/text-field/text-field.stories.js

@@ -1,53 +1,61 @@
 import React from 'react'
-import { storiesOf } from '@storybook/react'
 import TextField from '.'
 
-storiesOf('TextField', module)
+export default {
-  .add('text', () => (
+  title: 'TextField',
-    <TextField
+}
-      label="Text"
+
-      type="text"
+export const text = () => (
-    />
+  <TextField
-  ))
+    label="Text"
-  .add('password', () => (
+    type="text"
-    <TextField
+  />
-      label="Password"
+)
-      type="password"
+
-    />
+export const password = () => (
-  ))
+  <TextField
-  .add('error', () => (
+    label="Password"
-    <TextField
+    type="password"
-      type="text"
+  />
-      label="Name"
+)
-      error="Invalid value"
+
-    />
+export const error = () => (
-  ))
+  <TextField
-  .add('Mascara text', () => (
+    type="text"
-    <TextField
+    label="Name"
-      label="Text"
+    error="Invalid value"
-      type="text"
+  />
-      largeLabel
+)
-    />
+
-  ))
+export const mascaraText = () => (
-  .add('Material text', () => (
+  <TextField
-    <TextField
+    label="Text"
-      label="Text"
+    type="text"
-      type="text"
+    largeLabel
-      theme="material"
+  />
-    />
+)
-  ))
+
-  .add('Material password', () => (
+export const materialText = () => (
-    <TextField
+  <TextField
-      label="Password"
+    label="Text"
-      type="password"
+    type="text"
-      theme="material"
+    theme="material"
-    />
+  />
-  ))
+)
-  .add('Material error', () => (
+
-    <TextField
+export const materialPassword = () => (
-      type="text"
+  <TextField
-      label="Name"
+    label="Password"
-      error="Invalid value"
+    type="password"
-      theme="material"
+    theme="material"
-    />
+  />
-  ))
+)
+
+export const materialError = () => (
+  <TextField
+    type="text"
+    label="Name"
+    error="Invalid value"
+    theme="material"
+  />
+)