Merge pull request #14794 from storybookjs/docs/npx-sb-init

Prefer `npx sb init` installation
storybookjs · May 4, 2021 · 60c864b · 60c864b
2 parents 6daa34d + cff4653
commit 60c864b
Show file tree

Hide file tree

Showing 20 changed files with 56 additions and 64 deletions.
diff --git a/.bettercodehub.yml b/.bettercodehub.yml
diff --git 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 sb init
 ```
 
 For more information visit: [storybook.js.org](https://storybook.js.org)

diff --git a/app/aurelia/README.md b/app/aurelia/README.md
@@ -12,7 +12,7 @@ So you can develop UI components in isolation without worrying about app specifi
 
 ```sh
 cd my-aurelia-app
-npx -p @storybook/cli sb init
+npx 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
@@ -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 sb init
 ```
 
 For more information visit: [storybook.js.org](https://storybook.js.org)
@@ -29,13 +29,15 @@ You can also build a [static version](https://storybook.js.org/docs/ember/workfl
 - [Addons](https://storybook.js.org/docs/ember/configure/storybook-addons)
 
 ## Working with polyfills
+
 If you need to use a polyfill that is already in use in our Ember application,
 you will need to add some options to have Storybook working with them.
 
 In this example we'll use the [named-block-polyfill](https://github.com/ember-polyfills/ember-named-blocks-polyfill).
 This example also assume that you already have the package in your `package.json`.
 
-In your `.storybook/main.js` you can add the following lines: 
+In your `.storybook/main.js` you can add the following lines:
+
 ```javascript
 const namedBlockPolyfill = require('ember-named-blocks-polyfill/lib/named-blocks-polyfill-plugin');
 

diff --git a/app/html/README.md b/app/html/README.md
@@ -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 sb init -t html
 ```
 
 For more information visit: [storybook.js.org](https://storybook.js.org)

diff --git a/app/marionette/README.md b/app/marionette/README.md
@@ -1,4 +1,4 @@
-# Storybook for Marionette.js 
+# Storybook for Marionette.js
 
 ---
 
@@ -14,12 +14,12 @@ So you can develop UI components in isolation without worrying about app specifi
 
 ```sh
 cd my-app
