Compare commits
No commits in common. "master" and "gh-pages" have entirely different histories.
2
.gitignore
vendored
2
.gitignore
vendored
|
|
@ -1,2 +0,0 @@
|
|||
.idea
|
||||
node_modules
|
||||
|
|
@ -1 +0,0 @@
|
|||
.babelrc
|
||||
|
|
@ -1 +0,0 @@
|
|||
import '../src/register';
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
import { configure, setAddon } from '@storybook/react'
|
||||
|
||||
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)
|
||||
69
README.md
69
README.md
|
|
@ -1,69 +0,0 @@
|
|||
[](https://badge.fury.io/js/react-storybook-addon-static-markup)
|
||||
[](https://nogithub.codeberg.page)
|
||||
|
||||
|
||||
# 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 '@storybook/react'
|
||||
|
||||
import staticMarkup from 'react-storybook-addon-static-markup'
|
||||
|
||||
setAddon(staticMarkup)
|
||||
|
||||
configure(() => {
|
||||
// ...
|
||||
}, module)
|
||||
```
|
||||
|
||||
...and register it in your `.storybook/addons.js`:
|
||||
```js
|
||||
import 'react-storybook-addon-static-markup/register';
|
||||
```
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
```js
|
||||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
|
||||
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>
|
||||
)
|
||||
)
|
||||
```
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
|
||||
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>
|
||||
)
|
||||
)
|
||||
BIN
favicon.ico
Normal file
BIN
favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
22
iframe.html
Normal file
22
iframe.html
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script>
|
||||
if (window.parent !== window) {
|
||||
window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
|
||||
}
|
||||
</script>
|
||||
<title>Storybook</title>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<div id="error-display"></div>
|
||||
<script src="static/preview.2271dcb188637bd59144.bundle.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
46
index.html
Normal file
46
index.html
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="storybook-version" content="3.1.3">
|
||||
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
|
||||
<title>Storybook</title>
|
||||
<style>
|
||||
/*
|
||||
When resizing panels, the drag event breaks if the cursor
|
||||
moves over the iframe. Add the 'dragging' class to the body
|
||||
at drag start and remove it when the drag ends.
|
||||
*/
|
||||
.dragging iframe {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Styling the fuzzy search box placeholders */
|
||||
.searchBox::-webkit-input-placeholder { /* Chrome/Opera/Safari */
|
||||
color: #ddd;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.searchBox::-moz-placeholder { /* Firefox 19+ */
|
||||
color: #ddd;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.searchBox:focus{
|
||||
border-color: #EEE !important;
|
||||
}
|
||||
|
||||
.btn:hover{
|
||||
background-color: #eee
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body style="margin: 0;">
|
||||
<div id="root"></div>
|
||||
<script src="static/manager.6eeebd917da43082c060.bundle.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
81
index.js
81
index.js
|
|
@ -1,81 +0,0 @@
|
|||
'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 _addons = require('@storybook/addons');
|
||||
|
||||
var _addons2 = _interopRequireDefault(_addons);
|
||||
|
||||
var _pretty = require('pretty');
|
||||
|
||||
var _pretty2 = _interopRequireDefault(_pretty);
|
||||
|
||||
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 = (0, _pretty2.default)(_server2.default.renderToStaticMarkup(children));
|
||||
|
||||
var channel = _addons2.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()
|
||||
);
|
||||
});
|
||||
}
|
||||
};
|
||||
9789
package-lock.json
generated
9789
package-lock.json
generated
File diff suppressed because it is too large
Load diff
49
package.json
49
package.json
|
|
@ -1,49 +0,0 @@
|
|||
{
|
||||
"name": "react-storybook-addon-static-markup",
|
||||
"version": "0.1.2",
|
||||
"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 .",
|
||||
"transpile:watch": "babel --watch --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-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",
|
||||
"@storybook/react": "3.1.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"pretty": "^2.0.0",
|
||||
"react-syntax-highlighter": "^10.0.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^0.14.7 || ^15.0.0",
|
||||
"react-dom": "^0.14.7 || ^15.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"npm": "^3.0.0"
|
||||
}
|
||||
}
|
||||
148
register.js
148
register.js
|
|
@ -1,148 +0,0 @@
|
|||
'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 _addons = require('@storybook/addons');
|
||||
|
||||
var _addons2 = _interopRequireDefault(_addons);
|
||||
|
||||
var _coreEvents = require('@storybook/core-events');
|
||||
|
||||
var _reactSyntaxHighlighter = require('react-syntax-highlighter');
|
||||
|
||||
var _reactSyntaxHighlighter2 = _interopRequireDefault(_reactSyntaxHighlighter);
|
||||
|
||||
var _hljs = require('react-syntax-highlighter/dist/styles/hljs');
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
var pretty = require('pretty');
|
||||
|
||||
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.on(_coreEvents.STORY_CHANGED, function () {
|
||||
_this2.onShowStaticMarkup('');
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'render',
|
||||
value: function render() {
|
||||
var markup = this.state.markup;
|
||||
// setting it to true to support past
|
||||
// versions of storybook, which might not
|
||||
// have active property.
|
||||
|
||||
var _props$active = this.props.active,
|
||||
active = _props$active === undefined ? true : _props$active;
|
||||
|
||||
return active ? _react2.default.createElement(
|
||||
_reactSyntaxHighlighter2.default,
|
||||
{ language: 'html', style: _hljs.docco },
|
||||
pretty(markup)
|
||||
) : null;
|
||||
}
|
||||
|
||||
// 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.
|
||||
|
||||
|
||||
_addons2.default.register('evgenykochetkov/static-markup', function (api) {
|
||||
// Also need to set a unique name to the panel.
|
||||
_addons2.default.addPanel('evgenykochetkov/static-markup/panel', {
|
||||
title: 'Static Markup',
|
||||
render: function render(_ref2) {
|
||||
var active = _ref2.active;
|
||||
return _react2.default.createElement(StaticMarkup, { channel: _addons2.default.getChannel(), api: api, active: active });
|
||||
}
|
||||
});
|
||||
});
|
||||
28
src/index.js
28
src/index.js
|
|
@ -1,28 +0,0 @@
|
|||
import React from 'react'
|
||||
import addons from '@storybook/addons';
|
||||
import pretty from 'pretty';
|
||||
|
||||
import ReactDOMServer from 'react-dom/server'
|
||||
|
||||
export class ShowStaticMarkup extends React.Component {
|
||||
render() {
|
||||
const { children } = this.props;
|
||||
|
||||
const markup = pretty(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>
|
||||
))
|
||||
}
|
||||
}
|
||||
|
|
@ -1,79 +0,0 @@
|
|||
import React from 'react';
|
||||
import addons from '@storybook/addons';
|
||||
import { STORY_CHANGED } from '@storybook/core-events';
|
||||
import SyntaxHighlighter from 'react-syntax-highlighter';
|
||||
import { docco } from 'react-syntax-highlighter/dist/styles/hljs';
|
||||
const pretty = require('pretty');
|
||||
|
||||
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.on(STORY_CHANGED, () => {
|
||||
this.onShowStaticMarkup('');
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const { markup } = this.state;
|
||||
// setting it to true to support past
|
||||
// versions of storybook, which might not
|
||||
// have active property.
|
||||
const { active = true } = this.props
|
||||
return active ? (
|
||||
<SyntaxHighlighter language='html' style={docco}>
|
||||
{pretty(markup)}
|
||||
</SyntaxHighlighter>
|
||||
) : null;
|
||||
}
|
||||
|
||||
// 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: ({active}) => (
|
||||
<StaticMarkup channel={addons.getChannel()} api={api} active={active}/>
|
||||
),
|
||||
})
|
||||
})
|
||||
1
static/manager.6eeebd917da43082c060.bundle.js
Normal file
1
static/manager.6eeebd917da43082c060.bundle.js
Normal file
File diff suppressed because one or more lines are too long
1
static/preview.2271dcb188637bd59144.bundle.js
Normal file
1
static/preview.2271dcb188637bd59144.bundle.js
Normal file
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue