From 6826f77114bd011d14df463ab452fbbd66df117e Mon Sep 17 00:00:00 2001 From: Michael Kuckuk <8076094+LBBO@users.noreply.github.com> Date: Sat, 22 Oct 2022 15:36:44 +0200 Subject: [PATCH 01/36] Pass staticDir to config file during init --- code/lib/cli/src/generators/baseGenerator.ts | 2 +- code/lib/cli/src/generators/configure.ts | 1 + code/lib/cli/src/js-package-manager/JsPackageManager.ts | 9 ++------- 3 files changed, 4 insertions(+), 8 deletions(-) diff --git a/code/lib/cli/src/generators/baseGenerator.ts b/code/lib/cli/src/generators/baseGenerator.ts index 00e6ebae3e5..2e363aa902b 100644 --- a/code/lib/cli/src/generators/baseGenerator.ts +++ b/code/lib/cli/src/generators/baseGenerator.ts @@ -192,6 +192,7 @@ export async function baseGenerator( addons: pnp ? addons.map(wrapForPnp) : addons, extensions, commonJs, + ...(staticDir ? { staticDirs: [staticDir] } : null), ...extraMain, ...(type !== 'framework' ? { @@ -237,7 +238,6 @@ export async function baseGenerator( if (addScripts) { packageManager.addStorybookCommandInScripts({ port: 6006, - staticFolder: staticDir, }); } diff --git a/code/lib/cli/src/generators/configure.ts b/code/lib/cli/src/generators/configure.ts index 6c64d716e49..b55bc7ed98d 100644 --- a/code/lib/cli/src/generators/configure.ts +++ b/code/lib/cli/src/generators/configure.ts @@ -6,6 +6,7 @@ interface ConfigureMainOptions { addons: string[]; extensions?: string[]; commonJs?: boolean; + staticDirs?: string[]; /** * Extra values for main.js * diff --git a/code/lib/cli/src/js-package-manager/JsPackageManager.ts b/code/lib/cli/src/js-package-manager/JsPackageManager.ts index 73eb0bf1545..fd4bd5c90b0 100644 --- a/code/lib/cli/src/js-package-manager/JsPackageManager.ts +++ b/code/lib/cli/src/js-package-manager/JsPackageManager.ts @@ -305,17 +305,12 @@ export abstract class JsPackageManager { public addStorybookCommandInScripts(options?: { port: number; - staticFolder?: string; 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({ From 9eb5c406cfeb379ca96ecb18a40e52323726dd1a Mon Sep 17 00:00:00 2001 From: Michael Kuckuk <8076094+LBBO@users.noreply.github.com> Date: Sat, 22 Oct 2022 15:36:59 +0200 Subject: [PATCH 02/36] Fix typo --- code/lib/cli/src/generators/configure.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/cli/src/generators/configure.ts b/code/lib/cli/src/generators/configure.ts index b55bc7ed98d..945b061759e 100644 --- a/code/lib/cli/src/generators/configure.ts +++ b/code/lib/cli/src/generators/configure.ts @@ -13,7 +13,7 @@ interface ConfigureMainOptions { * 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; From 6c74ed36f1bdc230de3398a5268abc2de2acefb6 Mon Sep 17 00:00:00 2001 From: Michael Kuckuk <8076094+LBBO@users.noreply.github.com> Date: Sat, 22 Oct 2022 15:46:21 +0200 Subject: [PATCH 03/36] Fix relative static path so interface for generators doesn't change --- code/lib/cli/src/generators/baseGenerator.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/code/lib/cli/src/generators/baseGenerator.ts b/code/lib/cli/src/generators/baseGenerator.ts index 2e363aa902b..a6f8c216f2e 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 { NpmOptions } from '../NpmOptions'; @@ -192,7 +193,7 @@ export async function baseGenerator( addons: pnp ? addons.map(wrapForPnp) : addons, extensions, commonJs, - ...(staticDir ? { staticDirs: [staticDir] } : null), + ...(staticDir ? { staticDirs: [path.join('..', staticDir)] } : null), ...extraMain, ...(type !== 'framework' ? { From ba6bfb7a020721254ea892e85949d68076d0b55c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E0=B4=8E=E0=B4=A4=E0=B4=BF=E0=B4=B0=E0=B4=BE=E0=B4=B3?= =?UTF-8?q?=E0=B4=BF=E0=B4=95=E0=B5=8D=E0=B4=95=E0=B5=8A=E0=B4=B0=E0=B5=81?= =?UTF-8?q?=20=E0=B4=AA=E0=B5=8B=E0=B4=B0=E0=B4=BE=E0=B4=B3=E0=B4=BF?= <108031802+pankali@users.noreply.github.com> Date: Fri, 28 Oct 2022 01:49:56 +0200 Subject: [PATCH 04/36] Update Code of Conduct to Contributor Covenant v2.1 --- CODE_OF_CONDUCT.md | 135 +++++++++++++++++++++++++++++++++++---------- 1 file changed, 107 insertions(+), 28 deletions(-) diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md index 522981138eb..45d257b29a9 100644 --- a/CODE_OF_CONDUCT.md +++ b/CODE_OF_CONDUCT.md @@ -1,54 +1,133 @@ + # 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 to the community leaders responsible for enforcement at +[INSERT CONTACT METHOD]. +All complaints will be reviewed and investigated promptly and fairly. -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` +All community leaders are obligated to respect the privacy and security of the +reporter of any incident. -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 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. +Community leaders will follow these Community Impact Guidelines in determining +the consequences for any action they deem in violation of this Code of Conduct: + +### 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. + +### 2. Warning + +**Community Impact**: A violation through a single incident or series of +actions. + +**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]. -[homepage]: http://contributor-covenant.org -[version]: http://contributor-covenant.org/version/1/4/ +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]: 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 From 5ed707f5d18341a14cb27a6b000e4cc848f49ec2 Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Fri, 28 Oct 2022 08:20:37 -0400 Subject: [PATCH 05/36] Remove .prettierrc files --- code/.prettierrc | 8 -------- scripts/.prettierrc | 8 -------- 2 files changed, 16 deletions(-) delete mode 100644 code/.prettierrc delete mode 100644 scripts/.prettierrc diff --git a/code/.prettierrc b/code/.prettierrc deleted file mode 100644 index d033feea7ad..00000000000 --- a/code/.prettierrc +++ /dev/null @@ -1,8 +0,0 @@ -{ - "printWidth": 100, - "tabWidth": 2, - "bracketSpacing": true, - "trailingComma": "es5", - "singleQuote": true, - "arrowParens": "always" -} diff --git a/scripts/.prettierrc b/scripts/.prettierrc deleted file mode 100644 index d033feea7ad..00000000000 --- a/scripts/.prettierrc +++ /dev/null @@ -1,8 +0,0 @@ -{ - "printWidth": 100, - "tabWidth": 2, - "bracketSpacing": true, - "trailingComma": "es5", - "singleQuote": true, - "arrowParens": "always" -} From d99ed8af01c3a7652f1ebf8fe9df6769f49722fc Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Fri, 28 Oct 2022 08:20:58 -0400 Subject: [PATCH 06/36] Remove html parser override --- scripts/prettier.config.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/scripts/prettier.config.js b/scripts/prettier.config.js index c2fbdcbf6ed..b1a30ba19f8 100644 --- a/scripts/prettier.config.js +++ b/scripts/prettier.config.js @@ -3,10 +3,4 @@ const base = require('@storybook/linter-config/prettier.config'); module.exports = { ...base, arrowParens: 'always', - overrides: [ - { - files: '*.html', - options: { parser: 'babel' }, - }, - ], }; From 90353e770c160cf1bfbc4656d9b4d928c7156b66 Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Fri, 28 Oct 2022 08:46:48 -0400 Subject: [PATCH 07/36] Make ESLint the default formatter in vscode --- .vscode/settings.json | 18 +++++++++++++++++- code/.vscode/settings.json | 18 +++++++++++++++++- 2 files changed, 34 insertions(+), 2 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index e4831db738b..9575451f2d9 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,4 +1,20 @@ { "deepscan.enable": true, - "typescript.tsdk": "./code/node_modules/typescript/lib" + "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/code/.vscode/settings.json b/code/.vscode/settings.json index 25fa6215fdd..0bd6833d723 100644 --- a/code/.vscode/settings.json +++ b/code/.vscode/settings.json @@ -1,3 +1,19 @@ { - "typescript.tsdk": "node_modules/typescript/lib" + "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 + } } From 1289acd4a23250981f86bcac6e1eb608ab8873c9 Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Fri, 28 Oct 2022 08:47:25 -0400 Subject: [PATCH 08/36] Enable deepscan when working from /code --- code/.vscode/settings.json | 1 + 1 file changed, 1 insertion(+) diff --git a/code/.vscode/settings.json b/code/.vscode/settings.json index 0bd6833d723..bfb6c11e615 100644 --- a/code/.vscode/settings.json +++ b/code/.vscode/settings.json @@ -1,4 +1,5 @@ { + "deepscan.enable": true, "typescript.tsdk": "node_modules/typescript/lib", "[javascript]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint", From 40381d20024c41d2a4c22f5c0b56279fc8ac5951 Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Fri, 28 Oct 2022 08:29:54 -0400 Subject: [PATCH 09/36] Allow up to prettier 3 --- code/lib/codemod/package.json | 2 +- code/lib/source-loader/package.json | 2 +- code/yarn.lock | 15 +++------------ scripts/package.json | 2 +- scripts/yarn.lock | 10 +++++----- 5 files changed, 11 insertions(+), 20 deletions(-) diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index dec7f71fbde..fc3e6aec334 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -46,7 +46,7 @@ "globby": "^11.0.2", "jscodeshift": "^0.13.1", "lodash": "^4.17.21", - "prettier": ">=2.2.1 <=2.3.0", + "prettier": ">=2.2.1 <=3.0.0", "recast": "^0.19.0", "util": "^0.12.4" }, diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json index f29407d09a0..deb1de5902c 100644 --- a/code/lib/source-loader/package.json +++ b/code/lib/source-loader/package.json @@ -47,7 +47,7 @@ "@storybook/types": "7.0.0-alpha.45", "estraverse": "^5.2.0", "lodash": "^4.17.21", - "prettier": ">=2.2.1 <=2.3.0" + "prettier": ">=2.2.1 <=3.0.0" }, "devDependencies": { "jest-specific-snapshot": "^4.0.0", diff --git a/code/yarn.lock b/code/yarn.lock index 363d89520af..dd01e87ce60 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -6415,7 +6415,7 @@ __metadata: jest-specific-snapshot: ^4.0.0 jscodeshift: ^0.13.1 lodash: ^4.17.21 - prettier: ">=2.2.1 <=2.3.0" + prettier: ">=2.2.1 <=3.0.0" recast: ^0.19.0 typescript: ~4.6.3 util: ^0.12.4 @@ -7699,7 +7699,7 @@ __metadata: estraverse: ^5.2.0 jest-specific-snapshot: ^4.0.0 lodash: ^4.17.21 - prettier: ">=2.2.1 <=2.3.0" + prettier: ">=2.2.1 <=3.0.0" typescript: ~4.6.3 peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 @@ -28639,7 +28639,7 @@ __metadata: languageName: node linkType: hard -"prettier@npm:2.7.1, prettier@npm:>=2.5, prettier@npm:^1.18.2 || ^2.0.0": +"prettier@npm:2.7.1, prettier@npm:>=2.2.1 <=3.0.0, prettier@npm:>=2.5, prettier@npm:^1.18.2 || ^2.0.0": version: 2.7.1 resolution: "prettier@npm:2.7.1" bin: @@ -28648,15 +28648,6 @@ __metadata: languageName: node linkType: hard -"prettier@npm:>=2.2.1 <=2.3.0": - version: 2.3.0 - resolution: "prettier@npm:2.3.0" - bin: - prettier: bin-prettier.js - checksum: b9f434af2f25a37aad0b133894827e980885eb8bf317444c9dde0401ed2c7f463f9996d691f5ee5a0a4450ab46a894cd6557516b561e2522821522ce1f4c6668 - languageName: node - linkType: hard - "pretty-bytes@npm:^5.3.0": version: 5.6.0 resolution: "pretty-bytes@npm:5.6.0" diff --git a/scripts/package.json b/scripts/package.json index 48f8a8646bd..e7190c1c757 100644 --- a/scripts/package.json +++ b/scripts/package.json @@ -147,7 +147,7 @@ "npmlog": "^5.0.1", "nx": "14.6.1", "p-limit": "^3.1.0", - "prettier": ">=2.2.1 <=2.3.0", + "prettier": ">=2.2.1 <=3.0.0", "pretty-hrtime": "^1.0.0", "process": "^0.11.10", "prompts": "^2.4.0", diff --git a/scripts/yarn.lock b/scripts/yarn.lock index d55dc7d41ec..fb167307ddc 100644 --- a/scripts/yarn.lock +++ b/scripts/yarn.lock @@ -3431,7 +3431,7 @@ __metadata: npmlog: ^5.0.1 nx: 14.6.1 p-limit: ^3.1.0 - prettier: ">=2.2.1 <=2.3.0" + prettier: ">=2.2.1 <=3.0.0" pretty-hrtime: ^1.0.0 process: ^0.11.10 prompts: ^2.4.0 @@ -15669,12 +15669,12 @@ __metadata: languageName: node linkType: hard -"prettier@npm:>=2.2.1 <=2.3.0": - version: 2.3.0 - resolution: "prettier@npm:2.3.0" +"prettier@npm:>=2.2.1 <=3.0.0": + version: 2.7.1 + resolution: "prettier@npm:2.7.1" bin: prettier: bin-prettier.js - checksum: b9f434af2f25a37aad0b133894827e980885eb8bf317444c9dde0401ed2c7f463f9996d691f5ee5a0a4450ab46a894cd6557516b561e2522821522ce1f4c6668 + checksum: 359d2b7ecf36bd52924a48331cae506d335f18637fde6c686212f952b9ce678ce9f554a80571049b36ec2897a8a6c40094b776dea371cc5c04c481cf5b78504b languageName: node linkType: hard From 4368b1569df0f2b296189ad5f3f8add9522d4ddd Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Fri, 28 Oct 2022 09:10:49 -0400 Subject: [PATCH 10/36] Make prettier a dependency of @storybook/components --- code/ui/components/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/ui/components/package.json b/code/ui/components/package.json index 4291f4db779..e75af8645fc 100644 --- a/code/ui/components/package.json +++ b/code/ui/components/package.json @@ -56,6 +56,7 @@ "@storybook/theming": "7.0.0-alpha.45", "@storybook/types": "7.0.0-alpha.45", "memoizerific": "^1.11.3", + "prettier": ">=2.5", "util-deprecate": "^1.0.2" }, "devDependencies": { @@ -67,7 +68,6 @@ "global": "^4.4.0", "overlayscrollbars": "^1.13.1", "polished": "^4.2.2", - "prettier": ">=2.5", "react-popper-tooltip": "^3.1.1", "react-syntax-highlighter": "^15.4.5", "react-textarea-autosize": "^8.3.0", From 419e83b0006acad18a2e81b6444f533be37ab175 Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Fri, 28 Oct 2022 09:13:11 -0400 Subject: [PATCH 11/36] Un-ignore .d.ts files from eslint --- code/.eslintignore | 1 - code/addons/links/react.d.ts | 4 +- .../storyshots-core/src/typings.d.ts | 1 - code/frameworks/react-vite/src/typings.d.ts | 1 + .../react-webpack5/src/typings.d.ts | 1 + code/frameworks/vue-webpack5/src/typings.d.ts | 2 +- .../frameworks/vue3-webpack5/src/typings.d.ts | 2 +- code/lib/api/shortcut.d.ts | 10 +++-- code/lib/core-common/src/test-typings.d.ts | 2 +- code/lib/source-loader/extract-source.d.ts | 2 +- code/lib/theming/src/emotionAugmentation.d.ts | 1 + code/lib/theming/src/typings.d.ts | 2 +- code/presets/react-webpack/src/typings.d.ts | 43 ++++++++++--------- code/presets/vue-webpack/src/typings.d.ts | 2 - code/presets/vue3-webpack/src/typings.d.ts | 2 +- code/renderers/react/src/typings.d.ts | 43 ++++++++++--------- 16 files changed, 63 insertions(+), 56 deletions(-) diff --git a/code/.eslintignore b/code/.eslintignore index db97fa57090..803b02d6c30 100644 --- a/code/.eslintignore +++ b/code/.eslintignore @@ -12,7 +12,6 @@ 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/addons/links/react.d.ts b/code/addons/links/react.d.ts index b1ad3cf99ac..bdca492fe00 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/storyshots/storyshots-core/src/typings.d.ts b/code/addons/storyshots/storyshots-core/src/typings.d.ts index 3d210a27e7f..03f1a3f1a32 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/frameworks/react-vite/src/typings.d.ts b/code/frameworks/react-vite/src/typings.d.ts index 94a00a8f317..53aa2b04a77 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/src/typings.d.ts b/code/frameworks/react-webpack5/src/typings.d.ts index 066cca1fbd0..ce0c26f59d0 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/vue-webpack5/src/typings.d.ts b/code/frameworks/vue-webpack5/src/typings.d.ts index 4f4eff6c31c..b3f023454b6 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-webpack5/src/typings.d.ts b/code/frameworks/vue3-webpack5/src/typings.d.ts index 4dd56718732..3229acac022 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/lib/api/shortcut.d.ts b/code/lib/api/shortcut.d.ts index f6958ee10df..26c2671b9af 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/core-common/src/test-typings.d.ts b/code/lib/core-common/src/test-typings.d.ts index 9f1606c5a37..e45372e66b1 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/source-loader/extract-source.d.ts b/code/lib/source-loader/extract-source.d.ts index 661a21beb5c..2e28c8c525c 100644 --- a/code/lib/source-loader/extract-source.d.ts +++ b/code/lib/source-loader/extract-source.d.ts @@ -1,4 +1,4 @@ // DEPRECATED // Do not import @storybook/source-loader/extract-source directly. // Import @storybook/source-loader instead. -export * from './dist/types/extract-source.d'; \ No newline at end of file +export * from './dist/index'; diff --git a/code/lib/theming/src/emotionAugmentation.d.ts b/code/lib/theming/src/emotionAugmentation.d.ts index 1a48313f84e..c7bd35d9391 100644 --- a/code/lib/theming/src/emotionAugmentation.d.ts +++ b/code/lib/theming/src/emotionAugmentation.d.ts @@ -1,5 +1,6 @@ // this file is only actually used in development // for prod/dist bundles we are bundling Emotion into our package +/* eslint-disable @typescript-eslint/no-empty-interface */ import '@emotion/react'; diff --git a/code/lib/theming/src/typings.d.ts b/code/lib/theming/src/typings.d.ts index e917d057faa..ab568e12c7a 100644 --- a/code/lib/theming/src/typings.d.ts +++ b/code/lib/theming/src/typings.d.ts @@ -1,3 +1,3 @@ // todo the following packages need definition files or a TS migration declare module 'react-inspector'; -declare module 'global'; \ No newline at end of file +declare module 'global'; diff --git a/code/presets/react-webpack/src/typings.d.ts b/code/presets/react-webpack/src/typings.d.ts index 7b89f5df0ee..ce0c26f59d0 100644 --- a/code/presets/react-webpack/src/typings.d.ts +++ b/code/presets/react-webpack/src/typings.d.ts @@ -3,29 +3,29 @@ declare module 'global'; // TODO: Replace, as soon as @types/react-dom 17.0.14 is used // Source: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/fb0f14b7a35cde26ffaa82e7536c062e593e9ae6/types/react-dom/client.d.ts declare module 'react-dom/client' { - -import React = require('react'); + import React = require('react'); + export interface HydrationOptions { - onHydrated?(suspenseInstance: Comment): void; - onDeleted?(suspenseInstance: Comment): void; - /** - * Prefix for `useId`. - */ - identifierPrefix?: string; - onRecoverableError?: (error: unknown) => void; + onHydrated?(suspenseInstance: Comment): void; + onDeleted?(suspenseInstance: Comment): void; + /** + * Prefix for `useId`. + */ + identifierPrefix?: string; + onRecoverableError?: (error: unknown) => void; } export interface RootOptions { - /** - * Prefix for `useId`. - */ - identifierPrefix?: string; - onRecoverableError?: (error: unknown) => void; + /** + * Prefix for `useId`. + */ + identifierPrefix?: string; + onRecoverableError?: (error: unknown) => void; } export interface Root { - render(children: React.ReactChild | Iterable): void; - unmount(): void; + render(children: React.ReactChild | Iterable): void; + unmount(): void; } /** @@ -33,11 +33,14 @@ import React = require('react'); * * @see https://reactjs.org/docs/concurrent-mode-reference.html#createroot */ - export function createRoot(container: Element | Document | DocumentFragment | Comment, options?: RootOptions): Root; + export function createRoot( + container: Element | Document | DocumentFragment | Comment, + options?: RootOptions + ): Root; export function hydrateRoot( - container: Element | Document | DocumentFragment | Comment, - initialChildren: React.ReactChild | Iterable, - options?: HydrationOptions, + container: Element | Document | DocumentFragment | Comment, + initialChildren: React.ReactChild | Iterable, + options?: HydrationOptions ): Root; } diff --git a/code/presets/vue-webpack/src/typings.d.ts b/code/presets/vue-webpack/src/typings.d.ts index 4324435b168..1cb13ccbdae 100644 --- a/code/presets/vue-webpack/src/typings.d.ts +++ b/code/presets/vue-webpack/src/typings.d.ts @@ -1,3 +1 @@ - - declare module 'vue-loader'; diff --git a/code/presets/vue3-webpack/src/typings.d.ts b/code/presets/vue3-webpack/src/typings.d.ts index 4dd56718732..3229acac022 100644 --- a/code/presets/vue3-webpack/src/typings.d.ts +++ b/code/presets/vue3-webpack/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/renderers/react/src/typings.d.ts b/code/renderers/react/src/typings.d.ts index 899b15ae369..53aa2b04a77 100644 --- a/code/renderers/react/src/typings.d.ts +++ b/code/renderers/react/src/typings.d.ts @@ -1,29 +1,29 @@ // TODO: Replace, as soon as @types/react-dom 17.0.14 is used // Source: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/fb0f14b7a35cde26ffaa82e7536c062e593e9ae6/types/react-dom/client.d.ts declare module 'react-dom/client' { - -import React = require('react'); + import React = require('react'); + export interface HydrationOptions { - onHydrated?(suspenseInstance: Comment): void; - onDeleted?(suspenseInstance: Comment): void; - /** - * Prefix for `useId`. - */ - identifierPrefix?: string; - onRecoverableError?: (error: unknown) => void; + onHydrated?(suspenseInstance: Comment): void; + onDeleted?(suspenseInstance: Comment): void; + /** + * Prefix for `useId`. + */ + identifierPrefix?: string; + onRecoverableError?: (error: unknown) => void; } export interface RootOptions { - /** - * Prefix for `useId`. - */ - identifierPrefix?: string; - onRecoverableError?: (error: unknown) => void; + /** + * Prefix for `useId`. + */ + identifierPrefix?: string; + onRecoverableError?: (error: unknown) => void; } export interface Root { - render(children: React.ReactChild | Iterable): void; - unmount(): void; + render(children: React.ReactChild | Iterable): void; + unmount(): void; } /** @@ -31,11 +31,14 @@ import React = require('react'); * * @see https://reactjs.org/docs/concurrent-mode-reference.html#createroot */ - export function createRoot(container: Element | Document | DocumentFragment | Comment, options?: RootOptions): Root; + export function createRoot( + container: Element | Document | DocumentFragment | Comment, + options?: RootOptions + ): Root; export function hydrateRoot( - container: Element | Document | DocumentFragment | Comment, - initialChildren: React.ReactChild | Iterable, - options?: HydrationOptions, + container: Element | Document | DocumentFragment | Comment, + initialChildren: React.ReactChild | Iterable, + options?: HydrationOptions ): Root; } From 6327e42997f1c5537420c4896397f4b6ad64f920 Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Fri, 28 Oct 2022 09:13:50 -0400 Subject: [PATCH 12/36] Un-ignore lib/cli/test files from eslint --- code/.eslintignore | 1 - code/lib/cli/test/helpers.js | 3 +-- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/code/.eslintignore b/code/.eslintignore index 803b02d6c30..6f8539b9b7b 100644 --- a/code/.eslintignore +++ b/code/.eslintignore @@ -6,7 +6,6 @@ node_modules docs/public storybook-static built-storybooks -lib/cli/test lib/codemod/src/transforms/__testfixtures__ scripts/storage scripts/repros-generator diff --git a/code/lib/cli/test/helpers.js b/code/lib/cli/test/helpers.js index a3a2d9a23a5..fc2f9fdbe24 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; From d9e3807af05ac9b5d9d980d374d88269e3e5b318 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E0=B4=8E=E0=B4=A4=E0=B4=BF=E0=B4=B0=E0=B4=BE=E0=B4=B3?= =?UTF-8?q?=E0=B4=BF=E0=B4=95=E0=B5=8D=E0=B4=95=E0=B5=8A=E0=B4=B0=E0=B5=81?= =?UTF-8?q?=20=E0=B4=AA=E0=B5=8B=E0=B4=B0=E0=B4=BE=E0=B4=B3=E0=B4=BF?= <108031802+pankali@users.noreply.github.com> Date: Sat, 29 Oct 2022 17:15:44 +0200 Subject: [PATCH 13/36] revert Enforcement and Enforcement Guidelines to earlier version --- CODE_OF_CONDUCT.md | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md index 45d257b29a9..63f02009935 100644 --- a/CODE_OF_CONDUCT.md +++ b/CODE_OF_CONDUCT.md @@ -59,18 +59,19 @@ representative at an online or offline event. ## Enforcement -Instances of abusive, harassing, or otherwise unacceptable behavior may be -reported to the community leaders responsible for enforcement at -[INSERT CONTACT METHOD]. -All complaints will be reviewed and investigated promptly and fairly. +Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting one of the Steering committee members for enforcement: -All community leaders are obligated to respect the privacy and security of the -reporter of any incident. +- 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 -Community leaders will follow these Community Impact Guidelines in determining -the consequences for any action they deem in violation of this Code of Conduct: +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 From 3488284643af536095be2b9c72080c74e3bf5aac Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Mon, 31 Oct 2022 11:50:22 -0400 Subject: [PATCH 14/36] Restore prettier to devDependencies, so it is bundled --- code/ui/components/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/ui/components/package.json b/code/ui/components/package.json index e75af8645fc..4291f4db779 100644 --- a/code/ui/components/package.json +++ b/code/ui/components/package.json @@ -56,7 +56,6 @@ "@storybook/theming": "7.0.0-alpha.45", "@storybook/types": "7.0.0-alpha.45", "memoizerific": "^1.11.3", - "prettier": ">=2.5", "util-deprecate": "^1.0.2" }, "devDependencies": { @@ -68,6 +67,7 @@ "global": "^4.4.0", "overlayscrollbars": "^1.13.1", "polished": "^4.2.2", + "prettier": ">=2.5", "react-popper-tooltip": "^3.1.1", "react-syntax-highlighter": "^15.4.5", "react-textarea-autosize": "^8.3.0", From 04a16c3c7859ed03a9e780c1fa8353df29b9eb2a Mon Sep 17 00:00:00 2001 From: SebastianKapunkt Date: Tue, 1 Nov 2022 11:05:46 +0100 Subject: [PATCH 15/36] vue-webpack-5 Add babel loader 9.0.0 and up to peer dependencies --- code/frameworks/vue-webpack5/package.json | 2 +- code/yarn.lock | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/code/frameworks/vue-webpack5/package.json b/code/frameworks/vue-webpack5/package.json index 8ec7f6d931a..4a7122583dc 100644 --- a/code/frameworks/vue-webpack5/package.json +++ b/code/frameworks/vue-webpack5/package.json @@ -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", diff --git a/code/yarn.lock b/code/yarn.lock index f4ece33b6da..c827df0533d 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -7955,7 +7955,7 @@ __metadata: vue-template-compiler: ^2.6.14 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 From 92e354ff65dfbcc7f57769df883d4dc7d8890041 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 2 Nov 2022 00:38:55 +0800 Subject: [PATCH 16/36] Fix typo --- MIGRATION.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/MIGRATION.md b/MIGRATION.md index 83b15ae0477..0bb29fbe5c0 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -360,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`: From 0e0d6e644f981de9a1544144b4527687d714814f Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Tue, 1 Nov 2022 16:10:29 -0400 Subject: [PATCH 17/36] Expose ReactFramework type --- code/renderers/react/src/public-types.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/code/renderers/react/src/public-types.ts b/code/renderers/react/src/public-types.ts index 625fdfc3132..531ece5874e 100644 --- a/code/renderers/react/src/public-types.ts +++ b/code/renderers/react/src/public-types.ts @@ -12,6 +12,8 @@ import type { SetOptional, Simplify } from 'type-fest'; import type { ReactFramework } from './types'; +export { ReactFramework }; + type JSXElement = keyof JSX.IntrinsicElements | JSXElementConstructor; /** From f64590613e476ebf5cb0e40fb924f790b2962696 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 2 Nov 2022 10:06:50 +0800 Subject: [PATCH 18/36] Build: Re-enable test-runner for vue-cli --- .circleci/config.yml | 2 +- code/lib/cli/src/repro-templates.ts | 4 ---- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index b719c38f0c8..31ed1d0aec8 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -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/code/lib/cli/src/repro-templates.ts b/code/lib/cli/src/repro-templates.ts index bb4ac7b60ce..fa1007b76fe 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', From 6e256cd2ab9d53c630786ae2b4a064be2eadf4f2 Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Wed, 2 Nov 2022 16:19:51 +1100 Subject: [PATCH 19/36] Allow setting `docsPage = automatic` to set docs entries for all components --- code/lib/client-api/src/StoryStoreFacade.ts | 8 ++-- code/lib/core-client/src/start.test.ts | 44 +++++++++++++++++++ .../src/utils/StoryIndexGenerator.test.ts | 33 ++++++++++++++ .../src/utils/StoryIndexGenerator.ts | 8 ++-- code/lib/types/src/modules/core-common.ts | 5 ++- 5 files changed, 88 insertions(+), 10 deletions(-) diff --git a/code/lib/client-api/src/StoryStoreFacade.ts b/code/lib/client-api/src/StoryStoreFacade.ts index 3bbef76dc2e..afb1a758369 100644 --- a/code/lib/client-api/src/StoryStoreFacade.ts +++ b/code/lib/client-api/src/StoryStoreFacade.ts @@ -191,12 +191,12 @@ export class StoryStoreFacade { // NOTE: this logic is equivalent to the `extractStories` function of `StoryIndexGenerator` const docsOptions = (global.DOCS_OPTIONS || {}) as DocsOptions; + const docsPageOptedIn = + docsOptions.docsPage === 'automatic' || + (docsOptions.docsPage && componentTags.includes('docsPage')); if (docsOptions.enabled && storyExports.length) { // We will use tags soon and this crappy filename test will go away - if ( - fileName.match(/\.mdx$/) || - (docsOptions.docsPage && componentTags.includes('docsPage')) - ) { + if (fileName.match(/\.mdx$/) || docsPageOptedIn) { const name = docsOptions.defaultName; const docsId = toId(componentId || title, name); this.entries[docsId] = { diff --git a/code/lib/core-client/src/start.test.ts b/code/lib/core-client/src/start.test.ts index 8c3092d147e..c6cd4fb57af 100644 --- a/code/lib/core-client/src/start.test.ts +++ b/code/lib/core-client/src/start.test.ts @@ -1295,6 +1295,50 @@ describe('start', () => { `); }); }); + describe('when docsOptions.docsPage = automatic', () => { + beforeEach(() => { + global.DOCS_OPTIONS = { enabled: true, docsPage: 'automatic', defaultName: 'Docs' }; + }); + + it('adds stories for each component with docsPage tag', async () => { + const renderToDOM = jest.fn(); + + const { configure, clientApi } = start(renderToDOM); + configure('test', () => { + (clientApi as any).addParameters({ + docs: { renderer: () => ({ render: jest.fn((_, _2, _3, d) => d()) }) }, + }); + clientApi + .storiesOf('Component A', { id: 'file1' } as NodeModule) + .add('Story One', jest.fn()) + .add('Story Two', jest.fn()); + + clientApi + .storiesOf('Component B', { id: 'file2' } as NodeModule) + .addParameters({ tags: ['docsPage'] }) + .add('Story Three', jest.fn()); + + return [componentCExports]; + }); + + await waitForRender(); + const setIndexData = mockChannel.emit.mock.calls.find( + (call: [string, any]) => call[0] === SET_INDEX + )[1]; + expect(Object.keys(setIndexData.entries)).toMatchInlineSnapshot(` + Array [ + "component-a--docs", + "component-a--story-one", + "component-a--story-two", + "component-b--docs", + "component-b--story-three", + "component-c--docs", + "component-c--story-one", + "component-c--story-two", + ] + `); + }); + }); }); describe('auto-title', () => { diff --git a/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts b/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts index 49482300b58..bc267e26755 100644 --- a/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts +++ b/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts @@ -441,6 +441,39 @@ describe('StoryIndexGenerator', () => { `); }); + it('generates an entry for every CSF file when docsOptions.docsPage = automatic', async () => { + const specifier: CoreCommon_NormalizedStoriesSpecifier = normalizeStoriesEntry( + './src/**/*.stories.(ts|js|jsx)', + options + ); + + const generator = new StoryIndexGenerator([specifier], { + ...docsPageOptions, + docs: { + ...docsPageOptions.docs, + docsPage: 'automatic', + }, + }); + await generator.initialize(); + + expect(Object.keys((await generator.getIndex()).entries)).toMatchInlineSnapshot(` + Array [ + "a--docs", + "a--story-one", + "b--docs", + "b--story-one", + "d--docs", + "d--story-one", + "first-nested-deeply-f--docs", + "first-nested-deeply-f--story-one", + "nested-button--docs", + "nested-button--story-one", + "second-nested-g--docs", + "second-nested-g--story-one", + ] + `); + }); + it('does not generate a docs page entry if there is a standalone entry with the same name', async () => { const csfSpecifier: CoreCommon_NormalizedStoriesSpecifier = normalizeStoriesEntry( './src/A.stories.js', diff --git a/code/lib/core-server/src/utils/StoryIndexGenerator.ts b/code/lib/core-server/src/utils/StoryIndexGenerator.ts index 2fd5658b68c..14f2a8f9629 100644 --- a/code/lib/core-server/src/utils/StoryIndexGenerator.ts +++ b/code/lib/core-server/src/utils/StoryIndexGenerator.ts @@ -224,12 +224,12 @@ export class StoryIndexGenerator { }); if (this.options.docs.enabled && csf.stories.length) { + const { docsPage } = this.options.docs; + const docsPageOptedIn = + docsPage === 'automatic' || (docsPage && componentTags.includes('docsPage')); // We always add a template for *.stories.mdx, but only if docs page is enabled for // regular CSF files - if ( - storyIndexer.addDocsTemplate || - (this.options.docs.docsPage && componentTags.includes('docsPage')) - ) { + if (storyIndexer.addDocsTemplate || docsPageOptedIn) { const name = this.options.docs.defaultName; const id = toId(csf.meta.title, name); entries.unshift({ diff --git a/code/lib/types/src/modules/core-common.ts b/code/lib/types/src/modules/core-common.ts index 1732dcc749d..c362c026661 100644 --- a/code/lib/types/src/modules/core-common.ts +++ b/code/lib/types/src/modules/core-common.ts @@ -296,9 +296,10 @@ export type DocsOptions = { */ defaultName?: string; /** - * Should we generate a docs entry per CSF file? + * Should we generate a docs entry per CSF file with the `docsPage` tag? + * Set to 'automatic' to generate an entry irrespective of tag. */ - docsPage?: boolean; + docsPage?: boolean | 'automatic'; /** * Only show doc entries in the side bar (usually set with the `--docs` CLI flag) */ From beed7aa4474369832a8bbcf212317ee55a8b15bf Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Wed, 2 Nov 2022 16:52:03 +1100 Subject: [PATCH 20/36] Add migration notes about docs page opt-in --- MIGRATION.md | 27 +++++++++++++++++++-------- 1 file changed, 19 insertions(+), 8 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index 0bb29fbe5c0..400bbdf8fe7 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -463,8 +463,8 @@ module.exports = { framework: { name: '@storybook/react-webpack5', options: { fastRefresh: true }, - } -} + }, +}; ``` #### Framework standalone build moved @@ -657,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 @@ -754,17 +766,16 @@ module.exports = { use: [ { loader: require.resolve('@storybook/source-loader'), - options: {} /* your sourceLoaderOptions here */ + 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. From 43f75b1feda697ba39227cfc9c731ba94cc8b01e Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Wed, 2 Nov 2022 17:01:55 +1100 Subject: [PATCH 21/36] Add docsPage tag to all Button/Header CLI templates --- code/frameworks/angular/template/cli/Button.stories.ts | 2 ++ code/frameworks/angular/template/cli/Header.stories.ts | 2 ++ code/frameworks/nextjs/template/cli/js/Button.stories.jsx | 2 ++ code/frameworks/nextjs/template/cli/js/Header.stories.jsx | 2 ++ code/frameworks/nextjs/template/cli/ts/Button.stories.ts | 2 ++ code/frameworks/nextjs/template/cli/ts/Header.stories.ts | 2 ++ code/renderers/html/template/cli/js/Button.stories.js | 2 ++ code/renderers/html/template/cli/js/Header.stories.js | 2 ++ code/renderers/html/template/cli/ts/Button.stories.ts | 2 ++ code/renderers/html/template/cli/ts/Header.stories.ts | 2 ++ code/renderers/preact/template/cli/Button.stories.jsx | 2 ++ code/renderers/preact/template/cli/Header.stories.jsx | 2 ++ code/renderers/react/template/cli/js/Button.stories.js | 2 ++ code/renderers/react/template/cli/js/Header.stories.js | 2 ++ code/renderers/react/template/cli/ts/Button.stories.ts | 2 ++ code/renderers/react/template/cli/ts/Header.stories.ts | 2 ++ code/renderers/svelte/template/cli/Button.stories.js | 2 ++ code/renderers/svelte/template/cli/Header.stories.js | 2 ++ code/renderers/vue/template/cli/Button.stories.js | 2 ++ code/renderers/vue/template/cli/Header.stories.js | 2 ++ code/renderers/vue3/template/cli/Button.stories.js | 2 ++ code/renderers/vue3/template/cli/Header.stories.js | 2 ++ code/renderers/web-components/template/cli/js/Button.stories.js | 2 ++ code/renderers/web-components/template/cli/js/Header.stories.js | 2 ++ code/renderers/web-components/template/cli/ts/Button.stories.ts | 2 ++ code/renderers/web-components/template/cli/ts/Header.stories.ts | 2 ++ 26 files changed, 52 insertions(+) diff --git a/code/frameworks/angular/template/cli/Button.stories.ts b/code/frameworks/angular/template/cli/Button.stories.ts index 2af06574ce9..b7154d6c871 100644 --- a/code/frameworks/angular/template/cli/Button.stories.ts +++ b/code/frameworks/angular/template/cli/Button.stories.ts @@ -5,6 +5,8 @@ import Button from './button.component'; const meta: Meta