diff --git a/.circleci/config.yml b/.circleci/config.yml index d32e17095e49..31ed1d0aec8a 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -223,7 +223,7 @@ jobs: yarn lint check: executor: - class: large + class: xlarge name: sb_node_16_classic steps: - git-shallow-clone/checkout_advanced: @@ -358,7 +358,7 @@ jobs: executor: class: medium name: sb_playwright - parallelism: 8 + parallelism: 9 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 c6af28c1508b..42b36076d37b 100644 --- a/.github/workflows/generate-repros-next.yml +++ b/.github/workflows/generate-repros-next.yml @@ -14,6 +14,7 @@ jobs: runs-on: ubuntu-latest env: YARN_ENABLE_IMMUTABLE_INSTALLS: false + CLEANUP_REPRO_NODE_MODULES: true steps: - uses: actions/setup-node@v3 with: diff --git a/.vscode/settings.json b/.vscode/settings.json index e4831db738b6..75ad91c657f1 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,4 +1,21 @@ { "deepscan.enable": true, - "typescript.tsdk": "./code/node_modules/typescript/lib" + "eslint.workingDirectories": ["./code", "./scripts"], + "typescript.tsdk": "./code/node_modules/typescript/lib", + "[javascript]": { + "editor.defaultFormatter": "dbaeumer.vscode-eslint", + "editor.formatOnSave": true + }, + "[javascriptreact]": { + "editor.defaultFormatter": "dbaeumer.vscode-eslint", + "editor.formatOnSave": true + }, + "[typescript]": { + "editor.defaultFormatter": "dbaeumer.vscode-eslint", + "editor.formatOnSave": true + }, + "[typescriptreact]": { + "editor.defaultFormatter": "dbaeumer.vscode-eslint", + "editor.formatOnSave": true + }, } diff --git a/CHANGELOG.md b/CHANGELOG.md index 2931f69f6bd0..8c8c22819a63 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,44 @@ +## 7.0.0-alpha.47 (November 1, 2022) + +#### Features + +- CSF-tools: Turn story comments into docs descriptions [#19684](https://github.com/storybooks/storybook/pull/19684) +- CLI: Migrate CLI templates to CSF3 [#19665](https://github.com/storybooks/storybook/pull/19665) +- Vite: Set default `base` for subfolder deployments [#19383](https://github.com/storybooks/storybook/pull/19383) + +#### Bug Fixes + +- Disable keyboard shortcuts during (docs) play functions and add tests [#19668](https://github.com/storybooks/storybook/pull/19668) + +#### Maintenance + +- Addon-docs: Replace source-loader with csf-plugin [#19680](https://github.com/storybooks/storybook/pull/19680) +- CLI: Move all templates out of cli into renderers [#19664](https://github.com/storybooks/storybook/pull/19664) +- Addon-docs: Remove mdx-compiler-plugin [#19681](https://github.com/storybooks/storybook/pull/19681) + +## 7.0.0-alpha.46 (October 28, 2022) + +#### Features + +- Addon-docs: Don't show docspage unless the user opts in [#19627](https://github.com/storybooks/storybook/pull/19627) +- Core: Allow setting tags in storiesOf via parameters. [#19642](https://github.com/storybooks/storybook/pull/19642) + +#### Bug Fixes + +- Addon-docs: Fix React Profiler in source snippets [#19004](https://github.com/storybooks/storybook/pull/19004) + +#### Maintenance + +- Telemetry: Measure version update check [#19660](https://github.com/storybooks/storybook/pull/19660) +- Build: Bundle lib/preview-web with ts-up [#19655](https://github.com/storybooks/storybook/pull/19655) +- CSF-tools: Make ESM node compatible [#19661](https://github.com/storybooks/storybook/pull/19661) +- Telemetry: Measure docs usage [#19648](https://github.com/storybooks/storybook/pull/19648) +- Go back to `csf@next` [#19657](https://github.com/storybooks/storybook/pull/19657) + +#### Build + +- Build: Reduce parallelism in check task [#19662](https://github.com/storybooks/storybook/pull/19662) + ## 7.0.0-alpha.45 (October 28, 2022) #### Bug Fixes diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md index 522981138eb7..63f02009935a 100644 --- a/CODE_OF_CONDUCT.md +++ b/CODE_OF_CONDUCT.md @@ -1,54 +1,134 @@ + # Contributor Covenant Code of Conduct ## Our Pledge -In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation. +We as members, contributors, and leaders pledge to make participation in our +community a harassment-free experience for everyone, regardless of age, body +size, visible or invisible disability, ethnicity, sex characteristics, gender +identity and expression, level of experience, education, socio-economic status, +nationality, personal appearance, race, caste, color, religion, or sexual +identity and orientation. + +We pledge to act and interact in ways that contribute to an open, welcoming, +diverse, inclusive, and healthy community. ## Our Standards -Examples of behavior that contributes to creating a positive environment include: +Examples of behavior that contributes to a positive environment for our +community include: -- Using welcoming and inclusive language -- Being respectful of differing viewpoints and experiences -- Gracefully accepting constructive criticism -- Focusing on what is best for the community -- Showing empathy towards other community members +* Demonstrating empathy and kindness toward other people +* Being respectful of differing opinions, viewpoints, and experiences +* Giving and gracefully accepting constructive feedback +* Accepting responsibility and apologizing to those affected by our mistakes, + and learning from the experience +* Focusing on what is best not just for us as individuals, but for the overall + community -Examples of unacceptable behavior by participants include: +Examples of unacceptable behavior include: -- The use of sexualized language or imagery and unwelcome sexual attention or advances -- Trolling, insulting/derogatory comments, and personal or political attacks -- Public or private harassment -- Publishing others' private information, such as a physical or electronic address, without explicit permission -- Other conduct which could reasonably be considered inappropriate in a professional setting +* The use of sexualized language or imagery, and sexual attention or advances of + any kind +* Trolling, insulting or derogatory comments, and personal or political attacks +* Public or private harassment +* Publishing others' private information, such as a physical or email address, + without their explicit permission +* Other conduct which could reasonably be considered inappropriate in a + professional setting -## Our Responsibilities +## Enforcement Responsibilities -Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. +Community leaders are responsible for clarifying and enforcing our standards of +acceptable behavior and will take appropriate and fair corrective action in +response to any behavior that they deem inappropriate, threatening, offensive, +or harmful. -Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. +Community leaders have the right and responsibility to remove, edit, or reject +comments, commits, code, wiki edits, issues, and other contributions that are +not aligned to this Code of Conduct, and will communicate reasons for moderation +decisions when appropriate. ## Scope -This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. +This Code of Conduct applies within all community spaces, and also applies when +an individual is officially representing the community in public spaces. +Examples of representing our community include using an official e-mail address, +posting via an official social media account, or acting as an appointed +representative at an online or offline event. ## Enforcement -Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting one of the Steering committee members: +Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting one of the Steering committee members for enforcement: + +- Norbert de Langen ~ @ndelangen - `ndelangen@me.com` +- Igor Davydkin ~ @igordv - `davydkin.igor@gmail.com` +- Tom Coleman ~ @tmeasday - `tom@thesnail.org` +- Michael Shilman ~ @shilman - `michael@lab80.co` +- Philip Riabchun ~ @hypnosphi - `talpa@yandex.ru` + +The steering committee will review and investigate all complaints and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. + +## Enforcement Guidelines + +Project maintainers or community leaders who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. + +### 1. Correction + +**Community Impact**: Use of inappropriate language or other behavior deemed +unprofessional or unwelcome in the community. + +**Consequence**: A private, written warning from community leaders, providing +clarity around the nature of the violation and an explanation of why the +behavior was inappropriate. A public apology may be requested. -Norbert de Langen ~ @ndelangen - `ndelangen@me.com` -Igor Davydkin ~ @igordv - `davydkin.igor@gmail.com` -Tom Coleman ~ @tmeasday - `tom@thesnail.org` -Michael Shilman ~ @shilman - `michael@lab80.co` -Philip Riabchun ~ @hypnosphi - `talpa@yandex.ru` +### 2. Warning -The steering committee will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. +**Community Impact**: A violation through a single incident or series of +actions. -Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. +**Consequence**: A warning with consequences for continued behavior. No +interaction with the people involved, including unsolicited interaction with +those enforcing the Code of Conduct, for a specified period of time. This +includes avoiding interactions in community spaces as well as external channels +like social media. Violating these terms may lead to a temporary or permanent +ban. + +### 3. Temporary Ban + +**Community Impact**: A serious violation of community standards, including +sustained inappropriate behavior. + +**Consequence**: A temporary ban from any sort of interaction or public +communication with the community for a specified period of time. No public or +private interaction with the people involved, including unsolicited interaction +with those enforcing the Code of Conduct, is allowed during this period. +Violating these terms may lead to a permanent ban. + +### 4. Permanent Ban + +**Community Impact**: Demonstrating a pattern of violation of community +standards, including sustained inappropriate behavior, harassment of an +individual, or aggression toward or disparagement of classes of individuals. + +**Consequence**: A permanent ban from any sort of public interaction within the +community. ## Attribution -This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version] +This Code of Conduct is adapted from the [Contributor Covenant][homepage], +version 2.1, available at +[https://www.contributor-covenant.org/version/2/1/code_of_conduct.html][v2.1]. + +Community Impact Guidelines were inspired by +[Mozilla's code of conduct enforcement ladder][Mozilla CoC]. + +For answers to common questions about this code of conduct, see the FAQ at +[https://www.contributor-covenant.org/faq][FAQ]. Translations are available at +[https://www.contributor-covenant.org/translations][translations]. -[homepage]: http://contributor-covenant.org -[version]: http://contributor-covenant.org/version/1/4/ +[homepage]: https://www.contributor-covenant.org +[v2.1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct.html +[Mozilla CoC]: https://github.com/mozilla/diversity +[FAQ]: https://www.contributor-covenant.org/faq +[translations]: https://www.contributor-covenant.org/translations diff --git a/MIGRATION.md b/MIGRATION.md index 75baa360fcd5..400bbdf8fe7a 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -37,6 +37,7 @@ - [Configuring the Docs Container](#configuring-the-docs-container) - [External Docs](#external-docs) - [MDX2 upgrade](#mdx2-upgrade) + - [Dropped source loader / storiesOf static snippets](#dropped-source-loader--storiesof-static-snippets) - [Dropped addon-docs manual configuration](#dropped-addon-docs-manual-configuration) - [7.0 Deprecations](#70-deprecations) - [`Story` type deprecated](#story-type-deprecated) @@ -359,7 +360,7 @@ Each addon is imported into the manager as an ESM module that's bundled separate SB6.x framework packages shipped binaries called `start-storybook` and `build-storybook`. -In SB7.0, we've removed these binaries and replaced them with new commands in Storybook's CLI: `sb dev` and `sb build`. These commands will look for the `framework` field in your `.storybook/main.js` config--[which is now required](#framework-field-mandatory)--and use that to determine how to start/build your storybook. The benefit of this change is that it is now possible to install multiple frameworks in a project without having to worry about hoisting issues. +In SB7.0, we've removed these binaries and replaced them with new commands in Storybook's CLI: `storybook dev` and `storybook build`. These commands will look for the `framework` field in your `.storybook/main.js` config--[which is now required](#framework-field-mandatory)--and use that to determine how to start/build your storybook. The benefit of this change is that it is now possible to install multiple frameworks in a project without having to worry about hoisting issues. A typical storybook project includes two scripts in your projects `package.json`: @@ -381,7 +382,7 @@ To convert this project to 7.0: "build-storybook": "storybook build " }, "devDependencies": { - "storybook": "future" + "storybook": "next" } } ``` @@ -461,9 +462,9 @@ In 7.0, the `main.js` fields `reactOptions` and `angularOptions` have been renam module.exports = { framework: { name: '@storybook/react-webpack5', - options: { fastRefresh: true }; - } -} + options: { fastRefresh: true }, + }, +}; ``` #### Framework standalone build moved @@ -656,12 +657,24 @@ You can configure Docs Page in `main.js`: ```js module.exports = { docs: { - docsPage: true, // set to false to disable docs page entirely + docsPage: 'automatic', // see below for alternatives defaultName: 'Docs', // set to change the name of generated docs entries }, }; ``` +If you are migrating from 6.x your `docs.docsPage` option will have been set to `'automatic'`, which has the effect of enabling docs page for _every_ CSF file. However, as of 7.0, the new default is `true`, which requires opting into DocsPage per-CSF file, with the `docsPage` **tag** on your component export: + +```ts +export default { + component: MyComponent + // Tags are a new feature coming in 7.1, that we are using to drive this behaviour. + tags: ['docsPage'] +} +``` + +You can also set `docsPage: false` to opt-out of docs page entirely. + You can change the default template in the same way as in 6.x, using the `docs.page` parameter. #### Configuring the Docs Container @@ -737,6 +750,32 @@ We will update this section with specific pointers based on user feedback during As part of the upgrade we deleted the codemod `mdx-to-csf` and will be replacing it with a more sophisticated version prior to release. +#### Dropped source loader / storiesOf static snippets + +In SB 6.x, Storybook Docs used a webpack loader called `source-loader` to help display static code snippets. This was configurable using the `options.sourceLoaderOptions` field. + +In SB 7.0, we've moved to a faster, simpler alternative called `csf-plugin` that **only supports CSF**. It is configurable using the `options.csfPluginOptions` field. + +If you're using `storiesOf` and want to restore the previous behavior, you can add `source-loader` by hand to your webpack config using the following snippet in `main.js`: + +```js +module.exports = { + webpackFinal: (config) => { + config.modules.rules.push({ + test: /\.stories\.[tj]sx?$/, + use: [ + { + loader: require.resolve('@storybook/source-loader'), + options: {} /* your sourceLoaderOptions here */, + }, + ], + enforce: 'pre', + }); + return config; + }, +}; +``` + #### Dropped addon-docs manual configuration Storybook Docs 5.x shipped with instructions for how to manually configure webpack and storybook without the use of Storybook's "presets" feature. Over time, these docs went out of sync. Now in Storybook 7 we have removed support for manual configuration entirely. diff --git a/code/.eslintignore b/code/.eslintignore index db97fa57090f..6f8539b9b7b6 100644 --- a/code/.eslintignore +++ b/code/.eslintignore @@ -6,13 +6,11 @@ node_modules docs/public storybook-static built-storybooks -lib/cli/test lib/codemod/src/transforms/__testfixtures__ scripts/storage scripts/repros-generator *.bundle.js *.js.map -*.d.ts examples/ember-cli/.storybook/preview-head.html examples/official-storybook/tests/addon-jest.test.js ember-output diff --git a/code/.eslintrc.js b/code/.eslintrc.js index f8ebbcc1b788..a22b9fd2de0e 100644 --- a/code/.eslintrc.js +++ b/code/.eslintrc.js @@ -150,5 +150,12 @@ module.exports = { 'no-undef': 'off', // ignore "window" undef errors }, }, + { + // Because those templates reference css files in other directory. + files: ['**/template/cli/**/*'], + rules: { + 'import/no-unresolved': 'off', + }, + }, ], }; diff --git a/code/.vscode/settings.json b/code/.vscode/settings.json index 25fa6215fdd3..2a8b89c7e53a 100644 --- a/code/.vscode/settings.json +++ b/code/.vscode/settings.json @@ -1,3 +1,21 @@ { - "typescript.tsdk": "node_modules/typescript/lib" + "deepscan.enable": true, + "eslint.workingDirectories": [".", "../scripts"], + "typescript.tsdk": "node_modules/typescript/lib", + "[javascript]": { + "editor.defaultFormatter": "dbaeumer.vscode-eslint", + "editor.formatOnSave": true + }, + "[javascriptreact]": { + "editor.defaultFormatter": "dbaeumer.vscode-eslint", + "editor.formatOnSave": true + }, + "[typescript]": { + "editor.defaultFormatter": "dbaeumer.vscode-eslint", + "editor.formatOnSave": true + }, + "[typescriptreact]": { + "editor.defaultFormatter": "dbaeumer.vscode-eslint", + "editor.formatOnSave": true + } } diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index e87862d40497..8c6d1d8e168f 100644 --- a/code/addons/a11y/package.json +++ b/code/addons/a11y/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-a11y", - "version": "7.0.0-alpha.45", + "version": "7.0.0-alpha.47", "description": "Test component compliance with web accessibility standards", "keywords": [ "a11y", @@ -62,15 +62,15 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/addon-highlight": "7.0.0-alpha.45", - "@storybook/addons": "7.0.0-alpha.45", - "@storybook/api": "7.0.0-alpha.45", - "@storybook/channels": "7.0.0-alpha.45", - "@storybook/client-logger": "7.0.0-alpha.45", - "@storybook/components": "7.0.0-alpha.45", - "@storybook/core-events": "7.0.0-alpha.45", - "@storybook/theming": "7.0.0-alpha.45", - "@storybook/types": "7.0.0-alpha.45", + "@storybook/addon-highlight": "7.0.0-alpha.47", + "@storybook/addons": "7.0.0-alpha.47", + "@storybook/api": "7.0.0-alpha.47", + "@storybook/channels": "7.0.0-alpha.47", + "@storybook/client-logger": "7.0.0-alpha.47", + "@storybook/components": "7.0.0-alpha.47", + "@storybook/core-events": "7.0.0-alpha.47", + "@storybook/theming": "7.0.0-alpha.47", + "@storybook/types": "7.0.0-alpha.47", "axe-core": "^4.2.0", "global": "^4.4.0", "lodash": "^4.17.21", @@ -102,7 +102,7 @@ "./src/preview.tsx" ] }, - "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532", + "gitHead": "1c706a4a778831e012343c905f86225fa71491a7", "storybook": { "displayName": "Accessibility", "icon": "https://user-images.githubusercontent.com/263385/101991665-47042f80-3c7c-11eb-8f00-64b5a18f498a.png", diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json index 86315ddd26cc..91b57e0027ee 100644 --- a/code/addons/actions/package.json +++ b/code/addons/actions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-actions", - "version": "7.0.0-alpha.45", + "version": "7.0.0-alpha.47", "description": "Get UI feedback when an action is performed on an interactive element", "keywords": [ "storybook", @@ -63,13 +63,13 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/addons": "7.0.0-alpha.45", - "@storybook/api": "7.0.0-alpha.45", - "@storybook/client-logger": "7.0.0-alpha.45", - "@storybook/components": "7.0.0-alpha.45", - "@storybook/core-events": "7.0.0-alpha.45", - "@storybook/theming": "7.0.0-alpha.45", - "@storybook/types": "7.0.0-alpha.45", + "@storybook/addons": "7.0.0-alpha.47", + "@storybook/api": "7.0.0-alpha.47", + "@storybook/client-logger": "7.0.0-alpha.47", + "@storybook/components": "7.0.0-alpha.47", + "@storybook/core-events": "7.0.0-alpha.47", + "@storybook/theming": "7.0.0-alpha.47", + "@storybook/types": "7.0.0-alpha.47", "dequal": "^2.0.2", "global": "^4.4.0", "lodash": "^4.17.21", @@ -107,7 +107,7 @@ "./src/preview.ts" ] }, - "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532", + "gitHead": "1c706a4a778831e012343c905f86225fa71491a7", "storybook": { "displayName": "Actions", "unsupportedFrameworks": [ diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json index 3fd50dfe4c44..12124cdcd4c2 100644 --- a/code/addons/backgrounds/package.json +++ b/code/addons/backgrounds/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-backgrounds", - "version": "7.0.0-alpha.45", + "version": "7.0.0-alpha.47", "description": "Switch backgrounds to view components in different settings", "keywords": [ "addon", @@ -62,13 +62,13 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/addons": "7.0.0-alpha.45", - "@storybook/api": "7.0.0-alpha.45", - "@storybook/client-logger": "7.0.0-alpha.45", - "@storybook/components": "7.0.0-alpha.45", - "@storybook/core-events": "7.0.0-alpha.45", - "@storybook/theming": "7.0.0-alpha.45", - "@storybook/types": "7.0.0-alpha.45", + "@storybook/addons": "7.0.0-alpha.47", + "@storybook/api": "7.0.0-alpha.47", + "@storybook/client-logger": "7.0.0-alpha.47", + "@storybook/components": "7.0.0-alpha.47", + "@storybook/core-events": "7.0.0-alpha.47", + "@storybook/theming": "7.0.0-alpha.47", + "@storybook/types": "7.0.0-alpha.47", "global": "^4.4.0", "memoizerific": "^1.11.3", "ts-dedent": "^2.0.0" @@ -98,7 +98,7 @@ "./src/preview.tsx" ] }, - "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532", + "gitHead": "1c706a4a778831e012343c905f86225fa71491a7", "storybook": { "displayName": "Backgrounds", "icon": "https://user-images.githubusercontent.com/263385/101991667-479cc600-3c7c-11eb-96d3-410e936252e7.png", diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json index 022d4a554d30..18adadb1e421 100644 --- a/code/addons/controls/package.json +++ b/code/addons/controls/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-controls", - "version": "7.0.0-alpha.45", + "version": "7.0.0-alpha.47", "description": "Interact with component inputs dynamically in the Storybook UI", "keywords": [ "addon", @@ -57,16 +57,16 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/addons": "7.0.0-alpha.45", - "@storybook/api": "7.0.0-alpha.45", - "@storybook/blocks": "7.0.0-alpha.45", - "@storybook/client-logger": "7.0.0-alpha.45", - "@storybook/components": "7.0.0-alpha.45", - "@storybook/core-common": "7.0.0-alpha.45", - "@storybook/node-logger": "7.0.0-alpha.45", - "@storybook/store": "7.0.0-alpha.45", - "@storybook/theming": "7.0.0-alpha.45", - "@storybook/types": "7.0.0-alpha.45", + "@storybook/addons": "7.0.0-alpha.47", + "@storybook/api": "7.0.0-alpha.47", + "@storybook/blocks": "7.0.0-alpha.47", + "@storybook/client-logger": "7.0.0-alpha.47", + "@storybook/components": "7.0.0-alpha.47", + "@storybook/core-common": "7.0.0-alpha.47", + "@storybook/node-logger": "7.0.0-alpha.47", + "@storybook/store": "7.0.0-alpha.47", + "@storybook/theming": "7.0.0-alpha.47", + "@storybook/types": "7.0.0-alpha.47", "lodash": "^4.17.21", "ts-dedent": "^2.0.0" }, @@ -92,7 +92,7 @@ ], "platform": "browser" }, - "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532", + "gitHead": "1c706a4a778831e012343c905f86225fa71491a7", "storybook": { "displayName": "Controls", "icon": "https://user-images.githubusercontent.com/263385/101991669-479cc600-3c7c-11eb-93d9-38b67e8371f2.png", diff --git a/code/addons/docs/README.md b/code/addons/docs/README.md index 22b7daf85091..a1309f736b18 100644 --- a/code/addons/docs/README.md +++ b/code/addons/docs/README.md @@ -142,7 +142,7 @@ module.exports = { options: { configureJSX: true, babelOptions: {}, - sourceLoaderOptions: null, + csfPluginOptions: null, transcludeMarkdown: true, }, }, @@ -152,7 +152,7 @@ module.exports = { The `configureJSX` option is useful when you're writing your docs in MDX and your project's babel config isn't already set up to handle JSX files. `babelOptions` is a way to further configure the babel processor when you're using `configureJSX`. -`sourceLoaderOptions` is an object for configuring `@storybook/source-loader`. When set to `null` it tells docs not to run the `source-loader` at all, which can be used as an optimization, or if you're already using `source-loader` in your `main.js`. +`csfPluginOptions` is an object for configuring `@storybook/csf-plugin`. When set to `null` it tells docs not to run the `csf-plugin` at all, which can be used as an optimization, or if you're already using `csf-plugin` in your `main.js`. The `transcludeMarkdown` option enables mdx files to import `.md` files and render them as a component. diff --git a/code/addons/docs/mdx-compiler-plugin.js b/code/addons/docs/mdx-compiler-plugin.js deleted file mode 100644 index 2651fa35e30a..000000000000 --- a/code/addons/docs/mdx-compiler-plugin.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('@storybook/mdx1-csf').createCompiler; diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json index 71724e1e3fb2..0bdef57c666c 100644 --- a/code/addons/docs/package.json +++ b/code/addons/docs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-docs", - "version": "7.0.0-alpha.45", + "version": "7.0.0-alpha.47", "description": "Document component usage and properties in Markdown", "keywords": [ "addon", @@ -52,22 +52,22 @@ "@babel/plugin-transform-react-jsx": "^7.12.12", "@jest/transform": "^26.6.2", "@mdx-js/react": "^2.1.5", - "@storybook/addons": "7.0.0-alpha.45", - "@storybook/api": "7.0.0-alpha.45", - "@storybook/blocks": "7.0.0-alpha.45", - "@storybook/components": "7.0.0-alpha.45", - "@storybook/core-common": "7.0.0-alpha.45", - "@storybook/core-events": "7.0.0-alpha.45", - "@storybook/csf-tools": "7.0.0-alpha.45", - "@storybook/docs-tools": "7.0.0-alpha.45", - "@storybook/mdx2-csf": "0.1.0-next.0", - "@storybook/node-logger": "7.0.0-alpha.45", - "@storybook/postinstall": "7.0.0-alpha.45", - "@storybook/preview-web": "7.0.0-alpha.45", - "@storybook/source-loader": "7.0.0-alpha.45", - "@storybook/store": "7.0.0-alpha.45", - "@storybook/theming": "7.0.0-alpha.45", - "@storybook/types": "7.0.0-alpha.45", + "@storybook/addons": "7.0.0-alpha.47", + "@storybook/api": "7.0.0-alpha.47", + "@storybook/blocks": "7.0.0-alpha.47", + "@storybook/components": "7.0.0-alpha.47", + "@storybook/core-common": "7.0.0-alpha.47", + "@storybook/core-events": "7.0.0-alpha.47", + "@storybook/csf-plugin": "7.0.0-alpha.47", + "@storybook/csf-tools": "7.0.0-alpha.47", + "@storybook/docs-tools": "7.0.0-alpha.47", + "@storybook/mdx2-csf": "next", + "@storybook/node-logger": "7.0.0-alpha.47", + "@storybook/postinstall": "7.0.0-alpha.47", + "@storybook/preview-web": "7.0.0-alpha.47", + "@storybook/store": "7.0.0-alpha.47", + "@storybook/theming": "7.0.0-alpha.47", + "@storybook/types": "7.0.0-alpha.47", "dequal": "^2.0.2", "fs-extra": "^9.0.1", "global": "^4.4.0", @@ -94,7 +94,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532", + "gitHead": "1c706a4a778831e012343c905f86225fa71491a7", "storybook": { "displayName": "Docs", "icon": "https://user-images.githubusercontent.com/263385/101991672-48355c80-3c7c-11eb-82d9-95fa12438f64.png", diff --git a/code/addons/docs/src/preset.ts b/code/addons/docs/src/preset.ts index c8a5902e7ee5..df1238ad717f 100644 --- a/code/addons/docs/src/preset.ts +++ b/code/addons/docs/src/preset.ts @@ -1,6 +1,7 @@ import fs from 'fs-extra'; import remarkSlug from 'remark-slug'; import remarkExternalLinks from 'remark-external-links'; +import { dedent } from 'ts-dedent'; import type { CoreCommon_IndexerOptions, @@ -8,7 +9,7 @@ import type { DocsOptions, Options, } from '@storybook/types'; -import { logger } from '@storybook/node-logger'; +import type { CsfPluginOptions } from '@storybook/csf-plugin'; import { loadCsf } from '@storybook/csf-tools'; // for frameworks that are not working with react, we need to configure @@ -48,7 +49,12 @@ function createBabelOptions({ babelOptions, mdxBabelOptions, configureJSX }: Bab export async function webpack( webpackConfig: any = {}, options: Options & - BabelParams & { sourceLoaderOptions: any; transcludeMarkdown: boolean } /* & Parameters< + BabelParams & { + /** @deprecated */ + sourceLoaderOptions: any; + csfPluginOptions: CsfPluginOptions | null; + transcludeMarkdown: boolean; + } /* & Parameters< typeof createCompiler >[0] */ ) { @@ -62,7 +68,8 @@ export async function webpack( babelOptions, mdxBabelOptions, configureJSX = true, - sourceLoaderOptions = { injectStoryParameters: true }, + csfPluginOptions = {}, + sourceLoaderOptions = null, transcludeMarkdown = false, } = options; @@ -72,21 +79,17 @@ export async function webpack( remarkPlugins: [remarkSlug, remarkExternalLinks], }; - logger.info(`Addon-docs: using MDX2`); + if (sourceLoaderOptions) { + throw new Error(dedent` + Addon-docs no longer uses source-loader in 7.0. - const mdxLoader = require.resolve('@storybook/mdx2-csf/loader'); + To update your configuration, please see migration instructions here: - // set `sourceLoaderOptions` to `null` to disable for manual configuration - const sourceLoader = sourceLoaderOptions - ? [ - { - test: /\.(stories|story)\.[tj]sx?$/, - loader: require.resolve('@storybook/source-loader'), - options: { ...sourceLoaderOptions, inspectLocalDependencies: true }, - enforce: 'pre', - }, - ] - : []; + https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#dropped-source-loader--storiesof-static-snippets + `); + } + + const mdxLoader = require.resolve('@storybook/mdx2-csf/loader'); let rules = module.rules || []; if (transcludeMarkdown) { @@ -110,6 +113,12 @@ export async function webpack( const result = { ...webpackConfig, + plugins: [ + ...(webpackConfig.plugins || []), + // eslint-disable-next-line global-require + ...(csfPluginOptions ? [require('@storybook/csf-plugin').webpack(csfPluginOptions)] : []), + ], + module: { ...module, rules: [ @@ -144,7 +153,6 @@ export async function webpack( }, ], }, - ...sourceLoader, ], }, }; diff --git a/code/addons/docs/template/stories/docspage/basic.stories.ts b/code/addons/docs/template/stories/docspage/basic.stories.ts index 46d78074ecf8..58a24a2eb472 100644 --- a/code/addons/docs/template/stories/docspage/basic.stories.ts +++ b/code/addons/docs/template/stories/docspage/basic.stories.ts @@ -7,15 +7,24 @@ export default { parameters: { chromatic: { disable: true } }, }; +/** + * A basic button + */ export const Basic = { args: { label: 'Basic' }, }; +/** + * Won't show up in DocsPage + */ export const Disabled = { args: { label: 'Disabled in DocsPage' }, parameters: { docs: { disable: true } }, }; +/** + * Another button, just to show multiple stories + */ export const Another = { args: { label: 'Another' }, }; diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json index 41213088b294..114f34133fe0 100644 --- a/code/addons/essentials/package.json +++ b/code/addons/essentials/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-essentials", - "version": "7.0.0-alpha.45", + "version": "7.0.0-alpha.47", "description": "Curated addons to bring out the best of Storybook", "keywords": [ "addon", @@ -41,24 +41,24 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/addon-actions": "7.0.0-alpha.45", - "@storybook/addon-backgrounds": "7.0.0-alpha.45", - "@storybook/addon-controls": "7.0.0-alpha.45", - "@storybook/addon-docs": "7.0.0-alpha.45", - "@storybook/addon-highlight": "7.0.0-alpha.45", - "@storybook/addon-measure": "7.0.0-alpha.45", - "@storybook/addon-outline": "7.0.0-alpha.45", - "@storybook/addon-toolbars": "7.0.0-alpha.45", - "@storybook/addon-viewport": "7.0.0-alpha.45", - "@storybook/addons": "7.0.0-alpha.45", - "@storybook/api": "7.0.0-alpha.45", - "@storybook/core-common": "7.0.0-alpha.45", - "@storybook/node-logger": "7.0.0-alpha.45", + "@storybook/addon-actions": "7.0.0-alpha.47", + "@storybook/addon-backgrounds": "7.0.0-alpha.47", + "@storybook/addon-controls": "7.0.0-alpha.47", + "@storybook/addon-docs": "7.0.0-alpha.47", + "@storybook/addon-highlight": "7.0.0-alpha.47", + "@storybook/addon-measure": "7.0.0-alpha.47", + "@storybook/addon-outline": "7.0.0-alpha.47", + "@storybook/addon-toolbars": "7.0.0-alpha.47", + "@storybook/addon-viewport": "7.0.0-alpha.47", + "@storybook/addons": "7.0.0-alpha.47", + "@storybook/api": "7.0.0-alpha.47", + "@storybook/core-common": "7.0.0-alpha.47", + "@storybook/node-logger": "7.0.0-alpha.47", "ts-dedent": "^2.0.0" }, "devDependencies": { "@babel/core": "^7.12.10", - "@storybook/vue": "7.0.0-alpha.45", + "@storybook/vue": "7.0.0-alpha.47", "@types/jest": "^26.0.16", "typescript": "~4.6.3" }, @@ -112,5 +112,5 @@ ], "platform": "node" }, - "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532" + "gitHead": "1c706a4a778831e012343c905f86225fa71491a7" } diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json index 6a0ffa0b8edf..4d11f001001b 100644 --- a/code/addons/highlight/package.json +++ b/code/addons/highlight/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-highlight", - "version": "7.0.0-alpha.45", + "version": "7.0.0-alpha.47", "description": "Highlight DOM nodes within your stories", "keywords": [ "storybook-addons", @@ -50,8 +50,8 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/addons": "7.0.0-alpha.45", - "@storybook/core-events": "7.0.0-alpha.45", + "@storybook/addons": "7.0.0-alpha.47", + "@storybook/core-events": "7.0.0-alpha.47", "global": "^4.4.0" }, "devDependencies": { @@ -67,7 +67,7 @@ "./src/highlight.ts" ] }, - "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532", + "gitHead": "1c706a4a778831e012343c905f86225fa71491a7", "sbmodern": "dist/modern/index.js", "storybook": { "displayName": "Highlight", diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json index 801d38c11630..aaf19034814c 100644 --- a/code/addons/interactions/package.json +++ b/code/addons/interactions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-interactions", - "version": "7.0.0-alpha.45", + "version": "7.0.0-alpha.47", "description": "Automate, test and debug user interactions", "keywords": [ "storybook-addons", @@ -59,15 +59,15 @@ }, "dependencies": { "@devtools-ds/object-inspector": "^1.1.2", - "@storybook/addons": "7.0.0-alpha.45", - "@storybook/api": "7.0.0-alpha.45", - "@storybook/client-logger": "7.0.0-alpha.45", - "@storybook/components": "7.0.0-alpha.45", - "@storybook/core-common": "7.0.0-alpha.45", - "@storybook/core-events": "7.0.0-alpha.45", - "@storybook/instrumenter": "7.0.0-alpha.45", - "@storybook/theming": "7.0.0-alpha.45", - "@storybook/types": "7.0.0-alpha.45", + "@storybook/addons": "7.0.0-alpha.47", + "@storybook/api": "7.0.0-alpha.47", + "@storybook/client-logger": "7.0.0-alpha.47", + "@storybook/components": "7.0.0-alpha.47", + "@storybook/core-common": "7.0.0-alpha.47", + "@storybook/core-events": "7.0.0-alpha.47", + "@storybook/instrumenter": "7.0.0-alpha.47", + "@storybook/theming": "7.0.0-alpha.47", + "@storybook/types": "7.0.0-alpha.47", "global": "^4.4.0", "jest-mock": "^27.0.6", "polished": "^4.2.2", @@ -104,7 +104,7 @@ ], "platform": "node" }, - "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532", + "gitHead": "1c706a4a778831e012343c905f86225fa71491a7", "storybook": { "displayName": "Interactions", "unsupportedFrameworks": [ diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json index 8b6971629412..bb6a5b226ee9 100644 --- a/code/addons/jest/package.json +++ b/code/addons/jest/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-jest", - "version": "7.0.0-alpha.45", + "version": "7.0.0-alpha.47", "description": "React storybook addon that show component jest report", "keywords": [ "addon", @@ -59,12 +59,12 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/addons": "7.0.0-alpha.45", - "@storybook/api": "7.0.0-alpha.45", - "@storybook/client-logger": "7.0.0-alpha.45", - "@storybook/components": "7.0.0-alpha.45", - "@storybook/core-events": "7.0.0-alpha.45", - "@storybook/theming": "7.0.0-alpha.45", + "@storybook/addons": "7.0.0-alpha.47", + "@storybook/api": "7.0.0-alpha.47", + "@storybook/client-logger": "7.0.0-alpha.47", + "@storybook/components": "7.0.0-alpha.47", + "@storybook/core-events": "7.0.0-alpha.47", + "@storybook/theming": "7.0.0-alpha.47", "global": "^4.4.0", "react-sizeme": "^3.0.1", "upath": "^1.2.0" @@ -94,7 +94,7 @@ ], "platform": "browser" }, - "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532", + "gitHead": "1c706a4a778831e012343c905f86225fa71491a7", "storybook": { "displayName": "Jest", "icon": "https://pbs.twimg.com/profile_images/821713465245102080/mMtKIMax_400x400.jpg", diff --git a/code/addons/links/package.json b/code/addons/links/package.json index b341aa929ef1..45d083b1e684 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-links", - "version": "7.0.0-alpha.45", + "version": "7.0.0-alpha.47", "description": "Link stories together to build demos and prototypes with your UI components", "keywords": [ "addon", @@ -63,12 +63,12 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/addons": "7.0.0-alpha.45", - "@storybook/client-logger": "7.0.0-alpha.45", - "@storybook/core-events": "7.0.0-alpha.45", + "@storybook/addons": "7.0.0-alpha.47", + "@storybook/client-logger": "7.0.0-alpha.47", + "@storybook/core-events": "7.0.0-alpha.47", "@storybook/csf": "next", - "@storybook/router": "7.0.0-alpha.45", - "@storybook/types": "7.0.0-alpha.45", + "@storybook/router": "7.0.0-alpha.47", + "@storybook/types": "7.0.0-alpha.47", "global": "^4.4.0", "prop-types": "^15.7.2", "ts-dedent": "^2.0.0" @@ -99,7 +99,7 @@ "./src/react/index.ts" ] }, - "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532", + "gitHead": "1c706a4a778831e012343c905f86225fa71491a7", "storybook": { "displayName": "Links", "icon": "https://user-images.githubusercontent.com/263385/101991673-48355c80-3c7c-11eb-9b6e-b627c96a75f6.png", diff --git a/code/addons/links/react.d.ts b/code/addons/links/react.d.ts index b1ad3cf99acb..bdca492fe003 100644 --- a/code/addons/links/react.d.ts +++ b/code/addons/links/react.d.ts @@ -1,2 +1,2 @@ -export * from './dist/types/react'; -export { default } from './dist/types/react'; +export * from './dist/react'; +export { default } from './dist/react'; diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json index 68e1f0556785..8b2d88c0bb02 100644 --- a/code/addons/measure/package.json +++ b/code/addons/measure/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-measure", - "version": "7.0.0-alpha.45", + "version": "7.0.0-alpha.47", "description": "Inspect layouts by visualizing the box model", "keywords": [ "storybook-addons", @@ -61,12 +61,12 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/addons": "7.0.0-alpha.45", - "@storybook/api": "7.0.0-alpha.45", - "@storybook/client-logger": "7.0.0-alpha.45", - "@storybook/components": "7.0.0-alpha.45", - "@storybook/core-events": "7.0.0-alpha.45", - "@storybook/types": "7.0.0-alpha.45", + "@storybook/addons": "7.0.0-alpha.47", + "@storybook/api": "7.0.0-alpha.47", + "@storybook/client-logger": "7.0.0-alpha.47", + "@storybook/components": "7.0.0-alpha.47", + "@storybook/core-events": "7.0.0-alpha.47", + "@storybook/types": "7.0.0-alpha.47", "global": "^4.4.0" }, "devDependencies": { @@ -94,7 +94,7 @@ "./src/preview.tsx" ] }, - "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532", + "gitHead": "1c706a4a778831e012343c905f86225fa71491a7", "storybook": { "displayName": "Measure", "unsupportedFrameworks": [ diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json index 1e61135dfb8c..ca64da59d950 100644 --- a/code/addons/outline/package.json +++ b/code/addons/outline/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-outline", - "version": "7.0.0-alpha.45", + "version": "7.0.0-alpha.47", "description": "Outline all elements with CSS to help with layout placement and alignment", "keywords": [ "storybook-addons", @@ -64,12 +64,12 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/addons": "7.0.0-alpha.45", - "@storybook/api": "7.0.0-alpha.45", - "@storybook/client-logger": "7.0.0-alpha.45", - "@storybook/components": "7.0.0-alpha.45", - "@storybook/core-events": "7.0.0-alpha.45", - "@storybook/types": "7.0.0-alpha.45", + "@storybook/addons": "7.0.0-alpha.47", + "@storybook/api": "7.0.0-alpha.47", + "@storybook/client-logger": "7.0.0-alpha.47", + "@storybook/components": "7.0.0-alpha.47", + "@storybook/core-events": "7.0.0-alpha.47", + "@storybook/types": "7.0.0-alpha.47", "global": "^4.4.0", "ts-dedent": "^2.0.0" }, @@ -98,7 +98,7 @@ "./src/preset/preview.tsx" ] }, - "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532", + "gitHead": "1c706a4a778831e012343c905f86225fa71491a7", "storybook": { "displayName": "Outline", "unsupportedFrameworks": [ diff --git a/code/addons/storyshots/storyshots-core/package.json b/code/addons/storyshots/storyshots-core/package.json index cb50a9242db1..5d47cb1d359c 100644 --- a/code/addons/storyshots/storyshots-core/package.json +++ b/code/addons/storyshots/storyshots-core/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storyshots", - "version": "7.0.0-alpha.45", + "version": "7.0.0-alpha.47", "description": "Take a code snapshot of every story automatically with Jest", "keywords": [ "addon", @@ -38,13 +38,13 @@ }, "dependencies": { "@jest/transform": "^26.6.2", - "@storybook/addons": "7.0.0-alpha.45", + "@storybook/addons": "7.0.0-alpha.47", "@storybook/babel-plugin-require-context-hook": "1.0.1", - "@storybook/client-api": "7.0.0-alpha.45", - "@storybook/core-client": "7.0.0-alpha.45", - "@storybook/core-common": "7.0.0-alpha.45", - "@storybook/core-webpack": "7.0.0-alpha.45", - "@storybook/types": "7.0.0-alpha.45", + "@storybook/client-api": "7.0.0-alpha.47", + "@storybook/core-client": "7.0.0-alpha.47", + "@storybook/core-common": "7.0.0-alpha.47", + "@storybook/core-webpack": "7.0.0-alpha.47", + "@storybook/types": "7.0.0-alpha.47", "@types/glob": "^7.1.3", "@types/jest": "^26.0.16", "@types/jest-specific-snapshot": "^0.5.3", @@ -62,11 +62,11 @@ "@angular/core": "^13.3.6", "@angular/platform-browser-dynamic": "^13.3.6", "@emotion/jest": "^11.8.0", - "@storybook/addon-docs": "7.0.0-alpha.45", - "@storybook/angular": "7.0.0-alpha.45", - "@storybook/react": "7.0.0-alpha.45", - "@storybook/vue": "7.0.0-alpha.45", - "@storybook/vue3": "7.0.0-alpha.45", + "@storybook/addon-docs": "7.0.0-alpha.47", + "@storybook/angular": "7.0.0-alpha.47", + "@storybook/react": "7.0.0-alpha.47", + "@storybook/vue": "7.0.0-alpha.47", + "@storybook/vue3": "7.0.0-alpha.47", "babel-loader": "^8.2.5", "enzyme": "^3.11.0", "enzyme-to-json": "^3.6.1", @@ -144,7 +144,7 @@ "publishConfig": { "access": "public" }, - "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532", + "gitHead": "1c706a4a778831e012343c905f86225fa71491a7", "storybook": { "displayName": "Storyshots", "icon": "https://user-images.githubusercontent.com/263385/101991676-48cdf300-3c7c-11eb-8aa1-944dab6ab29b.png", diff --git a/code/addons/storyshots/storyshots-core/src/typings.d.ts b/code/addons/storyshots/storyshots-core/src/typings.d.ts index 3d210a27e7f1..03f1a3f1a323 100644 --- a/code/addons/storyshots/storyshots-core/src/typings.d.ts +++ b/code/addons/storyshots/storyshots-core/src/typings.d.ts @@ -4,5 +4,4 @@ declare module 'preact-render-to-string/jsx'; declare module 'react-test-renderer*'; declare module 'rax-test-renderer*'; - declare module '@storybook/babel-plugin-require-context-hook/register'; diff --git a/code/addons/storyshots/storyshots-puppeteer/package.json b/code/addons/storyshots/storyshots-puppeteer/package.json index 71cf87371793..a5099e2bdc25 100644 --- a/code/addons/storyshots/storyshots-puppeteer/package.json +++ b/code/addons/storyshots/storyshots-puppeteer/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storyshots-puppeteer", - "version": "7.0.0-alpha.45", + "version": "7.0.0-alpha.47", "description": "Image snapshots addition to StoryShots based on puppeteer", "keywords": [ "addon", @@ -35,8 +35,8 @@ "dependencies": { "@axe-core/puppeteer": "^4.2.0", "@storybook/csf": "next", - "@storybook/node-logger": "7.0.0-alpha.45", - "@storybook/types": "7.0.0-alpha.45", + "@storybook/node-logger": "7.0.0-alpha.47", + "@storybook/types": "7.0.0-alpha.47", "@types/jest-image-snapshot": "^4.1.3", "jest-image-snapshot": "^4.3.0" }, @@ -45,7 +45,7 @@ "puppeteer": "^2.0.0 || ^3.0.0" }, "peerDependencies": { - "@storybook/addon-storyshots": "7.0.0-alpha.45", + "@storybook/addon-storyshots": "7.0.0-alpha.47", "puppeteer": ">=2.0.0" }, "peerDependenciesMeta": { @@ -56,5 +56,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532" + "gitHead": "1c706a4a778831e012343c905f86225fa71491a7" } diff --git a/code/addons/storysource/package.json b/code/addons/storysource/package.json index eb4b0743b4aa..b99a34b22e47 100644 --- a/code/addons/storysource/package.json +++ b/code/addons/storysource/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storysource", - "version": "7.0.0-alpha.45", + "version": "7.0.0-alpha.47", "description": "View a story’s source code to see how it works and paste into your app", "keywords": [ "addon", @@ -53,13 +53,13 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/addons": "7.0.0-alpha.45", - "@storybook/api": "7.0.0-alpha.45", - "@storybook/client-logger": "7.0.0-alpha.45", - "@storybook/components": "7.0.0-alpha.45", - "@storybook/router": "7.0.0-alpha.45", - "@storybook/source-loader": "7.0.0-alpha.45", - "@storybook/theming": "7.0.0-alpha.45", + "@storybook/addons": "7.0.0-alpha.47", + "@storybook/api": "7.0.0-alpha.47", + "@storybook/client-logger": "7.0.0-alpha.47", + "@storybook/components": "7.0.0-alpha.47", + "@storybook/router": "7.0.0-alpha.47", + "@storybook/source-loader": "7.0.0-alpha.47", + "@storybook/theming": "7.0.0-alpha.47", "estraverse": "^5.2.0", "prop-types": "^15.7.2", "react-syntax-highlighter": "^15.5.0" @@ -91,7 +91,7 @@ "./src/preset.ts" ] }, - "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532", + "gitHead": "1c706a4a778831e012343c905f86225fa71491a7", "storybook": { "displayName": "Storysource", "icon": "https://user-images.githubusercontent.com/263385/101991675-48cdf300-3c7c-11eb-9400-58de5ac6daa7.png", diff --git a/code/addons/toolbars/package.json b/code/addons/toolbars/package.json index 0c2230434268..e2f62ba9de7b 100644 --- a/code/addons/toolbars/package.json +++ b/code/addons/toolbars/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-toolbars", - "version": "7.0.0-alpha.45", + "version": "7.0.0-alpha.47", "description": "Create your own toolbar items that control story rendering", "keywords": [ "addon", @@ -57,11 +57,11 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/addons": "7.0.0-alpha.45", - "@storybook/api": "7.0.0-alpha.45", - "@storybook/client-logger": "7.0.0-alpha.45", - "@storybook/components": "7.0.0-alpha.45", - "@storybook/theming": "7.0.0-alpha.45" + "@storybook/addons": "7.0.0-alpha.47", + "@storybook/api": "7.0.0-alpha.47", + "@storybook/client-logger": "7.0.0-alpha.47", + "@storybook/components": "7.0.0-alpha.47", + "@storybook/theming": "7.0.0-alpha.47" }, "devDependencies": { "typescript": "~4.6.3" @@ -88,7 +88,7 @@ ], "platform": "browser" }, - "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532", + "gitHead": "1c706a4a778831e012343c905f86225fa71491a7", "storybook": { "displayName": "Toolbars", "icon": "https://user-images.githubusercontent.com/263385/101991677-48cdf300-3c7c-11eb-93b4-19b0e3366959.png", diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json index c178e29a6252..4a7bd33a2b61 100644 --- a/code/addons/viewport/package.json +++ b/code/addons/viewport/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-viewport", - "version": "7.0.0-alpha.45", + "version": "7.0.0-alpha.47", "description": "Build responsive components by adjusting Storybook’s viewport size and orientation", "keywords": [ "addon", @@ -59,12 +59,12 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/addons": "7.0.0-alpha.45", - "@storybook/api": "7.0.0-alpha.45", - "@storybook/client-logger": "7.0.0-alpha.45", - "@storybook/components": "7.0.0-alpha.45", - "@storybook/core-events": "7.0.0-alpha.45", - "@storybook/theming": "7.0.0-alpha.45", + "@storybook/addons": "7.0.0-alpha.47", + "@storybook/api": "7.0.0-alpha.47", + "@storybook/client-logger": "7.0.0-alpha.47", + "@storybook/components": "7.0.0-alpha.47", + "@storybook/core-events": "7.0.0-alpha.47", + "@storybook/theming": "7.0.0-alpha.47", "global": "^4.4.0", "memoizerific": "^1.11.3", "prop-types": "^15.7.2" @@ -95,7 +95,7 @@ "./src/preview.ts" ] }, - "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532", + "gitHead": "1c706a4a778831e012343c905f86225fa71491a7", "storybook": { "displayName": "Viewport", "icon": "https://user-images.githubusercontent.com/263385/101991678-48cdf300-3c7c-11eb-9764-f8af293c1b28.png", diff --git a/code/e2e-tests/preview-web.spec.ts b/code/e2e-tests/preview-web.spec.ts new file mode 100644 index 000000000000..3dec28a68910 --- /dev/null +++ b/code/e2e-tests/preview-web.spec.ts @@ -0,0 +1,32 @@ +import { test, expect } from '@playwright/test'; +import process from 'process'; +import { SbPage } from './util'; + +const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001'; + +test.describe('preview-web', () => { + test.beforeEach(async ({ page }) => { + await page.goto(storybookUrl); + await new SbPage(page).waitUntilLoaded(); + }); + + test('should pass over shortcuts, but not from play functions, story', async ({ page }) => { + const sbPage = new SbPage(page); + await sbPage.navigateToStory('lib/store/shortcuts', 'keydown-during-play'); + + await expect(sbPage.page.locator('.sidebar-container')).toBeVisible(); + + await sbPage.previewRoot().locator('button').press('s'); + await expect(sbPage.page.locator('.sidebar-container')).not.toBeVisible(); + }); + + test('should pass over shortcuts, but not from play functions, docs', async ({ page }) => { + const sbPage = new SbPage(page); + await sbPage.navigateToStory('lib/store/shortcuts', 'docs'); + + await expect(sbPage.page.locator('.sidebar-container')).toBeVisible(); + + await sbPage.previewRoot().getByRole('button').getByText('Submit').press('s'); + await expect(sbPage.page.locator('.sidebar-container')).not.toBeVisible(); + }); +}); diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json index 591cd5c96194..31974b668643 100644 --- a/code/frameworks/angular/package.json +++ b/code/frameworks/angular/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/angular", - "version": "7.0.0-alpha.45", + "version": "7.0.0-alpha.47", "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.", "keywords": [ "storybook", @@ -20,33 +20,33 @@ "url": "https://opencollective.com/storybook" }, "license": "MIT", - "main": "dist/types/index.js", - "module": "dist/types/index.js", - "types": "dist/types/index.d.ts", + "main": "dist/index.js", + "types": "dist/index.d.ts", "files": [ "dist/**/*", + "template/**/*", "README.md", "*.js", "*.d.ts" ], "scripts": { - "check": "../../../scripts/node_modules/.bin/tsc --noEmit", - "prep": "node ../../../scripts/prepare.js" + "check": "../../../scripts/node_modules/.bin/tsc", + "prep": "rimraf dist && ../../../scripts/node_modules/.bin/tsc --project tsconfig.build.json && echo \"Preventing passing flags to tsc\"" }, "dependencies": { - "@storybook/addons": "7.0.0-alpha.45", - "@storybook/api": "7.0.0-alpha.45", - "@storybook/builder-webpack5": "7.0.0-alpha.45", - "@storybook/client-logger": "7.0.0-alpha.45", - "@storybook/core-client": "7.0.0-alpha.45", - "@storybook/core-common": "7.0.0-alpha.45", - "@storybook/core-events": "7.0.0-alpha.45", - "@storybook/core-server": "7.0.0-alpha.45", - "@storybook/core-webpack": "7.0.0-alpha.45", - "@storybook/docs-tools": "7.0.0-alpha.45", - "@storybook/node-logger": "7.0.0-alpha.45", - "@storybook/store": "7.0.0-alpha.45", - "@storybook/types": "7.0.0-alpha.45", + "@storybook/addons": "7.0.0-alpha.47", + "@storybook/api": "7.0.0-alpha.47", + "@storybook/builder-webpack5": "7.0.0-alpha.47", + "@storybook/client-logger": "7.0.0-alpha.47", + "@storybook/core-client": "7.0.0-alpha.47", + "@storybook/core-common": "7.0.0-alpha.47", + "@storybook/core-events": "7.0.0-alpha.47", + "@storybook/core-server": "7.0.0-alpha.47", + "@storybook/core-webpack": "7.0.0-alpha.47", + "@storybook/docs-tools": "7.0.0-alpha.47", + "@storybook/node-logger": "7.0.0-alpha.47", + "@storybook/store": "7.0.0-alpha.47", + "@storybook/types": "7.0.0-alpha.47", "@types/node": "^16.0.0", "@types/react": "^16.14.23", "@types/react-dom": "^16.9.14", @@ -77,11 +77,13 @@ "@angular/platform-browser": "^13.3.6", "@angular/platform-browser-dynamic": "^13.3.6", "@nrwl/workspace": "14.6.1", + "@types/rimraf": "^3.0.2", "@types/tmp": "^0.2.3", "cross-spawn": "^7.0.3", "jest": "^27.5.1", "jest-preset-angular": "^12.0.0", "jest-specific-snapshot": "^5.0.0", + "rimraf": "^3.0.2", "tmp": "^0.2.1", "typescript": "~4.6.3", "webpack": "5", @@ -119,6 +121,6 @@ "publishConfig": { "access": "public" }, - "builders": "dist/types/builders/builders.json", - "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532" + "builders": "dist/builders/builders.json", + "gitHead": "1c706a4a778831e012343c905f86225fa71491a7" } diff --git a/code/frameworks/angular/preset.js b/code/frameworks/angular/preset.js index 4e043393776c..a83f95279e7f 100644 --- a/code/frameworks/angular/preset.js +++ b/code/frameworks/angular/preset.js @@ -1 +1 @@ -module.exports = require('./dist/types/preset'); +module.exports = require('./dist/preset'); diff --git a/code/frameworks/angular/renderer.d.ts b/code/frameworks/angular/renderer.d.ts index 9b8e24508eb3..1bea89cf1a7e 100644 --- a/code/frameworks/angular/renderer.d.ts +++ b/code/frameworks/angular/renderer.d.ts @@ -1 +1 @@ -export * from './dist/types/renderer.d'; +export * from './dist/renderer.d'; diff --git a/code/frameworks/angular/renderer.js b/code/frameworks/angular/renderer.js index 9b405c226f4e..42130de99ec7 100644 --- a/code/frameworks/angular/renderer.js +++ b/code/frameworks/angular/renderer.js @@ -1 +1 @@ -module.exports = require('./dist/types/renderer'); +module.exports = require('./dist/renderer'); diff --git a/code/frameworks/angular/src/server/framework-preset-angular-docs.ts b/code/frameworks/angular/src/server/framework-preset-angular-docs.ts index f1574ba7263f..c9f0e26b58cd 100644 --- a/code/frameworks/angular/src/server/framework-preset-angular-docs.ts +++ b/code/frameworks/angular/src/server/framework-preset-angular-docs.ts @@ -4,5 +4,5 @@ import { hasDocsOrControls } from '@storybook/docs-tools'; export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entry = [], options) => { if (!hasDocsOrControls(options)) return entry; - return [...entry, path.join(__dirname, '../../../dist/types/client/docs/config')]; + return [...entry, path.join(__dirname, '../../dist/client/docs/config')]; }; diff --git a/code/frameworks/angular/template/cli/.eslintrc.json b/code/frameworks/angular/template/cli/.eslintrc.json new file mode 100644 index 000000000000..57c1b3246cb7 --- /dev/null +++ b/code/frameworks/angular/template/cli/.eslintrc.json @@ -0,0 +1,5 @@ +{ + "rules": { + "@typescript-eslint/consistent-type-imports": ["error", { "disallowTypeAnnotations": false }] + } +} diff --git a/code/frameworks/angular/template/cli/Button.stories.ts b/code/frameworks/angular/template/cli/Button.stories.ts new file mode 100644 index 000000000000..b7154d6c8714 --- /dev/null +++ b/code/frameworks/angular/template/cli/Button.stories.ts @@ -0,0 +1,54 @@ +import type { Meta, StoryObj } from '@storybook/angular'; +import Button from './button.component'; + +// More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction#default-export +const meta: Meta`, + context: args, + }), + // More on argTypes: https://storybook.js.org/docs/ember/api/argtypes + argTypes: { + label: { control: 'text' }, + }, +}; + +// More on component templates: https://storybook.js.org/docs/ember/writing-stories/introduction#using-args +export const Text = { + args: { + label: 'Button', + onClick: action('onClick'), + }, +}; + +export const Emoji = { + args: { + label: '😀 😎 👍 💯', + }, +}; + +export const TextWithAction = { + render: () => ({ + template: hbs` + + `, + context: { + onClick: () => action('This was clicked')(), + }, + }), + name: 'With an action', + parameters: { + notes: 'My notes on a button with emojis', + }, +}; + +export const ButtonWithLinkToAnotherStory = { + render: () => ({ + template: hbs` + + `, + context: { + onClick: linkTo('example-introduction--page'), + }, + }), + name: 'button with link to another story', +}; diff --git a/code/frameworks/html-webpack5/package.json b/code/frameworks/html-webpack5/package.json index bbeb98112ab0..622fb2b4f92b 100644 --- a/code/frameworks/html-webpack5/package.json +++ b/code/frameworks/html-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html-webpack5", - "version": "7.0.0-alpha.45", + "version": "7.0.0-alpha.47", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -50,10 +50,10 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/builder-webpack5": "7.0.0-alpha.45", - "@storybook/core-common": "7.0.0-alpha.45", - "@storybook/html": "7.0.0-alpha.45", - "@storybook/preset-html-webpack": "7.0.0-alpha.45", + "@storybook/builder-webpack5": "7.0.0-alpha.47", + "@storybook/core-common": "7.0.0-alpha.47", + "@storybook/html": "7.0.0-alpha.47", + "@storybook/preset-html-webpack": "7.0.0-alpha.47", "@types/node": "^16.0.0", "global": "^4.4.0", "react": "16.14.0", @@ -78,5 +78,5 @@ ], "platform": "node" }, - "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532" + "gitHead": "1c706a4a778831e012343c905f86225fa71491a7" } diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 4b83dc862fbe..88b421ada87d 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/nextjs", - "version": "7.0.0-alpha.45", + "version": "7.0.0-alpha.47", "description": "Storybook for Next.js", "keywords": [ "storybook", @@ -48,6 +48,7 @@ "types": "dist/index.d.ts", "files": [ "dist/**/*", + "template/**/*", "types/**/*", "README.md", "*.js", @@ -59,12 +60,12 @@ }, "dependencies": { "@babel/preset-typescript": "^7.18.6", - "@storybook/addons": "7.0.0-alpha.45", - "@storybook/builder-webpack5": "7.0.0-alpha.45", - "@storybook/core-common": "7.0.0-alpha.45", - "@storybook/node-logger": "7.0.0-alpha.45", - "@storybook/preset-react-webpack": "7.0.0-alpha.45", - "@storybook/react": "7.0.0-alpha.45", + "@storybook/addons": "7.0.0-alpha.47", + "@storybook/builder-webpack5": "7.0.0-alpha.47", + "@storybook/core-common": "7.0.0-alpha.47", + "@storybook/node-logger": "7.0.0-alpha.47", + "@storybook/preset-react-webpack": "7.0.0-alpha.47", + "@storybook/react": "7.0.0-alpha.47", "@types/node": "^14.14.20 || ^16.0.0", "find-up": "^5.0.0", "fs-extra": "^9.0.1", @@ -80,7 +81,7 @@ "tsconfig-paths-webpack-plugin": "^3.5.2" }, "devDependencies": { - "@storybook/addon-actions": "7.0.0-alpha.45", + "@storybook/addon-actions": "7.0.0-alpha.47", "@types/loader-utils": "^2.0.3", "next": "^12.2.4", "typescript": "~4.6.3", @@ -120,5 +121,5 @@ ], "platform": "node" }, - "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532" + "gitHead": "1c706a4a778831e012343c905f86225fa71491a7" } diff --git a/code/frameworks/nextjs/template/cli/.eslintrc.json b/code/frameworks/nextjs/template/cli/.eslintrc.json new file mode 100644 index 000000000000..2ce44cb74ab3 --- /dev/null +++ b/code/frameworks/nextjs/template/cli/.eslintrc.json @@ -0,0 +1,7 @@ +{ + "rules": { + "import/no-extraneous-dependencies": "off", + "import/extensions": "off", + "react/no-unknown-property": "off" + } +} diff --git a/code/lib/cli/rendererAssets/nextjs/js/Button.jsx b/code/frameworks/nextjs/template/cli/js/Button.jsx similarity index 100% rename from code/lib/cli/rendererAssets/nextjs/js/Button.jsx rename to code/frameworks/nextjs/template/cli/js/Button.jsx diff --git a/code/lib/cli/rendererAssets/nextjs/js/Button.stories.jsx b/code/frameworks/nextjs/template/cli/js/Button.stories.jsx similarity index 86% rename from code/lib/cli/rendererAssets/nextjs/js/Button.stories.jsx rename to code/frameworks/nextjs/template/cli/js/Button.stories.jsx index 61f6e19e14d7..bfabf81396b9 100644 --- a/code/lib/cli/rendererAssets/nextjs/js/Button.stories.jsx +++ b/code/frameworks/nextjs/template/cli/js/Button.stories.jsx @@ -6,6 +6,8 @@ import { Button } from './Button'; export default { title: 'Example/Button', component: Button, + // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/react/writing-docs/docs-page + tags: ['docsPage'], // More on argTypes: https://storybook.js.org/docs/react/api/argtypes argTypes: { backgroundColor: { control: 'color' }, diff --git a/code/lib/cli/rendererAssets/react/js/Header.jsx b/code/frameworks/nextjs/template/cli/js/Header.jsx similarity index 95% rename from code/lib/cli/rendererAssets/react/js/Header.jsx rename to code/frameworks/nextjs/template/cli/js/Header.jsx index 59787aed890e..3862422ed8ec 100644 --- a/code/lib/cli/rendererAssets/react/js/Header.jsx +++ b/code/frameworks/nextjs/template/cli/js/Header.jsx @@ -46,7 +46,9 @@ export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => ( ); Header.propTypes = { - user: PropTypes.shape({}), + user: PropTypes.shape({ + name: PropTypes.string.isRequired, + }), onLogin: PropTypes.func.isRequired, onLogout: PropTypes.func.isRequired, onCreateAccount: PropTypes.func.isRequired, diff --git a/code/lib/cli/rendererAssets/react/js/Header.stories.jsx b/code/frameworks/nextjs/template/cli/js/Header.stories.jsx similarity index 75% rename from code/lib/cli/rendererAssets/react/js/Header.stories.jsx rename to code/frameworks/nextjs/template/cli/js/Header.stories.jsx index e4850002cac5..824597f35ee8 100644 --- a/code/lib/cli/rendererAssets/react/js/Header.stories.jsx +++ b/code/frameworks/nextjs/template/cli/js/Header.stories.jsx @@ -5,6 +5,8 @@ import { Header } from './Header'; export default { title: 'Example/Header', component: Header, + // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/react/writing-docs/docs-page + tags: ['docsPage'], parameters: { // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout layout: 'fullscreen', diff --git a/code/lib/cli/rendererAssets/nextjs/js/Introduction.stories.mdx b/code/frameworks/nextjs/template/cli/js/Introduction.stories.mdx similarity index 100% rename from code/lib/cli/rendererAssets/nextjs/js/Introduction.stories.mdx rename to code/frameworks/nextjs/template/cli/js/Introduction.stories.mdx diff --git a/code/lib/cli/rendererAssets/nextjs/js/Page.jsx b/code/frameworks/nextjs/template/cli/js/Page.jsx similarity index 100% rename from code/lib/cli/rendererAssets/nextjs/js/Page.jsx rename to code/frameworks/nextjs/template/cli/js/Page.jsx diff --git a/code/lib/cli/rendererAssets/nextjs/js/Page.stories.jsx b/code/frameworks/nextjs/template/cli/js/Page.stories.jsx similarity index 100% rename from code/lib/cli/rendererAssets/nextjs/js/Page.stories.jsx rename to code/frameworks/nextjs/template/cli/js/Page.stories.jsx diff --git a/code/frameworks/nextjs/template/cli/ts/Button.stories.ts b/code/frameworks/nextjs/template/cli/ts/Button.stories.ts new file mode 100644 index 000000000000..c220928db6d6 --- /dev/null +++ b/code/frameworks/nextjs/template/cli/ts/Button.stories.ts @@ -0,0 +1,48 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { Button } from './Button'; + +// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export +const meta: Meta = { + title: 'Example/Button', + component: Button, + // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/react/writing-docs/docs-page + tags: ['docsPage'], + // More on argTypes: https://storybook.js.org/docs/react/api/argtypes + argTypes: { + backgroundColor: { + control: 'color', + }, + }, +}; + +export default meta; +type Story = StoryObj; + +// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args +export const Primary: Story = { + args: { + primary: true, + label: 'Button', + }, +}; + +export const Secondary: Story = { + args: { + label: 'Button', + }, +}; + +export const Large: Story = { + args: { + size: 'large', + label: 'Button', + }, +}; + +export const Small: Story = { + args: { + size: 'small', + label: 'Button', + }, +}; diff --git a/code/lib/cli/rendererAssets/nextjs/ts/Button.tsx b/code/frameworks/nextjs/template/cli/ts/Button.tsx similarity index 100% rename from code/lib/cli/rendererAssets/nextjs/ts/Button.tsx rename to code/frameworks/nextjs/template/cli/ts/Button.tsx diff --git a/code/frameworks/nextjs/template/cli/ts/Header.stories.ts b/code/frameworks/nextjs/template/cli/ts/Header.stories.ts new file mode 100644 index 000000000000..728b2043ce14 --- /dev/null +++ b/code/frameworks/nextjs/template/cli/ts/Header.stories.ts @@ -0,0 +1,26 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Header } from './Header'; + +const meta: Meta = { + title: 'Example/Header', + component: Header, + // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/react/writing-docs/docs-page + tags: ['docsPage'], + parameters: { + // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout + layout: 'fullscreen', + }, +}; + +export default meta; +type Story = StoryObj; + +export const LoggedIn: Story = { + args: { + user: { + name: 'Jane Doe', + }, + }, +}; + +export const LoggedOut: Story = {}; diff --git a/code/lib/cli/rendererAssets/nextjs/ts/Header.tsx b/code/frameworks/nextjs/template/cli/ts/Header.tsx similarity index 100% rename from code/lib/cli/rendererAssets/nextjs/ts/Header.tsx rename to code/frameworks/nextjs/template/cli/ts/Header.tsx diff --git a/code/lib/cli/rendererAssets/nextjs/ts/Introduction.stories.mdx b/code/frameworks/nextjs/template/cli/ts/Introduction.stories.mdx similarity index 100% rename from code/lib/cli/rendererAssets/nextjs/ts/Introduction.stories.mdx rename to code/frameworks/nextjs/template/cli/ts/Introduction.stories.mdx diff --git a/code/frameworks/nextjs/template/cli/ts/Page.stories.ts b/code/frameworks/nextjs/template/cli/ts/Page.stories.ts new file mode 100644 index 000000000000..52c4cb406233 --- /dev/null +++ b/code/frameworks/nextjs/template/cli/ts/Page.stories.ts @@ -0,0 +1,29 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { within, userEvent } from '@storybook/testing-library'; + +import { Page } from './Page'; + +const meta: Meta = { + title: 'Example/Page', + component: Page, + parameters: { + // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout + layout: 'fullscreen', + }, +}; + +export default meta; +type Story = StoryObj; + +export const LoggedOut: Story = {}; + +// More on interaction testing: https://storybook.js.org/docs/react/writing-tests/interaction-testing +export const LoggedIn: Story = { + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + const loginButton = await canvas.getByRole('button', { + name: /Log in/i, + }); + await userEvent.click(loginButton); + }, +}; diff --git a/code/lib/cli/rendererAssets/nextjs/ts/Page.tsx b/code/frameworks/nextjs/template/cli/ts/Page.tsx similarity index 100% rename from code/lib/cli/rendererAssets/nextjs/ts/Page.tsx rename to code/frameworks/nextjs/template/cli/ts/Page.tsx diff --git a/code/frameworks/nextjs/tsconfig.json b/code/frameworks/nextjs/tsconfig.json index 76d943e5d483..4461940be450 100644 --- a/code/frameworks/nextjs/tsconfig.json +++ b/code/frameworks/nextjs/tsconfig.json @@ -5,6 +5,6 @@ "resolveJsonModule": true, "skipLibCheck": true }, - "include": ["src/**/*"], + "include": ["src/**/*", "template/**/*"], "exclude": ["src/**/*.test.*", "src/**/__testfixtures__/**"] } diff --git a/code/frameworks/preact-webpack5/package.json b/code/frameworks/preact-webpack5/package.json index bb41d4577de9..414219334b95 100644 --- a/code/frameworks/preact-webpack5/package.json +++ b/code/frameworks/preact-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact-webpack5", - "version": "7.0.0-alpha.45", + "version": "7.0.0-alpha.47", "description": "Storybook for Preact: Develop Preact Component in isolation.", "keywords": [ "storybook" @@ -50,10 +50,10 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/builder-webpack5": "7.0.0-alpha.45", - "@storybook/core-common": "7.0.0-alpha.45", - "@storybook/preact": "7.0.0-alpha.45", - "@storybook/preset-preact-webpack": "7.0.0-alpha.45", + "@storybook/builder-webpack5": "7.0.0-alpha.47", + "@storybook/core-common": "7.0.0-alpha.47", + "@storybook/preact": "7.0.0-alpha.47", + "@storybook/preset-preact-webpack": "7.0.0-alpha.47", "@types/node": "^16.0.0", "react": "16.14.0", "react-dom": "16.14.0" @@ -79,5 +79,5 @@ ], "platform": "node" }, - "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532" + "gitHead": "1c706a4a778831e012343c905f86225fa71491a7" } diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json index 80c38bcd63e7..e275e8074cad 100644 --- a/code/frameworks/react-vite/package.json +++ b/code/frameworks/react-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-vite", - "version": "7.0.0-alpha.45", + "version": "7.0.0-alpha.47", "description": "Storybook for React and Vite: Develop React components in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -53,13 +53,13 @@ "dependencies": { "@joshwooding/vite-plugin-react-docgen-typescript": "^0.0.5", "@rollup/pluginutils": "^4.2.0", - "@storybook/addons": "7.0.0-alpha.45", - "@storybook/builder-vite": "7.0.0-alpha.45", - "@storybook/channel-postmessage": "7.0.0-alpha.45", - "@storybook/channel-websocket": "7.0.0-alpha.45", - "@storybook/client-api": "7.0.0-alpha.45", - "@storybook/preview-web": "7.0.0-alpha.45", - "@storybook/react": "7.0.0-alpha.45", + "@storybook/addons": "7.0.0-alpha.47", + "@storybook/builder-vite": "7.0.0-alpha.47", + "@storybook/channel-postmessage": "7.0.0-alpha.47", + "@storybook/channel-websocket": "7.0.0-alpha.47", + "@storybook/client-api": "7.0.0-alpha.47", + "@storybook/preview-web": "7.0.0-alpha.47", + "@storybook/react": "7.0.0-alpha.47", "@vitejs/plugin-react": "^2.0.0", "ast-types": "^0.14.2", "magic-string": "^0.26.1", @@ -88,5 +88,5 @@ ], "platform": "node" }, - "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532" + "gitHead": "1c706a4a778831e012343c905f86225fa71491a7" } diff --git a/code/frameworks/react-vite/src/typings.d.ts b/code/frameworks/react-vite/src/typings.d.ts index 94a00a8f317c..53aa2b04a775 100644 --- a/code/frameworks/react-vite/src/typings.d.ts +++ b/code/frameworks/react-vite/src/typings.d.ts @@ -2,6 +2,7 @@ // Source: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/fb0f14b7a35cde26ffaa82e7536c062e593e9ae6/types/react-dom/client.d.ts declare module 'react-dom/client' { import React = require('react'); + export interface HydrationOptions { onHydrated?(suspenseInstance: Comment): void; onDeleted?(suspenseInstance: Comment): void; diff --git a/code/frameworks/react-webpack5/package.json b/code/frameworks/react-webpack5/package.json index 8b701d91e4b9..5bfbd566ea61 100644 --- a/code/frameworks/react-webpack5/package.json +++ b/code/frameworks/react-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-webpack5", - "version": "7.0.0-alpha.45", + "version": "7.0.0-alpha.47", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -51,9 +51,9 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/builder-webpack5": "7.0.0-alpha.45", - "@storybook/preset-react-webpack": "7.0.0-alpha.45", - "@storybook/react": "7.0.0-alpha.45", + "@storybook/builder-webpack5": "7.0.0-alpha.47", + "@storybook/preset-react-webpack": "7.0.0-alpha.47", + "@storybook/react": "7.0.0-alpha.47", "@types/node": "^16.0.0" }, "devDependencies": { @@ -86,5 +86,5 @@ ], "platform": "node" }, - "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532" + "gitHead": "1c706a4a778831e012343c905f86225fa71491a7" } diff --git a/code/frameworks/react-webpack5/src/typings.d.ts b/code/frameworks/react-webpack5/src/typings.d.ts index 066cca1fbd09..ce0c26f59d0a 100644 --- a/code/frameworks/react-webpack5/src/typings.d.ts +++ b/code/frameworks/react-webpack5/src/typings.d.ts @@ -4,6 +4,7 @@ declare module 'global'; // Source: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/fb0f14b7a35cde26ffaa82e7536c062e593e9ae6/types/react-dom/client.d.ts declare module 'react-dom/client' { import React = require('react'); + export interface HydrationOptions { onHydrated?(suspenseInstance: Comment): void; onDeleted?(suspenseInstance: Comment): void; diff --git a/code/frameworks/server-webpack5/package.json b/code/frameworks/server-webpack5/package.json index a7b888d65c77..fd973344c319 100644 --- a/code/frameworks/server-webpack5/package.json +++ b/code/frameworks/server-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server-webpack5", - "version": "7.0.0-alpha.45", + "version": "7.0.0-alpha.47", "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -50,10 +50,10 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/builder-webpack5": "7.0.0-alpha.45", - "@storybook/core-common": "7.0.0-alpha.45", - "@storybook/preset-server-webpack": "7.0.0-alpha.45", - "@storybook/server": "7.0.0-alpha.45", + "@storybook/builder-webpack5": "7.0.0-alpha.47", + "@storybook/core-common": "7.0.0-alpha.47", + "@storybook/preset-server-webpack": "7.0.0-alpha.47", + "@storybook/server": "7.0.0-alpha.47", "@types/node": "^16.0.0", "react": "16.14.0", "react-dom": "16.14.0" @@ -74,5 +74,5 @@ ], "platform": "node" }, - "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532" + "gitHead": "1c706a4a778831e012343c905f86225fa71491a7" } diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json index a2304bf00754..b98437e8927b 100644 --- a/code/frameworks/svelte-vite/package.json +++ b/code/frameworks/svelte-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte-vite", - "version": "7.0.0-alpha.45", + "version": "7.0.0-alpha.47", "description": "Storybook for Svelte and Vite: Develop Svelte components in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -52,14 +52,14 @@ }, "dependencies": { "@storybook/addon-svelte-csf": "^2.0.0", - "@storybook/addons": "7.0.0-alpha.45", - "@storybook/builder-vite": "7.0.0-alpha.45", - "@storybook/channel-postmessage": "7.0.0-alpha.45", - "@storybook/channel-websocket": "7.0.0-alpha.45", - "@storybook/client-api": "7.0.0-alpha.45", - "@storybook/node-logger": "7.0.0-alpha.45", - "@storybook/preview-web": "7.0.0-alpha.45", - "@storybook/svelte": "7.0.0-alpha.45", + "@storybook/addons": "7.0.0-alpha.47", + "@storybook/builder-vite": "7.0.0-alpha.47", + "@storybook/channel-postmessage": "7.0.0-alpha.47", + "@storybook/channel-websocket": "7.0.0-alpha.47", + "@storybook/client-api": "7.0.0-alpha.47", + "@storybook/node-logger": "7.0.0-alpha.47", + "@storybook/preview-web": "7.0.0-alpha.47", + "@storybook/svelte": "7.0.0-alpha.47", "@sveltejs/vite-plugin-svelte": "^1.0.0", "magic-string": "^0.26.1", "svelte": "^3.0.0", @@ -92,5 +92,5 @@ ], "platform": "node" }, - "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532" + "gitHead": "1c706a4a778831e012343c905f86225fa71491a7" } diff --git a/code/frameworks/svelte-webpack5/package.json b/code/frameworks/svelte-webpack5/package.json index 81ada6796419..ac3836331ecf 100644 --- a/code/frameworks/svelte-webpack5/package.json +++ b/code/frameworks/svelte-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte-webpack5", - "version": "7.0.0-alpha.45", + "version": "7.0.0-alpha.47", "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -51,10 +51,10 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/builder-webpack5": "7.0.0-alpha.45", - "@storybook/core-common": "7.0.0-alpha.45", - "@storybook/preset-svelte-webpack": "7.0.0-alpha.45", - "@storybook/svelte": "7.0.0-alpha.45", + "@storybook/builder-webpack5": "7.0.0-alpha.47", + "@storybook/core-common": "7.0.0-alpha.47", + "@storybook/preset-svelte-webpack": "7.0.0-alpha.47", + "@storybook/svelte": "7.0.0-alpha.47", "react": "16.14.0", "react-dom": "16.14.0" }, @@ -81,5 +81,5 @@ ], "platform": "node" }, - "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532" + "gitHead": "1c706a4a778831e012343c905f86225fa71491a7" } diff --git a/code/frameworks/vue-vite/package.json b/code/frameworks/vue-vite/package.json index a37fcb7bf823..78a386da4e10 100644 --- a/code/frameworks/vue-vite/package.json +++ b/code/frameworks/vue-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue-vite", - "version": "7.0.0-alpha.45", + "version": "7.0.0-alpha.47", "description": "Storybook for Vue2 and Vite: Develop Vue2 Components in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -50,15 +50,15 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/addons": "7.0.0-alpha.45", - "@storybook/builder-vite": "7.0.0-alpha.45", - "@storybook/channel-postmessage": "7.0.0-alpha.45", - "@storybook/channel-websocket": "7.0.0-alpha.45", - "@storybook/client-api": "7.0.0-alpha.45", - "@storybook/core-common": "7.0.0-alpha.45", - "@storybook/core-server": "7.0.0-alpha.45", - "@storybook/preview-web": "7.0.0-alpha.45", - "@storybook/vue": "7.0.0-alpha.45", + "@storybook/addons": "7.0.0-alpha.47", + "@storybook/builder-vite": "7.0.0-alpha.47", + "@storybook/channel-postmessage": "7.0.0-alpha.47", + "@storybook/channel-websocket": "7.0.0-alpha.47", + "@storybook/client-api": "7.0.0-alpha.47", + "@storybook/core-common": "7.0.0-alpha.47", + "@storybook/core-server": "7.0.0-alpha.47", + "@storybook/preview-web": "7.0.0-alpha.47", + "@storybook/vue": "7.0.0-alpha.47", "magic-string": "^0.26.1", "vite": "^3.1.3", "vue-docgen-api": "^4.40.0" @@ -83,5 +83,5 @@ ], "platform": "node" }, - "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532" + "gitHead": "1c706a4a778831e012343c905f86225fa71491a7" } diff --git a/code/frameworks/vue-webpack5/package.json b/code/frameworks/vue-webpack5/package.json index f8e7bd0d7bd4..4a7122583dcf 100644 --- a/code/frameworks/vue-webpack5/package.json +++ b/code/frameworks/vue-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue-webpack5", - "version": "7.0.0-alpha.45", + "version": "7.0.0-alpha.47", "description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -50,10 +50,10 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/builder-webpack5": "7.0.0-alpha.45", - "@storybook/core-common": "7.0.0-alpha.45", - "@storybook/preset-vue-webpack": "7.0.0-alpha.45", - "@storybook/vue": "7.0.0-alpha.45", + "@storybook/builder-webpack5": "7.0.0-alpha.47", + "@storybook/core-common": "7.0.0-alpha.47", + "@storybook/preset-vue-webpack": "7.0.0-alpha.47", + "@storybook/vue": "7.0.0-alpha.47", "@types/node": "^16.0.0", "react": "16.14.0", "react-dom": "16.14.0" @@ -66,7 +66,7 @@ }, "peerDependencies": { "@babel/core": "*", - "babel-loader": "^7.0.0 || ^8.0.0", + "babel-loader": "^7.0.0 || ^8.0.0 || ^9.0.0", "css-loader": "*", "vue": "^2.6.8", "vue-loader": "^15.7.0", @@ -85,5 +85,5 @@ ], "platform": "node" }, - "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532" + "gitHead": "1c706a4a778831e012343c905f86225fa71491a7" } diff --git a/code/frameworks/vue-webpack5/src/typings.d.ts b/code/frameworks/vue-webpack5/src/typings.d.ts index 4f4eff6c31cd..b3f023454b60 100644 --- a/code/frameworks/vue-webpack5/src/typings.d.ts +++ b/code/frameworks/vue-webpack5/src/typings.d.ts @@ -1,3 +1,3 @@ declare module 'global'; -declare module 'vue-loader/lib/plugin'; \ No newline at end of file +declare module 'vue-loader/lib/plugin'; diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json index 41e0c357ae98..10ee9f308ebb 100644 --- a/code/frameworks/vue3-vite/package.json +++ b/code/frameworks/vue3-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3-vite", - "version": "7.0.0-alpha.45", + "version": "7.0.0-alpha.47", "description": "Storybook for Vue3 and Vite: Develop Vue3 components in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -51,14 +51,14 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/addons": "7.0.0-alpha.45", - "@storybook/builder-vite": "7.0.0-alpha.45", - "@storybook/channel-postmessage": "7.0.0-alpha.45", - "@storybook/channel-websocket": "7.0.0-alpha.45", - "@storybook/client-api": "7.0.0-alpha.45", - "@storybook/core-server": "7.0.0-alpha.45", - "@storybook/preview-web": "7.0.0-alpha.45", - "@storybook/vue3": "7.0.0-alpha.45", + "@storybook/addons": "7.0.0-alpha.47", + "@storybook/builder-vite": "7.0.0-alpha.47", + "@storybook/channel-postmessage": "7.0.0-alpha.47", + "@storybook/channel-websocket": "7.0.0-alpha.47", + "@storybook/client-api": "7.0.0-alpha.47", + "@storybook/core-server": "7.0.0-alpha.47", + "@storybook/preview-web": "7.0.0-alpha.47", + "@storybook/vue3": "7.0.0-alpha.47", "@vitejs/plugin-vue": "^3.0.0", "magic-string": "^0.26.1", "vite": "^3.1.3", @@ -82,5 +82,5 @@ ], "platform": "node" }, - "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532" + "gitHead": "1c706a4a778831e012343c905f86225fa71491a7" } diff --git a/code/frameworks/vue3-webpack5/package.json b/code/frameworks/vue3-webpack5/package.json index 763697ce915c..5ef27f6db276 100644 --- a/code/frameworks/vue3-webpack5/package.json +++ b/code/frameworks/vue3-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3-webpack5", - "version": "7.0.0-alpha.45", + "version": "7.0.0-alpha.47", "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -50,10 +50,10 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/builder-webpack5": "7.0.0-alpha.45", - "@storybook/core-common": "7.0.0-alpha.45", - "@storybook/preset-vue3-webpack": "7.0.0-alpha.45", - "@storybook/vue3": "7.0.0-alpha.45", + "@storybook/builder-webpack5": "7.0.0-alpha.47", + "@storybook/core-common": "7.0.0-alpha.47", + "@storybook/preset-vue3-webpack": "7.0.0-alpha.47", + "@storybook/vue3": "7.0.0-alpha.47", "@types/node": "^16.0.0", "react": "16.14.0", "react-dom": "16.14.0" @@ -82,5 +82,5 @@ ], "platform": "node" }, - "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532" + "gitHead": "1c706a4a778831e012343c905f86225fa71491a7" } diff --git a/code/frameworks/vue3-webpack5/src/typings.d.ts b/code/frameworks/vue3-webpack5/src/typings.d.ts index 4dd567187328..3229acac0222 100644 --- a/code/frameworks/vue3-webpack5/src/typings.d.ts +++ b/code/frameworks/vue3-webpack5/src/typings.d.ts @@ -1,5 +1,5 @@ declare module 'global'; declare module 'vue-loader' { - export const VueLoaderPlugin: any + export const VueLoaderPlugin: any; } diff --git a/code/frameworks/web-components-vite/package.json b/code/frameworks/web-components-vite/package.json index 98a83b552ca8..023d64308e13 100644 --- a/code/frameworks/web-components-vite/package.json +++ b/code/frameworks/web-components-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components-vite", - "version": "7.0.0-alpha.45", + "version": "7.0.0-alpha.47", "description": "Storybook for web-components and Vite: Develop Web Components in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -51,15 +51,15 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/addons": "7.0.0-alpha.45", - "@storybook/builder-vite": "7.0.0-alpha.45", - "@storybook/channel-postmessage": "7.0.0-alpha.45", - "@storybook/channel-websocket": "7.0.0-alpha.45", - "@storybook/client-api": "7.0.0-alpha.45", - "@storybook/core-server": "7.0.0-alpha.45", - "@storybook/node-logger": "7.0.0-alpha.45", - "@storybook/preview-web": "7.0.0-alpha.45", - "@storybook/web-components": "7.0.0-alpha.45", + "@storybook/addons": "7.0.0-alpha.47", + "@storybook/builder-vite": "7.0.0-alpha.47", + "@storybook/channel-postmessage": "7.0.0-alpha.47", + "@storybook/channel-websocket": "7.0.0-alpha.47", + "@storybook/client-api": "7.0.0-alpha.47", + "@storybook/core-server": "7.0.0-alpha.47", + "@storybook/node-logger": "7.0.0-alpha.47", + "@storybook/preview-web": "7.0.0-alpha.47", + "@storybook/web-components": "7.0.0-alpha.47", "magic-string": "^0.26.1", "vite": "3" }, @@ -81,5 +81,5 @@ ], "platform": "node" }, - "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532" + "gitHead": "1c706a4a778831e012343c905f86225fa71491a7" } diff --git a/code/frameworks/web-components-webpack5/package.json b/code/frameworks/web-components-webpack5/package.json index 5738fa7a098c..06a9cdc10434 100644 --- a/code/frameworks/web-components-webpack5/package.json +++ b/code/frameworks/web-components-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components-webpack5", - "version": "7.0.0-alpha.45", + "version": "7.0.0-alpha.47", "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.", "keywords": [ "lit-html", @@ -53,10 +53,10 @@ }, "dependencies": { "@babel/preset-env": "^7.12.11", - "@storybook/builder-webpack5": "7.0.0-alpha.45", - "@storybook/core-common": "7.0.0-alpha.45", - "@storybook/preset-web-components-webpack": "7.0.0-alpha.45", - "@storybook/web-components": "7.0.0-alpha.45", + "@storybook/builder-webpack5": "7.0.0-alpha.47", + "@storybook/core-common": "7.0.0-alpha.47", + "@storybook/preset-web-components-webpack": "7.0.0-alpha.47", + "@storybook/web-components": "7.0.0-alpha.47", "@types/node": "^16.0.0", "react": "16.14.0", "react-dom": "16.14.0" @@ -81,5 +81,5 @@ ], "platform": "node" }, - "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532" + "gitHead": "1c706a4a778831e012343c905f86225fa71491a7" } diff --git a/code/lerna.json b/code/lerna.json index c4739cc76524..bc949744d9fa 100644 --- a/code/lerna.json +++ b/code/lerna.json @@ -2,5 +2,5 @@ "npmClient": "yarn", "useWorkspaces": true, "registry": "https://registry.npmjs.org", - "version": "7.0.0-alpha.45" + "version": "7.0.0-alpha.47" } diff --git a/code/lib/addons/package.json b/code/lib/addons/package.json index d4e6ee2681bf..d3d72fa50c51 100644 --- a/code/lib/addons/package.json +++ b/code/lib/addons/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addons", - "version": "7.0.0-alpha.45", + "version": "7.0.0-alpha.47", "description": "Storybook addons store", "keywords": [ "storybook" @@ -42,13 +42,13 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/api": "7.0.0-alpha.45", - "@storybook/channels": "7.0.0-alpha.45", - "@storybook/client-logger": "7.0.0-alpha.45", - "@storybook/core-events": "7.0.0-alpha.45", - "@storybook/router": "7.0.0-alpha.45", - "@storybook/theming": "7.0.0-alpha.45", - "@storybook/types": "7.0.0-alpha.45", + "@storybook/api": "7.0.0-alpha.47", + "@storybook/channels": "7.0.0-alpha.47", + "@storybook/client-logger": "7.0.0-alpha.47", + "@storybook/core-events": "7.0.0-alpha.47", + "@storybook/router": "7.0.0-alpha.47", + "@storybook/theming": "7.0.0-alpha.47", + "@storybook/types": "7.0.0-alpha.47", "global": "^4.4.0" }, "peerDependencies": { @@ -63,5 +63,5 @@ "./src/index.ts" ] }, - "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532" + "gitHead": "1c706a4a778831e012343c905f86225fa71491a7" } diff --git a/code/lib/api/package.json b/code/lib/api/package.json index 9999864931fb..87f4bfb8dd7c 100644 --- a/code/lib/api/package.json +++ b/code/lib/api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/api", - "version": "7.0.0-alpha.45", + "version": "7.0.0-alpha.47", "description": "Core Storybook API & Context", "keywords": [ "storybook" @@ -45,13 +45,13 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/channels": "7.0.0-alpha.45", - "@storybook/client-logger": "7.0.0-alpha.45", - "@storybook/core-events": "7.0.0-alpha.45", + "@storybook/channels": "7.0.0-alpha.47", + "@storybook/client-logger": "7.0.0-alpha.47", + "@storybook/core-events": "7.0.0-alpha.47", "@storybook/csf": "next", - "@storybook/router": "7.0.0-alpha.45", - "@storybook/theming": "7.0.0-alpha.45", - "@storybook/types": "7.0.0-alpha.45", + "@storybook/router": "7.0.0-alpha.47", + "@storybook/theming": "7.0.0-alpha.47", + "@storybook/types": "7.0.0-alpha.47", "dequal": "^2.0.2", "global": "^4.4.0", "lodash": "^4.17.21", @@ -64,7 +64,7 @@ }, "devDependencies": { "@jest/globals": "^26.6.2", - "@storybook/core-common": "7.0.0-alpha.45", + "@storybook/core-common": "7.0.0-alpha.47", "@types/lodash": "^4.14.167", "@types/qs": "^6", "flush-promises": "^1.0.2", @@ -84,5 +84,5 @@ "./src/shortcut.ts" ] }, - "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532" + "gitHead": "1c706a4a778831e012343c905f86225fa71491a7" } diff --git a/code/lib/api/shortcut.d.ts b/code/lib/api/shortcut.d.ts index f6958ee10dfe..26c2671b9af5 100644 --- a/code/lib/api/shortcut.d.ts +++ b/code/lib/api/shortcut.d.ts @@ -1,6 +1,8 @@ export type KeyCollection = string[]; -export function shortcutToHumanString(shortcut: KeyCollection): string -export function eventToShortcut(e: KeyboardEvent): KeyCollection | null -export function shortcutMatchesShortcut(inputShortcut: KeyCollection, - shortcut: KeyCollection): boolean +export function shortcutToHumanString(shortcut: KeyCollection): string; +export function eventToShortcut(e: KeyboardEvent): KeyCollection | null; +export function shortcutMatchesShortcut( + inputShortcut: KeyCollection, + shortcut: KeyCollection +): boolean; diff --git a/code/lib/api/src/version.ts b/code/lib/api/src/version.ts index d457dafd439c..358b3e069664 100644 --- a/code/lib/api/src/version.ts +++ b/code/lib/api/src/version.ts @@ -1 +1 @@ -export const version = '7.0.0-alpha.45'; +export const version = '7.0.0-alpha.47'; diff --git a/code/lib/builder-manager/package.json b/code/lib/builder-manager/package.json index 6eab5ae3fbb2..819989869481 100644 --- a/code/lib/builder-manager/package.json +++ b/code/lib/builder-manager/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-manager", - "version": "7.0.0-alpha.45", + "version": "7.0.0-alpha.47", "description": "Storybook manager builder", "keywords": [ "storybook" @@ -42,9 +42,9 @@ }, "dependencies": { "@fal-works/esbuild-plugin-global-externals": "^2.1.2", - "@storybook/core-common": "7.0.0-alpha.45", - "@storybook/manager": "7.0.0-alpha.45", - "@storybook/node-logger": "7.0.0-alpha.45", + "@storybook/core-common": "7.0.0-alpha.47", + "@storybook/manager": "7.0.0-alpha.47", + "@storybook/node-logger": "7.0.0-alpha.47", "@types/ejs": "^3.1.1", "@yarnpkg/esbuild-plugin-pnp": "^3.0.0-rc.10", "browser-assert": "^1.2.1", @@ -69,5 +69,5 @@ ], "platform": "node" }, - "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532" + "gitHead": "1c706a4a778831e012343c905f86225fa71491a7" } diff --git a/code/lib/builder-vite/package.json b/code/lib/builder-vite/package.json index ee92ab282148..3b3b0129e05e 100644 --- a/code/lib/builder-vite/package.json +++ b/code/lib/builder-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-vite", - "version": "7.0.0-alpha.45", + "version": "7.0.0-alpha.47", "description": "A plugin to run and build Storybooks with Vite", "homepage": "https://github.com/storybookjs/storybook/tree/main/code/lib/builder-vite/#readme", "repository": { @@ -19,14 +19,14 @@ }, "dependencies": { "@joshwooding/vite-plugin-react-docgen-typescript": "0.0.5", - "@storybook/client-api": "7.0.0-alpha.45", - "@storybook/client-logger": "7.0.0-alpha.45", - "@storybook/core-common": "7.0.0-alpha.45", - "@storybook/mdx2-csf": "0.1.0-next.0", - "@storybook/node-logger": "7.0.0-alpha.45", - "@storybook/preview-web": "7.0.0-alpha.45", - "@storybook/source-loader": "7.0.0-alpha.45", - "@storybook/types": "7.0.0-alpha.45", + "@storybook/client-api": "7.0.0-alpha.47", + "@storybook/client-logger": "7.0.0-alpha.47", + "@storybook/core-common": "7.0.0-alpha.47", + "@storybook/mdx2-csf": "next", + "@storybook/node-logger": "7.0.0-alpha.47", + "@storybook/preview-web": "7.0.0-alpha.47", + "@storybook/source-loader": "7.0.0-alpha.47", + "@storybook/types": "7.0.0-alpha.47", "@vitejs/plugin-react": "^2.0.0", "browser-assert": "^1.2.1", "es-module-lexer": "^0.9.3", @@ -45,5 +45,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532" + "gitHead": "1c706a4a778831e012343c905f86225fa71491a7" } diff --git a/code/lib/builder-vite/src/vite-config.ts b/code/lib/builder-vite/src/vite-config.ts index 22e8ed28c742..fd0b872ac914 100644 --- a/code/lib/builder-vite/src/vite-config.ts +++ b/code/lib/builder-vite/src/vite-config.ts @@ -46,6 +46,8 @@ export async function commonConfig( configFile: false, cacheDir: 'node_modules/.cache/.vite-storybook', root: path.resolve(options.configDir, '..'), + // Allow storybook deployed as subfolder. See https://github.com/storybookjs/builder-vite/issues/238 + base: './', plugins: await pluginConfig(options), resolve: { preserveSymlinks: isPreservingSymlinks(), diff --git a/code/lib/builder-webpack5/package.json b/code/lib/builder-webpack5/package.json index 6decc9df96b3..269253ceac03 100644 --- a/code/lib/builder-webpack5/package.json +++ b/code/lib/builder-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-webpack5", - "version": "7.0.0-alpha.45", + "version": "7.0.0-alpha.47", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" @@ -53,22 +53,22 @@ }, "dependencies": { "@babel/core": "^7.12.10", - "@storybook/addons": "7.0.0-alpha.45", - "@storybook/api": "7.0.0-alpha.45", - "@storybook/channel-postmessage": "7.0.0-alpha.45", - "@storybook/channel-websocket": "7.0.0-alpha.45", - "@storybook/channels": "7.0.0-alpha.45", - "@storybook/client-api": "7.0.0-alpha.45", - "@storybook/client-logger": "7.0.0-alpha.45", - "@storybook/components": "7.0.0-alpha.45", - "@storybook/core-common": "7.0.0-alpha.45", - "@storybook/core-events": "7.0.0-alpha.45", - "@storybook/core-webpack": "7.0.0-alpha.45", - "@storybook/node-logger": "7.0.0-alpha.45", - "@storybook/preview-web": "7.0.0-alpha.45", - "@storybook/router": "7.0.0-alpha.45", - "@storybook/store": "7.0.0-alpha.45", - "@storybook/theming": "7.0.0-alpha.45", + "@storybook/addons": "7.0.0-alpha.47", + "@storybook/api": "7.0.0-alpha.47", + "@storybook/channel-postmessage": "7.0.0-alpha.47", + "@storybook/channel-websocket": "7.0.0-alpha.47", + "@storybook/channels": "7.0.0-alpha.47", + "@storybook/client-api": "7.0.0-alpha.47", + "@storybook/client-logger": "7.0.0-alpha.47", + "@storybook/components": "7.0.0-alpha.47", + "@storybook/core-common": "7.0.0-alpha.47", + "@storybook/core-events": "7.0.0-alpha.47", + "@storybook/core-webpack": "7.0.0-alpha.47", + "@storybook/node-logger": "7.0.0-alpha.47", + "@storybook/preview-web": "7.0.0-alpha.47", + "@storybook/router": "7.0.0-alpha.47", + "@storybook/store": "7.0.0-alpha.47", + "@storybook/theming": "7.0.0-alpha.47", "@types/node": "^16.0.0", "@types/semver": "^7.3.4", "babel-loader": "^8.2.5", @@ -120,5 +120,5 @@ ], "platform": "node" }, - "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532" + "gitHead": "1c706a4a778831e012343c905f86225fa71491a7" } diff --git a/code/lib/channel-postmessage/package.json b/code/lib/channel-postmessage/package.json index 05290e6b276b..c1a4cb07e6d5 100644 --- a/code/lib/channel-postmessage/package.json +++ b/code/lib/channel-postmessage/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channel-postmessage", - "version": "7.0.0-alpha.45", + "version": "7.0.0-alpha.47", "description": "", "keywords": [ "storybook" @@ -42,9 +42,9 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/channels": "7.0.0-alpha.45", - "@storybook/client-logger": "7.0.0-alpha.45", - "@storybook/core-events": "7.0.0-alpha.45", + "@storybook/channels": "7.0.0-alpha.47", + "@storybook/client-logger": "7.0.0-alpha.47", + "@storybook/core-events": "7.0.0-alpha.47", "global": "^4.4.0", "qs": "^6.10.0", "telejson": "^6.0.8" @@ -60,5 +60,5 @@ "./src/index.ts" ] }, - "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532" + "gitHead": "1c706a4a778831e012343c905f86225fa71491a7" } diff --git a/code/lib/channel-websocket/package.json b/code/lib/channel-websocket/package.json index 0c3a354d14f9..7606042af691 100644 --- a/code/lib/channel-websocket/package.json +++ b/code/lib/channel-websocket/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channel-websocket", - "version": "7.0.0-alpha.45", + "version": "7.0.0-alpha.47", "description": "", "keywords": [ "storybook" @@ -34,8 +34,8 @@ "prep": "node ../../../scripts/prepare.js" }, "dependencies": { - "@storybook/channels": "7.0.0-alpha.45", - "@storybook/client-logger": "7.0.0-alpha.45", + "@storybook/channels": "7.0.0-alpha.47", + "@storybook/client-logger": "7.0.0-alpha.47", "global": "^4.4.0", "telejson": "^6.0.8" }, @@ -45,5 +45,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532" + "gitHead": "1c706a4a778831e012343c905f86225fa71491a7" } diff --git a/code/lib/channels/package.json b/code/lib/channels/package.json index 67f8a138a090..8759d8b01adb 100644 --- a/code/lib/channels/package.json +++ b/code/lib/channels/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channels", - "version": "7.0.0-alpha.45", + "version": "7.0.0-alpha.47", "description": "", "keywords": [ "storybook" @@ -52,5 +52,5 @@ "./src/index.ts" ] }, - "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532" + "gitHead": "1c706a4a778831e012343c905f86225fa71491a7" } diff --git a/code/lib/cli-sb/package.json b/code/lib/cli-sb/package.json index 7916dff4c903..96871a9fd353 100644 --- a/code/lib/cli-sb/package.json +++ b/code/lib/cli-sb/package.json @@ -1,6 +1,6 @@ { "name": "sb", - "version": "7.0.0-alpha.45", + "version": "7.0.0-alpha.47", "description": "Storybook CLI", "keywords": [ "storybook" @@ -24,7 +24,7 @@ "prep": "node ../../../scripts/prepare.js" }, "dependencies": { - "@storybook/cli": "7.0.0-alpha.45" + "@storybook/cli": "7.0.0-alpha.47" }, "devDependencies": { "typescript": "~4.6.3" @@ -32,5 +32,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532" + "gitHead": "1c706a4a778831e012343c905f86225fa71491a7" } diff --git a/code/lib/cli-storybook/package.json b/code/lib/cli-storybook/package.json index b38fbf4673be..281c4b0290a0 100644 --- a/code/lib/cli-storybook/package.json +++ b/code/lib/cli-storybook/package.json @@ -1,6 +1,6 @@ { "name": "storybook", - "version": "7.0.0-alpha.45", + "version": "7.0.0-alpha.47", "description": "Storybook CLI", "keywords": [ "storybook" @@ -27,7 +27,7 @@ "prep": "node ../../../scripts/prepare.js" }, "dependencies": { - "@storybook/cli": "7.0.0-alpha.45" + "@storybook/cli": "7.0.0-alpha.47" }, "devDependencies": { "typescript": "~4.6.3" @@ -35,5 +35,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532" + "gitHead": "1c706a4a778831e012343c905f86225fa71491a7" } diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json index af52e7618113..88f8ee00bfe3 100644 --- a/code/lib/cli/package.json +++ b/code/lib/cli/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/cli", - "version": "7.0.0-alpha.45", + "version": "7.0.0-alpha.47", "description": "Storybook's CLI - easiest method of adding storybook to your projects", "keywords": [ "cli", @@ -43,13 +43,13 @@ "dependencies": { "@babel/core": "^7.12.10", "@babel/preset-env": "^7.12.11", - "@storybook/codemod": "7.0.0-alpha.45", - "@storybook/core-common": "7.0.0-alpha.45", - "@storybook/core-server": "7.0.0-alpha.45", - "@storybook/csf-tools": "7.0.0-alpha.45", - "@storybook/node-logger": "7.0.0-alpha.45", - "@storybook/telemetry": "7.0.0-alpha.45", - "@storybook/types": "7.0.0-alpha.45", + "@storybook/codemod": "7.0.0-alpha.47", + "@storybook/core-common": "7.0.0-alpha.47", + "@storybook/core-server": "7.0.0-alpha.47", + "@storybook/csf-tools": "7.0.0-alpha.47", + "@storybook/node-logger": "7.0.0-alpha.47", + "@storybook/telemetry": "7.0.0-alpha.47", + "@storybook/types": "7.0.0-alpha.47", "@types/semver": "^7.3.4", "boxen": "^5.1.2", "chalk": "^4.1.0", @@ -77,7 +77,7 @@ "util-deprecate": "^1.0.2" }, "devDependencies": { - "@storybook/client-api": "7.0.0-alpha.45", + "@storybook/client-api": "7.0.0-alpha.47", "@types/cross-spawn": "^6.0.2", "@types/degit": "^2.8.3", "@types/prompts": "^2.0.9", @@ -99,5 +99,5 @@ ], "platform": "node" }, - "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532" + "gitHead": "1c706a4a778831e012343c905f86225fa71491a7" } diff --git a/code/lib/cli/rendererAssets/angular/Button.stories.ts b/code/lib/cli/rendererAssets/angular/Button.stories.ts deleted file mode 100644 index 1a4d6894f9a7..000000000000 --- a/code/lib/cli/rendererAssets/angular/Button.stories.ts +++ /dev/null @@ -1,43 +0,0 @@ -import type { Meta, StoryFn } from '@storybook/angular'; -import Button from './button.component'; - -// More on default export: https://storybook.js.org/docs/angular/writing-stories/introduction#default-export -export default { - title: 'Example/Button', - component: Button, - // More on argTypes: https://storybook.js.org/docs/angular/api/argtypes - argTypes: { - backgroundColor: { control: 'color' }, - }, -} as Meta; - -// More on component templates: https://storybook.js.org/docs/angular/writing-stories/introduction#using-args -const Template: StoryFn`, - context: args, -}); - -export const Text = Template.bind({}); -// More on args: https://storybook.js.org/docs/ember/writing-stories/args -Text.args = { - label: 'Button', - onClick: action('onClick'), -}; - -export const Emoji = Template.bind({}); -Emoji.args = { - label: '😀 😎 👍 💯', -}; - -export const TextWithAction = () => ({ - template: hbs` - - `, - context: { - onClick: () => action('This was clicked')(), - }, -}); - -TextWithAction.storyName = 'With an action'; -TextWithAction.parameters = { notes: 'My notes on a button with emojis' }; - -export const ButtonWithLinkToAnotherStory = () => ({ - template: hbs` - - `, - context: { - onClick: linkTo('example-introduction--page'), - }, -}); - -ButtonWithLinkToAnotherStory.storyName = 'button with link to another story'; diff --git a/code/lib/cli/rendererAssets/html/js/Button.stories.js b/code/lib/cli/rendererAssets/html/js/Button.stories.js deleted file mode 100644 index 63d4f9147145..000000000000 --- a/code/lib/cli/rendererAssets/html/js/Button.stories.js +++ /dev/null @@ -1,48 +0,0 @@ -import { createButton } from './Button'; - -// More on default export: https://storybook.js.org/docs/html/writing-stories/introduction#default-export -export default { - title: 'Example/Button', - // More on argTypes: https://storybook.js.org/docs/html/api/argtypes - argTypes: { - backgroundColor: { control: 'color' }, - label: { control: 'text' }, - onClick: { action: 'onClick' }, - primary: { control: 'boolean' }, - size: { - control: { type: 'select' }, - options: ['small', 'medium', 'large'], - }, - }, -}; - -// More on component templates: https://storybook.js.org/docs/html/writing-stories/introduction#using-args -const Template = ({ label, ...args }) => { - // You can either use a function to create DOM elements or use a plain html string! - // return `
${label}
`; - return createButton({ label, ...args }); -}; - -export const Primary = Template.bind({}); -// More on args: https://storybook.js.org/docs/html/writing-stories/args -Primary.args = { - primary: true, - label: 'Button', -}; - -export const Secondary = Template.bind({}); -Secondary.args = { - label: 'Button', -}; - -export const Large = Template.bind({}); -Large.args = { - size: 'large', - label: 'Button', -}; - -export const Small = Template.bind({}); -Small.args = { - size: 'small', - label: 'Button', -}; diff --git a/code/lib/cli/rendererAssets/html/ts/Button.stories.ts b/code/lib/cli/rendererAssets/html/ts/Button.stories.ts deleted file mode 100644 index 456189912ddb..000000000000 --- a/code/lib/cli/rendererAssets/html/ts/Button.stories.ts +++ /dev/null @@ -1,50 +0,0 @@ -import type { Meta, StoryFn } from '@storybook/html'; -import type { ButtonProps } from './Button'; -import { createButton } from './Button'; - -// More on default export: https://storybook.js.org/docs/html/writing-stories/introduction#default-export -export default { - title: 'Example/Button', - // More on argTypes: https://storybook.js.org/docs/html/api/argtypes - argTypes: { - backgroundColor: { control: 'color' }, - label: { control: 'text' }, - onClick: { action: 'onClick' }, - primary: { control: 'boolean' }, - size: { - control: { type: 'select' }, - options: ['small', 'medium', 'large'], - }, - }, -} as Meta; - -// More on component templates: https://storybook.js.org/docs/html/writing-stories/introduction#using-args -const Template: StoryFn = (args) => { - // You can either use a function to create DOM elements or use a plain html string! - // return `
${label}
`; - return createButton(args); -}; - -export const Primary = Template.bind({}); -// More on args: https://storybook.js.org/docs/html/writing-stories/args -Primary.args = { - primary: true, - label: 'Button', -}; - -export const Secondary = Template.bind({}); -Secondary.args = { - label: 'Button', -}; - -export const Large = Template.bind({}); -Large.args = { - size: 'large', - label: 'Button', -}; - -export const Small = Template.bind({}); -Small.args = { - size: 'small', - label: 'Button', -}; diff --git a/code/lib/cli/rendererAssets/html/ts/Page.stories.ts b/code/lib/cli/rendererAssets/html/ts/Page.stories.ts deleted file mode 100644 index 057863b93bec..000000000000 --- a/code/lib/cli/rendererAssets/html/ts/Page.stories.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { within, userEvent } from '@storybook/testing-library'; -import type { Meta, StoryFn } from '@storybook/html'; -import { createPage } from './Page'; - -export default { - title: 'Example/Page', - parameters: { - // More on Story layout: https://storybook.js.org/docs/html/configure/story-layout - layout: 'fullscreen', - }, -} as Meta; - -const Template: StoryFn = () => createPage(); - -export const LoggedOut = Template.bind({}); - -export const LoggedIn = Template.bind({}); - -// More on interaction testing: https://storybook.js.org/docs/html/writing-tests/interaction-testing -LoggedIn.play = async ({ canvasElement }) => { - const canvas = within(canvasElement); - const loginButton = await canvas.getByRole('button', { name: /Log in/i }); - await userEvent.click(loginButton); -}; diff --git a/code/lib/cli/rendererAssets/marionette/index.stories.js b/code/lib/cli/rendererAssets/marionette/index.stories.js deleted file mode 100644 index a21a55194725..000000000000 --- a/code/lib/cli/rendererAssets/marionette/index.stories.js +++ /dev/null @@ -1,20 +0,0 @@ -import { View } from 'backbone.marionette'; - -import { storiesOf } from '@storybook/marionette'; - -storiesOf('Demo', module).add( - 'button', - () => - new View({ - template: () => '', - ui: { - button: '#my_button', - }, - triggers: { - 'click @ui.button': 'click', - }, - onClick() { - console.log('button clicked'); - }, - }) -); diff --git a/code/lib/cli/rendererAssets/marko/1-Button.stories.js b/code/lib/cli/rendererAssets/marko/1-Button.stories.js deleted file mode 100644 index aac4f18f0a60..000000000000 --- a/code/lib/cli/rendererAssets/marko/1-Button.stories.js +++ /dev/null @@ -1,24 +0,0 @@ -import { action } from '@storybook/addon-actions'; -import Button from './Button.marko'; - -// More on default export: https://storybook.js.org/docs/marko/writing-stories/introduction#default-export -export default { - title: 'Button', - // More on argTypes: https://storybook.js.org/docs/marko/api/argtypes - argTypes: { - label: { control: 'text' }, - }, -}; - -// More on component templates: https://storybook.js.org/docs/marko/writing-stories/introduction#using-args -const Template = (args) => ({ - component: Button, - input: args, -}); - -export const Text = Template.bind({}); -// More on args: https://storybook.js.org/docs/marko/writing-stories/args -Text.args = { - label: 'Button', - onClick: action('onClick'), -}; diff --git a/code/lib/cli/rendererAssets/marko/Button.marko b/code/lib/cli/rendererAssets/marko/Button.marko deleted file mode 100644 index 3824ce9303ec..000000000000 --- a/code/lib/cli/rendererAssets/marko/Button.marko +++ /dev/null @@ -1,13 +0,0 @@ -class { - onCreate(input) { - this.onClick = input.onClick; - } - - handleClick() { - this.input.onClick(); - } -} - -
- -
diff --git a/code/lib/cli/rendererAssets/mithril/Button.js b/code/lib/cli/rendererAssets/mithril/Button.js deleted file mode 100644 index db8dc2ba36c0..000000000000 --- a/code/lib/cli/rendererAssets/mithril/Button.js +++ /dev/null @@ -1,22 +0,0 @@ -/** @jsx m */ - -import m from 'mithril'; -import './button.css'; - -export const Button = { - view: ({ label, attrs }) => { - const mode = attrs.primary ? 'storybook-button--primary' : 'storybook-button--secondary'; - const size = attrs.size || 'medium'; - - return ( - - ); - }, -}; diff --git a/code/lib/cli/rendererAssets/mithril/Button.stories.js b/code/lib/cli/rendererAssets/mithril/Button.stories.js deleted file mode 100644 index 04206d6045c7..000000000000 --- a/code/lib/cli/rendererAssets/mithril/Button.stories.js +++ /dev/null @@ -1,43 +0,0 @@ -import m from 'mithril'; - -import { Button } from './Button'; - -// More on default export: https://storybook.js.org/docs/mithril/writing-stories/introduction#default-export -export default { - title: 'Example/Button', - component: Button, - // More on argTypes: https://storybook.js.org/docs/mithril/api/argtypes - argTypes: { - backgroundColor: { control: 'color' }, - onClick: { action: 'onClick' }, - }, -}; - -// More on component templates: https://storybook.js.org/docs/mithril/writing-stories/introduction#using-args -const Template = ({ label, ...args }) => ({ - view: () => m(Button, args, label), -}); - -export const Primary = Template.bind({}); -// More on args: https://storybook.js.org/docs/mithril/writing-stories/args -Primary.args = { - primary: true, - label: 'Button', -}; - -export const Secondary = Template.bind({}); -Secondary.args = { - label: 'Button', -}; - -export const Large = Template.bind({}); -Large.args = { - size: 'large', - label: 'Button', -}; - -export const Small = Template.bind({}); -Small.args = { - size: 'small', - label: 'Button', -}; diff --git a/code/lib/cli/rendererAssets/mithril/Header.js b/code/lib/cli/rendererAssets/mithril/Header.js deleted file mode 100644 index fed4b72c7cdb..000000000000 --- a/code/lib/cli/rendererAssets/mithril/Header.js +++ /dev/null @@ -1,51 +0,0 @@ -/** @jsx m */ - -import m from 'mithril'; - -import { Button } from './Button'; -import './header.css'; - -export const Header = { - view: ({ attrs }) => ( -
-
-
- - - - - - - -

Acme

-
- {m( - 'div', - ...(attrs.user - ? [m(Button, { size: 'small', onClick: attrs.onLogout }, 'Log out')] - : [ - m(Button, { size: 'small', onClick: attrs.onLogin }, 'Log in'), - m( - Button, - { - primary: true, - size: 'small', - onClick: attrs.onCreateAccount, - }, - 'Sign up' - ), - ]) - )} -
-
- ), -}; diff --git a/code/lib/cli/rendererAssets/mithril/Header.stories.js b/code/lib/cli/rendererAssets/mithril/Header.stories.js deleted file mode 100644 index ff779e9ff6e9..000000000000 --- a/code/lib/cli/rendererAssets/mithril/Header.stories.js +++ /dev/null @@ -1,20 +0,0 @@ -import m from 'mithril'; - -import { Header } from './Header'; - -export default { - title: 'Example/Header', - component: Header, -}; - -const Template = ({ label, ...args }) => ({ - view: () => m(Header, args, label), -}); - -export const LoggedIn = Template.bind({}); -LoggedIn.args = { - user: {}, -}; - -export const LoggedOut = Template.bind({}); -LoggedOut.args = {}; diff --git a/code/lib/cli/rendererAssets/mithril/Page.js b/code/lib/cli/rendererAssets/mithril/Page.js deleted file mode 100644 index 199957740cf4..000000000000 --- a/code/lib/cli/rendererAssets/mithril/Page.js +++ /dev/null @@ -1,70 +0,0 @@ -/** @jsx m */ - -import m from 'mithril'; - -import { Header } from './Header'; -import './page.css'; - -export const Page = { - view: ({ attrs }) => ( -
-
- {m(Header, { - user: attrs.user, - onLogin: attrs.onLogin, - onLogout: attrs.onLogout, - onCreateAccount: attrs.onCreateAccount, - })} -
-
-

Pages in Storybook

-

- We recommend building UIs with a{' '} - - component-driven - {' '} - process starting with atomic components and ending with pages. -

-

- Render pages with mock data. This makes it easy to build and review page states without - needing to navigate to them in your app. Here are some handy patterns for managing page - data in Storybook: -

-
    -
  • - Use a higher-level connected component. Storybook helps you compose such data from the - "args" of child component stories -
    • -
  • - Assemble data in the page component from your services. You can mock these services out - using Storybook. -
    • -
-

- Get a guided tutorial on component-driven development at{' '} - - Storybook tutorials - - . Read more in the{' '} - - docs - - . -

-
- Tip Adjust the width of the canvas with the{' '} - - - - - - Viewports addon in the toolbar -
-
-
- ), -}; diff --git a/code/lib/cli/rendererAssets/mithril/Page.stories.js b/code/lib/cli/rendererAssets/mithril/Page.stories.js deleted file mode 100644 index 73804bf69e65..000000000000 --- a/code/lib/cli/rendererAssets/mithril/Page.stories.js +++ /dev/null @@ -1,24 +0,0 @@ -import m from 'mithril'; - -import { Page } from './Page'; -import * as HeaderStories from './Header.stories'; - -export default { - title: 'Example/Page', - component: Page, -}; - -const Template = ({ label, ...args }) => ({ - view: () => m(Page, args, label), -}); - -export const LoggedIn = Template.bind({}); -LoggedIn.args = { - // More on composing args: https://storybook.js.org/docs/mithril/writing-stories/args#args-composition - ...HeaderStories.LoggedIn.args, -}; - -export const LoggedOut = Template.bind({}); -LoggedOut.args = { - ...HeaderStories.LoggedOut.args, -}; diff --git a/code/lib/cli/rendererAssets/nextjs/js/Header.stories.jsx b/code/lib/cli/rendererAssets/nextjs/js/Header.stories.jsx deleted file mode 100644 index e4850002cac5..000000000000 --- a/code/lib/cli/rendererAssets/nextjs/js/Header.stories.jsx +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; - -import { Header } from './Header'; - -export default { - title: 'Example/Header', - component: Header, - parameters: { - // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout - layout: 'fullscreen', - }, -}; - -const Template = (args) =>
; - -export const LoggedIn = Template.bind({}); -LoggedIn.args = { - user: { - name: 'Jane Doe', - }, -}; - -export const LoggedOut = Template.bind({}); -LoggedOut.args = {}; diff --git a/code/lib/cli/rendererAssets/nextjs/ts/Button.stories.tsx b/code/lib/cli/rendererAssets/nextjs/ts/Button.stories.tsx deleted file mode 100644 index 435f55a9ef58..000000000000 --- a/code/lib/cli/rendererAssets/nextjs/ts/Button.stories.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import React from 'react'; -import type { ComponentStoryFn, ComponentMeta } from '@storybook/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' }, - }, -} as ComponentMeta; - -// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args -const Template: ComponentStoryFn = (args) => - ); -}; - -Button.defaultProps = { - backgroundColor: null, - primary: false, - size: 'medium', - onClick: undefined, -}; diff --git a/code/lib/cli/rendererAssets/rax/Button.stories.js b/code/lib/cli/rendererAssets/rax/Button.stories.js deleted file mode 100644 index 5d4627f2750f..000000000000 --- a/code/lib/cli/rendererAssets/rax/Button.stories.js +++ /dev/null @@ -1,40 +0,0 @@ -import { createElement } from 'rax'; - -import { Button } from './Button'; - -// More on default export: https://storybook.js.org/docs/rax/writing-stories/introduction#default-export -export default { - title: 'Example/Button', - // More on argTypes: https://storybook.js.org/docs/rax/api/argtypes - argTypes: { - backgroundColor: { control: 'color' }, - onClick: { action: 'onClick' }, - }, -}; - -// More on component templates: https://storybook.js.org/docs/rax/writing-stories/introduction#using-args -const Template = (args) =>
-); - -Header.defaultProps = { - user: null, -}; diff --git a/code/lib/cli/rendererAssets/rax/Header.stories.js b/code/lib/cli/rendererAssets/rax/Header.stories.js deleted file mode 100644 index 707c8aa123ec..000000000000 --- a/code/lib/cli/rendererAssets/rax/Header.stories.js +++ /dev/null @@ -1,17 +0,0 @@ -import { createElement } from 'rax'; - -import { Header } from './Header'; - -export default { - title: 'Example/Header', -}; - -const Template = (args) =>
; - -export const LoggedIn = Template.bind({}); -LoggedIn.args = { - user: {}, -}; - -export const LoggedOut = Template.bind({}); -LoggedOut.args = {}; diff --git a/code/lib/cli/rendererAssets/rax/Page.js b/code/lib/cli/rendererAssets/rax/Page.js deleted file mode 100644 index 0bda5cae9e9f..000000000000 --- a/code/lib/cli/rendererAssets/rax/Page.js +++ /dev/null @@ -1,64 +0,0 @@ -import { createElement } from 'rax'; - -import { Header } from './Header'; -import './page.css'; - -export const Page = ({ user, onLogin, onLogout, onCreateAccount }) => ( -
-
- -
-

Pages in Storybook

-

- We recommend building UIs with a{' '} - - component-driven - {' '} - process starting with atomic components and ending with pages. -

-

- Render pages with mock data. This makes it easy to build and review page states without - needing to navigate to them in your app. Here are some handy patterns for managing page data - in Storybook: -

-
    -
  • - Use a higher-level connected component. Storybook helps you compose such data from the - "args" of child component stories -
    • -
  • - Assemble data in the page component from your services. You can mock these services out - using Storybook. -
    • -
-

- Get a guided tutorial on component-driven development at{' '} - - Storybook tutorials - - . Read more in the{' '} - - docs - - . -

-
- Tip Adjust the width of the canvas with the{' '} - - - - - - Viewports addon in the toolbar -
-
-
-); - -Page.defaultProps = { - user: null, -}; diff --git a/code/lib/cli/rendererAssets/rax/Page.stories.js b/code/lib/cli/rendererAssets/rax/Page.stories.js deleted file mode 100644 index c04e10bb8e12..000000000000 --- a/code/lib/cli/rendererAssets/rax/Page.stories.js +++ /dev/null @@ -1,21 +0,0 @@ -import { createElement } from 'rax'; - -import { Page } from './Page'; -import * as HeaderStories from './Header.stories'; - -export default { - title: 'Example/Page', -}; - -const Template = (args) => ; - -export const LoggedIn = Template.bind({}); -LoggedIn.args = { - // More on composing args: https://storybook.js.org/docs/rax/writing-stories/args#args-composition - ...HeaderStories.LoggedIn.args, -}; - -export const LoggedOut = Template.bind({}); -LoggedOut.args = { - ...HeaderStories.LoggedOut.args, -}; diff --git a/code/lib/cli/rendererAssets/react/js/Button.stories.jsx b/code/lib/cli/rendererAssets/react/js/Button.stories.jsx deleted file mode 100644 index 61f6e19e14d7..000000000000 --- a/code/lib/cli/rendererAssets/react/js/Button.stories.jsx +++ /dev/null @@ -1,40 +0,0 @@ -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) => - - - - - diff --git a/code/lib/cli/rendererAssets/svelte/Button.stories.js b/code/lib/cli/rendererAssets/svelte/Button.stories.js deleted file mode 100644 index d700639dba2d..000000000000 --- a/code/lib/cli/rendererAssets/svelte/Button.stories.js +++ /dev/null @@ -1,51 +0,0 @@ -import Button from './Button.svelte'; - -// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export -// More on argTypes: https://storybook.js.org/docs/svelte/api/argtypes -export default { - title: 'Example/Button', - component: Button, - argTypes: { - backgroundColor: { control: 'color' }, - label: { control: 'text' }, - onClick: { action: 'onClick' }, - primary: { control: 'boolean' }, - size: { - control: { type: 'select' }, - options: ['small', 'medium', 'large'], - }, - }, -}; - -// More on component templates: https://storybook.js.org/docs/svelte/writing-stories/introduction#using-args -const Template = (args) => ({ - Component: Button, - props: args, - on: { - click: args.onClick, - }, -}); - -// More on args: https://storybook.js.org/docs/svelte/writing-stories/args -export const Primary = Template.bind({}); -Primary.args = { - primary: true, - label: 'Button', -}; - -export const Secondary = Template.bind({}); -Secondary.args = { - label: 'Button', -}; - -export const Large = Template.bind({}); -Large.args = { - size: 'large', - label: 'Button', -}; - -export const Small = Template.bind({}); -Small.args = { - size: 'small', - label: 'Button', -}; diff --git a/code/lib/cli/rendererAssets/svelte/Header.stories.js b/code/lib/cli/rendererAssets/svelte/Header.stories.js deleted file mode 100644 index 9f80fa3fbbe3..000000000000 --- a/code/lib/cli/rendererAssets/svelte/Header.stories.js +++ /dev/null @@ -1,35 +0,0 @@ -import Header from './Header.svelte'; - -export default { - title: 'Example/Header', - component: Header, - parameters: { - // More on Story layout: https://storybook.js.org/docs/svelte/configure/story-layout - layout: 'fullscreen', - }, - argTypes: { - onLogin: { action: 'onLogin' }, - onLogout: { action: 'onLogout' }, - onCreateAccount: { action: 'onCreateAccount' }, - }, -}; - -const Template = (args) => ({ - Component: Header, - props: args, - on: { - login: args.onLogin, - logout: args.onLogout, - createAccount: args.onCreateAccount, - }, -}); - -export const LoggedIn = Template.bind({}); -LoggedIn.args = { - user: { - name: 'Jane Doe', - }, -}; - -export const LoggedOut = Template.bind({}); -LoggedOut.args = {}; diff --git a/code/lib/cli/rendererAssets/vue/Button.stories.js b/code/lib/cli/rendererAssets/vue/Button.stories.js deleted file mode 100644 index 3e9d01553ef5..000000000000 --- a/code/lib/cli/rendererAssets/vue/Button.stories.js +++ /dev/null @@ -1,46 +0,0 @@ -import MyButton from './Button.vue'; - -// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export -export default { - title: 'Example/Button', - component: MyButton, - // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes - argTypes: { - backgroundColor: { control: 'color' }, - size: { - control: { type: 'select' }, - options: ['small', 'medium', 'large'], - }, - }, -}; - -// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args -const Template = (args, { argTypes }) => ({ - props: Object.keys(argTypes), - components: { MyButton }, - template: '', -}); - -export const Primary = Template.bind({}); -// More on args: https://storybook.js.org/docs/vue/writing-stories/args -Primary.args = { - primary: true, - label: 'Button', -}; - -export const Secondary = Template.bind({}); -Secondary.args = { - label: 'Button', -}; - -export const Large = Template.bind({}); -Large.args = { - size: 'large', - label: 'Button', -}; - -export const Small = Template.bind({}); -Small.args = { - size: 'small', - label: 'Button', -}; diff --git a/code/lib/cli/rendererAssets/vue/Header.stories.js b/code/lib/cli/rendererAssets/vue/Header.stories.js deleted file mode 100644 index 8878aa5f88af..000000000000 --- a/code/lib/cli/rendererAssets/vue/Header.stories.js +++ /dev/null @@ -1,27 +0,0 @@ -import MyHeader from './Header.vue'; - -export default { - title: 'Example/Header', - component: MyHeader, - parameters: { - // More on Story layout: https://storybook.js.org/docs/vue/configure/story-layout - layout: 'fullscreen', - }, -}; - -const Template = (args, { argTypes }) => ({ - props: Object.keys(argTypes), - components: { MyHeader }, - template: - '', -}); - -export const LoggedIn = Template.bind({}); -LoggedIn.args = { - user: { - name: 'Jane Doe', - }, -}; - -export const LoggedOut = Template.bind({}); -LoggedOut.args = {}; diff --git a/code/lib/cli/rendererAssets/vue3/Button.stories.js b/code/lib/cli/rendererAssets/vue3/Button.stories.js deleted file mode 100644 index 2561202c7ee7..000000000000 --- a/code/lib/cli/rendererAssets/vue3/Button.stories.js +++ /dev/null @@ -1,52 +0,0 @@ -import MyButton from './Button.vue'; - -// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export -export default { - title: 'Example/Button', - component: MyButton, - // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes - argTypes: { - backgroundColor: { control: 'color' }, - onClick: {}, - size: { - control: { type: 'select' }, - options: ['small', 'medium', 'large'], - }, - }, -}; - -// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args -const Template = (args) => ({ - // Components used in your story `template` are defined in the `components` object - components: { MyButton }, - // The story's `args` need to be mapped into the template through the `setup()` method - setup() { - return { args }; - }, - // And then the `args` are bound to your component with `v-bind="args"` - template: '', -}); - -export const Primary = Template.bind({}); -// More on args: https://storybook.js.org/docs/vue/writing-stories/args -Primary.args = { - primary: true, - label: 'Button', -}; - -export const Secondary = Template.bind({}); -Secondary.args = { - label: 'Button', -}; - -export const Large = Template.bind({}); -Large.args = { - size: 'large', - label: 'Button', -}; - -export const Small = Template.bind({}); -Small.args = { - size: 'small', - label: 'Button', -}; diff --git a/code/lib/cli/rendererAssets/vue3/Header.stories.js b/code/lib/cli/rendererAssets/vue3/Header.stories.js deleted file mode 100644 index 8cda9abc0324..000000000000 --- a/code/lib/cli/rendererAssets/vue3/Header.stories.js +++ /dev/null @@ -1,34 +0,0 @@ -import MyHeader from './Header.vue'; - -export default { - title: 'Example/Header', - component: MyHeader, - parameters: { - // More on Story layout: https://storybook.js.org/docs/vue/configure/story-layout - layout: 'fullscreen', - }, -}; - -const Template = (args) => ({ - // Components used in your story `template` are defined in the `components` object - components: { MyHeader }, - // The story's `args` need to be mapped into the template through the `setup()` method - setup() { - // Story args can be spread into the returned object - return { ...args }; - }, - // Then, the spread values can be accessed directly in the template - template: '', -}); - -export const LoggedIn = Template.bind({}); -LoggedIn.args = { - user: { - name: 'Jane Doe', - }, -}; - -export const LoggedOut = Template.bind({}); -LoggedOut.args = { - user: null, -}; diff --git a/code/lib/cli/rendererAssets/vue3/Page.stories.js b/code/lib/cli/rendererAssets/vue3/Page.stories.js deleted file mode 100644 index ef6aeafe784d..000000000000 --- a/code/lib/cli/rendererAssets/vue3/Page.stories.js +++ /dev/null @@ -1,29 +0,0 @@ -import { within, userEvent } from '@storybook/testing-library'; -import MyPage from './Page.vue'; - -export default { - title: 'Example/Page', - component: MyPage, - parameters: { - // More on Story layout: https://storybook.js.org/docs/vue/configure/story-layout - layout: 'fullscreen', - }, -}; - -const Template = () => ({ - // Components used in your story `template` are defined in the `components` object - components: { MyPage }, - - // Here we define the `template` - template: '', -}); - -export const LoggedOut = Template.bind({}); - -// More on interaction testing: https://storybook.js.org/docs/vue/writing-tests/interaction-testing -export const LoggedIn = Template.bind({}); -LoggedIn.play = async ({ canvasElement }) => { - const canvas = within(canvasElement); - const loginButton = await canvas.getByRole('button', { name: /Log in/i }); - await userEvent.click(loginButton); -}; diff --git a/code/lib/cli/rendererAssets/web-components/js/Button.stories.js b/code/lib/cli/rendererAssets/web-components/js/Button.stories.js deleted file mode 100644 index ec71e8a7c638..000000000000 --- a/code/lib/cli/rendererAssets/web-components/js/Button.stories.js +++ /dev/null @@ -1,42 +0,0 @@ -import { Button } from './Button'; - -// More on default export: https://storybook.js.org/docs/web-components/writing-stories/introduction#default-export -export default { - title: 'Example/Button', - // More on argTypes: https://storybook.js.org/docs/web-components/api/argtypes - argTypes: { - backgroundColor: { control: 'color' }, - onClick: { action: 'onClick' }, - size: { - control: { type: 'select' }, - options: ['small', 'medium', 'large'], - }, - }, -}; - -// More on component templates: https://storybook.js.org/docs/web-components/writing-stories/introduction#using-args -const Template = (args) => Button(args); - -export const Primary = Template.bind({}); -// More on args: https://storybook.js.org/docs/web-components/writing-stories/args -Primary.args = { - primary: true, - label: 'Button', -}; - -export const Secondary = Template.bind({}); -Secondary.args = { - label: 'Button', -}; - -export const Large = Template.bind({}); -Large.args = { - size: 'large', - label: 'Button', -}; - -export const Small = Template.bind({}); -Small.args = { - size: 'small', - label: 'Button', -}; diff --git a/code/lib/cli/rendererAssets/web-components/js/Header.stories.js b/code/lib/cli/rendererAssets/web-components/js/Header.stories.js deleted file mode 100644 index 6045ac91d89d..000000000000 --- a/code/lib/cli/rendererAssets/web-components/js/Header.stories.js +++ /dev/null @@ -1,15 +0,0 @@ -import { Header } from './Header'; - -export default { - title: 'Example/Header', -}; - -const Template = (args) => Header(args); - -export const LoggedIn = Template.bind({}); -LoggedIn.args = { - user: {}, -}; - -export const LoggedOut = Template.bind({}); -LoggedOut.args = {}; diff --git a/code/lib/cli/rendererAssets/web-components/js/Page.stories.js b/code/lib/cli/rendererAssets/web-components/js/Page.stories.js deleted file mode 100644 index 961abc636a0e..000000000000 --- a/code/lib/cli/rendererAssets/web-components/js/Page.stories.js +++ /dev/null @@ -1,19 +0,0 @@ -import { Page } from './Page'; -import * as HeaderStories from './Header.stories'; - -export default { - title: 'Example/Page', -}; - -const Template = (args) => Page(args); - -export const LoggedIn = Template.bind({}); -LoggedIn.args = { - // More on composing args: https://storybook.js.org/docs/web-components/writing-stories/args#args-composition - ...HeaderStories.LoggedIn.args, -}; - -export const LoggedOut = Template.bind({}); -LoggedOut.args = { - ...HeaderStories.LoggedOut.args, -}; diff --git a/code/lib/cli/rendererAssets/web-components/ts/Button.stories.ts b/code/lib/cli/rendererAssets/web-components/ts/Button.stories.ts deleted file mode 100644 index 3aca34166531..000000000000 --- a/code/lib/cli/rendererAssets/web-components/ts/Button.stories.ts +++ /dev/null @@ -1,44 +0,0 @@ -import type { Meta, StoryFn } from '@storybook/web-components'; -import type { ButtonProps } from './Button'; -import { Button } from './Button'; - -// More on default export: https://storybook.js.org/docs/web-components/writing-stories/introduction#default-export -export default { - title: 'Example/Button', - // More on argTypes: https://storybook.js.org/docs/web-components/api/argtypes - argTypes: { - backgroundColor: { control: 'color' }, - onClick: { action: 'onClick' }, - size: { - control: { type: 'select' }, - options: ['small', 'medium', 'large'], - }, - }, -} as Meta; - -// More on component templates: https://storybook.js.org/docs/web-components/writing-stories/introduction#using-args -const Template: StoryFn = (args) => Button(args); - -export const Primary = Template.bind({}); -// More on args: https://storybook.js.org/docs/web-components/writing-stories/args -Primary.args = { - primary: true, - label: 'Button', -}; - -export const Secondary = Template.bind({}); -Secondary.args = { - label: 'Button', -}; - -export const Large = Template.bind({}); -Large.args = { - size: 'large', - label: 'Button', -}; - -export const Small = Template.bind({}); -Small.args = { - size: 'small', - label: 'Button', -}; diff --git a/code/lib/cli/rendererAssets/web-components/ts/Header.stories.ts b/code/lib/cli/rendererAssets/web-components/ts/Header.stories.ts deleted file mode 100644 index 7d0c8c12a672..000000000000 --- a/code/lib/cli/rendererAssets/web-components/ts/Header.stories.ts +++ /dev/null @@ -1,17 +0,0 @@ -import type { Meta, StoryFn } from '@storybook/web-components'; -import type { HeaderProps } from './Header'; -import { Header } from './Header'; - -export default { - title: 'Example/Header', -} as Meta; - -const Template: StoryFn = (args) => Header(args); - -export const LoggedIn = Template.bind({}); -LoggedIn.args = { - user: {}, -}; - -export const LoggedOut = Template.bind({}); -LoggedOut.args = {}; diff --git a/code/lib/cli/rendererAssets/web-components/ts/Page.stories.ts b/code/lib/cli/rendererAssets/web-components/ts/Page.stories.ts deleted file mode 100644 index 9f6caa8bcde1..000000000000 --- a/code/lib/cli/rendererAssets/web-components/ts/Page.stories.ts +++ /dev/null @@ -1,21 +0,0 @@ -import type { Meta, StoryFn } from '@storybook/web-components'; -import type { PageProps } from './Page'; -import { Page } from './Page'; -import * as HeaderStories from './Header.stories'; - -export default { - title: 'Example/Page', -} as Meta; - -const Template: StoryFn = (args) => Page(args); - -export const LoggedIn = Template.bind({}); -LoggedIn.args = { - // More on composing args: https://storybook.js.org/docs/web-components/writing-stories/args#args-composition - ...HeaderStories.LoggedIn.args, -}; - -export const LoggedOut = Template.bind({}); -LoggedOut.args = { - ...HeaderStories.LoggedOut.args, -}; diff --git a/code/lib/cli/src/automigrate/fixes/angular12.test.ts b/code/lib/cli/src/automigrate/fixes/angular12.test.ts index fde8f9893dd5..02da0ae88506 100644 --- a/code/lib/cli/src/automigrate/fixes/angular12.test.ts +++ b/code/lib/cli/src/automigrate/fixes/angular12.test.ts @@ -1,12 +1,19 @@ /* eslint-disable no-underscore-dangle */ -import path from 'path'; -import type { JsPackageManager } from '../../js-package-manager'; +import * as path from 'path'; +import type { StorybookConfig } from '@storybook/types'; +import type { JsPackageManager, PackageJson } from '../../js-package-manager'; import { angular12 } from './angular12'; // eslint-disable-next-line global-require, jest/no-mocks-import jest.mock('fs-extra', () => require('../../../../../__mocks__/fs-extra')); -const checkAngular12 = async ({ packageJson, main }) => { +const checkAngular12 = async ({ + packageJson, + main, +}: { + packageJson: PackageJson; + main: Partial; +}) => { // eslint-disable-next-line global-require require('fs-extra').__setMockFiles({ [path.join('.storybook', 'main.js')]: `module.exports = ${JSON.stringify(main)};`, diff --git a/code/lib/cli/src/automigrate/fixes/builder-vite.test.ts b/code/lib/cli/src/automigrate/fixes/builder-vite.test.ts index 19aef0c1cd84..6981d288c265 100644 --- a/code/lib/cli/src/automigrate/fixes/builder-vite.test.ts +++ b/code/lib/cli/src/automigrate/fixes/builder-vite.test.ts @@ -1,12 +1,19 @@ /* eslint-disable no-underscore-dangle */ -import path from 'path'; -import type { JsPackageManager } from '../../js-package-manager'; +import * as path from 'path'; +import type { StorybookConfig } from '@storybook/types'; +import type { JsPackageManager, PackageJson } from '../../js-package-manager'; import { builderVite } from './builder-vite'; // eslint-disable-next-line global-require, jest/no-mocks-import jest.mock('fs-extra', () => require('../../../../../__mocks__/fs-extra')); -const checkBuilderVite = async ({ packageJson = {}, main }) => { +const checkBuilderVite = async ({ + packageJson = {}, + main, +}: { + packageJson?: PackageJson; + main: Partial; +}) => { // eslint-disable-next-line global-require require('fs-extra').__setMockFiles({ [path.join('.storybook', 'main.js')]: `module.exports = ${JSON.stringify(main)};`, diff --git a/code/lib/cli/src/automigrate/fixes/cra5.test.ts b/code/lib/cli/src/automigrate/fixes/cra5.test.ts index 191b813058f6..db3066f6f5a8 100644 --- a/code/lib/cli/src/automigrate/fixes/cra5.test.ts +++ b/code/lib/cli/src/automigrate/fixes/cra5.test.ts @@ -1,12 +1,19 @@ /* eslint-disable no-underscore-dangle */ -import path from 'path'; -import type { JsPackageManager } from '../../js-package-manager'; +import * as path from 'path'; +import type { StorybookConfig } from '@storybook/types'; +import type { JsPackageManager, PackageJson } from '../../js-package-manager'; import { cra5 } from './cra5'; // eslint-disable-next-line global-require, jest/no-mocks-import jest.mock('fs-extra', () => require('../../../../../__mocks__/fs-extra')); -const checkCra5 = async ({ packageJson, main }) => { +const checkCra5 = async ({ + packageJson, + main, +}: { + packageJson: PackageJson; + main: Partial; +}) => { // eslint-disable-next-line global-require require('fs-extra').__setMockFiles({ [path.join('.storybook', 'main.js')]: `module.exports = ${JSON.stringify(main)};`, diff --git a/code/lib/cli/src/automigrate/fixes/eslint-plugin.test.ts b/code/lib/cli/src/automigrate/fixes/eslint-plugin.test.ts index df110b9f0990..a82ee63fed52 100644 --- a/code/lib/cli/src/automigrate/fixes/eslint-plugin.test.ts +++ b/code/lib/cli/src/automigrate/fixes/eslint-plugin.test.ts @@ -1,7 +1,8 @@ /* eslint-disable no-underscore-dangle */ -import path from 'path'; +import * as path from 'path'; import { dedent } from 'ts-dedent'; -import type { JsPackageManager } from '../../js-package-manager'; +import type { StorybookConfig } from '@storybook/types'; +import type { JsPackageManager, PackageJson } from '../../js-package-manager'; import { eslintPlugin } from './eslint-plugin'; // eslint-disable-next-line global-require, jest/no-mocks-import @@ -12,6 +13,11 @@ const checkEslint = async ({ main = {}, hasEslint = true, eslintExtension = 'js', +}: { + packageJson: PackageJson; + main?: Partial & Record; + hasEslint?: boolean; + eslintExtension?: string; }) => { // eslint-disable-next-line global-require require('fs-extra').__setMockFiles({ diff --git a/code/lib/cli/src/automigrate/fixes/new-frameworks.test.ts b/code/lib/cli/src/automigrate/fixes/new-frameworks.test.ts index ecad50520b26..c0f46684d844 100644 --- a/code/lib/cli/src/automigrate/fixes/new-frameworks.test.ts +++ b/code/lib/cli/src/automigrate/fixes/new-frameworks.test.ts @@ -1,12 +1,19 @@ /* eslint-disable no-underscore-dangle */ -import path from 'path'; -import type { JsPackageManager } from '../../js-package-manager'; +import * as path from 'path'; +import type { StorybookConfig } from '@storybook/types'; +import type { JsPackageManager, PackageJson } from '../../js-package-manager'; import { newFrameworks } from './new-frameworks'; // eslint-disable-next-line global-require, jest/no-mocks-import jest.mock('fs-extra', () => require('../../../../../__mocks__/fs-extra')); -const checkNewFrameworks = async ({ packageJson, main }) => { +const checkNewFrameworks = async ({ + packageJson, + main, +}: { + packageJson: PackageJson; + main: Partial & Record; +}) => { if (main) { // eslint-disable-next-line global-require require('fs-extra').__setMockFiles({ diff --git a/code/lib/cli/src/automigrate/fixes/npm7.test.ts b/code/lib/cli/src/automigrate/fixes/npm7.test.ts index 83346ccdfaf1..4ed22b8aa18e 100644 --- a/code/lib/cli/src/automigrate/fixes/npm7.test.ts +++ b/code/lib/cli/src/automigrate/fixes/npm7.test.ts @@ -3,7 +3,7 @@ import { npm7 } from './npm7'; const mockExecuteCommand = jest.fn(); class MockedNPMProxy extends NPMProxy { - executeCommand(...args) { + executeCommand(...args: Parameters) { return mockExecuteCommand(...args); } } diff --git a/code/lib/cli/src/automigrate/fixes/sb-scripts.test.ts b/code/lib/cli/src/automigrate/fixes/sb-scripts.test.ts index c54074534afe..35661e88af20 100644 --- a/code/lib/cli/src/automigrate/fixes/sb-scripts.test.ts +++ b/code/lib/cli/src/automigrate/fixes/sb-scripts.test.ts @@ -1,7 +1,7 @@ -import type { JsPackageManager } from '../../js-package-manager'; -import { sbScripts, getStorybookScripts } from './sb-scripts'; +import type { JsPackageManager, PackageJson } from '../../js-package-manager'; +import { getStorybookScripts, sbScripts } from './sb-scripts'; -const checkSbScripts = async ({ packageJson }) => { +const checkSbScripts = async ({ packageJson }: { packageJson: PackageJson }) => { const packageManager = { retrievePackageJson: () => ({ dependencies: {}, devDependencies: {}, ...packageJson }), } as JsPackageManager; diff --git a/code/lib/cli/src/automigrate/fixes/vue3.test.ts b/code/lib/cli/src/automigrate/fixes/vue3.test.ts index 1b935ea87f43..6ca7a23eef61 100644 --- a/code/lib/cli/src/automigrate/fixes/vue3.test.ts +++ b/code/lib/cli/src/automigrate/fixes/vue3.test.ts @@ -1,12 +1,12 @@ /* eslint-disable no-underscore-dangle */ -import path from 'path'; -import type { JsPackageManager } from '../../js-package-manager'; +import * as path from 'path'; +import type { JsPackageManager, PackageJson } from '../../js-package-manager'; import { vue3 } from './vue3'; // eslint-disable-next-line global-require, jest/no-mocks-import jest.mock('fs-extra', () => require('../../../../../__mocks__/fs-extra')); -const checkVue3 = async ({ packageJson, main }) => { +const checkVue3 = async ({ packageJson, main }: { packageJson: PackageJson; main: unknown }) => { // eslint-disable-next-line global-require require('fs-extra').__setMockFiles({ [path.join('.storybook', 'main.js')]: `module.exports = ${JSON.stringify(main)};`, diff --git a/code/lib/cli/src/automigrate/fixes/webpack5.test.ts b/code/lib/cli/src/automigrate/fixes/webpack5.test.ts index 34e3a02e5e5c..c231fa477e4c 100644 --- a/code/lib/cli/src/automigrate/fixes/webpack5.test.ts +++ b/code/lib/cli/src/automigrate/fixes/webpack5.test.ts @@ -1,12 +1,19 @@ /* eslint-disable no-underscore-dangle */ -import path from 'path'; -import type { JsPackageManager } from '../../js-package-manager'; +import * as path from 'path'; +import type { StorybookConfig } from '@storybook/types'; +import type { JsPackageManager, PackageJson } from '../../js-package-manager'; import { webpack5 } from './webpack5'; // eslint-disable-next-line global-require, jest/no-mocks-import jest.mock('fs-extra', () => require('../../../../../__mocks__/fs-extra')); -const checkWebpack5 = async ({ packageJson, main }) => { +const checkWebpack5 = async ({ + packageJson, + main, +}: { + packageJson: PackageJson; + main: Partial; +}) => { // eslint-disable-next-line global-require require('fs-extra').__setMockFiles({ [path.join('.storybook', 'main.js')]: `module.exports = ${JSON.stringify(main)};`, diff --git a/code/lib/cli/src/detect.test.ts b/code/lib/cli/src/detect.test.ts index 5490cf2012d3..597e2fc7818d 100644 --- a/code/lib/cli/src/detect.test.ts +++ b/code/lib/cli/src/detect.test.ts @@ -1,19 +1,14 @@ -import fs from 'fs'; +import * as fs from 'fs'; import { getBowerJson } from './helpers'; -import { isStorybookInstalled, detectFrameworkPreset, detect, detectLanguage } from './detect'; +import { detect, detectFrameworkPreset, detectLanguage, isStorybookInstalled } from './detect'; import { ProjectType, SUPPORTED_RENDERERS, SupportedLanguage } from './project_types'; import type { PackageJsonWithMaybeDeps } from './js-package-manager'; -import { readPackageJson } from './js-package-manager'; jest.mock('./helpers', () => ({ getBowerJson: jest.fn(), })); -jest.mock('./js-package-manager', () => ({ - readPackageJson: jest.fn(), -})); - jest.mock('fs', () => ({ existsSync: jest.fn(), stat: jest.fn(), @@ -285,28 +280,39 @@ const MOCK_FRAMEWORK_FILES: { describe('Detect', () => { it(`should return type HTML if html option is passed`, () => { - (readPackageJson as jest.Mock).mockImplementation(() => true); expect(detect({ dependencies: {} }, { html: true })).toBe(ProjectType.HTML); }); it(`should return type UNDETECTED if neither packageJson or bowerJson exist`, () => { - (readPackageJson as jest.Mock).mockImplementation(() => false); (getBowerJson as jest.Mock).mockImplementation(() => false); expect(detect(undefined)).toBe(ProjectType.UNDETECTED); }); - it(`should return language typescript if the dependency is present`, () => { - expect( - detectLanguage({ - dependencies: { - typescript: '1.0.0', - }, - }) - ).toBe(SupportedLanguage.TYPESCRIPT); + it(`should return language legacy typescript if the dependency is present`, () => { + expect(detectLanguage({ dependencies: { typescript: '1.0.0' } })).toBe( + SupportedLanguage.TYPESCRIPT_LEGACY + ); + }); + + it(`should return language typescript if the dependency is >TS4.9`, () => { + expect(detectLanguage({ dependencies: { typescript: '4.9.1' } })).toBe( + SupportedLanguage.TYPESCRIPT + ); + }); + + it(`should return language typescript if the dependency is =TS4.9`, () => { + expect(detectLanguage({ dependencies: { typescript: '4.9.0' } })).toBe( + SupportedLanguage.TYPESCRIPT + ); + }); + + it(`should return language typescript if the dependency is =TS4.9beta`, () => { + expect(detectLanguage({ dependencies: { typescript: '^4.9.0-beta' } })).toBe( + SupportedLanguage.TYPESCRIPT + ); }); it(`should return language javascript by default`, () => { - (readPackageJson as jest.Mock).mockImplementation(() => true); expect(detectLanguage()).toBe(SupportedLanguage.JAVASCRIPT); }); diff --git a/code/lib/cli/src/detect.ts b/code/lib/cli/src/detect.ts index 2bc9e17d88a3..6896858d1b51 100644 --- a/code/lib/cli/src/detect.ts +++ b/code/lib/cli/src/detect.ts @@ -1,6 +1,7 @@ import path from 'path'; import fs from 'fs'; import findUp from 'find-up'; +import semver from 'semver'; import type { TemplateConfiguration, TemplateMatcher } from './project_types'; import { @@ -12,7 +13,7 @@ import { CoreBuilder, } from './project_types'; import { getBowerJson, paddedLog } from './helpers'; -import type { PackageJson, JsPackageManager, PackageJsonWithMaybeDeps } from './js-package-manager'; +import type { JsPackageManager, PackageJson, PackageJsonWithMaybeDeps } from './js-package-manager'; import { detectNextJS } from './detect-nextjs'; const viteConfigFiles = ['vite.config.ts', 'vite.config.js', 'vite.config.mjs']; @@ -155,8 +156,14 @@ export function detectLanguage(packageJson?: PackageJson) { return language; } - if (hasDependency(packageJson || bowerJson, 'typescript')) { + if ( + hasDependency(packageJson || bowerJson, 'typescript', (version) => + semver.gte(semver.coerce(version), '4.9.0') + ) + ) { language = SupportedLanguage.TYPESCRIPT; + } else if (hasDependency(packageJson || bowerJson, 'typescript')) { + language = SupportedLanguage.TYPESCRIPT_LEGACY; } return language; diff --git a/code/lib/cli/src/dirs.ts b/code/lib/cli/src/dirs.ts index e95e6bb4852d..69a411752360 100644 --- a/code/lib/cli/src/dirs.ts +++ b/code/lib/cli/src/dirs.ts @@ -1,5 +1,12 @@ import { dirname } from 'path'; +import type { SupportedFrameworks, SupportedRenderers } from './project_types'; -export function getBaseDir() { +export function getCliDir() { return dirname(require.resolve('@storybook/cli/package.json')); } + +export function getRendererDir(renderer: SupportedFrameworks | SupportedRenderers) { + return dirname( + require.resolve(`@storybook/${renderer}/package.json`, { paths: [process.cwd()] }) + ); +} diff --git a/code/lib/cli/src/generators/ANGULAR/index.ts b/code/lib/cli/src/generators/ANGULAR/index.ts index 72027a25a08d..83b553310224 100644 --- a/code/lib/cli/src/generators/ANGULAR/index.ts +++ b/code/lib/cli/src/generators/ANGULAR/index.ts @@ -8,7 +8,7 @@ import { getBaseTsConfigName, } from './angular-helpers'; import { writeFileAsJson, copyTemplate } from '../../helpers'; -import { getBaseDir } from '../../dirs'; +import { getCliDir } from '../../dirs'; import { baseGenerator } from '../baseGenerator'; import type { Generator } from '../types'; import { CoreBuilder } from '../../project_types'; @@ -50,7 +50,7 @@ const generator: Generator = async (packageManager, npmOptions, options) => { 'angular' ); - const templateDir = join(getBaseDir(), 'templates', 'angular'); + const templateDir = join(getCliDir(), 'templates', 'angular'); copyTemplate(templateDir); editAngularAppTsConfig(); diff --git a/code/lib/cli/src/generators/AURELIA/index.ts b/code/lib/cli/src/generators/AURELIA/index.ts index 47a0e9cad1c7..bb7c66d4d0be 100644 --- a/code/lib/cli/src/generators/AURELIA/index.ts +++ b/code/lib/cli/src/generators/AURELIA/index.ts @@ -1,6 +1,6 @@ import { join } from 'path'; import { writeFileAsJson, readFileAsJson, copyTemplate } from '../../helpers'; -import { getBaseDir } from '../../dirs'; +import { getCliDir } from '../../dirs'; import { baseGenerator } from '../baseGenerator'; import type { Generator } from '../types'; @@ -25,7 +25,7 @@ const generator: Generator = async (packageManager, npmOptions, options) => { await baseGenerator(packageManager, npmOptions, options, 'aurelia', { extraPackages: ['aurelia'], }); - const templateDir = join(getBaseDir(), 'templates', 'aurelia'); + const templateDir = join(getCliDir(), 'templates', 'aurelia'); copyTemplate(templateDir); }; diff --git a/code/lib/cli/src/generators/REACT_NATIVE/index.ts b/code/lib/cli/src/generators/REACT_NATIVE/index.ts index d74f6971a54b..24aab9afa6cb 100644 --- a/code/lib/cli/src/generators/REACT_NATIVE/index.ts +++ b/code/lib/cli/src/generators/REACT_NATIVE/index.ts @@ -2,7 +2,7 @@ import { join } from 'path'; import chalk from 'chalk'; import shell from 'shelljs'; import { getBabelDependencies, paddedLog, copyTemplate } from '../../helpers'; -import { getBaseDir } from '../../dirs'; +import { getCliDir } from '../../dirs'; import type { JsPackageManager } from '../../js-package-manager'; import type { NpmOptions } from '../../NpmOptions'; @@ -69,7 +69,7 @@ const generator = async ( }); } - const templateDir = join(getBaseDir(), 'templates', 'react-native'); + const templateDir = join(getCliDir(), 'templates', 'react-native'); copyTemplate(templateDir); }; diff --git a/code/lib/cli/src/generators/SERVER/index.ts b/code/lib/cli/src/generators/SERVER/index.ts index 833c0443c15d..8653c25dba25 100755 --- a/code/lib/cli/src/generators/SERVER/index.ts +++ b/code/lib/cli/src/generators/SERVER/index.ts @@ -2,14 +2,14 @@ import { join } from 'path'; import { baseGenerator } from '../baseGenerator'; import type { Generator } from '../types'; import { copyTemplate } from '../../helpers'; -import { getBaseDir } from '../../dirs'; +import { getCliDir } from '../../dirs'; const generator: Generator = async (packageManager, npmOptions, options) => { await baseGenerator(packageManager, npmOptions, options, 'server', { extensions: ['json'], }); - const templateDir = join(getBaseDir(), 'templates', 'server'); + const templateDir = join(getCliDir(), 'templates', 'server'); copyTemplate(templateDir); }; diff --git a/code/lib/cli/src/generators/baseGenerator.ts b/code/lib/cli/src/generators/baseGenerator.ts index 6a8d9060d6a1..193d9114a961 100644 --- a/code/lib/cli/src/generators/baseGenerator.ts +++ b/code/lib/cli/src/generators/baseGenerator.ts @@ -1,3 +1,4 @@ +import path from 'path'; import fse from 'fs-extra'; import { dedent } from 'ts-dedent'; import type { NpmOptions } from '../NpmOptions'; @@ -191,9 +192,11 @@ export async function baseGenerator( await configureMain({ framework: { name: frameworkInclude, options: options.framework || {} }, + docs: { docsPage: true }, addons: pnp ? addons.map(wrapForPnp) : addons, extensions, commonJs, + ...(staticDir ? { staticDirs: [path.join('..', staticDir)] } : null), ...extraMain, ...(type !== 'framework' ? { @@ -206,11 +209,6 @@ export async function baseGenerator( await configurePreview(rendererId); - if (addComponents) { - const templateLocation = hasFrameworkTemplates(framework) ? framework : rendererId; - await copyComponents(templateLocation, language); - } - // FIXME: temporary workaround for https://github.com/storybookjs/storybook/issues/17516 if (frameworkPackages.find((pkg) => pkg.match(/^@storybook\/.*-vite$/))) { const previewHead = dedent` @@ -239,11 +237,15 @@ export async function baseGenerator( if (addScripts) { packageManager.addStorybookCommandInScripts({ port: 6006, - staticFolder: staticDir, }); } if (addESLint) { packageManager.addESLintConfig(); } + + if (addComponents) { + const templateLocation = hasFrameworkTemplates(framework) ? framework : rendererId; + await copyComponents(templateLocation, language); + } } diff --git a/code/lib/cli/src/generators/configure.ts b/code/lib/cli/src/generators/configure.ts index a95d6c89b510..a820d0a3f5fe 100644 --- a/code/lib/cli/src/generators/configure.ts +++ b/code/lib/cli/src/generators/configure.ts @@ -6,13 +6,14 @@ interface ConfigureMainOptions { addons: string[]; extensions?: string[]; commonJs?: boolean; + staticDirs?: string[]; /** * Extra values for main.js * * In order to provide non-serializable data like functions, you can use * { value: '%%yourFunctionCall()%%' } * - * '%% and %%' will be replace. + * '%% and %%' will be replaced. * */ [key: string]: any; diff --git a/code/lib/cli/src/helpers.test.ts b/code/lib/cli/src/helpers.test.ts index 10218ba0ba53..dbc6760c0809 100644 --- a/code/lib/cli/src/helpers.test.ts +++ b/code/lib/cli/src/helpers.test.ts @@ -9,7 +9,8 @@ jest.mock('fs', () => ({ existsSync: jest.fn(), })); jest.mock('./dirs', () => ({ - getBaseDir: () => '', + getRendererDir: (renderer) => `@storybook/${renderer}`, + getCliDir: () => '@storybook/cli', })); jest.mock('fs-extra', () => ({ @@ -68,27 +69,31 @@ describe('Helpers', () => { `( `should copy $expected when folder $exists exists for language $language`, async ({ language, exists, expected }) => { - const componentsDirectory = exists.map((folder: string) => `rendererAssets/react/${folder}`); - const expectedDirectory = `rendererAssets/react${expected}`; - (fse.pathExists as jest.Mock).mockImplementation((filePath) => { - return componentsDirectory.includes(filePath) || filePath === 'rendererAssets/react'; - }); + const componentsDirectory = exists.map( + (folder: string) => `@storybook/react/template/cli/${folder}` + ); + (fse.pathExists as jest.Mock).mockImplementation( + (filePath) => + componentsDirectory.includes(filePath) || filePath === '@storybook/react/template/cli' + ); await helpers.copyComponents('react', language); const copySpy = jest.spyOn(fse, 'copy'); expect(copySpy).toHaveBeenNthCalledWith( 1, - 'rendererAssets/common', + '@storybook/cli/rendererAssets/common', './stories', expect.anything() ); + + const expectedDirectory = `@storybook/react/template/cli${expected}`; expect(copySpy).toHaveBeenNthCalledWith(2, expectedDirectory, './stories', expect.anything()); } ); it(`should copy to src folder when exists`, async () => { (fse.pathExists as jest.Mock).mockImplementation((filePath) => { - return filePath === 'rendererAssets/react' || filePath === './src'; + return filePath === '@storybook/react/template/cli' || filePath === './src'; }); await helpers.copyComponents('react', SupportedLanguage.JAVASCRIPT); expect(fse.copy).toHaveBeenCalledWith(expect.anything(), './src/stories', expect.anything()); @@ -96,7 +101,7 @@ describe('Helpers', () => { it(`should copy to root folder when src doesn't exist`, async () => { (fse.pathExists as jest.Mock).mockImplementation((filePath) => { - return filePath === 'rendererAssets/react'; + return filePath === '@storybook/react/template/cli'; }); await helpers.copyComponents('react', SupportedLanguage.JAVASCRIPT); expect(fse.copy).toHaveBeenCalledWith(expect.anything(), './stories', expect.anything()); diff --git a/code/lib/cli/src/helpers.ts b/code/lib/cli/src/helpers.ts index f353c6ba0f40..00ebb767831f 100644 --- a/code/lib/cli/src/helpers.ts +++ b/code/lib/cli/src/helpers.ts @@ -6,14 +6,14 @@ import chalk from 'chalk'; import { satisfies } from 'semver'; import stripJsonComments from 'strip-json-comments'; -import type { SupportedFrameworks, SupportedRenderers, SupportedLanguage } from './project_types'; - +import { getCliDir, getRendererDir } from './dirs'; import type { JsPackageManager, PackageJson, PackageJsonWithDepsAndDevDeps, } from './js-package-manager'; -import { getBaseDir } from './dirs'; +import type { SupportedFrameworks, SupportedRenderers } from './project_types'; +import { SupportedLanguage } from './project_types'; import storybookMonorepoPackages from './versions'; const logger = console; @@ -191,23 +191,35 @@ export async function copyComponents( language: SupportedLanguage ) { const languageFolderMapping: Record = { - javascript: 'js', - typescript: 'ts', + [SupportedLanguage.JAVASCRIPT]: 'js', + [SupportedLanguage.TYPESCRIPT]: 'ts', + [SupportedLanguage.TYPESCRIPT_LEGACY]: 'ts-legacy', }; const componentsPath = async () => { - const baseDir = getBaseDir(); - const assetsRoot = join(baseDir, 'rendererAssets'); - const assetsRenderer = join(assetsRoot, renderer); - const assetsLanguage = join(assetsRenderer, languageFolderMapping[language]); + const baseDir = getRendererDir(renderer); + const assetsDir = join(baseDir, 'template/cli'); + const assetsLanguage = join(assetsDir, languageFolderMapping[language]); + const assetsJS = join(assetsDir, languageFolderMapping[SupportedLanguage.JAVASCRIPT]); + const assetsTSLegacy = join( + assetsDir, + languageFolderMapping[SupportedLanguage.TYPESCRIPT_LEGACY] + ); + const assetsTS = join(assetsDir, languageFolderMapping[SupportedLanguage.TYPESCRIPT]); + if (await fse.pathExists(assetsLanguage)) { return assetsLanguage; } - const assetsJS = join(assetsRenderer, languageFolderMapping.javascript); + if (language === SupportedLanguage.TYPESCRIPT && (await fse.pathExists(assetsTSLegacy))) { + return assetsTSLegacy; + } + if (language === SupportedLanguage.TYPESCRIPT_LEGACY && (await fse.pathExists(assetsTS))) { + return assetsTS; + } if (await fse.pathExists(assetsJS)) { return assetsJS; } - if (await fse.pathExists(assetsRenderer)) { - return assetsRenderer; + if (await fse.pathExists(assetsDir)) { + return assetsDir; } throw new Error(`Unsupported renderer: ${renderer}`); }; @@ -220,7 +232,7 @@ export async function copyComponents( }; const destinationPath = await targetPath(); - await fse.copy(join(getBaseDir(), 'rendererAssets/common'), destinationPath, { overwrite: true }); + await fse.copy(join(getCliDir(), 'rendererAssets/common'), destinationPath, { overwrite: true }); await fse.copy(await componentsPath(), destinationPath, { overwrite: true }); } diff --git a/code/lib/cli/src/js-package-manager/JsPackageManager.ts b/code/lib/cli/src/js-package-manager/JsPackageManager.ts index bb8739fd7cbe..4e4922036a03 100644 --- a/code/lib/cli/src/js-package-manager/JsPackageManager.ts +++ b/code/lib/cli/src/js-package-manager/JsPackageManager.ts @@ -304,19 +304,11 @@ export abstract class JsPackageManager { return versions.reverse().find((version) => satisfies(version, constraint)); } - public addStorybookCommandInScripts(options?: { - port: number; - staticFolder?: string; - preCommand?: string; - }) { + public addStorybookCommandInScripts(options?: { port: number; preCommand?: string }) { const sbPort = options?.port ?? 6006; - const storybookCmd = options?.staticFolder - ? `storybook dev -p ${sbPort} -s ${options.staticFolder}` - : `storybook dev -p ${sbPort}`; + const storybookCmd = `storybook dev -p ${sbPort}`; - const buildStorybookCmd = options?.staticFolder - ? `storybook build -s ${options.staticFolder}` - : `storybook build`; + const buildStorybookCmd = `storybook build`; const preCommand = options?.preCommand ? this.getRunCommand(options.preCommand) : undefined; this.addScripts({ diff --git a/code/lib/cli/src/js-package-manager/NPMProxy.test.ts b/code/lib/cli/src/js-package-manager/NPMProxy.test.ts index 9350b0eae96c..b622e2caaa80 100644 --- a/code/lib/cli/src/js-package-manager/NPMProxy.test.ts +++ b/code/lib/cli/src/js-package-manager/NPMProxy.test.ts @@ -226,6 +226,8 @@ describe('NPM Proxy', () => { jest.spyOn(npmProxy, 'retrievePackageJson').mockImplementation( jest.fn(() => ({ + dependencies: {}, + devDependencies: {}, overrides: { bar: 'x.x.x', }, @@ -238,6 +240,8 @@ describe('NPM Proxy', () => { npmProxy.addPackageResolutions(versions); expect(writePackageSpy).toHaveBeenCalledWith({ + dependencies: {}, + devDependencies: {}, overrides: { ...versions, bar: 'x.x.x', diff --git a/code/lib/cli/src/js-package-manager/Yarn1Proxy.test.ts b/code/lib/cli/src/js-package-manager/Yarn1Proxy.test.ts index c9087095df63..9128506f8429 100644 --- a/code/lib/cli/src/js-package-manager/Yarn1Proxy.test.ts +++ b/code/lib/cli/src/js-package-manager/Yarn1Proxy.test.ts @@ -149,6 +149,8 @@ describe('Yarn 1 Proxy', () => { jest.spyOn(yarn1Proxy, 'retrievePackageJson').mockImplementation( jest.fn(() => ({ + dependencies: {}, + devDependencies: {}, resolutions: { bar: 'x.x.x', }, @@ -161,6 +163,8 @@ describe('Yarn 1 Proxy', () => { yarn1Proxy.addPackageResolutions(versions); expect(writePackageSpy).toHaveBeenCalledWith({ + dependencies: {}, + devDependencies: {}, resolutions: { ...versions, bar: 'x.x.x', diff --git a/code/lib/cli/src/js-package-manager/Yarn2Proxy.test.ts b/code/lib/cli/src/js-package-manager/Yarn2Proxy.test.ts index 11d3368993b2..581c48d9d52e 100644 --- a/code/lib/cli/src/js-package-manager/Yarn2Proxy.test.ts +++ b/code/lib/cli/src/js-package-manager/Yarn2Proxy.test.ts @@ -155,6 +155,8 @@ describe('Yarn 2 Proxy', () => { jest.spyOn(yarn2Proxy, 'retrievePackageJson').mockImplementation( jest.fn(() => ({ + dependencies: {}, + devDependencies: {}, resolutions: { bar: 'x.x.x', }, @@ -167,6 +169,8 @@ describe('Yarn 2 Proxy', () => { yarn2Proxy.addPackageResolutions(versions); expect(writePackageSpy).toHaveBeenCalledWith({ + dependencies: {}, + devDependencies: {}, resolutions: { ...versions, bar: 'x.x.x', diff --git a/code/lib/cli/src/project_types.ts b/code/lib/cli/src/project_types.ts index f24334a062e3..3d99bb07a666 100644 --- a/code/lib/cli/src/project_types.ts +++ b/code/lib/cli/src/project_types.ts @@ -1,4 +1,4 @@ -import { validRange, minVersion } from 'semver'; +import { minVersion, validRange } from 'semver'; function ltMajor(versionRange: string, major: number) { // Uses validRange to avoid a throw from minVersion if an invalid range gets passed @@ -93,6 +93,7 @@ export type Builder = CoreBuilder | (string & {}); export enum SupportedLanguage { JAVASCRIPT = 'javascript', + TYPESCRIPT_LEGACY = 'typescript-legacy', TYPESCRIPT = 'typescript', } diff --git a/code/lib/cli/src/repro-templates.ts b/code/lib/cli/src/repro-templates.ts index bb4ac7b60ce0..fa1007b76fe9 100644 --- a/code/lib/cli/src/repro-templates.ts +++ b/code/lib/cli/src/repro-templates.ts @@ -259,8 +259,6 @@ const vueCliTemplates = { skipTasks: [ // Re-enable once https://github.com/storybookjs/storybook/issues/19351 is fixed. 'smoke-test', - // Re-enable once https://github.com/storybookjs/storybook/issues/19453 is fixed. - 'test-runner', ], expected: { framework: '@storybook/vue3-webpack5', @@ -276,8 +274,6 @@ const vueCliTemplates = { skipTasks: [ // Re-enable once https://github.com/storybookjs/storybook/issues/19351 is fixed. 'smoke-test', - // Re-enable once https://github.com/storybookjs/storybook/issues/19453 is fixed. - 'test-runner', ], expected: { framework: '@storybook/vue-webpack5', diff --git a/code/lib/cli/src/versions.ts b/code/lib/cli/src/versions.ts index 6fc9753bc062..efebad6dd65a 100644 --- a/code/lib/cli/src/versions.ts +++ b/code/lib/cli/src/versions.ts @@ -1,85 +1,85 @@ // auto generated file, do not edit export default { - '@storybook/addon-a11y': '7.0.0-alpha.45', - '@storybook/addon-actions': '7.0.0-alpha.45', - '@storybook/addon-backgrounds': '7.0.0-alpha.45', - '@storybook/addon-controls': '7.0.0-alpha.45', - '@storybook/addon-docs': '7.0.0-alpha.45', - '@storybook/addon-essentials': '7.0.0-alpha.45', - '@storybook/addon-highlight': '7.0.0-alpha.45', - '@storybook/addon-interactions': '7.0.0-alpha.45', - '@storybook/addon-jest': '7.0.0-alpha.45', - '@storybook/addon-links': '7.0.0-alpha.45', - '@storybook/addon-measure': '7.0.0-alpha.45', - '@storybook/addon-outline': '7.0.0-alpha.45', - '@storybook/addon-storyshots': '7.0.0-alpha.45', - '@storybook/addon-storyshots-puppeteer': '7.0.0-alpha.45', - '@storybook/addon-storysource': '7.0.0-alpha.45', - '@storybook/addon-toolbars': '7.0.0-alpha.45', - '@storybook/addon-viewport': '7.0.0-alpha.45', - '@storybook/addons': '7.0.0-alpha.45', - '@storybook/angular': '7.0.0-alpha.45', - '@storybook/api': '7.0.0-alpha.45', - '@storybook/blocks': '7.0.0-alpha.45', - '@storybook/builder-manager': '7.0.0-alpha.45', - '@storybook/builder-vite': '7.0.0-alpha.45', - '@storybook/builder-webpack5': '7.0.0-alpha.45', - '@storybook/channel-postmessage': '7.0.0-alpha.45', - '@storybook/channel-websocket': '7.0.0-alpha.45', - '@storybook/channels': '7.0.0-alpha.45', - '@storybook/cli': '7.0.0-alpha.45', - '@storybook/client-api': '7.0.0-alpha.45', - '@storybook/client-logger': '7.0.0-alpha.45', - '@storybook/codemod': '7.0.0-alpha.45', - '@storybook/components': '7.0.0-alpha.45', - '@storybook/core-client': '7.0.0-alpha.45', - '@storybook/core-common': '7.0.0-alpha.45', - '@storybook/core-events': '7.0.0-alpha.45', - '@storybook/core-server': '7.0.0-alpha.45', - '@storybook/core-webpack': '7.0.0-alpha.45', - '@storybook/csf-tools': '7.0.0-alpha.45', - '@storybook/docs-tools': '7.0.0-alpha.45', - '@storybook/ember': '7.0.0-alpha.45', - '@storybook/html': '7.0.0-alpha.45', - '@storybook/html-webpack5': '7.0.0-alpha.45', - '@storybook/instrumenter': '7.0.0-alpha.45', - '@storybook/nextjs': '7.0.0-alpha.45', - '@storybook/node-logger': '7.0.0-alpha.45', - '@storybook/postinstall': '7.0.0-alpha.45', - '@storybook/preact': '7.0.0-alpha.45', - '@storybook/preact-webpack5': '7.0.0-alpha.45', - '@storybook/preset-html-webpack': '7.0.0-alpha.45', - '@storybook/preset-preact-webpack': '7.0.0-alpha.45', - '@storybook/preset-react-webpack': '7.0.0-alpha.45', - '@storybook/preset-server-webpack': '7.0.0-alpha.45', - '@storybook/preset-svelte-webpack': '7.0.0-alpha.45', - '@storybook/preset-vue-webpack': '7.0.0-alpha.45', - '@storybook/preset-vue3-webpack': '7.0.0-alpha.45', - '@storybook/preset-web-components-webpack': '7.0.0-alpha.45', - '@storybook/preview-web': '7.0.0-alpha.45', - '@storybook/react': '7.0.0-alpha.45', - '@storybook/react-vite': '7.0.0-alpha.45', - '@storybook/react-webpack5': '7.0.0-alpha.45', - '@storybook/router': '7.0.0-alpha.45', - '@storybook/server': '7.0.0-alpha.45', - '@storybook/server-webpack5': '7.0.0-alpha.45', - '@storybook/source-loader': '7.0.0-alpha.45', - '@storybook/store': '7.0.0-alpha.45', - '@storybook/svelte': '7.0.0-alpha.45', - '@storybook/svelte-vite': '7.0.0-alpha.45', - '@storybook/svelte-webpack5': '7.0.0-alpha.45', - '@storybook/telemetry': '7.0.0-alpha.45', - '@storybook/theming': '7.0.0-alpha.45', - '@storybook/manager': '7.0.0-alpha.45', - '@storybook/vue': '7.0.0-alpha.45', - '@storybook/vue-vite': '7.0.0-alpha.45', - '@storybook/vue-webpack5': '7.0.0-alpha.45', - '@storybook/vue3': '7.0.0-alpha.45', - '@storybook/vue3-vite': '7.0.0-alpha.45', - '@storybook/vue3-webpack5': '7.0.0-alpha.45', - '@storybook/web-components': '7.0.0-alpha.45', - '@storybook/web-components-webpack5': '7.0.0-alpha.45', - '@storybook/web-components-vite': '7.0.0-alpha.45', - sb: '7.0.0-alpha.45', - storybook: '7.0.0-alpha.45', + '@storybook/addon-a11y': '7.0.0-alpha.47', + '@storybook/addon-actions': '7.0.0-alpha.47', + '@storybook/addon-backgrounds': '7.0.0-alpha.47', + '@storybook/addon-controls': '7.0.0-alpha.47', + '@storybook/addon-docs': '7.0.0-alpha.47', + '@storybook/addon-essentials': '7.0.0-alpha.47', + '@storybook/addon-highlight': '7.0.0-alpha.47', + '@storybook/addon-interactions': '7.0.0-alpha.47', + '@storybook/addon-jest': '7.0.0-alpha.47', + '@storybook/addon-links': '7.0.0-alpha.47', + '@storybook/addon-measure': '7.0.0-alpha.47', + '@storybook/addon-outline': '7.0.0-alpha.47', + '@storybook/addon-storyshots': '7.0.0-alpha.47', + '@storybook/addon-storyshots-puppeteer': '7.0.0-alpha.47', + '@storybook/addon-storysource': '7.0.0-alpha.47', + '@storybook/addon-toolbars': '7.0.0-alpha.47', + '@storybook/addon-viewport': '7.0.0-alpha.47', + '@storybook/addons': '7.0.0-alpha.47', + '@storybook/angular': '7.0.0-alpha.47', + '@storybook/api': '7.0.0-alpha.47', + '@storybook/blocks': '7.0.0-alpha.47', + '@storybook/builder-manager': '7.0.0-alpha.47', + '@storybook/builder-vite': '7.0.0-alpha.47', + '@storybook/builder-webpack5': '7.0.0-alpha.47', + '@storybook/channel-postmessage': '7.0.0-alpha.47', + '@storybook/channel-websocket': '7.0.0-alpha.47', + '@storybook/channels': '7.0.0-alpha.47', + '@storybook/cli': '7.0.0-alpha.47', + '@storybook/client-api': '7.0.0-alpha.47', + '@storybook/client-logger': '7.0.0-alpha.47', + '@storybook/codemod': '7.0.0-alpha.47', + '@storybook/components': '7.0.0-alpha.47', + '@storybook/core-client': '7.0.0-alpha.47', + '@storybook/core-common': '7.0.0-alpha.47', + '@storybook/core-events': '7.0.0-alpha.47', + '@storybook/core-server': '7.0.0-alpha.47', + '@storybook/core-webpack': '7.0.0-alpha.47', + '@storybook/csf-tools': '7.0.0-alpha.47', + '@storybook/docs-tools': '7.0.0-alpha.47', + '@storybook/ember': '7.0.0-alpha.47', + '@storybook/html': '7.0.0-alpha.47', + '@storybook/html-webpack5': '7.0.0-alpha.47', + '@storybook/instrumenter': '7.0.0-alpha.47', + '@storybook/nextjs': '7.0.0-alpha.47', + '@storybook/node-logger': '7.0.0-alpha.47', + '@storybook/postinstall': '7.0.0-alpha.47', + '@storybook/preact': '7.0.0-alpha.47', + '@storybook/preact-webpack5': '7.0.0-alpha.47', + '@storybook/preset-html-webpack': '7.0.0-alpha.47', + '@storybook/preset-preact-webpack': '7.0.0-alpha.47', + '@storybook/preset-react-webpack': '7.0.0-alpha.47', + '@storybook/preset-server-webpack': '7.0.0-alpha.47', + '@storybook/preset-svelte-webpack': '7.0.0-alpha.47', + '@storybook/preset-vue-webpack': '7.0.0-alpha.47', + '@storybook/preset-vue3-webpack': '7.0.0-alpha.47', + '@storybook/preset-web-components-webpack': '7.0.0-alpha.47', + '@storybook/preview-web': '7.0.0-alpha.47', + '@storybook/react': '7.0.0-alpha.47', + '@storybook/react-vite': '7.0.0-alpha.47', + '@storybook/react-webpack5': '7.0.0-alpha.47', + '@storybook/router': '7.0.0-alpha.47', + '@storybook/server': '7.0.0-alpha.47', + '@storybook/server-webpack5': '7.0.0-alpha.47', + '@storybook/source-loader': '7.0.0-alpha.47', + '@storybook/store': '7.0.0-alpha.47', + '@storybook/svelte': '7.0.0-alpha.47', + '@storybook/svelte-vite': '7.0.0-alpha.47', + '@storybook/svelte-webpack5': '7.0.0-alpha.47', + '@storybook/telemetry': '7.0.0-alpha.47', + '@storybook/theming': '7.0.0-alpha.47', + '@storybook/manager': '7.0.0-alpha.47', + '@storybook/vue': '7.0.0-alpha.47', + '@storybook/vue-vite': '7.0.0-alpha.47', + '@storybook/vue-webpack5': '7.0.0-alpha.47', + '@storybook/vue3': '7.0.0-alpha.47', + '@storybook/vue3-vite': '7.0.0-alpha.47', + '@storybook/vue3-webpack5': '7.0.0-alpha.47', + '@storybook/web-components': '7.0.0-alpha.47', + '@storybook/web-components-webpack5': '7.0.0-alpha.47', + '@storybook/web-components-vite': '7.0.0-alpha.47', + sb: '7.0.0-alpha.47', + storybook: '7.0.0-alpha.47', }; diff --git a/code/lib/cli/test/helpers.js b/code/lib/cli/test/helpers.js index a3a2d9a23a5b..fc2f9fdbe24e 100644 --- a/code/lib/cli/test/helpers.js +++ b/code/lib/cli/test/helpers.js @@ -10,7 +10,6 @@ const CLI_PATH = path.join(__dirname, '..', 'bin'); * * @returns {Object} */ -const run = (args, options = {}) => - spawnSync('node', [CLI_PATH].concat(args), options); +const run = (args, options = {}) => spawnSync('node', [CLI_PATH].concat(args), options); module.exports = run; diff --git a/code/lib/client-api/package.json b/code/lib/client-api/package.json index 5fdf9e021f04..b0a7d82c24e6 100644 --- a/code/lib/client-api/package.json +++ b/code/lib/client-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/client-api", - "version": "7.0.0-alpha.45", + "version": "7.0.0-alpha.47", "description": "Storybook Client API", "keywords": [ "storybook" @@ -42,11 +42,11 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/addons": "7.0.0-alpha.45", - "@storybook/client-logger": "7.0.0-alpha.45", + "@storybook/addons": "7.0.0-alpha.47", + "@storybook/client-logger": "7.0.0-alpha.47", "@storybook/csf": "next", - "@storybook/store": "7.0.0-alpha.45", - "@storybook/types": "7.0.0-alpha.45", + "@storybook/store": "7.0.0-alpha.47", + "@storybook/types": "7.0.0-alpha.47", "@types/qs": "^6.9.5", "@types/webpack-env": "^1.16.4", "global": "^4.4.0", @@ -56,7 +56,7 @@ "util-deprecate": "^1.0.2" }, "devDependencies": { - "@storybook/core-common": "7.0.0-alpha.45", + "@storybook/core-common": "7.0.0-alpha.47", "typescript": "~4.6.3" }, "peerDependencies": { @@ -71,5 +71,5 @@ "./src/index.ts" ] }, - "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532" + "gitHead": "1c706a4a778831e012343c905f86225fa71491a7" } diff --git a/code/lib/client-logger/package.json b/code/lib/client-logger/package.json index 64cac7a4839a..8f12654654ed 100644 --- a/code/lib/client-logger/package.json +++ b/code/lib/client-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/client-logger", - "version": "7.0.0-alpha.45", + "version": "7.0.0-alpha.47", "description": "", "keywords": [ "storybook" @@ -55,5 +55,5 @@ "./src/index.ts" ] }, - "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532" + "gitHead": "1c706a4a778831e012343c905f86225fa71491a7" } diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index fc3e6aec3344..3d9a473cd683 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/codemod", - "version": "7.0.0-alpha.45", + "version": "7.0.0-alpha.47", "description": "A collection of codemod scripts written with JSCodeshift", "keywords": [ "storybook" @@ -39,9 +39,9 @@ "dependencies": { "@babel/types": "^7.12.11", "@storybook/csf": "next", - "@storybook/csf-tools": "7.0.0-alpha.45", - "@storybook/node-logger": "7.0.0-alpha.45", - "@storybook/types": "7.0.0-alpha.45", + "@storybook/csf-tools": "7.0.0-alpha.47", + "@storybook/node-logger": "7.0.0-alpha.47", + "@storybook/types": "7.0.0-alpha.47", "cross-spawn": "^7.0.3", "globby": "^11.0.2", "jscodeshift": "^0.13.1", @@ -64,5 +64,5 @@ "./src/index.js" ] }, - "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532" + "gitHead": "1c706a4a778831e012343c905f86225fa71491a7" } diff --git a/code/lib/core-client/package.json b/code/lib/core-client/package.json index dd469cc0fdfb..838bd92a8133 100644 --- a/code/lib/core-client/package.json +++ b/code/lib/core-client/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-client", - "version": "7.0.0-alpha.45", + "version": "7.0.0-alpha.47", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" @@ -35,17 +35,17 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/addons": "7.0.0-alpha.45", - "@storybook/channel-postmessage": "7.0.0-alpha.45", - "@storybook/channel-websocket": "7.0.0-alpha.45", - "@storybook/channels": "7.0.0-alpha.45", - "@storybook/client-api": "7.0.0-alpha.45", - "@storybook/client-logger": "7.0.0-alpha.45", - "@storybook/core-events": "7.0.0-alpha.45", + "@storybook/addons": "7.0.0-alpha.47", + "@storybook/channel-postmessage": "7.0.0-alpha.47", + "@storybook/channel-websocket": "7.0.0-alpha.47", + "@storybook/channels": "7.0.0-alpha.47", + "@storybook/client-api": "7.0.0-alpha.47", + "@storybook/client-logger": "7.0.0-alpha.47", + "@storybook/core-events": "7.0.0-alpha.47", "@storybook/csf": "next", - "@storybook/preview-web": "7.0.0-alpha.45", - "@storybook/store": "7.0.0-alpha.45", - "@storybook/types": "7.0.0-alpha.45", + "@storybook/preview-web": "7.0.0-alpha.47", + "@storybook/store": "7.0.0-alpha.47", + "@storybook/types": "7.0.0-alpha.47", "global": "^4.4.0", "util-deprecate": "^1.0.2" }, @@ -65,5 +65,5 @@ "./src/index.ts" ] }, - "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532" + "gitHead": "1c706a4a778831e012343c905f86225fa71491a7" } diff --git a/code/lib/core-client/src/PreviewWeb.mockdata.ts b/code/lib/core-client/src/PreviewWeb.mockdata.ts new file mode 100644 index 000000000000..43d1ca0889da --- /dev/null +++ b/code/lib/core-client/src/PreviewWeb.mockdata.ts @@ -0,0 +1,200 @@ +/// ; + +import { EventEmitter } from 'events'; +import { + DOCS_RENDERED, + STORY_ERRORED, + STORY_MISSING, + STORY_RENDERED, + STORY_RENDER_PHASE_CHANGED, + STORY_THREW_EXCEPTION, +} from '@storybook/core-events'; + +import type { Store_StoryIndex, Store_TeardownRenderToDOM } from '@storybook/types'; + +export type RenderPhase = + | 'preparing' + | 'loading' + | 'rendering' + | 'playing' + | 'played' + | 'completed' + | 'aborted' + | 'errored'; + +export const componentOneExports = { + default: { + title: 'Component One', + argTypes: { + foo: { type: { name: 'string' } }, + }, + loaders: [jest.fn()], + parameters: { + docs: { page: jest.fn(), container: jest.fn() }, + }, + }, + a: { args: { foo: 'a' }, play: jest.fn() }, + b: { args: { foo: 'b' }, play: jest.fn() }, +}; +export const componentTwoExports = { + default: { title: 'Component Two' }, + c: { args: { foo: 'c' } }, +}; +export const standaloneDocsExports = { + default: jest.fn(), +}; +// If a second file defines stories for componentOne +export const extraComponentOneExports = { + default: { + title: 'Component One', + parameters: { + docs: { page: jest.fn() }, + }, + }, + e: {}, +}; +export const importFn = jest.fn( + async (path: string) => + ({ + './src/ComponentOne.stories.js': componentOneExports, + './src/ComponentTwo.stories.js': componentTwoExports, + './src/Introduction.mdx': standaloneDocsExports, + './src/ExtraComponentOne.stories.js': extraComponentOneExports, + }[path]) +); + +export const docsRenderer = { + render: jest.fn().mockImplementation((context, parameters, element, cb) => cb()), + unmount: jest.fn(), +}; +export const teardownRenderToDOM: jest.Mock = jest.fn(); +export const projectAnnotations = { + globals: { a: 'b' }, + globalTypes: {}, + decorators: [jest.fn((s) => s())], + render: jest.fn(), + renderToDOM: jest.fn().mockReturnValue(teardownRenderToDOM), + parameters: { docs: { renderer: () => docsRenderer } }, +}; +export const getProjectAnnotations = jest.fn(() => projectAnnotations as any); + +export const storyIndex: Store_StoryIndex = { + v: 4, + entries: { + 'component-one--docs': { + type: 'docs', + id: 'component-one--docs', + title: 'Component One', + name: 'Docs', + importPath: './src/ComponentOne.stories.js', + storiesImports: ['./src/ExtraComponentOne.stories.js'], + standalone: false, + }, + 'component-one--a': { + type: 'story', + id: 'component-one--a', + title: 'Component One', + name: 'A', + importPath: './src/ComponentOne.stories.js', + }, + 'component-one--b': { + type: 'story', + id: 'component-one--b', + title: 'Component One', + name: 'B', + importPath: './src/ComponentOne.stories.js', + }, + 'component-one--e': { + type: 'story', + id: 'component-one--e', + title: 'Component One', + name: 'E', + importPath: './src/ExtraComponentOne.stories.js', + }, + 'component-two--docs': { + type: 'docs', + id: 'component-two--docs', + title: 'Component Two', + name: 'Docs', + importPath: './src/ComponentTwo.stories.js', + storiesImports: [], + standalone: false, + }, + 'component-two--c': { + type: 'story', + id: 'component-two--c', + title: 'Component Two', + name: 'C', + importPath: './src/ComponentTwo.stories.js', + }, + 'introduction--docs': { + type: 'docs', + id: 'introduction--docs', + title: 'Introduction', + name: 'Docs', + importPath: './src/Introduction.mdx', + storiesImports: ['./src/ComponentTwo.stories.js'], + standalone: true, + }, + }, +}; +export const getStoryIndex = () => storyIndex; + +export const emitter = new EventEmitter(); +export const mockChannel = { + on: emitter.on.bind(emitter), + off: emitter.off.bind(emitter), + removeListener: emitter.off.bind(emitter), + emit: jest.fn(emitter.emit.bind(emitter)), + // emit: emitter.emit.bind(emitter), +}; + +export const waitForEvents = ( + events: string[], + predicate: (...args: any[]) => boolean = () => true, + debugLabel?: string +) => { + // We've already emitted a render event. NOTE if you want to test a second call, + // ensure you call `mockChannel.emit.mockClear()` before `waitFor...` + if ( + mockChannel.emit.mock.calls.find( + (call: string[]) => events.includes(call[0]) && predicate(...call.slice(1)) + ) + ) { + return Promise.resolve(null); + } + + return new Promise((resolve, reject) => { + const listener = (...args: any[]) => { + if (!predicate(...args)) return; + events.forEach((event) => mockChannel.off(event, listener)); + resolve(null); + }; + events.forEach((event) => mockChannel.on(event, listener)); + + // Don't wait too long + waitForQuiescence().then(() => + reject(new Error(`Event was not emitted in time: ${debugLabel || events}`)) + ); + }); +}; + +// The functions on the preview that trigger rendering don't wait for +// the async parts, so we need to listen for the "done" events +export const waitForRender = () => + waitForEvents([ + STORY_RENDERED, + DOCS_RENDERED, + STORY_THREW_EXCEPTION, + STORY_ERRORED, + STORY_MISSING, + ]); + +export const waitForRenderPhase = (phase: RenderPhase) => { + const label = `${STORY_RENDER_PHASE_CHANGED} to ${phase}`; + return waitForEvents([STORY_RENDER_PHASE_CHANGED], ({ newPhase }) => newPhase === phase, label); +}; + +// A little trick to ensure that we always call the real `setTimeout` even when timers are mocked +const realSetTimeout = setTimeout; +export const waitForQuiescence = async () => new Promise((r) => realSetTimeout(r, 100)); diff --git a/code/lib/core-client/src/start.test.ts b/code/lib/core-client/src/start.test.ts index 83c7bb4e673d..8c3092d147ea 100644 --- a/code/lib/core-client/src/start.test.ts +++ b/code/lib/core-client/src/start.test.ts @@ -1,27 +1,21 @@ /* global window */ import { STORY_RENDERED, STORY_UNCHANGED, SET_INDEX } from '@storybook/core-events'; +import type { Store_ModuleExports, Path, Loadable } from '@storybook/types'; +import { setGlobalRender } from '@storybook/client-api'; +import global from 'global'; import { waitForRender, waitForEvents, waitForQuiescence, emitter, mockChannel, -} from '@storybook/preview-web/dist/cjs/PreviewWeb.mockdata'; -// @ts-expect-error (Converted from ts-ignore) -import { WebView } from '@storybook/preview-web/dist/cjs/WebView'; -import type { Store_ModuleExports, Path, Loadable } from '@storybook/types'; -import { setGlobalRender } from '@storybook/client-api'; -import global from 'global'; +} from './PreviewWeb.mockdata'; import { start as realStart } from './start'; -jest.mock('@storybook/preview-web/dist/cjs/WebView'); -jest.spyOn(WebView.prototype, 'prepareForDocs').mockReturnValue('docs-root'); -jest.spyOn(WebView.prototype, 'prepareForStory').mockReturnValue('story-root'); - jest.mock('global', () => ({ - // @ts-expect-error (Converted from ts-ignore) + // @ts-expect-error (jest is not happy with this) ...jest.requireActual('global'), history: { replaceState: jest.fn() }, document: { @@ -51,6 +45,28 @@ jest.mock('@storybook/store', () => { }; }); +jest.mock('@storybook/preview-web', () => { + const actualPreviewWeb = jest.requireActual('@storybook/preview-web'); + + class OverloadPreviewWeb extends actualPreviewWeb.PreviewWeb { + constructor() { + super(); + + this.view = { + ...Object.fromEntries( + Object.getOwnPropertyNames(this.view.constructor.prototype).map((key) => [key, jest.fn()]) + ), + prepareForDocs: jest.fn().mockReturnValue('docs-root'), + prepareForStory: jest.fn().mockReturnValue('story-root'), + }; + } + } + return { + ...actualPreviewWeb, + PreviewWeb: OverloadPreviewWeb, + }; +}); + beforeEach(() => { mockChannel.emit.mockClear(); // Preview doesn't clean itself up as it isn't designed to ever be stopped :shrug: @@ -105,6 +121,7 @@ describe('start', () => { }); await waitForRender(); + expect(mockChannel.emit.mock.calls.find((call: [string, any]) => call[0] === SET_INDEX)[1]) .toMatchInlineSnapshot(` Object { @@ -261,7 +278,7 @@ describe('start', () => { expect(mockChannel.emit).toHaveBeenCalledWith(STORY_RENDERED, 'component-a--default'); const storiesOfData = mockChannel.emit.mock.calls.find( - (call: [string, any]) => call[0] === SET_INDEX + (call: any[]) => call[0] === SET_INDEX )[1]; expect(Object.values(storiesOfData.entries).map((s: any) => s.parameters.fileName)).toEqual([ 'file1', @@ -333,7 +350,7 @@ describe('start', () => { const { configure, clientApi } = start(renderToDOM); - let disposeCallback: () => void; + let disposeCallback: () => void = () => {}; const module = { id: 'file1', hot: { @@ -369,7 +386,7 @@ describe('start', () => { const { configure, clientApi, forceReRender } = start(renderToDOM); - let disposeCallback: () => void; + let disposeCallback: () => void = () => {}; const module = { id: 'file1', hot: { @@ -446,9 +463,9 @@ describe('start', () => { it('re-emits SET_INDEX when a story file is removed', async () => { const renderToDOM = jest.fn(({ storyFn }) => storyFn()); - const { configure, clientApi, forceReRender } = start(renderToDOM); + const { configure, clientApi } = start(renderToDOM); - let disposeCallback: () => void; + let disposeCallback: () => void = () => {}; const moduleB = { id: 'file2', hot: { @@ -629,7 +646,7 @@ describe('start', () => { it('supports HMR when a story file changes', async () => { const renderToDOM = jest.fn(({ storyFn }) => storyFn()); - let disposeCallback: (data: object) => void; + let disposeCallback: (data: object) => void = () => {}; const module = { id: 'file1', hot: { @@ -667,7 +684,7 @@ describe('start', () => { it('re-emits SET_INDEX when a story is added', async () => { const renderToDOM = jest.fn(({ storyFn }) => storyFn()); - let disposeCallback: (data: object) => void; + let disposeCallback: (data: object) => void = () => {}; const module = { id: 'file1', hot: { @@ -760,7 +777,7 @@ describe('start', () => { it('re-emits SET_INDEX when a story file is removed', async () => { const renderToDOM = jest.fn(({ storyFn }) => storyFn()); - let disposeCallback: (data: object) => void; + let disposeCallback: (data: object) => void = () => {}; const module = { id: 'file1', hot: { diff --git a/code/lib/core-client/tsconfig.json b/code/lib/core-client/tsconfig.json index c317802de491..053f1bdbcc37 100644 --- a/code/lib/core-client/tsconfig.json +++ b/code/lib/core-client/tsconfig.json @@ -1,6 +1,5 @@ { "extends": "../../tsconfig.json", "include": ["src/**/*", "typings.d.ts"], - "exclude": ["src/**.test.ts"], - "files": ["./typings.d.ts"] + "exclude": [] } diff --git a/code/lib/core-common/package.json b/code/lib/core-common/package.json index 93255ef85a07..a81bf5560997 100644 --- a/code/lib/core-common/package.json +++ b/code/lib/core-common/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-common", - "version": "7.0.0-alpha.45", + "version": "7.0.0-alpha.47", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" @@ -47,8 +47,8 @@ }, "dependencies": { "@babel/core": "^7.12.10", - "@storybook/node-logger": "7.0.0-alpha.45", - "@storybook/types": "7.0.0-alpha.45", + "@storybook/node-logger": "7.0.0-alpha.47", + "@storybook/types": "7.0.0-alpha.47", "@types/babel__core": "^7.0.0", "@types/express": "^4.7.0", "@types/node": "^16.0.0", @@ -97,5 +97,5 @@ ], "platform": "node" }, - "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532" + "gitHead": "1c706a4a778831e012343c905f86225fa71491a7" } diff --git a/code/lib/core-common/src/test-typings.d.ts b/code/lib/core-common/src/test-typings.d.ts index 9f1606c5a376..e45372e66b12 100644 --- a/code/lib/core-common/src/test-typings.d.ts +++ b/code/lib/core-common/src/test-typings.d.ts @@ -2,4 +2,4 @@ declare namespace jest { interface Matchers { toMatchPaths(paths: string[]): R; } -} \ No newline at end of file +} diff --git a/code/lib/core-events/package.json b/code/lib/core-events/package.json index a610cfd0d119..d75b53ea8a5e 100644 --- a/code/lib/core-events/package.json +++ b/code/lib/core-events/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-events", - "version": "7.0.0-alpha.45", + "version": "7.0.0-alpha.47", "description": "Event names used in storybook core", "keywords": [ "storybook" @@ -52,5 +52,5 @@ "./src/index.ts" ] }, - "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532" + "gitHead": "1c706a4a778831e012343c905f86225fa71491a7" } diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json index 2185687ae2fc..8b965838aa81 100644 --- a/code/lib/core-server/package.json +++ b/code/lib/core-server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-server", - "version": "7.0.0-alpha.45", + "version": "7.0.0-alpha.47", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" @@ -35,17 +35,17 @@ "dependencies": { "@aw-web-design/x-default-browser": "1.4.88", "@discoveryjs/json-ext": "^0.5.3", - "@storybook/builder-manager": "7.0.0-alpha.45", - "@storybook/core-client": "7.0.0-alpha.45", - "@storybook/core-common": "7.0.0-alpha.45", - "@storybook/core-events": "7.0.0-alpha.45", + "@storybook/builder-manager": "7.0.0-alpha.47", + "@storybook/core-client": "7.0.0-alpha.47", + "@storybook/core-common": "7.0.0-alpha.47", + "@storybook/core-events": "7.0.0-alpha.47", "@storybook/csf": "next", - "@storybook/csf-tools": "7.0.0-alpha.45", + "@storybook/csf-tools": "7.0.0-alpha.47", "@storybook/docs-mdx": "0.0.1-canary.12433cf.0", - "@storybook/node-logger": "7.0.0-alpha.45", - "@storybook/store": "7.0.0-alpha.45", - "@storybook/telemetry": "7.0.0-alpha.45", - "@storybook/types": "7.0.0-alpha.45", + "@storybook/node-logger": "7.0.0-alpha.47", + "@storybook/store": "7.0.0-alpha.47", + "@storybook/telemetry": "7.0.0-alpha.47", + "@storybook/types": "7.0.0-alpha.47", "@types/node": "^16.0.0", "@types/node-fetch": "^2.5.7", "@types/pretty-hrtime": "^1.0.0", @@ -77,7 +77,7 @@ "ws": "^8.2.3" }, "devDependencies": { - "@storybook/builder-webpack5": "7.0.0-alpha.45", + "@storybook/builder-webpack5": "7.0.0-alpha.47", "@types/compression": "^1.7.0", "@types/ip": "^1.1.0", "@types/serve-favicon": "^2.5.2", @@ -103,5 +103,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532" + "gitHead": "1c706a4a778831e012343c905f86225fa71491a7" } diff --git a/code/lib/core-server/src/build-dev.ts b/code/lib/core-server/src/build-dev.ts index 7db1da14ca1b..b7a808babc15 100644 --- a/code/lib/core-server/src/build-dev.ts +++ b/code/lib/core-server/src/build-dev.ts @@ -36,7 +36,7 @@ export async function buildDevStandalone(options: CLIOptions & LoadOptions & Bui getServerPort(options.port), versionUpdates ? updateCheck(version) - : Promise.resolve({ success: false, data: {}, time: Date.now() }), + : Promise.resolve({ success: false, cached: false, data: {}, time: Date.now() }), releaseNotes ? getReleaseNotesData(version, cache) : Promise.resolve(getReleaseNotesFailedState(version)), diff --git a/code/lib/core-server/src/dev-server.ts b/code/lib/core-server/src/dev-server.ts index b3023f4d422a..f25c87e46d28 100644 --- a/code/lib/core-server/src/dev-server.ts +++ b/code/lib/core-server/src/dev-server.ts @@ -1,7 +1,13 @@ import express, { Router } from 'express'; import compression from 'compression'; -import type { CoreConfig, DocsOptions, Options, StorybookConfig } from '@storybook/types'; +import type { + CoreConfig, + DocsOptions, + Options, + StorybookConfig, + VersionCheck, +} from '@storybook/types'; import { normalizeStories, logConfig } from '@storybook/core-common'; @@ -24,6 +30,12 @@ export const router: Router = new Router(); export const DEBOUNCE = 100; +const versionStatus = (versionCheck: VersionCheck) => { + if (versionCheck.error) return 'error'; + if (versionCheck.cached) return 'cached'; + return 'success'; +}; + export async function storybookDevServer(options: Options) { const startTime = process.hrtime(); const app = express(); @@ -67,8 +79,10 @@ export async function storybookDevServer(options: Options) { if (!core?.disableTelemetry) { initializedStoryIndexGenerator.then(async (generator) => { const storyIndex = await generator?.getIndex(); + const { versionCheck, versionUpdates } = options; const payload = storyIndex ? { + versionStatus: versionUpdates ? versionStatus(versionCheck) : 'disabled', storyIndex: summarizeIndex(storyIndex), } : undefined; diff --git a/code/lib/core-server/src/utils/update-check.ts b/code/lib/core-server/src/utils/update-check.ts index b20881d12352..f4c463d2e344 100644 --- a/code/lib/core-server/src/utils/update-check.ts +++ b/code/lib/core-server/src/utils/update-check.ts @@ -22,13 +22,13 @@ export const updateCheck = async (version: string): Promise => { new Promise((res, rej) => global.setTimeout(rej, 1500)), ]); const data = await fromFetch.json(); - result = { success: true, data, time }; + result = { success: true, cached: false, data, time }; await cache.set('lastUpdateCheck', result); } else { - result = fromCache; + result = { ...fromCache, cached: true }; } } catch (error) { - result = { success: false, error, time }; + result = { success: false, cached: false, error, time }; } return result; }; diff --git a/code/lib/core-webpack/package.json b/code/lib/core-webpack/package.json index 49d992e9c902..7936a4b0a9b5 100644 --- a/code/lib/core-webpack/package.json +++ b/code/lib/core-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-webpack", - "version": "7.0.0-alpha.45", + "version": "7.0.0-alpha.47", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" @@ -42,9 +42,9 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/core-common": "7.0.0-alpha.45", - "@storybook/node-logger": "7.0.0-alpha.45", - "@storybook/types": "7.0.0-alpha.45", + "@storybook/core-common": "7.0.0-alpha.47", + "@storybook/node-logger": "7.0.0-alpha.47", + "@storybook/types": "7.0.0-alpha.47", "@types/node": "^16.0.0", "ts-dedent": "^2.0.0" }, @@ -61,5 +61,5 @@ ], "platform": "node" }, - "gitHead": "3ef14366115c56c1d45c0359ff681cc47ed50532" + "gitHead": "1c706a4a778831e012343c905f86225fa71491a7" } diff --git a/code/lib/csf-plugin/README.md b/code/lib/csf-plugin/README.md new file mode 100644 index 000000000000..47eb2e18e3d7 --- /dev/null +++ b/code/lib/csf-plugin/README.md @@ -0,0 +1,26 @@ +# CSF Plugin + +The CSF plugin reads CSF files and enriches their content via static analysis. +It supports Webpack, Vite, and other bundlers using [unplugin](https://github.com/unjs/unplugin). + +## Source snippets + +CSF plugin can add static source snippets to each story. For example: + +```js +export const Basic = () =>