From dfe2a8fd4adb5fb84a1dace70a9db9727347f083 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Mon, 29 Oct 2018 19:06:15 +0800 Subject: [PATCH] Fix problems from reverted cleanup --- .prettierrc | 7 ++ README.md | 26 ++--- RELEASES.md | 26 ++--- addons/notes/README.md | 3 +- addons/ondevice-notes/README.md | 1 + .../storyshots/storyshots-core/package.json | 2 +- .../storyshots/storyshots-puppeteer/README.md | 103 +++++++++++------- app/html/README.md | 2 +- app/riot/README.md | 2 +- docs/src/pages/basics/live-examples/index.md | 5 +- 10 files changed, 105 insertions(+), 72 deletions(-) create mode 100644 .prettierrc diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000000..6c3f240cee --- /dev/null +++ b/.prettierrc @@ -0,0 +1,7 @@ +{ + "printWidth": 100, + "tabWidth": 2, + "bracketSpacing": true, + "trailingComma": "es5", + "singleQuote": true +} diff --git a/README.md b/README.md index 5da3292fd6..c6ed606c65 100644 --- a/README.md +++ b/README.md @@ -79,19 +79,19 @@ For additional help, join us [in our Slack](https://now-examples-slackin-rrirkqo ### Supported Frameworks -| Framework | Demo latest | Demo prerelease | | -| --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------- | ---------------------------------------------------------------------------------------------- | -| [React](app/react) | [v3.4.x](https://release-3-4--storybooks-official.netlify.com), [v3.3.x](https://release-3-3--storybooks-official.netlify.com) | [v4.0.0](https://storybooks-official.netlify.com) | [![React](https://img.shields.io/npm/dt/@storybook/react.svg)](app/react) | -| [React Native](app/react-native) | - | - | [![React Native](https://img.shields.io/npm/dt/@storybook/react-native.svg)](app/react-native) | -| [Vue](app/vue) | [v3.4.x](https://release-3-4--storybooks-vue.netlify.com/), [v3.3.x](https://release-3-3--storybooks-vue.netlify.com/) | [v4.0.0](https://storybooks-vue.netlify.com/) | [![Vue](https://img.shields.io/npm/dt/@storybook/vue.svg)](app/vue) | -| [Angular](app/angular) | [v3.4.x](https://release-3-4--storybooks-angular.netlify.com/), [v3.3.x](https://release-3-3--storybooks-angular.netlify.com/) | [v4.0.0](https://storybooks-angular.netlify.com/) | [![Angular](https://img.shields.io/npm/dt/@storybook/angular.svg)](app/angular) | -| [Polymer](app/polymer) | [v3.4.x](https://release-3-4--storybooks-polymer.netlify.com/) | [v4.0.0](https://storybooks-polymer.netlify.com/) | [![Polymer](https://img.shields.io/npm/dt/@storybook/polymer.svg)](app/polymer) | -| [Mithril](app/mithril) alpha | - | [v4.0.0](https://storybooks-mithril.netlify.com/) | [![Mithril](https://img.shields.io/npm/dt/@storybook/mithril.svg)](app/mithril) | -| [Marko](app/marko) alpha | - | [v4.0.0](https://storybooks-marko.netlify.com/) | [![Marko](https://img.shields.io/npm/dt/@storybook/marko.svg)](app/marko) | -| [HTML](app/html) alpha | - | [v4.0.0](https://storybooks-html.netlify.com/) | [![HTML](https://img.shields.io/npm/dt/@storybook/html.svg)](app/html) | -| [Svelte](app/svelte) alpha | - | [v4.0.0](https://storybooks-svelte.netlify.com/) | [![Svelte](https://img.shields.io/npm/dt/@storybook/svelte.svg)](app/svelte) | -| [Riot](app/riot) alpha | - | [v4.0.0](https://storybooks-riot.netlify.com/) | [![Riot](https://img.shields.io/npm/dt/@storybook/riot.svg)](app/riot) | -| [Ember](app/ember) alpha | - | [v4.0.0](https://storybooks-ember.netlify.com/) | [![Ember](https://img.shields.io/npm/dt/@storybook/ember.svg)](app/ember) | +| Framework | Demo latest | Demo prerelease | | +| -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------- | ---------------------------------------------------------------------------------------------- | +| [React](app/react) | [v3.4.x](https://release-3-4--storybooks-official.netlify.com), [v3.3.x](https://release-3-3--storybooks-official.netlify.com) | [v4.0.0](https://storybooks-official.netlify.com) | [![React](https://img.shields.io/npm/dt/@storybook/react.svg)](app/react) | +| [React Native](app/react-native) | - | - | [![React Native](https://img.shields.io/npm/dt/@storybook/react-native.svg)](app/react-native) | +| [Vue](app/vue) | [v3.4.x](https://release-3-4--storybooks-vue.netlify.com/), [v3.3.x](https://release-3-3--storybooks-vue.netlify.com/) | [v4.0.0](https://storybooks-vue.netlify.com/) | [![Vue](https://img.shields.io/npm/dt/@storybook/vue.svg)](app/vue) | +| [Angular](app/angular) | [v3.4.x](https://release-3-4--storybooks-angular.netlify.com/), [v3.3.x](https://release-3-3--storybooks-angular.netlify.com/) | [v4.0.0](https://storybooks-angular.netlify.com/) | [![Angular](https://img.shields.io/npm/dt/@storybook/angular.svg)](app/angular) | +| [Polymer](app/polymer) | [v3.4.x](https://release-3-4--storybooks-polymer.netlify.com/) | [v4.0.0](https://storybooks-polymer.netlify.com/) | [![Polymer](https://img.shields.io/npm/dt/@storybook/polymer.svg)](app/polymer) | +| [Mithril](app/mithril) | - | [v4.0.0](https://storybooks-mithril.netlify.com/) | [![Mithril](https://img.shields.io/npm/dt/@storybook/mithril.svg)](app/mithril) | +| [Marko](app/marko) | - | [v4.0.0](https://storybooks-marko.netlify.com/) | [![Marko](https://img.shields.io/npm/dt/@storybook/marko.svg)](app/marko) | +| [HTML](app/html) | - | [v4.0.0](https://storybooks-html.netlify.com/) | [![HTML](https://img.shields.io/npm/dt/@storybook/html.svg)](app/html) | +| [Svelte](app/svelte) | - | [v4.0.0](https://storybooks-svelte.netlify.com/) | [![Svelte](https://img.shields.io/npm/dt/@storybook/svelte.svg)](app/svelte) | +| [Riot](app/riot) | - | [v4.0.0](https://storybooks-riot.netlify.com/) | [![Riot](https://img.shields.io/npm/dt/@storybook/riot.svg)](app/riot) | +| [Ember](app/ember) | - | [v4.0.0](https://storybooks-ember.netlify.com/) | [![Ember](https://img.shields.io/npm/dt/@storybook/ember.svg)](app/ember) | ### Sub Projects diff --git a/RELEASES.md b/RELEASES.md index e4cf86c82d..38d98ca644 100644 --- a/RELEASES.md +++ b/RELEASES.md @@ -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. For example, currently `Vue` support is in `alpha`, although it contains potentially controversial changes to addons. +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. 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,7 +88,6 @@ 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 @@ -100,20 +99,19 @@ 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: ) - - Once it's implemented, the discussion may be occur on the PR (ex: ) - - 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: ) + - Once it's implemented, the discussion may be occur on the PR (ex: ) + - 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. diff --git a/addons/notes/README.md b/addons/notes/README.md index ef980d749d..6d19c6a1e1 100644 --- a/addons/notes/README.md +++ b/addons/notes/README.md @@ -7,7 +7,8 @@ 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/3.4](https://github.com/storybooks/storybook/tree/release/3.4/addons/)** + +**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/)** ```sh yarn add -D @storybook/addon-notes diff --git a/addons/ondevice-notes/README.md b/addons/ondevice-notes/README.md index 02ce38a86d..09e549869b 100644 --- a/addons/ondevice-notes/README.md +++ b/addons/ondevice-notes/README.md @@ -23,6 +23,7 @@ import '@storybook/addon-ondevice-notes/register'; ``` Then import `rn-addons.js` next to your `getStorybookUI` call. + ```js import './rn-addons'; ``` diff --git a/addons/storyshots/storyshots-core/package.json b/addons/storyshots/storyshots-core/package.json index 0ceeb30cdf..22aec5f9da 100644 --- a/addons/storyshots/storyshots-core/package.json +++ b/addons/storyshots/storyshots-core/package.json @@ -37,7 +37,7 @@ "devDependencies": { "@storybook/addon-actions": "4.0.0", "@storybook/addon-links": "4.0.0", - "@storybook/addons": "4.0.0-alpha.24", + "@storybook/addons": "4.0.0", "@storybook/react": "4.0.0", "enzyme-to-json": "^3.3.4", "react": "^16.6.0" diff --git a/addons/storyshots/storyshots-puppeteer/README.md b/addons/storyshots/storyshots-puppeteer/README.md index 0295d86cd2..61de63911b 100644 --- a/addons/storyshots/storyshots-puppeteer/README.md +++ b/addons/storyshots/storyshots-puppeteer/README.md @@ -1,10 +1,11 @@ -## Configure Storyshots for image snapshots ( alpha ) +## Configure Storyshots for image snapshots -/*\ **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`) @@ -13,59 +14,75 @@ 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 __. Internally here are the steps: + - Launches a Chrome headless using [puppeteer](https://github.com/GoogleChrome/puppeteer) - Browses each stories (calling __ 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 __ 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`). +The above config will use __ 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: + ```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}) => { + }; +}; +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. @@ -77,12 +94,15 @@ 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})}); + }; +}; +initStoryshots({ + suite: 'Image storyshots', + test: imageSnapshot({ storybookUrl: 'http://localhost:6006', getGotoOptions }), +}); ``` ### Specifying options to _screenshot()_ (puppeteer API) @@ -112,14 +132,17 @@ 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'; @@ -133,11 +156,11 @@ function customizePage(page) { } initStoryshots({ - suite: 'Image storyshots', + suite: 'Image storyshots', test: imageSnapshot({ - storybookUrl: 'http://localhost:6006', - customizePage, - }) + storybookUrl: 'http://localhost:6006', + customizePage, + }), }); ``` @@ -154,19 +177,21 @@ 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 diff --git a/app/html/README.md b/app/html/README.md index 137a3110a7..917bc52e83 100644 --- a/app/html/README.md +++ b/app/html/README.md @@ -1,4 +1,4 @@ -# Storybook for HTML alpha +# Storybook for HTML --- diff --git a/app/riot/README.md b/app/riot/README.md index beba9e6e9e..ef710c249f 100644 --- a/app/riot/README.md +++ b/app/riot/README.md @@ -1,4 +1,4 @@ -# Storybook for Riot alpha +# Storybook for Riot --- diff --git a/docs/src/pages/basics/live-examples/index.md b/docs/src/pages/basics/live-examples/index.md index f063c48708..1d4fc436d0 100644 --- a/docs/src/pages/basics/live-examples/index.md +++ b/docs/src/pages/basics/live-examples/index.md @@ -3,8 +3,7 @@ id: 'live-examples' title: 'Live Examples' --- -### 4.0.alpha -> Note, this is an Alpha version. Some of the features still might not be released +### 4.0 - [React Official](https://storybooks-official.netlify.com) - [Vue](https://storybooks-vue.netlify.com/) @@ -18,12 +17,14 @@ 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/)