mirror of
https://github.com/projectstorm/react-diagrams.git
synced 2025-08-26 16:01:30 +08:00
Now display code side to size
This commit is contained in:
Dylan Vorster
14
.storybook/addon-code/react.js
vendored
Normal file
14
.storybook/addon-code/react.js
vendored
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
69
.storybook/addon-code/register.js
Normal file
69
.storybook/addon-code/register.js
Normal file
@ -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 (
|
||||
<SyntaxHighlighter
|
||||
customStyle={{width: '100%', overflowX:'hidden', tabSize: 4}}
|
||||
showLineNumbers={true}
|
||||
language='typescript'
|
||||
style={github}
|
||||
>
|
||||
{this.state.code}
|
||||
</SyntaxHighlighter>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// 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: () => <CodePreview channel={addons.getChannel()} api={api} />,
|
||||
});
|
||||
});
|
||||
@ -1,2 +1,3 @@
|
||||
import './addon-code/register';
|
||||
import '@storybook/addon-actions/register';
|
||||
import '@storybook/addon-options/register';
|
||||
|
||||
@ -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 = () => <WithCode code={code}>{widget}</WithCode>;
|
||||
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();
|
||||
})
|
||||
|
||||
@ -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",
|
||||
|
||||
67
yarn.lock
67
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"
|
||||
|
||||
Reference in New Issue
Block a user