GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-04 22:31:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' into addon-channel-warning

Browse Source
This commit is contained in:
Tom Coleman 2017-07-28 21:14:19 +10:00 committed by GitHub
commit 9cd69c8cc2
175 changed files with 6946 additions and 715 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintignore
View File

@ -6,6 +6,8 @@ node_modules
app/**/demo/**
docs/public
vue
*.bundle.js
*.js.map

3
.eslintrc-markdown.js
View File

@ -51,6 +51,9 @@ module.exports = {
'react/react-in-jsx-scope': ignore,
'react/jsx-filename-extension': ignore,
'jsx-a11y/accessible-emoji': ignore,
'jsx-a11y/href-no-hash': ignore,
'jsx-a11y/label-has-for': ignore,
'jsx-a11y/anchor-is-valid': ['warn', { aspects: ['invalidHref'] }],
'react/no-unescaped-entities': ignore,
},
};

3
.eslintrc.js
View File

@ -66,6 +66,9 @@ module.exports = {
},
],
'jsx-a11y/accessible-emoji': ignore,
'jsx-a11y/href-no-hash': ignore,
'jsx-a11y/label-has-for': ignore,
'jsx-a11y/anchor-is-valid': ['warn', { aspects: ['invalidHref'] }],
'react/no-unescaped-entities': ignore,
},
};

72
CHANGELOG.md
View File

@ -1,3 +1,75 @@
# 3.2.0
2017-July-27
Storybook 3.2 is filled with new features to help make your components shine! Headline features:
- Vue support [#1267](https://github.com/storybooks/storybook/pull/1267)
- Story Hierarchy [#1329](https://github.com/storybooks/storybook/pull/1329)
- React Native On Device UI [#1413](https://github.com/storybooks/storybook/pull/1413)
Plus many more features, documentation improvements, and bugfixes below!
#### Features
- Vue support [#1267](https://github.com/storybooks/storybook/pull/1267)
- Add support for vue in addon-notes [#1278](https://github.com/storybooks/storybook/pull/1278)
- CLI support for Vue [#1287](https://github.com/storybooks/storybook/pull/1287)
- Story Hierarchy [#1329](https://github.com/storybooks/storybook/pull/1329)
- Story Hierarchy UI improvements [#1387](https://github.com/storybooks/storybook/pull/1387) [#1356](https://github.com/storybooks/storybook/pull/1356)
- Story Hierarchy - keyboard accessibility [#1427](https://github.com/storybooks/storybook/pull/1427)
- React Native - On Device UI [#1413](https://github.com/storybooks/storybook/pull/1413)
- Show first story on RN OnDeviceUI startup [#1510](https://github.com/storybooks/storybook/pull/1510)
- Add warning when module is missing in storiesOf [#1525](https://github.com/storybooks/storybook/pull/1525)
- Provide styling hook for Addon Info story body [#1308](https://github.com/storybooks/storybook/pull/1308)
- Implement filtering on story-level [#1432](https://github.com/storybooks/storybook/pull/1432)
- Refactoring of `addon-info` [#1452](https://github.com/storybooks/storybook/pull/1452)
- ADD storybook logo for inside terminal for future CLI or easteregg [#1499](https://github.com/storybooks/storybook/pull/1499)
- Improved error checking in global addDecorator [#1481](https://github.com/storybooks/storybook/pull/1481)
#### Bug Fixes
- Fix react native example and bootstrapping [#1514](https://github.com/storybooks/storybook/pull/1514)
- Fix a 'funny' hmr issue in cra-kitchen-sink [#1508](https://github.com/storybooks/storybook/pull/1508)
- When timestamps are enabled, it actually checks them before applying changes [#1405](https://github.com/storybooks/storybook/pull/1405)
- Fix issue when extending webpack config [#1468](https://github.com/storybooks/storybook/pull/1468)
- Fix addon notes [#1448](https://github.com/storybooks/storybook/pull/1448)
- Story Hierarchy - initial state bug fix [#1401](https://github.com/storybooks/storybook/pull/1401)
- Remove blue outline when node is focused [#1497](https://github.com/storybooks/storybook/pull/1497)
#### Documentation
- Add hierarchySeparator to README [#1445](https://github.com/storybooks/storybook/pull/1445)
- Document null addons channel in FAQ [#1507](https://github.com/storybooks/storybook/pull/1507)
#### Maintenance
- Revert knobs API to previous API. [#1527](https://github.com/storybooks/storybook/pull/1527)
- FIX hoist-internals: remove existing folder/link before linking [#1516](https://github.com/storybooks/storybook/pull/1516)
- Update global hook for Vue Devtools [#1376](https://github.com/storybooks/storybook/pull/1376)
- SWITCH to circleci over travisCI && CHANGE lerna bootstrap procedure: [#1486](https://github.com/storybooks/storybook/pull/1486)
- Update cra-kitchen-sink package versions for 3.2-alpha [#1434](https://github.com/storybooks/storybook/pull/1434)
- Updating 3.2 alpha release with patches [#1419](https://github.com/storybooks/storybook/pull/1419)
- Remove typescript typings for @storybook/addon-notes [#1344](https://github.com/storybooks/storybook/pull/1344)
- Remove typescript typings for @storybook/addon-options [#1343](https://github.com/storybooks/storybook/pull/1343)
- Remove typescript typings for @storybook/addon-knobs [#1339](https://github.com/storybooks/storybook/pull/1339)
- Remove typescript typings for @storybook/addon-links [#1342](https://github.com/storybooks/storybook/pull/1342)
#### Dependency Upgrades
- Updated babel-plugin-react-docgen version [#1526](https://github.com/storybooks/storybook/pull/1526)
- UPDATE everything (including eslint 4) [#1517](https://github.com/storybooks/storybook/pull/1517)
- Update remark-preset-lint-recommended to the latest version 🚀 [#1512](https://github.com/storybooks/storybook/pull/1512)
- Update remark-cli to the latest version 🚀 [#1498](https://github.com/storybooks/storybook/pull/1498)
- Remove upper bound on react-native peerDependency [#1424](https://github.com/storybooks/storybook/pull/1424)
- Bump `react-split-pane` version [#1495](https://github.com/storybooks/storybook/pull/1495)
# 3.1.9
2017-July-16

4
README.md
View File

@ -19,7 +19,7 @@ It allows you to browse a component library, view the different states of each c
Storybook runs outside of your app. This allows you to develop UI components in isolation, which can improve component reuse, testability, and development speed. You can build quickly without having to worry about application-specific dependencies.
Here are some featured examples that you can reference to see how Storybook works: https://storybook.js.org/examples/
Here are some featured examples that you can reference to see how Storybook works: <https://storybook.js.org/examples/>
Storybook comes with a lot of [addons](https://storybook.js.org/addons/introduction/) for component design, documentation, testing, interactivity, and so on. Storybook's easy-to-use API makes it easy to configure and extend in various ways. It has even been extended to support React Native development for mobile.
@ -48,11 +48,13 @@ getstorybook
Once it's installed, you can `npm run storybook` and it will run the development server on your local machine, and give you a URL to browse some sample stories.
**Storybook v2.x migration note**: If you're using Storybook v2.x and want to shift to 3.x version the easiest way is:
```sh
npm i -g @storybook/cli
cd my-storybook-v2-app
getstorybook
```
It runs a codemod to update all package names. Read all migration details in our [Migration Guide](MIGRATION.md)
For full documentation on using Storybook visit: [storybook.js.org](https://storybook.js.org)

12
addons/actions/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-actions",
"version": "3.1.9",
"version": "3.2.0-alpha.10",
"description": "Action Logger addon for storybook",
"keywords": [
"storybook"
@ -21,7 +21,7 @@
"storybook": "start-storybook -p 9001"
},
"dependencies": {
"@storybook/addons": "^3.1.6",
"@storybook/addons": "^3.2.0-alpha.10",
"deep-equal": "^1.0.1",
"json-stringify-safe": "^5.0.1",
"prop-types": "^15.5.10",
@ -29,10 +29,10 @@
"uuid": "^3.1.0"
},
"devDependencies": {
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-test-renderer": "^15.5.4",
"shelljs": "^0.7.7"
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-test-renderer": "^15.6.1",
"shelljs": "^0.7.8"
},
"peerDependencies": {
"react": "*",

2
addons/centered/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-centered",
"version": "3.1.9",
"version": "3.2.0-alpha.8",
"description": "Storybook decorator to center components",
"license": "MIT",
"author": "Muhammed Thanish <mnmtanish@gmail.com>",

12
addons/comments/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-comments",
"version": "3.1.9",
"version": "3.2.0-alpha.10",
"description": "Comments addon for Storybook",
"keywords": [
"storybook"
@ -23,7 +23,7 @@
"storybook-remote": "start-storybook -p 3006"
},
"dependencies": {
"@storybook/addons": "^3.1.6",
"@storybook/addons": "^3.2.0-alpha.10",
"babel-runtime": "^6.23.0",
"deep-equal": "^1.0.1",
"events": "^1.1.1",
@ -39,10 +39,10 @@
"@kadira/storybook-database-cloud": "*",
"@kadira/storybook-deployer": "*",
"git-url-parse": "^6.2.2",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-test-renderer": "^15.5.4",
"shelljs": "^0.7.7"
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-test-renderer": "^15.6.1",
"shelljs": "^0.7.8"
},
"peerDependencies": {
"react": "*"

8
addons/events/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-events",
"version": "3.1.9",
"version": "3.2.0-alpha.10",
"description": "Add events to your Storybook stories.",
"keywords": [
"addon",
@ -20,7 +20,7 @@
"storybook": "start-storybook -p 6006"
},
"dependencies": {
"@storybook/addons": "^3.1.6",
"@storybook/addons": "^3.2.0-alpha.10",
"babel-runtime": "^6.23.0",
"format-json": "^1.0.3",
"prop-types": "^15.5.10",
@ -28,8 +28,8 @@
"uuid": "^3.1.0"
},
"devDependencies": {
"react": "^15.5.4",
"react-dom": "^15.5.4"
"react": "^15.6.1",
"react-dom": "^15.6.1"
},
"peerDependencies": {
"react": "*"

8
addons/graphql/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-graphql",
"version": "3.1.6",
"version": "3.2.0-alpha.10",
"description": "Storybook addon to display the GraphiQL IDE",
"keywords": [
"storybook"
@ -27,9 +27,9 @@
"prop-types": "^15.5.10"
},
"devDependencies": {
"react": "^15.5.4",
"react-dom": "^15.5.4",
"shelljs": "^0.7.7"
"react": "^15.6.1",
"react-dom": "^15.6.1",
"shelljs": "^0.7.8"
},
"peerDependencies": {
"react": "*"

13
addons/info/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-info",
"version": "3.1.9",
"version": "3.2.0-alpha.10",
"description": "A Storybook addon to show additional information for your stories.",
"license": "MIT",
"main": "dist/index.js",
@ -14,18 +14,19 @@
"storybook": "start-storybook -p 9010"
},
"dependencies": {
"@storybook/addons": "^3.1.6",
"@storybook/addons": "^3.2.0-alpha.10",
"babel-runtime": "^6.23.0",
"global": "^4.3.2",
"marksy": "^2.0.0",
"prop-types": "^15.5.10",
"react-addons-create-fragment": "^15.5.3"
"react-addons-create-fragment": "^15.5.3",
"util-deprecate": "^1.0.2"
},
"devDependencies": {
"git-url-parse": "^6.2.2",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-test-renderer": "^15.5.4"
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-test-renderer": "^15.6.1"
},
"peerDependencies": {
"react": "*"

17
addons/info/src/components/PropVal.js
View File

@ -137,9 +137,16 @@ export default function PropVal(props) {
);
}
PropVal.propTypes = {
val: PropTypes.any.isRequired, // eslint-disable-line
maxPropObjectKeys: PropTypes.number.isRequired,
maxPropArrayLength: PropTypes.number.isRequired,
maxPropStringLength: PropTypes.number.isRequired,
PropVal.defaultProps = {
val: null,
maxPropObjectKeys: 3,
maxPropArrayLength: 3,
maxPropStringLength: 50,
};
PropVal.propTypes = {
val: PropTypes.any, // eslint-disable-line
maxPropObjectKeys: PropTypes.number,
maxPropArrayLength: PropTypes.number,
maxPropStringLength: PropTypes.number,
};

96
addons/info/src/index.js
View File

@ -1,7 +1,12 @@
import React from 'react';
import deprecate from 'util-deprecate';
import _Story from './components/Story';
import { H1, H2, H3, H4, H5, H6, Code, P, UL, A, LI } from './components/markdown';
function addonCompose(addonFn) {
return storyFn => context => addonFn(storyFn, context);
}
export const Story = _Story;
const defaultOptions = {
@ -29,59 +34,62 @@ const defaultMarksyConf = {
ul: UL,
};
export default {
addWithInfo(storyName, info, storyFn, _options) {
if (typeof storyFn !== 'function') {
if (typeof info === 'function') {
export function addInfo(storyFn, context, info, _options) {
if (typeof storyFn !== 'function') {
if (typeof info === 'function') {
_options = storyFn; // eslint-disable-line
storyFn = info; // eslint-disable-line
info = ''; // eslint-disable-line
} else {
throw new Error('No story defining function has been specified');
}
} else {
throw new Error('No story defining function has been specified');
}
}
const options = {
...defaultOptions,
..._options,
};
const options = {
...defaultOptions,
..._options,
};
// props.propTables can only be either an array of components or null
// propTables option is allowed to be set to 'false' (a boolean)
// if the option is false, replace it with null to avoid react warnings
if (!options.propTables) {
options.propTables = null;
}
// props.propTables can only be either an array of components or null
// propTables option is allowed to be set to 'false' (a boolean)
// if the option is false, replace it with null to avoid react warnings
if (!options.propTables) {
options.propTables = null;
}
const marksyConf = { ...defaultMarksyConf };
if (options && options.marksyConf) {
Object.assign(marksyConf, options.marksyConf);
}
const marksyConf = { ...defaultMarksyConf };
if (options && options.marksyConf) {
Object.assign(marksyConf, options.marksyConf);
}
const props = {
info,
context,
showInline: Boolean(options.inline),
showHeader: Boolean(options.header),
showSource: Boolean(options.source),
propTables: options.propTables,
propTablesExclude: options.propTablesExclude,
styles: typeof options.styles === 'function' ? options.styles : s => s,
marksyConf,
maxPropObjectKeys: options.maxPropObjectKeys,
maxPropArrayLength: options.maxPropArrayLength,
maxPropsIntoLine: options.maxPropsIntoLine,
maxPropStringLength: options.maxPropStringLength,
};
return (
<Story {...props}>
{storyFn(context)}
</Story>
);
}
return this.add(storyName, context => {
const props = {
info,
context,
showInline: Boolean(options.inline),
showHeader: Boolean(options.header),
showSource: Boolean(options.source),
propTables: options.propTables,
propTablesExclude: options.propTablesExclude,
styles: typeof options.styles === 'function' ? options.styles : s => s,
marksyConf,
maxPropObjectKeys: options.maxPropObjectKeys,
maxPropArrayLength: options.maxPropArrayLength,
maxPropsIntoLine: options.maxPropsIntoLine,
maxPropStringLength: options.maxPropStringLength,
};
export const withInfo = (info, _options) =>
addonCompose((storyFn, context) => addInfo(storyFn, context, info, _options));
return (
<Story {...props}>
{storyFn(context)}
</Story>
);
});
},
export default {
addWithInfo: deprecate(function addWithInfo(storyName, info, storyFn, _options) {
return this.add(storyName, withInfo(info, _options)(storyFn));
}, '@storybook/addon-info .addWithInfo() addon is deprecated, use withInfo() from the same package instead. \nSee https://github.com/storybooks/storybook/tree/master/addons/info'),
};
export function setDefaults(newDefaults) {

59
addons/info/src/index.test.js Normal file
View File

@ -0,0 +1,59 @@
/* global document */
import React from 'react';
import ReactDOM from 'react-dom';
import AddonInfo, { withInfo, setDefaults, addInfo } from './';
/* eslint-disable */
const TestComponent = ({ func, obj, array, number, string, bool, empty }) =>
<div>
<h1>{func}</h1>
<h2>{obj.toString()}</h2>
<h3>{array}</h3>
<h4>{number}</h4>
<h5>{string}</h5>
<h6>{bool}</h6>
<p>{empty}</p>
<a href="#">test</a>
<code>storiesOf</code>
<ui>
<li>1</li>
<li>2</li>
</ui>
</div>;
/* eslint-enable */
const testContext = { kind: 'addon_info', story: 'jest_test' };
const testOptions = { propTables: false };
describe('addon Info', () => {
const story = context =>
<div>
It's a {context.story} story:
<TestComponent
func={x => x + 1}
obj={{ a: 'a', b: 'b' }}
array={[1, 2, 3]}
number={7}
string={'seven'}
bool
/>
</div>;
const api = {
add: (name, fn) => fn(testContext),
};
it('should render <Info /> and markdown', () => {
const Info = withInfo(
'# Test story \n## with markdown info \ncontaing **bold**, *cursive* text and `code`'
)(story);
ReactDOM.render(<Info />, document.createElement('div'));
});
it('should render with missed info', () => {
setDefaults(testOptions);
addInfo(null, testContext, story, testOptions);
});
it('should show deprecation warning', () => {
const addWithInfo = AddonInfo.addWithInfo.bind(api);
addWithInfo('jest', story);
});
});

