Update storybook example to v5.2 with CSF (#9036)

* Update storybook example to v5.2 with CSF

* Fix linter errors

examples/with-storybook/.storybook/config.js

-import { configure } from '@storybook/react'
+import { configure, addParameters } from '@storybook/react'
+
+addParameters({
+  options: {
+    storySort: (a, b) => {
+      // We want the Welcome story at the top
+      if (a[1].kind === 'Welcome') {
+        return -1
+      }
+
+      // Sort the other stories by ID
+      // https://github.com/storybookjs/storybook/issues/548#issuecomment-530305279
+      return a[1].kind === b[1].kind
+        ? 0
+        : a[1].id.localeCompare(b[1].id, { numeric: true })
+    },
+  },
+})
 
 // automatically import all files ending in *.stories.js
 const req = require.context('../stories', true, /.stories.js$/)
-function loadStories () {
-  req.keys().forEach(filename => req(filename))
-}
 
-configure(loadStories, module)
+// the first argument can be an array too, so if you want to load from different locations or
+// different extensions, you can do it like this: configure([req1, req2], module)
+configure(req, module)

examples/with-storybook/package.json

@@ -16,10 +16,10 @@
   },
   "license": "ISC",
   "devDependencies": {
-    "@storybook/addon-actions": "^4.1.7",
-    "@storybook/addon-links": "^4.1.7",
-    "@storybook/addons": "^4.1.7",
-    "@storybook/react": "^4.1.7",
+    "@storybook/addon-actions": "5.2.3",
+    "@storybook/addon-links": "5.2.3",
+    "@storybook/addons": "5.2.3",
+    "@storybook/react": "5.2.3",
     "babel-loader": "^8.0.5"
   }
 }

examples/with-storybook/stories/button.stories.js

+import React from 'react'
+import { action } from '@storybook/addon-actions'
+import { Button } from '@storybook/react/demo'
+
+export default { title: 'Button' }
+
+export const withText = () => (
+  <Button onClick={action('clicked')}>Hello Button</Button>
+)
+
+export const withSomeEmoji = () => (
+  <Button onClick={action('clicked')}>
+    <span role='img' aria-label='so cool'>
+      😀 😎 👍 💯
+    </span>
+  </Button>
+)

examples/with-storybook/stories/helloWorld.stories.js

+import React from 'react'
+import HelloWorld from '../components'
+
+export default { title: 'Hello World' }
+
+export const simpleComponent = () => <HelloWorld />

examples/with-storybook/stories/index.stories.js

-import React from 'react'
-
-import { storiesOf } from '@storybook/react'
-import { action } from '@storybook/addon-actions'
-import { linkTo } from '@storybook/addon-links'
-
-import { Button, Welcome } from '@storybook/react/demo'
-import HelloWorld from '../components'
-
-storiesOf('Welcome', module).add('to Storybook', () => (
-  <Welcome showApp={linkTo('Button')} />
-))
-
-storiesOf('Button', module)
-  .add('with text', () => (
-    <Button onClick={action('clicked')}>Hello Button</Button>
-  ))
-  .add('with some emoji', () => (
-    <Button onClick={action('clicked')}>
-      <span role='img' aria-label='so cool'>
-        😀 😎 👍 💯
-      </span>
-    </Button>
-  ))
-
-storiesOf('HelloWorld', module).add('simple component', () => <HelloWorld />)

examples/with-storybook/stories/welcome.stories.js

+import React from 'react'
+import { linkTo } from '@storybook/addon-links'
+import { Welcome } from '@storybook/react/demo'
+
+export default { title: 'Welcome' }
+
+export const toStorybook = () => <Welcome showApp={linkTo('Button')} />