Merge pull request #6 from marp-team/storybook-v5

Upgrade Storybook to v5
marp-team · Mar 8, 2019 · aec2f34 · aec2f34
2 parents 5ade58a + 4076347
commit aec2f34
Show file tree

Hide file tree

Showing 6 changed files with 1,316 additions and 853 deletions.
diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
@@ -1,4 +1,4 @@
-module.exports = (baseConfig, env, config) => {
+module.exports = ({ config }) => {
   config.module.rules.push(
     {
       test: /\.worker\.[jt]s$/,

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## [Unreleased]
 
+### Changed
+
+- Upgrade Storybook to v5 ([#6](https://github.com/marp-team/marp-react/pull/6))
+
 ### Fixed
 
 - Fix ignored whitespaces and line breaks in fenced code ([#4](https://github.com/marp-team/marp-react/issues/4), [#5](https://github.com/marp-team/marp-react/pull/5))

diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # @marp-team/marp-react
 
-[![Storybook](https://bit.ly/2SrP6Hf)](https://marp-react.netlify.com/)
+[![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg?sanitize=true)](https://marp-react.netlify.com/)
 [![CircleCI](https://img.shields.io/circleci/project/github/marp-team/marp-react/master.svg?style=flat-square&logo=circleci)](https://circleci.com/gh/marp-team/marp-react/)
 [![Codecov](https://img.shields.io/codecov/c/github/marp-team/marp-react/master.svg?style=flat-square&logo=codecov)](https://codecov.io/gh/marp-team/marp-react)
 [![npm](https://img.shields.io/npm/v/@marp-team/marp-react.svg?style=flat-square&logo=npm)](https://www.npmjs.com/package/@marp-team/marp-react)

diff --git a/package.json b/package.json
@@ -55,9 +55,9 @@
   "devDependencies": {
     "@babel/core": "^7.3.4",
     "@marp-team/marp-core": "^0.6.1",
-    "@storybook/addon-knobs": "^4.1.13",
-    "@storybook/addons": "^4.1.13",
-    "@storybook/react": "^4.1.13",
+    "@storybook/addon-knobs": "^5.0.0",
+    "@storybook/addons": "^5.0.0",
+    "@storybook/react": "^5.0.0",
     "@types/enzyme": "^3.9.0",
     "@types/jest": "^24.0.9",
     "@types/react": "^16.8.6",

diff --git a/stories/marp-worker.stories.tsx b/stories/marp-worker.stories.tsx
@@ -1,5 +1,6 @@
 import { storiesOf } from '@storybook/react'
-import React, { useState } from 'react'
+import { withKnobs, text } from '@storybook/addon-knobs'
+import React from 'react'
 import MarpWorker from '../src/MarpWorker'
 import MarpWorkerEntry from './marp.worker'
 
@@ -12,93 +13,59 @@ const largeMd = (baseMd: string) => {
   return markdown
 }
 
-const Editor: React.FC<{
-  children: (buffer: string) => any
-  markdown?: string
-}> = props => {
-  const { children, markdown } = props
-  const [buffer, setBuffer] = useState(markdown || '')
-  const handleChange = e => setBuffer(e.target.value)
-
-  return (
-    <div style={{ display: 'flex', height: '500px' }}>
-      <textarea
-        value={buffer}
-        onChange={handleChange}
-        style={{ flex: 1, fontSize: '18px' }}
-      />
-      <div style={{ flex: 1, overflowY: 'auto' }}>{children(buffer)}</div>
-    </div>
-  )
-}
-
 storiesOf('MarpWorker', module)
-  .add('Basic usage', () => (
-    <Editor
-      markdown={`
-# MarpWorker renderer
-
-This renderer is using Web Worker to convert Marp Markdown.
-    `.trim()}
-    >
-      {markdown => <MarpWorker markdown={markdown} worker={worker} />}
-    </Editor>
-  ))
+  .addDecorator(withKnobs({ escapeHTML: false }))
+  .add('Basic usage', () => {
+    const markdown = text(
+      'Markdown',
+      '# MarpWorker renderer\n\nThis renderer is using Web Worker to convert Marp Markdown.'
+    )
+    return <MarpWorker markdown={markdown} worker={worker} />
+  })
   .add('Use worker via CDN', () => {
-    return (
-      <Editor
-        markdown={`
-# Use worker via CDN
-
-By default, MarpWorker uses prebuilt worker via jsDelivr CDN.
-        `.trim()}
-      >
-        {markdown => <MarpWorker markdown={markdown} />}
-      </Editor>
+    const markdown = text(
+      'Markdown',
+      '# Use worker via CDN\n\nBy default, MarpWorker uses prebuilt worker via jsDelivr CDN.'
     )
+    return <MarpWorker markdown={markdown} />
   })
-  .add('Large Markdown', () => (
-    <Editor
-      markdown={largeMd(
-        `
-# Large Markdown
-
-This deck has 100 math typesettings, but it has not blocked UI by long-time conversion.
-
-Besides, it still keeps blazing-fast preview by frame-skipped rendering. Try typing fast! :zap:
-        `.trim()
-      )}
-    >
-      {markdown => <MarpWorker markdown={markdown} worker={worker} />}
-    </Editor>
-  ))
-  .add('Custom renderer', () => (
-    <Editor
-      markdown={largeMd(
-        `
-# Custom renderer
+  .add('Large Markdown', () => {
+    const markdown = text(
+      'Markdown',
+      largeMd(
+        [
+          '# Large Markdown',
+          'This deck has 100 math typesettings, but it has not blocked UI by long-time conversion.',
+          'Besides, it still keeps blazing-fast preview by frame-skipped rendering. Try typing fast! :zap:',
+        ].join('\n\n')
+      )
+    )
+    return <MarpWorker markdown={markdown} worker={worker} />
+  })
+  .add('Custom renderer', () => {
+    const markdown = text(
+      'Markdown',
+      largeMd(
+        '# Custom renderer\n\nMarpWorker can specify initial rendering state.'
+      )
+    )
 
-MarpWorker can specify initial rendering state.
-        `.trim()
-      )}
-    >
-      {markdown => (
-        <MarpWorker markdown={markdown} worker={worker}>
-          {slides =>
-            slides ? (
-              slides.map(({ slide, comments }, i) => (
-                <div key={i} style={{ margin: '40px' }}>
-                  <div style={{ boxShadow: '0 5px 10px #ccc' }}>{slide}</div>
-                  {comments.map((comment, ci) => (
-                    <p key={ci}>{comment}</p>
-                  ))}
-                </div>
-              ))
-            ) : (
-              <p>Loading...</p>
-            )
-          }
-        </MarpWorker>
-      )}
-    </Editor>
-  ))
+    return (
+      <MarpWorker markdown={markdown} worker={worker}>
+        {slides =>
+          slides ? (
+            slides.map(({ slide, comments }, i) => (
+              <div key={i} style={{ margin: '40px' }}>
+                <div style={{ boxShadow: '0 5px 10px #ccc' }}>{slide}</div>
+                {comments.map((comment, ci) => (
+                  <p key={ci}>{comment}</p>
+                ))}
+              </div>
+            ))
+          ) : (
+            <p>Loading...</p>
+          )
+        }
+      </MarpWorker>
+    )
+  })