7
addons/knobs/README.md
View File

@ -233,10 +233,11 @@ const value = date(label, defaultValue);
If you feel like this addon is not performing well enough there is an option to use `withKnobsOptions` instead of `withKnobs`.
Usage:
```
```js
story.addDecorator(withKnobsOptions({
debounce: { wait: number, leading: boolean}, // Same as lodash debounce.
timestamps: true // Doesn't emit events while user is typing.
debounce: { wait: number, leading: boolean}, // Same as lodash debounce.
timestamps: true // Doesn't emit events while user is typing.
}));
```

15
addons/knobs/package.json
View File

@ -1,10 +1,9 @@
{
"name": "@storybook/addon-knobs",
"version": "3.1.9",
"version": "3.2.0-alpha.10",
"description": "Storybook Addon Prop Editor Component",
"license": "MIT",
"main": "dist/index.js",
"typings": "./storybook-addon-knobs.d.ts",
"repository": {
"type": "git",
"url": "https://github.com/storybooks/storybook.git"
@ -16,7 +15,7 @@
"storybook": "start-storybook -p 9010"
},
"dependencies": {
"@storybook/addons": "^3.1.6",
"@storybook/addons": "^3.2.0-alpha.10",
"babel-runtime": "^6.23.0",
"deep-equal": "^1.0.1",
"global": "^4.3.2",
@ -26,18 +25,20 @@
"prop-types": "^15.5.10",
"react-color": "^2.11.4",
"react-datetime": "^2.8.10",
"react-textarea-autosize": "^4.3.0"
"react-textarea-autosize": "^4.3.0",
"util-deprecate": "^1.0.2"
},
"devDependencies": {
"@types/node": "^7.0.12",
"@types/react": "^15.0.21",
"git-url-parse": "^6.2.2",
"raw-loader": "^0.5.1",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"style-loader": "^0.17.0",
"typescript": "^2.2.2",
"typescript-definition-tester": "^0.0.5"
"typescript-definition-tester": "^0.0.5",
"vue": "^2.4.1"
},
"peerDependencies": {
"react": "*",

25
addons/knobs/src/KnobManager.js
View File

@ -1,17 +1,14 @@
/* eslint no-underscore-dangle: 0 */
import React from 'react';
import deepEqual from 'deep-equal';
import WrapStory from './components/WrapStory';
import KnobStore from './KnobStore';
// This is used by _mayCallChannel to determine how long to wait to before triggering a panel update
const PANEL_UPDATE_INTERVAL = 400;
export default class KnobManager {
constructor() {
this.knobStore = null;
this.knobStoreMap = {};
constructor(channel) {
this.channel = channel;
this.knobStore = new KnobStore();
}
knob(name, options) {
@ -37,22 +34,6 @@ export default class KnobManager {
return knobStore.get(name).value;
}
wrapStory(channel, storyFn, context) {
this.channel = channel;
const key = `${context.kind}:::${context.story}`;
let knobStore = this.knobStoreMap[key];
if (!knobStore) {
knobStore = this.knobStoreMap[key] = new KnobStore(); // eslint-disable-line
}
this.knobStore = knobStore;
knobStore.markAllUnused();
const initialContent = storyFn(context);
const props = { context, storyFn, channel, knobStore, initialContent };
return <WrapStory {...props} />;
}
_mayCallChannel() {
// Re rendering of the story may cause changes to the knobStore. Some new knobs maybe added and
// Some knobs may go unused. So we need to update the panel accordingly. For example remove the

21
addons/knobs/src/KnobManager.test.js
View File

@ -1,4 +1,3 @@
import React from 'react';
import { shallow } from 'enzyme'; // eslint-disable-line
import KnobManager from './KnobManager';
@ -74,24 +73,4 @@ describe('KnobManager', () => {
});
});
});
describe('wrapStory()', () => {
it('should contain the story and add correct props', () => {
const testManager = new KnobManager();
const testChannel = { emit: () => {} };
const testStory = () => <div id="test-story">Test Content</div>;
const testContext = {
kind: 'Foo',
story: 'bar baz',
};
const wrappedStory = testManager.wrapStory(testChannel, testStory, testContext);
const wrapper = shallow(wrappedStory);
expect(wrapper.find('#test-story').length).toBe(1);
const storyWrapperProps = wrappedStory.props;
expect(storyWrapperProps.channel).toEqual(testChannel);
expect(storyWrapperProps.context).toEqual(testContext);
});
});
});

7
addons/knobs/src/components/Panel.js
View File

@ -57,10 +57,16 @@ export default class Panel extends React.Component {
this.loadedFromUrl = false;
this.props.channel.on('addon:knobs:setKnobs', this.setKnobs);
this.props.channel.on('addon:knobs:setOptions', this.setOptions);
this.stopListeningOnStory = this.props.api.onStory(() => {
this.setState({ knobs: [] });
this.props.channel.emit('addon:knobs:reset');
});
}
componentWillUnmount() {
this.props.channel.removeListener('addon:knobs:setKnobs', this.setKnobs);
this.stopListeningOnStory();
}
setOptions(options = { debounce: false, timestamps: false }) {
@ -156,6 +162,7 @@ Panel.propTypes = {
}).isRequired,
onReset: PropTypes.object, // eslint-disable-line
api: PropTypes.shape({
onStory: PropTypes.func,
getQueryParam: PropTypes.func,
setQueryParams: PropTypes.func,
}).isRequired,

15
addons/knobs/src/components/__tests__/Panel.js
View File

@ -5,7 +5,17 @@ import Panel from '../Panel';
describe('Panel', () => {
it('should subscribe to setKnobs event of channel', () => {
const testChannel = { on: jest.fn() };
shallow(<Panel channel={testChannel} />);
const testApi = { onStory: jest.fn() };
shallow(<Panel channel={testChannel} api={testApi} />);
expect(testChannel.on).toHaveBeenCalledWith('addon:knobs:setKnobs', jasmine.any(Function));
});
it('should subscribe to onStory event', () => {
const testChannel = { on: jest.fn() };
const testApi = { onStory: jest.fn() };
shallow(<Panel channel={testChannel} api={testApi} />);
expect(testApi.onStory).toHaveBeenCalled();
expect(testChannel.on).toHaveBeenCalledWith('addon:knobs:setKnobs', jasmine.any(Function));
});
@ -28,6 +38,7 @@ describe('Panel', () => {
const testApi = {
getQueryParam: key => testQueryParams[key],
setQueryParams: jest.fn(),
onStory: jest.fn(),
};
shallow(<Panel channel={testChannel} api={testApi} />);
@ -74,6 +85,7 @@ describe('Panel', () => {
const testApi = {
getQueryParam: key => testQueryParams[key],
setQueryParams: jest.fn(),
onStory: jest.fn(),
};
const wrapper = shallow(<Panel channel={testChannel} api={testApi} />);
@ -115,6 +127,7 @@ describe('Panel', () => {
const testApi = {
getQueryParam: jest.fn(),
setQueryParams: jest.fn(),
onStory: jest.fn(),
};
const wrapper = shallow(<Panel channel={testChannel} api={testApi} />);

35
addons/knobs/src/index.js
View File

@ -1,7 +1,11 @@
import { window } from 'global';
import addons from '@storybook/addons';
import KnobManager from './KnobManager';
import { vueHandler } from './vue';
import { reactHandler } from './react';
const manager = new KnobManager();
const channel = addons.getChannel();
const manager = new KnobManager(channel);
export function knob(name, options) {
return manager.knob(name, options);
@ -55,16 +59,29 @@ export function date(name, value = new Date()) {
return manager.knob(name, { type: 'date', value: proxyValue });
}
// "Higher order component" / wrapper style API
// In 3.3, this will become `withKnobs`, once our decorator API supports it.
// See https://github.com/storybooks/storybook/pull/1527
function wrapperKnobs(options) {
if (options) channel.emit('addon:knobs:setOptions', options);
switch (window.STORYBOOK_ENV) {
case 'vue': {
return vueHandler(channel, manager.knobStore);
}
case 'react': {
return reactHandler(channel, manager.knobStore);
}
default: {
return reactHandler(channel, manager.knobStore);
}
}
}
export function withKnobs(storyFn, context) {
const channel = addons.getChannel();
return manager.wrapStory(channel, storyFn, context);
return wrapperKnobs()(storyFn)(context);
}
export function withKnobsOptions(options = {}) {
return (...args) => {
const channel = addons.getChannel();
channel.emit('addon:knobs:setOptions', options);
return withKnobs(...args);
};
return (storyFn, context) => wrapperKnobs(options)(storyFn)(context);
}

0
addons/knobs/src/components/WrapStory.js → addons/knobs/src/react/WrapStory.js
View File

11
addons/knobs/src/react/index.js Normal file
View File

@ -0,0 +1,11 @@
import React from 'react';
import WrapStory from './WrapStory';
/**
* Handles a react story
*/
export const reactHandler = (channel, knobStore) => getStory => context => {
const initialContent = getStory(context);
const props = { context, storyFn: getStory, channel, knobStore, initialContent };
return <WrapStory {...props} />;
};

27
addons/knobs/src/react/index.test.js Normal file
View File

@ -0,0 +1,27 @@
import React from 'react';
import { reactHandler } from './index';
import { shallow } from 'enzyme'; // eslint-disable-line
import KnobStore from '../KnobStore';
describe('React Handler', () => {
describe('wrapStory', () => {
it('should contain the story and add correct props', () => {
const testChannel = { emit: () => {} };
const testStory = () => <div id="test-story">Test Content</div>;
const testContext = {
kind: 'Foo',
story: 'bar baz',
};
const testStore = new KnobStore();
const wrappedStory = reactHandler(testChannel, testStore)(testStory)(testContext);
const wrapper = shallow(wrappedStory);
expect(wrapper.find('#test-story').length).toBe(1);
const storyWrapperProps = wrappedStory.props;
expect(storyWrapperProps.channel).toEqual(testChannel);
expect(storyWrapperProps.context).toEqual(testContext);
});
});
});

37
addons/knobs/src/vue/index.js Normal file
View File

@ -0,0 +1,37 @@
export const vueHandler = (channel, knobStore) => getStory => context => ({
render(h) {
return h(getStory(context));
},
methods: {
onKnobChange(change) {
const { name, value } = change;
// Update the related knob and it's value.
const knobOptions = knobStore.get(name);
knobOptions.value = value;
this.$forceUpdate();
},
onKnobReset() {
knobStore.reset();
this.setPaneKnobs(false);
this.$forceUpdate();
},
setPaneKnobs(timestamp = +new Date()) {
channel.emit('addon:knobs:setKnobs', { knobs: knobStore.getAll(), timestamp });
},
},
created() {
channel.on('addon:knobs:reset', this.onKnobReset);
channel.on('addon:knobs:knobChange', this.onKnobChange);
knobStore.subscribe(this.setPaneKnobs);
},
beforeDestroy(){
channel.removeListener('addon:knobs:reset', this.onKnobReset);
channel.removeListener('addon:knobs:knobChange', this.onKnobChange);
knobStore.unsubscribe(this.setPaneKnobs);
}
});

39
addons/knobs/src/vue/index.test.js Normal file
View File

@ -0,0 +1,39 @@
import Vue from 'vue';
import { vueHandler } from './index';
import KnobStore from '../KnobStore';
describe('Vue handler', () => {
it('Returns a component with a created function', () => {
const testChannel = { emit: () => {} };
const testStory = () => ({ template: '<div> testStory </div>' });
const testContext = {
kind: 'Foo',
story: 'bar baz',
};
const testStore = new KnobStore();
const component = vueHandler(testChannel, testStore)(testStory)(testContext);
expect(component).toMatchObject({
created: expect.any(Function),
beforeDestroy: expect.any(Function),
render: expect.any(Function),
});
});
it('Subscribes to the channel on creation', () => {
const testChannel = { emit: () => {}, on: jest.fn() };
const testStory = () => ({ render: (h) => h('div', ['testStory']) });
const testContext = {
kind: 'Foo',
story: 'bar baz',
};
const testStore = new KnobStore();
const component = new Vue(vueHandler(testChannel, testStore)(testStory)(testContext)).$mount();
expect(testChannel.on).toHaveBeenCalledTimes(2);
expect(testChannel.on).toHaveBeenCalledWith('addon:knobs:reset', expect.any(Function));
expect(testChannel.on).toHaveBeenCalledWith('addon:knobs:knobChange', expect.any(Function));
});
});

46
addons/knobs/storybook-addon-knobs.d.ts vendored
View File

@ -1,46 +0,0 @@
import * as React from 'react';
interface KnobOption<T> {
value: T,
type: 'text' | 'boolean' | 'number' | 'color' | 'object' | 'select' | 'date',
}
interface StoryContext {
kind: string,
story: string,
}
interface NumberOptions {
range: boolean,
min: number,
max: number,
step: number,
}
export function knob<T>(name: string, options: KnobOption<T>): T;
export function text(name: string, value: string | null): string;
export function boolean(name: string, value: boolean): boolean;
export function number(name: string, value: number, options?: NumberOptions): number;
export function color(name: string, value: string): string;
export function object<T>(name: string, value: T): T;
export function select<T>(name: string, options: { [s: string]: T }, value: string): T;
export function select(name: string, options: string[], value: string): string;
export function date(name: string, value?: Date): Date;
interface IWrapStoryProps {
context?: Object;
storyFn?: Function;
channel?: Object;
knobStore?: Object;
initialContent?: Object;
}
export function withKnobs(storyFn: Function, context: StoryContext): React.ReactElement<IWrapStoryProps>;
export function withKnobsOptions(options: Object): (storyFn: Function, context: StoryContext) => React.ReactElement<IWrapStoryProps>;

11
addons/links/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-links",
"version": "3.1.6",
"version": "3.2.0-alpha.10",
"description": "Story Links addon for storybook",
"keywords": [
"storybook"
@ -11,7 +11,6 @@
},
"license": "MIT",
"main": "dist/index.js",
"typings": "./storybook-addon-links.d.ts",
"repository": {
"type": "git",
"url": "https://github.com/storybooks/storybook.git"
@ -22,12 +21,12 @@
"storybook": "start-storybook -p 9001"
},
"dependencies": {
"@storybook/addons": "^3.1.6"
"@storybook/addons": "^3.2.0-alpha.10"
},
"devDependencies": {
"react": "^15.5.4",
"react-dom": "^15.5.4",
"shelljs": "^0.7.7"
"react": "^15.6.1",
"react-dom": "^15.6.1",
"shelljs": "^0.7.8"
},
"peerDependencies": {
"react": "*",

3
addons/links/storybook-addon-links.d.ts vendored
View File

@ -1,3 +0,0 @@
import * as React from 'react';
export function linkTo<E>(book: string, kind?: string): React.MouseEventHandler<E>;

10
addons/notes/README.md
View File

@ -31,17 +31,11 @@ import '@storybook/addon-notes/register';
Then write your stories like this:
```js
import React from 'react';
import { storiesOf } from '@storybook/react';
import { WithNotes } from '@storybook/addon-notes';
import { withNotes } from '@storybook/addon-notes';
import Component from './Component';
storiesOf('Component', module)
.add('with some emoji', () => (
<WithNotes notes={'A very simple component'}>
<Component></Component>
</WithNotes>
));
.add('with some emoji', withNotes({ notes: 'A very simple component'})(() => <Component></Component>));
```

15
addons/notes/package.json
View File

@ -1,11 +1,11 @@
{
"name": "@storybook/addon-notes",
"version": "3.1.6",
"version": "3.2.0-alpha.10",
"description": "Write notes for your Storybook stories.",
"keywords": [
"addon",
"react",
"storybook"
"storybook",
"notes"
],
"license": "MIT",
"main": "dist/index.js",
@ -19,15 +19,16 @@
"storybook": "start-storybook -p 9010"
},
"dependencies": {
"@storybook/addons": "^3.1.6",
"@storybook/addons": "^3.2.0-alpha.10",
"babel-runtime": "^6.23.0",
"prop-types": "^15.5.10"
"util-deprecate": "^1.0.2"
},
"devDependencies": {
"git-url-parse": "^6.2.2",
"react": "^15.5.4",
"prop-types": "^15.5.10",
"react": "^15.6.1",
"react-addons-test-utils": "^15.5.1",
"react-dom": "^15.5.4"
"react-dom": "^15.6.1"
},
"peerDependencies": {
"react": "*"

36
addons/notes/src/index.js
View File

@ -1,24 +1,22 @@
import React from 'react';
import PropTypes from 'prop-types';
import deprecate from 'util-deprecate';
import addons from '@storybook/addons';
import { WithNotes as ReactWithNotes } from './react';
export class WithNotes extends React.Component {
render() {
const { children, notes } = this.props;
const channel = addons.getChannel();
export const withNotes = ({ notes }) => {
const channel = addons.getChannel();
// send the notes to the channel.
return getStory => context => {
// send the notes to the channel before the story is rendered
channel.emit('storybook/notes/add_notes', notes);
// return children elements.
return children;
}
}
return getStory(context);
};
};
WithNotes.propTypes = {
children: PropTypes.node,
notes: PropTypes.string,
};
WithNotes.defaultProps = {
children: null,
notes: '',
};
Object.defineProperty(exports, 'WithNotes', {
configurable: true,
enumerable: true,
get: deprecate(
() => ReactWithNotes,
'@storybook/addon-notes WithNotes Component is deprecated, use withNotes() instead. See https://github.com/storybooks/storybook/tree/master/addons/notes'
),
});

24
addons/notes/src/react.js vendored Normal file
View File

@ -0,0 +1,24 @@
import React from 'react';
import PropTypes from 'prop-types';
import addons from '@storybook/addons';
export class WithNotes extends React.Component {
render() {
const { children, notes } = this.props;
const channel = addons.getChannel();
// send the notes to the channel.
channel.emit('storybook/notes/add_notes', notes);
// return children elements.
return children;
}
}
WithNotes.propTypes = {
children: PropTypes.node,
notes: PropTypes.string,
};
WithNotes.defaultProps = {
children: null,
notes: '',
};

7
addons/notes/storybook-addon-notes.d.ts vendored
View File

@ -1,7 +0,0 @@
import * as React from 'react';
export interface WithNotesProps extends React.HTMLProps<HTMLDivElement> {
notes?: string;
}
export const WithNotes: React.StatelessComponent<WithNotesProps>;

1
addons/options/README.md
View File

@ -44,6 +44,7 @@ setOptions({
showSearchBox: false,
downPanelInRight: false,
sortStoriesByKind: false,
hierarchySeparator: /\//,
});
storybook.configure(() => require('./stories'), module);

13
addons/options/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-options",
"version": "3.1.6",
"version": "3.2.0-alpha.10",
"description": "Options addon for storybook",
"keywords": [
"storybook"
@ -11,7 +11,6 @@
},
"license": "MIT",
"main": "preview.js",
"typings": "./storybook-addon-options.d.ts",
"repository": {
"type": "git",
"url": "https://github.com/storybooks/storybook.git"
@ -21,13 +20,13 @@
"storybook": "start-storybook -p 9001"
},
"dependencies": {
"@storybook/addons": "^3.1.6"
"@storybook/addons": "^3.2.0-alpha.10"
},
"devDependencies": {
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-test-renderer": "^15.5.4",
"shelljs": "^0.7.7"
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-test-renderer": "^15.6.1",
"shelljs": "^0.7.8"
},
"peerDependencies": {
"react": "*",

12
addons/options/storybook-addon-options.d.ts vendored
View File

@ -1,12 +0,0 @@
interface Options {
name?: string;
url?: string;
goFullScreen?: boolean;
showLeftPanel?: boolean;
showDownPanel?: boolean;
showSearchBox?: boolean;
downPanelInRight?: boolean;
sortStoriesByKind?: boolean;
}
export function setOptions(options: Options): void;

20
addons/storyshots/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-storyshots",
"version": "3.1.9",
"version": "3.2.0-alpha.11",
"description": "StoryShots is a Jest Snapshot Testing Addon for Storybook.",
"license": "MIT",
"main": "dist/index.js",
@ -20,21 +20,21 @@
"read-pkg-up": "^2.0.0"
},
"devDependencies": {
"@storybook/addons": "^3.1.6",
"@storybook/channels": "^3.1.6",
"@storybook/react": "^3.1.9",
"@storybook/addons": "^3.2.0-alpha.10",
"@storybook/channels": "^3.2.0-alpha.10",
"@storybook/react": "^3.2.0-alpha.11",
"babel-cli": "^6.24.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"react": "^15.5.4",
"react-dom": "^15.5.4"
"react": "^15.6.1",
"react-dom": "^15.6.1"
},
"peerDependencies": {
"@storybook/addons": "^3.1.6",
"@storybook/channels": "^3.1.6",
"@storybook/react": "^3.1.9",
"babel-core": "^6.24.1",
"@storybook/addons": "^3.2.0-alpha.10",
"@storybook/channels": "^3.2.0-alpha.10",
"@storybook/react": "^3.2.0-alpha.11",
"babel-core": "^6.25.0",
"react": "*",
"react-test-renderer": "*"
}

20
app/react-native/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/react-native",
"version": "3.1.9",
"version": "3.2.0-alpha.11",
"description": "A better way to develop React Native Components for your app",
"keywords": [
"react",
@ -24,13 +24,13 @@
"prepublish": "node ../../scripts/prepublish.js"
},
"dependencies": {
"@storybook/addon-actions": "^3.1.9",
"@storybook/addon-links": "^3.1.6",
"@storybook/addons": "^3.1.6",
"@storybook/channel-websocket": "^3.1.6",
"@storybook/ui": "^3.1.9",
"@storybook/addon-actions": "^3.2.0-alpha.10",
"@storybook/addon-links": "^3.2.0-alpha.10",
"@storybook/addons": "^3.2.0-alpha.10",
"@storybook/channel-websocket": "^3.2.0-alpha.10",
"@storybook/ui": "^3.2.0-alpha.11",
"autoprefixer": "^7.1.1",
"babel-core": "^6.24.1",
"babel-core": "^6.25.0",
"babel-loader": "^7.0.0",
"babel-plugin-syntax-async-functions": "^6.13.0",
"babel-plugin-syntax-trailing-function-commas": "^6.22.0",
@ -56,7 +56,7 @@
"json-loader": "^0.5.4",
"json5": "^0.5.1",
"postcss-loader": "^2.0.5",
"shelljs": "^0.7.7",
"shelljs": "^0.7.8",
"style-loader": "^0.17.0",
"url-loader": "^0.5.8",
"util-deprecate": "^1.0.2",
@ -68,8 +68,8 @@
},
"devDependencies": {
"babel-cli": "^6.24.1",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-native": "^0.43.3"
},
"peerDependencies": {

2
app/react-native/src/manager/components/PreviewHelp.js vendored
View File

@ -52,7 +52,7 @@ const PreviewHelp = () =>
For <span style={styles.code}>react-native init</span> apps:
</p>
<div style={styles.codeBlock}>
<pre style={styles.instructionsCode}>npm run &lt;platform&gt;</pre>
<pre style={styles.instructionsCode}>react-native run-&lt;platform&gt;</pre>
</div>
</div>;

37
app/react-native/src/preview/components/OnDeviceUI/index.js vendored Normal file
View File

@ -0,0 +1,37 @@
import React, { PropTypes } from 'react';
import { View } from 'react-native';
import style from './style';
import StoryListView from '../StoryListView';
import StoryView from '../StoryView';
export default function OnDeviceUI(props) {
const { stories, events, url } = props;
return (
<View style={style.main}>
<View style={style.leftPanel}>
<StoryListView stories={stories} events={events} />
</View>
<View style={style.rightPanel}>
<View style={style.preview}>
<StoryView url={url} events={events} />
</View>
</View>
</View>
);
}
OnDeviceUI.propTypes = {
stories: PropTypes.shape({
dumpStoryBook: PropTypes.func.isRequired,
on: PropTypes.func.isRequired,
emit: PropTypes.func.isRequired,
removeListener: PropTypes.func.isRequired,
}).isRequired,
events: PropTypes.shape({
on: PropTypes.func.isRequired,
emit: PropTypes.func.isRequired,
removeListener: PropTypes.func.isRequired,
}).isRequired,
url: PropTypes.string.isRequired,
};

28
app/react-native/src/preview/components/OnDeviceUI/style.js vendored Normal file
View File

@ -0,0 +1,28 @@
import { StyleSheet } from 'react-native';
export default {
main: {
flex: 1,
flexDirection: 'row',
paddingTop: 20,
backgroundColor: 'rgba(247, 247, 247, 1)',
},
leftPanel: {
flex: 1,
maxWidth: 250,
paddingHorizontal: 8,
paddingBottom: 8,
},
rightPanel: {
flex: 1,
backgroundColor: 'rgba(255, 255, 255, 1)',
borderWidth: StyleSheet.hairlineWidth,
borderColor: 'rgba(236, 236, 236, 1)',
borderRadius: 4,
marginBottom: 8,
marginHorizontal: 8,
},
preview: {
...StyleSheet.absoluteFillObject,
},
};

126
app/react-native/src/preview/components/StoryListView/index.js vendored Normal file
View File

@ -0,0 +1,126 @@
import React, { Component, PropTypes } from 'react';
import { SectionList, View, Text, TouchableOpacity } from 'react-native';
import style from './style';
const SectionHeader = ({ title, selected }) =>
<View key={title} style={style.header}>
<Text style={[style.headerText, selected && style.headerTextSelected]}>
{title}
</Text>
</View>;
SectionHeader.propTypes = {
title: PropTypes.string.isRequired,
selected: PropTypes.bool.isRequired,
};
const ListItem = ({ title, selected, onPress }) =>
<TouchableOpacity key={title} style={style.item} onPress={onPress}>
<Text style={[style.itemText, selected && style.itemTextSelected]}>
{title}
</Text>
</TouchableOpacity>;
ListItem.propTypes = {
title: PropTypes.string.isRequired,
onPress: PropTypes.func.isRequired,
selected: PropTypes.bool.isRequired,
};
export default class StoryListView extends Component {
constructor(props, ...args) {
super(props, ...args);
this.state = {
sections: [],
selectedKind: null,
selectedStory: null,
};
this.storyAddedHandler = this.handleStoryAdded.bind(this);
this.storyChangedHandler = this.handleStoryChanged.bind(this);
this.changeStoryHandler = this.changeStory.bind(this);
this.props.stories.on('storyAdded', this.storyAddedHandler);
this.props.events.on('story', this.storyChangedHandler);
}
componentDidMount() {
this.handleStoryAdded();
const dump = this.props.stories.dumpStoryBook();
const nonEmptyKind = dump.find(kind => kind.stories.length > 0);
if (nonEmptyKind) {
this.changeStory(nonEmptyKind.kind, nonEmptyKind.stories[0]);
}
}
componentWillUnmount() {
this.props.stories.removeListener('storyAdded', this.storiesHandler);
this.props.events.removeListener('story', this.storyChangedHandler);
}
handleStoryAdded() {
if (this.props.stories) {
const data = this.props.stories.dumpStoryBook();
this.setState({
sections: data.map(section => ({
key: section.kind,
title: section.kind,
data: section.stories.map(story => ({
key: story,
kind: section.kind,
name: story,
})),
})),
});
}
}
handleStoryChanged(storyFn, selection) {
const { kind, story } = selection;
this.setState({
selectedKind: kind,
selectedStory: story,
});
}
changeStory(kind, story) {
this.props.events.emit('setCurrentStory', { kind, story });
}
render() {
return (
<SectionList
style={style.list}
renderItem={({ item }) =>
<ListItem
title={item.name}
selected={
item.kind === this.state.selectedKind && item.name === this.state.selectedStory
}
onPress={() => this.changeStory(item.kind, item.name)}
/>}
renderSectionHeader={({ section }) =>
<SectionHeader
title={section.title}
selected={section.title === this.state.selectedKind}
/>}
sections={this.state.sections}
stickySectionHeadersEnabled={false}
/>
);
}
}
StoryListView.propTypes = {
stories: PropTypes.shape({
dumpStoryBook: PropTypes.func.isRequired,
on: PropTypes.func.isRequired,
emit: PropTypes.func.isRequired,
removeListener: PropTypes.func.isRequired,
}).isRequired,
events: PropTypes.shape({
on: PropTypes.func.isRequired,
emit: PropTypes.func.isRequired,
removeListener: PropTypes.func.isRequired,
}).isRequired,
};

26
app/react-native/src/preview/components/StoryListView/style.js vendored Normal file
View File

@ -0,0 +1,26 @@
export default {
list: {
flex: 1,
maxWidth: 250,
},
header: {
paddingTop: 24,
paddingBottom: 4,
},
headerText: {
fontSize: 16,
},
headerTextSelected: {
fontWeight: 'bold',
},
item: {
paddingVertical: 4,
paddingHorizontal: 16,
},
itemText: {
fontSize: 14,
},
itemTextSelected: {
fontWeight: 'bold',
},
};

6
app/react-native/src/preview/index.js vendored
View File

@ -6,6 +6,7 @@ import createChannel from '@storybook/channel-websocket';
import { EventEmitter } from 'events';
import StoryStore from './story_store';
import StoryKindApi from './story_kind';
import OnDeviceUI from './components/OnDeviceUI';
import StoryView from './components/StoryView';
export default class Preview {
@ -78,11 +79,14 @@ export default class Preview {
}
channel.on('getStories', () => this._sendSetStories());
channel.on('setCurrentStory', d => this._selectStory(d));
this._events.on('setCurrentStory', d => this._selectStory(d));
this._sendSetStories();
this._sendGetCurrentStory();
// finally return the preview component
return <StoryView url={webUrl} events={this._events} />;
return params.onDeviceUI
? <OnDeviceUI stories={this._stories} events={this._events} url={webUrl} />
: <StoryView url={webUrl} events={this._events} />;
};
}

7
app/react-native/src/preview/story_store.js vendored
View File

@ -1,8 +1,11 @@
/* eslint no-underscore-dangle: 0 */
import { EventEmitter } from 'events';
let count = 0;
export default class StoryStore {
export default class StoryStore extends EventEmitter {
constructor() {
super();
this._data = {};
}
@ -21,6 +24,8 @@ export default class StoryStore {
index: count,
fn,
};
this.emit('storyAdded', kind, name, fn);
}
getStoryKinds() {

22
app/react/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/react",
"version": "3.1.9",
"version": "3.2.0-alpha.11",
"description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
"homepage": "https://github.com/storybooks/storybook/tree/master/apps/react",
"bugs": {
@ -22,16 +22,16 @@
"prepublish": "node ../../scripts/prepublish.js"
},
"dependencies": {
"@storybook/addon-actions": "^3.1.9",
"@storybook/addon-links": "^3.1.6",
"@storybook/addons": "^3.1.6",
"@storybook/channel-postmessage": "^3.1.6",
"@storybook/ui": "^3.1.9",
"@storybook/addon-actions": "^3.2.0-alpha.10",
"@storybook/addon-links": "^3.2.0-alpha.10",
"@storybook/addons": "^3.2.0-alpha.10",
"@storybook/channel-postmessage": "^3.2.0-alpha.10",
"@storybook/ui": "^3.2.0-alpha.11",
"airbnb-js-shims": "^1.1.1",
"autoprefixer": "^7.1.1",
"babel-core": "^6.24.1",
"babel-core": "^6.25.0",
"babel-loader": "^7.0.0",
"babel-plugin-react-docgen": "^1.5.0",
"babel-plugin-react-docgen": "^1.6.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2016": "^6.24.1",
"babel-preset-react": "^6.24.1",
@ -63,7 +63,7 @@
"redux": "^3.6.0",
"request": "^2.81.0",
"serve-favicon": "^2.4.3",
"shelljs": "^0.7.7",
"shelljs": "^0.7.8",
"style-loader": "^0.17.0",
"url-loader": "^0.5.8",
"util-deprecate": "^1.0.2",
@ -76,8 +76,8 @@
"babel-cli": "^6.24.1",
"mock-fs": "^4.3.0",
"nodemon": "^1.11.0",
"react": "^15.5.4",
"react-dom": "^15.5.4"
"react": "^15.6.1",
"react-dom": "^15.6.1"
},
"peerDependencies": {
"react": "*",

7
app/react/src/client/preview/client_api.js
View File

@ -34,6 +34,13 @@ export default class ClientApi {
throw new Error('Invalid or missing kind provided for stories, should be a string');
}
if (!m) {
// eslint-disable-next-line no-console
console.warn(
`Missing 'module' parameter for story with a kind of '${kind}'. It will break your HMR`
);
}
if (m && m.hot) {
m.hot.dispose(() => {
this._storyStore.removeStoryKind(kind);

1
app/react/src/server/config/globals.js
View File

@ -1,3 +1,4 @@
/* globals window */
window.STORYBOOK_REACT_CLASSES = {};
window.STORYBOOK_ENV = 'react';

3
app/vue/.babelrc Normal file
View File

@ -0,0 +1,3 @@
{
"presets": ["env", "stage-0", "react"]
}

3
app/vue/.npmignore Normal file
View File

@ -0,0 +1,3 @@
docs
src
.babelrc

40
app/vue/README.md Normal file
View File

@ -0,0 +1,40 @@
# Storybook for Vue
[![Greenkeeper badge](https://badges.greenkeeper.io/storybooks/storybook.svg)](https://greenkeeper.io/)
[![Build Status on CircleCI](https://circleci.com/gh/storybooks/storybook.svg?style=shield)](https://circleci.com/gh/storybooks/storybook)
[![CodeFactor](https://www.codefactor.io/repository/github/storybooks/storybook/badge)](https://www.codefactor.io/repository/github/storybooks/storybook)
[![Known Vulnerabilities](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847/badge.svg)](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)
[![BCH compliance](https://bettercodehub.com/edge/badge/storybooks/storybook)](https://bettercodehub.com/results/storybooks/storybook) [![codecov](https://codecov.io/gh/storybooks/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/storybooks/storybook)
[![Storybook Slack](https://now-examples-slackin-nqnzoygycp.now.sh/badge.svg)](https://now-examples-slackin-nqnzoygycp.now.sh/)
[![Backers on Open Collective](https://opencollective.com/storybook/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/storybook/sponsors/badge.svg)](#sponsors)
* * *
Storybook for Vue is a UI development environment for your React components.
With it, you can visualize different states of your UI components and develop them interactively.
![Storybook Screenshot](https://github.com/storybooks/storybook/blob/master/app/react/docs/demo.gif)
Storybook runs outside of your app.
So you can develop UI components in isolation without worrying about app specific dependencies and requirements.
## Getting Started
```sh
npm i -g @storybook/cli
cd my-vue-app
getstorybook
```
For more information visit: [storybook.js.org](https://storybook.js.org)
* * *
Storybook also comes with a lot of [addons](https://storybook.js.org/addons/introduction) and a great API to customize as you wish.
You can also build a [static version](https://storybook.js.org/basics/exporting-storybook) of your storybook and deploy it anywhere you want.
## Vue Notes
- When using global custom components or extension (e.g `Vue.use`). You will need to declare those in the `./storybook/config.js`.

8
app/vue/addons.js Normal file
View File

@ -0,0 +1,8 @@
// import deprecate from 'util-deprecate';
// import '@storybook/addon-actions/register';
// import '@storybook/addon-links/register';
// deprecate(
// () => {},
// '@storybook/react/addons is deprecated. See https://storybook.js.org/addons/using-addons/'
// )();

BIN
app/vue/docs/demo.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 MiB

BIN
app/vue/docs/react_storybook_screenshot.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 245 KiB

BIN
app/vue/docs/storybooks_io_logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

83
app/vue/package.json Normal file
View File

@ -0,0 +1,83 @@
{
"name": "@storybook/vue",
"version": "3.2.0-alpha.11",
"description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
"homepage": "https://github.com/storybooks/storybook/tree/master/apps/vue",
"bugs": {
"url": "https://github.com/storybooks/storybook/issues"
},
"license": "MIT",
"main": "dist/client/index.js",
"bin": {
"build-storybook": "./dist/server/build.js",
"start-storybook": "./dist/server/index.js",
"storybook-server": "./dist/server/index.js"
},
"repository": {
"type": "git",
"url": "https://github.com/storybooks/storybook.git"
},
"scripts": {
"dev": "DEV_BUILD=1 nodemon --watch ./src --exec 'npm run prepublish'",
"prepublish": "node ../../scripts/prepublish.js"
},
"dependencies": {
"@storybook/addon-actions": "^3.2.0-alpha.10",
"@storybook/addon-links": "^3.2.0-alpha.10",
"@storybook/addons": "^3.2.0-alpha.10",
"@storybook/channel-postmessage": "^3.2.0-alpha.10",
"@storybook/ui": "^3.2.0-alpha.11",
"airbnb-js-shims": "^1.1.1",
"autoprefixer": "^7.1.1",
"babel-core": "^6.25.0",
"babel-loader": "^7.0.0",
"babel-plugin-react-docgen": "^1.6.0",
"babel-preset-env": "^1.6.0",
"babel-preset-react": "^6.24.1",
"babel-preset-react-app": "^3.0.0",
"babel-preset-stage-0": "^6.24.1",
"babel-runtime": "^6.23.0",
"case-sensitive-paths-webpack-plugin": "^2.0.0",
"chalk": "^2.0.1",
"commander": "^2.9.0",
"common-tags": "^1.4.0",
"configstore": "^3.1.0",
"css-loader": "^0.28.1",
"express": "^4.15.3",
"file-loader": "^0.11.1",
"find-cache-dir": "^1.0.0",
"global": "^4.3.2",
"json-loader": "^0.5.4",
"json-stringify-safe": "^5.0.1",
"json5": "^0.5.1",
"lodash.pick": "^4.4.0",
"postcss-flexbugs-fixes": "^3.0.0",
"postcss-loader": "^2.0.5",
"prop-types": "^15.5.10",
"qs": "^6.4.0",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-modal": "^1.7.7",
"redux": "^3.6.0",
"request": "^2.81.0",
"serve-favicon": "^2.4.3",
"shelljs": "^0.7.8",
"style-loader": "^0.17.0",
"url-loader": "^0.5.8",
"util-deprecate": "^1.0.2",
"uuid": "^3.1.0",
"vue": "^2.4.1",
"vue-hot-reload-api": "^2.1.0",
"vue-loader": "^12.2.1",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.4.1",
"webpack": "^2.5.1 || ^3.0.0",
"webpack-dev-middleware": "^1.10.2",
"webpack-hot-middleware": "^2.18.0"
},
"devDependencies": {
"babel-cli": "^6.24.1",
"mock-fs": "^4.3.0",
"nodemon": "^1.11.0"
}
}

23
app/vue/src/client/index.js Normal file
View File

@ -0,0 +1,23 @@
import deprecate from 'util-deprecate';
// NOTE export these to keep backwards compatibility
// import { action as deprecatedAction } from '@storybook/addon-actions';
// import { linkTo as deprecatedLinkTo } from '@storybook/addon-links';
import * as previewApi from './preview';
export const storiesOf = previewApi.storiesOf;
export const setAddon = previewApi.setAddon;
export const addDecorator = previewApi.addDecorator;
export const configure = previewApi.configure;
export const getStorybook = previewApi.getStorybook;
// export const action = deprecate(
// deprecatedAction,
// '@storybook/react action is deprecated. See: https://github.com/storybooks/storybook/tree/master/addon/actions'
// );
// export const linkTo = deprecate(
// deprecatedLinkTo,
// '@storybook/react linkTo is deprecated. See: https://github.com/storybooks/storybook/tree/master/addon/links'
// );

7
app/vue/src/client/manager/index.js Normal file
View File

@ -0,0 +1,7 @@
/* global document */
import renderStorybookUI from '@storybook/ui';
import Provider from './provider';
const rootEl = document.getElementById('root');
renderStorybookUI(rootEl, new Provider());

39
app/vue/src/client/manager/preview.js Normal file
View File

@ -0,0 +1,39 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
const iframeStyle = {
width: '100%',
height: '100%',
border: 0,
margin: 0,
padding: 0,
};
class Preview extends Component {
shouldComponentUpdate() {
// When the manager is re-rendered, due to changes in the layout (going full screen / changing
// addon panel to right) Preview section will update. If its re-rendered the whole html page
// inside the html is re-rendered making the story to re-mount.
// We dont have to re-render this component for any reason since changes are communicated to
// story using the channel and necessary changes are done by it.
return false;
}
render() {
return (
<iframe
id="storybook-preview-iframe"
title="preview"
style={iframeStyle}
src={this.props.url}
allowFullScreen
/>
);
}
}
Preview.propTypes = {
url: PropTypes.string.isRequired,
};
export default Preview;

52
app/vue/src/client/manager/provider.js Normal file
View File

@ -0,0 +1,52 @@
/* global location */
import qs from 'qs';
import React from 'react';
import { Provider } from '@storybook/ui';
import addons from '@storybook/addons';
import createChannel from '@storybook/channel-postmessage';
import Preview from './preview';
export default class ReactProvider extends Provider {
constructor() {
super();
this.channel = createChannel({ page: 'manager' });
addons.setChannel(this.channel);
}
getPanels() {
return addons.getPanels();
}
renderPreview(selectedKind, selectedStory) {
const queryParams = {
selectedKind,
selectedStory,
};
// Add the react-perf query string to the iframe if that present.
if (/react_perf/.test(location.search)) {
queryParams.react_perf = '1';
}
const queryString = qs.stringify(queryParams);
const url = `iframe.html?${queryString}`;
return <Preview url={url} />;
}
handleAPI(api) {
api.onStory((kind, story) => {
this.channel.emit('setCurrentStory', { kind, story });
});
this.channel.on('setStories', data => {
api.setStories(data.stories);
});
this.channel.on('selectStory', data => {
api.selectStory(data.kind, data.story);
});
this.channel.on('applyShortcut', data => {
api.handleShortcut(data.event);
});
addons.loadAddons(api);
}
}

54
app/vue/src/client/preview/ErrorDisplay.vue Normal file
View File

@ -0,0 +1,54 @@
<template>
<div class="errordisplay_main">
<div class="errordisplay_heading">{{ message }}</div>
<pre class="errordisplay_code">
<code>
{{ stack }}
</code>
</pre>
</div>
</template>
<script>
export default {
name: 'error-display',
props: {
message: {
type: String,
required: true
},
stack: {
type: String,
required: true
}
}
}
</script>
<style>
.errordisplay_main {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 20;
background-color: rgb(187, 49, 49);
color: #FFF;
webkit-font-smoothing: antialiased;
}
.errordisplay_heading {
font-size: 20;
font-weight: 600;
letter-spacing: 0.2;
margin: 10px 0;
font-family: -apple-system, ".SFNSText-Regular", "San Francisco", Roboto, "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;
}
.errordisplay_code {
font-size: 14;
width: 100vw;
overflow: auto;
}
</style>

49
app/vue/src/client/preview/NoPreview.vue Normal file
View File

@ -0,0 +1,49 @@
<template>
<div class="nopreview_wrapper">
<div class="nopreview_main">
<h1 class="nopreview_heading">No Preview</h1>
<p>Sorry, but you either have no stories or none are selected somehow.</p>
<ul>
<li>Please check the storybook config.</li>
<li>Try reloading the page.</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: 'no-preview',
}
</script>
<style>
.nopreview_wrapper {
position: fixed;
display: flex;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 20;
align-content: center;
justify-content: center;
font-family: -apple-system, ".SFNSText-Regular", "San Francisco", Roboto, "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;
webkit-font-smoothing: antialiased;
}
.nopreview_main {
margin: auto;
padding: 30px;
border-radius: 10px;
background: rgba(0,0,0,0.03);
}
.nopreview_heading {
font-size: 20;
font-weight: 600;
letter-spacing: 0.2;
margin: 10px 0;
text-align: center;
}
</style>

34
app/vue/src/client/preview/actions.js Normal file
View File

@ -0,0 +1,34 @@
export const types = {
SET_ERROR: 'PREVIEW_SET_ERROR',
CLEAR_ERROR: 'PREVIEW_CLEAR_ERROR',
SELECT_STORY: 'PREVIEW_SELECT_STORY',
SET_INITIAL_STORY: 'PREVIEW_SET_INITIAL_STORY',
};
export function setInitialStory(storyKindList) {
return {
type: types.SET_INITIAL_STORY,
storyKindList,
};
}
export function setError(error) {
return {
type: types.SET_ERROR,
error,
};
}
export function clearError() {
return {
type: types.CLEAR_ERROR,
};
}
export function selectStory(kind, story) {
return {
type: types.SELECT_STORY,
kind,
story,
};
}

98
app/vue/src/client/preview/client_api.js Normal file
View File

@ -0,0 +1,98 @@
/* eslint no-underscore-dangle: 0 */
export default class ClientApi {
constructor({ channel, storyStore }) {
// channel can be null when running in node
// always check whether channel is available
this._channel = channel;
this._storyStore = storyStore;
this._addons = {};
this._globalDecorators = [];
}
setAddon(addon) {
this._addons = {
...this._addons,
...addon,
};
}
addDecorator(decorator) {
this._globalDecorators.push(decorator);
}
clearDecorators() {
this._globalDecorators = [];
}
storiesOf(kind, m) {
if (!kind && typeof kind !== 'string') {
throw new Error('Invalid or missing kind provided for stories, should be a string');
}
if(!m) {
console.warn(`Missing 'module' parameter for story with a kind of '${kind}'. It will break your HMR`);
}
if (m && m.hot) {
m.hot.dispose(() => {
this._storyStore.removeStoryKind(kind);
});
}
const localDecorators = [];
const api = {
kind,
};
// apply addons
Object.keys(this._addons).forEach(name => {
const addon = this._addons[name];
api[name] = (...args) => {
addon.apply(api, args);
return api;
};
});
api.add = (storyName, getStory) => {
if (typeof storyName !== 'string') {
throw new Error(`Invalid or missing storyName provided for a "${kind}" story.`);
}
if (this._storyStore.hasStory(kind, storyName)) {
throw new Error(`Story of "${kind}" named "${storyName}" already exists`);
}
// Wrap the getStory function with each decorator. The first
// decorator will wrap the story function. The second will
// wrap the first decorator and so on.
const decorators = [...localDecorators, ...this._globalDecorators];
const getDecoratedStory = decorators.reduce(
(decorated, decorator) => context => decorator(() => decorated(context), context),
getStory
);
// Add the fully decorated getStory function.
this._storyStore.addStory(kind, storyName, getDecoratedStory);
return api;
};
api.addDecorator = decorator => {
localDecorators.push(decorator);
return api;
};
return api;
}
getStorybook() {
return this._storyStore.getStoryKinds().map(kind => {
const stories = this._storyStore.getStories(kind).map(name => {
const render = this._storyStore.getStory(kind, name);
return { name, render };
});
return { kind, stories };
});
}
}

247
app/vue/src/client/preview/client_api.test.js Normal file
View File

@ -0,0 +1,247 @@
/* eslint no-underscore-dangle: 0 */
import ClientAPI from './client_api';
class StoryStore {
constructor() {
this.stories = [];
}
addStory(kind, story, fn) {
this.stories.push({ kind, story, fn });
}
getStoryKinds() {
return this.stories.reduce((kinds, info) => {
if (kinds.indexOf(info.kind) === -1) {
kinds.push(info.kind);
}
return kinds;
}, []);
}
getStories(kind) {
return this.stories.reduce((stories, info) => {
if (info.kind === kind) {
stories.push(info.story);
}
return stories;
}, []);
}
getStory(kind, name) {
return this.stories.reduce((fn, info) => {
if (!fn && info.kind === kind && info.story === name) {
return info.fn;
}
return fn;
}, null);
}
hasStory(kind, name) {
return Boolean(this.getStory(kind, name));
}
}
describe('preview.client_api', () => {
describe('setAddon', () => {
it('should register addons', () => {
const api = new ClientAPI({});
let data;
api.setAddon({
aa() {
data = 'foo';
},
});
api.storiesOf('none').aa();
expect(data).toBe('foo');
});
it('should not remove previous addons', () => {
const api = new ClientAPI({});
const data = [];
api.setAddon({
aa() {
data.push('foo');
},
});
api.setAddon({
bb() {
data.push('bar');
},
});
api.storiesOf('none').aa().bb();
expect(data).toEqual(['foo', 'bar']);
});
it('should call with the api context', () => {
const api = new ClientAPI({});
let data;
api.setAddon({
aa() {
data = typeof this.add;
},
});
api.storiesOf('none').aa();
expect(data).toBe('function');
});
it('should be able to access addons added previously', () => {
const api = new ClientAPI({});
let data;
api.setAddon({
aa() {
data = 'foo';
},
});
api.setAddon({
bb() {
this.aa();
},
});
api.storiesOf('none').bb();
expect(data).toBe('foo');
});
it('should be able to access the current kind', () => {
const api = new ClientAPI({});
const kind = 'dfdwf3e3';
let data;
api.setAddon({
aa() {
data = this.kind;
},
});
api.storiesOf(kind).aa();
expect(data).toBe(kind);
});
});
describe('addDecorator', () => {
it('should add local decorators', () => {
const storyStore = new StoryStore();
const api = new ClientAPI({ storyStore });
const localApi = api.storiesOf('none');
localApi.addDecorator(fn => `aa-${fn()}`);
localApi.add('storyName', () => 'Hello');
expect(storyStore.stories[0].fn()).toBe('aa-Hello');
});
it('should add global decorators', () => {
const storyStore = new StoryStore();
const api = new ClientAPI({ storyStore });
api.addDecorator(fn => `bb-${fn()}`);
const localApi = api.storiesOf('none');
localApi.add('storyName', () => 'Hello');
expect(storyStore.stories[0].fn()).toBe('bb-Hello');
});
it('should utilize both decorators at once', () => {
const storyStore = new StoryStore();
const api = new ClientAPI({ storyStore });
const localApi = api.storiesOf('none');
api.addDecorator(fn => `aa-${fn()}`);
localApi.addDecorator(fn => `bb-${fn()}`);
localApi.add('storyName', () => 'Hello');
expect(storyStore.stories[0].fn()).toBe('aa-bb-Hello');
});
it('should pass the context', () => {
const storyStore = new StoryStore();
const api = new ClientAPI({ storyStore });
const localApi = api.storiesOf('none');
localApi.addDecorator(fn => `aa-${fn()}`);
localApi.add('storyName', ({ kind, story }) => `${kind}-${story}`);
const kind = 'dfdfd';
const story = 'ef349ff';
const result = storyStore.stories[0].fn({ kind, story });
expect(result).toBe(`aa-${kind}-${story}`);
});
it('should have access to the context', () => {
const storyStore = new StoryStore();
const api = new ClientAPI({ storyStore });
const localApi = api.storiesOf('none');
localApi.addDecorator((fn, { kind, story }) => `${kind}-${story}-${fn()}`);
localApi.add('storyName', () => 'Hello');
const kind = 'dfdfd';
const story = 'ef349ff';
const result = storyStore.stories[0].fn({ kind, story });
expect(result).toBe(`${kind}-${story}-Hello`);
});
});
describe('clearDecorators', () => {
it('should remove all global decorators', () => {
const api = new ClientAPI({});
api._globalDecorators = 1234;
api.clearDecorators();
expect(api._globalDecorators).toEqual([]);
});
});
describe('getStorybook', () => {
it('should return storybook when empty', () => {
const storyStore = new StoryStore();
const api = new ClientAPI({ storyStore });
const book = api.getStorybook();
expect(book).toEqual([]);
});
it('should return storybook with stories', () => {
const storyStore = new StoryStore();
const api = new ClientAPI({ storyStore });
const functions = {
'story-1.1': () => 'story-1.1',
'story-1.2': () => 'story-1.2',
'story-2.1': () => 'story-2.1',
'story-2.2': () => 'story-2.2',
};
const kind1 = api.storiesOf('kind-1');
kind1.add('story-1.1', functions['story-1.1']);
kind1.add('story-1.2', functions['story-1.2']);
const kind2 = api.storiesOf('kind-2');
kind2.add('story-2.1', functions['story-2.1']);
kind2.add('story-2.2', functions['story-2.2']);
const book = api.getStorybook();
expect(book).toEqual([
{
kind: 'kind-1',
stories: [
{ name: 'story-1.1', render: functions['story-1.1'] },
{ name: 'story-1.2', render: functions['story-1.2'] },
],
},
{
kind: 'kind-2',
stories: [
{ name: 'story-2.1', render: functions['story-2.1'] },
{ name: 'story-2.2', render: functions['story-2.2'] },
],
},
]);
});
});
});

67
app/vue/src/client/preview/config_api.js Normal file
View File

@ -0,0 +1,67 @@
/* eslint no-underscore-dangle: 0 */
import { location } from 'global';
import { setInitialStory, setError, clearError } from './actions';
import { clearDecorators } from './';
export default class ConfigApi {
constructor({ channel, storyStore, reduxStore }) {
// channel can be null when running in node
// always check whether channel is available
this._channel = channel;
this._storyStore = storyStore;
this._reduxStore = reduxStore;
}
_renderMain(loaders) {
if (loaders) loaders();
const stories = this._storyStore.dumpStoryBook();
// send to the parent frame.
this._channel.emit('setStories', { stories });
// clear the error if exists.
this._reduxStore.dispatch(clearError());
this._reduxStore.dispatch(setInitialStory(stories));
}
_renderError(e) {
const { stack, message } = e;
const error = { stack, message };
this._reduxStore.dispatch(setError(error));
}
configure(loaders, module) {
const render = () => {
try {
this._renderMain(loaders);
} catch (error) {
if (module.hot && module.hot.status() === 'apply') {
// We got this issue, after webpack fixed it and applying it.
// Therefore error message is displayed forever even it's being fixed.
// So, we'll detect it reload the page.
location.reload();
} else {
// If we are accessing the site, but the error is not fixed yet.
// There we can render the error.
this._renderError(error);
}
}
};
if (module.hot) {
module.hot.accept(() => {
setTimeout(render);
});
module.hot.dispose(() => {
clearDecorators();
});
}
if (this._channel) {
render();
} else {
loaders();
}
}
}

55
app/vue/src/client/preview/index.js Normal file
View File

@ -0,0 +1,55 @@
/* global window */
import { createStore } from 'redux';
import addons from '@storybook/addons';
import createChannel from '@storybook/channel-postmessage';
import qs from 'qs';
import StoryStore from './story_store';
import ClientApi from './client_api';
import ConfigApi from './config_api';
import render from './render';
import init from './init';
import { selectStory } from './actions';
import reducer from './reducer';
// check whether we're running on node/browser
const { navigator } = global;
const isBrowser =
navigator &&
navigator.userAgent !== 'storyshots' &&
!(navigator.userAgent.indexOf('Node.js') > -1);
const storyStore = new StoryStore();
const reduxStore = createStore(reducer);
const context = { storyStore, reduxStore };
if (isBrowser) {
const queryParams = qs.parse(window.location.search.substring(1));
const channel = createChannel({ page: 'preview' });
channel.on('setCurrentStory', data => {
reduxStore.dispatch(selectStory(data.kind, data.story));
});
Object.assign(context, { channel, window, queryParams });
addons.setChannel(channel);
init(context);
}
const clientApi = new ClientApi(context);
const configApi = new ConfigApi(context);
// do exports
export const storiesOf = clientApi.storiesOf.bind(clientApi);
export const setAddon = clientApi.setAddon.bind(clientApi);
export const addDecorator = clientApi.addDecorator.bind(clientApi);
export const clearDecorators = clientApi.clearDecorators.bind(clientApi);
export const getStorybook = clientApi.getStorybook.bind(clientApi);
export const configure = configApi.configure.bind(configApi);
// initialize the UI
const renderUI = () => {
if (isBrowser) {
render(context);
}
};
reduxStore.subscribe(renderUI);

18
app/vue/src/client/preview/init.js Normal file
View File

@ -0,0 +1,18 @@
import keyEvents from '@storybook/ui/dist/libs/key_events';
import { selectStory } from './actions';
export default function(context) {
const { queryParams, reduxStore, window, channel } = context;
// set the story if correct params are loaded via the URL.
if (queryParams.selectedKind) {
reduxStore.dispatch(selectStory(queryParams.selectedKind, queryParams.selectedStory));
}
// Handle keyEvents and pass them to the parent.
window.onkeydown = e => {
const parsedEvent = keyEvents(e);
if (parsedEvent) {
channel.emit('applyShortcut', { event: parsedEvent });
}
};
}

40
app/vue/src/client/preview/reducer.js Normal file
View File

@ -0,0 +1,40 @@
import { types } from './actions';
export default function reducer(state = {}, action) {
switch (action.type) {
case types.CLEAR_ERROR: {
return {
...state,
error: null,
};
}
case types.SET_ERROR: {
return {
...state,
error: action.error,
};
}
case types.SELECT_STORY: {
return {
...state,
selectedKind: action.kind,
selectedStory: action.story,
};
}
case types.SET_INITIAL_STORY: {
const newState = { ...state };
const { storyKindList } = action;
if (!newState.selectedKind && storyKindList.length > 0) {
newState.selectedKind = storyKindList[0].kind;
newState.selectedStory = storyKindList[0].stories[0];
}
return newState;
}
default:
return state;
}
}

112
app/vue/src/client/preview/render.js Normal file
View File

@ -0,0 +1,112 @@
import Vue from 'vue';
import ErrorDisplay from './ErrorDisplay.vue';
import NoPreview from './NoPreview.vue';
import { window } from 'global';
import { stripIndents } from 'common-tags';
// check whether we're running on node/browser
const isBrowser = typeof window !== 'undefined';
const logger = console;
let previousKind = '';
let previousStory = '';
let app = null;
let err = null;
function renderErrorDisplay(error) {
if (err) err.$destroy();
err = new Vue({
el: '#error-display',
render(h) {
return h('div', { attrs: { id: 'error-display' } }, error
? [h(ErrorDisplay, { props: { message: error.message, stack: error.stack } }) ]
: []
);
},
});
}
export function renderError(error) {
renderErrorDisplay(error);
}
export function renderException(error) {
// We always need to render redbox in the mainPage if we get an error.
// Since this is an error, this affects to the main page as well.
renderErrorDisplay(error);
// Log the stack to the console. So, user could check the source code.
logger.error(error.stack);
}
function renderRoot(options) {
if (err) {
renderErrorDisplay(null); // clear
err = null;
}
if (app) app.$destroy();
app = new Vue(options);
}
export function renderMain(data, storyStore) {
if (storyStore.size() === 0) return null;
const { selectedKind, selectedStory } = data;
const story = storyStore.getStory(selectedKind, selectedStory);
// Unmount the previous story only if selectedKind or selectedStory has changed.
// renderMain() gets executed after each action. Actions will cause the whole
// story to re-render without this check.
// https://github.com/storybooks/react-storybook/issues/116
if (selectedKind !== previousKind || previousStory !== selectedStory) {
// We need to unmount the existing set of components in the DOM node.
// Otherwise, React may not recrease instances for every story run.
// This could leads to issues like below:
// https://github.com/storybooks/react-storybook/issues/81
previousKind = selectedKind;
previousStory = selectedStory;
}
const context = {
kind: selectedKind,
story: selectedStory,
};
const component = story ? story(context) : NoPreview;
if (!component) {
const error = {
message: `Expecting a Vue component from the story: "${selectedStory}" of "${selectedKind}".`,
stack: stripIndents`
Did you forget to return the Vue component from the story?
Use "() => ({ template: '<my-comp></my-comp>' })" or "() => ({ components: MyComp, template: '<my-comp></my-comp>' })" when defining the story.
`,
};
return renderError(error);
}
renderRoot({
el: '#root',
render(h) {
return h('div', { attrs: { id: 'root' } }, [h(component)]);
},
});
}
export default function renderPreview({ reduxStore, storyStore }) {
const state = reduxStore.getState();
if (state.error) {
return renderException(state.error);
}
try {
return renderMain(state, storyStore);
} catch (ex) {
return renderException(ex);
}
}

89
app/vue/src/client/preview/story_store.js Normal file
View File

@ -0,0 +1,89 @@
/* eslint no-underscore-dangle: 0 */
let count = 0;
function getId() {
count += 1;
return count;
}
export default class StoryStore {
constructor() {
this._data = {};
}
addStory(kind, name, fn) {
if (!this._data[kind]) {
this._data[kind] = {
kind,
index: getId(),
stories: {},
};
}
this._data[kind].stories[name] = {
name,
index: getId(),
fn,
};
}
getStoryKinds() {
return Object.keys(this._data)
.map(key => this._data[key])
.filter(kind => Object.keys(kind.stories).length > 0)
.sort((info1, info2) => info1.index - info2.index)
.map(info => info.kind);
}
getStories(kind) {
if (!this._data[kind]) {
return [];
}
return Object.keys(this._data[kind].stories)
.map(name => this._data[kind].stories[name])
.sort((info1, info2) => info1.index - info2.index)
.map(info => info.name);
}
getStory(kind, name) {
const storiesKind = this._data[kind];
if (!storiesKind) {
return null;
}
const storyInfo = storiesKind.stories[name];
if (!storyInfo) {
return null;
}
return storyInfo.fn;
}
removeStoryKind(kind) {
this._data[kind].stories = {};
}
hasStoryKind(kind) {
return Boolean(this._data[kind]);
}
hasStory(kind, name) {
return Boolean(this.getStory(kind, name));
}
dumpStoryBook() {
const data = this.getStoryKinds().map(kind => ({ kind, stories: this.getStories(kind) }));
return data;
}
size() {
return Object.keys(this._data).length;
}
clean() {
this.getStoryKinds().forEach(kind => delete this._data[kind]);
}
}

2
app/vue/src/server/addons.js Normal file
View File

@ -0,0 +1,2 @@
// import '@storybook/addon-actions/register';
// import '@storybook/addon-links/register';

84
app/vue/src/server/babel_config.js Normal file
View File

@ -0,0 +1,84 @@
import fs from 'fs';
import path from 'path';
import JSON5 from 'json5';
import defaultConfig from './config/babel';
// avoid ESLint errors
const logger = console;
function removeReactHmre(presets) {
const index = presets.indexOf('react-hmre');
if (index > -1) {
presets.splice(index, 1);
}
}
// Tries to load a .babelrc and returns the parsed object if successful
function loadFromPath(babelConfigPath) {
let config;
if (fs.existsSync(babelConfigPath)) {
const content = fs.readFileSync(babelConfigPath, 'utf-8');
try {
config = JSON5.parse(content);
config.babelrc = false;
logger.info('=> Loading custom .babelrc');
} catch (e) {
logger.error(`=> Error parsing .babelrc file: ${e.message}`);
throw e;
}
}
if (!config) return null;
// Remove react-hmre preset.
// It causes issues with react-storybook.
// We don't really need it.
// Earlier, we fix this by running storybook in the production mode.
// But, that hide some useful debug messages.
if (config.presets) {
removeReactHmre(config.presets);
}
if (config.env && config.env.development && config.env.development.presets) {
removeReactHmre(config.env.development.presets);
}
return config;
}
export default function(configDir) {
let babelConfig = loadFromPath(path.resolve(configDir, '.babelrc'));
let inConfigDir = true;
if (!babelConfig) {
babelConfig = loadFromPath('.babelrc');
inConfigDir = false;
}
if (babelConfig) {
// If the custom config uses babel's `extends` clause, then replace it with
// an absolute path. `extends` will not work unless we do this.
if (babelConfig.extends) {
babelConfig.extends = inConfigDir
? path.resolve(configDir, babelConfig.extends)
: path.resolve(babelConfig.extends);
}
}
const finalConfig = babelConfig || defaultConfig;
// Ensure plugins are defined or fallback to an array to avoid empty values.
const babelConfigPlugins = finalConfig.plugins || [];
const extraPlugins = [
[
require.resolve('babel-plugin-react-docgen'),
{
DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES',
},
],
];
// If `babelConfigPlugins` is not an `Array`, calling `concat` will inject it
// as a single value, if it is an `Array` it will be spreaded.
finalConfig.plugins = [].concat(babelConfigPlugins, extraPlugins);
return finalConfig;
}

90
app/vue/src/server/babel_config.test.js Normal file
View File

@ -0,0 +1,90 @@
import mock from 'mock-fs';
import loadBabelConfig from './babel_config';
describe('babel_config', () => {
// As the 'fs' is going to be mocked, let's call require.resolve
// so the require.cache has the correct route to the file.
// In fact let's use it in the tests :)
const babelPluginReactDocgenPath = require.resolve('babel-plugin-react-docgen');
it('should return the config with the extra plugins when `plugins` is an array.', () => {
// Mock a simple `.babelrc` config file.
mock({
'.babelrc': `{
"presets": [
"es2015",
"foo-preset"
],
"plugins": [
"foo-plugin"
]
}`,
});
const config = loadBabelConfig('.foo');
expect(config.plugins).toEqual([
'foo-plugin',
[
babelPluginReactDocgenPath,
{
DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES',
},
],
]);
mock.restore();
});
it('should return the config with the extra plugins when `plugins` is not an array.', () => {
// Mock a `.babelrc` config file with plugins key not being an array.
mock({
'.babelrc': `{
"presets": [
"es2015",
"foo-preset"
],
"plugins": "bar-plugin"
}`,
});
const config = loadBabelConfig('.bar');
expect(config.plugins).toEqual([
'bar-plugin',
[
babelPluginReactDocgenPath,
{
DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES',
},
],
]);
mock.restore();
});
it('should return the config only with the extra plugins when `plugins` is not present.', () => {
// Mock a `.babelrc` config file with no plugins key.
mock({
'.babelrc': `{
"presets": [
"es2015",
"foo-preset"
]
}`,
});
const config = loadBabelConfig('.biz');
expect(config.plugins).toEqual([
[
babelPluginReactDocgenPath,
{
DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES',
},
],
]);
mock.restore();
});
});

100
app/vue/src/server/build.js Executable file
View File

@ -0,0 +1,100 @@
#!/usr/bin/env node
import webpack from 'webpack';
import program from 'commander';
import path from 'path';
import fs from 'fs';
import chalk from 'chalk';
import shelljs from 'shelljs';
import packageJson from '../../package.json';
import getBaseConfig from './config/webpack.config.prod';
import loadConfig from './config';
import getIndexHtml from './index.html';
import getIframeHtml from './iframe.html';
import { getPreviewHeadHtml, getManagerHeadHtml, parseList, getEnvConfig } from './utils';
process.env.NODE_ENV = process.env.NODE_ENV || 'production';
// avoid ESLint errors
const logger = console;
program
.version(packageJson.version)
.option('-s, --static-dir <dir-names>', 'Directory where to load static files from', 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);
logger.info(chalk.bold(`${packageJson.name} v${packageJson.version}\n`));
if (program.enableDb || program.dbPath) {
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(' ')
);
process.exit(1);
}
// The key is the field created in `program` variable for
// each command line argument. Value is the env variable.
getEnvConfig(program, {
staticDir: 'SBCONFIG_STATIC_DIR',
outputDir: 'SBCONFIG_OUTPUT_DIR',
configDir: 'SBCONFIG_CONFIG_DIR',
});
const configDir = program.configDir || './.storybook';
const outputDir = program.outputDir || './storybook-static';
// create output directory (and the static dir) if not exists
shelljs.rm('-rf', outputDir);
shelljs.mkdir('-p', path.resolve(outputDir));
shelljs.cp(path.resolve(__dirname, 'public/favicon.ico'), outputDir);
// Build the webpack configuration using the `baseConfig`
// custom `.babelrc` file and `webpack.config.js` files
// NOTE changes to env should be done before calling `getBaseConfig`
const config = loadConfig('PRODUCTION', getBaseConfig(), configDir);
config.output.path = path.resolve(outputDir);
// copy all static files
if (program.staticDir) {
program.staticDir.forEach(dir => {
if (!fs.existsSync(dir)) {
logger.error(`Error: no such directory to load static files: ${dir}`);
process.exit(-1);
}
logger.log(`=> Copying static files from: ${dir}`);
shelljs.cp('-r', `${dir}/*`, outputDir);
});
}
// compile all resources with webpack and write them to the disk.
logger.log('Building storybook ...');
webpack(config).run((err, stats) => {
if (err) {
logger.error('Failed to build the storybook');
logger.error(err.message);
process.exit(1);
}
const data = {
publicPath: config.output.publicPath,
assets: stats.toJson().assetsByChunkName,
};
// Write both the storybook UI and IFRAME HTML files to destination path.
fs.writeFileSync(
path.resolve(outputDir, 'index.html'),
getIndexHtml({ ...data, headHtml: getManagerHeadHtml(configDir) })
);
fs.writeFileSync(
path.resolve(outputDir, 'iframe.html'),
getIframeHtml({ ...data, headHtml: getPreviewHeadHtml(configDir) })
);
});

80
app/vue/src/server/config.js Normal file
View File

@ -0,0 +1,80 @@
/* eslint-disable global-require, import/no-dynamic-require */
import fs from 'fs';
import path from 'path';
import loadBabelConfig from './babel_config';
// avoid ESLint errors
const logger = console;
// `baseConfig` is a webpack configuration bundled with storybook.
// Storybook will look in the `configDir` directory
// (inside working directory) if a config path is not provided.
export default function(configType, baseConfig, configDir) {
const config = baseConfig;
const babelConfig = loadBabelConfig(configDir);
config.module.rules[0].query = babelConfig;
// Check whether a config.js file exists inside the storybook
// config directory and throw an error if it's not.
const storybookConfigPath = path.resolve(configDir, 'config.js');
if (!fs.existsSync(storybookConfigPath)) {
const err = new Error(`=> Create a storybook config file in "${configDir}/config.js".`);
throw err;
}
config.entry.preview.push(require.resolve(storybookConfigPath));
// Check whether addons.js file exists inside the storybook.
// Load the default addons.js file if it's missing.
const storybookDefaultAddonsPath = path.resolve(__dirname, 'addons.js');
const storybookCustomAddonsPath = path.resolve(configDir, 'addons.js');
if (fs.existsSync(storybookCustomAddonsPath)) {
logger.info('=> Loading custom addons config.');
config.entry.manager.unshift(storybookCustomAddonsPath);
} else {
config.entry.manager.unshift(storybookDefaultAddonsPath);
}
// Check whether user has a custom webpack config file and
// return the (extended) base configuration if it's not available.
const customConfigPath = path.resolve(configDir, 'webpack.config.js');
if (!fs.existsSync(customConfigPath)) {
logger.info('=> Using default webpack setup based on "vue-cli".');
const configPath = path.resolve(__dirname, './config/defaults/webpack.config.js');
const customConfig = require(configPath);
return customConfig(config);
}
const customConfig = require(customConfigPath);
if (typeof customConfig === 'function') {
logger.info('=> Loading custom webpack config (full-control mode).');
return customConfig(config, configType);
}
logger.info('=> Loading custom webpack config (extending mode).');
return {
...customConfig,
// We'll always load our configurations after the custom config.
// So, we'll always load the stuff we need.
...config,
// Override with custom devtool if provided
devtool: customConfig.devtool || config.devtool,
// We need to use our and custom plugins.
plugins: [...config.plugins, ...(customConfig.plugins || [])],
module: {
...config.module,
// We need to use our and custom rules.
...customConfig.module,
rules: [...config.module.rules, ...(customConfig.module.rules || [])],
},
resolve: {
...config.resolve,
...customConfig.resolve,
alias: {
...config.alias,
...(customConfig.resolve && customConfig.resolve.alias),
},
},
};
}

