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

…tion-script Build: Fix sandbox generation scripts
storybookjs · May 18, 2023 · 49a92bd · 49a92bd
2 parents 5290895 + c2673b4
commit 49a92bd
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 33 deletions.
diff --git a/.github/workflows/generate-sandboxes-next.yml b/.github/workflows/generate-sandboxes-next.yml
@@ -6,9 +6,9 @@ on:
   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>
+  push:
+    branches:
+      - norbert/fix-sandbox-generation-script
   # 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.
 
@@ -24,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: 'npm create vite@latest --yes . -- --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: 'npm create vite@latest --yes . -- --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: 'npm create vite@latest --yes . -- --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: 'npm create vite@latest --yes . -- --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',
@@ -226,7 +227,7 @@ const baseTemplates = {
   'html-vite/default-js': {
     name: 'HTML Vite JS',
     script:
-      'npm create vite@latest --yes . -- --template vanilla && echo "export default {}" > vite.config.js',
+      'npm create vite@latest --yes {{beforeDir}} -- --template vanilla && cd {{beforeDir}} && echo "export default {}" > vite.config.js',
     expected: {
       framework: '@storybook/html-vite',
       renderer: '@storybook/html',
@@ -237,7 +238,7 @@ const baseTemplates = {
   'html-vite/default-ts': {
     name: 'HTML Vite TS',
     script:
-      'npm create vite@latest --yes . -- --template vanilla-ts && echo "export default {}" > vite.config.js',
+      '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',
@@ -247,7 +248,7 @@ const baseTemplates = {
   },
   'svelte-vite/default-js': {
     name: 'Svelte Vite (JS)',
-    script: 'npm create vite@latest --yes . -- --template svelte',
+    script: 'npm create vite@latest --yes {{beforeDir}} -- --template svelte',
     expected: {
       framework: '@storybook/svelte-vite',
       renderer: '@storybook/svelte',
@@ -257,7 +258,7 @@ const baseTemplates = {
   },
   'svelte-vite/default-ts': {
     name: 'Svelte Vite (TS)',
-    script: 'npm create vite@latest --yes . -- --template svelte-ts',
+    script: 'npm create vite@latest --yes {{beforeDir}} -- --template svelte-ts',
     expected: {
       framework: '@storybook/svelte-vite',
       renderer: '@storybook/svelte',
@@ -269,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',
@@ -280,7 +281,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',
@@ -291,7 +292,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',
@@ -302,7 +303,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',
@@ -313,7 +314,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',
@@ -324,7 +325,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',
@@ -336,7 +337,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',
@@ -348,7 +349,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',
@@ -360,7 +361,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',
@@ -372,7 +373,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',
@@ -383,7 +384,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',
@@ -393,7 +394,7 @@ const baseTemplates = {
   },
   'preact-vite/default-js': {
     name: 'Preact Vite (JS)',
-    script: 'npm create vite@latest --yes . -- --template preact',
+    script: 'npm create vite@latest --yes {{beforeDir}} -- --template preact',
     expected: {
       framework: '@storybook/preact-vite',
       renderer: '@storybook/preact',
@@ -403,7 +404,7 @@ const baseTemplates = {
   },
   'preact-vite/default-ts': {
     name: 'Preact Vite (TS)',
-    script: 'npm create vite@latest --yes . -- --template preact-ts',
+    script: 'npm create vite@latest --yes {{beforeDir}} -- --template preact-ts',
     expected: {
       framework: '@storybook/preact-vite',
       renderer: '@storybook/preact',
@@ -460,7 +461,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',