diff --git a/.circleci/config.yml b/.circleci/config.yml index 18ad245f250b..9dce34f6faf6 100644 --- a/.circleci/config.yml +++ b/.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' diff --git a/.github/workflows/generate-repros-next.yml b/.github/workflows/generate-repros-next.yml index a1774867b6c0..95dfdd803c8f 100644 --- a/.github/workflows/generate-repros-next.yml +++ b/.github/workflows/generate-repros-next.yml @@ -7,7 +7,7 @@ on: # To remove when the branch will be merged push: branches: - - shilman/add-angular-repro-template + - vite-frameworks jobs: generate: @@ -15,6 +15,9 @@ jobs: 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: | diff --git a/.github/workflows/generate-repros.yml b/.github/workflows/generate-repros.yml index 43b11ccfcce2..d66fbbe37244 100644 --- a/.github/workflows/generate-repros.yml +++ b/.github/workflows/generate-repros.yml @@ -15,9 +15,6 @@ jobs: 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: | diff --git a/code/.eslintrc.js b/code/.eslintrc.js index 1129908e7eb0..0e590a380807 100644 --- a/code/.eslintrc.js +++ b/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 + }, + }, ], }; diff --git a/code/.vscode/settings.json b/code/.vscode/settings.json new file mode 100644 index 000000000000..25fa6215fdd3 --- /dev/null +++ b/code/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "typescript.tsdk": "node_modules/typescript/lib" +} diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index a2c3e076e0bc..1ad99f71662e 100644 --- a/code/addons/a11y/package.json +++ b/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" diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json index 40ea81c45637..e3c1c838d6e0 100644 --- a/code/addons/backgrounds/package.json +++ b/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" diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json index 65207a7489c0..174f7ccfe4c3 100644 --- a/code/addons/controls/package.json +++ b/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" diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json index df0006d8a35b..f62e9e54a01a 100644 --- a/code/addons/jest/package.json +++ b/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" diff --git a/code/addons/links/package.json b/code/addons/links/package.json index 8ef24d9900ab..5f390fec36d9 100644 --- a/code/addons/links/package.json +++ b/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" diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json index d282049ee859..8cdf1701a339 100644 --- a/code/addons/measure/package.json +++ b/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" diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json index 252956864af8..6dc9a1e89a47 100644 --- a/code/addons/outline/package.json +++ b/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" diff --git a/code/addons/toolbars/package.json b/code/addons/toolbars/package.json index abd624753148..1a069ad18f04 100644 --- a/code/addons/toolbars/package.json +++ b/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" diff --git a/code/examples/vite-react-app/.eslintrc.js b/code/examples/vite-react-app/.eslintrc.js new file mode 100644 index 000000000000..593bd9708109 --- /dev/null +++ b/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], + }, +}; diff --git a/code/examples/vite-react-app/.gitignore b/code/examples/vite-react-app/.gitignore new file mode 100644 index 000000000000..a547bf36d8d1 --- /dev/null +++ b/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? diff --git a/code/examples/vite-react-app/.storybook/main.cjs b/code/examples/vite-react-app/.storybook/main.cjs new file mode 100644 index 000000000000..18cfb9773cec --- /dev/null +++ b/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 + }, +}; diff --git a/code/examples/vite-react-app/.storybook/preview-head.html b/code/examples/vite-react-app/.storybook/preview-head.html new file mode 100644 index 000000000000..05da1e9dfbfe --- /dev/null +++ b/code/examples/vite-react-app/.storybook/preview-head.html @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/code/examples/vite-react-app/.storybook/preview.js b/code/examples/vite-react-app/.storybook/preview.js new file mode 100644 index 000000000000..d3914580a724 --- /dev/null +++ b/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$/, + }, + }, +}; diff --git a/code/examples/vite-react-app/index.html b/code/examples/vite-react-app/index.html new file mode 100644 index 000000000000..b46ab83364e3 --- /dev/null +++ b/code/examples/vite-react-app/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/code/examples/vite-react-app/package.json b/code/examples/vite-react-app/package.json new file mode 100644 index 000000000000..5585eb63af29 --- /dev/null +++ b/code/examples/vite-react-app/package.json @@ -0,0 +1,27 @@ +{ + "name": "@storybook/example-vite-react-app", + "version": "7.0.0-alpha.23", + "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.23", + "@storybook/builder-vite": "7.0.0-alpha.23", + "@storybook/react": "7.0.0-alpha.23", + "@storybook/react-vite": "7.0.0-alpha.23", + "@vitejs/plugin-react": "^1.0.7", + "prop-types": "^15.8.1", + "sb": "7.0.0-alpha.23", + "vite": "^2.9.0" + } +} diff --git a/code/examples/vite-react-app/src/App.css b/code/examples/vite-react-app/src/App.css new file mode 100644 index 000000000000..8da3fde63d9e --- /dev/null +++ b/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); +} diff --git a/code/examples/vite-react-app/src/App.jsx b/code/examples/vite-react-app/src/App.jsx new file mode 100644 index 000000000000..28cea7c891ff --- /dev/null +++ b/code/examples/vite-react-app/src/App.jsx @@ -0,0 +1,46 @@ +/* eslint-disable no-shadow */ +import { useState } from 'react'; +import logo from './logo.svg'; +import './App.css'; + +function App() { + const [count, setCount] = useState(0); + + return ( +
+
+ logo +