34
app/vue/src/server/config/WatchMissingNodeModulesPlugin.js Normal file
View File

@ -0,0 +1,34 @@
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
// @remove-on-eject-end
// This Webpack plugin ensures `npm install <library>` forces a project rebuild.
// We’re not sure why this isn't Webpack's default behavior.
// See https://github.com/facebookincubator/create-react-app/issues/186.
function WatchMissingNodeModulesPlugin(nodeModulesPath) {
this.nodeModulesPath = nodeModulesPath;
}
WatchMissingNodeModulesPlugin.prototype.apply = function apply(compiler) {
compiler.plugin('emit', (compilation, callback) => {
const missingDeps = compilation.missingDependencies;
const nodeModulesPath = this.nodeModulesPath;
// If any missing files are expected to appear in node_modules...
if (missingDeps.some(file => file.indexOf(nodeModulesPath) !== -1)) {
// ...tell webpack to watch node_modules recursively until they appear.
compilation.contextDependencies.push(nodeModulesPath);
}
callback();
});
};
module.exports = WatchMissingNodeModulesPlugin;

24
app/vue/src/server/config/babel.js Normal file
View File

@ -0,0 +1,24 @@
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
const findCacheDir = require('find-cache-dir');
module.exports = {
// Don't try to find .babelrc because we want to force this configuration.
babelrc: false,
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables a cache directory for faster-rebuilds
// `find-cache-dir` will create the cache directory under the node_modules directory.
cacheDirectory: findCacheDir({ name: 'react-storybook' }),
presets: [
require.resolve('babel-preset-env'),
require.resolve('babel-preset-stage-0'),
require.resolve('babel-preset-react'),
],
};

