diff --git a/.storybook/addon-code/react.js b/.storybook/addon-code/react.js new file mode 100644 index 0000000..1153582 --- /dev/null +++ b/.storybook/addon-code/react.js @@ -0,0 +1,14 @@ +import React from 'react'; +import addons from '@storybook/addons'; + +export class WithCode extends React.Component { + render() { + const { children, code } = this.props; + const channel = addons.getChannel(); + + // send the notes to the channel. + channel.emit('storybook/code/set_code', code); + // return children elements. + return children; + } +} diff --git a/.storybook/addon-code/register.js b/.storybook/addon-code/register.js new file mode 100644 index 0000000..b2ef16a --- /dev/null +++ b/.storybook/addon-code/register.js @@ -0,0 +1,69 @@ +import React from 'react'; +import addons from '@storybook/addons'; +import SyntaxHighlighter from 'react-syntax-highlighter'; +import { github } from 'react-syntax-highlighter/styles/hljs'; + +/** + * @author Dylan + * + * Simple little addon for displaying code, might make this a seperate project at some point + */ +export class CodePreview extends React.Component { + + constructor(...args) { + super(...args); + this.state = { + code: '' + }; + } + + componentDidMount() { + const { channel, api } = this.props; + // Listen to the notes and render it. + channel.on('storybook/code/set_code', (code) => { + this.onAddCode(code); + }); + + // Clear the current notes on every story change. + this.stopListeningOnStory = api.onStory(() => { + this.onAddCode(''); + }); + } + + // This is some cleanup tasks when the Notes panel is unmounting. + componentWillUnmount() { + if (this.stopListeningOnStory) { + this.stopListeningOnStory(); + } + + this.unmounted = true; + const { channel } = this.props; + channel.removeListener('storybook/notes/add_notes', this.onAddCode); + } + + onAddCode(code) { + this.setState({ code: code }); + } + + render() { + return ( + + {this.state.code} + + ); + } +} + +// Register the addon with a unique name. +addons.register('storybook/code', api => { + // Also need to set a unique name to the panel. + addons.addPanel('storybook/code/panel', { + title: 'Code preview', + render: () => , + }); +}); diff --git a/.storybook/addons.js b/.storybook/addons.js index 98e3765..50d1c32 100644 --- a/.storybook/addons.js +++ b/.storybook/addons.js @@ -1,2 +1,3 @@ +import './addon-code/register'; import '@storybook/addon-actions/register'; import '@storybook/addon-options/register'; diff --git a/demos/index.tsx b/demos/index.tsx index c53eda0..5d52f00 100644 --- a/demos/index.tsx +++ b/demos/index.tsx @@ -6,8 +6,8 @@ import {setOptions} from '@storybook/addon-options'; import {Toolkit} from "../src/Toolkit"; import { host } from 'storybook-host'; import { withReadme, withDocs } from 'storybook-readme'; +import {WithCode} from "../.storybook/addon-code/react.js"; -import demo_simple from "./demo-simple/index"; import demo_performance from "./demo-performance/index"; import demo_custom_node1 from "./demo-custom-node1/index"; import demo_locks from "./demo-locks/index"; @@ -42,6 +42,15 @@ const withCustomPreview = withDocs({ } }) +function getDemo(widget, code, markdown?){ + let container = () => {widget}; + if(markdown){ + return withCustomPreview(markdown, container); + } + return container; +} + + storiesOf("Simple Usage", module) .addDecorator(host({ cropMarks: false, @@ -49,13 +58,15 @@ storiesOf("Simple Usage", module) width: '100%', padding: 20 })) - .add("Simple example", withCustomPreview( - require("./demo-simple/docs.md"), - () => demo_simple() + .add("Simple example", getDemo( + require("./demo-simple/index").default(), + require('!!raw-loader!./demo-simple/index'), + require("./demo-simple/docs.md") + )) + .add("Performance demo", getDemo( + demo_performance(), + require('!!raw-loader!./demo-performance/index') )) - .add("Performance demo", () => { - return demo_performance(); - }) .add("Locked widget", () => { return demo_locks(); }) diff --git a/package.json b/package.json index e914825..0392f6e 100644 --- a/package.json +++ b/package.json @@ -55,7 +55,9 @@ "prettier": "^1.9.2", "puppeteer": "^0.13.0", "raf": "^3.4.0", + "raw-loader": "^0.5.1", "react-dom": "^16.2.0", + "react-syntax-highlighter": "^6.1.1", "react-test-renderer": "^16.2.0", "sass-loader": "^6.0.6", "source-map-loader": "^0.2.3", diff --git a/yarn.lock b/yarn.lock index 9016ba6..989d046 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2079,6 +2079,12 @@ combined-stream@^1.0.5, combined-stream@~1.0.5: dependencies: delayed-stream "~1.0.0" +comma-separated-tokens@^1.0.0: + version "1.0.4" + resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-1.0.4.tgz#72083e58d4a462f01866f6617f4d98a3cd3b8a46" + dependencies: + trim "0.0.1" + commander@2.12.x, commander@^2.12.2, commander@^2.9.0, commander@~2.12.1: version "2.12.2" resolved "https://registry.yarnpkg.com/commander/-/commander-2.12.2.tgz#0f5946c427ed9ec0d91a46bb9def53e54650e555" @@ -3544,6 +3550,20 @@ hash.js@^1.0.0, hash.js@^1.0.3: inherits "^2.0.3" minimalistic-assert "^1.0.0" +hast-util-parse-selector@^2.0.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/hast-util-parse-selector/-/hast-util-parse-selector-2.1.0.tgz#b55c0f4bb7bb2040c889c325ef87ab29c38102b4" + +hastscript@^3.1.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/hastscript/-/hastscript-3.1.0.tgz#66628ba6d7f1ad07d9277dd09028aba7f4934599" + dependencies: + camelcase "^3.0.0" + comma-separated-tokens "^1.0.0" + hast-util-parse-selector "^2.0.0" + property-information "^3.0.0" + space-separated-tokens "^1.0.0" + hawk@3.1.3, hawk@~3.1.3: version "3.1.3" resolved "https://registry.yarnpkg.com/hawk/-/hawk-3.1.3.tgz#078444bd7c1640b0fe540d2c9b73d59678e8e1c4" @@ -3566,6 +3586,10 @@ he@1.1.x: version "1.1.1" resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd" +highlight.js@~9.12.0: + version "9.12.0" + resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.12.0.tgz#e6d9dbe57cbefe60751f02af336195870c90c01e" + hmac-drbg@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1" @@ -4724,6 +4748,12 @@ lower-case@^1.1.1: version "1.1.4" resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-1.1.4.tgz#9a2cabd1b9e8e0ae993a4bf7d5875c39c42e8eac" +lowlight@~1.9.1: + version "1.9.1" + resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-1.9.1.tgz#ed7c3dffc36f8c1f263735c0fe0c907847c11250" + dependencies: + highlight.js "~9.12.0" + lru-cache@^4.0.1, lru-cache@^4.1.1: version "4.1.1" resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.1.tgz#622e32e82488b49279114a4f9ecf45e7cd6bba55" @@ -5869,7 +5899,7 @@ pretty-format@^22.0.3: ansi-regex "^3.0.0" ansi-styles "^3.2.0" -prismjs@^1.9.0: +prismjs@^1.8.4, prismjs@^1.9.0, prismjs@~1.9.0: version "1.9.0" resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.9.0.tgz#fa3e2d9edc3c3887c1f1f3095d41f1f9b4200f0f" optionalDependencies: @@ -5921,6 +5951,10 @@ prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.7, loose-envify "^1.3.1" object-assign "^4.1.1" +property-information@^3.0.0: + version "3.2.0" + resolved "https://registry.yarnpkg.com/property-information/-/property-information-3.2.0.tgz#fd1483c8fbac61808f5fe359e7693a1f48a58331" + protocols@^1.1.0, protocols@^1.4.0: version "1.4.6" resolved "https://registry.yarnpkg.com/protocols/-/protocols-1.4.6.tgz#f8bb263ea1b5fd7a7604d26b8be39bd77678bf8a" @@ -6077,6 +6111,10 @@ raw-body@2.3.2: iconv-lite "0.4.19" unpipe "1.0.0" +raw-loader@^0.5.1: + version "0.5.1" + resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-0.5.1.tgz#0c3d0beaed8a01c966d9787bf778281252a979aa" + rc@^1.1.7: version "1.2.2" resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.2.tgz#d8ce9cb57e8d64d9c7badd9876c7c34cbe3c7077" @@ -6186,6 +6224,16 @@ react-style-proptype@^3.0.0: dependencies: prop-types "^15.5.4" +react-syntax-highlighter@^6.1.1: + version "6.1.1" + resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-6.1.1.tgz#4d134fa9217c4025e7fd6efeadd08ba92436ee4e" + dependencies: + babel-runtime "^6.18.0" + highlight.js "~9.12.0" + lowlight "~1.9.1" + prismjs "^1.8.4" + refractor "^2.0.0" + react-test-renderer@^16.2.0: version "16.2.0" resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.2.0.tgz#bddf259a6b8fcd8555f012afc8eacc238872a211" @@ -6372,6 +6420,13 @@ redux@^3.7.2: loose-envify "^1.1.0" symbol-observable "^1.0.3" +refractor@^2.0.0: + version "2.2.0" + resolved "https://registry.yarnpkg.com/refractor/-/refractor-2.2.0.tgz#9f0ff38ac76f6e5eaacfd689912ed6ab7ab07351" + dependencies: + hastscript "^3.1.0" + prismjs "~1.9.0" + regenerate@^1.2.1: version "1.3.3" resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.3.3.tgz#0c336d3980553d755c39b586ae3b20aa49c82b7f" @@ -6926,6 +6981,12 @@ source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1: version "0.6.1" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263" +space-separated-tokens@^1.0.0: + version "1.1.1" + resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-1.1.1.tgz#9695b9df9e65aec1811d4c3f9ce52520bc2f7e4d" + dependencies: + trim "0.0.1" + spdx-correct@~1.0.0: version "1.0.2" resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-1.0.2.tgz#4b3073d933ff51f3912f03ac5519498a4150db40" @@ -7316,6 +7377,10 @@ trim-right@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/trim-right/-/trim-right-1.0.1.tgz#cb2e1203067e0c8de1f614094b9fe45704ea6003" +trim@0.0.1: + version "0.0.1" + resolved "https://registry.yarnpkg.com/trim/-/trim-0.0.1.tgz#5858547f6b290757ee95cccc666fb50084c460dd" + "true-case-path@^1.0.2": version "1.0.2" resolved "https://registry.yarnpkg.com/true-case-path/-/true-case-path-1.0.2.tgz#7ec91130924766c7f573be3020c34f8fdfd00d62"