mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-05 08:01:20 +08:00
Merge pull request #4407 from storybooks/shilman/cli-rename-in-readmes
Update docs with CLI rename
This commit is contained in:
Michael Shilman
GitHub
commit
6ef947f540
@ -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
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# Storybook for HTML <sup>alpha</sup>
|
||||
|
||||
* * *
|
||||
---
|
||||
|
||||
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.
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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 <http://localhost:7007> 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 <host>
|
||||
-h, --host <host>
|
||||
host to listen on
|
||||
-p, --port <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.
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# Storybook for Riot <sup>alpha</sup>
|
||||
|
||||
* * *
|
||||
---
|
||||
|
||||
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.
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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
|
||||
|
||||
<https://github.com/white-rabbit-japan/vuetify-storyboard-boilerplate>
|
||||
|
||||
* * *
|
||||
---
|
||||
|
||||
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`.
|
||||
|
||||
@ -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/)
|
||||
|
||||
@ -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.
|
||||
|
||||
|
||||
|
||||
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 <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)
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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.
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user