18
app/vue/src/server/config/babel.prod.js Normal file
View File

@ -0,0 +1,18 @@
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
module.exports = {
// Don't try to find .babelrc because we want to force this configuration.
babelrc: false,
presets: [
require.resolve('babel-preset-env'),
require.resolve('babel-preset-stage-0'),
require.resolve('babel-preset-react'),
],
};

73
app/vue/src/server/config/defaults/webpack.config.js Normal file
View File

@ -0,0 +1,73 @@
// import webpack from 'webpack';
import autoprefixer from 'autoprefixer';
import { includePaths } from '../utils';
// Add a default custom config which is similar to what React Create App does.
module.exports = storybookBaseConfig => {
const newConfig = { ...storybookBaseConfig };
newConfig.module.rules = [
...storybookBaseConfig.module.rules,
{
test: /\.css$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
plugins: () => [
require('postcss-flexbugs-fixes'), // eslint-disable-line
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
],
},
{
test: /\.json$/,
include: includePaths,
loader: require.resolve('json-loader'),
},
{
test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
include: includePaths,
loader: require.resolve('file-loader'),
query: {
name: 'static/media/[name].[hash:8].[ext]',
},
},
{
test: /\.(mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/,
include: includePaths,
loader: require.resolve('url-loader'),
query: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]',
},
},
];
newConfig.resolve.alias = {
...storybookBaseConfig.resolve.alias,
// This is to support NPM2
'babel-runtime/regenerator': require.resolve('babel-runtime/regenerator'),
};
// Return the altered config
return newConfig;
};

