Initial commit
This commit is contained in:
Evgeny Kochetkov
commit
39c2c3c8b6
|
|
@ -0,0 +1,2 @@
|
|||
.idea
|
||||
node_modules
|
||||
|
|
@ -0,0 +1 @@
|
|||
.babelrc
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
import '@kadira/storybook/addons';
|
||||
|
||||
import '../src/register';
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import { configure, setAddon } from '@kadira/storybook'
|
||||
|
||||
import staticMarkup from '../src/'
|
||||
|
||||
setAddon(staticMarkup) // to use addWithStaticMarkup method
|
||||
|
||||
const req = require.context('../example', true, /.story.js$/)
|
||||
|
||||
configure(() => {
|
||||
req.keys().forEach((filename) => req(filename))
|
||||
}, module)
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
# Static Markup addon for [React Storybook](https://github.com/storybooks/react-storybook)
|
||||
|
||||
Displays a panel with an "html version" of a story, as suggested in [this](https://github.com/storybooks/react-storybook/issues/617) thread.
|
||||
|
||||
### [Live demo](https://evgenykochetkov.github.io/react-storybook-addon-static-markup/)
|
||||
|
||||
## Installation
|
||||
|
||||
Install the package:
|
||||
|
||||
```sh
|
||||
npm i -D react-storybook-addon-static-markup
|
||||
```
|
||||
|
||||
Then set the addon in your `.storybook/config.js`:
|
||||
|
||||
```js
|
||||
import { configure, setAddon } from '@kadira/storybook'
|
||||
|
||||
import staticMarkup from 'react-storybook-addon-static-markup'
|
||||
|
||||
setAddon(staticMarkup)
|
||||
|
||||
configure(() => {
|
||||
// ...
|
||||
}, module)
|
||||
```
|
||||
|
||||
...and register it in your `.storybook/addons.js`:
|
||||
```js
|
||||
import '@kadira/storybook/addons';
|
||||
import 'react-storybook-addon-static-markup/register';
|
||||
```
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
```js
|
||||
import React from 'react';
|
||||
import { storiesOf } from '@kadira/storybook';
|
||||
|
||||
import { ShowStaticMarkup } from '../src'
|
||||
|
||||
storiesOf('Usage examples', module)
|
||||
.add(
|
||||
'with HOC',
|
||||
() => (
|
||||
<ShowStaticMarkup>
|
||||
<button className="foo bar baz">
|
||||
hello!
|
||||
</button>
|
||||
</ShowStaticMarkup>
|
||||
)
|
||||
)
|
||||
.addWithStaticMarkup(
|
||||
'with a "shortcut" method',
|
||||
() => (
|
||||
<div className="foo">
|
||||
hello
|
||||
<button className="btn primary">
|
||||
world!
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
)
|
||||
```
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
import React from 'react';
|
||||
import { storiesOf } from '@kadira/storybook';
|
||||
|
||||
import { ShowStaticMarkup } from '../src'
|
||||
|
||||
storiesOf('Usage examples', module)
|
||||
.add(
|
||||
'with HOC',
|
||||
() => (
|
||||
<ShowStaticMarkup>
|
||||
<button className="foo bar baz">
|
||||
hello!
|
||||
</button>
|
||||
</ShowStaticMarkup>
|
||||
)
|
||||
)
|
||||
.addWithStaticMarkup(
|
||||
'with a "shortcut" method',
|
||||
() => (
|
||||
<div className="foo">
|
||||
hello
|
||||
<button className="btn primary">
|
||||
world!
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
)
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.ShowStaticMarkup = undefined;
|
||||
|
||||
var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
|
||||
|
||||
var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
|
||||
|
||||
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
|
||||
|
||||
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
|
||||
|
||||
var _createClass2 = require('babel-runtime/helpers/createClass');
|
||||
|
||||
var _createClass3 = _interopRequireDefault(_createClass2);
|
||||
|
||||
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
|
||||
|
||||
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
|
||||
|
||||
var _inherits2 = require('babel-runtime/helpers/inherits');
|
||||
|
||||
var _inherits3 = _interopRequireDefault(_inherits2);
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _storybookAddons = require('@kadira/storybook-addons');
|
||||
|
||||
var _storybookAddons2 = _interopRequireDefault(_storybookAddons);
|
||||
|
||||
var _server = require('react-dom/server');
|
||||
|
||||
var _server2 = _interopRequireDefault(_server);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
var ShowStaticMarkup = exports.ShowStaticMarkup = function (_React$Component) {
|
||||
(0, _inherits3.default)(ShowStaticMarkup, _React$Component);
|
||||
|
||||
function ShowStaticMarkup() {
|
||||
(0, _classCallCheck3.default)(this, ShowStaticMarkup);
|
||||
return (0, _possibleConstructorReturn3.default)(this, (ShowStaticMarkup.__proto__ || (0, _getPrototypeOf2.default)(ShowStaticMarkup)).apply(this, arguments));
|
||||
}
|
||||
|
||||
(0, _createClass3.default)(ShowStaticMarkup, [{
|
||||
key: 'render',
|
||||
value: function render() {
|
||||
var children = this.props.children;
|
||||
|
||||
|
||||
var markup = _server2.default.renderToStaticMarkup(children);
|
||||
|
||||
var channel = _storybookAddons2.default.getChannel();
|
||||
channel.emit('evgenykochetkov/static-markup/show-markup', markup);
|
||||
|
||||
return children;
|
||||
}
|
||||
}]);
|
||||
return ShowStaticMarkup;
|
||||
}(_react2.default.Component);
|
||||
|
||||
exports.default = {
|
||||
addWithStaticMarkup: function addWithStaticMarkup(storyName, story) {
|
||||
this.add(storyName, function () {
|
||||
return _react2.default.createElement(
|
||||
ShowStaticMarkup,
|
||||
null,
|
||||
story()
|
||||
);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
{
|
||||
"name": "react-storybook-addon-static-markup",
|
||||
"version": "0.0.1",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"storybook": "start-storybook -p 9001 -c .storybook",
|
||||
"deploy-storybook": "storybook-to-ghpages",
|
||||
"transpile": "babel --plugins \"transform-runtime\" ./src --out-dir ."
|
||||
},
|
||||
"keywords": [
|
||||
"react",
|
||||
"storybook",
|
||||
"react-storybook",
|
||||
"addon",
|
||||
"plugin"
|
||||
],
|
||||
"author": "Evgeny Kochetkov",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/evgenykochetkov/react-storybook-addon-static-markup.git"
|
||||
},
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
"@kadira/storybook": "^2.33.1",
|
||||
"@kadira/storybook-deployer": "^1.2.0",
|
||||
"babel-cli": "^6.18.0",
|
||||
"babel-core": "^6.18.2",
|
||||
"babel-plugin-transform-runtime": "^6.15.0",
|
||||
"babel-polyfill": "^6.16.0",
|
||||
"babel-preset-es2015": "^6.18.0",
|
||||
"babel-preset-react": "^6.16.0",
|
||||
"babel-preset-stage-2": "^6.18.0",
|
||||
"react": "^15.4.1",
|
||||
"react-dom": "^15.4.1"
|
||||
},
|
||||
"dependencies": {
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^0.14.7 || ^15.0.0",
|
||||
"react-dom": "^0.14.7 || ^15.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"npm": "^3.0.0"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,132 @@
|
|||
'use strict';
|
||||
|
||||
var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
|
||||
|
||||
var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
|
||||
|
||||
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
|
||||
|
||||
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
|
||||
|
||||
var _createClass2 = require('babel-runtime/helpers/createClass');
|
||||
|
||||
var _createClass3 = _interopRequireDefault(_createClass2);
|
||||
|
||||
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
|
||||
|
||||
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
|
||||
|
||||
var _inherits2 = require('babel-runtime/helpers/inherits');
|
||||
|
||||
var _inherits3 = _interopRequireDefault(_inherits2);
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _storybookAddons = require('@kadira/storybook-addons');
|
||||
|
||||
var _storybookAddons2 = _interopRequireDefault(_storybookAddons);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
var styles = {
|
||||
markupPanel: {
|
||||
margin: 10,
|
||||
fontFamily: 'monospace',
|
||||
whiteSpace: 'pre',
|
||||
fontSize: 14,
|
||||
color: '#444',
|
||||
width: '100%',
|
||||
overflow: 'auto'
|
||||
}
|
||||
};
|
||||
|
||||
var StaticMarkup = function (_React$Component) {
|
||||
(0, _inherits3.default)(StaticMarkup, _React$Component);
|
||||
|
||||
function StaticMarkup() {
|
||||
var _ref;
|
||||
|
||||
(0, _classCallCheck3.default)(this, StaticMarkup);
|
||||
|
||||
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
||||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
var _this = (0, _possibleConstructorReturn3.default)(this, (_ref = StaticMarkup.__proto__ || (0, _getPrototypeOf2.default)(StaticMarkup)).call.apply(_ref, [this].concat(args)));
|
||||
|
||||
_this.state = {
|
||||
markup: ''
|
||||
};
|
||||
|
||||
_this.onShowStaticMarkup = _this.onShowStaticMarkup.bind(_this);
|
||||
return _this;
|
||||
}
|
||||
|
||||
(0, _createClass3.default)(StaticMarkup, [{
|
||||
key: 'onShowStaticMarkup',
|
||||
value: function onShowStaticMarkup(markup) {
|
||||
this.setState({ markup: markup });
|
||||
}
|
||||
}, {
|
||||
key: 'componentDidMount',
|
||||
value: function componentDidMount() {
|
||||
var _this2 = this;
|
||||
|
||||
var _props = this.props,
|
||||
channel = _props.channel,
|
||||
api = _props.api;
|
||||
|
||||
channel.on('evgenykochetkov/static-markup/show-markup', this.onShowStaticMarkup);
|
||||
|
||||
// Clear the current state on every story change.
|
||||
this.stopListeningOnStory = api.onStory(function () {
|
||||
_this2.onShowStaticMarkup('');
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'render',
|
||||
value: function render() {
|
||||
var markup = this.state.markup;
|
||||
|
||||
|
||||
return _react2.default.createElement(
|
||||
'div',
|
||||
{ style: styles.markupPanel },
|
||||
markup
|
||||
);
|
||||
}
|
||||
|
||||
// This is some cleanup tasks when the StaticMarkup panel is unmounting.
|
||||
|
||||
}, {
|
||||
key: 'componentWillUnmount',
|
||||
value: function componentWillUnmount() {
|
||||
if (this.stopListeningOnStory) {
|
||||
this.stopListeningOnStory();
|
||||
}
|
||||
|
||||
this.unmounted = true;
|
||||
var _props2 = this.props,
|
||||
channel = _props2.channel,
|
||||
api = _props2.api;
|
||||
|
||||
channel.removeListener('evgenykochetkov/static-markup/show-markup', this.onShowStaticMarkup);
|
||||
}
|
||||
}]);
|
||||
return StaticMarkup;
|
||||
}(_react2.default.Component);
|
||||
|
||||
// Register the addon with a unique name.
|
||||
|
||||
|
||||
_storybookAddons2.default.register('evgenykochetkov/static-markup', function (api) {
|
||||
// Also need to set a unique name to the panel.
|
||||
_storybookAddons2.default.addPanel('evgenykochetkov/static-markup/panel', {
|
||||
title: 'Static Markup',
|
||||
render: function render() {
|
||||
return _react2.default.createElement(StaticMarkup, { channel: _storybookAddons2.default.getChannel(), api: api });
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
import React from 'react'
|
||||
import addons from '@kadira/storybook-addons';
|
||||
|
||||
import ReactDOMServer from 'react-dom/server'
|
||||
|
||||
export class ShowStaticMarkup extends React.Component {
|
||||
render() {
|
||||
const { children } = this.props;
|
||||
|
||||
const markup = ReactDOMServer.renderToStaticMarkup(children)
|
||||
|
||||
const channel = addons.getChannel();
|
||||
channel.emit('evgenykochetkov/static-markup/show-markup', markup);
|
||||
|
||||
return children;
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
addWithStaticMarkup (storyName, story) {
|
||||
this.add(storyName, () => (
|
||||
<ShowStaticMarkup>
|
||||
{ story() }
|
||||
</ShowStaticMarkup>
|
||||
))
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
import React from 'react';
|
||||
import addons from '@kadira/storybook-addons';
|
||||
|
||||
const styles = {
|
||||
markupPanel: {
|
||||
margin: 10,
|
||||
fontFamily: 'monospace',
|
||||
whiteSpace: 'pre',
|
||||
fontSize: 14,
|
||||
color: '#444',
|
||||
width: '100%',
|
||||
overflow: 'auto',
|
||||
}
|
||||
};
|
||||
|
||||
class StaticMarkup extends React.Component {
|
||||
constructor(...args) {
|
||||
super(...args);
|
||||
|
||||
this.state = {
|
||||
markup: ''
|
||||
};
|
||||
|
||||
this.onShowStaticMarkup = this.onShowStaticMarkup.bind(this);
|
||||
}
|
||||
|
||||
onShowStaticMarkup(markup) {
|
||||
this.setState({markup});
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const { channel, api } = this.props;
|
||||
channel.on('evgenykochetkov/static-markup/show-markup', this.onShowStaticMarkup);
|
||||
|
||||
// Clear the current state on every story change.
|
||||
this.stopListeningOnStory = api.onStory(() => {
|
||||
this.onShowStaticMarkup('');
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const { markup } = this.state;
|
||||
|
||||
return (
|
||||
<div style={styles.markupPanel}>
|
||||
{ markup }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// This is some cleanup tasks when the StaticMarkup panel is unmounting.
|
||||
componentWillUnmount() {
|
||||
if(this.stopListeningOnStory) {
|
||||
this.stopListeningOnStory();
|
||||
}
|
||||
|
||||
this.unmounted = true;
|
||||
const { channel, api } = this.props;
|
||||
channel.removeListener('evgenykochetkov/static-markup/show-markup', this.onShowStaticMarkup);
|
||||
}
|
||||
}
|
||||
|
||||
// Register the addon with a unique name.
|
||||
addons.register('evgenykochetkov/static-markup', (api) => {
|
||||
// Also need to set a unique name to the panel.
|
||||
addons.addPanel('evgenykochetkov/static-markup/panel', {
|
||||
title: 'Static Markup',
|
||||
render: () => (
|
||||
<StaticMarkup channel={addons.getChannel()} api={api}/>
|
||||
),
|
||||
})
|
||||
})
|
||||
Loading…
Reference in New Issue