Merge pull request #4564 from storybooks/revert-4563-shilman/40-relea…

…se-cleanup

Revert "Clean up alpha/rc for 4.0 release"

MIGRATION.md

@@ -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

README.md

@@ -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)

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.
+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.
+

addons/notes/README.md

@@ -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 } }
+);
 ```

addons/ondevice-notes/README.md

@@ -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' });
 ```

addons/storyshots/storyshots-core/package.json

@@ -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"

addons/storyshots/storyshots-puppeteer/README.md

@@ -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
 

addons/storyshots/storyshots-puppeteer/package.json

@@ -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"
   }
 }

app/angular/README.md

@@ -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)

app/ember/README.md

@@ -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)

app/html/README.md

@@ -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)