-npx -p @storybook/cli sb init
+npx 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/docs/marionette/configure/storybook-addons) and a great API to customize as you wish.
-You can also build a [static version](https://storybook.js.org/docs/marionette/workflows/publish-storybook) of your storybook and deploy it anywhere you want.
+You can also build a [static version](https://storybook.js.org/docs/marionette/workflows/publish-storybook) of your storybook and deploy it anywhere you want.
diff --git 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 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
@@ -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 sb init
 ```
 
 For more information visit: [storybook.js.org](https://storybook.js.org)

diff --git a/app/preact/README.md b/app/preact/README.md
@@ -12,7 +12,7 @@ So you can develop UI components in isolation without worrying about app specifi
 
 ```sh
 cd my-preact-app
-npx -p @storybook/cli sb init
+npx sb init
 ```
 
 For more information visit: [storybook.js.org](https://storybook.js.org)

diff --git a/app/rax/README.md b/app/rax/README.md
@@ -12,7 +12,7 @@ So you can develop UI components in isolation without worrying about app specifi
 
 ```sh
 cd my-rax-app
-npx -p @storybook/cli sb init
+npx sb init
 ```
 
 For more information visit: [storybook.js.org](https://storybook.js.org)

diff --git 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 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
@@ -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 sb init
 ```
 
 For more information visit: [storybook.js.org](https://storybook.js.org)

diff --git a/app/server/README.md b/app/server/README.md
@@ -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 server
+npx sb init -t server
 ```
 
 To configure the server that Storybook will connect to, export a global parameter `parameters.server.url` in `.storybook/preview.js`:
@@ -70,16 +70,16 @@ export default {
   parameters: {
     options: {
       component: 'my_widget',
-    }
-  }
+    },
+  },
 };
 
 export const Default = (args) => {};
 Default.storyName = 'Default';
 Default.parameters = {
   server: {
-    id: 'path/of/your/story"'
-  }
+    id: 'path/of/your/story"',
+  },
 };
 ```
 
@@ -110,7 +110,7 @@ Static parameters can be defined using the `params` story parameter. For example
     {
       "name": "Red",
       "parameters": {
-        "server": { 
+        "server": {
           "id": "button",
           "params": { "color": "red", "label": "Stop" }
         }
@@ -119,7 +119,7 @@ Static parameters can be defined using the `params` story parameter. For example
     {
       "name": "Green",
       "parameters": {
-        "server": { 
+        "server": {
           "id": "button",
           "params": { "color": "green", "label": "OK" }
         }
@@ -137,15 +137,15 @@ Like all story parameters server params can be defined in the default export and
 {
   "title": "Buttons",
   "parameters": {
-    "server": { 
+    "server": {
       "params": { "color": "red" }
     }
   },
   "stories": [
     {
       "name": "Default",
       "parameters": {
-        "server": { 
+        "server": {
           "id": "button",
           "params": { "label": "Stop" }
         }
@@ -154,7 +154,7 @@ Like all story parameters server params can be defined in the default export and
     {
       "name": "Green",
       "parameters": {
-        "server": { 
+        "server": {
           "id": "button",
           "params": { "color": "green", "label": "OK" }
         }
@@ -175,7 +175,7 @@ Dynamic parameters can be defined using args and the Controls addon
     {
       "name": "Red",
       "parameters": {
-        "server": { 
+        "server": {
           "id": "button"
         }
       },
@@ -184,7 +184,7 @@ Dynamic parameters can be defined using args and the Controls addon
     {
       "name": "Green",
       "parameters": {
-        "server": { 
+        "server": {
           "id": "button"
         }
       },
@@ -208,7 +208,7 @@ Just like CSF stories we can define `argTypes` to specify the controls used in t
     {
       "name": "Red",
       "parameters": {
-        "server": { 
+        "server": {
           "id": "button"
         }
       },
@@ -217,7 +217,7 @@ Just like CSF stories we can define `argTypes` to specify the controls used in t
     {
       "name": "Green",
       "parameters": {
-        "server": { 
+        "server": {
           "id": "button"
         }
       },
@@ -248,7 +248,7 @@ To configure controls, simple add `args` and `argTypes` keys to the story JSON m
       },
       "args": { "button_text": "Push Me", "color": "red" },
       "argTypes": { "button_text": { "control": { "type": "color" } } }
-    },
+    }
   ]
 }
 ```
@@ -282,7 +282,6 @@ To use actions, use the `parameters.actions.handles` parameter:
 
 For control over how `@storybook/server` fetches Html from the server you can provide a `fetchStoryHtml` function as a parameter. You would typically set this in `.storybook/preview.js` but it's just a regular Storybook parameter so could be overridden at the stories or story level.
 
-
 ```javascript
 // .storybook/preview.js
 
@@ -295,18 +294,23 @@ const fetchStoryHtml = async (url, path, params, context) => {
 export const parameters = {
   server: {
     url: `http://localhost:${port}/storybook_preview`,
-    fetchStoryHtml
+    fetchStoryHtml,
   },
 };
 ```
 
 `fetchStoryHtml` should be an async function with the following signature
 
 ```javascript
-type FetchStoryHtmlType = (url: string, id: string, params: any, context: StoryContext) => Promise<string | Node>;
+type FetchStoryHtmlType = (
+  url: string,
+  id: string,
+  params: any,
+  context: StoryContext
+) => Promise<string | Node>;
 ```
 
- * url: Server url configured by the `parameters.server.url`
- * id: Id of the story being rendered given by `parameters.server.id`
- * params: Merged story params `parameters.server.params`and story args
- * context: The context of the story
+- url: Server url configured by the `parameters.server.url`
+- id: Id of the story being rendered given by `parameters.server.id`
+- params: Merged story params `parameters.server.params`and story args
+- context: The context of the story
diff --git 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 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
@@ -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 sb init
 ```
 
 For more information visit: [storybook.js.org](https://storybook.js.org)

diff --git a/app/vue3/README.md b/app/vue3/README.md
@@ -12,7 +12,7 @@ So you can develop UI components in isolation without worrying about app specifi
 
 ```sh
 cd my-vue3-app
-npx -p @storybook/cli sb init
+npx sb init
 ```
 
 For more information visit: [storybook.js.org](https://storybook.js.org)
@@ -37,5 +37,7 @@ import { app } from '@storybook/vue3';
 
 app.use(MyPlugin);
 app.component('my-component', MyComponent);
-app.mixin({ /* My mixin */ });
+app.mixin({
+  /* My mixin */
+});
 ```
diff --git a/app/web-components/README.md b/app/web-components/README.md
@@ -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 web_components
+npx sb init -t web_components
 ```
 
 For more information visit: [storybook.js.org](https://storybook.js.org)

diff --git a/docs/addons/writing-addons.md b/docs/addons/writing-addons.md
@@ -53,7 +53,7 @@ We'll need to add the necessary dependencies and make some adjustments. Run the
 yarn add react react-dom @babel/cli
 
 # Adds Storybook:
-npx -p @storybook/cli sb init
+npx sb init
 ```
 
 <div class="aside">

diff --git a/docs/get-started/installation-command-section/ember.mdx b/docs/get-started/installation-command-section/ember.mdx
@@ -2,11 +2,11 @@ Use the Storybook CLI to install it with a couple of commands. Run this inside y
 
 ```shell
 # Add Storybook:
-npx -p @storybook/cli sb init
+npx sb init
 
 # Add Ember storybook adapter
 ember install @storybook/ember-cli-storybook
 
 ```
 
-If you run into issues with the installation, check the troubleshooting section below for guidance on how to solve it.
+If you run into issues with the installation, check the troubleshooting section below for guidance on how to solve it.