9 |
17 | );
18 | }
19 | }
20 |
21 | export default App;
22 |
--------------------------------------------------------------------------------
/demo/src/stories/Button.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const buttonStyles = {
4 | border: '1px solid #eee',
5 | borderRadius: 3,
6 | backgroundColor: '#FFFFFF',
7 | cursor: 'pointer',
8 | fontSize: 15,
9 | padding: '3px 10px',
10 | margin: 10,
11 | };
12 |
13 | const Button = ({ children, onClick }) => (
14 |
20 | );
21 |
22 | Button.propTypes = {
23 | children: React.PropTypes.string.isRequired,
24 | onClick: React.PropTypes.func,
25 | };
26 |
27 | export default Button;
28 |
--------------------------------------------------------------------------------
/demo/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "demo",
3 | "version": "0.1.0",
4 | "private": true,
5 | "devDependencies": {
6 | "react-scripts": "0.7.0",
7 | "@kadira/storybook": "file:../"
8 | },
9 | "dependencies": {
10 | "react": "^15.3.2",
11 | "react-dom": "^15.3.2"
12 | },
13 | "scripts": {
14 | "start": "react-scripts start",
15 | "build": "react-scripts build",
16 | "test": "react-scripts test --env=jsdom",
17 | "eject": "react-scripts eject",
18 | "storybook": "start-storybook -p 9009 -s public",
19 | "build-storybook": "build-storybook -s public"
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/src/client/preview/init.js:
--------------------------------------------------------------------------------
1 | import keyEvents from '@kadira/storybook-ui/dist/libs/key_events';
2 | import { selectStory } from './actions';
3 |
4 | export default function (context) {
5 | const { queryParams, reduxStore, window, channel } = context;
6 | // set the story if correct params are loaded via the URL.
7 | if (queryParams.selectedKind) {
8 | reduxStore.dispatch(selectStory(queryParams.selectedKind, queryParams.selectedStory));
9 | }
10 |
11 | // Handle keyEvents and pass them to the parent.
12 | window.onkeydown = (e) => {
13 | const parsedEvent = keyEvents(e);
14 | if (parsedEvent) {
15 | channel.emit('applyShortcut', { event: parsedEvent });
16 | }
17 | };
18 | }
19 |
--------------------------------------------------------------------------------
/src/client/preview/actions.js:
--------------------------------------------------------------------------------
1 | export const types = {
2 | SET_ERROR: 'PREVIEW_SET_ERROR',
3 | CLEAR_ERROR: 'PREVIEW_CLEAR_ERROR',
4 | SELECT_STORY: 'PREVIEW_SELECT_STORY',
5 | SET_INITIAL_STORY: 'PREVIEW_SET_INITIAL_STORY',
6 | };
7 |
8 | export function setInitialStory(storyKindList) {
9 | return {
10 | type: types.SET_INITIAL_STORY,
11 | storyKindList,
12 | };
13 | }
14 |
15 | export function setError(error) {
16 | return {
17 | type: types.SET_ERROR,
18 | error,
19 | };
20 | }
21 |
22 | export function clearError() {
23 | return {
24 | type: types.CLEAR_ERROR,
25 | };
26 | }
27 |
28 | export function selectStory(kind, story) {
29 | return {
30 | type: types.SELECT_STORY,
31 | kind,
32 | story,
33 | };
34 | }
35 |
--------------------------------------------------------------------------------
/src/server/utils.js:
--------------------------------------------------------------------------------
1 | import path from 'path';
2 | import fs from 'fs';
3 |
4 | export function parseList(str) {
5 | return str.split(',');
6 | }
7 |
8 | export function getHeadHtml(configDirPath) {
9 | const headHtmlPath = path.resolve(configDirPath, 'head.html');
10 | let headHtml = '';
11 | if (fs.existsSync(headHtmlPath)) {
12 | headHtml = fs.readFileSync(headHtmlPath, 'utf8');
13 | }
14 |
15 | return headHtml;
16 | }
17 |
18 | export function getEnvConfig(program, configEnv) {
19 | Object.keys(configEnv).forEach((fieldName) => {
20 | const envVarName = configEnv[fieldName];
21 | const envVarValue = process.env[envVarName];
22 | if (envVarValue) {
23 | program[fieldName] = envVarValue; // eslint-disable-line no-param-reassign
24 | }
25 | });
26 | }
27 |
--------------------------------------------------------------------------------
/dist/client/manager/preview.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | Object.defineProperty(exports, "__esModule", {
4 | value: true
5 | });
6 |
7 | var _react = require('react');
8 |
9 | var _react2 = _interopRequireDefault(_react);
10 |
11 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
12 |
13 | var iframeStyle = {
14 | width: '100%',
15 | height: '100%',
16 | border: 0,
17 | margin: 0,
18 | padding: 0
19 | };
20 |
21 | var Preview = function Preview(_ref) {
22 | var url = _ref.url;
23 | return _react2.default.createElement('iframe', {
24 | id: 'storybook-preview-iframe',
25 | style: iframeStyle,
26 | src: url
27 | });
28 | };
29 |
30 | Preview.propTypes = {
31 | url: _react2.default.PropTypes.string
32 | };
33 |
34 | exports.default = Preview;
--------------------------------------------------------------------------------
/scripts/mocha_runner.js:
--------------------------------------------------------------------------------
1 | require('babel-core/register');
2 | require('babel-polyfill');
3 |
4 | // Add jsdom support, which is required for enzyme.
5 | var jsdom = require('jsdom').jsdom;
6 |
7 | var exposedProperties = ['window', 'navigator', 'document'];
8 |
9 | global.document = jsdom('');
10 | global.window = document.defaultView;
11 | Object.keys(document.defaultView).forEach((property) => {
12 | if (typeof global[property] === 'undefined') {
13 | exposedProperties.push(property);
14 | global[property] = document.defaultView[property];
15 | }
16 | });
17 |
18 | global.navigator = {
19 | userAgent: 'node.js'
20 | };
21 |
22 | process.on('unhandledRejection', function (error) {
23 | console.error('Unhandled Promise Rejection:');
24 | console.error(error && error.stack || error);
25 | });
26 |
--------------------------------------------------------------------------------
/dist/server/config/babel.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | /**
4 | * Copyright (c) 2015-present, Facebook, Inc.
5 | * All rights reserved.
6 | *
7 | * This source code is licensed under the BSD-style license found in the
8 | * LICENSE file in the root directory of this source tree. An additional grant
9 | * of patent rights can be found in the PATENTS file in the same directory.
10 | */
11 |
12 | var findCacheDir = require('find-cache-dir');
13 |
14 | module.exports = {
15 | // Don't try to find .babelrc because we want to force this configuration.
16 | babelrc: false,
17 | // This is a feature of `babel-loader` for webpack (not Babel itself).
18 | // It enables a cache directory for faster-rebuilds
19 | // `find-cache-dir` will create the cache directory under the node_modules directory.
20 | cacheDirectory: findCacheDir({ name: 'react-storybook' }),
21 | presets: [require.resolve('babel-preset-react-app')]
22 | };
--------------------------------------------------------------------------------
/src/server/config/babel.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | const findCacheDir = require('find-cache-dir');
11 |
12 | module.exports = {
13 | // Don't try to find .babelrc because we want to force this configuration.
14 | babelrc: false,
15 | // This is a feature of `babel-loader` for webpack (not Babel itself).
16 | // It enables a cache directory for faster-rebuilds
17 | // `find-cache-dir` will create the cache directory under the node_modules directory.
18 | cacheDirectory: findCacheDir({ name: 'react-storybook' }),
19 | presets: [
20 | require.resolve('babel-preset-react-app'),
21 | ],
22 | };
23 |
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "airbnb",
3 | "rules": {
4 | # We use _ to define private variables and methods in clases
5 | "no-underscore-dangle": 0,
6 | # This seems to be buggy we don't want eslint to check this
7 | "import/no-extraneous-dependencies": 0,
8 | # This is a depricated rule. So we turned off it.
9 | "react/require-extension": 0,
10 | # We can write JSX in anyfile we want.
11 | "react/jsx-filename-extension": 0,
12 | # We don't like this rule.
13 | "arrow-body-style": 0,
14 | # We don't like this rule. We write arrow functions only when we needed.
15 | "prefer-arrow-callback": 0,
16 | # We don't need to write function names always.
17 | "func-names": 0,
18 | # propTypes can be object
19 | "react/forbid-prop-types": 0,
20 | },
21 | "parserOptions": {
22 | "ecmaVersion": 6,
23 | "ecmaFeatures": {
24 | "experimentalObjectRestSpread": true
25 | }
26 | },
27 | }
28 |
--------------------------------------------------------------------------------
/dist/client/preview/actions.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | Object.defineProperty(exports, "__esModule", {
4 | value: true
5 | });
6 | exports.setInitialStory = setInitialStory;
7 | exports.setError = setError;
8 | exports.clearError = clearError;
9 | exports.selectStory = selectStory;
10 | var types = exports.types = {
11 | SET_ERROR: 'PREVIEW_SET_ERROR',
12 | CLEAR_ERROR: 'PREVIEW_CLEAR_ERROR',
13 | SELECT_STORY: 'PREVIEW_SELECT_STORY',
14 | SET_INITIAL_STORY: 'PREVIEW_SET_INITIAL_STORY'
15 | };
16 |
17 | function setInitialStory(storyKindList) {
18 | return {
19 | type: types.SET_INITIAL_STORY,
20 | storyKindList: storyKindList
21 | };
22 | }
23 |
24 | function setError(error) {
25 | return {
26 | type: types.SET_ERROR,
27 | error: error
28 | };
29 | }
30 |
31 | function clearError() {
32 | return {
33 | type: types.CLEAR_ERROR
34 | };
35 | }
36 |
37 | function selectStory(kind, story) {
38 | return {
39 | type: types.SELECT_STORY,
40 | kind: kind,
41 | story: story
42 | };
43 | }
--------------------------------------------------------------------------------
/src/client/preview/reducer.js:
--------------------------------------------------------------------------------
1 | import { types } from './actions';
2 |
3 | export default function reducer(state = {}, action) {
4 | switch (action.type) {
5 | case types.CLEAR_ERROR: {
6 | return {
7 | ...state,
8 | error: null,
9 | };
10 | }
11 |
12 | case types.SET_ERROR: {
13 | return {
14 | ...state,
15 | error: action.error,
16 | };
17 | }
18 |
19 | case types.SELECT_STORY: {
20 | return {
21 | ...state,
22 | selectedKind: action.kind,
23 | selectedStory: action.story,
24 | };
25 | }
26 |
27 | case types.SET_INITIAL_STORY: {
28 | const newState = { ...state };
29 | const { storyKindList } = action;
30 | if (!newState.selectedKind && storyKindList.length > 0) {
31 | newState.selectedKind = storyKindList[0].kind;
32 | newState.selectedStory = storyKindList[0].stories[0];
33 | }
34 | return newState;
35 | }
36 |
37 | default:
38 | return state;
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/src/client/preview/error_display.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const mainStyle = {
4 | position: 'fixed',
5 | top: 0,
6 | bottom: 0,
7 | left: 0,
8 | right: 0,
9 | padding: 20,
10 | backgroundColor: 'rgb(187, 49, 49)',
11 | color: '#FFF',
12 | WebkitFontSmoothing: 'antialiased',
13 | };
14 |
15 | const headingStyle = {
16 | fontSize: 20,
17 | fontWeight: 600,
18 | letterSpacing: 0.2,
19 | margin: '10px 0',
20 | fontFamily: `
21 | -apple-system, ".SFNSText-Regular", "San Francisco", Roboto, "Segoe UI",
22 | "Helvetica Neue", "Lucida Grande", sans-serif
23 | `,
24 | };
25 |
26 | const codeStyle = {
27 | fontSize: 14,
28 | width: '100vw',
29 | overflow: 'auto',
30 | };
31 |
32 | const ErrorDisplay = ({ error }) => (
33 |
10 | 
11 |
13 | Welcome to React
12 |
14 | To get started, edit src/App.js and save to reload.
15 |
34 |
41 | );
42 |
43 | ErrorDisplay.propTypes = {
44 | error: React.PropTypes.object.isRequired,
45 | };
46 |
47 | export default ErrorDisplay;
48 |
--------------------------------------------------------------------------------
/dist/client/preview/init.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | Object.defineProperty(exports, "__esModule", {
4 | value: true
5 | });
6 |
7 | exports.default = function (context) {
8 | var queryParams = context.queryParams;
9 | var reduxStore = context.reduxStore;
10 | var window = context.window;
11 | var channel = context.channel;
12 | // set the story if correct params are loaded via the URL.
13 |
14 | if (queryParams.selectedKind) {
15 | reduxStore.dispatch((0, _actions.selectStory)(queryParams.selectedKind, queryParams.selectedStory));
16 | }
17 |
18 | // Handle keyEvents and pass them to the parent.
19 | window.onkeydown = function (e) {
20 | var parsedEvent = (0, _key_events2.default)(e);
21 | if (parsedEvent) {
22 | channel.emit('applyShortcut', { event: parsedEvent });
23 | }
24 | };
25 | };
26 |
27 | var _key_events = require('@kadira/storybook-ui/dist/libs/key_events');
28 |
29 | var _key_events2 = _interopRequireDefault(_key_events);
30 |
31 | var _actions = require('./actions');
32 |
33 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2016 Kadira Inc. {error.message}
35 |
36 |
37 | {error.stack}
38 |
39 |
40 |
60 | ', 'Directory where to load static files from', parseList)
24 | .option('-o, --output-dir [dir-name]', 'Directory where to store built files')
25 | .option('-c, --config-dir [dir-name]', 'Directory where to load Storybook configurations from')
26 | .option('-d, --db-path [db-file]', 'DEPRECATED!')
27 | .option('--enable-db', 'DEPRECATED!')
28 | .parse(process.argv);
29 |
30 | logger.info(chalk.bold(`${packageJson.name} v${packageJson.version}\n`));
31 |
32 | if (program.enableDb || program.dbPath) {
33 | logger.error([
34 | 'Error: the experimental local database addon is no longer bundled with',
35 | 'react-storybook. Please remove these flags (-d,--db-path,--enable-db)',
36 | 'from the command or npm script and try again.',
37 | ].join(' '));
38 | process.exit(1);
39 | }
40 |
41 | // The key is the field created in `program` variable for
42 | // each command line argument. Value is the env variable.
43 | getEnvConfig(program, {
44 | staticDir: 'SBCONFIG_STATIC_DIR',
45 | outputDir: 'SBCONFIG_OUTPUT_DIR',
46 | configDir: 'SBCONFIG_CONFIG_DIR',
47 | });
48 |
49 | const configDir = program.configDir || './.storybook';
50 | const outputDir = program.outputDir || './storybook-static';
51 |
52 | // create output directory (and the static dir) if not exists
53 | shelljs.rm('-rf', outputDir);
54 | shelljs.mkdir('-p', path.resolve(outputDir));
55 | shelljs.cp(path.resolve(__dirname, 'public/favicon.ico'), outputDir);
56 |
57 | // Build the webpack configuration using the `baseConfig`
58 | // custom `.babelrc` file and `webpack.config.js` files
59 | // NOTE changes to env should be done before calling `getBaseConfig`
60 | const config = loadConfig('PRODUCTION', getBaseConfig(), configDir);
61 | config.output.path = outputDir;
62 |
63 | // copy all static files
64 | if (program.staticDir) {
65 | program.staticDir.forEach((dir) => {
66 | if (!fs.existsSync(dir)) {
67 | logger.error(`Error: no such directory to load static files: ${dir}`);
68 | process.exit(-1);
69 | }
70 | logger.log(`=> Copying static files from: ${dir}`);
71 | shelljs.cp('-r', `${dir}/*`, outputDir);
72 | });
73 | }
74 |
75 | // compile all resources with webpack and write them to the disk.
76 | logger.log('Building storybook ...');
77 | webpack(config).run(function (err, stats) {
78 | if (err) {
79 | logger.error('Failed to build the storybook');
80 | logger.error(err.message);
81 | process.exit(1);
82 | }
83 |
84 | const data = {
85 | publicPath: config.output.publicPath,
86 | assets: stats.toJson().assetsByChunkName,
87 | };
88 | const headHtml = getHeadHtml(configDir);
89 |
90 | // Write both the storybook UI and IFRAME HTML files to destination path.
91 | fs.writeFileSync(path.resolve(outputDir, 'index.html'), getIndexHtml(data));
92 | fs.writeFileSync(path.resolve(outputDir, 'iframe.html'), getIframeHtml({ ...data, headHtml }));
93 | });
94 |
--------------------------------------------------------------------------------
/dist/client/manager/provider.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | Object.defineProperty(exports, "__esModule", {
4 | value: true
5 | });
6 |
7 | var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
8 |
9 | var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
10 |
11 | var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
12 |
13 | var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
14 |
15 | var _createClass2 = require('babel-runtime/helpers/createClass');
16 |
17 | var _createClass3 = _interopRequireDefault(_createClass2);
18 |
19 | var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
20 |
21 | var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
22 |
23 | var _inherits2 = require('babel-runtime/helpers/inherits');
24 |
25 | var _inherits3 = _interopRequireDefault(_inherits2);
26 |
27 | var _qs = require('qs');
28 |
29 | var _qs2 = _interopRequireDefault(_qs);
30 |
31 | var _react = require('react');
32 |
33 | var _react2 = _interopRequireDefault(_react);
34 |
35 | var _storybookUi = require('@kadira/storybook-ui');
36 |
37 | var _storybookAddons = require('@kadira/storybook-addons');
38 |
39 | var _storybookAddons2 = _interopRequireDefault(_storybookAddons);
40 |
41 | var _storybookChannelPostmsg = require('@kadira/storybook-channel-postmsg');
42 |
43 | var _storybookChannelPostmsg2 = _interopRequireDefault(_storybookChannelPostmsg);
44 |
45 | var _preview = require('./preview');
46 |
47 | var _preview2 = _interopRequireDefault(_preview);
48 |
49 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
50 |
51 | /* global location */
52 | /* eslint class-methods-use-this: 0 */
53 |
54 | var ReactProvider = function (_Provider) {
55 | (0, _inherits3.default)(ReactProvider, _Provider);
56 |
57 | function ReactProvider() {
58 | (0, _classCallCheck3.default)(this, ReactProvider);
59 |
60 | var _this = (0, _possibleConstructorReturn3.default)(this, (ReactProvider.__proto__ || (0, _getPrototypeOf2.default)(ReactProvider)).call(this));
61 |
62 | _this.channel = (0, _storybookChannelPostmsg2.default)({ page: 'manager' });
63 | _storybookAddons2.default.setChannel(_this.channel);
64 | return _this;
65 | }
66 |
67 | (0, _createClass3.default)(ReactProvider, [{
68 | key: 'getPanels',
69 | value: function getPanels() {
70 | return _storybookAddons2.default.getPanels();
71 | }
72 | }, {
73 | key: 'renderPreview',
74 | value: function renderPreview(selectedKind, selectedStory) {
75 | var queryParams = {
76 | selectedKind: selectedKind,
77 | selectedStory: selectedStory
78 | };
79 |
80 | var queryString = _qs2.default.stringify(queryParams);
81 | var url = 'iframe.html?' + queryString;
82 | return _react2.default.createElement(_preview2.default, { url: url });
83 | }
84 | }, {
85 | key: 'handleAPI',
86 | value: function handleAPI(api) {
87 | var _this2 = this;
88 |
89 | api.onStory(function (kind, story) {
90 | _this2.channel.emit('setCurrentStory', { kind: kind, story: story });
91 | });
92 | this.channel.on('setStories', function (data) {
93 | api.setStories(data.stories);
94 | });
95 | this.channel.on('selectStory', function (data) {
96 | api.selectStory(data.kind, data.story);
97 | });
98 | this.channel.on('applyShortcut', function (data) {
99 | api.handleShortcut(data.event);
100 | });
101 | _storybookAddons2.default.loadAddons(api);
102 | }
103 | }]);
104 | return ReactProvider;
105 | }(_storybookUi.Provider);
106 |
107 | exports.default = ReactProvider;
--------------------------------------------------------------------------------
/src/client/preview/render.js:
--------------------------------------------------------------------------------
1 | /* global document */
2 |
3 | import React from 'react';
4 | import ReactDOM from 'react-dom';
5 | import { stripIndents } from 'common-tags';
6 | import ErrorDisplay from './error_display';
7 |
8 | // check whether we're running on node/browser
9 | const isBrowser = typeof window !== 'undefined';
10 |
11 | const logger = console;
12 |
13 | let rootEl = null;
14 | let previousKind = '';
15 | let previousStory = '';
16 |
17 | if (isBrowser) {
18 | rootEl = document.getElementById('root');
19 | }
20 |
21 | export function renderError(error) {
22 | const properError = new Error(error.title);
23 | properError.stack = error.description;
24 |
25 | const redBox = (', 'Directory where to load static files from')
24 | .option('-c, --config-dir [dir-name]', 'Directory where to load Storybook configurations from')
25 | .option('--dont-track', 'Do not send anonymous usage stats.')
26 | .option('-d, --db-path [db-file]', 'DEPRECATED!')
27 | .option('--enable-db', 'DEPRECATED!')
28 | .parse(process.argv);
29 |
30 | logger.info(chalk.bold(`${packageJson.name} v${packageJson.version}\n`));
31 |
32 | if (program.enableDb || program.dbPath) {
33 | logger.error([
34 | 'Error: the experimental local database addon is no longer bundled with',
35 | 'react-storybook. Please remove these flags (-d,--db-path,--enable-db)',
36 | 'from the command or npm script and try again.',
37 | ].join(' '));
38 | process.exit(1);
39 | }
40 |
41 | // The key is the field created in `program` variable for
42 | // each command line argument. Value is the env variable.
43 | getEnvConfig(program, {
44 | port: 'SBCONFIG_PORT',
45 | host: 'SBCONFIG_HOSTNAME',
46 | staticDir: 'SBCONFIG_STATIC_DIR',
47 | configDir: 'SBCONFIG_CONFIG_DIR',
48 | dontTrack: 'SBCONFIG_DO_NOT_TRACK',
49 | });
50 |
51 | if (program.dontTrack) {
52 | dontTrack();
53 | }
54 |
55 | if (!program.port) {
56 | logger.error('Error: port to run Storybook is required!\n');
57 | program.help();
58 | process.exit(-1);
59 | }
60 |
61 | // Used with `app.listen` below
62 | const listenAddr = [program.port];
63 |
64 | if (program.host) {
65 | listenAddr.push(program.host);
66 | }
67 |
68 | const app = express();
69 |
70 | let hasCustomFavicon = false;
71 |
72 | if (program.staticDir) {
73 | program.staticDir = parseList(program.staticDir);
74 | program.staticDir.forEach((dir) => {
75 | const staticPath = path.resolve(dir);
76 | if (!fs.existsSync(staticPath)) {
77 | logger.error(`Error: no such directory to load static files: ${staticPath}`);
78 | process.exit(-1);
79 | }
80 | logger.log(`=> Loading static files from: ${staticPath} .`);
81 | app.use(express.static(staticPath, { index: false }));
82 |
83 | const faviconPath = path.resolve(staticPath, 'favicon.ico');
84 | if (fs.existsSync(faviconPath)) {
85 | hasCustomFavicon = true;
86 | app.use(favicon(faviconPath));
87 | }
88 | });
89 | }
90 |
91 | if (!hasCustomFavicon) {
92 | app.use(favicon(path.resolve(__dirname, 'public/favicon.ico')));
93 | }
94 |
95 | // Build the webpack configuration using the `baseConfig`
96 | // custom `.babelrc` file and `webpack.config.js` files
97 | const configDir = program.configDir || './.storybook';
98 |
99 | // The repository info is sent to the storybook while running on
100 | // development mode so it'll be easier for tools to integrate.
101 | const exec = cmd => shelljs.exec(cmd, { silent: true }).stdout.trim();
102 | process.env.STORYBOOK_GIT_ORIGIN = process.env.STORYBOOK_GIT_ORIGIN || exec('git remote get-url origin');
103 | process.env.STORYBOOK_GIT_BRANCH = process.env.STORYBOOK_GIT_BRANCH || exec('git symbolic-ref HEAD --short');
104 |
105 | // NOTE changes to env should be done before calling `getBaseConfig`
106 | // `getBaseConfig` function which is called inside the middleware
107 | app.use(storybook(configDir));
108 |
109 | app.listen(...listenAddr, function (error) {
110 | if (error) {
111 | throw error;
112 | } else {
113 | const address = `http://${program.host || 'localhost'}:${program.port}/`;
114 | logger.info(`\nReact Storybook started on => ${chalk.cyan(address)}\n`);
115 | track();
116 | }
117 | });
118 |
--------------------------------------------------------------------------------
/dist/server/build.js:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 | 'use strict';
3 |
4 | var _extends2 = require('babel-runtime/helpers/extends');
5 |
6 | var _extends3 = _interopRequireDefault(_extends2);
7 |
8 | var _webpack = require('webpack');
9 |
10 | var _webpack2 = _interopRequireDefault(_webpack);
11 |
12 | var _commander = require('commander');
13 |
14 | var _commander2 = _interopRequireDefault(_commander);
15 |
16 | var _path = require('path');
17 |
18 | var _path2 = _interopRequireDefault(_path);
19 |
20 | var _fs = require('fs');
21 |
22 | var _fs2 = _interopRequireDefault(_fs);
23 |
24 | var _chalk = require('chalk');
25 |
26 | var _chalk2 = _interopRequireDefault(_chalk);
27 |
28 | var _shelljs = require('shelljs');
29 |
30 | var _shelljs2 = _interopRequireDefault(_shelljs);
31 |
32 | var _package = require('../../package.json');
33 |
34 | var _package2 = _interopRequireDefault(_package);
35 |
36 | var _webpackConfig = require('./config/webpack.config.prod');
37 |
38 | var _webpackConfig2 = _interopRequireDefault(_webpackConfig);
39 |
40 | var _config = require('./config');
41 |
42 | var _config2 = _interopRequireDefault(_config);
43 |
44 | var _index = require('./index.html');
45 |
46 | var _index2 = _interopRequireDefault(_index);
47 |
48 | var _iframe = require('./iframe.html');
49 |
50 | var _iframe2 = _interopRequireDefault(_iframe);
51 |
52 | var _utils = require('./utils');
53 |
54 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
55 |
56 | process.env.NODE_ENV = process.env.NODE_ENV || 'production';
57 |
58 | // avoid ESLint errors
59 | var logger = console;
60 |
61 | _commander2.default.version(_package2.default.version).option('-s, --static-dir ', 'Directory where to load static files from', _utils.parseList).option('-o, --output-dir [dir-name]', 'Directory where to store built files').option('-c, --config-dir [dir-name]', 'Directory where to load Storybook configurations from').option('-d, --db-path [db-file]', 'DEPRECATED!').option('--enable-db', 'DEPRECATED!').parse(process.argv);
62 |
63 | logger.info(_chalk2.default.bold(_package2.default.name + ' v' + _package2.default.version + '\n'));
64 |
65 | if (_commander2.default.enableDb || _commander2.default.dbPath) {
66 | logger.error(['Error: the experimental local database addon is no longer bundled with', 'react-storybook. Please remove these flags (-d,--db-path,--enable-db)', 'from the command or npm script and try again.'].join(' '));
67 | process.exit(1);
68 | }
69 |
70 | // The key is the field created in `program` variable for
71 | // each command line argument. Value is the env variable.
72 | (0, _utils.getEnvConfig)(_commander2.default, {
73 | staticDir: 'SBCONFIG_STATIC_DIR',
74 | outputDir: 'SBCONFIG_OUTPUT_DIR',
75 | configDir: 'SBCONFIG_CONFIG_DIR'
76 | });
77 |
78 | var configDir = _commander2.default.configDir || './.storybook';
79 | var outputDir = _commander2.default.outputDir || './storybook-static';
80 |
81 | // create output directory (and the static dir) if not exists
82 | _shelljs2.default.rm('-rf', outputDir);
83 | _shelljs2.default.mkdir('-p', _path2.default.resolve(outputDir));
84 | _shelljs2.default.cp(_path2.default.resolve(__dirname, 'public/favicon.ico'), outputDir);
85 |
86 | // Build the webpack configuration using the `baseConfig`
87 | // custom `.babelrc` file and `webpack.config.js` files
88 | // NOTE changes to env should be done before calling `getBaseConfig`
89 | var config = (0, _config2.default)('PRODUCTION', (0, _webpackConfig2.default)(), configDir);
90 | config.output.path = outputDir;
91 |
92 | // copy all static files
93 | if (_commander2.default.staticDir) {
94 | _commander2.default.staticDir.forEach(function (dir) {
95 | if (!_fs2.default.existsSync(dir)) {
96 | logger.error('Error: no such directory to load static files: ' + dir);
97 | process.exit(-1);
98 | }
99 | logger.log('=> Copying static files from: ' + dir);
100 | _shelljs2.default.cp('-r', dir + '/*', outputDir);
101 | });
102 | }
103 |
104 | // compile all resources with webpack and write them to the disk.
105 | logger.log('Building storybook ...');
106 | (0, _webpack2.default)(config).run(function (err, stats) {
107 | if (err) {
108 | logger.error('Failed to build the storybook');
109 | logger.error(err.message);
110 | process.exit(1);
111 | }
112 |
113 | var data = {
114 | publicPath: config.output.publicPath,
115 | assets: stats.toJson().assetsByChunkName
116 | };
117 | var headHtml = (0, _utils.getHeadHtml)(configDir);
118 |
119 | // Write both the storybook UI and IFRAME HTML files to destination path.
120 | _fs2.default.writeFileSync(_path2.default.resolve(outputDir, 'index.html'), (0, _index2.default)(data));
121 | _fs2.default.writeFileSync(_path2.default.resolve(outputDir, 'iframe.html'), (0, _iframe2.default)((0, _extends3.default)({}, data, { headHtml: headHtml })));
122 | });
--------------------------------------------------------------------------------
/dist/server/config.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | Object.defineProperty(exports, "__esModule", {
4 | value: true
5 | });
6 |
7 | var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');
8 |
9 | var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);
10 |
11 | var _extends2 = require('babel-runtime/helpers/extends');
12 |
13 | var _extends3 = _interopRequireDefault(_extends2);
14 |
15 | exports.addJsonLoaderIfNotAvailable = addJsonLoaderIfNotAvailable;
16 |
17 | exports.default = function (configType, baseConfig, configDir) {
18 | var config = baseConfig;
19 |
20 | var babelConfig = (0, _babel_config2.default)(configDir);
21 | config.module.loaders[0].query = babelConfig;
22 |
23 | // Check whether a config.js file exists inside the storybook
24 | // config directory and throw an error if it's not.
25 | var storybookConfigPath = _path2.default.resolve(configDir, 'config.js');
26 | if (!_fs2.default.existsSync(storybookConfigPath)) {
27 | var err = new Error('=> Create a storybook config file in "' + configDir + '/config.js".');
28 | throw err;
29 | }
30 | config.entry.preview.push(require.resolve(storybookConfigPath));
31 |
32 | // Check whether addons.js file exists inside the storybook.
33 | // Load the default addons.js file if it's missing.
34 | var storybookDefaultAddonsPath = _path2.default.resolve(__dirname, 'addons.js');
35 | var storybookCustomAddonsPath = _path2.default.resolve(configDir, 'addons.js');
36 | if (_fs2.default.existsSync(storybookCustomAddonsPath)) {
37 | logger.info('=> Loading custom addons config.');
38 | config.entry.manager.unshift(storybookCustomAddonsPath);
39 | } else {
40 | config.entry.manager.unshift(storybookDefaultAddonsPath);
41 | }
42 |
43 | // Check whether user has a custom webpack config file and
44 | // return the (extended) base configuration if it's not available.
45 | var customConfigPath = _path2.default.resolve(configDir, 'webpack.config.js');
46 | if (!_fs2.default.existsSync(customConfigPath)) {
47 | logger.info('=> Using default webpack setup based on "Create React App".');
48 | customConfigPath = _path2.default.resolve(__dirname, './config/defaults/webpack.config.js');
49 | }
50 |
51 | var customConfig = require(customConfigPath);
52 |
53 | if (typeof customConfig === 'function') {
54 | logger.info('=> Loading custom webpack config (full-control mode).');
55 | return customConfig(config, configType);
56 | }
57 |
58 | logger.info('=> Loading custom webpack config.');
59 |
60 | customConfig.module = customConfig.module || {};
61 |
62 | var newConfig = (0, _extends3.default)({}, customConfig, config, {
63 | // We need to use our and custom plugins.
64 | plugins: [].concat((0, _toConsumableArray3.default)(config.plugins), (0, _toConsumableArray3.default)(customConfig.plugins || [])),
65 | module: (0, _extends3.default)({}, config.module, customConfig.module, {
66 | loaders: [].concat((0, _toConsumableArray3.default)(config.module.loaders), (0, _toConsumableArray3.default)(customConfig.module.loaders || []))
67 | }),
68 | resolve: (0, _extends3.default)({}, config.resolve, customConfig.resolve, {
69 | alias: (0, _extends3.default)({}, config.alias, customConfig.resolve && customConfig.resolve.alias)
70 | })
71 | });
72 |
73 | addJsonLoaderIfNotAvailable(newConfig);
74 |
75 | return newConfig;
76 | };
77 |
78 | var _fs = require('fs');
79 |
80 | var _fs2 = _interopRequireDefault(_fs);
81 |
82 | var _path = require('path');
83 |
84 | var _path2 = _interopRequireDefault(_path);
85 |
86 | var _babel_config = require('./babel_config');
87 |
88 | var _babel_config2 = _interopRequireDefault(_babel_config);
89 |
90 | var _utils = require('./config/utils');
91 |
92 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
93 |
94 | // avoid ESLint errors
95 | /* eslint global-require: 0 */
96 |
97 | var logger = console;
98 |
99 | function addJsonLoaderIfNotAvailable(config) {
100 | var jsonLoaderExists = config.module.loaders.reduce(function (value, loader) {
101 | return value || [].concat(loader.test).some(function (matcher) {
102 | var isRegex = matcher instanceof RegExp;
103 | var testString = 'my_package.json';
104 | if (isRegex) {
105 | return matcher.test(testString);
106 | }
107 | if (typeof matcher === 'function') {
108 | return matcher(testString);
109 | }
110 | return false;
111 | });
112 | }, false);
113 |
114 | if (!jsonLoaderExists) {
115 | config.module.loaders.push({
116 | test: /\.json$/,
117 | include: _utils.includePaths,
118 | loader: require.resolve('json-loader')
119 | });
120 | }
121 | }
122 |
123 | // `baseConfig` is a webpack configuration bundled with storybook.
124 | // React Storybook will look in the `configDir` directory
125 | // (inside working directory) if a config path is not provided.
--------------------------------------------------------------------------------
/dist/server/index.js:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 | 'use strict';
3 |
4 | var _express = require('express');
5 |
6 | var _express2 = _interopRequireDefault(_express);
7 |
8 | var _serveFavicon = require('serve-favicon');
9 |
10 | var _serveFavicon2 = _interopRequireDefault(_serveFavicon);
11 |
12 | var _commander = require('commander');
13 |
14 | var _commander2 = _interopRequireDefault(_commander);
15 |
16 | var _path = require('path');
17 |
18 | var _path2 = _interopRequireDefault(_path);
19 |
20 | var _fs = require('fs');
21 |
22 | var _fs2 = _interopRequireDefault(_fs);
23 |
24 | var _chalk = require('chalk');
25 |
26 | var _chalk2 = _interopRequireDefault(_chalk);
27 |
28 | var _shelljs = require('shelljs');
29 |
30 | var _shelljs2 = _interopRequireDefault(_shelljs);
31 |
32 | var _middleware = require('./middleware');
33 |
34 | var _middleware2 = _interopRequireDefault(_middleware);
35 |
36 | var _package = require('../../package.json');
37 |
38 | var _package2 = _interopRequireDefault(_package);
39 |
40 | var _utils = require('./utils');
41 |
42 | var _track_usage = require('./track_usage');
43 |
44 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
45 |
46 | process.env.NODE_ENV = process.env.NODE_ENV || 'development';
47 |
48 | var logger = console;
49 |
50 | _commander2.default.version(_package2.default.version).option('-p, --port [number]', 'Port to run Storybook (Required)', parseInt).option('-h, --host [string]', 'Host to run Storybook').option('-s, --static-dir ', 'Directory where to load static files from').option('-c, --config-dir [dir-name]', 'Directory where to load Storybook configurations from').option('--dont-track', 'Do not send anonymous usage stats.').option('-d, --db-path [db-file]', 'DEPRECATED!').option('--enable-db', 'DEPRECATED!').parse(process.argv);
51 |
52 | logger.info(_chalk2.default.bold(_package2.default.name + ' v' + _package2.default.version + '\n'));
53 |
54 | if (_commander2.default.enableDb || _commander2.default.dbPath) {
55 | logger.error(['Error: the experimental local database addon is no longer bundled with', 'react-storybook. Please remove these flags (-d,--db-path,--enable-db)', 'from the command or npm script and try again.'].join(' '));
56 | process.exit(1);
57 | }
58 |
59 | // The key is the field created in `program` variable for
60 | // each command line argument. Value is the env variable.
61 | (0, _utils.getEnvConfig)(_commander2.default, {
62 | port: 'SBCONFIG_PORT',
63 | host: 'SBCONFIG_HOSTNAME',
64 | staticDir: 'SBCONFIG_STATIC_DIR',
65 | configDir: 'SBCONFIG_CONFIG_DIR',
66 | dontTrack: 'SBCONFIG_DO_NOT_TRACK'
67 | });
68 |
69 | if (_commander2.default.dontTrack) {
70 | (0, _track_usage.dontTrack)();
71 | }
72 |
73 | if (!_commander2.default.port) {
74 | logger.error('Error: port to run Storybook is required!\n');
75 | _commander2.default.help();
76 | process.exit(-1);
77 | }
78 |
79 | // Used with `app.listen` below
80 | var listenAddr = [_commander2.default.port];
81 |
82 | if (_commander2.default.host) {
83 | listenAddr.push(_commander2.default.host);
84 | }
85 |
86 | var app = (0, _express2.default)();
87 |
88 | var hasCustomFavicon = false;
89 |
90 | if (_commander2.default.staticDir) {
91 | _commander2.default.staticDir = (0, _utils.parseList)(_commander2.default.staticDir);
92 | _commander2.default.staticDir.forEach(function (dir) {
93 | var staticPath = _path2.default.resolve(dir);
94 | if (!_fs2.default.existsSync(staticPath)) {
95 | logger.error('Error: no such directory to load static files: ' + staticPath);
96 | process.exit(-1);
97 | }
98 | logger.log('=> Loading static files from: ' + staticPath + ' .');
99 | app.use(_express2.default.static(staticPath, { index: false }));
100 |
101 | var faviconPath = _path2.default.resolve(staticPath, 'favicon.ico');
102 | if (_fs2.default.existsSync(faviconPath)) {
103 | hasCustomFavicon = true;
104 | app.use((0, _serveFavicon2.default)(faviconPath));
105 | }
106 | });
107 | }
108 |
109 | if (!hasCustomFavicon) {
110 | app.use((0, _serveFavicon2.default)(_path2.default.resolve(__dirname, 'public/favicon.ico')));
111 | }
112 |
113 | // Build the webpack configuration using the `baseConfig`
114 | // custom `.babelrc` file and `webpack.config.js` files
115 | var configDir = _commander2.default.configDir || './.storybook';
116 |
117 | // The repository info is sent to the storybook while running on
118 | // development mode so it'll be easier for tools to integrate.
119 | var exec = function exec(cmd) {
120 | return _shelljs2.default.exec(cmd, { silent: true }).stdout.trim();
121 | };
122 | process.env.STORYBOOK_GIT_ORIGIN = process.env.STORYBOOK_GIT_ORIGIN || exec('git remote get-url origin');
123 | process.env.STORYBOOK_GIT_BRANCH = process.env.STORYBOOK_GIT_BRANCH || exec('git symbolic-ref HEAD --short');
124 |
125 | // NOTE changes to env should be done before calling `getBaseConfig`
126 | // `getBaseConfig` function which is called inside the middleware
127 | app.use((0, _middleware2.default)(configDir));
128 |
129 | app.listen.apply(app, listenAddr.concat([function (error) {
130 | if (error) {
131 | throw error;
132 | } else {
133 | var address = 'http://' + (_commander2.default.host || 'localhost') + ':' + _commander2.default.port + '/';
134 | logger.info('\nReact Storybook started on => ' + _chalk2.default.cyan(address) + '\n');
135 | (0, _track_usage.track)();
136 | }
137 | }]));
--------------------------------------------------------------------------------
/dist/client/preview/render.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | Object.defineProperty(exports, "__esModule", {
4 | value: true
5 | });
6 |
7 | var _taggedTemplateLiteral2 = require('babel-runtime/helpers/taggedTemplateLiteral');
8 |
9 | var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);
10 |
11 | var _templateObject = (0, _taggedTemplateLiteral3.default)(['\n Did you forget to return the React element from the story?\n Use "() => (
Welcome to STORYBOOK
61 |62 | This is a UI component dev environment for your app. 63 |
64 |
65 | We've added some basic stories inside the src/stories directory.
66 |
67 | A story is a single state of one or more UI components. You can have as many stories as you want.
68 |
69 | (Basically a story is like a visual test case.)
70 |
72 | See these sample stories for a component called Button.
73 |
75 | Just like that, you can add your own components as stories.
76 |
77 | Here's how to add your App component as a story.
78 |
${codeBlock}`}}
81 | />
82 |
83 |
88 | );
89 | }
90 | }
91 |
--------------------------------------------------------------------------------
/src/server/config/webpack.config.prod.js:
--------------------------------------------------------------------------------
1 | import path from 'path';
2 | import webpack from 'webpack';
3 | import babelLoaderConfig from './babel.prod.js';
4 | import {
5 | OccurenceOrderPlugin,
6 | includePaths,
7 | excludePaths,
8 | loadEnv,
9 | nodePaths,
10 | } from './utils';
11 |
12 | export default function () {
13 | const entries = {
14 | preview: [
15 | require.resolve('./polyfills'),
16 | require.resolve('./globals'),
17 | ],
18 | manager: [
19 | require.resolve('./polyfills'),
20 | path.resolve(__dirname, '../../client/manager'),
21 | ],
22 | };
23 |
24 | const config = {
25 | bail: true,
26 | devtool: '#cheap-module-source-map',
27 | entry: entries,
28 | output: {
29 | filename: 'static/[name].[chunkhash].bundle.js',
30 | // Here we set the publicPath to ''.
31 | // This allows us to deploy storybook into subpaths like GitHub pages.
32 | // This works with css and image loaders too.
33 | // This is working for storybook since, we don't use pushState urls and
34 | // relative URLs works always.
35 | publicPath: '',
36 | },
37 | plugins: [
38 | new webpack.DefinePlugin(loadEnv({ production: true })),
39 | new webpack.optimize.DedupePlugin(),
40 | new webpack.optimize.UglifyJsPlugin({
41 | compress: {
42 | screw_ie8: true,
43 | warnings: false,
44 | },
45 | mangle: false,
46 | output: {
47 | comments: false,
48 | screw_ie8: true,
49 | },
50 | }),
51 | ],
52 | module: {
53 | loaders: [
54 | {
55 | test: /\.jsx?$/,
56 | loader: require.resolve('babel-loader'),
57 | query: babelLoaderConfig,
58 | include: includePaths,
59 | exclude: excludePaths,
60 | },
61 | ],
62 | },
63 | resolve: {
64 | // Since we ship with json-loader always, it's better to move extensions to here
65 | // from the default config.
66 | extensions: ['.js', '.json', '.jsx', ''],
67 | // Add support to NODE_PATH. With this we could avoid relative path imports.
68 | // Based on this CRA feature: https://github.com/facebookincubator/create-react-app/issues/253
69 | fallback: nodePaths,
70 | alias: {
71 | // This is to add addon support for NPM2
72 | '@kadira/storybook-addons': require.resolve('@kadira/storybook-addons'),
73 | },
74 | },
75 | };
76 |
77 | // Webpack 2 doesn't have a OccurenceOrderPlugin plugin in the production mode.
78 | // But webpack 1 has it. That's why we do this.
79 | if (OccurenceOrderPlugin) {
80 | config.plugins.unshift(new OccurenceOrderPlugin());
81 | }
82 |
83 | return config;
84 | }
85 |
--------------------------------------------------------------------------------
/src/server/track_usage.js:
--------------------------------------------------------------------------------
1 | /* eslint global-require: 0 */
2 |
3 | // ### WHAT?
4 | //
5 | // We will track anonymous usage of how you use storybook.
6 | // We don't want any personal information.
7 | // We just need to collect following information
8 | //
9 | // * How many time a user runs start-storybook a day
10 | //
11 | // We will send a ping to our server when you run storybook with above information.
12 |
13 | // ### WHY?
14 | //
15 | // We are maintaining React Storybook and we want to improve it.
16 | // We also working on storybooks.io which is storybook related service.
17 | // In order to get a real picture about the storybook usage,
18 | // we need to get some real usage stats, not the amount of NPM downloads.
19 | // This is why we do this.
20 |
21 | // ### CAN I STOP THIS?
22 | //
23 | // You(or your company) may have certain policies.
24 | // If so, you can stop sending these metrics.
25 | // To do that, use --dont-track flag when running React Storybook.
26 | // start-storybook --dont-track -p 9001
27 |
28 | // ### HELP US?
29 | //
30 | // Maintaining a open source project is hard.
31 | // It's even harder for a startup like us (Kadira)
32 | // Help us to make storybook better by sending these few metrics.
33 | // Based on these metrics, we could improve storybook and build a profitable
34 | // service around it. With that, we could continue to maintain and
35 | // improve Storybook.
36 |
37 | import ConfigStore from 'configstore';
38 | import UUID from 'uuid';
39 | import request from 'request';
40 |
41 | const logger = console;
42 |
43 | let DONT_TRACK = false;
44 |
45 | export function getStore() {
46 | const key = 'react-storybook-usage';
47 | const store = new ConfigStore(key);
48 | return store;
49 | }
50 |
51 | export function track() {
52 | if (DONT_TRACK) return;
53 |
54 | const store = getStore();
55 |
56 | // Just a hash to aggregate metrics. Don't use any personal info.
57 | let userId = store.get('userId');
58 | if (!userId) {
59 | userId = UUID.v4();
60 | store.set('userId', userId);
61 | }
62 |
63 | const pkg = require('../../package.json');
64 |
65 | // We don't wanna worry about the success or failure of this.
66 | request.post('https://ping.getstorybook.io/react-storybook-usage', {
67 | json: {
68 | userId,
69 | version: pkg.version,
70 | },
71 | }, () => {});
72 |
73 | if (!store.get('startTrackingOn')) {
74 | store.set('startTrackingOn', Date.now());
75 | }
76 |
77 | const pingsSent = store.get('pingsSent') || 0;
78 | store.set('pingsSent', pingsSent + 1);
79 |
80 | if (pingsSent < 5) {
81 | logger.log(' We will collect some anonymous usage stats of how you use storybook.');
82 | logger.log(' See why?: https://getstorybook.io/tracking');
83 | logger.log();
84 | }
85 | }
86 |
87 | export function dontTrack() {
88 | DONT_TRACK = true;
89 | }
90 |
--------------------------------------------------------------------------------
/dist/server/config/webpack.config.prod.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | Object.defineProperty(exports, "__esModule", {
4 | value: true
5 | });
6 |
7 | exports.default = function () {
8 | var entries = {
9 | preview: [require.resolve('./polyfills'), require.resolve('./globals')],
10 | manager: [require.resolve('./polyfills'), _path2.default.resolve(__dirname, '../../client/manager')]
11 | };
12 |
13 | var config = {
14 | bail: true,
15 | devtool: '#cheap-module-source-map',
16 | entry: entries,
17 | output: {
18 | filename: 'static/[name].[chunkhash].bundle.js',
19 | // Here we set the publicPath to ''.
20 | // This allows us to deploy storybook into subpaths like GitHub pages.
21 | // This works with css and image loaders too.
22 | // This is working for storybook since, we don't use pushState urls and
23 | // relative URLs works always.
24 | publicPath: ''
25 | },
26 | plugins: [new _webpack2.default.DefinePlugin((0, _utils.loadEnv)({ production: true })), new _webpack2.default.optimize.DedupePlugin(), new _webpack2.default.optimize.UglifyJsPlugin({
27 | compress: {
28 | screw_ie8: true,
29 | warnings: false
30 | },
31 | mangle: false,
32 | output: {
33 | comments: false,
34 | screw_ie8: true
35 | }
36 | })],
37 | module: {
38 | loaders: [{
39 | test: /\.jsx?$/,
40 | loader: require.resolve('babel-loader'),
41 | query: _babelProd2.default,
42 | include: _utils.includePaths,
43 | exclude: _utils.excludePaths
44 | }]
45 | },
46 | resolve: {
47 | // Since we ship with json-loader always, it's better to move extensions to here
48 | // from the default config.
49 | extensions: ['.js', '.json', '.jsx', ''],
50 | // Add support to NODE_PATH. With this we could avoid relative path imports.
51 | // Based on this CRA feature: https://github.com/facebookincubator/create-react-app/issues/253
52 | fallback: _utils.nodePaths,
53 | alias: {
54 | // This is to add addon support for NPM2
55 | '@kadira/storybook-addons': require.resolve('@kadira/storybook-addons')
56 | }
57 | }
58 | };
59 |
60 | // Webpack 2 doesn't have a OccurenceOrderPlugin plugin in the production mode.
61 | // But webpack 1 has it. That's why we do this.
62 | if (_utils.OccurenceOrderPlugin) {
63 | config.plugins.unshift(new _utils.OccurenceOrderPlugin());
64 | }
65 |
66 | return config;
67 | };
68 |
69 | var _path = require('path');
70 |
71 | var _path2 = _interopRequireDefault(_path);
72 |
73 | var _webpack = require('webpack');
74 |
75 | var _webpack2 = _interopRequireDefault(_webpack);
76 |
77 | var _babelProd = require('./babel.prod.js');
78 |
79 | var _babelProd2 = _interopRequireDefault(_babelProd);
80 |
81 | var _utils = require('./utils');
82 |
83 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
--------------------------------------------------------------------------------
/dist/client/preview/config_api.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | Object.defineProperty(exports, "__esModule", {
4 | value: true
5 | });
6 |
7 | var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
8 |
9 | var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
10 |
11 | var _createClass2 = require('babel-runtime/helpers/createClass');
12 |
13 | var _createClass3 = _interopRequireDefault(_createClass2);
14 |
15 | var _actions = require('./actions');
16 |
17 | var _ = require('./');
18 |
19 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
20 |
21 | /* globals location */
22 |
23 | var ConfigApi = function () {
24 | function ConfigApi(_ref) {
25 | var channel = _ref.channel;
26 | var storyStore = _ref.storyStore;
27 | var reduxStore = _ref.reduxStore;
28 | (0, _classCallCheck3.default)(this, ConfigApi);
29 |
30 | // channel can be null when running in node
31 | // always check whether channel is available
32 | this._channel = channel;
33 | this._storyStore = storyStore;
34 | this._reduxStore = reduxStore;
35 | }
36 |
37 | (0, _createClass3.default)(ConfigApi, [{
38 | key: '_renderMain',
39 | value: function _renderMain(loaders) {
40 | if (loaders) loaders();
41 |
42 | var stories = this._storyStore.dumpStoryBook();
43 | // send to the parent frame.
44 | this._channel.emit('setStories', { stories: stories });
45 |
46 | // clear the error if exists.
47 | this._reduxStore.dispatch((0, _actions.clearError)());
48 | this._reduxStore.dispatch((0, _actions.setInitialStory)(stories));
49 | }
50 | }, {
51 | key: '_renderError',
52 | value: function _renderError(e) {
53 | var stack = e.stack;
54 | var message = e.message;
55 |
56 | var error = { stack: stack, message: message };
57 | this._reduxStore.dispatch((0, _actions.setError)(error));
58 | }
59 | }, {
60 | key: 'configure',
61 | value: function configure(loaders, module) {
62 | var _this = this;
63 |
64 | var render = function render() {
65 | try {
66 | _this._renderMain(loaders);
67 | } catch (error) {
68 | if (module.hot && module.hot.status() === 'apply') {
69 | // We got this issue, after webpack fixed it and applying it.
70 | // Therefore error message is displayed forever even it's being fixed.
71 | // So, we'll detect it reload the page.
72 | location.reload();
73 | } else {
74 | // If we are accessing the site, but the error is not fixed yet.
75 | // There we can render the error.
76 | _this._renderError(error);
77 | }
78 | }
79 | };
80 |
81 | if (module.hot) {
82 | module.hot.accept(function () {
83 | setTimeout(render);
84 | });
85 | module.hot.dispose(function () {
86 | (0, _.clearDecorators)();
87 | });
88 | }
89 |
90 | if (this._channel) {
91 | render();
92 | } else {
93 | loaders();
94 | }
95 | }
96 | }]);
97 | return ConfigApi;
98 | }();
99 |
100 | exports.default = ConfigApi;
--------------------------------------------------------------------------------
/dist/client/preview/index.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | Object.defineProperty(exports, "__esModule", {
4 | value: true
5 | });
6 | exports.configure = exports.getStorybook = exports.clearDecorators = exports.addDecorator = exports.setAddon = exports.storiesOf = undefined;
7 |
8 | var _assign = require('babel-runtime/core-js/object/assign');
9 |
10 | var _assign2 = _interopRequireDefault(_assign);
11 |
12 | var _redux = require('redux');
13 |
14 | var _storybookAddons = require('@kadira/storybook-addons');
15 |
16 | var _storybookAddons2 = _interopRequireDefault(_storybookAddons);
17 |
18 | var _storybookChannelPostmsg = require('@kadira/storybook-channel-postmsg');
19 |
20 | var _storybookChannelPostmsg2 = _interopRequireDefault(_storybookChannelPostmsg);
21 |
22 | var _qs = require('qs');
23 |
24 | var _qs2 = _interopRequireDefault(_qs);
25 |
26 | var _story_store = require('./story_store');
27 |
28 | var _story_store2 = _interopRequireDefault(_story_store);
29 |
30 | var _client_api = require('./client_api');
31 |
32 | var _client_api2 = _interopRequireDefault(_client_api);
33 |
34 | var _config_api = require('./config_api');
35 |
36 | var _config_api2 = _interopRequireDefault(_config_api);
37 |
38 | var _render = require('./render');
39 |
40 | var _render2 = _interopRequireDefault(_render);
41 |
42 | var _init = require('./init');
43 |
44 | var _init2 = _interopRequireDefault(_init);
45 |
46 | var _actions = require('./actions');
47 |
48 | var _reducer = require('./reducer');
49 |
50 | var _reducer2 = _interopRequireDefault(_reducer);
51 |
52 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
53 |
54 | // check whether we're running on node/browser
55 | var _global = global; /* global window */
56 |
57 | var navigator = _global.navigator;
58 |
59 | var isBrowser = navigator && navigator.userAgent !== 'storyshots';
60 |
61 | var storyStore = new _story_store2.default();
62 | var reduxStore = (0, _redux.createStore)(_reducer2.default);
63 | var context = { storyStore: storyStore, reduxStore: reduxStore };
64 |
65 | if (isBrowser) {
66 | var queryParams = _qs2.default.parse(window.location.search.substring(1));
67 | var channel = (0, _storybookChannelPostmsg2.default)({ page: 'preview' });
68 | channel.on('setCurrentStory', function (data) {
69 | reduxStore.dispatch((0, _actions.selectStory)(data.kind, data.story));
70 | });
71 | (0, _assign2.default)(context, { channel: channel, window: window, queryParams: queryParams });
72 | _storybookAddons2.default.setChannel(channel);
73 | (0, _init2.default)(context);
74 | }
75 |
76 | var clientApi = new _client_api2.default(context);
77 | var configApi = new _config_api2.default(context);
78 |
79 | // do exports
80 | var storiesOf = exports.storiesOf = clientApi.storiesOf.bind(clientApi);
81 | var setAddon = exports.setAddon = clientApi.setAddon.bind(clientApi);
82 | var addDecorator = exports.addDecorator = clientApi.addDecorator.bind(clientApi);
83 | var clearDecorators = exports.clearDecorators = clientApi.clearDecorators.bind(clientApi);
84 | var getStorybook = exports.getStorybook = clientApi.getStorybook.bind(clientApi);
85 | var configure = exports.configure = configApi.configure.bind(configApi);
86 |
87 | // initialize the UI
88 | var renderUI = function renderUI() {
89 | if (isBrowser) {
90 | (0, _render2.default)(context);
91 | }
92 | };
93 |
94 | reduxStore.subscribe(renderUI);
--------------------------------------------------------------------------------
/dist/server/track_usage.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | Object.defineProperty(exports, "__esModule", {
4 | value: true
5 | });
6 | exports.getStore = getStore;
7 | exports.track = track;
8 | exports.dontTrack = dontTrack;
9 |
10 | var _configstore = require('configstore');
11 |
12 | var _configstore2 = _interopRequireDefault(_configstore);
13 |
14 | var _uuid = require('uuid');
15 |
16 | var _uuid2 = _interopRequireDefault(_uuid);
17 |
18 | var _request = require('request');
19 |
20 | var _request2 = _interopRequireDefault(_request);
21 |
22 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
23 |
24 | var logger = console; /* eslint global-require: 0 */
25 |
26 | // ### WHAT?
27 | //
28 | // We will track anonymous usage of how you use storybook.
29 | // We don't want any personal information.
30 | // We just need to collect following information
31 | //
32 | // * How many time a user runs start-storybook a day
33 | //
34 | // We will send a ping to our server when you run storybook with above information.
35 |
36 | // ### WHY?
37 | //
38 | // We are maintaining React Storybook and we want to improve it.
39 | // We also working on storybooks.io which is storybook related service.
40 | // In order to get a real picture about the storybook usage,
41 | // we need to get some real usage stats, not the amount of NPM downloads.
42 | // This is why we do this.
43 |
44 | // ### CAN I STOP THIS?
45 | //
46 | // You(or your company) may have certain policies.
47 | // If so, you can stop sending these metrics.
48 | // To do that, use --dont-track flag when running React Storybook.
49 | // start-storybook --dont-track -p 9001
50 |
51 | // ### HELP US?
52 | //
53 | // Maintaining a open source project is hard.
54 | // It's even harder for a startup like us (Kadira)
55 | // Help us to make storybook better by sending these few metrics.
56 | // Based on these metrics, we could improve storybook and build a profitable
57 | // service around it. With that, we could continue to maintain and
58 | // improve Storybook.
59 |
60 | var DONT_TRACK = false;
61 |
62 | function getStore() {
63 | var key = 'react-storybook-usage';
64 | var store = new _configstore2.default(key);
65 | return store;
66 | }
67 |
68 | function track() {
69 | if (DONT_TRACK) return;
70 |
71 | var store = getStore();
72 |
73 | // Just a hash to aggregate metrics. Don't use any personal info.
74 | var userId = store.get('userId');
75 | if (!userId) {
76 | userId = _uuid2.default.v4();
77 | store.set('userId', userId);
78 | }
79 |
80 | var pkg = require('../../package.json');
81 |
82 | // We don't wanna worry about the success or failure of this.
83 | _request2.default.post('https://ping.getstorybook.io/react-storybook-usage', {
84 | json: {
85 | userId: userId,
86 | version: pkg.version
87 | }
88 | }, function () {});
89 |
90 | if (!store.get('startTrackingOn')) {
91 | store.set('startTrackingOn', Date.now());
92 | }
93 |
94 | var pingsSent = store.get('pingsSent') || 0;
95 | store.set('pingsSent', pingsSent + 1);
96 |
97 | if (pingsSent < 5) {
98 | logger.log(' We will collect some anonymous usage stats of how you use storybook.');
99 | logger.log(' See why?: https://getstorybook.io/tracking');
100 | logger.log();
101 | }
102 | }
103 |
104 | function dontTrack() {
105 | DONT_TRACK = true;
106 | }
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "storybook",
3 | "version": "2.31.0",
4 | "description": "React Storybook: Isolate React Component Development with Hot Reloading.",
5 | "repository": {
6 | "type": "git",
7 | "url": "https://github.com/kadirahq/react-storybook.git"
8 | },
9 | "typings": "./config/storybook.d.ts",
10 | "license": "MIT",
11 | "options": {
12 | "mocha": "--require scripts/mocha_runner src/**/__tests__/**/*.js"
13 | },
14 | "scripts": {
15 | "prepublish": "sh scripts/prepublish.sh",
16 | "lint": "eslint src",
17 | "lintfix": "eslint src --fix",
18 | "testonly": "mocha $npm_package_options_mocha",
19 | "test": "npm run lint && npm run testonly",
20 | "test-watch": "npm run testonly -- --watch --watch-extensions js",
21 | "dev": "DEV_BUILD=1 nodemon --watch src --exec 'npm run prepublish'",
22 | "postpublish": "greenkeeper-postpublish"
23 | },
24 | "dependencies": {
25 | "@kadira/react-split-pane": "^1.4.0",
26 | "@kadira/storybook-addon-actions": "^1.0.2",
27 | "@kadira/storybook-addon-links": "^1.0.0",
28 | "@kadira/storybook-addons": "^1.5.0",
29 | "@kadira/storybook-channel-postmsg": "^2.0.0",
30 | "@kadira/storybook-ui": "^3.8.0",
31 | "airbnb-js-shims": "^1.0.1",
32 | "autoprefixer": "^6.3.7",
33 | "babel-core": "^6.11.4",
34 | "babel-loader": "^6.2.4",
35 | "babel-plugin-react-docgen": "^1.4.1",
36 | "babel-preset-react-app": "^1.0.0",
37 | "babel-runtime": "^6.9.2",
38 | "case-sensitive-paths-webpack-plugin": "^1.1.2",
39 | "chalk": "^1.1.3",
40 | "commander": "^2.9.0",
41 | "common-tags": "^1.3.1",
42 | "configstore": "^2.0.0",
43 | "css-loader": "0.25.0",
44 | "express": "^4.13.3",
45 | "file-loader": "^0.9.0",
46 | "find-cache-dir": "^0.1.1",
47 | "json-loader": "^0.5.4",
48 | "json-stringify-safe": "^5.0.1",
49 | "json5": "^0.5.0",
50 | "lodash.pick": "^4.2.0",
51 | "postcss-loader": "1.1.0",
52 | "qs": "^6.1.0",
53 | "react-modal": "^1.2.0",
54 | "redux": "^3.5.2",
55 | "request": "^2.74.0",
56 | "serve-favicon": "^2.3.0",
57 | "shelljs": "^0.7.4",
58 | "style-loader": "0.13.1",
59 | "url-loader": "^0.5.7",
60 | "uuid": "^2.0.3",
61 | "webpack": "^1.13.1",
62 | "webpack-dev-middleware": "^1.6.0",
63 | "webpack-hot-middleware": "^2.13.2"
64 | },
65 | "peerDependencies": {
66 | "react": "^0.14.7 || ^15.0.0",
67 | "react-dom": "^0.14.7 || ^15.0.0"
68 | },
69 | "devDependencies": {
70 | "babel-cli": "^6.11.4",
71 | "babel-eslint": "^6.1.2",
72 | "babel-preset-stage-0": "^6.5.0",
73 | "chai": "^3.5.0",
74 | "deep-equal": "^1.0.1",
75 | "enzyme": "^2.2.0",
76 | "eslint": "^3.5.0",
77 | "eslint-config-airbnb": "^11.1.0",
78 | "eslint-plugin-import": "^1.13.0",
79 | "eslint-plugin-jsx-a11y": "^2.1.0",
80 | "eslint-plugin-react": "^6.1.2",
81 | "expect": "^1.6.0",
82 | "greenkeeper-postpublish": "^1.0.1",
83 | "jsdom": "^9.5.0",
84 | "mocha": "^3.0.2",
85 | "mock-fs": "^3.8.0",
86 | "nodemon": "^1.9.1",
87 | "react": "^15.0.0",
88 | "react-addons-test-utils": "^15.0.1",
89 | "react-dom": "^15.0.0",
90 | "sinon": "^1.17.3"
91 | },
92 | "main": "dist/client/index.js",
93 | "bin": {
94 | "start-storybook": "./dist/server/index.js",
95 | "build-storybook": "./dist/server/build.js",
96 | "storybook-server": "./dist/server/index.js"
97 | }
98 | }
99 |
--------------------------------------------------------------------------------
/src/server/build.js:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 |
3 | import webpack from 'webpack';
4 | import program from 'commander';
5 | import path from 'path';
6 | import fs from 'fs';
7 | import chalk from 'chalk';
8 | import shelljs from 'shelljs';
9 | import packageJson from '../../package.json';
10 | import getBaseConfig from './config/webpack.config.prod';
11 | import loadConfig from './config';
12 | import getIndexHtml from './index.html';
13 | import getIframeHtml from './iframe.html';
14 | import { getHeadHtml, parseList, getEnvConfig } from './utils';
15 |
16 | process.env.NODE_ENV = process.env.NODE_ENV || 'production';
17 |
18 | // avoid ESLint errors
19 | const logger = console;
20 |
21 | program
22 | .version(packageJson.version)
23 | .option('-s, --static-dir
84 | Usually we create stories with smaller UI components in the app.
85 | Have a look at the Writing Stories section in our documentation.
86 |
No Preview Available!
); 45 | const noPreview = (