Hello Vite + React!

+

+ +

+

+ Edit App.jsx and save to test HMR updates. +

+

+ + Learn React + + {' | '} + + Vite Docs + +

+
+
+ ); +} + +export default App; diff --git a/code/examples/vite-react-app/src/favicon.svg b/code/examples/vite-react-app/src/favicon.svg new file mode 100644 index 000000000000..de4aeddc12bd --- /dev/null +++ b/code/examples/vite-react-app/src/favicon.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/code/examples/vite-react-app/src/index.css b/code/examples/vite-react-app/src/index.css new file mode 100644 index 000000000000..ec2585e8c0bb --- /dev/null +++ b/code/examples/vite-react-app/src/index.css @@ -0,0 +1,13 @@ +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +code { + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + monospace; +} diff --git a/code/examples/vite-react-app/src/logo.svg b/code/examples/vite-react-app/src/logo.svg new file mode 100644 index 000000000000..6b60c1042f58 --- /dev/null +++ b/code/examples/vite-react-app/src/logo.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/code/examples/vite-react-app/src/main.jsx b/code/examples/vite-react-app/src/main.jsx new file mode 100644 index 000000000000..6832e7832bb9 --- /dev/null +++ b/code/examples/vite-react-app/src/main.jsx @@ -0,0 +1,11 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import './index.css'; +import App from './App'; + +ReactDOM.render( + + + , + document.getElementById('root') +); diff --git a/code/examples/vite-react-app/src/stories/Button.jsx b/code/examples/vite-react-app/src/stories/Button.jsx new file mode 100644 index 000000000000..15dde3920956 --- /dev/null +++ b/code/examples/vite-react-app/src/stories/Button.jsx @@ -0,0 +1,50 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import './button.css'; + +/** + * Primary UI component for user interaction + */ +export const Button = ({ primary, backgroundColor, size, label, ...props }) => { + const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'; + return ( + + ); +}; + +Button.propTypes = { + /** + * Is this the principal call to action on the page? + */ + primary: PropTypes.bool, + /** + * What background color to use + */ + backgroundColor: PropTypes.string, + /** + * How large should the button be? + */ + size: PropTypes.oneOf(['small', 'medium', 'large']), + /** + * Button contents + */ + label: PropTypes.string.isRequired, + /** + * Optional click handler + */ + onClick: PropTypes.func, +}; + +Button.defaultProps = { + backgroundColor: null, + primary: false, + size: 'medium', + onClick: undefined, +}; diff --git a/code/examples/vite-react-app/src/stories/Button.stories.jsx b/code/examples/vite-react-app/src/stories/Button.stories.jsx new file mode 100644 index 000000000000..61f6e19e14d7 --- /dev/null +++ b/code/examples/vite-react-app/src/stories/Button.stories.jsx @@ -0,0 +1,40 @@ +import React from 'react'; + +import { Button } from './Button'; + +// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export +export default { + title: 'Example/Button', + component: Button, + // More on argTypes: https://storybook.js.org/docs/react/api/argtypes + argTypes: { + backgroundColor: { control: 'color' }, + }, +}; + +// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args +const Template = (args) =>