4
app/vue/src/server/config/globals.js Normal file
View File

@ -0,0 +1,4 @@
/* globals window */
window.STORYBOOK_REACT_CLASSES = {};
window.STORYBOOK_ENV = 'vue';

1
app/vue/src/server/config/polyfills.js Normal file
View File

@ -0,0 +1 @@
require('airbnb-js-shims');

33
app/vue/src/server/config/utils.js Normal file
View File

@ -0,0 +1,33 @@
import path from 'path';
export const includePaths = [path.resolve('./')];
export const excludePaths = [path.resolve('node_modules')];
export const nodeModulesPaths = path.resolve('./node_modules');
export const nodePaths = (process.env.NODE_PATH || '')
.split(process.platform === 'win32' ? ';' : ':')
.filter(Boolean)
.map(p => path.resolve('./', p));
// Load environment variables starts with STORYBOOK_ to the client side.
export function loadEnv(options = {}) {
const defaultNodeEnv = options.production ? 'production' : 'development';
const env = {
NODE_ENV: JSON.stringify(process.env.NODE_ENV || defaultNodeEnv),
// This is to support CRA's public folder feature.
// In production we set this to dot(.) to allow the browser to access these assests
// even when deployed inside a subpath. (like in GitHub pages)
// In development this is just empty as we always serves from the root.
PUBLIC_URL: JSON.stringify(options.production ? '.' : ''),
};
Object.keys(process.env).filter(name => /^STORYBOOK_/.test(name)).forEach(name => {
env[name] = JSON.stringify(process.env[name]);
});
return {
'process.env': env,
};
}

