From 270475d226244632b93caccc6383418ba7c97304 Mon Sep 17 00:00:00 2001 From: Kyle Gach Date: Thu, 2 Mar 2023 13:07:03 -0700 Subject: [PATCH 1/3] Convert installation instructions - From FeatureSnippets to CodeSnippets - Append `@next` to `storybook` - Remove `ember` snippet --- docs/get-started/install.md | 30 ++++++++++++------- .../installation-command-section/angular.mdx | 8 ----- .../installation-command-section/ember.mdx | 12 -------- .../installation-command-section/html.mdx | 15 ---------- .../installation-command-section/preact.mdx | 15 ---------- .../installation-command-section/qwik.mdx | 15 ---------- .../installation-command-section/react.mdx | 15 ---------- .../installation-command-section/svelte.mdx | 15 ---------- .../installation-command-section/vue.mdx | 15 ---------- .../web-components.mdx | 15 ---------- docs/snippets/angular/init-command.npx.mdx | 4 +++ docs/snippets/html/init-command.npx.mdx | 3 ++ docs/snippets/html/init-command.pnpm.mdx | 3 ++ docs/snippets/preact/init-command.npx.mdx | 3 ++ docs/snippets/preact/init-command.pnpm.mdx | 3 ++ docs/snippets/qwik/init-command.npx.mdx | 3 ++ docs/snippets/qwik/init-command.pnpm.mdx | 3 ++ docs/snippets/react/init-command.npx.mdx | 3 ++ docs/snippets/react/init-command.pnpm.mdx | 3 ++ docs/snippets/svelte/init-command.npx.mdx | 3 ++ docs/snippets/svelte/init-command.pnpm.mdx | 3 ++ docs/snippets/vue/init-command.npx.mdx | 3 ++ docs/snippets/vue/init-command.pnpm.mdx | 3 ++ .../web-components/init-command.npx.mdx | 3 ++ .../web-components/init-command.pnpm.mdx | 3 ++ 25 files changed, 66 insertions(+), 135 deletions(-) delete mode 100644 docs/get-started/installation-command-section/angular.mdx delete mode 100644 docs/get-started/installation-command-section/ember.mdx delete mode 100644 docs/get-started/installation-command-section/html.mdx delete mode 100644 docs/get-started/installation-command-section/preact.mdx delete mode 100644 docs/get-started/installation-command-section/qwik.mdx delete mode 100644 docs/get-started/installation-command-section/react.mdx delete mode 100644 docs/get-started/installation-command-section/svelte.mdx delete mode 100644 docs/get-started/installation-command-section/vue.mdx delete mode 100644 docs/get-started/installation-command-section/web-components.mdx create mode 100644 docs/snippets/angular/init-command.npx.mdx create mode 100644 docs/snippets/html/init-command.npx.mdx create mode 100644 docs/snippets/html/init-command.pnpm.mdx create mode 100644 docs/snippets/preact/init-command.npx.mdx create mode 100644 docs/snippets/preact/init-command.pnpm.mdx create mode 100644 docs/snippets/qwik/init-command.npx.mdx create mode 100644 docs/snippets/qwik/init-command.pnpm.mdx create mode 100644 docs/snippets/react/init-command.npx.mdx create mode 100644 docs/snippets/react/init-command.pnpm.mdx create mode 100644 docs/snippets/svelte/init-command.npx.mdx create mode 100644 docs/snippets/svelte/init-command.pnpm.mdx create mode 100644 docs/snippets/vue/init-command.npx.mdx create mode 100644 docs/snippets/vue/init-command.pnpm.mdx create mode 100644 docs/snippets/web-components/init-command.npx.mdx create mode 100644 docs/snippets/web-components/init-command.pnpm.mdx diff --git a/docs/get-started/install.md b/docs/get-started/install.md index 77db823a856b..430ce53c3dbd 100644 --- a/docs/get-started/install.md +++ b/docs/get-started/install.md @@ -2,24 +2,34 @@ title: 'Install Storybook' --- +Use the Storybook CLI to install it in a single command. Run this inside your _existing project’s_ root directory: + - +If you run into issues with the installation, check the [Troubleshooting section](#troubleshooting) below for guidance on how to solve it. +
storybook init is not made for empty projects diff --git a/docs/get-started/installation-command-section/angular.mdx b/docs/get-started/installation-command-section/angular.mdx deleted file mode 100644 index 806df6d06a57..000000000000 --- a/docs/get-started/installation-command-section/angular.mdx +++ /dev/null @@ -1,8 +0,0 @@ -- Use the Storybook CLI to install it in a single command. Run this inside your _existing project’s_ root directory: - -```shell -# Add Storybook: -npx storybook init -``` - -If you run into issues with the installation, check the [Troubleshooting section](#troubleshooting) below for guidance on how to solve it. \ No newline at end of file diff --git a/docs/get-started/installation-command-section/ember.mdx b/docs/get-started/installation-command-section/ember.mdx deleted file mode 100644 index 6ddc1d135c44..000000000000 --- a/docs/get-started/installation-command-section/ember.mdx +++ /dev/null @@ -1,12 +0,0 @@ -Use the Storybook CLI to install it with a couple of commands. Run this inside your _existing project’s_ root directory: - -```shell -# Add Storybook: -npx storybook init - -# Add Ember storybook adapter -ember install @storybook/ember-cli-storybook - -``` - -If you run into issues with the installation, check the [Troubleshooting section](#troubleshooting) below for guidance on how to solve it. diff --git a/docs/get-started/installation-command-section/html.mdx b/docs/get-started/installation-command-section/html.mdx deleted file mode 100644 index ff3b8ac959d5..000000000000 --- a/docs/get-started/installation-command-section/html.mdx +++ /dev/null @@ -1,15 +0,0 @@ -Use the Storybook CLI to install it in a single command. Run this inside your _existing project’s_ root directory: - -- With npm: - -```shell -npx storybook init --type html -``` - -- With pnpm: - -```shell -pnpm dlx storybook init --type html -``` - -If you run into issues with the installation, check the [Troubleshooting section](#troubleshooting) below for guidance on how to solve it. diff --git a/docs/get-started/installation-command-section/preact.mdx b/docs/get-started/installation-command-section/preact.mdx deleted file mode 100644 index 41e5c040cc9d..000000000000 --- a/docs/get-started/installation-command-section/preact.mdx +++ /dev/null @@ -1,15 +0,0 @@ -Use the Storybook CLI to install it in a single command. Run this inside your _existing project’s_ root directory: - -- With npm: - -```shell -npx storybook init -``` - -- With pnpm: - -```shell -pnpm dlx storybook init -``` - -If you run into issues with the installation, check the [Troubleshooting section](#troubleshooting) below for guidance on how to solve it. diff --git a/docs/get-started/installation-command-section/qwik.mdx b/docs/get-started/installation-command-section/qwik.mdx deleted file mode 100644 index 41e5c040cc9d..000000000000 --- a/docs/get-started/installation-command-section/qwik.mdx +++ /dev/null @@ -1,15 +0,0 @@ -Use the Storybook CLI to install it in a single command. Run this inside your _existing project’s_ root directory: - -- With npm: - -```shell -npx storybook init -``` - -- With pnpm: - -```shell -pnpm dlx storybook init -``` - -If you run into issues with the installation, check the [Troubleshooting section](#troubleshooting) below for guidance on how to solve it. diff --git a/docs/get-started/installation-command-section/react.mdx b/docs/get-started/installation-command-section/react.mdx deleted file mode 100644 index 41e5c040cc9d..000000000000 --- a/docs/get-started/installation-command-section/react.mdx +++ /dev/null @@ -1,15 +0,0 @@ -Use the Storybook CLI to install it in a single command. Run this inside your _existing project’s_ root directory: - -- With npm: - -```shell -npx storybook init -``` - -- With pnpm: - -```shell -pnpm dlx storybook init -``` - -If you run into issues with the installation, check the [Troubleshooting section](#troubleshooting) below for guidance on how to solve it. diff --git a/docs/get-started/installation-command-section/svelte.mdx b/docs/get-started/installation-command-section/svelte.mdx deleted file mode 100644 index 41e5c040cc9d..000000000000 --- a/docs/get-started/installation-command-section/svelte.mdx +++ /dev/null @@ -1,15 +0,0 @@ -Use the Storybook CLI to install it in a single command. Run this inside your _existing project’s_ root directory: - -- With npm: - -```shell -npx storybook init -``` - -- With pnpm: - -```shell -pnpm dlx storybook init -``` - -If you run into issues with the installation, check the [Troubleshooting section](#troubleshooting) below for guidance on how to solve it. diff --git a/docs/get-started/installation-command-section/vue.mdx b/docs/get-started/installation-command-section/vue.mdx deleted file mode 100644 index 41e5c040cc9d..000000000000 --- a/docs/get-started/installation-command-section/vue.mdx +++ /dev/null @@ -1,15 +0,0 @@ -Use the Storybook CLI to install it in a single command. Run this inside your _existing project’s_ root directory: - -- With npm: - -```shell -npx storybook init -``` - -- With pnpm: - -```shell -pnpm dlx storybook init -``` - -If you run into issues with the installation, check the [Troubleshooting section](#troubleshooting) below for guidance on how to solve it. diff --git a/docs/get-started/installation-command-section/web-components.mdx b/docs/get-started/installation-command-section/web-components.mdx deleted file mode 100644 index 41e5c040cc9d..000000000000 --- a/docs/get-started/installation-command-section/web-components.mdx +++ /dev/null @@ -1,15 +0,0 @@ -Use the Storybook CLI to install it in a single command. Run this inside your _existing project’s_ root directory: - -- With npm: - -```shell -npx storybook init -``` - -- With pnpm: - -```shell -pnpm dlx storybook init -``` - -If you run into issues with the installation, check the [Troubleshooting section](#troubleshooting) below for guidance on how to solve it. diff --git a/docs/snippets/angular/init-command.npx.mdx b/docs/snippets/angular/init-command.npx.mdx new file mode 100644 index 000000000000..d0bf03dca401 --- /dev/null +++ b/docs/snippets/angular/init-command.npx.mdx @@ -0,0 +1,4 @@ +```shell +# Add Storybook: +npx storybook@next init +``` diff --git a/docs/snippets/html/init-command.npx.mdx b/docs/snippets/html/init-command.npx.mdx new file mode 100644 index 000000000000..fb5a28509209 --- /dev/null +++ b/docs/snippets/html/init-command.npx.mdx @@ -0,0 +1,3 @@ +```shell +npx storybook@next init --type html +``` diff --git a/docs/snippets/html/init-command.pnpm.mdx b/docs/snippets/html/init-command.pnpm.mdx new file mode 100644 index 000000000000..82d27234a481 --- /dev/null +++ b/docs/snippets/html/init-command.pnpm.mdx @@ -0,0 +1,3 @@ +```shell +pnpm dlx storybook@next init --type html +``` diff --git a/docs/snippets/preact/init-command.npx.mdx b/docs/snippets/preact/init-command.npx.mdx new file mode 100644 index 000000000000..43d159637237 --- /dev/null +++ b/docs/snippets/preact/init-command.npx.mdx @@ -0,0 +1,3 @@ +```shell +npx storybook@next init +``` diff --git a/docs/snippets/preact/init-command.pnpm.mdx b/docs/snippets/preact/init-command.pnpm.mdx new file mode 100644 index 000000000000..11533cd674b3 --- /dev/null +++ b/docs/snippets/preact/init-command.pnpm.mdx @@ -0,0 +1,3 @@ +```shell +pnpm dlx storybook@next init +``` diff --git a/docs/snippets/qwik/init-command.npx.mdx b/docs/snippets/qwik/init-command.npx.mdx new file mode 100644 index 000000000000..43d159637237 --- /dev/null +++ b/docs/snippets/qwik/init-command.npx.mdx @@ -0,0 +1,3 @@ +```shell +npx storybook@next init +``` diff --git a/docs/snippets/qwik/init-command.pnpm.mdx b/docs/snippets/qwik/init-command.pnpm.mdx new file mode 100644 index 000000000000..11533cd674b3 --- /dev/null +++ b/docs/snippets/qwik/init-command.pnpm.mdx @@ -0,0 +1,3 @@ +```shell +pnpm dlx storybook@next init +``` diff --git a/docs/snippets/react/init-command.npx.mdx b/docs/snippets/react/init-command.npx.mdx new file mode 100644 index 000000000000..43d159637237 --- /dev/null +++ b/docs/snippets/react/init-command.npx.mdx @@ -0,0 +1,3 @@ +```shell +npx storybook@next init +``` diff --git a/docs/snippets/react/init-command.pnpm.mdx b/docs/snippets/react/init-command.pnpm.mdx new file mode 100644 index 000000000000..11533cd674b3 --- /dev/null +++ b/docs/snippets/react/init-command.pnpm.mdx @@ -0,0 +1,3 @@ +```shell +pnpm dlx storybook@next init +``` diff --git a/docs/snippets/svelte/init-command.npx.mdx b/docs/snippets/svelte/init-command.npx.mdx new file mode 100644 index 000000000000..43d159637237 --- /dev/null +++ b/docs/snippets/svelte/init-command.npx.mdx @@ -0,0 +1,3 @@ +```shell +npx storybook@next init +``` diff --git a/docs/snippets/svelte/init-command.pnpm.mdx b/docs/snippets/svelte/init-command.pnpm.mdx new file mode 100644 index 000000000000..11533cd674b3 --- /dev/null +++ b/docs/snippets/svelte/init-command.pnpm.mdx @@ -0,0 +1,3 @@ +```shell +pnpm dlx storybook@next init +``` diff --git a/docs/snippets/vue/init-command.npx.mdx b/docs/snippets/vue/init-command.npx.mdx new file mode 100644 index 000000000000..43d159637237 --- /dev/null +++ b/docs/snippets/vue/init-command.npx.mdx @@ -0,0 +1,3 @@ +```shell +npx storybook@next init +``` diff --git a/docs/snippets/vue/init-command.pnpm.mdx b/docs/snippets/vue/init-command.pnpm.mdx new file mode 100644 index 000000000000..11533cd674b3 --- /dev/null +++ b/docs/snippets/vue/init-command.pnpm.mdx @@ -0,0 +1,3 @@ +```shell +pnpm dlx storybook@next init +``` diff --git a/docs/snippets/web-components/init-command.npx.mdx b/docs/snippets/web-components/init-command.npx.mdx new file mode 100644 index 000000000000..43d159637237 --- /dev/null +++ b/docs/snippets/web-components/init-command.npx.mdx @@ -0,0 +1,3 @@ +```shell +npx storybook@next init +``` diff --git a/docs/snippets/web-components/init-command.pnpm.mdx b/docs/snippets/web-components/init-command.pnpm.mdx new file mode 100644 index 000000000000..11533cd674b3 --- /dev/null +++ b/docs/snippets/web-components/init-command.pnpm.mdx @@ -0,0 +1,3 @@ +```shell +pnpm dlx storybook@next init +``` From 0bec35d2044d84a643e81d679150c4b85264874d Mon Sep 17 00:00:00 2001 From: Kyle Gach Date: Thu, 2 Mar 2023 13:09:18 -0700 Subject: [PATCH 2/3] Simplify init command snippets to common --- docs/get-started/install.md | 17 ++--------------- docs/snippets/angular/init-command.npx.mdx | 4 ---- .../{preact => common}/init-command.npx.mdx | 0 .../{preact => common}/init-command.pnpm.mdx | 0 docs/snippets/html/init-command.npx.mdx | 3 --- docs/snippets/html/init-command.pnpm.mdx | 3 --- docs/snippets/qwik/init-command.npx.mdx | 3 --- docs/snippets/qwik/init-command.pnpm.mdx | 3 --- docs/snippets/react/init-command.npx.mdx | 3 --- docs/snippets/react/init-command.pnpm.mdx | 3 --- docs/snippets/svelte/init-command.npx.mdx | 3 --- docs/snippets/svelte/init-command.pnpm.mdx | 3 --- docs/snippets/vue/init-command.npx.mdx | 3 --- docs/snippets/vue/init-command.pnpm.mdx | 3 --- .../web-components/init-command.npx.mdx | 3 --- .../web-components/init-command.pnpm.mdx | 3 --- 16 files changed, 2 insertions(+), 55 deletions(-) delete mode 100644 docs/snippets/angular/init-command.npx.mdx rename docs/snippets/{preact => common}/init-command.npx.mdx (100%) rename docs/snippets/{preact => common}/init-command.pnpm.mdx (100%) delete mode 100644 docs/snippets/html/init-command.npx.mdx delete mode 100644 docs/snippets/html/init-command.pnpm.mdx delete mode 100644 docs/snippets/qwik/init-command.npx.mdx delete mode 100644 docs/snippets/qwik/init-command.pnpm.mdx delete mode 100644 docs/snippets/react/init-command.npx.mdx delete mode 100644 docs/snippets/react/init-command.pnpm.mdx delete mode 100644 docs/snippets/svelte/init-command.npx.mdx delete mode 100644 docs/snippets/svelte/init-command.pnpm.mdx delete mode 100644 docs/snippets/vue/init-command.npx.mdx delete mode 100644 docs/snippets/vue/init-command.pnpm.mdx delete mode 100644 docs/snippets/web-components/init-command.npx.mdx delete mode 100644 docs/snippets/web-components/init-command.pnpm.mdx diff --git a/docs/get-started/install.md b/docs/get-started/install.md index 430ce53c3dbd..b6f6a0ff77cc 100644 --- a/docs/get-started/install.md +++ b/docs/get-started/install.md @@ -8,21 +8,8 @@ Use the Storybook CLI to install it in a single command. Run this inside your _e diff --git a/docs/snippets/angular/init-command.npx.mdx b/docs/snippets/angular/init-command.npx.mdx deleted file mode 100644 index d0bf03dca401..000000000000 --- a/docs/snippets/angular/init-command.npx.mdx +++ /dev/null @@ -1,4 +0,0 @@ -```shell -# Add Storybook: -npx storybook@next init -``` diff --git a/docs/snippets/preact/init-command.npx.mdx b/docs/snippets/common/init-command.npx.mdx similarity index 100% rename from docs/snippets/preact/init-command.npx.mdx rename to docs/snippets/common/init-command.npx.mdx diff --git a/docs/snippets/preact/init-command.pnpm.mdx b/docs/snippets/common/init-command.pnpm.mdx similarity index 100% rename from docs/snippets/preact/init-command.pnpm.mdx rename to docs/snippets/common/init-command.pnpm.mdx diff --git a/docs/snippets/html/init-command.npx.mdx b/docs/snippets/html/init-command.npx.mdx deleted file mode 100644 index fb5a28509209..000000000000 --- a/docs/snippets/html/init-command.npx.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -npx storybook@next init --type html -``` diff --git a/docs/snippets/html/init-command.pnpm.mdx b/docs/snippets/html/init-command.pnpm.mdx deleted file mode 100644 index 82d27234a481..000000000000 --- a/docs/snippets/html/init-command.pnpm.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -pnpm dlx storybook@next init --type html -``` diff --git a/docs/snippets/qwik/init-command.npx.mdx b/docs/snippets/qwik/init-command.npx.mdx deleted file mode 100644 index 43d159637237..000000000000 --- a/docs/snippets/qwik/init-command.npx.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -npx storybook@next init -``` diff --git a/docs/snippets/qwik/init-command.pnpm.mdx b/docs/snippets/qwik/init-command.pnpm.mdx deleted file mode 100644 index 11533cd674b3..000000000000 --- a/docs/snippets/qwik/init-command.pnpm.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -pnpm dlx storybook@next init -``` diff --git a/docs/snippets/react/init-command.npx.mdx b/docs/snippets/react/init-command.npx.mdx deleted file mode 100644 index 43d159637237..000000000000 --- a/docs/snippets/react/init-command.npx.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -npx storybook@next init -``` diff --git a/docs/snippets/react/init-command.pnpm.mdx b/docs/snippets/react/init-command.pnpm.mdx deleted file mode 100644 index 11533cd674b3..000000000000 --- a/docs/snippets/react/init-command.pnpm.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -pnpm dlx storybook@next init -``` diff --git a/docs/snippets/svelte/init-command.npx.mdx b/docs/snippets/svelte/init-command.npx.mdx deleted file mode 100644 index 43d159637237..000000000000 --- a/docs/snippets/svelte/init-command.npx.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -npx storybook@next init -``` diff --git a/docs/snippets/svelte/init-command.pnpm.mdx b/docs/snippets/svelte/init-command.pnpm.mdx deleted file mode 100644 index 11533cd674b3..000000000000 --- a/docs/snippets/svelte/init-command.pnpm.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -pnpm dlx storybook@next init -``` diff --git a/docs/snippets/vue/init-command.npx.mdx b/docs/snippets/vue/init-command.npx.mdx deleted file mode 100644 index 43d159637237..000000000000 --- a/docs/snippets/vue/init-command.npx.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -npx storybook@next init -``` diff --git a/docs/snippets/vue/init-command.pnpm.mdx b/docs/snippets/vue/init-command.pnpm.mdx deleted file mode 100644 index 11533cd674b3..000000000000 --- a/docs/snippets/vue/init-command.pnpm.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -pnpm dlx storybook@next init -``` diff --git a/docs/snippets/web-components/init-command.npx.mdx b/docs/snippets/web-components/init-command.npx.mdx deleted file mode 100644 index 43d159637237..000000000000 --- a/docs/snippets/web-components/init-command.npx.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -npx storybook@next init -``` diff --git a/docs/snippets/web-components/init-command.pnpm.mdx b/docs/snippets/web-components/init-command.pnpm.mdx deleted file mode 100644 index 11533cd674b3..000000000000 --- a/docs/snippets/web-components/init-command.pnpm.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -pnpm dlx storybook@next init -``` From 73944af5b18c4da5f065902ce1d433205f29a5c4 Mon Sep 17 00:00:00 2001 From: Kyle Gach Date: Fri, 3 Mar 2023 08:52:27 -0700 Subject: [PATCH 3/3] Wrap troubleshooting message in aside --- docs/get-started/install.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/get-started/install.md b/docs/get-started/install.md index b6f6a0ff77cc..7e6b2155e8a2 100644 --- a/docs/get-started/install.md +++ b/docs/get-started/install.md @@ -15,8 +15,12 @@ Use the Storybook CLI to install it in a single command. Run this inside your _e +
+ If you run into issues with the installation, check the [Troubleshooting section](#troubleshooting) below for guidance on how to solve it. +
+
storybook init is not made for empty projects