From 4818baa55c5ca97e8ffb4de425b963fa3f625240 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Fri, 26 Oct 2018 00:25:17 +0800 Subject: [PATCH] Revert "Clean up alpha/rc for 4.0 release" --- .prettierrc | 7 -- MIGRATION.md | 2 +- README.md | 4 +- RELEASES.md | 26 ++-- addons/notes/README.md | 16 +-- addons/ondevice-notes/README.md | 9 +- .../storyshots/storyshots-core/package.json | 2 +- .../storyshots/storyshots-puppeteer/README.md | 112 +++++++----------- .../storyshots-puppeteer/package.json | 2 +- app/angular/README.md | 2 +- app/ember/README.md | 2 +- app/html/README.md | 4 +- app/marko/README.md | 2 +- app/mithril/README.md | 2 +- app/polymer/README.md | 2 +- app/react-native/readme.md | 2 +- app/react/README.md | 2 +- app/riot/README.md | 4 +- app/svelte/README.md | 2 +- app/vue/README.md | 2 +- docs/src/pages/basics/live-examples/index.md | 5 +- .../pages/basics/quick-start-guide/index.md | 4 +- lib/cli/README.md | 8 +- lib/cli/test/fixtures/react_scripts/README.md | 2 +- .../update_package_organisations/README.md | 2 +- 25 files changed, 93 insertions(+), 134 deletions(-) delete mode 100644 .prettierrc diff --git a/.prettierrc b/.prettierrc deleted file mode 100644 index 6c3f240ceef7..000000000000 --- a/.prettierrc +++ /dev/null @@ -1,7 +0,0 @@ -{ - "printWidth": 100, - "tabWidth": 2, - "bracketSpacing": true, - "trailingComma": "es5", - "singleQuote": true -} diff --git a/MIGRATION.md b/MIGRATION.md index d94b7cb20168..117c3a8a2bda 100644 --- a/MIGRATION.md +++ b/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 diff --git a/README.md b/README.md index 0fe6e2eb7da8..d66a4e0f2e31 100644 --- a/README.md +++ b/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) diff --git a/RELEASES.md b/RELEASES.md index 38d98ca644a1..e4cf86c82d4f 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. +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: ) - - 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 731bb0924a2e..dfc726831d47 100644 --- a/addons/notes/README.md +++ b/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', () => , { - notes: 'A very simple component' -}); +storiesOf('Component', module) + .add('with some emoji', () => , { 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', () => , { - notes: { markdown: someMarkdownText } -}); +storiesOf('Component', module).add( + 'With Markdown', + () => , + { notes: { markdown: someMarkdownText } } +); ``` diff --git a/addons/ondevice-notes/README.md b/addons/ondevice-notes/README.md index 95f8ae9898cf..3a2faceef246 100644 --- a/addons/ondevice-notes/README.md +++ b/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', () => , { - notes: 'A very simple component' -}); +storiesOf('Component', module) + .add('with some emoji', () => , { notes: 'A very simple component' }); ``` diff --git a/addons/storyshots/storyshots-core/package.json b/addons/storyshots/storyshots-core/package.json index 0c7bef196765..5fd229ece8d6 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-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" diff --git a/addons/storyshots/storyshots-puppeteer/README.md b/addons/storyshots/storyshots-puppeteer/README.md index 6874759f5d54..0295d86cd20d 100644 --- a/addons/storyshots/storyshots-puppeteer/README.md +++ b/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 __. 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`). -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 diff --git a/addons/storyshots/storyshots-puppeteer/package.json b/addons/storyshots/storyshots-puppeteer/package.json index fd3eeaa8fe8a..ae989cc23084 100644 --- a/addons/storyshots/storyshots-puppeteer/package.json +++ b/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" } } diff --git a/app/angular/README.md b/app/angular/README.md index 277bfb85b948..5db499f6e51c 100644 --- a/app/angular/README.md +++ b/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) diff --git a/app/ember/README.md b/app/ember/README.md index d5020dc644dd..46fb08720f24 100644 --- a/app/ember/README.md +++ b/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) diff --git a/app/html/README.md b/app/html/README.md index 917bc52e83ea..358ab8d3ca5c 100644 --- a/app/html/README.md +++ b/app/html/README.md @@ -1,4 +1,4 @@ -# Storybook for HTML +# Storybook for HTML alpha --- @@ -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) diff --git a/app/marko/README.md b/app/marko/README.md index 34d864249766..da9f6317ab06 100644 --- a/app/marko/README.md +++ b/app/marko/README.md @@ -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) diff --git a/app/mithril/README.md b/app/mithril/README.md index c37ae1abf283..80dab0607b8c 100644 --- a/app/mithril/README.md +++ b/app/mithril/README.md @@ -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) diff --git a/app/polymer/README.md b/app/polymer/README.md index 75c3445cb5c1..50a7d232206f 100644 --- a/app/polymer/README.md +++ b/app/polymer/README.md @@ -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) diff --git a/app/react-native/readme.md b/app/react-native/readme.md index 7a3f945cfcf3..ce23ab6a46bf 100644 --- a/app/react-native/readme.md +++ b/app/react-native/readme.md @@ -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. diff --git a/app/react/README.md b/app/react/README.md index 9c4856467819..12cab706eff3 100644 --- a/app/react/README.md +++ b/app/react/README.md @@ -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) diff --git a/app/riot/README.md b/app/riot/README.md index ef710c249f32..fcdbaa47d6ad 100644 --- a/app/riot/README.md +++ b/app/riot/README.md @@ -1,4 +1,4 @@ -# Storybook for Riot +# Storybook for Riot alpha --- @@ -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) diff --git a/app/svelte/README.md b/app/svelte/README.md index ecf3c567541e..423919e35aee 100644 --- a/app/svelte/README.md +++ b/app/svelte/README.md @@ -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) diff --git a/app/vue/README.md b/app/vue/README.md index 81cbb180f656..0fdcc1faf731 100644 --- a/app/vue/README.md +++ b/app/vue/README.md @@ -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) diff --git a/docs/src/pages/basics/live-examples/index.md b/docs/src/pages/basics/live-examples/index.md index 1d4fc436d039..f063c4870807 100644 --- a/docs/src/pages/basics/live-examples/index.md +++ b/docs/src/pages/basics/live-examples/index.md @@ -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/) diff --git a/docs/src/pages/basics/quick-start-guide/index.md b/docs/src/pages/basics/quick-start-guide/index.md index ba92dc589482..f0daeae62662 100644 --- a/docs/src/pages/basics/quick-start-guide/index.md +++ b/docs/src/pages/basics/quick-start-guide/index.md @@ -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/). diff --git a/lib/cli/README.md b/lib/cli/README.md index 93e6acdf8f84..c1c2b06e4bd8 100644 --- a/lib/cli/README.md +++ b/lib/cli/README.md @@ -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 +npx -p @storybook/cli@rc sb init --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) diff --git a/lib/cli/test/fixtures/react_scripts/README.md b/lib/cli/test/fixtures/react_scripts/README.md index 36a746ca9518..fc581cdb2da9 100644 --- a/lib/cli/test/fixtures/react_scripts/README.md +++ b/lib/cli/test/fixtures/react_scripts/README.md @@ -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. diff --git a/lib/cli/test/fixtures/update_package_organisations/README.md b/lib/cli/test/fixtures/update_package_organisations/README.md index 2da029bd501c..223649db1626 100644 --- a/lib/cli/test/fixtures/update_package_organisations/README.md +++ b/lib/cli/test/fixtures/update_package_organisations/README.md @@ -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.