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

Merge branch 'release/3.3' into 269-angular-support

Browse Source
This commit is contained in:
Norbert de Langen 2017-09-12 17:47:44 +02:00 committed by GitHub
commit 2efdf04635
603 changed files with 67393 additions and 2328 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

167
.circleci/config.yml
View File

@ -2,48 +2,38 @@ defaults: &defaults
working_directory: /tmp/storybook
docker:
- image: node:8
environment:
BASH_ENV: ~/.bashrc
version: 2
dependencies:
pre:
- yarn global add npm
jobs:
validate:
<<: *defaults
steps:
- run:
name: "Checking Versions"
command: |
node --version
npm --version
yarn --version
build:
<<: *defaults
steps:
- checkout
- restore_cache:
keys:
- root-dependencies-{{ checksum "package.json" }}
- root-dependencies-
- dependencies-{{ checksum "yarn.lock" }}
- dependencies-
- run:
name: "Install root dependencies"
name: "Install latest yarn version"
command: |
curl -o- -L https://yarnpkg.com/install.sh | bash -s
- run:
name: "Install dependencies"
command: |
yarn install
- save_cache:
key: root-dependencies-{{ checksum "package.json" }}
paths:
- node_modules
- restore_cache:
keys:
- package-dependencies-{{ checksum "package.json" }}
- package-dependencies-
- run:
name: "Bootstrapping"
command: |
yarn bootstrap -- --all
yarn bootstrap --core --docs --reactnative --reactnativeapp
- save_cache:
key: package-dependencies-{{ checksum "package.json" }}
key: dependencies-{{ checksum "yarn.lock" }}
paths:
- node_modules
- app/**/node_modules
- docs/**/node_modules
- examples/**/node_modules
@ -54,70 +44,82 @@ jobs:
- checkout
- restore_cache:
keys:
- root-dependencies-{{ checksum "package.json" }}
- root-dependencies-
- dependencies-{{ checksum "yarn.lock" }}
- dependencies-
- run:
name: "Install root dependencies"
name: "Install latest yarn version"
command: |
curl -o- -L https://yarnpkg.com/install.sh | bash -s
- run:
name: "Install dependencies"
command: |
yarn install
- run:
name: "Bootstrapping"
command: |
yarn bootstrap -- --core
yarn bootstrap --core
- run:
name: "Build react kitchen-sink"
command: |
cd examples/cra-kitchen-sink
yarn build-storybook
yarn storybook -- --smoke-test
yarn storybook --smoke-test
- run:
name: "Build vue kitchen-sink"
command: |
cd examples/vue-kitchen-sink
yarn build-storybook
yarn storybook -- --smoke-test
yarn storybook --smoke-test
example-react-native:
<<: *defaults
steps:
- checkout
- restore_cache:
keys:
- root-dependencies-{{ checksum "package.json" }}
- root-dependencies-
- dependencies-{{ checksum "yarn.lock" }}
- dependencies-
- run:
name: "Install root dependencies"
name: "Install latest yarn version"
command: |
curl -o- -L https://yarnpkg.com/install.sh | bash -s
- run:
name: "Install dependencies"
command: |
yarn install
- run:
name: "Bootstrapping packages"
command: |
yarn bootstrap -- --core --reactnative --reactnativeapp
yarn bootstrap --core --reactnative --reactnativeapp
- run:
name: "Running React-Native example"
command: |
cd examples/react-native-vanilla
yarn storybook -- --smoke-test
yarn storybook --smoke-test
- run:
name: "Running React-Native-App example"
command: |
cd examples/crna-kitchen-sink
yarn storybook -- --smoke-test
yarn storybook --smoke-test
docs:
<<: *defaults
steps:
- checkout
- restore_cache:
keys:
- root-dependencies-{{ checksum "package.json" }}
- root-dependencies-
- dependencies-{{ checksum "yarn.lock" }}
- dependencies-
- run:
name: "Install root dependencies"
name: "Install latest yarn version"
command: |
curl -o- -L https://yarnpkg.com/install.sh | bash -s
- run:
name: "Install dependencies"
command: |
yarn install
- run:
name: "Bootstrapping"
command: |
yarn bootstrap -- --docs
yarn bootstrap --docs
- run:
name: "Running docs"
command: |
@ -128,10 +130,14 @@ jobs:
- checkout
- restore_cache:
keys:
- root-dependencies-{{ checksum "package.json" }}
- root-dependencies-
- dependencies-{{ checksum "yarn.lock" }}
- dependencies-
- run:
name: "Install root dependencies"
name: "Install latest yarn version"
command: |
curl -o- -L https://yarnpkg.com/install.sh | bash -s
- run:
name: "Install dependencies"
command: |
yarn install
- run:
@ -144,21 +150,85 @@ jobs:
- checkout
- restore_cache:
keys:
- root-dependencies-{{ checksum "package.json" }}
- root-dependencies-
- dependencies-{{ checksum "yarn.lock" }}
- dependencies-
- run:
name: "Install root dependencies"
name: "Install latest yarn version"
command: |
curl -o- -L https://yarnpkg.com/install.sh | bash -s
- run:
name: "Install dependencies"
command: |
yarn install
- run:
name: "Bootstrapping"
command: |
yarn bootstrap -- --core --reactnative
yarn bootstrap --core --reactnative
- run:
name: "Unit testing"
command: |
yarn test -- --all --coverage --runInBand
yarn test --all --coverage --runInBand
yarn coverage
cli:
working_directory: /tmp/storybook
docker:
- image: andthensome/docker-node-rsync
environment:
BASH_ENV: ~/.bashrc
steps:
- checkout
- restore_cache:
keys:
- dependencies-{{ checksum "package.json" }}
- dependencies-
- run:
name: "Install latest yarn version"
command: |
curl -o- -L https://yarnpkg.com/install.sh | bash -s
- run:
name: "Install dependencies"
command: |
yarn install
- run:
name: "Bootstrapping"
command: |
yarn bootstrap --core
- run:
name: "Testing CLI"
command: |
yarn test --cli
cli-latest-cra:
working_directory: /tmp/storybook
docker:
- image: andthensome/docker-node-rsync
environment:
BASH_ENV: ~/.bashrc
steps:
- checkout
- restore_cache:
keys:
- dependencies-{{ checksum "package.json" }}
- dependencies-
- run:
name: "Install latest yarn version"
command: |
curl -o- -L https://yarnpkg.com/install.sh | bash -s
- run:
name: "Install dependencies"
command: |
yarn install
- run:
name: "Bootstrapping"
command: |
yarn bootstrap --core
- run:
name: "Updating fixtures"
command: |
yarn update-cli-fixtures
- run:
name: "Testing CLI"
command: |
yarn test --cli
deploy:
<<: *defaults
steps:
@ -170,16 +240,17 @@ workflows:
version: 2
build_accept_deploy:
jobs:
- validate
- build
- example-kitchen-sinks
- example-react-native
- docs
- lint
- unit-test
- cli
- cli-latest-cra
# - deploy:
# type: approval
# requires:
# - lint
# - unit-test
# - docs
# - docs

2
.eslintignore
View File

