Vite: Add builder, react, vue3 frameworks

.circleci/config.yml

@@ -257,7 +257,7 @@ jobs:
   #   executor:
   #     class: large
   #     name: sb_cypress_8_node_14
-  #   parallelism: 2
+  #   parallelism: 8
   #   steps:
   #     - git-shallow-clone/checkout_advanced:
   #         clone_options: '--depth 1 --verbose'
@@ -462,7 +462,7 @@ jobs:
     executor:
       class: medium+
       name: sb_node_14_browsers
-    parallelism: 2
+    parallelism: 6
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -482,7 +482,7 @@ jobs:
     executor:
       class: medium+
       name: sb_node_14_browsers
-    parallelism: 2
+    parallelism: 6
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -498,7 +498,7 @@ jobs:
     executor:
       class: medium+
       name: sb_node_14_browsers
-    parallelism: 2
+    parallelism: 6
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -518,7 +518,7 @@ jobs:
     executor:
       class: medium+
       name: sb_node_14_browsers
-    parallelism: 2
+    parallelism: 6
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -534,7 +534,7 @@ jobs:
     executor:
       class: medium+
       name: sb_node_14_browsers
-    parallelism: 2
+    parallelism: 6
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -549,7 +549,7 @@ jobs:
   e2e-sandboxes:
     docker:
       - image: mcr.microsoft.com/playwright:v1.24.0-focal
-    parallelism: 2
+    parallelism: 6
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'

.github/workflows/generate-repros-next.yml

@@ -7,14 +7,17 @@ on:
   # To remove when the branch will be merged
   push:
     branches:
-      - shilman/add-angular-repro-template
+      - vite-frameworks-xyz
 
 jobs:
   generate:
     runs-on: ubuntu-latest
     env:
       YARN_ENABLE_IMMUTABLE_INSTALLS: false
     steps:
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 14
       - uses: actions/checkout@v2
       - name: Setup git user
         run: |

code/.eslintrc.js

@@ -101,5 +101,11 @@ module.exports = {
         'jest/no-test-callback': 'off', // These aren't jest tests
       },
     },
+    {
+      files: ['**/builder-vite/input/iframe.html'],
+      rules: {
+        'no-undef': 'off', // ignore "window" undef errors
+      },
+    },
   ],
 };

code/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

code/addons/a11y/package.json

@@ -31,12 +31,12 @@
       "import": "./dist/index.mjs",
       "types": "./dist/index.d.ts"
     },
