Merge pull request #22620 from storybookjs/norbert/fix-sandbox-genera…

…tion-script Build: Fix sandbox generation scripts
storybookjs · May 22, 2023 · 89b1716 · 89b1716
1 parent 9780e77
commit 89b1716
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 30 deletions.
diff --git a/.github/workflows/generate-sandboxes-next.yml b/.github/workflows/generate-sandboxes-next.yml
@@ -4,6 +4,13 @@ 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:
+  #     - 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:
@@ -17,7 +24,7 @@ jobs:
           node-version: 16
       - uses: actions/checkout@v3
         with:
-          ref: next
+          ref: norbert/fix-sandbox-generation-script
       - name: Setup git user
         run: |
           git config --global user.name "Storybook Bot"

diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts
@@ -67,7 +67,7 @@ export type Template = {
 const baseTemplates = {
   'cra/default-js': {
     name: 'Create React App (Javascript)',
-    script: 'npx create-react-app .',
+    script: 'npx create-react-app {{beforeDir}}',
     expected: {
       // TODO: change this to @storybook/cra once that package is created
       framework: '@storybook/react-webpack5',
@@ -78,7 +78,7 @@ const baseTemplates = {
   },
   'cra/default-ts': {
     name: 'Create React App (Typescript)',
-    script: 'npx create-react-app . --template typescript',
+    script: 'npx create-react-app {{beforeDir}} --template typescript',
     // Re-enable once https://github.com/storybookjs/storybook/issues/19351 is fixed.
     skipTasks: ['smoke-test'],
     expected: {
@@ -121,7 +121,7 @@ const baseTemplates = {
   },
   'react-vite/default-js': {
     name: 'React Vite (JS)',
-    script: 'yarn create vite . --template react',
+    script: 'npm create vite@latest --yes {{beforeDir}} -- --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 . --template react-ts',
+    script: 'npm create vite@latest --yes {{beforeDir}} -- --template react-ts',
     expected: {
       framework: '@storybook/react-vite',
       renderer: '@storybook/react',
@@ -140,7 +140,7 @@ const baseTemplates = {
   },
   'react-webpack/18-ts': {
     name: 'React 18 Webpack5 (TS)',
-    script: 'yarn create webpack5-react .',
+    script: 'yarn create webpack5-react {{beforeDir}}',
     expected: {
       framework: '@storybook/react-webpack5',
       renderer: '@storybook/react',
@@ -150,7 +150,8 @@ const baseTemplates = {
   },
   'react-webpack/17-ts': {
     name: 'React 17 Webpack5 (TS)',
-    script: 'yarn create webpack5-react . --version-react="17" --version-react-dom="17"',
+    script:
+      'yarn create webpack5-react {{beforeDir}} --version-react="17" --version-react-dom="17"',
     expected: {
       framework: '@storybook/react-webpack5',
       renderer: '@storybook/react',
@@ -160,7 +161,7 @@ const baseTemplates = {
   },
   'solid-vite/default-js': {
     name: 'SolidJS Vite (JS)',
-    script: 'npx degit solidjs/templates/js .',
+    script: 'npx degit solidjs/templates/js {{beforeDir}}',
     expected: {
       framework: 'storybook-solidjs-vite',
       renderer: 'storybook-solidjs',
@@ -172,7 +173,7 @@ const baseTemplates = {
   },
   'solid-vite/default-ts': {
     name: 'SolidJS Vite (TS)',
-    script: 'npx degit solidjs/templates/ts .',
+    script: 'npx degit solidjs/templates/ts {{beforeDir}}',
     expected: {
       framework: 'storybook-solidjs-vite',
       renderer: 'storybook-solidjs',
@@ -184,7 +185,7 @@ const baseTemplates = {
   },
   'vue3-vite/default-js': {
     name: 'Vue3 Vite (JS)',
-    script: 'yarn create vite . --template vue',
+    script: 'npm create vite@latest --yes {{beforeDir}} -- --template vue',
     expected: {
       framework: '@storybook/vue3-vite',
       renderer: '@storybook/vue3',
@@ -194,7 +195,7 @@ const baseTemplates = {
   },
   'vue3-vite/default-ts': {
     name: 'Vue3 Vite (TS)',
-    script: 'yarn create vite . --template vue-ts',
+    script: 'npm create vite@latest --yes {{beforeDir}} -- --template vue-ts',
     expected: {
       framework: '@storybook/vue3-vite',
       renderer: '@storybook/vue3',
@@ -215,7 +216,7 @@ const baseTemplates = {
   },
   'html-webpack/default': {
     name: 'HTML Webpack5',
-    script: 'yarn create webpack5-html .',
+    script: 'yarn create webpack5-html {{beforeDir}}',
     expected: {
       framework: '@storybook/html-webpack5',
       renderer: '@storybook/html',
@@ -225,7 +226,8 @@ const baseTemplates = {
   },
   'html-vite/default-js': {
     name: 'HTML Vite JS',
-    script: 'yarn create vite . --template vanilla && echo "export default {}" > vite.config.js',
+    script:
+      'npm create vite@latest --yes {{beforeDir}} -- --template vanilla && cd {{beforeDir}} && echo "export default {}" > vite.config.js',
     expected: {
       framework: '@storybook/html-vite',
       renderer: '@storybook/html',
@@ -235,7 +237,8 @@ const baseTemplates = {
   },
   'html-vite/default-ts': {
     name: 'HTML Vite TS',
-    script: 'yarn create vite . --template vanilla-ts && echo "export default {}" > vite.config.js',
+    script:
+      'npm create vite@latest --yes {{beforeDir}} -- --template vanilla-ts && cd {{beforeDir}} && echo "export default {}" > vite.config.js',
     expected: {
       framework: '@storybook/html-vite',
       renderer: '@storybook/html',
@@ -245,7 +248,7 @@ const baseTemplates = {
   },
   'svelte-vite/default-js': {
     name: 'Svelte Vite (JS)',
-    script: 'yarn create vite . --template svelte',
+    script: 'npm create vite@latest --yes {{beforeDir}} -- --template svelte',
     expected: {
       framework: '@storybook/svelte-vite',
       renderer: '@storybook/svelte',
@@ -255,7 +258,7 @@ const baseTemplates = {
   },
   'svelte-vite/default-ts': {
     name: 'Svelte Vite (TS)',
-    script: 'yarn create vite . --template svelte-ts',
+    script: 'npm create vite@latest --yes {{beforeDir}} -- --template svelte-ts',
     expected: {
       framework: '@storybook/svelte-vite',
       renderer: '@storybook/svelte',
@@ -267,7 +270,7 @@ const baseTemplates = {
   'angular-cli/prerelease': {
     name: 'Angular CLI (Prerelease)',
     script:
-      'npx -p @angular/cli@next ng new angular-v16 --directory . --routing=true --minimal=true --style=scss --strict --skip-git --skip-install --package-manager=yarn',
+      'npx -p @angular/cli@next ng new angular-v16 --directory {{beforeDir}} --routing=true --minimal=true --style=scss --strict --skip-git --skip-install --package-manager=yarn',
     expected: {
       framework: '@storybook/angular',
       renderer: '@storybook/angular',
@@ -279,7 +282,7 @@ const baseTemplates = {
   'angular-cli/default-ts': {
     name: 'Angular CLI (latest)',
     script:
-      'npx -p @angular/cli ng new angular-latest --directory . --routing=true --minimal=true --style=scss --strict --skip-git --skip-install --package-manager=yarn',
+      'npx -p @angular/cli ng new angular-latest --directory {{beforeDir}} --routing=true --minimal=true --style=scss --strict --skip-git --skip-install --package-manager=yarn',
     expected: {
       framework: '@storybook/angular',
       renderer: '@storybook/angular',
@@ -290,7 +293,7 @@ const baseTemplates = {
   'angular-cli/14-ts': {
     name: 'Angular CLI (Version 14)',
     script:
-      'npx -p @angular/cli@14 ng new angular-v14 --directory . --routing=true --minimal=true --style=scss --strict --skip-git --skip-install --package-manager=yarn',
+      'npx -p @angular/cli@14 ng new angular-v14 --directory {{beforeDir}} --routing=true --minimal=true --style=scss --strict --skip-git --skip-install --package-manager=yarn',
     expected: {
       framework: '@storybook/angular',
       renderer: '@storybook/angular',
@@ -301,7 +304,7 @@ const baseTemplates = {
   'svelte-kit/skeleton-js': {
     name: 'Svelte Kit (JS)',
     script:
-      'yarn create svelte-with-args --name=svelte-kit/skeleton-js --directory=. --template=skeleton --types=null --no-prettier --no-eslint --no-playwright --no-vitest',
+      'yarn create svelte-with-args --name=svelte-kit/skeleton-js --directory={{beforeDir}} --template=skeleton --types=null --no-prettier --no-eslint --no-playwright --no-vitest',
     expected: {
       framework: '@storybook/sveltekit',
       renderer: '@storybook/svelte',
@@ -312,7 +315,7 @@ const baseTemplates = {
   'svelte-kit/skeleton-ts': {
     name: 'Svelte Kit (TS)',
     script:
-      'yarn create svelte-with-args --name=svelte-kit/skeleton-ts --directory=. --template=skeleton --types=typescript --no-prettier --no-eslint --no-playwright --no-vitest',
+      'yarn create svelte-with-args --name=svelte-kit/skeleton-ts --directory={{beforeDir}} --template=skeleton --types=typescript --no-prettier --no-eslint --no-playwright --no-vitest',
     expected: {
       framework: '@storybook/sveltekit',
       renderer: '@storybook/svelte',
@@ -323,7 +326,7 @@ const baseTemplates = {
   'lit-vite/default-js': {
     name: 'Lit Vite (JS)',
     script:
-      'npm create vite@latest --yes . -- --template lit && echo "export default {}" > vite.config.js',
+      'npm create vite@latest --yes {{beforeDir}} -- --template lit && cd {{beforeDir}} && echo "export default {}" > vite.config.js',
     expected: {
       framework: '@storybook/web-components-vite',
       renderer: '@storybook/web-components',
@@ -335,7 +338,7 @@ const baseTemplates = {
   'lit-vite/default-ts': {
     name: 'Lit Vite (TS)',
     script:
-      'npm create vite@latest --yes . -- --template lit-ts && echo "export default {}" > vite.config.js',
+      'npm create vite@latest --yes {{beforeDir}} -- --template lit-ts && cd {{beforeDir}} && echo "export default {}" > vite.config.js',
     expected: {
       framework: '@storybook/web-components-vite',
       renderer: '@storybook/web-components',
@@ -347,7 +350,7 @@ const baseTemplates = {
   'vue-cli/default-js': {
     name: 'Vue-CLI (Default JS)',
     script:
-      'npx -p @vue/cli vue create . --default --packageManager=yarn --force --merge && echo "module.exports = {}" > webpack.config.js',
+      'npx -p @vue/cli vue create {{beforeDir}} --default --packageManager=yarn --force --merge && cd {{beforeDir}} && echo "module.exports = {}" > webpack.config.js',
     expected: {
       framework: '@storybook/vue3-webpack5',
       renderer: '@storybook/vue3',
@@ -359,7 +362,7 @@ const baseTemplates = {
   'vue-cli/vue2-default-js': {
     name: 'Vue-CLI (Vue2 JS)',
     script:
-      'npx -p @vue/cli vue create . --default --packageManager=yarn --force --merge --preset="Default (Vue 2)" && echo "module.exports = {}" > webpack.config.js',
+      'npx -p @vue/cli vue create {{beforeDir}} --default --packageManager=yarn --force --merge --preset="Default (Vue 2)" && cd {{beforeDir}} && echo "module.exports = {}" > webpack.config.js',
     expected: {
       framework: '@storybook/vue-webpack5',
       renderer: '@storybook/vue',
@@ -371,7 +374,7 @@ const baseTemplates = {
   'preact-webpack5/default-js': {
     name: 'Preact CLI (Default JS)',
     script:
-      'npx preact-cli create default {{beforeDir}} --name preact-app --yarn --no-install && echo "module.exports = {}" > webpack.config.js',
+      'npx preact-cli create default {{beforeDir}} --name preact-app --yarn --no-install && cd {{beforeDir}} && echo "module.exports = {}" > webpack.config.js',
     expected: {
       framework: '@storybook/preact-webpack5',
       renderer: '@storybook/preact',
@@ -382,7 +385,7 @@ const baseTemplates = {
   'preact-webpack5/default-ts': {
     name: 'Preact CLI (Default TS)',
     script:
-      'npx preact-cli create typescript {{beforeDir}} --name preact-app --yarn --no-install && echo "module.exports = {}" > webpack.config.js',
+      'npx preact-cli create typescript {{beforeDir}} --name preact-app --yarn --no-install && cd {{beforeDir}} && echo "module.exports = {}" > webpack.config.js',
     expected: {
       framework: '@storybook/preact-webpack5',
       renderer: '@storybook/preact',
@@ -392,7 +395,7 @@ const baseTemplates = {
   },
   'preact-vite/default-js': {
     name: 'Preact Vite (JS)',
-    script: 'yarn create vite . --template preact',
+    script: 'npm create vite@latest --yes {{beforeDir}} -- --template preact',
     expected: {
       framework: '@storybook/preact-vite',
       renderer: '@storybook/preact',
@@ -402,7 +405,7 @@ const baseTemplates = {
   },
   'preact-vite/default-ts': {
     name: 'Preact Vite (TS)',
-    script: 'yarn create vite . --template preact-ts',
+    script: 'npm create vite@latest --yes {{beforeDir}} -- --template preact-ts',
     expected: {
       framework: '@storybook/preact-vite',
       renderer: '@storybook/preact',
@@ -459,7 +462,7 @@ const internalTemplates = {
   },
   'internal/server-webpack5': {
     name: 'Server Webpack5',
-    script: 'yarn init -y',
+    script: 'yarn init -y && echo "module.exports = {}" > webpack.config.js',
     expected: {
       framework: '@storybook/server-webpack5',
       renderer: '@storybook/server',