feat: use code previewer

Author: foryuki

examples/.storybook/config.js

@@ -1,7 +1,7 @@
 import { configure } from '@storybook/react'
-import { setOptions } from '@storybook/addon-options'
+import { withOptions } from '@storybook/addon-options'
 
-setOptions({
+withOptions({
   name: 'One React',
   url: 'https://github.com/one-react/sample',
   goFullScreen: false,

examples/package.json

@@ -22,6 +22,8 @@
     "babel-loader": "^8.0.2",
     "css-loader": "^1.0.0",
     "node-sass": "^4.7.2",
+    "or-code-previewer": "^1.0.0",
+    "raw-loader": "^0.5.1",
     "react-docgen-typescript-loader": "^3.0.0",
     "sass-loader": "^7.1.0",
     "style-loader": "^0.23.0",

examples/stories/styles.scss

@@ -2,42 +2,3 @@
   margin-left: 20px;
   margin-bottom: 20px;
 }
-
-// styles for code previewer
-.code-previewer {
-  position: relative;
-
-  &-title {
-    margin-bottom: 0;
-    padding-bottom: 5px;
-    border-bottom: 1px solid rgb(238, 238, 238);
-  }
-
-  .copy-btn {
-    position: absolute;
-    top: 75px;
-    right: 10px;
-    background-color: rgb(255, 255, 255);
-    cursor: pointer;
-    font-size: 13px;
-    align-self: flex-start;
-    flex-shrink: 0;
-    overflow: hidden;
-    border-width: 1px;
-    border-style: solid;
-    border-color: rgb(238, 238, 238);
-    border-image: initial;
-    border-radius: 3px;
-    padding: 3px 10px;
-
-    &-text {
-      height: 16px;
-      transform: translateY(-100%) translateY(-6px);
-      transition: transform .2s ease;
-    }
-
-    &-copied {
-      transform: translateY(0);
-    }
-  }
-}

examples/stories/util.tsx

@@ -1,62 +1,7 @@
-import clx from 'classnames'
-import React, { PureComponent } from 'react'
-import CopyToClipboard from 'react-copy-to-clipboard'
-import Highlight from 'react-highlight'
+import React from 'react'
 
-import 'highlight.js/styles/atom-one-light.css'
+import CodePreviewer from 'or-code-previewer'
 
-class CopyBtn extends PureComponent<
-  {
-    source: string
-  },
-  {
-    copied: boolean
-  }
-> {
-  timeoutId: NodeJS.Timer
-
-  state = {
-    copied: false
-  }
-
-  render() {
-    const { copied } = this.state
-    return (
-      <CopyToClipboard text={this.props.source} onCopy={this.handleCopy}>
-        <button className="copy-btn">
-          <div className={clx('copy-btn-text', { 'copy-btn-copied': copied })}>
-            <div style={{ marginBottom: 6 }}>Copied!</div>
-            <div>Copy</div>
-          </div>
-        </button>
-      </CopyToClipboard>
-    )
-  }
-
-  handleCopy = () => {
-    if (this.timeoutId) {
-      clearTimeout(this.timeoutId)
-    }
-
-    this.setState(
-      {
-        copied: true
-      },
-      () => {
-        this.timeoutId = setTimeout(() => {
-          this.setState({ copied: false })
-        }, 2000)
-      }
-    )
-  }
-}
-
-export function previewCode(source: string, lang: string = 'tsx'): any {
-  return (
-    <div className="code-previewer">
-      <h1 className="code-previewer-title">Story Source</h1>
-      <CopyBtn source={source} />
-      <Highlight className={lang}>{source}</Highlight>
-    </div>
-  )
+export function previewCode(code: string) {
+  return <CodePreviewer title="Story Source" lang="tsx" code={code} />
 }

examples/types/declarations.d.ts

@@ -6,12 +6,15 @@ import * as React from 'react'
 import { Options } from '@storybook/addon-info'
 
 declare module '@storybook/react' {
+  interface ExtOptions extends Options {
+    text?: string | React.ReactNode
+  }
   export interface Story {
     readonly kind: string
     add(
       storyName: string,
       callback: RenderFunction,
-      options?: { info: Options & { text?: string | React.ReactNode } }
+      options?: { info: ExtOptions }
     ): this
     addDecorator(decorator: StoryDecorator): this
   }

tslint.json

@@ -12,6 +12,7 @@
     "no-implicit-dependencies": false,
     "jsdoc-format": false,
     "interface-name": false,
-    "member-access": [true, "no-public"]
+    "member-access": [true, "no-public"],
+    "max-classes-per-file": false
   }
 }