From 41fff263680d593e7f901d703d0211c4b79ee525 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Tue, 11 Apr 2023 18:09:25 +0200
Subject: [PATCH 1/6] use vite@beta for sandboxes

---
 code/lib/cli/src/sandbox-templates.ts | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts
index b77af1ef452e..c470ee788919 100644
--- a/code/lib/cli/src/sandbox-templates.ts
+++ b/code/lib/cli/src/sandbox-templates.ts
@@ -121,7 +121,7 @@ const baseTemplates = {
   },
   'react-vite/default-js': {
     name: 'React Vite (JS)',
-    script: 'yarn create vite@beta . --template react',
+    script: 'yarn dlx create-vite@beta . --template react',
     expected: {
       framework: '@storybook/react-vite',
       renderer: '@storybook/react',
@@ -131,7 +131,7 @@ const baseTemplates = {
   },
   'react-vite/default-ts': {
     name: 'React Vite (TS)',
-    script: 'yarn create vite@beta . --template react-ts',
+    script: 'yarn dlx create-vite@beta . --template react-ts',
     expected: {
       framework: '@storybook/react-vite',
       renderer: '@storybook/react',
@@ -184,7 +184,7 @@ const baseTemplates = {
   },
   'vue3-vite/default-js': {
     name: 'Vue3 Vite (JS)',
-    script: 'yarn create vite@beta . --template vue',
+    script: 'yarn dlx create-vite@beta . --template vue',
     expected: {
       framework: '@storybook/vue3-vite',
       renderer: '@storybook/vue3',
@@ -194,7 +194,7 @@ const baseTemplates = {
   },
   'vue3-vite/default-ts': {
     name: 'Vue3 Vite (TS)',
-    script: 'yarn create vite@beta . --template vue-ts',
+    script: 'yarn dlx create-vite@beta . --template vue-ts',
     expected: {
       framework: '@storybook/vue3-vite',
       renderer: '@storybook/vue3',
@@ -226,7 +226,7 @@ const baseTemplates = {
   'html-vite/default-js': {
     name: 'HTML Vite JS',
     script:
-      'yarn create vite@beta . --template vanilla && echo "export default {}" > vite.config.js',
+      'yarn dlx create-vite@beta . --template vanilla && echo "export default {}" > vite.config.js',
     expected: {
       framework: '@storybook/html-vite',
       renderer: '@storybook/html',
@@ -237,7 +237,7 @@ const baseTemplates = {
   'html-vite/default-ts': {
     name: 'HTML Vite TS',
     script:
-      'yarn create vite@beta . --template vanilla-ts && echo "export default {}" > vite.config.js',
+      'yarn dlx create-vite@beta . --template vanilla-ts && echo "export default {}" > vite.config.js',
     expected: {
       framework: '@storybook/html-vite',
       renderer: '@storybook/html',
@@ -247,7 +247,7 @@ const baseTemplates = {
   },
   'svelte-vite/default-js': {
     name: 'Svelte Vite (JS)',
-    script: 'yarn create vite@beta . --template svelte',
+    script: 'yarn dlx create-vite@beta . --template svelte',
     expected: {
       framework: '@storybook/svelte-vite',
       renderer: '@storybook/svelte',
@@ -257,7 +257,7 @@ const baseTemplates = {
   },
   'svelte-vite/default-ts': {
     name: 'Svelte Vite (TS)',
-    script: 'yarn create vite@beta . --template svelte-ts',
+    script: 'yarn dlx create-vite@beta . --template svelte-ts',
     expected: {
       framework: '@storybook/svelte-vite',
       renderer: '@storybook/svelte',
@@ -312,7 +312,7 @@ const baseTemplates = {
   },
   'lit-vite/default-js': {
     name: 'Lit Vite (JS)',
-    script: 'yarn create vite@beta . --template lit',
+    script: 'yarn dlx create-vite@beta . --template lit',
     expected: {
       framework: '@storybook/web-components-vite',
       renderer: '@storybook/web-components',
@@ -323,7 +323,7 @@ const baseTemplates = {
   },
   'lit-vite/default-ts': {
     name: 'Lit Vite (TS)',
-    script: 'yarn create vite@beta . --template lit-ts',
+    script: 'yarn dlx create-vite@beta . --template lit-ts',
     expected: {
       framework: '@storybook/web-components-vite',
       renderer: '@storybook/web-components',
@@ -377,7 +377,7 @@ const baseTemplates = {
   },
   'preact-vite/default-js': {
     name: 'Preact Vite (JS)',
-    script: 'yarn create vite@beta . --template preact',
+    script: 'yarn dlx create-vite@beta . --template preact',
     expected: {
       framework: '@storybook/preact-vite',
       renderer: '@storybook/preact',
@@ -387,7 +387,7 @@ const baseTemplates = {
   },
   'preact-vite/default-ts': {
     name: 'Preact Vite (TS)',
-    script: 'yarn create vite@beta . --template preact-ts',
+    script: 'yarn dlx create-vite@beta . --template preact-ts',
     expected: {
       framework: '@storybook/preact-vite',
       renderer: '@storybook/preact',

From 3c07736c1a91a96e7685f8dc3f06606a65239671 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Tue, 11 Apr 2023 18:31:00 +0200
Subject: [PATCH 2/6] check to see if the changes did work

---
 .github/workflows/generate-sandboxes-next.yml | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/generate-sandboxes-next.yml b/.github/workflows/generate-sandboxes-next.yml
index 65c98a583acb..f55ed2051837 100644
--- a/.github/workflows/generate-sandboxes-next.yml
+++ b/.github/workflows/generate-sandboxes-next.yml
@@ -4,6 +4,12 @@ on:
   schedule:
     - cron: '2 2 */1 * *'
   workflow_dispatch:
+  # To test fixes on push rather than wait for the scheduling, do the following:
+  # 1. Uncomment the lines below and add your branch
+  push:
+    branches:
+      - fix/vite-sandboxes
+  # 2. change the "ref" value to <your-branch-name> in the actions/checkout step below
 
 jobs:
   generate:
@@ -17,7 +23,7 @@ jobs:
           node-version: 16
       - uses: actions/checkout@v3
         with:
-          ref: next
+          ref: fix/vite-sandboxes
       - name: Setup git user
         run: |
           git config --global user.name "Storybook Bot"

From 8fbd505db0eceb52651ec425e4c1fa9e84682df7 Mon Sep 17 00:00:00 2001
From: Ian VanSchooten <ian.vanschooten@gmail.com>
Date: Tue, 11 Apr 2023 13:56:12 -0400
Subject: [PATCH 3/6] Try npm

---
 code/lib/cli/src/sandbox-templates.ts | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts
index c470ee788919..aac0fe115a01 100644
--- a/code/lib/cli/src/sandbox-templates.ts
+++ b/code/lib/cli/src/sandbox-templates.ts
@@ -121,7 +121,7 @@ const baseTemplates = {
   },
   'react-vite/default-js': {
     name: 'React Vite (JS)',
-    script: 'yarn dlx create-vite@beta . --template react',
+    script: 'npm create vite@beta . --template react',
     expected: {
       framework: '@storybook/react-vite',
       renderer: '@storybook/react',
@@ -131,7 +131,7 @@ const baseTemplates = {
   },
   'react-vite/default-ts': {
     name: 'React Vite (TS)',
-    script: 'yarn dlx create-vite@beta . --template react-ts',
+    script: 'npm create vite@beta . --template react-ts',
     expected: {
       framework: '@storybook/react-vite',
       renderer: '@storybook/react',
@@ -184,7 +184,7 @@ const baseTemplates = {
   },
   'vue3-vite/default-js': {
     name: 'Vue3 Vite (JS)',
-    script: 'yarn dlx create-vite@beta . --template vue',
+    script: 'npm create vite@beta . --template vue',
     expected: {
       framework: '@storybook/vue3-vite',
       renderer: '@storybook/vue3',
@@ -194,7 +194,7 @@ const baseTemplates = {
   },
   'vue3-vite/default-ts': {
     name: 'Vue3 Vite (TS)',
-    script: 'yarn dlx create-vite@beta . --template vue-ts',
+    script: 'npm create vite@beta . --template vue-ts',
     expected: {
       framework: '@storybook/vue3-vite',
       renderer: '@storybook/vue3',
@@ -226,7 +226,7 @@ const baseTemplates = {
   'html-vite/default-js': {
     name: 'HTML Vite JS',
     script:
-      'yarn dlx create-vite@beta . --template vanilla && echo "export default {}" > vite.config.js',
+      'npm create vite@beta . --template vanilla && echo "export default {}" > vite.config.js',
     expected: {
       framework: '@storybook/html-vite',
       renderer: '@storybook/html',
@@ -237,7 +237,7 @@ const baseTemplates = {
   'html-vite/default-ts': {
     name: 'HTML Vite TS',
     script:
-      'yarn dlx create-vite@beta . --template vanilla-ts && echo "export default {}" > vite.config.js',
+      'npm create vite@beta . --template vanilla-ts && echo "export default {}" > vite.config.js',
     expected: {
       framework: '@storybook/html-vite',
       renderer: '@storybook/html',
@@ -247,7 +247,7 @@ const baseTemplates = {
   },
   'svelte-vite/default-js': {
     name: 'Svelte Vite (JS)',
-    script: 'yarn dlx create-vite@beta . --template svelte',
+    script: 'npm create vite@beta . --template svelte',
     expected: {
       framework: '@storybook/svelte-vite',
       renderer: '@storybook/svelte',
@@ -257,7 +257,7 @@ const baseTemplates = {
   },
   'svelte-vite/default-ts': {
     name: 'Svelte Vite (TS)',
-    script: 'yarn dlx create-vite@beta . --template svelte-ts',
+    script: 'npm create vite@beta . --template svelte-ts',
     expected: {
       framework: '@storybook/svelte-vite',
       renderer: '@storybook/svelte',
@@ -312,7 +312,7 @@ const baseTemplates = {
   },
   'lit-vite/default-js': {
     name: 'Lit Vite (JS)',
-    script: 'yarn dlx create-vite@beta . --template lit',
+    script: 'npm create vite@beta . --template lit',
     expected: {
       framework: '@storybook/web-components-vite',
       renderer: '@storybook/web-components',
@@ -323,7 +323,7 @@ const baseTemplates = {
   },
   'lit-vite/default-ts': {
     name: 'Lit Vite (TS)',
-    script: 'yarn dlx create-vite@beta . --template lit-ts',
+    script: 'npm create vite@beta . --template lit-ts',
     expected: {
       framework: '@storybook/web-components-vite',
       renderer: '@storybook/web-components',
@@ -377,7 +377,7 @@ const baseTemplates = {
   },
   'preact-vite/default-js': {
     name: 'Preact Vite (JS)',
-    script: 'yarn dlx create-vite@beta . --template preact',
+    script: 'npm create vite@beta . --template preact',
     expected: {
       framework: '@storybook/preact-vite',
       renderer: '@storybook/preact',
@@ -387,7 +387,7 @@ const baseTemplates = {
   },
   'preact-vite/default-ts': {
     name: 'Preact Vite (TS)',
-    script: 'yarn dlx create-vite@beta . --template preact-ts',
+    script: 'npm create vite@beta . --template preact-ts',
     expected: {
       framework: '@storybook/preact-vite',
       renderer: '@storybook/preact',

From daf0e1608291f0694ac36e20266295365032608e Mon Sep 17 00:00:00 2001
From: Ian VanSchooten <ian.vanschooten@gmail.com>
Date: Tue, 11 Apr 2023 15:53:07 -0400
Subject: [PATCH 4/6] Avoid prompt

---
 code/lib/cli/src/sandbox-templates.ts | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts
index aac0fe115a01..fd3187ce68d6 100644
--- a/code/lib/cli/src/sandbox-templates.ts
+++ b/code/lib/cli/src/sandbox-templates.ts
@@ -121,7 +121,7 @@ const baseTemplates = {
   },
   'react-vite/default-js': {
     name: 'React Vite (JS)',
-    script: 'npm create vite@beta . --template react',
+    script: 'npm create vite@beta --yes . --template react',
     expected: {
       framework: '@storybook/react-vite',
       renderer: '@storybook/react',
@@ -131,7 +131,7 @@ const baseTemplates = {
   },
   'react-vite/default-ts': {
     name: 'React Vite (TS)',
-    script: 'npm create vite@beta . --template react-ts',
+    script: 'npm create vite@beta --yes . --template react-ts',
     expected: {
       framework: '@storybook/react-vite',
       renderer: '@storybook/react',
@@ -184,7 +184,7 @@ const baseTemplates = {
   },
   'vue3-vite/default-js': {
     name: 'Vue3 Vite (JS)',
-    script: 'npm create vite@beta . --template vue',
+    script: 'npm create vite@beta --yes . --template vue',
     expected: {
       framework: '@storybook/vue3-vite',
       renderer: '@storybook/vue3',
@@ -194,7 +194,7 @@ const baseTemplates = {
   },
   'vue3-vite/default-ts': {
     name: 'Vue3 Vite (TS)',
-    script: 'npm create vite@beta . --template vue-ts',
+    script: 'npm create vite@beta --yes . --template vue-ts',
     expected: {
       framework: '@storybook/vue3-vite',
       renderer: '@storybook/vue3',
@@ -226,7 +226,7 @@ const baseTemplates = {
   'html-vite/default-js': {
     name: 'HTML Vite JS',
     script:
-      'npm create vite@beta . --template vanilla && echo "export default {}" > vite.config.js',
+      'npm create vite@beta --yes . --template vanilla && echo "export default {}" > vite.config.js',
     expected: {
       framework: '@storybook/html-vite',
       renderer: '@storybook/html',
@@ -237,7 +237,7 @@ const baseTemplates = {
   'html-vite/default-ts': {
     name: 'HTML Vite TS',
     script:
-      'npm create vite@beta . --template vanilla-ts && echo "export default {}" > vite.config.js',
+      'npm create vite@beta --yes . --template vanilla-ts && echo "export default {}" > vite.config.js',
     expected: {
       framework: '@storybook/html-vite',
       renderer: '@storybook/html',
@@ -247,7 +247,7 @@ const baseTemplates = {
   },
   'svelte-vite/default-js': {
     name: 'Svelte Vite (JS)',
-    script: 'npm create vite@beta . --template svelte',
+    script: 'npm create vite@beta --yes . --template svelte',
     expected: {
       framework: '@storybook/svelte-vite',
       renderer: '@storybook/svelte',
@@ -257,7 +257,7 @@ const baseTemplates = {
   },
   'svelte-vite/default-ts': {
     name: 'Svelte Vite (TS)',
-    script: 'npm create vite@beta . --template svelte-ts',
+    script: 'npm create vite@beta --yes . --template svelte-ts',
     expected: {
       framework: '@storybook/svelte-vite',
       renderer: '@storybook/svelte',
@@ -312,7 +312,7 @@ const baseTemplates = {
   },
   'lit-vite/default-js': {
     name: 'Lit Vite (JS)',
-    script: 'npm create vite@beta . --template lit',
+    script: 'npm create vite@beta --yes . --template lit',
     expected: {
       framework: '@storybook/web-components-vite',
       renderer: '@storybook/web-components',
@@ -323,7 +323,7 @@ const baseTemplates = {
   },
   'lit-vite/default-ts': {
     name: 'Lit Vite (TS)',
-    script: 'npm create vite@beta . --template lit-ts',
+    script: 'npm create vite@beta --yes . --template lit-ts',
     expected: {
       framework: '@storybook/web-components-vite',
       renderer: '@storybook/web-components',
@@ -377,7 +377,7 @@ const baseTemplates = {
   },
   'preact-vite/default-js': {
     name: 'Preact Vite (JS)',
-    script: 'npm create vite@beta . --template preact',
+    script: 'npm create vite@beta --yes . --template preact',
     expected: {
       framework: '@storybook/preact-vite',
       renderer: '@storybook/preact',
@@ -387,7 +387,7 @@ const baseTemplates = {
   },
   'preact-vite/default-ts': {
     name: 'Preact Vite (TS)',
-    script: 'npm create vite@beta . --template preact-ts',
+    script: 'npm create vite@beta --yes . --template preact-ts',
     expected: {
       framework: '@storybook/preact-vite',
       renderer: '@storybook/preact',

From 44cabd753b40fb17034ad9a5e7c2f59beb970570 Mon Sep 17 00:00:00 2001
From: Ian VanSchooten <ian.vanschooten@gmail.com>
Date: Tue, 11 Apr 2023 17:02:20 -0400
Subject: [PATCH 5/6] Moar dashes

---
 code/lib/cli/src/sandbox-templates.ts | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts
index fd3187ce68d6..dd92e55e39e1 100644
--- a/code/lib/cli/src/sandbox-templates.ts
+++ b/code/lib/cli/src/sandbox-templates.ts
@@ -121,7 +121,7 @@ const baseTemplates = {
   },
   'react-vite/default-js': {
     name: 'React Vite (JS)',
-    script: 'npm create vite@beta --yes . --template react',
+    script: 'npm create vite@beta --yes . -- --template react',
     expected: {
       framework: '@storybook/react-vite',
       renderer: '@storybook/react',
@@ -131,7 +131,7 @@ const baseTemplates = {
   },
   'react-vite/default-ts': {
     name: 'React Vite (TS)',
-    script: 'npm create vite@beta --yes . --template react-ts',
+    script: 'npm create vite@beta --yes . -- --template react-ts',
     expected: {
       framework: '@storybook/react-vite',
       renderer: '@storybook/react',
@@ -184,7 +184,7 @@ const baseTemplates = {
   },
   'vue3-vite/default-js': {
     name: 'Vue3 Vite (JS)',
-    script: 'npm create vite@beta --yes . --template vue',
+    script: 'npm create vite@beta --yes . -- --template vue',
     expected: {
       framework: '@storybook/vue3-vite',
       renderer: '@storybook/vue3',
@@ -194,7 +194,7 @@ const baseTemplates = {
   },
   'vue3-vite/default-ts': {
     name: 'Vue3 Vite (TS)',
-    script: 'npm create vite@beta --yes . --template vue-ts',
+    script: 'npm create vite@beta --yes . -- --template vue-ts',
     expected: {
       framework: '@storybook/vue3-vite',
       renderer: '@storybook/vue3',
@@ -226,7 +226,7 @@ const baseTemplates = {
   'html-vite/default-js': {
     name: 'HTML Vite JS',
     script:
-      'npm create vite@beta --yes . --template vanilla && echo "export default {}" > vite.config.js',
+      'npm create vite@beta --yes . -- --template vanilla && echo "export default {}" > vite.config.js',
     expected: {
       framework: '@storybook/html-vite',
       renderer: '@storybook/html',
@@ -237,7 +237,7 @@ const baseTemplates = {
   'html-vite/default-ts': {
     name: 'HTML Vite TS',
     script:
-      'npm create vite@beta --yes . --template vanilla-ts && echo "export default {}" > vite.config.js',
+      'npm create vite@beta --yes . -- --template vanilla-ts && echo "export default {}" > vite.config.js',
     expected: {
       framework: '@storybook/html-vite',
       renderer: '@storybook/html',
@@ -247,7 +247,7 @@ const baseTemplates = {
   },
   'svelte-vite/default-js': {
     name: 'Svelte Vite (JS)',
-    script: 'npm create vite@beta --yes . --template svelte',
+    script: 'npm create vite@beta --yes . -- --template svelte',
     expected: {
       framework: '@storybook/svelte-vite',
       renderer: '@storybook/svelte',
@@ -257,7 +257,7 @@ const baseTemplates = {
   },
   'svelte-vite/default-ts': {
     name: 'Svelte Vite (TS)',
-    script: 'npm create vite@beta --yes . --template svelte-ts',
+    script: 'npm create vite@beta --yes . -- --template svelte-ts',
     expected: {
       framework: '@storybook/svelte-vite',
       renderer: '@storybook/svelte',
@@ -312,7 +312,7 @@ const baseTemplates = {
   },
   'lit-vite/default-js': {
     name: 'Lit Vite (JS)',
-    script: 'npm create vite@beta --yes . --template lit',
+    script: 'npm create vite@beta --yes . -- --template lit',
     expected: {
       framework: '@storybook/web-components-vite',
       renderer: '@storybook/web-components',
@@ -323,7 +323,7 @@ const baseTemplates = {
   },
   'lit-vite/default-ts': {
     name: 'Lit Vite (TS)',
-    script: 'npm create vite@beta --yes . --template lit-ts',
+    script: 'npm create vite@beta --yes . -- --template lit-ts',
     expected: {
       framework: '@storybook/web-components-vite',
       renderer: '@storybook/web-components',
@@ -377,7 +377,7 @@ const baseTemplates = {
   },
   'preact-vite/default-js': {
     name: 'Preact Vite (JS)',
-    script: 'npm create vite@beta --yes . --template preact',
+    script: 'npm create vite@beta --yes . -- --template preact',
     expected: {
       framework: '@storybook/preact-vite',
       renderer: '@storybook/preact',
@@ -387,7 +387,7 @@ const baseTemplates = {
   },
   'preact-vite/default-ts': {
     name: 'Preact Vite (TS)',
-    script: 'npm create vite@beta --yes . --template preact-ts',
+    script: 'npm create vite@beta --yes . -- --template preact-ts',
     expected: {
       framework: '@storybook/preact-vite',
       renderer: '@storybook/preact',

From 05af6a30b20cb35ae0bb5f7f19ee9059df19798a Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Wed, 12 Apr 2023 09:09:44 +0200
Subject: [PATCH 6/6] undo branch ref

---
 .github/workflows/generate-sandboxes-next.yml | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/.github/workflows/generate-sandboxes-next.yml b/.github/workflows/generate-sandboxes-next.yml
index f55ed2051837..29b45c34696f 100644
--- a/.github/workflows/generate-sandboxes-next.yml
+++ b/.github/workflows/generate-sandboxes-next.yml
@@ -5,11 +5,12 @@ on:
     - cron: '2 2 */1 * *'
   workflow_dispatch:
   # To test fixes on push rather than wait for the scheduling, do the following:
-  # 1. Uncomment the lines below and add your branch
-  push:
-    branches:
-      - fix/vite-sandboxes
-  # 2. change the "ref" value to <your-branch-name> in the actions/checkout step below
+  # 1. Uncomment the lines below and add your branch.
+  # push:
+  #   branches:
+  #     - <your-branch-name>
+  # 2. change the "ref" value to <your-branch-name> in the actions/checkout step below.
+  # 3. don't forget to undo the values back to `next` before you merge your changes.
 
 jobs:
   generate:
@@ -23,7 +24,7 @@ jobs:
           node-version: 16
       - uses: actions/checkout@v3
         with:
-          ref: fix/vite-sandboxes
+          ref: next
       - name: Setup git user
         run: |
           git config --global user.name "Storybook Bot"