@ -5,7 +5,7 @@ node_modules
addons/**/example/**
app/**/demo/**
docs/public
lib/cli/test
*.bundle.js
*.js.map

1
.gitignore vendored
View File

@ -2,6 +2,7 @@ node_modules
*.log
.idea
.vscode
*.sw*
npm-shrinkwrap.json
dist
.tern-port

50
CHANGELOG.md
View File

@ -1,3 +1,53 @@
# 3.3.0-alpha.0
2017-September-06
#### Features
- Viewport addon: simulate device sizes in preview window [#1753](https://github.com/storybooks/storybook/pull/1753)
- CLI: Add codemod for deprecated addon-links and addon-actions from app [#1368](https://github.com/storybooks/storybook/pull/1368)
- Info addon: More detailed props table [#1485](https://github.com/storybooks/storybook/pull/1485)
- React native: Add accessibility labels to OnDeviceUI [#1780](https://github.com/storybooks/storybook/pull/1780)
- Stories panel: Stories on each hierarchy level [#1763](https://github.com/storybooks/storybook/pull/1763)
- Storyshots: Generate snapshot per story file [#1584](https://github.com/storybooks/storybook/pull/1584)
- CLI: Add support for Vue projects using Nuxt [#1794](https://github.com/storybooks/storybook/pull/1794)
#### Bug Fixes
- Import chunks/assets in correct order using HtmlWebpackPlugin [#1775](https://github.com/storybooks/storybook/pull/1775)
- Fix preview scrolling [#1782](https://github.com/storybooks/storybook/pull/1782)
- Height aligned 2 buttons in manager's header [#1769](https://github.com/storybooks/storybook/pull/1769)
- Search box: make found options selectable with click [#1697](https://github.com/storybooks/storybook/pull/1697)
- Info addon: Fix Docgen in static builds [#1725](https://github.com/storybooks/storybook/pull/1725)
- Knobs: allow arrays in object knob proptypes [#1701](https://github.com/storybooks/storybook/pull/1701)
#### Documentation
- Improve linkTo documentation [#1793](https://github.com/storybooks/storybook/pull/1793)
- Add carbon to examples page [#1764](https://github.com/storybooks/storybook/pull/1764)
- Minor grammar fixes and clarification to Vue documentation [#1756](https://github.com/storybooks/storybook/pull/1756)
- Fix incorrect yarn command in docs [#1758](https://github.com/storybooks/storybook/pull/1758)
- Add storybook-chrome-screenshot to addon gallery [#1761](https://github.com/storybooks/storybook/pull/1761)
- Fixing typo on VueJS withNotes Example [#1787](https://github.com/storybooks/storybook/pull/1787)
#### Maintenance
- Deprecate confusing option names [#1692](https://github.com/storybooks/storybook/pull/1692)
- A CLI for running specific tests suites, like bootstrap CLI [#1752](https://github.com/storybooks/storybook/pull/1752)
- Remove check for sender on channel. [#1407](https://github.com/storybooks/storybook/pull/1407)
- Use yarn instead of NPM [#1703](https://github.com/storybooks/storybook/pull/1703)
- Add config for dependencies.io [#1770](https://github.com/storybooks/storybook/pull/1770)
- Added addon-knobs to crna and vanilla react native. [#1636](https://github.com/storybooks/storybook/pull/1636)
- Fixed Jest warnings [#1744](https://github.com/storybooks/storybook/pull/1744)
- Smoke test master [#1801](https://github.com/storybooks/storybook/pull/1801)
#### Dependency Upgrades
- Upgrade root dependencies and sync with packages [#1802](https://github.com/storybooks/storybook/pull/1802)
- Update jest to the latest version 🚀 [#1799](https://github.com/storybooks/storybook/pull/1799)
- Update eslint-plugin-jest to the latest version 🚀 [#1795](https://github.com/storybooks/storybook/pull/1795)
- Update lerna to the latest version 🚀 [#1768](https://github.com/storybooks/storybook/pull/1768)
# 3.2.9
2017-August-26

30
CONTRIBUTING.md
View File

@ -4,7 +4,7 @@ Thanks for your interest in improving Storybook! We are a community-driven proje
Please review this document to help to streamline the process and save everyone's precious time.
This guide assumes you're using `yarn` as package manager. You may have some success using `npm` as well, but there are chances you'll get wrong versions of root dependencies in that case (we only commit `yarn.lock` to the repo).
This repo uses yarn workspaces, so you should `yarn@1.0.0` or higher as package manager. See [installation guide](<>).
## Issues
@ -13,7 +13,7 @@ No software is bug free. So, if you got an issue, follow these steps:
- Search the [issue list](https://github.com/storybooks/storybook/issues?utf8=%E2%9C%93&q=) for current and old issues.
- If you find an existing issue, please UPVOTE the issue by adding a "thumbs-up reaction". We use this to help prioritize issues!
- If none of that is helping, create an issue with with following information:
- Clear title (make is shorter if possible).
- Clear title (shorter is better).
- Describe the issue in clear language.
- Share error logs, screenshots and etc.
- To speed up the issue fixing process, send us a sample repo with the issue you faced:
@ -35,7 +35,7 @@ The bootstrap command will ask which sections of the codebase you want to bootst
You can also pick directly from CLI:
yarn bootstrap -- --core
yarn bootstrap --core
#### 2a. Run unit tests
@ -52,12 +52,26 @@ _Note that in order to run the tests fro ReactNative, you must have bootstrapped
You can also pick suites from CLI:
```sh
yarn test -- --core
yarn test --core
```
In order to run ALL unit tests, you must have bootstrapped the react-native
#### 2b. Link `storybook` and any other required dependencies:
#### 2b. Run e2e tests for CLI
If you made any changes to `lib/cli` package, the easiest way to verify that it doesn't break anything is to run e2e tests:
yarn test --cli
This will run a bash script located at `lib/cli/test/run_tests.sh`. It will copy the contents of `fixtures` into a temporary `run` directory, run `getstorybook` in each of the subdirectories, and check that storybook starts successfully using `yarn storybook --smoke-test`.
After that, the `run` directory content will be compared with `snapshots`. You can update the snapshots by passing an `--update` flag:
yarn test --cli --update
In that case, please check the git diff before commiting to make sure it only contains the intended changes.
#### 2c. Link `storybook` and any other required dependencies:
If you want to test your own existing project using the github version of storybook, you need to `link` the packages you use in your project.
@ -224,7 +238,7 @@ git status
# clean out extra files & build all the packages
# WARNING: destructive if you have extra files lying around!
yarn bootstrap -- --reset --all
yarn bootstrap --reset --all
```
From here there are different procedures for prerelease (e.g. alpha/beta/rc) and proper release.
@ -235,7 +249,7 @@ From here there are different procedures for prerelease (e.g. alpha/beta/rc) and
```sh
# publish and tag the release
yarn run publish -- --concurrency 1 --npm-tag=alpha
yarn run publish --concurrency 1 --npm-tag=alpha
# push the tags
git push --tags
@ -245,7 +259,7 @@ git push --tags
```sh
# publish but don't commit to git
yarn publish -- --concurrency 1 --skip-git
yarn run publish --concurrency 1 --skip-git
# Update `CHANGELOG.md`
# - Edit PR titles/labels on github until output is good

4
README.md
View File

@ -108,8 +108,8 @@ We welcome contributions to Storybook!
- `yarn lint:js` - will check js
- `yarn lint:md` - will check markdown + code samples
- `yarn lint:js -- --fix` - will automatically fix js
- `yarn lint:md -- -o` - will automatically fix markdown
- `yarn lint:js --fix` - will automatically fix js
- `yarn lint:md -o` - will automatically fix markdown
#### `yarn test`

6
addons/actions/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-actions",
"version": "3.2.6",
"version": "3.3.0-alpha.0",
"description": "Action Logger addon for storybook",
"keywords": [
"storybook"
@ -17,11 +17,11 @@
},
"scripts": {
"deploy-storybook": "storybook-to-ghpages",
"prepublish": "node ../../scripts/prepublish.js",
"prepare": "node ../../scripts/prepare.js",
"storybook": "start-storybook -p 9001"
},
"dependencies": {
"@storybook/addons": "^3.2.6",
"@storybook/addons": "^3.3.0-alpha.0",
"deep-equal": "^1.0.1",
"json-stringify-safe": "^5.0.1",
"prop-types": "^15.5.10",

16
addons/actions/src/components/ActionLogger/index.js
View File

@ -5,20 +5,14 @@ import style from './style';
class ActionLogger extends Component {
getActionData() {
return this.props.actions.map((action, i) => this.renderAction(action, i));
return this.props.actions.map(action => this.renderAction(action));
}
renderAction(action) {
const counter = (
<div style={style.counter}>
{action.count}
</div>
);
const counter = <div style={style.counter}>{action.count}</div>;
return (
<div key={action.id} style={style.action}>
<div style={style.countwrap}>
{action.count > 1 && counter}
</div>
<div style={style.countwrap}>{action.count > 1 && counter}</div>
<div style={style.inspector}>
<Inspector
showNonenumerable
@ -33,9 +27,7 @@ class ActionLogger extends Component {
render() {
return (
<div style={style.wrapper}>
<pre style={style.actions}>
{this.getActionData()}
</pre>
<pre style={style.actions}>{this.getActionData()}</pre>
<button style={style.button} onClick={this.props.onClear}>
CLEAR
</button>

4
addons/centered/package.json
View File

@ -1,12 +1,12 @@
{
"name": "@storybook/addon-centered",
"version": "3.2.7",
"version": "3.3.0-alpha.0",
"description": "Storybook decorator to center components",
"license": "MIT",
"author": "Muhammed Thanish <mnmtanish@gmail.com>",
"main": "dist/index.js",
"scripts": {
"prepublish": "node ../../scripts/prepublish.js"
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"global": "^4.3.2"

4
addons/centered/src/react.js vendored
View File

@ -19,9 +19,7 @@ const innerStyle = {
export default function(storyFn) {
return (
<div style={style}>
<div style={innerStyle}>
{storyFn()}
</div>
<div style={innerStyle}>{storyFn()}</div>
</div>
);
}

10
addons/comments/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-comments",
"version": "3.2.8",
"version": "3.3.0-alpha.0",
"description": "Comments addon for Storybook",
"keywords": [
"storybook"
@ -16,14 +16,14 @@
"url": "https://github.com/storybooks/storybook.git"
},
"scripts": {
"prepublish": "node ../../scripts/prepublish.js",
"prepare": "node ../../scripts/prepare.js",
"publish-storybook": "bash .scripts/publish_storybook.sh",
"storybook": "start-storybook -p 3006",
"storybook-local": "STORYBOOK_CLOUD_SERVER='http://localhost:3003/graphql' start-storybook -p 9010",
"storybook-remote": "start-storybook -p 3006"
},
"dependencies": {
"@storybook/addons": "^3.2.6",
"@storybook/addons": "^3.3.0-alpha.0",
"babel-runtime": "^6.23.0",
"deep-equal": "^1.0.1",
"events": "^1.1.1",
@ -38,8 +38,8 @@
"devDependencies": {
"@kadira/storybook-database-cloud": "*",
"@kadira/storybook-deployer": "*",
"@storybook/addon-actions": "^3.2.0",
"@storybook/react": "^3.2.8",
"@storybook/addon-actions": "^3.3.0-alpha.0",
"@storybook/react": "^3.3.0-alpha.0",
"git-url-parse": "^6.2.2",
"react": "^15.6.1",
"react-dom": "^15.6.1",

5
addons/comments/src/index.js
View File

@ -10,10 +10,11 @@ const buttonStyles = {
padding: '3px 10px',
};
const Button = ({ children, onClick, style = {} }) =>
const Button = ({ children, onClick, style = {} }) => (
<button style={{ ...buttonStyles, ...style }} onClick={onClick}>
{children}
</button>;
</button>
);
Button.defaultProps = {
onClick: () => {},

12
addons/comments/src/manager/components/CommentItem/index.js
View File

@ -59,16 +59,10 @@ export default class CommentItem extends Component {
</div>
<div className="comment-content" style={style.commentContent}>
<div style={style.commentHead}>
<span style={style.commentUser}>
{comment.user.name}
</span>
<span style={style.commentTime}>
{time}
</span>
<span style={style.commentUser}>{comment.user.name}</span>
<span style={style.commentTime}>{time}</span>
</div>
<span style={style.commentText}>
{body}
</span>
<span style={style.commentText}>{body}</span>
{showDelete ? this.renderDelete() : null}
</div>
</div>

4
addons/comments/src/manager/components/CommentList/index.js
View File

@ -37,14 +37,14 @@ export default class CommentList extends Component {
}}
style={style.wrapper}
>
{comments.map(comment =>
{comments.map(comment => (
<CommentItem
key={comment.id}
comment={comment}
ownComment={comment.userId === (this.props.user && this.props.user.id)}
deleteComment={() => this.props.deleteComment(comment.id)}
/>
)}
))}
</div>
);
}

50
addons/comments/src/manager/containers/CommentsPanel/dataStore.js
View File

@ -79,10 +79,12 @@ export default class DataStore {
// TODO: send a null and handle the loading part in the UI side.
this.eventStore.emit('loading', true);
this.fireComments([]);
this.loadUsers().then(() => this.loadComments()).then(() => {
this.eventStore.emit('loading', false);
return Promise.resolve(null);
});
this.loadUsers()
.then(() => this.loadComments())
.then(() => {
this.eventStore.emit('loading', false);
return Promise.resolve(null);
});
return this.currentStory;
}
@ -98,15 +100,18 @@ export default class DataStore {
if (!info) {
return null;
}
return this.db.getCollection('users').get(query, options).then(users => {
this.users = users.reduce((newUsers, user) => {
const usersObj = {
...newUsers,
};
usersObj[user.id] = user;
return usersObj;
}, {});
});
return this.db
.getCollection('users')
.get(query, options)
.then(users => {
this.users = users.reduce((newUsers, user) => {
const usersObj = {
...newUsers,
};
usersObj[user.id] = user;
return usersObj;
}, {});
});
});
}
@ -118,15 +123,18 @@ export default class DataStore {
if (!info) {
return null;
}
return this.db.getCollection('comments').get(query, options).then(comments => {
// add to cache
this.addToCache(currentStory, comments);
return this.db
.getCollection('comments')
.get(query, options)
.then(comments => {
// add to cache
this.addToCache(currentStory, comments);
// set comments only if we are on the relavant story
if (deepEquals(currentStory, this.currentStory)) {
this.fireComments(comments);
}
});
// set comments only if we are on the relavant story
if (deepEquals(currentStory, this.currentStory)) {
this.fireComments(comments);
}
});
});
}

16
addons/comments/src/stories/index.js
View File

@ -58,14 +58,14 @@ storiesOf('Button', module)
storiesOf('Components', module)
.add('CommentForm', () => <CommentForm addComment={action('addComment')} />)
.add('CommentList - No Comments', () => <CommentList comments={[]} />)
.add('CommentList - with comments', () =>
.add('CommentList - with comments', () => (
<CommentList user={userObj} comments={commentsList} deleteComment={action('deleteComment')} />
)
))
.add('CommentPanel - not loggedIn', () => <CommentsPanel />)
.add('CommentPanel - app not available', () =>
.add('CommentPanel - app not available', () => (
<CommentsPanel user={userObj} appNotAvailable={{}} />
)
.add('CommentPanel - loggedIn with no comments', () =>
))
.add('CommentPanel - loggedIn with no comments', () => (
<CommentsPanel
user={userObj}
loading={false}
@ -73,8 +73,8 @@ storiesOf('Components', module)
addComment={action('addComment')}
deleteComment={action('deleteComment')}
/>
)
.add('CommentPanel - loggedIn with has comments', () =>
))
.add('CommentPanel - loggedIn with has comments', () => (
<CommentsPanel
user={userObj}
loading={false}
@ -82,4 +82,4 @@ storiesOf('Components', module)
addComment={action('addComment')}
deleteComment={action('deleteComment')}
/>
);
));

6
addons/events/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-events",
"version": "3.2.6",
"version": "3.3.0-alpha.0",
"description": "Add events to your Storybook stories.",
"keywords": [
"addon",
@ -16,11 +16,11 @@
},
"scripts": {
"build-storybook": "build-storybook",
"prepublish": "node ../../scripts/prepublish.js",
"prepare": "node ../../scripts/prepare.js",
"storybook": "start-storybook -p 6006"
},
"dependencies": {
"@storybook/addons": "^3.2.6",
"@storybook/addons": "^3.3.0-alpha.0",
"babel-runtime": "^6.23.0",
"format-json": "^1.0.3",
"prop-types": "^15.5.10",

20
addons/events/src/components/Event.js
View File

@ -156,17 +156,15 @@ export default class Item extends Component {
value={this.state.payloadString}
onChange={this.onChange}
/>
{isTextAreaShowed
? <button style={styles.button} onClick={this.onToggleEditClick} title="Close editing">
❌
</button>
: <button
style={styles.button}
onClick={this.onToggleEditClick}
title="Edit event payload"
>
✏️
</button>}
{isTextAreaShowed ? (
<button style={styles.button} onClick={this.onToggleEditClick} title="Close editing">
❌
</button>
) : (
<button style={styles.button} onClick={this.onToggleEditClick} title="Edit event payload">
✏️
</button>
)}
</div>
);
}

5
addons/graphql/demo/index.js
View File

@ -44,6 +44,9 @@ const schema = new graphql.GraphQLSchema({
}),
});
express().use(cors()).use('/graphql', graphqlHTTP({ schema, pretty: true })).listen(3000);
express()
.use(cors())
.use('/graphql', graphqlHTTP({ schema, pretty: true }))
.listen(3000);
console.log('GraphQL server running on http://localhost:3000/graphql');

4
addons/graphql/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-graphql",
"version": "3.2.0",
"version": "3.3.0-alpha.0",
"description": "Storybook addon to display the GraphiQL IDE",
"keywords": [
"storybook"
@ -17,7 +17,7 @@
},
"scripts": {
"deploy-storybook": "storybook-to-ghpages",
"prepublish": "node ../../scripts/prepublish.js",
"prepare": "node ../../scripts/prepare.js",
"storybook": "start-storybook -p 9001"
},
"dependencies": {

6
addons/graphql/src/components/FullScreen/index.js
View File

@ -3,11 +3,7 @@ import PropTypes from 'prop-types';
import style from './style';
export default function FullScreen(props) {
return (
<div style={style.wrapper}>
{props.children}
</div>
);
return <div style={style.wrapper}>{props.children}</div>;
}
FullScreen.defaultProps = { children: null };

5
addons/graphql/src/preview.js
View File

@ -28,9 +28,10 @@ export function setupGraphiQL(config) {
return (_query, variables = '{}') => {
const query = reIndentQuery(_query);
const fetcher = config.fetcher || getDefautlFetcher(config.url);
return () =>
return () => (
<FullScreen>
<GraphiQL query={query} variables={variables} fetcher={fetcher} />
</FullScreen>;
</FullScreen>
);
};
}

5
addons/info/README.md
View File

@ -143,7 +143,7 @@ setAddon(infoAddon);
### React Docgen Integration
React Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during compile time.
React Docgen is included as part of the @storybook/react package through the use of `babel-plugin-react-docgen` during babel compile time.
When rendering a story with a React component commented in this supported format, the Addon Info prop table will display the prop's comment in the description column.
```js
@ -175,8 +175,7 @@ DocgenButton.propTypes = {
export default DocgenButton;
```
Storybook Info Addon should now render all the correct types for your component.
Comments above flow types are also supported. Storybook Info Addon should now render all the correct types for your component if the PropTypes are in the same file as the React component.
## The FAQ

8
addons/info/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-info",
"version": "3.2.9",
"version": "3.3.0-alpha.0",
"description": "A Storybook addon to show additional information for your stories.",
"license": "MIT",
"main": "dist/index.js",
@ -9,13 +9,13 @@
"url": "https://github.com/storybooks/storybook.git"
},
"scripts": {
"prepublish": "node ../../scripts/prepublish.js",
"prepare": "node ../../scripts/prepare.js",
"publish-storybook": "bash .scripts/publish_storybook.sh",
"storybook": "start-storybook -p 9010"
},
"dependencies": {
"@storybook/addons": "^3.2.6",
"@storybook/components": "^3.2.7",
"@storybook/addons": "^3.3.0-alpha.0",
"@storybook/components": "^3.3.0-alpha.0",
"babel-runtime": "^6.23.0",
"global": "^4.3.2",
"marksy": "^2.0.0",

20
addons/info/src/components/Node.js
View File

@ -66,9 +66,7 @@ export default function Node(props) {
if (!name) {
return (
<div style={containerStyle}>
<span style={tagStyle}>
{text}
</span>
<span style={tagStyle}>{text}</span>
</div>
);
}
@ -77,9 +75,7 @@ export default function Node(props) {
if (!children) {
return (
<div style={containerStyle}>
<span style={tagStyle}>
&lt;{name}
</span>
<span style={tagStyle}>&lt;{name}</span>
<Props
node={node}
singleLine
@ -100,9 +96,7 @@ export default function Node(props) {
return (
<div>
<div style={containerStyleCopy}>
<span style={tagStyle}>
&lt;{name}
</span>
<span style={tagStyle}>&lt;{name}</span>
<Props
node={node}
maxPropsIntoLine={maxPropsIntoLine}
@ -112,7 +106,7 @@ export default function Node(props) {
/>
<span style={tagStyle}>&gt;</span>
</div>
{React.Children.map(children, childElement =>
{React.Children.map(children, childElement => (
<Node
node={childElement}
depth={depth + 1}
@ -121,11 +115,9 @@ export default function Node(props) {
maxPropArrayLength={maxPropArrayLength}
maxPropStringLength={maxPropStringLength}
/>
)}
))}
<div style={containerStyleCopy}>
<span style={tagStyle}>
&lt;/{name}&gt;
</span>
<span style={tagStyle}>&lt;/{name}&gt;</span>
</div>
</div>
);

104
addons/info/src/components/PropTable.js
View File

@ -2,7 +2,10 @@
import PropTypes from 'prop-types';
import React from 'react';
import { Table, Td, Th } from '@storybook/components';
import PropVal from './PropVal';
import PrettyPropType from './types/PrettyPropType';
const PropTypesMap = new Map();
@ -13,41 +16,10 @@ Object.keys(PropTypes).forEach(typeName => {
PropTypesMap.set(type.isRequired, typeName);
});
const stylesheet = {
propTable: {
marginLeft: -10,
borderSpacing: '10px 5px',
borderCollapse: 'separate',
},
};
const isNotEmpty = obj => obj && obj.props && Object.keys(obj.props).length > 0;
const renderDocgenPropType = propType => {
if (!propType) {
return 'unknown';
}
const name = propType.name;
switch (name) {
case 'arrayOf':
return `${propType.value.name}[]`;
case 'instanceOf':
return propType.value;
case 'union':
return propType.raw;
case 'signature':
return propType.raw;
default:
return name;
}
};
const hasDocgen = type => isNotEmpty(type.__docgenInfo);
const boolToString = value => (value ? 'yes' : 'no');
const propsFromDocgen = type => {
const props = {};
const docgenInfoProps = type.__docgenInfo.props;
@ -59,8 +31,8 @@ const propsFromDocgen = type => {
props[property] = {
property,
propType: renderDocgenPropType(propType),
required: boolToString(docgenInfoProp.required),
propType,
required: docgenInfoProp.required,
description: docgenInfoProp.description,
defaultValue: defaultValueDesc.value,
};
@ -75,21 +47,15 @@ const propsFromPropTypes = type => {
if (type.propTypes) {
Object.keys(type.propTypes).forEach(property => {
const typeInfo = type.propTypes[property];
const required = boolToString(typeInfo.isRequired === undefined);
const description =
type.__docgenInfo && type.__docgenInfo.props && type.__docgenInfo.props[property]
? type.__docgenInfo.props[property].description
: null;
const required = typeInfo.isRequired === undefined;
const docgenInfo =
type.__docgenInfo && type.__docgenInfo.props && type.__docgenInfo.props[property];
const description = docgenInfo ? docgenInfo.description : null;
let propType = PropTypesMap.get(typeInfo) || 'other';
if (propType === 'other') {
if (
type.__docgenInfo &&
type.__docgenInfo.props &&
type.__docgenInfo.props[property] &&
type.__docgenInfo.props[property].type
) {
propType = type.__docgenInfo.props[property].type.name;
if (docgenInfo && docgenInfo.type) {
propType = docgenInfo.type.name;
}
}
@ -137,40 +103,38 @@ export default function PropTable(props) {
};
return (
<table style={stylesheet.propTable}>
<Table>
<thead>
<tr>
<th>property</th>
<th>propType</th>
<th>required</th>
<th>default</th>
<th>description</th>
<Th bordered>property</Th>
<Th bordered>propType</Th>
<Th bordered>required</Th>
<Th bordered>default</Th>
<Th bordered>description</Th>
</tr>
</thead>
<tbody>
{array.map(row =>
{array.map(row => (
<tr key={row.property}>
<td>
<Td bordered code>
{row.property}
</td>
<td>
{row.propType}
</td>
<td>
{row.required}
</td>
<td>
{row.defaultValue === undefined
? '-'
: <PropVal val={row.defaultValue} {...propValProps} />}
</td>
<td>
{row.description}
</td>
</Td>
<Td bordered code>
<PrettyPropType propType={row.propType} />
</Td>
<Td bordered>{row.required ? 'yes' : '-'}</Td>
<Td bordered>
{row.defaultValue === undefined ? (
'-'
) : (
<PropVal val={row.defaultValue} {...propValProps} />
)}
</Td>
<Td bordered>{row.description}</Td>
</tr>
)}
))}
</tbody>
</table>
</Table>
);
}

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

@ -48,22 +48,14 @@ function previewArray(val, maxPropArrayLength) {
} else {
delete items[`c${val.length - 1}`];
}
return (
<span style={valueStyles.array}>
[{createFragment(items)}]
</span>
);
return <span style={valueStyles.array}>[{createFragment(items)}]</span>;
}
function previewObject(val, maxPropObjectKeys) {
const names = Object.keys(val);
const items = {};
names.slice(0, maxPropObjectKeys).forEach((name, i) => {
items[`k${i}`] = (
<span style={valueStyles.attr}>
{name}
</span>
);
items[`k${i}`] = <span style={valueStyles.attr}>{name}</span>;
items[`c${i}`] = ': ';
items[`v${i}`] = <PropVal val={val[name]} />;
items[`m${i}`] = ', ';
@ -89,31 +81,19 @@ export default function PropVal(props) {
let content = null;
if (typeof val === 'number') {
content = (
<span style={valueStyles.number}>
{val}
</span>
);
content = <span style={valueStyles.number}>{val}</span>;
} else if (typeof val === 'string') {
if (val.length > maxPropStringLength) {
val = `${val.slice(0, maxPropStringLength)}…`;
}
content = (
<span style={valueStyles.string}>
"{val}"
</span>
);
content = <span style={valueStyles.string}>"{val}"</span>;
braceWrap = false;
} else if (typeof val === 'boolean') {
content = <span style={valueStyles.bool}>{`${val}`}</span>;
} else if (Array.isArray(val)) {
content = previewArray(val, maxPropArrayLength);
} else if (typeof val === 'function') {
content = (
<span style={valueStyles.func}>
{val.name ? `${val.name}()` : 'anonymous()'}
</span>
);
content = <span style={valueStyles.func}>{val.name ? `${val.name}()` : 'anonymous()'}</span>;
} else if (!val) {
content = <span style={valueStyles.empty}>{`${val}`}</span>;
} else if (typeof val !== 'object') {
@ -130,11 +110,7 @@ export default function PropVal(props) {
if (!braceWrap) return content;
return (
<span>
{content}
</span>
);
return <span>{content}</span>;
}
PropVal.defaultProps = {

27
addons/info/src/components/Props.js
View File

@ -32,16 +32,16 @@ export default function Props(props) {
names.forEach((name, i) => {
items.push(
<span key={name}>
{breakIntoNewLines
? <span>
<br />&nbsp;&nbsp;
</span>
: ' '}
<span style={propNameStyle}>
{name}
</span>
{breakIntoNewLines ? (
<span>
<br />&nbsp;&nbsp;
</span>
) : (
' '
)}
<span style={propNameStyle}>{name}</span>
{/* Use implicit true: */}
{(!nodeProps[name] || typeof nodeProps[name] !== 'boolean') &&
{(!nodeProps[name] || typeof nodeProps[name] !== 'boolean') && (
<span>
=
<span style={propValueStyle}>
@ -52,18 +52,15 @@ export default function Props(props) {
maxPropStringLength={maxPropStringLength}
/>
</span>
</span>}
</span>
)}
{i === names.length - 1 && (breakIntoNewLines ? <br /> : endingSpace)}
</span>
);
});
return (
<span>
{items}
</span>
);
return <span>{items}</span>;
}
Props.defaultProps = {

47
addons/info/src/components/Story.js
View File

@ -116,11 +116,7 @@ export default class Story extends React.Component {
}
_renderStory() {
return (
<div style={this.state.stylesheet.infoStory}>
{this.props.children}
</div>
);
return <div style={this.state.stylesheet.infoStory}>{this.props.children}</div>;
}
_renderInline() {
@ -144,12 +140,11 @@ export default class Story extends React.Component {
const infoHeader = this._getInfoHeader();
return (
infoHeader &&
<div style={this.state.stylesheet.infoPage}>
<div style={this.state.stylesheet.infoBody}>
{infoHeader}
infoHeader && (
<div style={this.state.stylesheet.infoPage}>
<div style={this.state.stylesheet.infoBody}>{infoHeader}</div>
</div>
</div>
)
);
}
@ -176,9 +171,7 @@ export default class Story extends React.Component {
return (
<div>
<div style={this.state.stylesheet.children}>
{this.props.children}
</div>
<div style={this.state.stylesheet.children}>{this.props.children}</div>
<a style={linkStyle} onClick={openOverlay} role="button" tabIndex="0">
Show Info
</a>
@ -207,12 +200,8 @@ export default class Story extends React.Component {
return (
<div style={this.state.stylesheet.header.body}>
<h1 style={this.state.stylesheet.header.h1}>
{this.props.context.kind}
</h1>
<h2 style={this.state.stylesheet.header.h2}>
{this.props.context.story}
</h2>
<h1 style={this.state.stylesheet.header.h1}>{this.props.context.kind}</h1>
<h2 style={this.state.stylesheet.header.h2}>{this.props.context.story}</h2>
</div>
);
}
@ -240,11 +229,7 @@ export default class Story extends React.Component {
padding = matches[0].length;
}
const source = lines.map(s => s.slice(padding)).join('\n');
return (
<div style={this.state.stylesheet.infoContent}>
{this.marksy(source).tree}
</div>
);
return <div style={this.state.stylesheet.infoContent}>{this.marksy(source).tree}</div>;
}
_getComponentDescription() {
@ -253,11 +238,7 @@ export default class Story extends React.Component {
if (Object.keys(STORYBOOK_REACT_CLASSES).length) {
Object.keys(STORYBOOK_REACT_CLASSES).forEach(key => {
if (STORYBOOK_REACT_CLASSES[key].name === this.props.context.kind) {
retDiv = (
<div>
{STORYBOOK_REACT_CLASSES[key].docgenInfo.description}
</div>
);
retDiv = <div>{STORYBOOK_REACT_CLASSES[key].docgenInfo.description}</div>;
}
});
}
@ -281,7 +262,7 @@ export default class Story extends React.Component {
<div>
<h1 style={this.state.stylesheet.source.h1}>Story Source</h1>
<Pre>
{React.Children.map(this.props.children, (root, idx) =>
{React.Children.map(this.props.children, (root, idx) => (
<Node
key={idx}
node={root}
@ -291,7 +272,7 @@ export default class Story extends React.Component {
maxPropArrayLength={maxPropArrayLength}
maxPropStringLength={maxPropStringLength}
/>
)}
))}
</Pre>
</div>
);
@ -346,7 +327,7 @@ export default class Story extends React.Component {
array.sort((a, b) => (a.displayName || a.name) > (b.displayName || b.name));
const { maxPropObjectKeys, maxPropArrayLength, maxPropStringLength } = this.props;
const propTables = array.map(type =>
const propTables = array.map(type => (
<div key={type.displayName || type.name}>
<h2 style={this.state.stylesheet.propTableHead}>
"{type.displayName || type.name}" Component
@ -358,7 +339,7 @@ export default class Story extends React.Component {
maxPropStringLength={maxPropStringLength}
/>
</div>
);
));
if (!propTables || propTables.length === 0) {
return null;

12
addons/info/src/components/markdown/code.js
View File

@ -61,11 +61,7 @@ export function Pre(props) {
lineHeight: 1.5,
overflowX: 'scroll',
};
return (
<pre style={style}>
{props.children}
</pre>
);
return <pre style={style}>{props.children}</pre>;
}
Pre.propTypes = { children: PropTypes.node };
@ -78,11 +74,7 @@ export function Blockquote(props) {
borderLeft: '8px solid #fafafa',
padding: '1rem',
};
return (
<blockquote style={style}>
{props.children}
</blockquote>
);
return <blockquote style={style}>{props.children}</blockquote>;
}
Blockquote.propTypes = { children: PropTypes.node };

18
addons/info/src/components/markdown/text.js
View File

@ -10,11 +10,7 @@ export function P(props) {
...baseFonts,
fontSize: '15px',
};
return (
<p style={style}>
{props.children}
</p>
);
return <p style={style}>{props.children}</p>;
}
P.defaultProps = defaultProps;
@ -25,11 +21,7 @@ export function LI(props) {
...baseFonts,
fontSize: '15px',
};
return (
<li style={style}>
{props.children}
</li>
);
return <li style={style}>{props.children}</li>;
}
LI.defaultProps = defaultProps;
@ -40,11 +32,7 @@ export function UL(props) {
...baseFonts,
fontSize: '15px',
};
return (
<ul style={style}>
{props.children}
</ul>
);
return <ul style={style}>{props.children}</ul>;
}
UL.defaultProps = defaultProps;

20
addons/info/src/components/types/ArrayOf.js Normal file
View File

@ -0,0 +1,20 @@
import React from 'react';
import PrettyPropType from './PrettyPropType';
import { TypeInfo } from './proptypes';
const ArrayOf = ({ propType }) => (
<span>
<span>[</span>
<span>
<PrettyPropType propType={propType.value} />
</span>
<span>]</span>
</span>
);
ArrayOf.propTypes = {
propType: TypeInfo.isRequired,
};
export default ArrayOf;

8
addons/info/src/components/types/Enum.js Normal file
View File

@ -0,0 +1,8 @@
import React from 'react';
import { TypeInfo } from './proptypes';
const Enum = ({ propType }) => <span>{propType.value.map(({ value }) => value).join(' | ')}</span>;
Enum.propTypes = {
propType: TypeInfo.isRequired,
};

10
addons/info/src/components/types/InstanceOf.js Normal file
View File

@ -0,0 +1,10 @@
import React from 'react';
import { TypeInfo } from './proptypes';
const InstanceOf = ({ propType }) => <span>{propType.value}</span>;
InstanceOf.propTypes = {
propType: TypeInfo.isRequired,
};
export default InstanceOf;

5
addons/info/src/components/types/Object.js Normal file
View File

@ -0,0 +1,5 @@
import React from 'react';
const ObjectType = () => <span>{'{}'}</span>;
export default ObjectType;

18
addons/info/src/components/types/ObjectOf.js Normal file
View File

@ -0,0 +1,18 @@
import React from 'react';
import PrettyPropType from './PrettyPropType';
import { TypeInfo } from './proptypes';
const ObjectOf = ({ propType }) => (
<span>
{'{[<key>]: '}
<PrettyPropType propType={propType.value} />
{'}'}
</span>
);
ObjectOf.propTypes = {
propType: TypeInfo.isRequired,
};
export default ObjectOf;

5
addons/info/src/components/types/ObjectType.js Normal file
View File

@ -0,0 +1,5 @@
import React from 'react';
const ObjectType = () => <span>{'{}'}</span>;
export default ObjectType;

10
addons/info/src/components/types/OneOf.js Normal file
View File

@ -0,0 +1,10 @@
import React from 'react';
import { TypeInfo } from './proptypes';
const OneOf = ({ propType }) => <span>{propType.value.map(({ value }) => value).join(' | ')}</span>;
OneOf.propTypes = {
propType: TypeInfo.isRequired,
};
export default OneOf;

25
addons/info/src/components/types/OneOfType.js Normal file
View File

@ -0,0 +1,25 @@
import React from 'react';
import PrettyPropType from './PrettyPropType';
import { TypeInfo } from './proptypes';
const OneOfType = ({ propType }) => {
const length = propType.value.length;
return (
<span>
{propType.value
.map((value, i) => [
<PrettyPropType
key={`${value.name}${value.value ? `-${value.value}` : ''}`}
propType={value}
/>,
i < length - 1 ? <span> | </span> : null,
])
.reduce((acc, tuple) => acc.concat(tuple), [])}
</span>
);
};
OneOfType.propTypes = {
propType: TypeInfo.isRequired,
};
export default OneOfType;

57
addons/info/src/components/types/PrettyPropType.js Normal file
View File

@ -0,0 +1,57 @@
import PropTypes from 'prop-types';
import React from 'react';
import ObjectType from './ObjectType';
import Shape from './Shape';
import OneOfType from './OneOfType';
import ArrayOf from './ArrayOf';
import ObjectOf from './ObjectOf';
import OneOf from './OneOf';
import InstanceOf from './InstanceOf';
import Signature from './Signature';
import { TypeInfo } from './proptypes';
// propType -> Component map - these are a bit more complex prop types to display
const propTypeComponentMap = new Map([
['shape', Shape],
['union', OneOfType],
['arrayOf', ArrayOf],
['objectOf', ObjectOf],
// Might be overkill to have below proptypes as separate components *shrug*
['object', ObjectType],
['enum', OneOf],
['instanceOf', InstanceOf],
['signature', Signature],
]);
const PrettyPropType = props => {
const { propType, depth } = props;
if (!propType) {
return <span>unknown</span>;
}
const { name } = propType || {};
if (propTypeComponentMap.has(name)) {
const Component = propTypeComponentMap.get(name);
return <Component propType={propType} depth={depth} />;
}
// Otherwise, propType does not have a dedicated component, display proptype name by default
return <span>{name}</span>;
};
PrettyPropType.displayName = 'PrettyPropType';
PrettyPropType.defaultProps = {
propType: null,
depth: 1,
};
PrettyPropType.propTypes = {
propType: TypeInfo,
depth: PropTypes.number.isRequired,
};
export default PrettyPropType;

31
addons/info/src/components/types/PropertyLabel.js Normal file
View File

@ -0,0 +1,31 @@
import PropTypes from 'prop-types';
import React from 'react';
const styles = {
hasProperty: {
whiteSpace: 'nowrap',
},
};
const PropertyLabel = ({ property, required }) => {
if (!property) return null;
return (
<span style={styles.hasProperty}>
{property}
{required ? '' : '?'}:{' '}
</span>
);
};
PropertyLabel.propTypes = {
property: PropTypes.string,
required: PropTypes.bool,
};
PropertyLabel.defaultProps = {
property: '',
required: false,
};
export default PropertyLabel;

81
addons/info/src/components/types/Shape.js Normal file
View File

@ -0,0 +1,81 @@
import PropTypes from 'prop-types';
import React from 'react';
import { HighlightButton } from '@storybook/components';
import PrettyPropType from './PrettyPropType';
import PropertyLabel from './PropertyLabel';
import { TypeInfo } from './proptypes';
const MARGIN_SIZE = 15;
class Shape extends React.Component {
constructor(props) {
super(props);
this.state = {
minimized: false,
};
}
handleToggle = () => {
this.setState({
minimized: !this.state.minimized,
});
};
handleMouseEnter = () => {
this.setState({ hover: true });
};
handleMouseLeave = () => {
this.setState({ hover: false });
};
render() {
const { propType, depth } = this.props;
return (
<span>
<HighlightButton
onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave}
highlight={this.state.hover}
onClick={this.handleToggle}
>
{'{'}
</HighlightButton>
<HighlightButton onClick={this.handleToggle}>...</HighlightButton>
{!this.state.minimized &&
Object.keys(propType.value).map(childProperty => (
<div key={childProperty} style={{ marginLeft: depth * MARGIN_SIZE }}>
<PropertyLabel
property={childProperty}
required={propType.value[childProperty].required}
/>
<PrettyPropType depth={depth + 1} propType={propType.value[childProperty]} />
,
</div>
))}
<HighlightButton
onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave}
highlight={this.state.hover}
onClick={this.handleToggle}
>
{'}'}
</HighlightButton>
</span>
);
}
}
Shape.propTypes = {
propType: TypeInfo,
depth: PropTypes.number.isRequired,
};
Shape.defaultProps = {
propType: null,
};
export default Shape;

10
addons/info/src/components/types/Signature.js Normal file
View File

@ -0,0 +1,10 @@
import React from 'react';
import { TypeInfo } from './proptypes';
const Signature = ({ propType }) => <span>{propType.raw}</span>;
Signature.propTypes = {
propType: TypeInfo.isRequired,
};
export default Signature;

6
addons/info/src/components/types/proptypes.js Normal file
View File

@ -0,0 +1,6 @@
import PropTypes from 'prop-types';
export const TypeInfo = PropTypes.shape({
name: PropTypes.string,
value: PropTypes.any,
});

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

@ -60,11 +60,7 @@ function addInfo(storyFn, context, infoOptions) {
maxPropsIntoLine: options.maxPropsIntoLine,
maxPropStringLength: options.maxPropStringLength,
};
return (
<Story {...props}>
{storyFn(context)}
</Story>
);
return <Story {...props}>{storyFn(context)}</Story>;
}
export const withInfo = textOrOptions => {

5
addons/info/src/index.test.js
View File

@ -27,7 +27,7 @@ const testContext = { kind: 'addon_info', story: 'jest_test' };
const testOptions = { propTables: false };
describe('addon Info', () => {
const story = context =>
const story = context => (
<div>
It's a {context.story} story:
<TestComponent
@ -38,7 +38,8 @@ describe('addon Info', () => {
string={'seven'}
bool
/>
</div>;
</div>
);
const api = {
add: (name, fn) => fn(testContext),
};

70
addons/knobs/README.md
View File

@ -1,17 +1,20 @@
# Storybook Addon Knobs
[![Greenkeeper badge](https://badges.greenkeeper.io/storybooks/storybook.svg)](https://greenkeeper.io/)
[![Build Status](https://travis-ci.org/storybooks/storybook.svg?branch=master)](https://travis-ci.org/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://storybooks-slackin.herokuapp.com/badge.svg)](https://storybooks-slackin.herokuapp.com/)
Storybook Addon Knobs allow you to edit React props dynamically using the Storybook UI.
You can also use Knobs as a dynamic variable inside stories in [Storybook](https://storybook.js.org).
[![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)
This addon works with Storybook for:
[React](https://github.com/storybooks/storybook/tree/master/app/react).
[React Native](https://github.com/storybooks/storybook/tree/master/app/react-native).
[Vue](https://github.com/storybooks/storybook/tree/master/app/vue).
This is how Knobs look like:
@ -37,7 +40,7 @@ Now, write your stories with knobs.
```js
import { storiesOf } from '@storybook/react';
import { addonKnobs, text, boolean, number } from '@storybook/addon-knobs';
import { withKnobs, text, boolean, number } from '@storybook/addon-knobs/react';
const stories = storiesOf('Storybook Knobs', module);
@ -50,7 +53,7 @@ stories.add('with a button', () => (
<button disabled={boolean('Disabled', false)} >
{text('Label', 'Hello Button')}
</button>
))
));
const options = {};
// Knobs as dynamic variables.
@ -63,6 +66,20 @@ stories.add('as dynamic variables', addonKnobs(options)(() => {
}));
```
> In the case of Vue, use these imports:
>
> ```js
> import { storiesOf } from '@storybook/vue';
> import { withKnobs, text, boolean, number } from '@storybook/addon-knobs/vue';
> ```
>
> In the case of React-Native, use these imports:
>
> ```js
> import { storiesOf } from '@storybook/react-native';
> import { withKnobs, text, boolean, number } from '@storybook/addon-knobs/react';
> ```
You can see your Knobs in a Storybook panel as shown below.
![](docs/demo.png)
@ -90,7 +107,7 @@ Just like that, you can import any other following Knobs:
Allows you to get some text from the user.
```js
import { text } from '@storybook/addon-knobs';
import { text } from '@storybook/addon-knobs/react';
const label = 'Your Name';
const defaultValue = 'Arunoda Susiripala';
@ -103,7 +120,7 @@ const value = text(label, defaultValue);
Allows you to get a boolean value from the user.
```js
import { boolean } from '@storybook/addon-knobs';
import { boolean } from '@storybook/addon-knobs/react';
const label = 'Agree?';
const defaultValue = false;
@ -116,7 +133,7 @@ const value = boolean(label, defaultValue);
Allows you to get a number from the user.
```js
import { number } from '@storybook/addon-knobs';
import { number } from '@storybook/addon-knobs/react';
const label = 'Age';
const defaultValue = 78;
@ -129,7 +146,7 @@ const value = number(label, defaultValue);
Allows you to get a number from the user using a range slider.
```js
import { number } from '@storybook/addon-knobs';
import { number } from '@storybook/addon-knobs/react';
const label = 'Temperature';
const defaultValue = 73;
@ -148,7 +165,7 @@ const value = number(label, defaultValue, options);
Allows you to get a colour from the user.
```js
import { color } from '@storybook/addon-knobs';
import { color } from '@storybook/addon-knobs/react';
const label = 'Color';
const defaultValue = '#ff00ff';
@ -161,7 +178,7 @@ const value = color(label, defaultValue);
Allows you to get a JSON object or array from the user.
```js
import { object } from '@storybook/addon-knobs';
import { object } from '@storybook/addon-knobs/react';
const label = 'Styles';
const defaultValue = {
@ -178,7 +195,7 @@ const value = object(label, defaultValue);
Allows you to get an array of strings from the user.
```js
import { array } from '@storybook/addon-knobs';
import { array } from '@storybook/addon-knobs/react';
const label = 'Styles';
const defaultValue = ['Red']
@ -190,7 +207,7 @@ const value = array(label, defaultValue);
> By default it's a comma, but this can be override by passing a separator variable.
>
> ```js
> import { array } from '@storybook/addon-knobs';
> import { array } from '@storybook/addon-knobs/react';
>
> const label = 'Styles';
> const defaultValue = ['Red'];
@ -203,7 +220,7 @@ const value = array(label, defaultValue);
Allows you to get a value from a select box from the user.
```js
import { select } from '@storybook/addon-knobs';
import { select } from '@storybook/addon-knobs/react';
const label = 'Colors';
const options = {
@ -223,7 +240,7 @@ const value = select(label, options, defaultValue);
Allow you to get date (and time) from the user.
```js
import { date } from '@storybook/addon-knobs';
import { date } from '@storybook/addon-knobs/react';
const label = 'Event Date';
const defaultValue = new Date('Jan 20 2017');
@ -237,10 +254,17 @@ 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:
story.addDecorator(withKnobsOptions({
debounce: { wait: number, leading: boolean}, // Same as lodash debounce.
timestamps: true // Doesn't emit events while user is typing.
}));
```js
import { storiesOf } from '@storybook/react';
const stories = storiesOf('Storybook Knobs', module);
stories.addDecorator(withKnobsOptions({
debounce: { wait: number, leading: boolean}, // Same as lodash debounce.
timestamps: true // Doesn't emit events while user is typing.
}));
```
## Typescript

8
addons/knobs/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-knobs",
"version": "3.2.8",
"version": "3.3.0-alpha.0",
"description": "Storybook Addon Prop Editor Component",
"license": "MIT",
"main": "dist/index.js",
@ -9,13 +9,13 @@
"url": "https://github.com/storybooks/storybook.git"
},
"scripts": {
"prepublish": "node ../../scripts/prepublish.js",
"prepare": "node ../../scripts/prepare.js",
"publish-storybook": "bash .scripts/publish_storybook.sh",
"start": "./example/prepublish.sh",
"start": "./example/prepare.sh",
"storybook": "start-storybook -p 9010"
},
"dependencies": {
"@storybook/addons": "^3.2.6",
"@storybook/addons": "^3.3.0-alpha.0",
"babel-runtime": "^6.23.0",
"deep-equal": "^1.0.1",
"global": "^4.3.2",

1
addons/knobs/react.js vendored Normal file
View File

@ -0,0 +1 @@
module.exports = require('./dist/react');

55
addons/knobs/src/base.js Normal file
View File

@ -0,0 +1,55 @@
import KnobManager from './KnobManager';
export const manager = new KnobManager();
export function knob(name, options) {
return manager.knob(name, options);
}
export function text(name, value) {
return manager.knob(name, { type: 'text', value });
}
export function boolean(name, value) {
return manager.knob(name, { type: 'boolean', value });
}
export function number(name, value, options = {}) {
const defaults = {
range: false,
min: 0,
max: 10,
step: 1,
};
const mergedOptions = { ...defaults, ...options };
const finalOptions = {
...mergedOptions,
type: 'number',
value,
};
return manager.knob(name, finalOptions);
}
export function color(name, value) {
return manager.knob(name, { type: 'color', value });
}
export function object(name, value) {
return manager.knob(name, { type: 'object', value });
}
export function select(name, options, value) {
return manager.knob(name, { type: 'select', options, value });
}
export function array(name, value, separator = ',') {
return manager.knob(name, { type: 'array', value, separator });
}
export function date(name, value = new Date()) {
const proxyValue = value ? value.getTime() : null;
return manager.knob(name, { type: 'date', value: proxyValue });
}

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

@ -135,7 +135,9 @@ export default class Panel extends React.Component {
render() {
const { knobs } = this.state;
const knobsArray = Object.keys(knobs).filter(key => knobs[key].used).map(key => knobs[key]);
const knobsArray = Object.keys(knobs)
.filter(key => knobs[key].used)
.map(key => knobs[key]);
if (knobsArray.length === 0) {
return <div style={styles.noKnobs}>NO KNOBS</div>;

13
addons/knobs/src/components/__tests__/Array.js
View File

@ -15,4 +15,17 @@ describe('Array', () => {
wrapper.simulate('change', { target: { value: 'Fhishing,Skiing,Dancing' } });
expect(onChange).toHaveBeenCalledWith(['Fhishing', 'Skiing', 'Dancing']);
});
it('should change to an empty array when emptied', () => {
const onChange = jest.fn();
const wrapper = shallow(
<Array
onChange={onChange}
knob={{ name: 'passions', value: ['Fishing', 'Skiing'], separator: ',' }}
/>
);
wrapper.simulate('change', { target: { value: '' } });
expect(onChange).toHaveBeenCalledWith([]);
});
});

9
addons/knobs/src/components/types/Array.js
View File

@ -16,6 +16,13 @@ const styles = {
color: '#555',
};
function formatArray(value, separator) {
if (value === '') {
return [];
}
return value.split(separator);
}
class ArrayType extends React.Component {
render() {
const { knob, onChange } = this.props;
@ -27,7 +34,7 @@ class ArrayType extends React.Component {
}}
style={styles}
value={knob.value.join(knob.separator)}
onChange={e => onChange(e.target.value.split(knob.separator))}
onChange={e => onChange(formatArray(e.target.value, knob.separator))}
/>
);
}

5
addons/knobs/src/components/types/Color.js
View File

@ -76,7 +76,7 @@ class ColorType extends React.Component {
</div>
{conditionalRender(
displayColorPicker,
() =>
() => (
<div
style={styles.popover}
ref={e => {
@ -84,7 +84,8 @@ class ColorType extends React.Component {
}}
>
<SketchPicker color={knob.value} onChange={color => onChange(color.hex)} />
</div>,
</div>
),
() => null
)}
</div>

5
addons/knobs/src/components/types/Date/index.js
View File

@ -21,7 +21,7 @@ const customStyle = `
insertCss(style);
insertCss(customStyle);
const DateType = ({ knob, onChange }) =>
const DateType = ({ knob, onChange }) => (
<div>
<Datetime
id={knob.name}
@ -29,7 +29,8 @@ const DateType = ({ knob, onChange }) =>
type="date"
onChange={date => onChange(date.valueOf())}
/>
</div>;
</div>
);
DateType.defaultProps = {
knob: {},

6
addons/knobs/src/components/types/Select.js
View File

@ -24,11 +24,7 @@ class SelectType extends React.Component {
value: key,
};
return (
<option {...opts}>
{val}
</option>
);
return <option {...opts}>{val}</option>;
}
_options(values) {
let data = [];

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

@ -1,67 +1,22 @@
import { window } from 'global';
import deprecate from 'util-deprecate';
import addons from '@storybook/addons';
import KnobManager from './KnobManager';
import { vueHandler } from './vue';
import { reactHandler } from './react';
import { angularHandler } from './angular';
const manager = new KnobManager();
import { knob, text, boolean, number, color, object, array, date, manager } from './base';
export function knob(name, options) {
return manager.knob(name, options);
}
export { knob, text, boolean, number, color, object, array, date };
export function text(name, value) {
return manager.knob(name, { type: 'text', value });
}
deprecate(
() => {},
'Using @storybook/addon-knobs directly is discouraged, please use @storybook/addon-knobs/{{framework}}'
);
export function boolean(name, value) {
return manager.knob(name, { type: 'boolean', value });
}
export function number(name, value, options = {}) {
const defaults = {
range: false,
min: 0,
max: 10,
step: 1,
};
const mergedOptions = { ...defaults, ...options };
const finalOptions = {
...mergedOptions,
type: 'number',
value,
};
return manager.knob(name, finalOptions);
}
export function color(name, value) {
return manager.knob(name, { type: 'color', value });
}
export function object(name, value) {
return manager.knob(name, { type: 'object', value });
}
export function select(name, options, value) {
return manager.knob(name, { type: 'select', options, value });
}
export function array(name, value, separator = ',') {
return manager.knob(name, { type: 'array', value, separator });
}
export function date(name, value = new Date()) {
const proxyValue = value ? value.getTime() : null;
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
// generic higher-order component decorator for all platforms - usage is discouraged
// This file Should be removed with 4.0 release
function wrapperKnobs(options) {
const channel = addons.getChannel();
manager.setChannel(channel);

26
addons/knobs/src/react/index.js
View File

@ -1,11 +1,31 @@
import React from 'react';
import addons from '@storybook/addons';
import WrapStory from './WrapStory';
/**
* Handles a react story
*/
import { knob, text, boolean, number, color, object, array, date, select, manager } from '../base';
export { knob, text, boolean, number, color, object, array, date, select };
export const reactHandler = (channel, knobStore) => getStory => context => {
const initialContent = getStory(context);
const props = { context, storyFn: getStory, channel, knobStore, initialContent };
return <WrapStory {...props} />;
};
function wrapperKnobs(options) {
const channel = addons.getChannel();
manager.setChannel(channel);
if (options) channel.emit('addon:knobs:setOptions', options);
return reactHandler(channel, manager.knobStore);
}
export function withKnobs(storyFn, context) {
return wrapperKnobs()(storyFn)(context);
}
export function withKnobsOptions(options = {}) {
return (storyFn, context) => wrapperKnobs(options)(storyFn)(context);
}

23
addons/knobs/src/vue/index.js
View File

@ -1,3 +1,9 @@
import addons from '@storybook/addons';
import { knob, text, boolean, number, color, object, array, date, select, manager } from '../base';
export { knob, text, boolean, number, color, object, array, date, select };
export const vueHandler = (channel, knobStore) => getStory => context => ({
render(h) {
return h(getStory(context));
@ -35,3 +41,20 @@ export const vueHandler = (channel, knobStore) => getStory => context => ({
knobStore.unsubscribe(this.setPaneKnobs);
},
});
function wrapperKnobs(options) {
const channel = addons.getChannel();
manager.setChannel(channel);
if (options) channel.emit('addon:knobs:setOptions', options);
return vueHandler(channel, manager.knobStore);
}
export function withKnobs(storyFn, context) {
return wrapperKnobs()(storyFn)(context);
}
export function withKnobsOptions(options = {}) {
return (storyFn, context) => wrapperKnobs(options)(storyFn)(context);
}

1
addons/knobs/vue.js Normal file
View File

@ -0,0 +1 @@
module.exports = require('./dist/vue');

15
addons/links/README.md
View File

@ -15,7 +15,18 @@ This addon works with Storybook for:
## Getting Started
You can use this addon without installing it.
Install this addon by adding the `@storybook/addon-links` dependency:
```sh
yarn add @storybook/addon-links
```
First configure it as an addon by adding it to your addons.js file (located in the Storybook config directory).
```js
import '@storybook/addon-links/register';
```
Then you can import `linkTo` in your stories and use like this:
```js
import { storiesOf } from '@storybook/react'
@ -43,7 +54,7 @@ linkTo('Toggle') // Links to the first story in the 'Toggle' kind
With that, you can link an event in a component to any story in the Storybook.
- First parameter is the the story kind name (what you named with `storiesOf`).
-   Second (optional) parameter is the story name (what you named with `.add`). If the second parameter is omitted, the link will point to the first story in the given kind.
-   Second (optional) parameter is the story name (what you named with `.add`). If the second parameter is omitted, the link will point to the first story in the given kind.
> You can also pass a function instead for any of above parameter. That function accepts arguments emitted by the event and it should return a string. <br/>
> Have a look at [PR86](https://github.com/kadirahq/react-storybook/pull/86) for more information.

6
addons/links/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-links",
"version": "3.2.6",
"version": "3.3.0-alpha.0",
"description": "Story Links addon for storybook",
"keywords": [
"storybook"
@ -17,11 +17,11 @@
},
"scripts": {
"deploy-storybook": "storybook-to-ghpages",
"prepublish": "node ../../scripts/prepublish.js",
"prepare": "node ../../scripts/prepare.js",
"storybook": "start-storybook -p 9001"
},
"dependencies": {
"@storybook/addons": "^3.2.6"
"@storybook/addons": "^3.3.0-alpha.0"
},
"devDependencies": {
"react": "^15.6.1",

6
addons/notes/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-notes",
"version": "3.2.7",
"version": "3.3.0-alpha.0",
"description": "Write notes for your Storybook stories.",
"keywords": [
"addon",
@ -14,12 +14,12 @@
"url": "https://github.com/storybooks/storybook.git"
},
"scripts": {
"prepublish": "node ../../scripts/prepublish.js",
"prepare": "node ../../scripts/prepare.js",
"publish-storybook": "bash .scripts/publish_storybook.sh",
"storybook": "start-storybook -p 9010"
},
"dependencies": {
"@storybook/addons": "^3.2.6",
"@storybook/addons": "^3.3.0-alpha.0",
"babel-runtime": "^6.23.0",
"prop-types": "^15.5.10",
"util-deprecate": "^1.0.2"

6
addons/options/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-options",
"version": "3.2.6",
"version": "3.3.0-alpha.0",
"description": "Options addon for storybook",
"keywords": [
"storybook"
@ -16,11 +16,11 @@
"url": "https://github.com/storybooks/storybook.git"
},
"scripts": {
"prepublish": "node ../../scripts/prepublish.js",
"prepare": "node ../../scripts/prepare.js",
"storybook": "start-storybook -p 9001"
},
"dependencies": {
"@storybook/addons": "^3.2.6"
"@storybook/addons": "^3.3.0-alpha.0"
},
"devDependencies": {
"react": "^15.6.1",

22
addons/storyshots/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-storyshots",
"version": "3.2.8",
"version": "3.3.0-alpha.0",
"description": "StoryShots is a Jest Snapshot Testing Addon for Storybook.",
"license": "MIT",
"main": "dist/index.js",
@ -10,7 +10,7 @@
},
"scripts": {
"build-storybook": "build-storybook",
"prepublish": "babel ./src --out-dir ./dist",
"prepare": "babel ./src --out-dir ./dist",
"storybook": "start-storybook -p 6006",
"example": "jest storyshot.test"
},
@ -23,23 +23,23 @@
"read-pkg-up": "^2.0.0"
},
"devDependencies": {
"@storybook/addons": "^3.2.6",
"@storybook/channels": "^3.2.0",
"@storybook/react": "^3.2.8",
"@storybook/addons": "^3.3.0-alpha.0",
"@storybook/channels": "^3.3.0-alpha.0",
"@storybook/react": "^3.3.0-alpha.0",
"babel-cli": "^6.26.0",
"babel-jest": "^20.0.3",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.0",
"babel-preset-react": "^6.24.1",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"jest": "^20.0.4",
"jest-cli": "^20.0.4"
"jest-cli": "^20.0.4",
"react": "^15.6.1",
"react-dom": "^15.6.1"
},
"peerDependencies": {
"@storybook/addons": "^3.2.6",
"@storybook/channels": "^3.2.0",
"@storybook/react": "^3.2.8",
"@storybook/addons": "^3.3.0-alpha.0",
"@storybook/channels": "^3.3.0-alpha.0",
"@storybook/react": "^3.3.0-alpha.0",
"babel-core": "^6.26.0",
"react": "*",
"react-test-renderer": "*"

37
addons/viewport/README.md Normal file
View File

@ -0,0 +1,37 @@
# Storybook Viewport Addon
Storybook Viewport Addon allows your stories to be displayed in different sizes and layouts in [Storybook](https://storybookjs.org). This helps build responsive components inside of Storybook.
This addon works with Storybook for: [React](https://github.com/storybooks/storybook/tree/master/app/react) and [Vue](https://github.com/storybooks/storybook/tree/master/app/vue).
![Screenshot](https://github.com/storybooks/storybook/blob/master/docs/viewport.png)
## Installation
Install the following npm module:
npm i --save-dev @storybook/addon-viewport
or with yarn:
yarn add -D @storybook/addon-viewport
## Basic Usage
Simply import the Storybook Viewport Addon in the `addon.js` file in your `.storybook` directory.
```js
import '@storybook/addon-viewport/register'
```
This will register the Viewport Addon to Storybook and will show up in the action area.
## FAQ
#### How do I add a new device?
Unfortunately, this is currently not supported.
#### How can I make a custom screen size?
Unfortunately, this is currently not supported.

BIN
addons/viewport/docs/viewport.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 193 KiB

3
addons/viewport/manager.js Normal file
View File

@ -0,0 +1,3 @@
const manager = require('./dist/manager');
manager.init();

22
addons/viewport/package.json Normal file
View File

@ -0,0 +1,22 @@
{
"name": "@storybook/addon-viewport",
"version": "3.3.0-alpha.0",
"description": "Storybook addon to change the viewport size to mobile",
"main": "dist/index.js",
"keywords": [
"storybook"
],
"scripts": {
"prepare": "node ../../scripts/prepare.js"
},
"license": "MIT",
"dependencies": {
"@storybook/components": "^3.3.0-alpha.0",
"global": "^4.3.2",
"prop-types": "^15.5.10"
},
"peerDependencies": {
"@storybook/addons": "^3.2.0",
"react": "*"
}
}

3
addons/viewport/register.js Normal file
View File

@ -0,0 +1,3 @@
// NOTE: loading addons using this file is deprecated!
// please use manager.js and preview.js files instead
require('./manager');

119
addons/viewport/src/components/Panel.js Normal file
View File

@ -0,0 +1,119 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { baseFonts } from '@storybook/components';
import { document } from 'global';
import { viewports, defaultViewport, resetViewport } from './viewportInfo';
import { SelectViewport } from './SelectViewport';
import { RotateViewport } from './RotateViewport';
import * as styles from './styles';
const storybookIframe = 'storybook-preview-iframe';
const containerStyles = {
padding: 15,
width: '100%',
boxSizing: 'border-box',
...baseFonts,
};
export class Panel extends Component {
static propTypes = {
channel: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
};
constructor(props, context) {
super(props, context);
this.state = {
viewport: defaultViewport,
isLandscape: false,
};
this.props.channel.on('addon:viewport:update', this.changeViewport);
}
componentDidMount() {
this.iframe = document.getElementById(storybookIframe);
}
componentWillUnmount() {
this.props.channel.removeListener('addon:viewport:update', this.changeViewport);
}
iframe = undefined;
changeViewport = viewport => {
const { viewport: previousViewport } = this.state;
if (previousViewport !== viewport) {
this.setState(
{
viewport,
isLandscape: false,
},
this.updateIframe
);
}
};
toggleLandscape = () => {
const { isLandscape } = this.state;
this.setState({ isLandscape: !isLandscape }, this.updateIframe);
};
updateIframe = () => {
const { viewport: viewportKey, isLandscape } = this.state;
const viewport = viewports[viewportKey] || resetViewport;
if (!this.iframe) {
throw new Error('Cannot find Storybook iframe');
}
Object.keys(viewport.styles).forEach(prop => {
this.iframe.style[prop] = viewport.styles[prop];
});
if (isLandscape) {
this.iframe.style.height = viewport.styles.width;
this.iframe.style.width = viewport.styles.height;
}
};
render() {
const { isLandscape, viewport } = this.state;
const disableDefault = viewport === defaultViewport;
const disabledStyles = disableDefault ? styles.disabled : {};
const buttonStyles = {
...styles.button,
...disabledStyles,
marginTop: 30,
padding: 20,
};
return (
<div style={containerStyles}>
<SelectViewport
activeViewport={viewport}
onChange={e => this.changeViewport(e.target.value)}
/>
<RotateViewport
onClick={this.toggleLandscape}
disabled={disableDefault}
active={isLandscape}
/>
<button
style={buttonStyles}
onClick={() => this.changeViewport(defaultViewport)}
disabled={disableDefault}
>
Reset Viewport
</button>
</div>
);
}
}

30
addons/viewport/src/components/RotateViewport.js Normal file
View File

@ -0,0 +1,30 @@
import React from 'react';
import PropTypes from 'prop-types';
import * as styles from './styles';
export function RotateViewport({ active, ...props }) {
const disabledStyles = props.disabled ? styles.disabled : {};
const actionStyles = {
...styles.action,
...disabledStyles,
};
return (
<div style={styles.row}>
<label style={styles.label}>Rotate</label>
<button {...props} style={actionStyles}>
{active ? 'Vertical' : 'Landscape'}
</button>
</div>
);
}
RotateViewport.propTypes = {
disabled: PropTypes.bool,
onClick: PropTypes.func.isRequired,
active: PropTypes.bool,
};
RotateViewport.defaultProps = {
disabled: true,
active: false,
};

26
addons/viewport/src/components/SelectViewport.js Normal file
View File

@ -0,0 +1,26 @@
import React from 'react';
import PropTypes from 'prop-types';
import { viewports, defaultViewport } from './viewportInfo';
import * as styles from './styles';
export function SelectViewport({ activeViewport, onChange }) {
return (
<div style={styles.row}>
<label style={styles.label}>Device</label>
<select style={styles.action} value={activeViewport} onChange={onChange}>
<option value={defaultViewport}>Default</option>
{Object.keys(viewports).map(key => (
<option value={key} key={key}>
{viewports[key].name}
</option>
))}
</select>
</div>
);
}
SelectViewport.propTypes = {
onChange: PropTypes.func.isRequired,
activeViewport: PropTypes.string.isRequired,
};

30
addons/viewport/src/components/styles.js Normal file
View File

@ -0,0 +1,30 @@
export const row = {
width: '100%',
display: 'flex',
marginBottom: 15,
};
export const label = {
width: 80,
marginRight: 15,
};
const actionColor = 'rgb(247, 247, 247)';
export const button = {
color: 'rgb(85, 85, 85)',
width: '100%',
border: `1px solid ${actionColor}`,
backgroundColor: actionColor,
borderRadius: 3,
};
export const disabled = {
opacity: '0.5',
cursor: 'not-allowed',
};
export const action = {
...button,
height: 30,
};

249
addons/viewport/src/components/tests/Panel.test.js Normal file
View File

@ -0,0 +1,249 @@
import React from 'react';
import { shallow } from 'enzyme'; // eslint-disable-line import/no-extraneous-dependencies
import { document } from 'global';
import { Panel } from '../Panel';
import { viewports, defaultViewport, resetViewport } from '../viewportInfo';
import * as styles from '../styles';
describe('Viewport/Panel', () => {
const props = {
channel: {
on: jest.fn(),
removeListener: jest.fn(),
},
};
let subject;
beforeEach(() => {
subject = shallow(<Panel {...props} />);
});
describe('construct', () => {
it('creates the initial state', () => {
expect(subject.instance().state).toEqual({
viewport: defaultViewport,
isLandscape: false,
});
});
it('listens on the channel', () => {
expect(props.channel.on).toHaveBeenCalledWith(
'addon:viewport:update',
subject.instance().changeViewport
);
});
});
describe('componentDidMount', () => {
let previousGet;
beforeEach(() => {
subject.instance().iframe = undefined;
previousGet = document.getElementById;
document.getElementById = jest.fn(() => 'iframe');
subject.instance().componentDidMount();
});
afterEach(() => {
document.getElementById = previousGet;
});
it('gets the iframe', () => {
expect(subject.instance().iframe).toEqual('iframe');
});
});
describe('componentWillUnmount', () => {
beforeEach(() => {
subject.instance().componentWillUnmount();
});
it('removes the channel listener', () => {
expect(props.channel.removeListener).toHaveBeenCalledWith(
'addon:viewport:update',
subject.instance().changeViewport
);
});
});
describe('changeViewport', () => {
beforeEach(() => {
subject.instance().setState = jest.fn();
subject.instance().updateIframe = jest.fn();
});
describe('new viewport', () => {
beforeEach(() => {
subject.instance().changeViewport(viewports[0]);
});
it('sets the state with the new information', () => {
expect(subject.instance().setState).toHaveBeenCalledWith(
{
viewport: viewports[0],
isLandscape: false,
},
subject.instance().updateIframe
);
});
});
describe('same as previous viewport', () => {
beforeEach(() => {
subject.instance().changeViewport(defaultViewport);
});
it('doesnt update the state', () => {
expect(subject.instance().setState).not.toHaveBeenCalled();
});
});
});
describe('toggleLandscape', () => {
beforeEach(() => {
subject.setState({ isLandscape: false });
subject.instance().setState = jest.fn();
subject.instance().toggleLandscape();
});
it('updates the landscape to be the opposite', () => {
expect(subject.instance().setState).toHaveBeenCalledWith(
{ isLandscape: true },
subject.instance().updateIframe
);
});
});
describe('updateIframe', () => {
let iframe;
describe('no iframe found', () => {
beforeEach(() => {
subject.instance().iframe = null;
});
it('throws a TypeError', () => {
expect(() => {
subject.instance().updateIframe();
}).toThrow('Cannot find Storybook iframe');
});
});
describe('iframe found', () => {
beforeEach(() => {
iframe = { style: {} };
subject.instance().iframe = iframe;
});
it('sets the viewport information on the iframe', () => {
subject.instance().updateIframe();
expect(subject.instance().iframe.style).toEqual(resetViewport.styles);
});
it('swaps the height/width when in landscape', () => {
subject.instance().state.isLandscape = true;
subject.instance().updateIframe();
expect(subject.instance().iframe.style).toEqual(
expect.objectContaining({
height: resetViewport.styles.width,
width: resetViewport.styles.height,
})
);
});
});
});
describe('render', () => {
describe('reset button', () => {
let resetBtn;
beforeEach(() => {
subject.instance().changeViewport = jest.fn();
resetBtn = subject.find('button');
});
it('styles the reset button as disabled if viewport is default', () => {
expect(resetBtn.props().style).toEqual(expect.objectContaining(styles.disabled));
});
it('enabels the reset button if not default', () => {
subject.setState({ viewport: 'iphone6' });
// Find updated button
resetBtn = subject.find('button');
expect(resetBtn.props().style).toEqual({
...styles.button,
marginTop: 30,
padding: 20,
});
});
it('toggles the landscape on click', () => {
resetBtn.simulate('click');
expect(subject.instance().changeViewport).toHaveBeenCalledWith(defaultViewport);
});
});
describe('SelectViewport', () => {
let select;
beforeEach(() => {
select = subject.find('SelectViewport');
subject.instance().changeViewport = jest.fn();
});
it('passes the activeViewport', () => {
expect(select.props()).toEqual(
expect.objectContaining({
activeViewport: defaultViewport,
})
);
});
it('onChange it updates the viewport', () => {
const e = { target: { value: 'iphone6' } };
select.simulate('change', e);
expect(subject.instance().changeViewport).toHaveBeenCalledWith(e.target.value);
});
});
describe('RotateView', () => {
let toggle;
beforeEach(() => {
toggle = subject.find('RotateViewport');
jest.spyOn(subject.instance(), 'toggleLandscape');
subject.instance().forceUpdate();
});
it('passes the active prop based on the state of the panel', () => {
expect(toggle.props().active).toEqual(subject.state('isLandscape'));
});
describe('is on the default viewport', () => {
beforeEach(() => {
subject.setState({ viewport: defaultViewport });
});
it('sets the disabled property', () => {
expect(toggle.props().disabled).toEqual(true);
});
});
describe('is on a responsive viewport', () => {
beforeEach(() => {
subject.setState({ viewport: 'iphone6' });
toggle = subject.find('RotateViewport');
});
it('the disabled property is false', () => {
expect(toggle.props().disabled).toEqual(false);
});
});
});
});
});

91
addons/viewport/src/components/tests/RotateViewport.test.js Normal file
View File

@ -0,0 +1,91 @@
import React from 'react';
import { shallow } from 'enzyme'; // eslint-disable-line import/no-extraneous-dependencies
import { RotateViewport } from '../RotateViewport';
import * as styles from '../styles';
describe('Viewport/RotateViewport', () => {
let subject;
let props;
beforeEach(() => {
props = {
onClick: jest.fn(),
};
subject = shallow(<RotateViewport {...props} />);
});
it('has a label', () => {
expect(subject.find('label').text()).toEqual('Rotate');
});
describe('button', () => {
let btn;
beforeEach(() => {
btn = subject.find('button');
});
it('has a click handler set via props', () => {
// note, this shouldn't trigger if disabled, but enzyme doesn't care
btn.simulate('click');
expect(props.onClick).toHaveBeenCalled();
});
it('renders the the action styles on the button', () => {
expect(btn.props().style).toEqual(expect.objectContaining(styles.action));
});
describe('is active', () => {
beforeEach(() => {
subject.setProps({ active: true });
btn = subject.find('button');
});
it('renders the correct text', () => {
expect(btn.text()).toEqual('Vertical');
});
});
describe('is inactive', () => {
beforeEach(() => {
subject.setProps({ active: false });
btn = subject.find('button');
});
it('renders the correct text', () => {
expect(btn.text()).toEqual('Landscape');
});
});
describe('is disabled', () => {
beforeEach(() => {
subject.setProps({ disabled: true });
btn = subject.find('button');
});
it('renders the disabled styles', () => {
expect(btn.props().style).toEqual(expect.objectContaining(styles.disabled));
});
it('sets the disabled property on the button', () => {
expect(btn.props().disabled).toEqual(true);
});
});
describe('is enabled', () => {
beforeEach(() => {
subject.setProps({ disabled: false });
btn = subject.find('button');
});
it('renders the disabled styles', () => {
expect(btn.props().style).not.toEqual(expect.objectContaining(styles.disabled));
});
it('does not set the disabled property on the button', () => {
expect(btn.props().disabled).toEqual(false);
});
});
});
});

60
addons/viewport/src/components/tests/SelectViewport.test.js Normal file
View File

@ -0,0 +1,60 @@
import React from 'react';
import { shallow } from 'enzyme'; // eslint-disable-line import/no-extraneous-dependencies
import { SelectViewport } from '../SelectViewport';
import { viewports, defaultViewport } from '../viewportInfo';
import * as styles from '../styles';
describe('Viewport/SelectViewport', () => {
let subject;
let props;
beforeEach(() => {
props = {
onChange: jest.fn(),
activeViewport: defaultViewport,
};
subject = shallow(<SelectViewport {...props} />);
});
describe('label', () => {
let label;
beforeEach(() => {
label = subject.find('label');
});
it('is correctly styled', () => {
expect(label.props().style).toEqual(styles.label);
});
});
describe('select', () => {
it('has a default option first', () => {
const firstOption = subject.find('option').first();
expect(firstOption.props().value).toEqual(defaultViewport);
});
describe('dynamic options', () => {
const viewportKeys = Object.keys(viewports);
it('has at least 1 option', () => {
expect(!!viewportKeys.length).toEqual(true);
});
viewportKeys.forEach(key => {
let option;
beforeEach(() => {
option = subject.find(`[value="${key}"]`);
});
it(`renders an option with key ${key}`, () => {
expect(option.node).toBeDefined();
});
it(`renders an option for ${viewports[key].name}`, () => {
expect(option.text()).toEqual(viewports[key].name);
});
});
});
});
});

19
addons/viewport/src/components/tests/viewportInfo.spec.js Normal file
View File

@ -0,0 +1,19 @@
import { viewports, resetViewport, configuredStyles } from '../viewportInfo';
describe('Viewport/constants', () => {
describe('viewports', () => {
it('includes the default styles on every custom viewport', () => {
const keys = Object.keys(viewports);
keys.forEach(key => {
expect(viewports[key].styles).toEqual(expect.objectContaining(configuredStyles));
});
});
});
describe('resetViewport', () => {
it('does not include the styles for a responsive iframe', () => {
expect(resetViewport).not.toEqual(expect.objectContaining(configuredStyles));
});
});
});

78
addons/viewport/src/components/viewportInfo.js Normal file
View File

@ -0,0 +1,78 @@
export const configuredStyles = {
border: '1px solid #728099',
display: 'flex',
margin: '0 auto',
boxShadow: 'rgba(0,0,0,0.2) 0px 0px 60px 12px',
};
export const defaultViewport = 'default';
export const resetViewport = {
name: 'Reset',
styles: {
width: '100%',
height: '100%',
border: 'none',
display: 'block',
margin: '0',
boxShadow: 'none',
},
};
export const viewports = {
iphone5: {
name: 'iPhone 5',
styles: {
height: '568px',
width: '320px',
...configuredStyles,
},
},
iphone6: {
name: 'iPhone 6',
styles: {
height: '667px',
width: '375px',
...configuredStyles,
},
},
iphone6p: {
name: 'iPhone 6 Plus',
styles: {
height: '736px',
width: '414px',
...configuredStyles,
},
},
ipad: {
name: 'iPad',
styles: {
height: '1024px',
width: '768px',
...configuredStyles,
},
},
galaxys5: {
name: 'Galaxy S5',
styles: {
height: '640px',
width: '360px',
...configuredStyles,
},
},
nexus5x: {
name: 'Nexus 5X',
styles: {
height: '660px',
width: '412px',
...configuredStyles,
},
},
nexus6p: {
name: 'Nexus 6P',
styles: {
height: '732px',
width: '412px',
...configuredStyles,
},
},
};

1
addons/viewport/src/index.js Normal file
View File

@ -0,0 +1 @@
export { register } from './manager';

24
addons/viewport/src/manager.js Normal file
View File

@ -0,0 +1,24 @@
import React from 'react';
import addons from '@storybook/addons';
import { Panel } from './components/Panel';
const ADDON_ID = 'storybook-addon-viewport';
const PANEL_ID = `${ADDON_ID}/addon-panel`;
const addChannel = api => {
const channel = addons.getChannel();
addons.addPanel(PANEL_ID, {
title: 'Viewport',
render() {
return <Panel channel={channel} api={api} />;
},
});
};
const init = () => {
addons.register(ADDON_ID, addChannel);
};
export { init, addChannel };

25
addons/viewport/src/tests/manager.test.js Normal file
View File

@ -0,0 +1,25 @@
import addons from '@storybook/addons';
import { init, addChannel } from '../manager';
jest.mock('@storybook/addons');
describe('Viewport manager', () => {
describe('init', () => {
it('registers the addon', () => {
init();
expect(addons.register).toHaveBeenCalledWith('storybook-addon-viewport', addChannel);
});
});
describe('addChannel', () => {
it('adds the panel to storybook', () => {
addChannel();
expect(addons.addPanel).toHaveBeenCalledWith(
'storybook-addon-viewport/addon-panel',
expect.objectContaining({ title: 'Viewport' })
);
});
});
});

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

@ -1,6 +1,6 @@
{
"name": "@storybook/react-native",
"version": "3.2.8",
"version": "3.3.0-alpha.0",
"description": "A better way to develop React Native Components for your app",
"keywords": [
"react",
@ -21,14 +21,14 @@
"url": "https://github.com/storybooks/storybook.git"
},
"scripts": {
"prepublish": "node ../../scripts/prepublish.js"
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addon-actions": "^3.2.6",
"@storybook/addon-links": "^3.2.6",
"@storybook/addons": "^3.2.6",
"@storybook/channel-websocket": "^3.2.0",
"@storybook/ui": "^3.2.7",
"@storybook/addon-actions": "^3.3.0-alpha.0",
"@storybook/addon-links": "^3.3.0-alpha.0",
"@storybook/addons": "^3.3.0-alpha.0",
"@storybook/channel-websocket": "^3.3.0-alpha.0",
"@storybook/ui": "^3.3.0-alpha.0",
"autoprefixer": "^7.1.1",
"babel-core": "^6.26.0",
"babel-loader": "^7.0.0",
@ -53,6 +53,7 @@
"file-loader": "^0.11.1",
"find-cache-dir": "^1.0.0",
"global": "^4.3.2",
"html-webpack-plugin": "^2.30.1",
"json-loader": "^0.5.4",
"json5": "^0.5.1",
"postcss-loader": "^2.0.5",

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

@ -17,10 +17,10 @@ export const getStorybookUI = preview.getStorybookUI.bind(preview);
export const action = deprecate(
deprecatedAction,
'@storybook/react action is deprecated. See: https://github.com/storybooks/storybook/tree/master/addon/actions'
'@storybook/react action is deprecated. See: https://github.com/storybooks/storybook/tree/master/addons/actions'
);
export const linkTo = deprecate(
deprecatedLinkTo,
'@storybook/react linkTo is deprecated. See: https://github.com/storybooks/storybook/tree/master/addon/links'
'@storybook/react linkTo is deprecated. See: https://github.com/storybooks/storybook/tree/master/addons/links'
);

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

@ -25,7 +25,7 @@ const styles = {
},
};
const PreviewHelp = () =>
const PreviewHelp = () => (
<div style={styles.main}>
<h1>Welcome to storybook</h1>
<p>This is a UI component dev environment for your app.</p>
@ -54,6 +54,7 @@ const PreviewHelp = () =>
<div style={styles.codeBlock}>
<pre style={styles.instructionsCode}>react-native run-&lt;platform&gt;</pre>
</div>
</div>;
</div>
);
export { PreviewHelp as default };

12
app/react-native/src/preview/components/OnDeviceUI/index.js vendored
View File

@ -124,7 +124,11 @@ export default class OnDeviceUI extends Component {
<Animated.View style={menuSpacerStyles} />
<View style={style.previewContainer}>
<Animated.View style={headerStyles}>
<TouchableWithoutFeedback onPress={this.menuToggledHandler}>
<TouchableWithoutFeedback
onPress={this.menuToggledHandler}
testID="Storybook.OnDeviceUI.open"
accessibilityLabel="Storybook.OnDeviceUI.open"
>
<View>
<Image source={openIcon} style={style.icon} />
</View>
@ -140,7 +144,11 @@ export default class OnDeviceUI extends Component {
</View>
</View>
<Animated.View style={menuStyles} onLayout={this.menuLayoutHandler}>
<TouchableWithoutFeedback onPress={this.menuToggledHandler}>
<TouchableWithoutFeedback
onPress={this.menuToggledHandler}
testID="Storybook.OnDeviceUI.close"
accessibilityLabel="Storybook.OnDeviceUI.close"
>
<View style={style.closeButton}>
<Image source={closeIcon} style={style.icon} />
</View>

39
app/react-native/src/preview/components/StoryListView/index.js vendored
View File

@ -4,24 +4,28 @@ import { ListView, View, Text, TouchableOpacity } from 'react-native';
import { MinMaxView } from 'react-native-compat';
import style from './style';
const SectionHeader = ({ title, selected }) =>
const SectionHeader = ({ title, selected }) => (
<View key={title} style={style.header}>
<Text style={[style.headerText, selected && style.headerTextSelected]}>
{title}
</Text>
</View>;
<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>;
const ListItem = ({ title, selected, onPress }) => (
<TouchableOpacity
key={title}
style={style.item}
onPress={onPress}
testID={`Storybook.ListItem.${title}`}
accessibilityLabel={`Storybook.ListItem.${title}`}
>
<Text style={[style.itemText, selected && style.itemTextSelected]}>{title}</Text>
</TouchableOpacity>
);
ListItem.propTypes = {
title: PropTypes.string.isRequired,
@ -91,19 +95,18 @@ export default class StoryListView extends Component {
<MinMaxView maxWidth={250}>
<ListView
style={style.list}
renderRow={item =>
renderRow={item => (
<ListItem
title={item.name}
selected={
item.kind === this.props.selectedKind && item.name === this.props.selectedStory
}
onPress={() => this.changeStory(item.kind, item.name)}
/>}
renderSectionHeader={(sectionData, sectionName) =>
<SectionHeader
title={sectionName}
selected={sectionName === this.props.selectedKind}
/>}
/>
)}
renderSectionHeader={(sectionData, sectionName) => (
<SectionHeader title={sectionName} selected={sectionName === this.props.selectedKind} />
)}
dataSource={this.state.dataSource}
stickySectionHeadersEnabled={false}
/>

20
app/react-native/src/preview/components/StoryView/index.js vendored
View File

@ -24,15 +24,17 @@ export default class StoryView extends Component {
renderHelp() {
return (
<View style={style.help}>
{this.props.url
? <Text>
Please open the Storybook UI (
{this.props.url}
) with a web browser and select a story for preview.
</Text>
: <Text>
Please open the Storybook UI with a web browser and select a story for preview.
</Text>}
{this.props.url ? (
<Text>
Please open the Storybook UI (
{this.props.url}
) with a web browser and select a story for preview.
</Text>
) : (
<Text>
Please open the Storybook UI with a web browser and select a story for preview.
</Text>
)}
</View>
);
}

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

@ -91,9 +91,11 @@ export default class Preview {
this._sendGetCurrentStory();
// finally return the preview component
return params.onDeviceUI
? <OnDeviceUI stories={this._stories} events={this._events} url={webUrl} />
: <StoryView url={webUrl} events={this._events} />;
return params.onDeviceUI ? (
<OnDeviceUI stories={this._stories} events={this._events} url={webUrl} />
) : (
<StoryView url={webUrl} events={this._events} />
);
};
}

14
app/react-native/src/server/config/webpack.config.js
View File

@ -1,9 +1,10 @@
import path from 'path';
import webpack from 'webpack';
import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import { OccurenceOrderPlugin, includePaths, excludePaths } from './utils';
const config = {
const getConfig = options => ({
devtool: '#cheap-module-eval-source-map',
entry: {
manager: [require.resolve('../../manager')],
@ -14,6 +15,13 @@ const config = {
publicPath: '/',
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
data: {
options: JSON.stringify(options),
},
template: require.resolve('../index.html.ejs'),
}),
new OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new CaseSensitivePathsPlugin(),
@ -29,6 +37,6 @@ const config = {
},
],
},
};
});
export default config;
export default getConfig;

112
app/react-native/src/server/config/webpack.config.prod.js
View File

@ -1,57 +1,69 @@
import path from 'path';
import webpack from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import { OccurenceOrderPlugin, includePaths, excludePaths } from './utils';
const config = {
bail: true,
devtool: '#cheap-module-source-map',
entry: {
manager: [path.resolve(__dirname, '../../manager')],
},
output: {
path: path.join(__dirname, 'dist'),
filename: 'static/[name].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({ 'process.env.NODE_ENV': '"production"' }),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin({
compress: {
screw_ie8: true,
warnings: false,
},
mangle: {
screw_ie8: true,
},
output: {
comments: false,
screw_ie8: true,
},
}),
],
module: {
loaders: [
{
test: /\.jsx?$/,
loader: require.resolve('babel-loader'),
query: require('./babel.prod.js'), // eslint-disable-line
include: includePaths,
exclude: excludePaths,
},
const getConfig = options => {
const config = {
bail: true,
devtool: '#cheap-module-source-map',
entry: {
manager: [path.resolve(__dirname, '../../manager')],
},
output: {
path: path.join(__dirname, 'dist'),
filename: 'static/[name].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 HtmlWebpackPlugin({
filename: 'index.html',
data: {
options: JSON.stringify(options),
},
template: require.resolve('../index.html.ejs'),
}),
new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"production"' }),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin({
compress: {
screw_ie8: true,
warnings: false,
},
mangle: {
screw_ie8: true,
},
output: {
comments: false,
screw_ie8: true,
},
}),
],
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: require.resolve('babel-loader'),
query: require('./babel.prod.js'), // eslint-disable-line
include: includePaths,
exclude: excludePaths,
},
],
},
};
// Webpack 2 doesn't have a OccurenceOrderPlugin plugin in the production mode.
// But webpack 1 has it. That's why we do this.
if (OccurenceOrderPlugin) {
config.plugins.unshift(new OccurenceOrderPlugin());
}
return config;
};
// Webpack 2 doesn't have a OccurenceOrderPlugin plugin in the production mode.
// But webpack 1 has it. That's why we do this.
if (OccurenceOrderPlugin) {
config.plugins.unshift(new OccurenceOrderPlugin());
}
export default config;
export default getConfig;

34
app/react-native/src/server/index.html.ejs Normal file
View File

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Storybook for React</title>
<style>
/* Styling the fuzzy search box placeholders */
.searchBox::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #ddd;
font-size: 16px;
}
.searchBox::-moz-placeholder { /* Firefox 19+ */
color: #ddd;
font-size: 16px;
}
.searchBox:focus{
border-color: #EEE !important;
}
.btn:hover{
background-color: #eee
}
</style>
</head>
<body style="margin: 0;">
<div id="root"></div>
<script>
window.storybookOptions = <%= htmlWebpackPlugin.options.data.options %>;
</script>
</body>
</html>

41
app/react-native/src/server/index.html.js
View File

@ -1,41 +0,0 @@
import url from 'url';
export default function(publicPath, options) {
return `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Storybook for React</title>
<style>
/* Styling the fuzzy search box placeholders */
.searchBox::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #ddd;
font-size: 16px;
}
.searchBox::-moz-placeholder { /* Firefox 19+ */
color: #ddd;
font-size: 16px;
}
.searchBox:focus{
border-color: #EEE !important;
}
.btn:hover{
background-color: #eee
}
</style>
</head>
<body style="margin: 0;">
<div id="root"></div>
<script>
window.storybookOptions = ${JSON.stringify(options)};
</script>
<script src="${url.resolve(publicPath, 'static/manager.bundle.js')}"></script>
</body>
</html>
`;
}

11
app/react-native/src/server/middleware.js vendored
View File

@ -7,7 +7,6 @@ import webpackHotMiddleware from 'webpack-hot-middleware';
import baseConfig from './config/webpack.config';
import baseProductionConfig from './config/webpack.config.prod';
import loadConfig from './config';
import getIndexHtml from './index.html';
function getMiddleware(configDir) {
const middlewarePath = path.resolve(configDir, 'middleware.js');
@ -26,7 +25,7 @@ export default function({ projectDir, configDir, ...options }) {
// custom `.babelrc` file and `webpack.config.js` files
const environment = options.environment || 'DEVELOPMENT';
const isProd = environment === 'PRODUCTION';
const currentWebpackConfig = isProd ? baseProductionConfig : baseConfig;
const currentWebpackConfig = isProd ? baseProductionConfig(options) : baseConfig(options);
const config = loadConfig(environment, currentWebpackConfig, projectDir, configDir);
// remove the leading '/'
@ -53,12 +52,8 @@ export default function({ projectDir, configDir, ...options }) {
}
router.get('/', (req, res) => {
res.send(
getIndexHtml(publicPath, {
manualId: options.manualId,
secured: options.secured,
})
);
res.set('Content-Type', 'text/html');
res.sendFile(path.join(`${__dirname}/public/index.html`));
});
return router;

3
app/react/bin/build.js Executable file
View File

@ -0,0 +1,3 @@
#!/usr/bin/env node
require('../dist/server/build');

3
app/react/bin/index.js Executable file
View File

@ -0,0 +1,3 @@
#!/usr/bin/env node
require('../dist/server');

23
app/react/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/react",
"version": "3.2.8",
"version": "3.3.0-alpha.0",
"description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
"homepage": "https://github.com/storybooks/storybook/tree/master/apps/react",
"bugs": {
@ -9,24 +9,24 @@
"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"
"build-storybook": "./bin/build.js",
"start-storybook": "./bin/index.js",
"storybook-server": "./bin/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"
"dev": "DEV_BUILD=1 nodemon --watch ./src --exec 'yarn prepare'",
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addon-actions": "^3.2.6",
"@storybook/addon-links": "^3.2.6",
"@storybook/addons": "^3.2.6",
"@storybook/channel-postmessage": "^3.2.0",
"@storybook/ui": "^3.2.7",
"@storybook/addon-actions": "^3.3.0-alpha.0",
"@storybook/addon-links": "^3.3.0-alpha.0",
"@storybook/addons": "^3.3.0-alpha.0",
"@storybook/channel-postmessage": "^3.3.0-alpha.0",
"@storybook/ui": "^3.3.0-alpha.0",
"airbnb-js-shims": "^1.1.1",
"autoprefixer": "^7.1.1",
"babel-core": "^6.26.0",
@ -50,6 +50,7 @@
"glamor": "^2.20.40",
"glamorous": "^4.1.2",
"global": "^4.3.2",
"html-webpack-plugin": "^2.30.1",
"json-loader": "^0.5.4",
"json-stringify-safe": "^5.0.1",
"json5": "^0.5.1",

5
app/react/src/client/preview/client_api.test.js
View File

@ -80,7 +80,10 @@ describe('preview.client_api', () => {
},
});
api.storiesOf('none', module).aa().bb();
api
.storiesOf('none', module)
.aa()
.bb();
expect(data).toEqual(['foo', 'bar']);
});

13
app/react/src/client/preview/error_display.js
View File

@ -30,17 +30,14 @@ const codeStyle = {
overflow: 'auto',
};
const ErrorDisplay = ({ error }) =>
const ErrorDisplay = ({ error }) => (
<div style={mainStyle}>
<div style={headingStyle}>
{error.message}
</div>
<div style={headingStyle}>{error.message}</div>
<pre style={codeStyle}>
<code>
{error.stack}
</code>
<code>{error.stack}</code>
</pre>
</div>;
</div>
);
ErrorDisplay.propTypes = {
error: PropTypes.shape({

21
app/react/src/server/build.js
View File

@ -1,5 +1,3 @@
#!/usr/bin/env node
import webpack from 'webpack';
import program from 'commander';
import path from 'path';
@ -9,9 +7,7 @@ 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';
import { parseList, getEnvConfig } from './utils';
process.env.NODE_ENV = process.env.NODE_ENV || 'production';
@ -86,19 +82,4 @@ webpack(config).run((err, stats) => {
stats.hasErrors() && stats.toJson().errors.forEach(e => logger.error(e));
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) })
);
});

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