Skip to content

Commit

Permalink
Revert "Clean up alpha/rc for 4.0 release"
Browse files Browse the repository at this point in the history
  • Loading branch information
shilman authored Oct 25, 2018
1 parent e40353e commit 4818baa
Show file tree
Hide file tree
Showing 25 changed files with 93 additions and 134 deletions.
7 changes: 0 additions & 7 deletions .prettierrc

This file was deleted.

2 changes: 1 addition & 1 deletion MIGRATION.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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/).
Expand All @@ -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)
Expand Down
26 changes: 14 additions & 12 deletions RELEASES.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand Down Expand Up @@ -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
Expand All @@ -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 changes: 8 additions & 8 deletions addons/notes/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -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 changes: 3 additions & 6 deletions addons/ondevice-notes/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -23,7 +22,6 @@ import '@storybook/addon-ondevice-notes/register';
```

Then import `rn-addons.js` next to your `getStorybookUI` call.

```js
import './rn-addons';
```
Expand All @@ -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 changes: 1 addition & 1 deletion addons/storyshots/storyshots-core/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
112 changes: 40 additions & 72 deletions addons/storyshots/storyshots-puppeteer/README.md
Original file line number Diff line number Diff line change
@@ -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`)

Expand All @@ -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.
Expand All @@ -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)
Expand Down Expand Up @@ -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';
Expand All @@ -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,
})
});
```
Expand All @@ -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

Expand Down
2 changes: 1 addition & 1 deletion addons/storyshots/storyshots-puppeteer/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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 changes: 1 addition & 1 deletion app/angular/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
2 changes: 1 addition & 1 deletion app/ember/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
4 changes: 2 additions & 2 deletions app/html/README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# Storybook for HTML
# Storybook for HTML <sup>alpha</sup>

---

Expand All @@ -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)
Expand Down
Loading

0 comments on commit 4818baa

Please sign in to comment.