66
app/vue/src/server/config/webpack.config.js Normal file
View File

@ -0,0 +1,66 @@
import path from 'path';
import webpack from 'webpack';
import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
import WatchMissingNodeModulesPlugin from './WatchMissingNodeModulesPlugin';
import { includePaths, excludePaths, nodeModulesPaths, loadEnv, nodePaths } from './utils';
import babelLoaderConfig from './babel';
export default function() {
const config = {
devtool: 'cheap-module-source-map',
entry: {
manager: [require.resolve('./polyfills'), require.resolve('../../client/manager')],
preview: [
require.resolve('./polyfills'),
require.resolve('./globals'),
`${require.resolve('webpack-hot-middleware/client')}?reload=true`,
],
},
output: {
path: path.join(__dirname, 'dist'),
filename: 'static/[name].bundle.js',
publicPath: '/',
},
plugins: [
new webpack.DefinePlugin(loadEnv()),
new webpack.HotModuleReplacementPlugin(),
new CaseSensitivePathsPlugin(),
new WatchMissingNodeModulesPlugin(nodeModulesPaths),
new webpack.ProgressPlugin(),
],
module: {
rules: [
{
test: /\.jsx?$/,
loader: require.resolve('babel-loader'),
query: babelLoaderConfig,
include: includePaths,
exclude: excludePaths,
},
{
test: /\.vue$/,
loader: require.resolve('vue-loader'),
options: {},
},
],
},
resolve: {
// Since we ship with json-loader always, it's better to move extensions to here
// from the default config.
extensions: ['.js', '.json', '.jsx'],
// Add support to NODE_PATH. With this we could avoid relative path imports.
// Based on this CRA feature: https://github.com/facebookincubator/create-react-app/issues/253
modules: ['node_modules'].concat(nodePaths),
alias: {
'vue$': require.resolve('vue/dist/vue.esm.js'),
'react$': require.resolve('react'),
'react-dom$': require.resolve('react-dom'),
}
},
performance: {
hints: false,
},
};
return config;
}

