Merge pull request #21361 from storybookjs/update-install-snippets

storybookjs · Mar 3, 2023 · 3ea1a30 · 3ea1a30
2 parents 94c3984 + 73944af
commit 3ea1a30
Show file tree

Hide file tree

Showing 12 changed files with 17 additions and 135 deletions.
diff --git a/docs/get-started/install.md b/docs/get-started/install.md
@@ -2,24 +2,25 @@
 title: 'Install Storybook'
 ---
 
+Use the Storybook CLI to install it in a single command. Run this inside your _existing project’s_ root directory:
+
 <!-- prettier-ignore-start -->
 
-<FeatureSnippets
+<CodeSnippets
   paths={[
-   'get-started/installation-command-section/angular.mdx',
-   'get-started/installation-command-section/ember.mdx',
-   'get-started/installation-command-section/html.mdx',
-   'get-started/installation-command-section/preact.mdx',
-   'get-started/installation-command-section/react.mdx',
-   'get-started/installation-command-section/svelte.mdx',
-   'get-started/installation-command-section/vue.mdx',
-   'get-started/installation-command-section/web-components.mdx',
-   'get-started/installation-command-section/qwik.mdx',
+   'common/init-command.npx.mdx',
+   'common/init-command.pnpm.mdx',
   ]}
 />
 
 <!-- prettier-ignore-end -->
 
+<div class="aside">
+
+If you run into issues with the installation, check the [Troubleshooting section](#troubleshooting) below for guidance on how to solve it.
+
+</div>
+
 <details>
 
 <summary><code>storybook init</code> is not made for empty projects</summary>

diff --git a/docs/get-started/installation-command-section/angular.mdx b/docs/get-started/installation-command-section/angular.mdx
diff --git a/docs/get-started/installation-command-section/ember.mdx b/docs/get-started/installation-command-section/ember.mdx
diff --git a/docs/get-started/installation-command-section/html.mdx b/docs/get-started/installation-command-section/html.mdx
diff --git a/docs/get-started/installation-command-section/preact.mdx b/docs/get-started/installation-command-section/preact.mdx
diff --git a/docs/get-started/installation-command-section/qwik.mdx b/docs/get-started/installation-command-section/qwik.mdx
diff --git a/docs/get-started/installation-command-section/react.mdx b/docs/get-started/installation-command-section/react.mdx
diff --git a/docs/get-started/installation-command-section/svelte.mdx b/docs/get-started/installation-command-section/svelte.mdx
diff --git a/docs/get-started/installation-command-section/vue.mdx b/docs/get-started/installation-command-section/vue.mdx
diff --git a/docs/get-started/installation-command-section/web-components.mdx b/docs/get-started/installation-command-section/web-components.mdx
diff --git a/docs/snippets/common/init-command.npx.mdx b/docs/snippets/common/init-command.npx.mdx
@@ -0,0 +1,3 @@
+```shell
+npx storybook@next init
+```
diff --git a/docs/snippets/common/init-command.pnpm.mdx b/docs/snippets/common/init-command.pnpm.mdx
@@ -0,0 +1,3 @@
+```shell
+pnpm dlx storybook@next init
+```