-    "./manager": {
+    "./manager.js": {
       "require": "./dist/manager.js",
       "import": "./dist/manager.mjs",
       "types": "./dist/manager.d.ts"
     },
-    "./preview": {
+    "./preview.js": {
       "require": "./dist/preview.js",
       "import": "./dist/preview.mjs",
       "types": "./dist/preview.d.ts"

code/addons/backgrounds/package.json

@@ -31,12 +31,12 @@
       "import": "./dist/index.mjs",
       "types": "./dist/index.d.ts"
     },
-    "./manager": {
+    "./manager.js": {
       "require": "./dist/manager.js",
       "import": "./dist/manager.mjs",
       "types": "./dist/manager.d.ts"
     },
-    "./preview": {
+    "./preview.js": {
       "require": "./dist/preview.js",
       "import": "./dist/preview.mjs",
       "types": "./dist/preview.d.ts"

code/addons/controls/package.json

@@ -31,7 +31,7 @@
       "import": "./dist/index.mjs",
       "types": "./dist/index.d.ts"
     },
-    "./manager": {
+    "./manager.js": {
       "require": "./dist/manager.js",
       "import": "./dist/manager.mjs",
       "types": "./dist/manager.d.ts"

code/addons/jest/package.json

@@ -33,7 +33,7 @@
       "import": "./dist/index.mjs",
       "types": "./dist/index.d.ts"
     },
-    "./manager": {
+    "./manager.js": {
       "require": "./dist/manager.js",
       "import": "./dist/manager.mjs",
       "types": "./dist/manager.d.ts"

code/addons/links/package.json

@@ -27,12 +27,12 @@
       "import": "./dist/index.mjs",
       "types": "./dist/index.d.ts"
     },
-    "./manager": {
+    "./manager.js": {
       "require": "./dist/manager.js",
       "import": "./dist/manager.mjs",
       "types": "./dist/manager.d.ts"
     },
-    "./preview": {
+    "./preview.js": {
       "require": "./dist/preview.js",
       "import": "./dist/preview.mjs",
       "types": "./dist/preview.d.ts"

code/addons/measure/package.json

@@ -30,12 +30,12 @@
       "import": "./dist/index.mjs",
       "types": "./dist/index.d.ts"
     },
-    "./manager": {
+    "./manager.js": {
       "require": "./dist/manager.js",
       "import": "./dist/manager.mjs",
       "types": "./dist/manager.d.ts"
     },
-    "./preview": {
+    "./preview.js": {
       "require": "./dist/preview.js",
       "import": "./dist/preview.mjs",
       "types": "./dist/preview.d.ts"

code/addons/outline/package.json

@@ -33,12 +33,12 @@
       "import": "./dist/index.mjs",
       "types": "./dist/index.d.ts"
     },
-    "./manager": {
+    "./manager.js": {
       "require": "./dist/manager.js",
       "import": "./dist/manager.mjs",
       "types": "./dist/manager.d.ts"
     },
-    "./preview": {
+    "./preview.js": {
       "require": "./dist/preset/preview.js",
       "import": "./dist/preset/preview.mjs",
       "types": "./dist/preview.d.ts"

code/addons/toolbars/package.json

@@ -31,7 +31,7 @@
       "import": "./dist/index.mjs",
       "types": "./dist/index.d.ts"
     },
-    "./manager": {
+    "./manager.js": {
       "require": "./dist/manager.js",
       "import": "./dist/manager.mjs",
       "types": "./dist/manager.d.ts"

code/examples/vite-react-app/.eslintrc.js

@@ -0,0 +1,11 @@
+module.exports = {
+  extends: ['../../.eslintrc.js'],
+  env: {
+    browser: true,
+  },
+  rules: {
+    'import/extensions': [0],
+    'import/no-unresolved': [0],
+    'react/react-in-jsx-scope': [0],
+  },
+};

code/examples/vite-react-app/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

code/examples/vite-react-app/.storybook/main.cjs

@@ -0,0 +1,14 @@
+module.exports = {
+  stories: [
+    // '../src/**/*.stories.mdx',
+    '../src/**/*.stories.@(js|jsx|ts|tsx)',
+  ],
+  addons: ['@storybook/addon-essentials'],
+  framework: '@storybook/react-vite',
+  features: {
+    storyStoreV7: true,
+  },
+  docs: {
+    docsPage: false, // set to false to disable docs page entirely
+  },
+};

code/examples/vite-react-app/.storybook/preview-head.html

@@ -0,0 +1,3 @@
+<script>
+  window.global = window;
+</script>

code/examples/vite-react-app/.storybook/preview.js

@@ -0,0 +1,9 @@
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};

code/examples/vite-react-app/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

code/examples/vite-react-app/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@storybook/example-vite-react-app",
+  "version": "7.0.0-alpha.24",
+  "scripts": {
+    "build": "vite build",
+    "build-storybook": "STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true sb build",
+    "dev": "vite",
+    "preview": "vite preview",
+    "storybook": "STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true sb dev --no-manager-cache"
+  },
+  "dependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "@mdx-js/preact": "^1.6.0",
+    "@mdx-js/react": "^1.6.0",
+    "@storybook/addon-essentials": "7.0.0-alpha.24",
+    "@storybook/builder-vite": "7.0.0-alpha.24",
+    "@storybook/react": "7.0.0-alpha.24",
+    "@storybook/react-vite": "7.0.0-alpha.24",
+    "@vitejs/plugin-react": "^1.0.7",
+    "prop-types": "^15.8.1",
+    "sb": "7.0.0-alpha.24",
+    "vite": "^2.9.0"
+  }
+}

code/examples/vite-react-app/src/App.css

@@ -0,0 +1,42 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+button {
+  font-size: calc(10px + 2vmin);
+}