66
app/vue/src/server/config/webpack.config.prod.js Normal file
View File

@ -0,0 +1,66 @@
import path from 'path';
import webpack from 'webpack';
import babelLoaderConfig from './babel.prod';
import { includePaths, excludePaths, loadEnv, nodePaths } from './utils';
export default function() {
const entries = {
preview: [require.resolve('./polyfills'), require.resolve('./globals')],
manager: [require.resolve('./polyfills'), path.resolve(__dirname, '../../client/manager')],
};
const config = {
bail: true,
devtool: '#cheap-module-source-map',
entry: entries,
output: {
filename: 'static/[name].[chunkhash].bundle.js',
// Here we set the publicPath to ''.
// This allows us to deploy storybook into subpaths like GitHub pages.
// This works with css and image loaders too.
// This is working for storybook since, we don't use pushState urls and
// relative URLs works always.
publicPath: '',
},
plugins: [
new webpack.DefinePlugin(loadEnv({ production: true })),
new webpack.optimize.UglifyJsPlugin({
compress: {
screw_ie8: true,
warnings: false,
},
mangle: false,
output: {
comments: false,
screw_ie8: true,
},
}),
],
module: {
rules: [
{
test: /\.jsx?$/,
loader: require.resolve('babel-loader'),
query: babelLoaderConfig,
include: includePaths,
exclude: excludePaths,
},
],
},
resolve: {
// Since we ship with json-loader always, it's better to move extensions to here
// from the default config.
extensions: ['.js', '.json', '.jsx'],
// Add support to NODE_PATH. With this we could avoid relative path imports.
// Based on this CRA feature: https://github.com/facebookincubator/create-react-app/issues/253
modules: ['node_modules'].concat(nodePaths),
alias: {
'vue$': require.resolve('vue/dist/vue.esm.js'),
'react$': require.resolve('react'),
'react-dom$': require.resolve('react-dom'),
}
},
};
return config;
}

74
app/vue/src/server/iframe.html.js Normal file
View File

@ -0,0 +1,74 @@
import url from 'url';
// assets.preview will be:
// - undefined
// - string e.g. 'static/preview.9adbb5ef965106be1cc3.bundle.js'
// - array of strings e.g.
// [ 'static/preview.9adbb5ef965106be1cc3.bundle.js',
// 'preview.0d2d3d845f78399fd6d5e859daa152a9.css',
// 'static/preview.9adbb5ef965106be1cc3.bundle.js.map',
// 'preview.0d2d3d845f78399fd6d5e859daa152a9.css.map' ]
const urlsFromAssets = assets => {
if (!assets) {
return {
js: ['static/preview.bundle.js'],
css: [],
};
}
const urls = {
js: [],
css: [],
};
const re = /.+\.(\w+)$/;
Object.keys(assets)
// Don't load the manager script in the iframe
.filter(key => key !== 'manager')
.forEach(key => {
const asset = assets[key];
if (typeof asset === 'string') {
urls[re.exec(asset)[1]].push(asset);
} else {
const assetUrl = asset.find(u => re.exec(u)[1] !== 'map');
urls[re.exec(assetUrl)[1]].push(assetUrl);
}
});
return urls;
};
export default function({ assets, publicPath, headHtml }) {
const urls = urlsFromAssets(assets);
const cssTags = urls.css
.map(u => `<link rel='stylesheet' type='text/css' href='${url.resolve(publicPath, u)}'>`)
.join('\n');
const scriptTags = urls.js
.map(u => `<script src="${url.resolve(publicPath, u)}"></script>`)
.join('\n');
return `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
if (window.parent !== window) {
window.__VUE_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__VUE_DEVTOOLS_GLOBAL_HOOK__;
window.parent.__VUE_DEVTOOLS_CONTEXT__ = window.document;
}
</script>
<title>Storybook</title>
${headHtml}
${cssTags}
</head>
<body>
<div id="root"></div>
<div id="error-display"></div>
${scriptTags}
</body>
</html>
`;
}

79
app/vue/src/server/index.html.js Normal file
View File

