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

Prefer `npx sb init` installation

.bettercodehub.yml

@@ -1,16 +0,0 @@
-component_depth: 2
-languages:
-- javascript
-
-- name: javascript
-  production:
-    exclude:
-      - .*\.test\.js
-      - .*\/__test__\/.*\.js
-      - .*\/__mock__\/.*\.js
-      - .*\.stories\.js
-  test:
-    include:
-      - .*\.test\.js
-      - .*\/__test__\/.*\.js
-      - .*\.storyshot

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)

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)

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');
 

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)

app/marionette/README.md

@@ -1,4 +1,4 @@
-# Storybook for Marionette.js 
+# Storybook for Marionette.js
 
 ---
 
@@ -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
+npx sb init
 ```
 
 For more information visit: [storybook.js.org](https://storybook.js.org)
@@ -22,4 +22,4 @@ 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.

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)

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)

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)

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)

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)

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)

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,7 +137,7 @@ Like all story parameters server params can be defined in the default export and
 {
   "title": "Buttons",
   "parameters": {
-    "server": { 
+    "server": {
       "params": { "color": "red" }
     }
   },
@@ -145,7 +145,7 @@ Like all story parameters server params can be defined in the default export and
     {
       "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,7 +294,7 @@ const fetchStoryHtml = async (url, path, params, context) => {
 export const parameters = {
   server: {
     url: `http://localhost:${port}/storybook_preview`,
-    fetchStoryHtml
+    fetchStoryHtml,
   },
 };
 ```
@@ -303,10 +302,15 @@ export const parameters = {
 `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

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)

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)

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

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)

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

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.

lib/cli/README.md

@@ -8,7 +8,7 @@ Go to your project and run:
 
 ```sh
 cd my-app
-npx -p @storybook/cli sb init
+npx sb init
 ```
 
 In addition to `init`, the CLI also has other commands:
@@ -28,7 +28,7 @@ The CLI supports yarn. If you have installed yarn in your system and your projec
 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 sb init --use-npm
 ```
 
 ---
@@ -38,7 +38,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 sb init --parser flow
 ```
 
 For more information visit: [storybook.js.org](https://storybook.js.org)
@@ -50,7 +50,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 <type>
+npx sb init --type <type>
 ```
 
 Where type is one of the project types defined in [project_types.js](https://github.com/storybookjs/storybook/blob/next/lib/cli/src/project_types.ts)