diff --git a/.github/workflows/generate-sandboxes-next.yml b/.github/workflows/generate-sandboxes-next.yml index 29b45c34696f..b9cef59cda1f 100644 --- 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: - # - + push: + branches: + - norbert/fix-sandbox-generation-script # 2. change the "ref" value to 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 index 07b294eec7f5..a2b2a859bcc3 100644 --- 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',