GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-03-17 05:02:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

Revert "Clean up alpha/rc for 4.0 release"

Browse Source
This commit is contained in:
Michael Shilman 2018-10-26 00:25:17 +08:00 committed by GitHub
parent e40353e6d1
commit 4818baa55c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
25 changed files with 93 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
.prettierrc
View File

@ -1,7 +0,0 @@
{
"printWidth": 100,
"tabWidth": 2,
"bracketSpacing": true,
"trailingComma": "es5",
"singleQuote": true
}

2
MIGRATION.md
View File

@ -179,7 +179,7 @@ If you're using `start-storybook` on CI, you may need to opt out of this using t
We've deprecated the `getstorybook` CLI in 4.0. The new way to install storybook is `sb init`. We recommend using `npx` for convenience and to make sure you're always using the latest version of the CLI:
```
npx -p @storybook/cli sb init
npx -p @storybook/cli@rc sb init
```
### Addon story parameters

4
README.md
View File

@ -55,7 +55,7 @@ First install storybook:
```sh
cd my-react-app
npx -p @storybook/cli sb init
npx -p @storybook/cli@rc sb init
```
If you'd rather set up your project manually, take a look at our [Slow Start Guide](https://storybook.js.org/basics/slow-start-guide/).
@ -66,7 +66,7 @@ Once it's installed, you can `npm run storybook` and it will run the development
```sh
cd my-storybook-v2-app
npx -p @storybook/cli sb init
npx -p @storybook/cli@rc sb init
```
It runs a codemod to update all package names. Read all migration details in our [Migration Guide](MIGRATION.md)

26
RELEASES.md
View File