@ -0,0 +1,79 @@
import url from 'url';
import { version } from '../../package.json';
// assets.manager will be:
// - undefined
// - string e.g. 'static/manager.9adbb5ef965106be1cc3.bundle.js'
// - array of strings e.g.
// assets.manager will be something like:
// [ 'static/manager.c6e6350b6eb01fff8bad.bundle.js',
// 'static/manager.c6e6350b6eb01fff8bad.bundle.js.map' ]
const managerUrlsFromAssets = assets => {
if (!assets || !assets.manager) {
return {
js: 'static/manager.bundle.js',
};
}
if (typeof assets.manager === 'string') {
return {
js: assets.manager,
};
}
return {
js: assets.manager.find(filename => filename.match(/\.js$/)),
css: assets.manager.find(filename => filename.match(/\.css$/)),
};
};
export default function({ assets, publicPath, headHtml }) {
const managerUrls = managerUrlsFromAssets(assets);
return `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="storybook-version" content="${version}">
<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>
${headHtml}
</head>
<body style="margin: 0;">
<div id="root"></div>
<script src="${url.resolve(publicPath, managerUrls.js)}"></script>
</body>
</html>
`;
}

157
app/vue/src/server/index.js Executable file
View File

@ -0,0 +1,157 @@
#!/usr/bin/env node
import express from 'express';
import https from 'https';
import favicon from 'serve-favicon';
import program from 'commander';
import path from 'path';
import fs from 'fs';
import chalk from 'chalk';
import shelljs from 'shelljs';
import storybook, { webpackValid } from './middleware';
import packageJson from '../../package.json';
import { parseList, getEnvConfig } from './utils';
process.env.NODE_ENV = process.env.NODE_ENV || 'development';
const logger = console;
program
.version(packageJson.version)
.option('-p, --port [number]', 'Port to run Storybook (Required)', parseInt)
.option('-h, --host [string]', 'Host to run Storybook')
.option('-s, --static-dir <dir-names>', 'Directory where to load static files from')
.option('-c, --config-dir [dir-name]', 'Directory where to load Storybook configurations from')
.option(
'--https',
'Serve Storybook over HTTPS. Note: You must provide your own certificate information.'
)
.option(
'--ssl-ca <ca>',
'Provide an SSL certificate authority. (Optional with --https, required if using a self-signed certificate)',
parseList
)
.option('--ssl-cert <cert>', 'Provide an SSL certificate. (Required with --https)')
.option('--ssl-key <key>', 'Provide an SSL key. (Required with --https)')
.option('-d, --db-path [db-file]', 'DEPRECATED!')
.option('--enable-db', 'DEPRECATED!')
.parse(process.argv);
logger.info(chalk.bold(`${packageJson.name} v${packageJson.version}`) + chalk.reset('\n'));
if (program.enableDb || program.dbPath) {
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(' ')
);
process.exit(1);
}
// The key is the field created in `program` variable for
// each command line argument. Value is the env variable.
getEnvConfig(program, {
port: 'SBCONFIG_PORT',
host: 'SBCONFIG_HOSTNAME',
staticDir: 'SBCONFIG_STATIC_DIR',
configDir: 'SBCONFIG_CONFIG_DIR',
});
if (!program.port) {
logger.error('Error: port to run Storybook is required!\n');
program.help();
process.exit(-1);
}
// Used with `app.listen` below
const listenAddr = [program.port];
if (program.host) {
listenAddr.push(program.host);
}
const app = express();
let server = app;
if (program.https) {
if (!program.sslCert) {
logger.error('Error: --ssl-cert is required with --https');
process.exit(-1);
}
if (!program.sslKey) {
logger.error('Error: --ssl-key is required with --https');
process.exit(-1);
}
const sslOptions = {
ca: (program.sslCa || []).map(ca => fs.readFileSync(ca, 'utf-8')),
cert: fs.readFileSync(program.sslCert, 'utf-8'),
key: fs.readFileSync(program.sslKey, 'utf-8'),
};
server = https.createServer(sslOptions, app);
}
let hasCustomFavicon = false;
if (program.staticDir) {
program.staticDir = parseList(program.staticDir);
program.staticDir.forEach(dir => {
const staticPath = path.resolve(dir);
if (!fs.existsSync(staticPath)) {
logger.error(`Error: no such directory to load static files: ${staticPath}`);
process.exit(-1);
}
logger.log(`=> Loading static files from: ${staticPath} .`);
app.use(express.static(staticPath, { index: false }));
const faviconPath = path.resolve(staticPath, 'favicon.ico');
if (fs.existsSync(faviconPath)) {
hasCustomFavicon = true;
app.use(favicon(faviconPath));
}
});
}
if (!hasCustomFavicon) {
app.use(favicon(path.resolve(__dirname, 'public/favicon.ico')));
}
// Build the webpack configuration using the `baseConfig`
// custom `.babelrc` file and `webpack.config.js` files
const configDir = program.configDir || './.storybook';
// The repository info is sent to the storybook while running on
// development mode so it'll be easier for tools to integrate.
const exec = cmd => shelljs.exec(cmd, { silent: true }).stdout.trim();
process.env.STORYBOOK_GIT_ORIGIN =
process.env.STORYBOOK_GIT_ORIGIN || exec('git remote get-url origin');
process.env.STORYBOOK_GIT_BRANCH =
process.env.STORYBOOK_GIT_BRANCH || exec('git symbolic-ref HEAD --short');
// NOTE changes to env should be done before calling `getBaseConfig`
// `getBaseConfig` function which is called inside the middleware
app.use(storybook(configDir));
let serverResolve = () => {};
let serverReject = () => {};
const serverListening = new Promise((resolve, reject) => {
serverResolve = resolve;
serverReject = reject;
});
server.listen(...listenAddr, error => {
if (error) {
serverReject(error);
} else {
serverResolve();
}
});
Promise.all([webpackValid, serverListening])
.then(() => {
const address = `http://${program.host || 'localhost'}:${program.port}/`;
logger.info(`Storybook started on => ${chalk.cyan(address)}\n`);
})
.catch(error => logger.error(error));

70
app/vue/src/server/middleware.js Normal file
View File

@ -0,0 +1,70 @@
import { Router } from 'express';
import webpack from 'webpack';
import webpackDevMiddleware from 'webpack-dev-middleware';
import webpackHotMiddleware from 'webpack-hot-middleware';
import getBaseConfig from './config/webpack.config';
import loadConfig from './config';
import getIndexHtml from './index.html';
import getIframeHtml from './iframe.html';
import { getPreviewHeadHtml, getManagerHeadHtml, getMiddleware } from './utils';
let webpackResolve = () => {};
let webpackReject = () => {};
export const webpackValid = new Promise((resolve, reject) => {
webpackResolve = resolve;
webpackReject = reject;
});
export default function(configDir) {
// Build the webpack configuration using the `getBaseConfig`
// custom `.babelrc` file and `webpack.config.js` files
const config = loadConfig('DEVELOPMENT', getBaseConfig(), configDir);
const middlewareFn = getMiddleware(configDir);
// remove the leading '/'
let publicPath = config.output.publicPath;
if (publicPath[0] === '/') {
publicPath = publicPath.slice(1);
}
const compiler = webpack(config);
const devMiddlewareOptions = {
noInfo: true,
publicPath: config.output.publicPath,
watchOptions: config.watchOptions || {},
...config.devServer,
};
const router = new Router();
const webpackDevMiddlewareInstance = webpackDevMiddleware(compiler, devMiddlewareOptions);
router.use(webpackDevMiddlewareInstance);
router.use(webpackHotMiddleware(compiler));
// custom middleware
middlewareFn(router);
webpackDevMiddlewareInstance.waitUntilValid(stats => {
const data = {
publicPath: config.output.publicPath,
assets: stats.toJson().assetsByChunkName,
};
router.get('/', (req, res) => {
const headHtml = getManagerHeadHtml(configDir);
res.send(getIndexHtml({ publicPath, headHtml }));
});
router.get('/iframe.html', (req, res) => {
const headHtml = getPreviewHeadHtml(configDir);
res.send(getIframeHtml({ ...data, headHtml, publicPath }));
});
if (stats.toJson().errors.length) {
webpackReject(stats);
} else {
webpackResolve(stats);
}
});
return router;
}

BIN
app/vue/src/server/public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.1 KiB

58
app/vue/src/server/utils.js Normal file
View File

@ -0,0 +1,58 @@
import path from 'path';
import fs from 'fs';
import deprecate from 'util-deprecate';
const fallbackHeadUsage = deprecate(
() => {},
'Usage of head.html has been deprecated. Please rename head.html to preview-head.html'
);
export function parseList(str) {
return str.split(',');
}
export function getPreviewHeadHtml(configDirPath) {
const headHtmlPath = path.resolve(configDirPath, 'preview-head.html');
const fallbackHtmlPath = path.resolve(configDirPath, 'head.html');
let headHtml = '';
if (fs.existsSync(headHtmlPath)) {
headHtml = fs.readFileSync(headHtmlPath, 'utf8');
} else if (fs.existsSync(fallbackHtmlPath)) {
headHtml = fs.readFileSync(fallbackHtmlPath, 'utf8');
fallbackHeadUsage();
}
return headHtml;
}
export function getManagerHeadHtml(configDirPath) {
const scriptPath = path.resolve(configDirPath, 'manager-head.html');
let scriptHtml = '';
if (fs.existsSync(scriptPath)) {
scriptHtml = fs.readFileSync(scriptPath, 'utf8');
}
return scriptHtml;
}
export function getEnvConfig(program, configEnv) {
Object.keys(configEnv).forEach(fieldName => {
const envVarName = configEnv[fieldName];
const envVarValue = process.env[envVarName];
if (envVarValue) {
program[fieldName] = envVarValue; // eslint-disable-line
}
});
}
export function getMiddleware(configDir) {
const middlewarePath = path.resolve(configDir, 'middleware.js');
if (fs.existsSync(middlewarePath)) {
let middlewareModule = require(middlewarePath); // eslint-disable-line
if (middlewareModule.__esModule) { // eslint-disable-line
middlewareModule = middlewareModule.default;
}
return middlewareModule;
}
return () => {};
}

42
app/vue/src/server/utils.test.js Normal file
View File

@ -0,0 +1,42 @@
import mock from 'mock-fs';
import { getPreviewHeadHtml } from './utils';
const HEAD_HTML_CONTENTS = '<script>console.log("custom script!");</script>';
describe('server.getPreviewHeadHtml', () => {
describe('when .storybook/head.html does not exist', () => {
beforeEach(() => {
mock({
config: {},
});
});
afterEach(() => {
mock.restore();
});
it('return an empty string', () => {
const result = getPreviewHeadHtml('./config');
expect(result).toEqual('');
});
});
describe('when .storybook/head.html exists', () => {
beforeEach(() => {
mock({
config: {
'head.html': HEAD_HTML_CONTENTS,
},
});
});
afterEach(() => {
mock.restore();
});
it('return the contents of the file', () => {
const result = getPreviewHeadHtml('./config');
expect(result).toEqual(HEAD_HTML_CONTENTS);
});
});
});

8
docs/.gatsby-context.js
View File

@ -4,11 +4,11 @@
// This file is auto-written and used by Gatsby to require
// files from your pages directory.
module.exports = function (callback) {
var context = require.context('./pages', true, /(coffee|cjsx|ts|tsx|jsx|js|md|rmd|mkdn?|mdwn|mdown|markdown|litcoffee|ipynb|html|json|yaml|toml)$/); // eslint-disable-line
if (module.hot) {
var context = require.context('./pages', true, /(coffee|cjsx|ts|tsx|jsx|js|md|rmd|mkdn?|mdwn|mdown|markdown|litcoffee|ipynb|html|json|yaml|toml)$/ // eslint-disable-line
);if (module.hot) {
module.hot.accept(context.id, function () {
context = require.context('./pages', true, /(coffee|cjsx|ts|tsx|jsx|js|md|rmd|mkdn?|mdwn|mdown|markdown|litcoffee|ipynb|html|json|yaml|toml)$/); // eslint-disable-line
return callback(context);
context = require.context('./pages', true, /(coffee|cjsx|ts|tsx|jsx|js|md|rmd|mkdn?|mdwn|mdown|markdown|litcoffee|ipynb|html|json|yaml|toml)$/ // eslint-disable-line
);return callback(context);
});
}
return callback(context);

1
docs/components/Docs/Content/style.css
View File

@ -98,6 +98,7 @@
#docs-content .markdown .header-anchor {
display: none;
line-height: 1px;
font-size: 10px;
}
#docs-content .markdown h1:hover .header-anchor,

2
docs/config.toml
View File

@ -7,6 +7,8 @@ basics = [
"/basics/introduction/",
"/basics/quick-start-guide/",
"/basics/slow-start-guide/",
"/basics/guide-react/",
"/basics/guide-vue/",
"/basics/writing-stories/",
"/basics/exporting-storybook/",
"/basics/faq/",

2
docs/loaders/markdown-loader/index.js
View File

@ -40,7 +40,7 @@ const md = (linkPrefix, shouldPrefix) =>
.use(require('markdown-it-replace-link')) // eslint-disable-line
.use(require('markdown-it-anchor'), { // eslint-disable-line
permalink: true,
permalinkSymbol: '⚓︎',
permalinkSymbol: '⚓️',
});
module.exports = function markdownLoader(content) {

8
docs/package.json
View File

@ -22,10 +22,10 @@
"@storybook/addons": "latest",
"@storybook/react": "latest",
"babel-cli": "^6.24.1",
"babel-core": "^6.24.1",
"babel-core": "^6.25.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.23.0",
"babel-preset-env": "^1.4.0",
"babel-preset-env": "^1.6.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"bootstrap": "^3.3.7",
@ -44,9 +44,9 @@
"markdown-it-replace-link": "^1.0.1",
"marked": "^0.3.6",
"prop-types": "^15.5.10",
"react": "^15.5.4",
"react": "^15.6.1",
"react-document-title": "^2.0.3",
"react-dom": "^15.5.4",
"react-dom": "^15.6.1",
"react-helmet": "^5.0.3",
"react-motion": "^0.1.0",
"react-responsive-grid": "^0.3.3",

2
docs/pages/addons/addon-gallery/index.md
View File

@ -42,7 +42,7 @@ Storyshots is a way to automaticly jest-snapshot all your stories. [More info he
You need to install these addons directly from NPM in order to use them.
### [README](https://github.com/tuchk4/storybook-readme)
### [Readme](https://github.com/tuchk4/storybook-readme)
With this addon, you can add docs in markdown format for each story.
It very useful because most projects and components already have README.md files.

1
docs/pages/addons/using-addons/index.md
View File

@ -30,7 +30,6 @@ This will register all the addons and you'll be able to see the actions and note
Now when you are writing a story it like this and add some notes:
```js
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { WithNotes } from '@storybook/addon-notes';

Some files were not shown because too many files have changed in this diff Show More