diff --git a/MIGRATION.md b/MIGRATION.md index ff58f5d7207..4fcc12abef6 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -140,7 +140,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@alpha sb init ``` ## From version 3.3.x to 3.4.x diff --git a/README.md b/README.md index 64847f2d79c..d12778a5bd7 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@alpha 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@alpha sb init ``` It runs a codemod to update all package names. Read all migration details in our [Migration Guide](MIGRATION.md) diff --git a/app/angular/README.md b/app/angular/README.md index 03f1dfe7cf4..9f3024bacad 100644 --- a/app/angular/README.md +++ b/app/angular/README.md @@ -11,14 +11,13 @@ So you can develop UI components in isolation without worrying about app specifi ## Getting Started ```sh -npm i -g @storybook/cli cd my-angular-app -storybook init +npx -p @storybook/cli@alpha sb init ``` For more information visit: [storybook.js.org](https://storybook.js.org) -* * * +--- Storybook also comes with a lot of [addons](https://storybook.js.org/addons/introduction) and a great API to customize as you wish. You can also build a [static version](https://storybook.js.org/basics/exporting-storybook) of your storybook and deploy it anywhere you want. diff --git a/app/ember/README.md b/app/ember/README.md index 0c1655aca86..b88152c99ff 100644 --- a/app/ember/README.md +++ b/app/ember/README.md @@ -11,20 +11,19 @@ So you can develop UI components in isolation without worrying about app specifi ## Getting Started ```sh -npm i -g @storybook/cli cd my-ember-app -storybook init +npx -p @storybook/cli@alpha sb init ``` For more information visit: [storybook.js.org](https://storybook.js.org) -* * * +--- Storybook also comes with a lot of [addons](https://storybook.js.org/addons/introduction) and a great API to customize as you wish. You can also build a [static version](https://storybook.js.org/basics/exporting-storybook) of your storybook and deploy it anywhere you want. ## Docs -- [Basics](https://storybook.js.org/basics/introduction) -- [Configurations](https://storybook.js.org/configurations/default-config) -- [Addons](https://storybook.js.org/addons/introduction) +- [Basics](https://storybook.js.org/basics/introduction) +- [Configurations](https://storybook.js.org/configurations/default-config) +- [Addons](https://storybook.js.org/addons/introduction) diff --git a/app/html/README.md b/app/html/README.md index 5468d60844e..78d02b76adf 100644 --- a/app/html/README.md +++ b/app/html/README.md @@ -1,6 +1,6 @@ # Storybook for HTML alpha -* * * +--- Storybook for HTML is a UI development environment for your plain HTML snippets. With it, you can visualize different states of your UI components and develop them interactively. @@ -13,14 +13,13 @@ So you can develop UI components in isolation without worrying about app specifi ## Getting Started ```sh -npm i -g @storybook/cli@alpha cd my-app -storybook init --html +npx -p @storybook/cli@alpha sb init -t html ``` For more information visit: [storybook.js.org](https://storybook.js.org) -* * * +--- Storybook also comes with a lot of [addons](https://storybook.js.org/addons/introduction) and a great API to customize as you wish. You can also build a [static version](https://storybook.js.org/basics/exporting-storybook) of your storybook and deploy it anywhere you want. diff --git a/app/marko/README.md b/app/marko/README.md index 7883633b84e..0194167de29 100644 --- a/app/marko/README.md +++ b/app/marko/README.md @@ -11,14 +11,13 @@ So you can develop UI components in isolation without worrying about app specifi ## Getting Started ```sh -npm i -g @storybook/cli cd my-marko-app -storybook init +npx -p @storybook/cli@alpha sb init ``` For more information visit: [storybook.js.org](https://storybook.js.org) -* * * +--- Storybook also comes with a lot of [addons](https://storybook.js.org/addons/introduction) and a great API to customize as you wish. You can also build a [static version](https://storybook.js.org/basics/exporting-storybook) of your storybook and deploy it anywhere you want. @@ -27,6 +26,6 @@ Here are some featured storybooks that you can reference to see how Storybook wo ## Docs -- [Basics](https://storybook.js.org/basics/introduction) -- [Configurations](https://storybook.js.org/configurations/default-config) -- [Addons](https://storybook.js.org/addons/introduction) +- [Basics](https://storybook.js.org/basics/introduction) +- [Configurations](https://storybook.js.org/configurations/default-config) +- [Addons](https://storybook.js.org/addons/introduction) diff --git a/app/mithril/README.md b/app/mithril/README.md index 37c4a84a82d..2c7c38a1955 100644 --- a/app/mithril/README.md +++ b/app/mithril/README.md @@ -11,14 +11,13 @@ So you can develop UI components in isolation without worrying about app specifi ## Getting Started ```sh -npm i -g @storybook/cli cd my-mithril-app -storybook init +npx -p @storybook/cli@alpha sb init ``` For more information visit: [storybook.js.org](https://storybook.js.org) -* * * +--- Storybook also comes with a lot of [addons](https://storybook.js.org/addons/introduction) and a great API to customize as you wish. You can also build a [static version](https://storybook.js.org/basics/exporting-storybook) of your storybook and deploy it anywhere you want. diff --git a/app/polymer/README.md b/app/polymer/README.md index 1876588041f..a642096f212 100644 --- a/app/polymer/README.md +++ b/app/polymer/README.md @@ -13,14 +13,13 @@ So you can develop UI components in isolation without worrying about app specifi ## Getting Started ```sh -npm i -g @storybook/cli cd my-polymer-app -storybook init +npx -p @storybook/cli@alpha sb init ``` For more information visit: [storybook.js.org](https://storybook.js.org) -* * * +--- Storybook also comes with a lot of [addons](https://storybook.js.org/addons/introduction) and a great API to customize as you wish. You can also build a [static version](https://storybook.js.org/basics/exporting-storybook) of your storybook and deploy it anywhere you want. diff --git a/app/react-native/readme.md b/app/react-native/readme.md index b30bcb7547f..e96857de650 100644 --- a/app/react-native/readme.md +++ b/app/react-native/readme.md @@ -11,8 +11,8 @@ For more information visit: [storybook.js.org](https://storybook.js.org) The `storybook` CLI tool can be used to add Storybook to your React Native app. Install the `storybook` tool if necessary and run it from your project directory with these commands: ```shell -npm -g i @storybook/cli -storybook init +cd my-rn-app +npx -p @storybook/cli@alpha sb init ``` The next thing you need to do is make Storybook UI visible in your app. @@ -22,16 +22,16 @@ The next thing you need to do is make Storybook UI visible in your app. The easiest way to use Storybook is to simply replace your App with the Storybook UI, which is possible by replacing `App.js` with a single line of code: ```js -export default from './storybook'; +export default from "./storybook"; ``` This will get you up and running quickly, but then you lose your app! There are multiple options here. for example, you can export conditionally: ```js -import StorybookUI from './storybook'; +import StorybookUI from "./storybook"; -import App from './app'; +import App from "./app"; module.exports = __DEV__ ? StorybookUI : App; ``` @@ -40,8 +40,8 @@ module.exports = __DEV__ ? StorybookUI : App; `StorybookUI` is simply a RN `View` component that can be embedded anywhere in your RN application, e.g. on a tab or within an admin screen. - ## Start Storybook server (optional) + If you want to control storybook from browser/VS Code/websockets you need to start the server. After initial setup start the storybook server with the storybook npm script. @@ -52,10 +52,11 @@ npm run storybook Now, you can open to view your storybook menus in the browser. ## Old standalone behaviour + Since storybook version v4.0 packager is removed from storybook. The suggested storybook usage is to include it inside your app. If you want to keep the old behaviour, you have to start the packager yourself with a different project root. - + ``` npm run storybook start -p 7007 | react-native start --projectRoot storybook ``` @@ -82,7 +83,7 @@ If you are using Android and you get the following error after running the app: The following parameters can be passed to the start command: ``` --h, --host +-h, --host host to listen on -p, --port port to listen on @@ -104,17 +105,17 @@ You can pass these parameters to getStorybookUI call in your storybook entry poi ``` { - onDeviceUI: Boolean (true) + onDeviceUI: Boolean (true) -- display navigator and addons on the device - disableWebsockets: Boolean (false) + disableWebsockets: Boolean (false) -- allows to display stories without running storybook server. Should be used with onDeviceUI - secured: Boolean (false) + secured: Boolean (false) -- use wss/https instead of ws/http - host: String (NativeModules.SourceCode.scriptURL) + host: String (NativeModules.SourceCode.scriptURL) -- host to use port: Number (7007) -- port to use - query: String ("") + query: String ("") -- additional query string to pass to websockets isUIHidden: Boolean (false) -- should the ui be closed initialy. @@ -123,7 +124,6 @@ You can pass these parameters to getStorybookUI call in your storybook entry poi } ``` - ## Learn More Check the `docs` directory in this repo for more advanced setup guides and other info. diff --git a/app/react/README.md b/app/react/README.md index d728b87fdb4..34b07631803 100644 --- a/app/react/README.md +++ b/app/react/README.md @@ -11,22 +11,21 @@ So you can develop UI components in isolation without worrying about app specifi ## Getting Started ```sh -npm i -g @storybook/cli cd my-react-app -storybook init +npx -p @storybook/cli@alpha sb init ``` For more information visit: [storybook.js.org](https://storybook.js.org) -* * * +--- Storybook also comes with a lot of [addons](https://storybook.js.org/addons/introduction) and a great API to customize as you wish. You can also build a [static version](https://storybook.js.org/basics/exporting-storybook) of your storybook and deploy it anywhere you want. Here are some featured storybooks that you can reference to see how Storybook works: -- [Demo of React Dates](http://airbnb.io/react-dates/) - [source](https://github.com/airbnb/react-dates) -- [Demo of React Native Web](http://necolas.github.io/react-native-web/storybook/) - [source](https://github.com/necolas/react-native-web) +- [Demo of React Dates](http://airbnb.io/react-dates/) - [source](https://github.com/airbnb/react-dates) +- [Demo of React Native Web](http://necolas.github.io/react-native-web/storybook/) - [source](https://github.com/necolas/react-native-web) ## Typescript @@ -34,6 +33,6 @@ If you are using Typescript, make sure you have the type definitions installed v ## Docs -- [Basics](https://storybook.js.org/basics/introduction) -- [Configurations](https://storybook.js.org/configurations/default-config) -- [Addons](https://storybook.js.org/addons/introduction) +- [Basics](https://storybook.js.org/basics/introduction) +- [Configurations](https://storybook.js.org/configurations/default-config) +- [Addons](https://storybook.js.org/addons/introduction) diff --git a/app/riot/README.md b/app/riot/README.md index d08973a3f8d..5a8b5da4e32 100644 --- a/app/riot/README.md +++ b/app/riot/README.md @@ -1,6 +1,6 @@ # Storybook for Riot alpha -* * * +--- Storybook for Riot is a UI development environment for the components written with riot.js. With it, you can visualize different states of your UI components and develop them interactively. @@ -13,14 +13,13 @@ So you can develop UI components in isolation without worrying about app specifi ## Getting Started ```sh -npm i -g @storybook/cli -cd my-app -storybook init +cd my-riot-app +npx -p @storybook/cli@alpha sb init ``` For more information visit: [storybook.js.org](https://storybook.js.org) -* * * +--- Storybook also comes with a lot of [addons](https://storybook.js.org/addons/introduction) and a great API to customize as you wish. You can also build a [static version](https://storybook.js.org/basics/exporting-storybook) of your storybook and deploy it anywhere you want. diff --git a/app/svelte/README.md b/app/svelte/README.md index 59b84379679..33fb8993c85 100644 --- a/app/svelte/README.md +++ b/app/svelte/README.md @@ -11,14 +11,13 @@ So you can develop UI components in isolation without worrying about app specifi ## Getting Started ```sh -npm i -g @storybook/cli cd my-svelte-app -storybook init +npx -p @storybook/cli@alpha sb init ``` For more information visit: [storybook.js.org](https://storybook.js.org) -* * * +--- Storybook also comes with a lot of [addons](https://storybook.js.org/addons/introduction) and a great API to customize as you wish. You can also build a [static version](https://storybook.js.org/basics/exporting-storybook) of your storybook and deploy it anywhere you want. diff --git a/app/vue/README.md b/app/vue/README.md index 807850ace52..3db4d42fa5a 100644 --- a/app/vue/README.md +++ b/app/vue/README.md @@ -11,21 +11,21 @@ So you can develop UI components in isolation without worrying about app specifi ## Getting Started ```sh -npm i -g @storybook/cli cd my-vue-app -storybook init +npx -p @storybook/cli@alpha sb init ``` For more information visit: [storybook.js.org](https://storybook.js.org) ## Starter Storybook-for-Vue Boilerplate project with [Vuetify](https://github.com/vuetifyjs/vuetify) Material Component Framework + -* * * +--- Storybook also comes with a lot of [addons](https://storybook.js.org/addons/introduction) and a great API to customize as you wish. You can also build a [static version](https://storybook.js.org/basics/exporting-storybook) of your storybook and deploy it anywhere you want. ## Vue Notes -- When using global custom components or extension (e.g `Vue.use`). You will need to declare those in the `./storybook/config.js`. +- When using global custom components or extension (e.g `Vue.use`). You will need to declare those in the `./storybook/config.js`. diff --git a/docs/src/pages/basics/quick-start-guide/index.md b/docs/src/pages/basics/quick-start-guide/index.md index 9edd4c14bcf..0b9ee5df51f 100644 --- a/docs/src/pages/basics/quick-start-guide/index.md +++ b/docs/src/pages/basics/quick-start-guide/index.md @@ -4,19 +4,19 @@ title: "Quick Start Guide" --- Storybook supports many different frontend view layers with more coming! -React, Vue, Angular, Mithril, Marko, HTML and Svelte are currently supported. Follow these steps to get started with Storybook. +React, Vue, Angular, Mithril, Marko, HTML, Svelte, Meteor, and Ember are currently supported. Follow these steps to get started with Storybook. Get started using the automated command line tool. This command adds a set of boilerplate files for Storybook in your project: ```sh cd my-project-directory -npx -p @storybook/cli sb init +npx -p @storybook/cli@alpha 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, add the `--html` argument: +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 --html +npx -p @storybook/cli@alpha sb init --type html ``` To setup a project manually, take a look at the [Slow Start Guide](/basics/slow-start-guide/). @@ -31,7 +31,8 @@ Storybook should now be available in the browser with a link provided in the con --- -To learn more about what `getstorybook` command does, have a look at the slow start guides: +To learn more about what the Storybook CLI command `sb init` command does, have a look at the slow start guides: + - [React](/basics/guide-react/) - [React Native](/basics/guide-react-native/) - [Vue](/basics/guide-vue/) diff --git a/lib/cli/README.md b/lib/cli/README.md index e70128b09b0..a01525bb856 100644 --- a/lib/cli/README.md +++ b/lib/cli/README.md @@ -1,46 +1,52 @@ # Storybook CLI -Storybook CLI (*Command Line Interface*) is the easiest way to add [Storybook](https://github.com/storybooks/storybook) to your project. +Storybook CLI (_Command Line Interface_) is the easiest way to add [Storybook](https://github.com/storybooks/storybook) to your project. In the future it will also add other useful generators and migration tooling. ![Screenshot](docs/getstorybook.png) -First install the storybook CLI globally. +Just go to your project and run: ```sh -npm i -g @storybook/cli -``` - -Then go to your project run: - -```sh -storybook init +cd my-app +npx -p @storybook/cli@alpha sb init ``` That's all you've to do. -* * * +--- ## [Yarn](https://github.com/yarnpkg/yarn) support -It also supports yarn. -If you have installed yarn in your system, it'll detect it and use `yarn` instead of `npm`. +The CLI supports yarn. If you have installed yarn in your system, it'll detect it and use `yarn` instead of `npm`. If you don't want to use `yarn` always you can use the `--use-npm` option like this: ```sh -storybook init --use-npm +npx -p @storybook/cli@alpha sb init --use-npm ``` -* * * +--- ## [Flow](https://flow.org/) support 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 -storybook init --parser flow +npx -p @storybook/cli@alpha sb init --parser flow ``` For more information visit: [storybook.js.org](https://storybook.js.org) + +--- + +## Manually specify project type + +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@alpha 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 d58456fd239..96a9ab7ec52 100644 --- a/lib/cli/test/fixtures/react_scripts/README.md +++ b/lib/cli/test/fixtures/react_scripts/README.md @@ -1505,16 +1505,11 @@ You can also deploy your Storybook or style guide as a static app. This way, eve Storybook is a development environment for React UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components. -First, install the following npm package globally: - -```sh -npm install -g @storybook/cli -``` - Then, run the following command inside your app’s directory: ```sh -storybook init +cd my-react-app +npx -p @storybook/cli@alpha 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 e5108ea7432..51636f4c7f7 100644 --- a/lib/cli/test/fixtures/update_package_organisations/README.md +++ b/lib/cli/test/fixtures/update_package_organisations/README.md @@ -1175,16 +1175,10 @@ You can also deploy your Storybook as a static app. This way, everyone in your t **Here’s how to setup your app with Storybook:** -First, install the following npm package globally: - -```sh -npm install -g storybook -``` - Then, run the following command inside your app’s directory: ```sh -storybook init +npx -p @storybook/cli@alpha sb init ``` After that, follow the instructions on the screen.