@ -48,7 +48,7 @@ Every new feature, particularly significant ones (e.g. Vue support, deep
hierarchy for stories) deserves more attention:
1. They should be well-tested by the community before we release.
2. They often have architectural implications for the entire Storybook ecosystem, so should be discussed thoroughly before release. Doing `alpha` releases allow us to test in the community without necessarily achieving agreement.
2. They often have architectural implications for the entire Storybook ecosystem, so should be discussed thoroughly before release. Doing `alpha` releases allow us to test in the community without necessarily achieving agreement. For example, currently `Vue` support is in `alpha`, although it contains potentially controversial changes to addons.
3. They often deserve proper marketing treatment (blog posts, release announcement, podcast, etc.)
Therefore we merge these into a release branch of the form `release/MAJOR.MINOR`
@ -88,6 +88,7 @@ or to understand what is blocking the release so they can actually do something
about it. Discussion about which bugs are critical happens in the `#maintenance`
channel [in our Slack](https://now-examples-slackin-rrirkqohko.now.sh/) [![Storybook Slack](https://now-examples-slackin-rrirkqohko.now.sh/badge.svg)](https://now-examples-slackin-rrirkqohko.now.sh/)
If you're experiencing a bug, the best way to make sure that it gets attention
is to upvote it by adding a "thumbs-up" reaction in Github. This way important
bugs quickly bubble to the top [with a
@ -99,19 +100,20 @@ in a patch release.
## Decision-making
- For PATCH changes, all discussion can occur in issue/PR comments (and random slack chat as needed).
- For MINOR feature changes, there are multiple stages of discussion:
- The feature may be discussed in an issue before it is implemented (ex: <https://github.com/storybooks/storybook/issues/151>)
- Once it's implemented, the discussion may be occur on the PR (ex: <https://github.com/storybooks/storybook/pull/1329>)
- If people disagree on an implementation and it can't be resolved in discussion, they may issue alternative PR's with different ideas
- Ultimately the maintainers will reach a consensus before merging the changes. There is no set process for this, but we're all adults.
- Since MINOR features are released in alpha before they are fully released, new issues may be created by end users, etc.
- For MAJOR infrastructural changes, the discussion may take place over time, in gists like this one, issues, slack discussions, etc.
- Once the breaking changes have been reduced to an actual implementation, it looks pretty much like a feature release (only with higher stakes and probably a longer stabilization process).
- For PATCH changes, all discussion can occur in issue/PR comments (and random slack chat as needed).
- For MINOR feature changes, there are multiple stages of discussion:
- The feature may be discussed in an issue before it is implemented (ex: <https://github.com/storybooks/storybook/issues/151>)
- Once it's implemented, the discussion may be occur on the PR (ex: <https://github.com/storybooks/storybook/pull/1329>)
- If people disagree on an implementation and it can't be resolved in discussion, they may issue alternative PR's with different ideas
- Ultimately the maintainers will reach a consensus before merging the changes. There is no set process for this, but we're all adults.
- Since MINOR features are released in alpha before they are fully released, new issues may be created by end users, etc.
- For MAJOR infrastructural changes, the discussion may take place over time, in gists like this one, issues, slack discussions, etc.
- Once the breaking changes have been reduced to an actual implementation, it looks pretty much like a feature release (only with higher stakes and probably a longer stabilization process).
## FAQ's
#### How does my PR get merged?
- For PATCH PR's, any maintainer can review, test, approve, and merge it.
- For MINOR/MAJOR PR's, once a maintainer reviews, tests, and approves it, s/he should clear it with the other maintainers before merging it into the release branch.
- For PATCH PR's, any maintainer can review, test, approve, and merge it.
- For MINOR/MAJOR PR's, once a maintainer reviews, tests, and approves it, s/he should clear it with the other maintainers before merging it into the release branch.

16
addons/notes/README.md
View File

@ -7,8 +7,7 @@ Storybook Addon Notes allows you to write notes (text or HTML) for your stories
![Storybook Addon Notes Demo](docs/demo.png)
### Getting Started
**NOTE: Documentation on master branch is for alpha version, stable release is on [release/4.0](https://github.com/storybooks/storybook/tree/release/4.0/addons/)**
**NOTE: Documentation on master branch is for alpha version, stable release is on [release/3.4](https://github.com/storybooks/storybook/tree/release/3.4/addons/)**
```sh
yarn add -D @storybook/addon-notes
@ -39,9 +38,8 @@ import { storiesOf } from '@storybook/react';
import Component from './Component';
storiesOf('Component', module).add('with some emoji', () => <Component />, {
notes: 'A very simple component'
});
storiesOf('Component', module)
.add('with some emoji', () => <Component />, { notes: 'A very simple component' });
```
#### Using Markdown
@ -53,7 +51,9 @@ import { storiesOf } from '@storybook/react';
import Component from './Component';
import someMarkdownText from './someMarkdownText.md';
storiesOf('Component', module).add('With Markdown', () => <Component />, {
notes: { markdown: someMarkdownText }
});
storiesOf('Component', module).add(
'With Markdown',
() => <Component />,
{ notes: { markdown: someMarkdownText } }
);
```

9
addons/ondevice-notes/README.md
View File

@ -7,8 +7,7 @@ Storybook Addon On Device Notes allows you to write notes (text or markdown) for
![Storybook Addon Notes Demo](docs/demo.png)
### Getting Started
**NOTE: Documentation on master branch is for alpha version, stable release is on [release/4.0](https://github.com/storybooks/storybook/tree/release/3.4/addons/)**
**NOTE: Documentation on master branch is for alpha version, stable release is on [release/3.4](https://github.com/storybooks/storybook/tree/release/3.4/addons/)**
```sh
yarn add -D @storybook/addon-ondevice-notes
@ -23,7 +22,6 @@ import '@storybook/addon-ondevice-notes/register';
```
Then import `rn-addons.js` next to your `getStorybookUI` call.
```js
import './rn-addons';
```
@ -45,7 +43,6 @@ import { storiesOf } from '@storybook/react-native';
import Component from './Component';
storiesOf('Component', module).add('with some emoji', () => <Component />, {
notes: 'A very simple component'
});
storiesOf('Component', module)
.add('with some emoji', () => <Component />, { notes: 'A very simple component' });
```

2
addons/storyshots/storyshots-core/package.json
View File

@ -37,7 +37,7 @@
"devDependencies": {
"@storybook/addon-actions": "4.0.0-rc.6",
"@storybook/addon-links": "4.0.0-rc.6",
"@storybook/addons": "4.0.0-rc.6",
"@storybook/addons": "4.0.0-alpha.24",
"@storybook/react": "4.0.0-rc.6",
"enzyme-to-json": "^3.3.4",
"react": "^16.5.2"

112
addons/storyshots/storyshots-puppeteer/README.md
View File

@ -1,11 +1,10 @@
## Configure Storyshots for image snapshots
## Configure Storyshots for image snapshots ( alpha )
/\*\ **React-native** is **not supported** by this test function.
/*\ **React-native** is **not supported** by this test function.
Internally, it uses [jest-image-snapshot](https://github.com/americanexpress/jest-image-snapshot).
When willing to generate and compare image snapshots for your stories, you have two options:
- Have a storybook running (ie. accessible via http(s), for instance using `yarn run storybook`)
- Have a static build of the storybook (for instance, using `yarn run build-storybook`)
@ -14,79 +13,59 @@ Then you will need to reference the storybook URL (`file://...` if local, `http(
### Using default values for _imageSnapshots_
Then you can either create a new Storyshots instance or edit the one you previously used:
```js
import initStoryshots from '@storybook/addon-storyshots';
import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer';
initStoryshots({ suite: 'Image storyshots', test: imageSnapshot() });
initStoryshots({suite: 'Image storyshots', test: imageSnapshot()});
```
This will assume you have a storybook running on at _<http://localhost:6006>_.
Internally here are the steps:
- Launches a Chrome headless using [puppeteer](https://github.com/GoogleChrome/puppeteer)
- Browses each stories (calling _<http://localhost:6006/iframe.html?...>_ URL),
- Take screenshots & save all images under \_\_image_snapshots\_\_ folder.
- Take screenshots & save all images under _\_image_snapshots\__ folder.
### Specifying the storybook URL
If you want to set specific storybook URL, you can specify via the `storybookUrl` parameter, see below:
```js
import initStoryshots from '@storybook/addon-storyshots';
import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer';
initStoryshots({
suite: 'Image storyshots',
test: imageSnapshot({ storybookUrl: 'http://my-specific-domain.com:9010' })
});
initStoryshots({suite: 'Image storyshots', test: imageSnapshot({storybookUrl: 'http://my-specific-domain.com:9010'})});
```
The above config will use _<https://my-specific-domain.com:9010>_ for screenshots. You can also use query parameters in your URL (e.g. for setting a different background for your storyshots, if you use `@storybook/addon-backgrounds`).
You may also use a local static build of storybook if you do not want to run the webpack dev-server:
You may also use a local static build of storybook if you do not want to run the webpack dev-server:
```js
import initStoryshots from '@storybook/addon-storyshots';
import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer';
initStoryshots({
suite: 'Image storyshots',
test: imageSnapshot({ storybookUrl: 'file:///path/to/my/storybook-static' })
});
initStoryshots({suite: 'Image storyshots', test: imageSnapshot({storybookUrl: 'file:///path/to/my/storybook-static'})});
```
### Specifying options to _jest-image-snapshots_
If you wish to customize [jest-image-snapshot](https://github.com/americanexpress/jest-image-snapshot), then you can provide a `getMatchOptions` parameter that should return the options config object. Additionally, you can provide `beforeScreenshot` which is called before the screenshot is captured.
```js
import initStoryshots from '@storybook/addon-storyshots';
import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer';
const getMatchOptions = ({ context: { kind, story }, url }) => {
const getMatchOptions = ({context : {kind, story}, url}) => {
return {
failureThreshold: 0.2,
failureThresholdType: 'percent'
};
};
const beforeScreenshot = (page, { context: { kind, story }, url }) => {
failureThresholdType: 'percent',
}
}
const beforeScreenshot = (page, {context : {kind, story}, url}) => {
return new Promise(resolve =>
setTimeout(() => {
resolve();
}, 600)
);
};
initStoryshots({
suite: 'Image storyshots',
test: imageSnapshot({
storybookUrl: 'http://localhost:6006',
getMatchOptions,
beforeScreenshot
})
});
setTimeout(() => {
resolve();
}, 600)
)
}
initStoryshots({suite: 'Image storyshots', test: imageSnapshot({storybookUrl: 'http://localhost:6006', getMatchOptions, beforeScreenshot})});
```
`getMatchOptions` receives an object: `{ context: {kind, story}, url}`. _kind_ is the kind of the story and the _story_ its name. _url_ is the URL the browser will use to screenshot.
`beforeScreenshot` receives the [Puppeteer page instance](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#class-page) and an object: `{ context: {kind, story}, url}`. _kind_ is the kind of the story and the _story_ its name. _url_ is the URL the browser will use to screenshot. `beforeScreenshot` is part of the promise chain and is called after the browser navigation is completed but before the screenshot is taken. It allows for triggering events on the page elements and delaying the screenshot and can be used avoid regressions due to mounting animations.
@ -98,15 +77,12 @@ You might use `getGotoOptions` to specify options when the storybook is navigati
```js
import initStoryshots from '@storybook/addon-storyshots';
import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer';
const getGotoOptions = ({ context, url }) => {
const getGotoOptions = ({context, url}) => {
return {
waitUntil: 'networkidle0'
};
};
initStoryshots({
suite: 'Image storyshots',
test: imageSnapshot({ storybookUrl: 'http://localhost:6006', getGotoOptions })
});
waitUntil: 'networkidle0',
}
}
initStoryshots({suite: 'Image storyshots', test: imageSnapshot({storybookUrl: 'http://localhost:6006', getGotoOptions})});
```
### Specifying options to _screenshot()_ (puppeteer API)
@ -136,20 +112,14 @@ import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer';
const chromeExecutablePath = '/usr/local/bin/chrome';
initStoryshots({
suite: 'Image storyshots',
test: imageSnapshot({
storybookUrl: 'http://localhost:6006',
chromeExecutablePath
})
});
initStoryshots({suite: 'Image storyshots', test: imageSnapshot({storybookUrl: 'http://localhost:6006', chromeExecutablePath})});
```
### Customizing a `page` instance
Sometimes, there is a need to customize a page before it calls the `goto` api.
Sometimes, there is a need to customize a page before it calls the `goto` api.
An example of device emulation:
An example of device emulation:
```js
import initStoryshots from '@storybook/addon-storyshots';
@ -163,10 +133,10 @@ function customizePage(page) {
}
initStoryshots({
suite: 'Image storyshots',
suite: 'Image storyshots',
test: imageSnapshot({
storybookUrl: 'http://localhost:6006',
customizePage
storybookUrl: 'http://localhost:6006',
customizePage,
})
});
```
@ -184,21 +154,19 @@ You have two options here, you can either:
- Create a custom test file using Jest outside of the CRA scope:
A more robust approach would be to separate existing test files ran by create-react-app (anything `(test|spec).js` suffixed files) from the test files to run storyshots with image snapshots.
This use case can be achieved by using a custom name for the test file, ie something like `image-storyshots.runner.js`. This file will contains the `initStoryshots` call with image snapshots configuration.
Then you will create a separate script entry in your package.json, for instance
```json
{
"scripts": {
"image-snapshots": "jest image-storyshots.runner.js --config path/to/custom/jest.config.json"
A more robust approach would be to separate existing test files ran by create-react-app (anything `(test|spec).js` suffixed files) from the test files to run storyshots with image snapshots.
This use case can be achieved by using a custom name for the test file, ie something like `image-storyshots.runner.js`. This file will contains the `initStoryshots` call with image snapshots configuration.
Then you will create a separate script entry in your package.json, for instance
```json
{
"scripts": {
"image-snapshots" : "jest image-storyshots.runner.js --config path/to/custom/jest.config.json"
}
}
}
```
```
Note that you will certainly need a custom config file for Jest as you run it outside of the CRA scope and thus you do not have the built-in config.
Note that you will certainly need a custom config file for Jest as you run it outside of the CRA scope and thus you do not have the built-in config.
Once that's setup, you can run `yarn run image-snapshots` (or `npm run image-snapshots`).
Once that's setup, you can run `yarn run image-snapshots` (or `npm run image-snapshots`).
### Reminder

2
addons/storyshots/storyshots-puppeteer/package.json
View File

@ -30,6 +30,6 @@
"puppeteer": "^1.9.0"
},
"peerDependencies": {
"@storybook/addon-storyshots": "4.0.0-rc.6"
"@storybook/addon-storyshots": "4.0.0-alpha.16"
}
}

2
app/angular/README.md
View File

@ -12,7 +12,7 @@ So you can develop UI components in isolation without worrying about app specifi
```sh
cd my-angular-app
npx -p @storybook/cli sb init
npx -p @storybook/cli@rc sb init
```
For more information visit: [storybook.js.org](https://storybook.js.org)

2
app/ember/README.md
View File

@ -12,7 +12,7 @@ So you can develop UI components in isolation without worrying about app specifi
```sh
cd my-ember-app
npx -p @storybook/cli sb init
npx -p @storybook/cli@rc sb init
```
For more information visit: [storybook.js.org](https://storybook.js.org)

4
app/html/README.md
View File

@ -1,4 +1,4 @@
# Storybook for HTML
# Storybook for HTML <sup>alpha</sup>
---
@ -14,7 +14,7 @@ So you can develop UI components in isolation without worrying about app specifi
```sh
cd my-app
npx -p @storybook/cli sb init -t html
npx -p @storybook/cli@rc sb init -t html
```
For more information visit: [storybook.js.org](https://storybook.js.org)

2
app/marko/README.md
View File

@ -12,7 +12,7 @@ So you can develop UI components in isolation without worrying about app specifi
```sh
cd my-marko-app
npx -p @storybook/cli sb init
npx -p @storybook/cli@rc sb init
```
For more information visit: [storybook.js.org](https://storybook.js.org)

2
app/mithril/README.md
View File

@ -12,7 +12,7 @@ So you can develop UI components in isolation without worrying about app specifi
```sh
cd my-mithril-app
npx -p @storybook/cli sb init
npx -p @storybook/cli@rc sb init
```
For more information visit: [storybook.js.org](https://storybook.js.org)

2
app/polymer/README.md
View File

@ -14,7 +14,7 @@ So you can develop UI components in isolation without worrying about app specifi
```sh
cd my-polymer-app
npx -p @storybook/cli sb init
npx -p @storybook/cli@rc sb init
```
For more information visit: [storybook.js.org](https://storybook.js.org)

2
app/react-native/readme.md
View File

@ -12,7 +12,7 @@ The `storybook` CLI tool can be used to add Storybook to your React Native app.
```shell
cd my-rn-app
npx -p @storybook/cli sb init
npx -p @storybook/cli@rc sb init
```
The next thing you need to do is make Storybook UI visible in your app.

2
app/react/README.md
View File

@ -12,7 +12,7 @@ So you can develop UI components in isolation without worrying about app specifi
```sh
cd my-react-app
npx -p @storybook/cli sb init
npx -p @storybook/cli@rc sb init
```
For more information visit: [storybook.js.org](https://storybook.js.org)

4
app/riot/README.md
View File

@ -1,4 +1,4 @@
# Storybook for Riot
# Storybook for Riot <sup>alpha</sup>
---
@ -14,7 +14,7 @@ So you can develop UI components in isolation without worrying about app specifi
```sh
cd my-riot-app
npx -p @storybook/cli sb init
npx -p @storybook/cli@rc sb init
```
For more information visit: [storybook.js.org](https://storybook.js.org)

2
app/svelte/README.md
View File

@ -12,7 +12,7 @@ So you can develop UI components in isolation without worrying about app specifi
```sh
cd my-svelte-app
npx -p @storybook/cli sb init
npx -p @storybook/cli@rc sb init
```
For more information visit: [storybook.js.org](https://storybook.js.org)

2
app/vue/README.md
View File

@ -12,7 +12,7 @@ So you can develop UI components in isolation without worrying about app specifi
```sh
cd my-vue-app
npx -p @storybook/cli sb init
npx -p @storybook/cli@rc sb init
```
For more information visit: [storybook.js.org](https://storybook.js.org)

5
docs/src/pages/basics/live-examples/index.md
View File

@ -3,7 +3,8 @@ id: 'live-examples'
title: 'Live Examples'
---
### 4.0
### 4.0.alpha
> Note, this is an Alpha version. Some of the features still might not be released
- [React Official](https://storybooks-official.netlify.com)
- [Vue](https://storybooks-vue.netlify.com/)
@ -17,14 +18,12 @@ title: 'Live Examples'
- [Ember](https://storybooks-ember.netlify.com/)
### 3.4
- [React Official](https://release-3-4--storybooks-official.netlify.com)
- [Vue](https://release-3-4--storybooks-vue.netlify.com/)
- [Angular](https://release-3-4--storybooks-angular.netlify.com/)
- [Polymer](https://release-3-4--storybooks-polymer.netlify.com/)
### 3.3
- [React Official](https://release-3-3--storybooks-official.netlify.com)
- [Vue](https://release-3-3--storybooks-vue.netlify.com/)
- [Angular](https://release-3-3--storybooks-angular.netlify.com/)

4
docs/src/pages/basics/quick-start-guide/index.md
View File

@ -10,13 +10,13 @@ Get started using the automated command line tool. This command adds a set of bo
```sh
cd my-project-directory
npx -p @storybook/cli sb init
npx -p @storybook/cli@rc sb init
```
The tool inspects your `package.json` to determine which view layer you're using. If you want to develop HTML snippets in storybook, we can't determine that automatically. So to install storybook for HTML, use the `--type` flag to force that the HTML project type:
```
npx -p @storybook/cli sb init --type html
npx -p @storybook/cli@rc sb init --type html
```
To setup a project manually, take a look at the [Slow Start Guide](/basics/slow-start-guide/).

8
lib/cli/README.md
View File

@ -10,7 +10,7 @@ Just go to your project and run:
```sh
cd my-app
npx -p @storybook/cli sb init
npx -p @storybook/cli@rc sb init
```
That's all you've to do.
@ -24,7 +24,7 @@ The CLI supports yarn. If you have installed yarn in your system, it'll detect i
If you don't want to use `yarn` always you can use the `--use-npm` option like this:
```sh
npx -p @storybook/cli sb init --use-npm
npx -p @storybook/cli@rc sb init --use-npm
```
---
@ -34,7 +34,7 @@ npx -p @storybook/cli sb init --use-npm
It also supports flow files. By default, [jscodeshift](https://github.com/facebook/jscodeshift), the tool used to transform the source files, uses babel to read the files. To be able to transform any flow annotated file, you need to use the flow parser.
```sh
npx -p @storybook/cli sb init --parser flow
npx -p @storybook/cli@rc sb init --parser flow
```
For more information visit: [storybook.js.org](https://storybook.js.org)
@ -46,7 +46,7 @@ For more information visit: [storybook.js.org](https://storybook.js.org)
If the CLI cannot detect your project type, it will ask you. You can also force it to use a particular project type:
```sh
npx -p @storybook/cli sb init --type <type>
npx -p @storybook/cli@rc sb init --type <type>
```
Where type is one of the project types defined in [project_types.js](https://github.com/storybooks/storybook/blob/master/lib/cli/lib/project_types.js)

2
lib/cli/test/fixtures/react_scripts/README.md vendored
View File

@ -1509,7 +1509,7 @@ Then, run the following command inside your app’s directory:
```sh
cd my-react-app
npx -p @storybook/cli sb init
npx -p @storybook/cli@rc sb init
```
After that, follow the instructions on the screen.

2
lib/cli/test/fixtures/update_package_organisations/README.md vendored
View File

@ -1178,7 +1178,7 @@ You can also deploy your Storybook as a static app. This way, everyone in your t
Then, run the following command inside your app’s directory:
```sh
npx -p @storybook/cli sb init
npx -p @storybook/cli@rc sb init
```
After that, follow the instructions on the screen.