From c46ac9c8f9cc7ed0075a291cfb4c314646813e69 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 3 Nov 2021 15:58:39 +0100 Subject: [PATCH 01/20] add eslint-plugin-storybook --- .eslintrc.js | 13 +++++ package.json | 1 + yarn.lock | 135 ++++++++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 148 insertions(+), 1 deletion(-) diff --git a/.eslintrc.js b/.eslintrc.js index 6c1acdeef112..8a285c586a71 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,10 +1,23 @@ module.exports = { root: true, extends: ['@storybook/eslint-config-storybook'], + plugins: ['storybook'], rules: { '@typescript-eslint/ban-ts-comment': 'warn', }, overrides: [ + { + files: [ + 'examples/official-storybook/**/*.stories.@(js|jsx|ts|tsx)', + 'addons/interactions/**/*.stories.@(js|jsx|ts|tsx)', + ], + extends: ['plugin:storybook/recommended'], + + // 4) Optional: you can override specific rules here + rules: { + 'storybook/no-redundant-story-name': 'warn', + }, + }, { files: [ '**/__tests__/**', diff --git a/package.json b/package.json index 2c0f84e90e7e..d255f1ee1ba9 100644 --- a/package.json +++ b/package.json @@ -226,6 +226,7 @@ "eslint-plugin-cypress": "^2.11.2", "eslint-plugin-import": "^2.22.1", "eslint-plugin-react": "^7.22.0", + "eslint-plugin-storybook": "0.0.1-alpha.1", "eslint-teamcity": "^3.0.1", "esm": "^3.2.25", "express": "^4.17.1", diff --git a/yarn.lock b/yarn.lock index a87531cdf71c..ecff42e7814e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8874,6 +8874,7 @@ __metadata: eslint-plugin-cypress: ^2.11.2 eslint-plugin-import: ^2.22.1 eslint-plugin-react: ^7.22.0 + eslint-plugin-storybook: 0.0.1-alpha.1 eslint-teamcity: ^3.0.1 esm: ^3.2.25 express: ^4.17.1 @@ -10304,6 +10305,13 @@ __metadata: languageName: node linkType: hard +"@types/json-schema@npm:^7.0.9": + version: 7.0.9 + resolution: "@types/json-schema@npm:7.0.9" + checksum: 46a9e92b7922495a50f55632d802f7e7ab2dffd76b3f894baf7b28012e73983df832977bedd748aa9a2bc8400c6e8659ca39faf6ccd93d71d41d5b0293338a0e + languageName: node + linkType: hard + "@types/json5@npm:^0.0.29": version: 0.0.29 resolution: "@types/json5@npm:0.0.29" @@ -11181,6 +11189,22 @@ __metadata: languageName: node linkType: hard +"@typescript-eslint/experimental-utils@npm:^5.3.0": + version: 5.3.0 + resolution: "@typescript-eslint/experimental-utils@npm:5.3.0" + dependencies: + "@types/json-schema": ^7.0.9 + "@typescript-eslint/scope-manager": 5.3.0 + "@typescript-eslint/types": 5.3.0 + "@typescript-eslint/typescript-estree": 5.3.0 + eslint-scope: ^5.1.1 + eslint-utils: ^3.0.0 + peerDependencies: + eslint: "*" + checksum: a7a0be6ff6b1a345437a8097cac4a0d100e24a8a0906c191e22c42f9e2fef67bce5999747a451a11c2c9728d0ef91177d1df1f2709289e71d06e9f75c33bd9e8 + languageName: node + linkType: hard + "@typescript-eslint/parser@npm:^2.10.0, @typescript-eslint/parser@npm:^2.30.0": version: 2.34.0 resolution: "@typescript-eslint/parser@npm:2.34.0" @@ -11225,6 +11249,16 @@ __metadata: languageName: node linkType: hard +"@typescript-eslint/scope-manager@npm:5.3.0": + version: 5.3.0 + resolution: "@typescript-eslint/scope-manager@npm:5.3.0" + dependencies: + "@typescript-eslint/types": 5.3.0 + "@typescript-eslint/visitor-keys": 5.3.0 + checksum: e25f1f0484da4f11d9868e93711be37e460fcef88da707b8fcd8eb0d1fddcbefd13531539a4ad025bac80291afe3778dac4b083955ead63c7081c627856f4a69 + languageName: node + linkType: hard + "@typescript-eslint/types@npm:3.10.1": version: 3.10.1 resolution: "@typescript-eslint/types@npm:3.10.1" @@ -11239,6 +11273,13 @@ __metadata: languageName: node linkType: hard +"@typescript-eslint/types@npm:5.3.0": + version: 5.3.0 + resolution: "@typescript-eslint/types@npm:5.3.0" + checksum: 861cb143a2d09b185d6fb38eb725d4569beb23f29fc7aafb6002720c9ca981b04b6925d33a3537e6d7ee8ce3d5bb277a42ad3f2f1999cdc15fbe86dd70ff5d7a + languageName: node + linkType: hard + "@typescript-eslint/typescript-estree@npm:2.34.0": version: 2.34.0 resolution: "@typescript-eslint/typescript-estree@npm:2.34.0" @@ -11294,6 +11335,24 @@ __metadata: languageName: node linkType: hard +"@typescript-eslint/typescript-estree@npm:5.3.0": + version: 5.3.0 + resolution: "@typescript-eslint/typescript-estree@npm:5.3.0" + dependencies: + "@typescript-eslint/types": 5.3.0 + "@typescript-eslint/visitor-keys": 5.3.0 + debug: ^4.3.2 + globby: ^11.0.4 + is-glob: ^4.0.3 + semver: ^7.3.5 + tsutils: ^3.21.0 + peerDependenciesMeta: + typescript: + optional: true + checksum: 57ffde834f9a7d5fe0795b053a6643cbb314391fb4258d8fedb61f85cae160d401077fe076feb28708ddfa2250fa1ad2c4be68cef30efab5d1ffd9af6368920b + languageName: node + linkType: hard + "@typescript-eslint/visitor-keys@npm:3.10.1": version: 3.10.1 resolution: "@typescript-eslint/visitor-keys@npm:3.10.1" @@ -11313,6 +11372,16 @@ __metadata: languageName: node linkType: hard +"@typescript-eslint/visitor-keys@npm:5.3.0": + version: 5.3.0 + resolution: "@typescript-eslint/visitor-keys@npm:5.3.0" + dependencies: + "@typescript-eslint/types": 5.3.0 + eslint-visitor-keys: ^3.0.0 + checksum: db8e831da1aa280ff52c72add74d0c427d0f45c377d3dd2b362ab73dc911cb5d213c65481fa9a31acb695c63a45582544dda86c47421cd88f8e19fd9d60ce9d7 + languageName: node + linkType: hard + "@verdaccio/commons-api@npm:9.7.1, @verdaccio/commons-api@npm:^9.7.1": version: 9.7.1 resolution: "@verdaccio/commons-api@npm:9.7.1" @@ -21951,6 +22020,18 @@ __metadata: languageName: node linkType: hard +"eslint-plugin-storybook@npm:0.0.1-alpha.1": + version: 0.0.1-alpha.1 + resolution: "eslint-plugin-storybook@npm:0.0.1-alpha.1" + dependencies: + "@typescript-eslint/experimental-utils": ^5.3.0 + requireindex: ^1.1.0 + peerDependencies: + eslint: ">=6" + checksum: d5b4e37df9c6a16b6dfa5d43f65cbe1b0fa07f69d2202b3966a52a56105b5991f59ce3606e2aceb04081007bb63be0b8c2d8ddd1b24233fea31c128a77248c13 + languageName: node + linkType: hard + "eslint-plugin-testing-library@npm:^3.9.2": version: 3.10.1 resolution: "eslint-plugin-testing-library@npm:3.10.1" @@ -22009,6 +22090,17 @@ __metadata: languageName: node linkType: hard +"eslint-utils@npm:^3.0.0": + version: 3.0.0 + resolution: "eslint-utils@npm:3.0.0" + dependencies: + eslint-visitor-keys: ^2.0.0 + peerDependencies: + eslint: ">=5" + checksum: 45aa2b63667a8d9b474c98c28af908d0a592bed1a4568f3145cd49fb5d9510f545327ec95561625290313fe126e6d7bdfe3fdbdb6f432689fab6b9497d3bfb52 + languageName: node + linkType: hard + "eslint-visitor-keys@npm:^1.0.0, eslint-visitor-keys@npm:^1.1.0, eslint-visitor-keys@npm:^1.3.0": version: 1.3.0 resolution: "eslint-visitor-keys@npm:1.3.0" @@ -22023,6 +22115,13 @@ __metadata: languageName: node linkType: hard +"eslint-visitor-keys@npm:^3.0.0": + version: 3.0.0 + resolution: "eslint-visitor-keys@npm:3.0.0" + checksum: 3e336d0aa7167e47fc3f66b378c8677842fec39f044b3db3be5f1f96fbad2927580973c9d11f79e9beebadb3f823383bf0041df5052ee378d72649492b13eb61 + languageName: node + linkType: hard + "eslint-webpack-plugin@npm:^2.5.2": version: 2.5.2 resolution: "eslint-webpack-plugin@npm:2.5.2" @@ -24692,6 +24791,20 @@ fsevents@^1.2.7: languageName: node linkType: hard +"globby@npm:^11.0.4": + version: 11.0.4 + resolution: "globby@npm:11.0.4" + dependencies: + array-union: ^2.1.0 + dir-glob: ^3.0.1 + fast-glob: ^3.1.1 + ignore: ^5.1.4 + merge2: ^1.3.0 + slash: ^3.0.0 + checksum: de5f828c834baf75e3bd3c629bb3a64d1dfa9965831d0b105b728f9184284c6ba2b0d42e24862b411abc18e6e0af12e60880b3a62e096752de3426f2839f9ef7 + languageName: node + linkType: hard + "globby@npm:^12.0.0": version: 12.0.1 resolution: "globby@npm:12.0.1" @@ -26986,6 +27099,15 @@ fsevents@^1.2.7: languageName: node linkType: hard +"is-glob@npm:^4.0.3": + version: 4.0.3 + resolution: "is-glob@npm:4.0.3" + dependencies: + is-extglob: ^2.1.1 + checksum: 17fb4014e22be3bbecea9b2e3a76e9e34ff645466be702f1693e8f1ee1adac84710d0be0bd9f967d6354036fd51ab7c2741d954d6e91dae6bb69714de92c197a + languageName: node + linkType: hard + "is-hexadecimal@npm:^1.0.0": version: 1.0.4 resolution: "is-hexadecimal@npm:1.0.4" @@ -39403,7 +39525,7 @@ fsevents@^1.2.7: languageName: node linkType: hard -"requireindex@npm:^1.2.0": +"requireindex@npm:^1.1.0, requireindex@npm:^1.2.0": version: 1.2.0 resolution: "requireindex@npm:1.2.0" checksum: 7fb42aed73bf8de9acc4d6716cf07acc7fbe180e58729433bafcf702e76e7bb10e54f8266c06bfec62d752e0ac14d50e8758833de539e6f4e2cd642077866153 @@ -43848,6 +43970,17 @@ resolve@1.19.0: languageName: node linkType: hard +"tsutils@npm:^3.21.0": + version: 3.21.0 + resolution: "tsutils@npm:3.21.0" + dependencies: + tslib: ^1.8.1 + peerDependencies: + typescript: ">=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta" + checksum: 02f19e458ec78ead8fffbf711f834ad8ecd2cc6ade4ec0320790713dccc0a412b99e7fd907c4cda2a1dc602c75db6f12e0108e87a5afad4b2f9e90a24cabd5a2 + languageName: node + linkType: hard + "tty-browserify@npm:0.0.0": version: 0.0.0 resolution: "tty-browserify@npm:0.0.0" From 77f7775cc6d5680f5206f30699a1ca9fe1a2e189 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 3 Nov 2021 16:05:44 +0100 Subject: [PATCH 02/20] add temporary lint:storybook command --- package.json | 5 +- yarn.lock | 138 +++------------------------------------------------ 2 files changed, 9 insertions(+), 134 deletions(-) diff --git a/package.json b/package.json index d255f1ee1ba9..ed592a5133f6 100644 --- a/package.json +++ b/package.json @@ -68,7 +68,8 @@ "github-release": "github-release-from-changelog", "generate-repros": "zx scripts/repros-generator/index.mjs", "lint": "yarn lint:js . && yarn lint:md .", - "lint:js": "cross-env NODE_ENV=production eslint --cache --cache-location=.cache/eslint --ext .js,.jsx,.json,.html,.ts,.tsx,.mjs --report-unused-disable-directives", + "lint:storybook": "cross-env NODE_ENV=production eslint addons/interactions --cache --cache-location=.cache/eslint --ext .js,.jsx,.json,.html,.ts,.tsx,.mjs --report-unused-disable-directives", + "lint:js": "cross-env NODE_ENV=production eslint --cache --cache-location=.cache/eslint --ext .js,.jsx,.json,.html,.ts,.tsx,.mjs --report-unused-disable-directives", "lint:md": "remark -q", "lint:package": "sort-package-json", "local-registry": "ts-node --project=./scripts/tsconfig.json ./scripts/run-registry.ts ", @@ -226,7 +227,7 @@ "eslint-plugin-cypress": "^2.11.2", "eslint-plugin-import": "^2.22.1", "eslint-plugin-react": "^7.22.0", - "eslint-plugin-storybook": "0.0.1-alpha.1", + "eslint-plugin-storybook": "link:../../NewLine/eslint-plugin-storybook/", "eslint-teamcity": "^3.0.1", "esm": "^3.2.25", "express": "^4.17.1", diff --git a/yarn.lock b/yarn.lock index ecff42e7814e..c86720e39792 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8874,7 +8874,7 @@ __metadata: eslint-plugin-cypress: ^2.11.2 eslint-plugin-import: ^2.22.1 eslint-plugin-react: ^7.22.0 - eslint-plugin-storybook: 0.0.1-alpha.1 + eslint-plugin-storybook: "link:../../NewLine/eslint-plugin-storybook/" eslint-teamcity: ^3.0.1 esm: ^3.2.25 express: ^4.17.1 @@ -10305,13 +10305,6 @@ __metadata: languageName: node linkType: hard -"@types/json-schema@npm:^7.0.9": - version: 7.0.9 - resolution: "@types/json-schema@npm:7.0.9" - checksum: 46a9e92b7922495a50f55632d802f7e7ab2dffd76b3f894baf7b28012e73983df832977bedd748aa9a2bc8400c6e8659ca39faf6ccd93d71d41d5b0293338a0e - languageName: node - linkType: hard - "@types/json5@npm:^0.0.29": version: 0.0.29 resolution: "@types/json5@npm:0.0.29" @@ -11189,22 +11182,6 @@ __metadata: languageName: node linkType: hard -"@typescript-eslint/experimental-utils@npm:^5.3.0": - version: 5.3.0 - resolution: "@typescript-eslint/experimental-utils@npm:5.3.0" - dependencies: - "@types/json-schema": ^7.0.9 - "@typescript-eslint/scope-manager": 5.3.0 - "@typescript-eslint/types": 5.3.0 - "@typescript-eslint/typescript-estree": 5.3.0 - eslint-scope: ^5.1.1 - eslint-utils: ^3.0.0 - peerDependencies: - eslint: "*" - checksum: a7a0be6ff6b1a345437a8097cac4a0d100e24a8a0906c191e22c42f9e2fef67bce5999747a451a11c2c9728d0ef91177d1df1f2709289e71d06e9f75c33bd9e8 - languageName: node - linkType: hard - "@typescript-eslint/parser@npm:^2.10.0, @typescript-eslint/parser@npm:^2.30.0": version: 2.34.0 resolution: "@typescript-eslint/parser@npm:2.34.0" @@ -11249,16 +11226,6 @@ __metadata: languageName: node linkType: hard -"@typescript-eslint/scope-manager@npm:5.3.0": - version: 5.3.0 - resolution: "@typescript-eslint/scope-manager@npm:5.3.0" - dependencies: - "@typescript-eslint/types": 5.3.0 - "@typescript-eslint/visitor-keys": 5.3.0 - checksum: e25f1f0484da4f11d9868e93711be37e460fcef88da707b8fcd8eb0d1fddcbefd13531539a4ad025bac80291afe3778dac4b083955ead63c7081c627856f4a69 - languageName: node - linkType: hard - "@typescript-eslint/types@npm:3.10.1": version: 3.10.1 resolution: "@typescript-eslint/types@npm:3.10.1" @@ -11273,13 +11240,6 @@ __metadata: languageName: node linkType: hard -"@typescript-eslint/types@npm:5.3.0": - version: 5.3.0 - resolution: "@typescript-eslint/types@npm:5.3.0" - checksum: 861cb143a2d09b185d6fb38eb725d4569beb23f29fc7aafb6002720c9ca981b04b6925d33a3537e6d7ee8ce3d5bb277a42ad3f2f1999cdc15fbe86dd70ff5d7a - languageName: node - linkType: hard - "@typescript-eslint/typescript-estree@npm:2.34.0": version: 2.34.0 resolution: "@typescript-eslint/typescript-estree@npm:2.34.0" @@ -11335,24 +11295,6 @@ __metadata: languageName: node linkType: hard -"@typescript-eslint/typescript-estree@npm:5.3.0": - version: 5.3.0 - resolution: "@typescript-eslint/typescript-estree@npm:5.3.0" - dependencies: - "@typescript-eslint/types": 5.3.0 - "@typescript-eslint/visitor-keys": 5.3.0 - debug: ^4.3.2 - globby: ^11.0.4 - is-glob: ^4.0.3 - semver: ^7.3.5 - tsutils: ^3.21.0 - peerDependenciesMeta: - typescript: - optional: true - checksum: 57ffde834f9a7d5fe0795b053a6643cbb314391fb4258d8fedb61f85cae160d401077fe076feb28708ddfa2250fa1ad2c4be68cef30efab5d1ffd9af6368920b - languageName: node - linkType: hard - "@typescript-eslint/visitor-keys@npm:3.10.1": version: 3.10.1 resolution: "@typescript-eslint/visitor-keys@npm:3.10.1" @@ -11372,16 +11314,6 @@ __metadata: languageName: node linkType: hard -"@typescript-eslint/visitor-keys@npm:5.3.0": - version: 5.3.0 - resolution: "@typescript-eslint/visitor-keys@npm:5.3.0" - dependencies: - "@typescript-eslint/types": 5.3.0 - eslint-visitor-keys: ^3.0.0 - checksum: db8e831da1aa280ff52c72add74d0c427d0f45c377d3dd2b362ab73dc911cb5d213c65481fa9a31acb695c63a45582544dda86c47421cd88f8e19fd9d60ce9d7 - languageName: node - linkType: hard - "@verdaccio/commons-api@npm:9.7.1, @verdaccio/commons-api@npm:^9.7.1": version: 9.7.1 resolution: "@verdaccio/commons-api@npm:9.7.1" @@ -22020,17 +21952,11 @@ __metadata: languageName: node linkType: hard -"eslint-plugin-storybook@npm:0.0.1-alpha.1": - version: 0.0.1-alpha.1 - resolution: "eslint-plugin-storybook@npm:0.0.1-alpha.1" - dependencies: - "@typescript-eslint/experimental-utils": ^5.3.0 - requireindex: ^1.1.0 - peerDependencies: - eslint: ">=6" - checksum: d5b4e37df9c6a16b6dfa5d43f65cbe1b0fa07f69d2202b3966a52a56105b5991f59ce3606e2aceb04081007bb63be0b8c2d8ddd1b24233fea31c128a77248c13 +"eslint-plugin-storybook@link:../../NewLine/eslint-plugin-storybook/::locator=%40storybook%2Froot%40workspace%3A.": + version: 0.0.0-use.local + resolution: "eslint-plugin-storybook@link:../../NewLine/eslint-plugin-storybook/::locator=%40storybook%2Froot%40workspace%3A." languageName: node - linkType: hard + linkType: soft "eslint-plugin-testing-library@npm:^3.9.2": version: 3.10.1 @@ -22090,17 +22016,6 @@ __metadata: languageName: node linkType: hard -"eslint-utils@npm:^3.0.0": - version: 3.0.0 - resolution: "eslint-utils@npm:3.0.0" - dependencies: - eslint-visitor-keys: ^2.0.0 - peerDependencies: - eslint: ">=5" - checksum: 45aa2b63667a8d9b474c98c28af908d0a592bed1a4568f3145cd49fb5d9510f545327ec95561625290313fe126e6d7bdfe3fdbdb6f432689fab6b9497d3bfb52 - languageName: node - linkType: hard - "eslint-visitor-keys@npm:^1.0.0, eslint-visitor-keys@npm:^1.1.0, eslint-visitor-keys@npm:^1.3.0": version: 1.3.0 resolution: "eslint-visitor-keys@npm:1.3.0" @@ -22115,13 +22030,6 @@ __metadata: languageName: node linkType: hard -"eslint-visitor-keys@npm:^3.0.0": - version: 3.0.0 - resolution: "eslint-visitor-keys@npm:3.0.0" - checksum: 3e336d0aa7167e47fc3f66b378c8677842fec39f044b3db3be5f1f96fbad2927580973c9d11f79e9beebadb3f823383bf0041df5052ee378d72649492b13eb61 - languageName: node - linkType: hard - "eslint-webpack-plugin@npm:^2.5.2": version: 2.5.2 resolution: "eslint-webpack-plugin@npm:2.5.2" @@ -24791,20 +24699,6 @@ fsevents@^1.2.7: languageName: node linkType: hard -"globby@npm:^11.0.4": - version: 11.0.4 - resolution: "globby@npm:11.0.4" - dependencies: - array-union: ^2.1.0 - dir-glob: ^3.0.1 - fast-glob: ^3.1.1 - ignore: ^5.1.4 - merge2: ^1.3.0 - slash: ^3.0.0 - checksum: de5f828c834baf75e3bd3c629bb3a64d1dfa9965831d0b105b728f9184284c6ba2b0d42e24862b411abc18e6e0af12e60880b3a62e096752de3426f2839f9ef7 - languageName: node - linkType: hard - "globby@npm:^12.0.0": version: 12.0.1 resolution: "globby@npm:12.0.1" @@ -27099,15 +26993,6 @@ fsevents@^1.2.7: languageName: node linkType: hard -"is-glob@npm:^4.0.3": - version: 4.0.3 - resolution: "is-glob@npm:4.0.3" - dependencies: - is-extglob: ^2.1.1 - checksum: 17fb4014e22be3bbecea9b2e3a76e9e34ff645466be702f1693e8f1ee1adac84710d0be0bd9f967d6354036fd51ab7c2741d954d6e91dae6bb69714de92c197a - languageName: node - linkType: hard - "is-hexadecimal@npm:^1.0.0": version: 1.0.4 resolution: "is-hexadecimal@npm:1.0.4" @@ -39525,7 +39410,7 @@ fsevents@^1.2.7: languageName: node linkType: hard -"requireindex@npm:^1.1.0, requireindex@npm:^1.2.0": +"requireindex@npm:^1.2.0": version: 1.2.0 resolution: "requireindex@npm:1.2.0" checksum: 7fb42aed73bf8de9acc4d6716cf07acc7fbe180e58729433bafcf702e76e7bb10e54f8266c06bfec62d752e0ac14d50e8758833de539e6f4e2cd642077866153 @@ -43970,17 +43855,6 @@ resolve@1.19.0: languageName: node linkType: hard -"tsutils@npm:^3.21.0": - version: 3.21.0 - resolution: "tsutils@npm:3.21.0" - dependencies: - tslib: ^1.8.1 - peerDependencies: - typescript: ">=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta" - checksum: 02f19e458ec78ead8fffbf711f834ad8ecd2cc6ade4ec0320790713dccc0a412b99e7fd907c4cda2a1dc602c75db6f12e0108e87a5afad4b2f9e90a24cabd5a2 - languageName: node - linkType: hard - "tty-browserify@npm:0.0.0": version: 0.0.0 resolution: "tty-browserify@npm:0.0.0" From cdc8d6d8c8244baa45d99ee77a2441da20fc05cc Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 3 Nov 2021 16:07:47 +0100 Subject: [PATCH 03/20] link eslint-plugin locally --- package.json | 2 +- yarn.lock | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index ed592a5133f6..82a47c3246f2 100644 --- a/package.json +++ b/package.json @@ -227,7 +227,7 @@ "eslint-plugin-cypress": "^2.11.2", "eslint-plugin-import": "^2.22.1", "eslint-plugin-react": "^7.22.0", - "eslint-plugin-storybook": "link:../../NewLine/eslint-plugin-storybook/", + "eslint-plugin-storybook": "link:../eslint-plugin-storybook/", "eslint-teamcity": "^3.0.1", "esm": "^3.2.25", "express": "^4.17.1", diff --git a/yarn.lock b/yarn.lock index c86720e39792..947df9074531 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8874,7 +8874,7 @@ __metadata: eslint-plugin-cypress: ^2.11.2 eslint-plugin-import: ^2.22.1 eslint-plugin-react: ^7.22.0 - eslint-plugin-storybook: "link:../../NewLine/eslint-plugin-storybook/" + eslint-plugin-storybook: "link:../eslint-plugin-storybook/" eslint-teamcity: ^3.0.1 esm: ^3.2.25 express: ^4.17.1 @@ -21952,9 +21952,9 @@ __metadata: languageName: node linkType: hard -"eslint-plugin-storybook@link:../../NewLine/eslint-plugin-storybook/::locator=%40storybook%2Froot%40workspace%3A.": +"eslint-plugin-storybook@link:../eslint-plugin-storybook/::locator=%40storybook%2Froot%40workspace%3A.": version: 0.0.0-use.local - resolution: "eslint-plugin-storybook@link:../../NewLine/eslint-plugin-storybook/::locator=%40storybook%2Froot%40workspace%3A." + resolution: "eslint-plugin-storybook@link:../eslint-plugin-storybook/::locator=%40storybook%2Froot%40workspace%3A." languageName: node linkType: soft From e07cfb9fb1d5c06135cabd832b4b09a345a7166f Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Thu, 4 Nov 2021 15:51:56 +0800 Subject: [PATCH 04/20] Clarify sb extract documentation --- docs/workflows/storybook-composition.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/workflows/storybook-composition.md b/docs/workflows/storybook-composition.md index 06a03c6dff47..ee7596641f1c 100644 --- a/docs/workflows/storybook-composition.md +++ b/docs/workflows/storybook-composition.md @@ -64,7 +64,7 @@ You can also compose Storybooks based on the current development environment. Fo ### Improve your Storybook composition -So far we've covered how we can use composition with local or published Storybooks. One thing worth mentioning as your Storybook will grow in time with your own stories, or through composition with other Storybooks, is that you can optimize the deployment process by including the following command in your workflow: +So far we've covered how we can use composition with local or published Storybooks. One thing worth mentioning as your Storybook will grow in time with your own stories, or through composition with other Storybooks, is that you can optimize the deployment process by including the following command in your workflow, run from your project root: ```shell npx sb extract From bee152f388741389650568642a7cea297f9b9e42 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Thu, 11 Nov 2021 00:21:29 +0800 Subject: [PATCH 05/20] Upgrade eslint-plugin-storybook to official release --- package.json | 2 +- yarn.lock | 148 ++++++++++++++++++++++++++++++++++++++++++++++++--- 2 files changed, 143 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index 82a47c3246f2..b9b50476cd66 100644 --- a/package.json +++ b/package.json @@ -227,7 +227,7 @@ "eslint-plugin-cypress": "^2.11.2", "eslint-plugin-import": "^2.22.1", "eslint-plugin-react": "^7.22.0", - "eslint-plugin-storybook": "link:../eslint-plugin-storybook/", + "eslint-plugin-storybook": "0.2.2", "eslint-teamcity": "^3.0.1", "esm": "^3.2.25", "express": "^4.17.1", diff --git a/yarn.lock b/yarn.lock index 947df9074531..f78ff7ad2d91 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8224,6 +8224,15 @@ __metadata: languageName: node linkType: hard +"@storybook/csf@npm:^0.0.1": + version: 0.0.1 + resolution: "@storybook/csf@npm:0.0.1" + dependencies: + lodash: ^4.17.15 + checksum: 7b0f75763415f9147692a460b44417ee56ea9639433716a1fd4d1df4c8b0221cbc71b8da0fbed4dcecb3ccd6c7ed64be39f5c255c713539a6088a1d6488aaa24 + languageName: node + linkType: hard + "@storybook/design-system@npm:^5.4.7": version: 5.6.8 resolution: "@storybook/design-system@npm:5.6.8" @@ -8874,7 +8883,7 @@ __metadata: eslint-plugin-cypress: ^2.11.2 eslint-plugin-import: ^2.22.1 eslint-plugin-react: ^7.22.0 - eslint-plugin-storybook: "link:../eslint-plugin-storybook/" + eslint-plugin-storybook: 0.2.2 eslint-teamcity: ^3.0.1 esm: ^3.2.25 express: ^4.17.1 @@ -10305,6 +10314,13 @@ __metadata: languageName: node linkType: hard +"@types/json-schema@npm:^7.0.9": + version: 7.0.9 + resolution: "@types/json-schema@npm:7.0.9" + checksum: 46a9e92b7922495a50f55632d802f7e7ab2dffd76b3f894baf7b28012e73983df832977bedd748aa9a2bc8400c6e8659ca39faf6ccd93d71d41d5b0293338a0e + languageName: node + linkType: hard + "@types/json5@npm:^0.0.29": version: 0.0.29 resolution: "@types/json5@npm:0.0.29" @@ -11182,6 +11198,22 @@ __metadata: languageName: node linkType: hard +"@typescript-eslint/experimental-utils@npm:^5.3.0": + version: 5.3.1 + resolution: "@typescript-eslint/experimental-utils@npm:5.3.1" + dependencies: + "@types/json-schema": ^7.0.9 + "@typescript-eslint/scope-manager": 5.3.1 + "@typescript-eslint/types": 5.3.1 + "@typescript-eslint/typescript-estree": 5.3.1 + eslint-scope: ^5.1.1 + eslint-utils: ^3.0.0 + peerDependencies: + eslint: "*" + checksum: bc7d6c1a3467f31017983fd05d4ce1aa7a14b8e778ffadc69e3d2c4089e53d8caa0c95f15b431609a0af4875b811f4c1579edc6e7688f7578e40473a5685091f + languageName: node + linkType: hard + "@typescript-eslint/parser@npm:^2.10.0, @typescript-eslint/parser@npm:^2.30.0": version: 2.34.0 resolution: "@typescript-eslint/parser@npm:2.34.0" @@ -11226,6 +11258,16 @@ __metadata: languageName: node linkType: hard +"@typescript-eslint/scope-manager@npm:5.3.1": + version: 5.3.1 + resolution: "@typescript-eslint/scope-manager@npm:5.3.1" + dependencies: + "@typescript-eslint/types": 5.3.1 + "@typescript-eslint/visitor-keys": 5.3.1 + checksum: 3cc4f98de238d08e8691de1a251eeeabf0d56e543df9ff0bd2acab485921dab58c58fcba4dbe8618cfca7e6d92963464ceab948f8973a878e72f278968ca1263 + languageName: node + linkType: hard + "@typescript-eslint/types@npm:3.10.1": version: 3.10.1 resolution: "@typescript-eslint/types@npm:3.10.1" @@ -11240,6 +11282,13 @@ __metadata: languageName: node linkType: hard +"@typescript-eslint/types@npm:5.3.1": + version: 5.3.1 + resolution: "@typescript-eslint/types@npm:5.3.1" + checksum: 2aa1eef02f2a9f6aef303657dbeb14c57b6b84b622b11d52b8671316baa184bf008726f02c18ee0fb6c0157e34a6a442f211a454f2c5c201986bf79ffde283d8 + languageName: node + linkType: hard + "@typescript-eslint/typescript-estree@npm:2.34.0": version: 2.34.0 resolution: "@typescript-eslint/typescript-estree@npm:2.34.0" @@ -11295,6 +11344,24 @@ __metadata: languageName: node linkType: hard +"@typescript-eslint/typescript-estree@npm:5.3.1": + version: 5.3.1 + resolution: "@typescript-eslint/typescript-estree@npm:5.3.1" + dependencies: + "@typescript-eslint/types": 5.3.1 + "@typescript-eslint/visitor-keys": 5.3.1 + debug: ^4.3.2 + globby: ^11.0.4 + is-glob: ^4.0.3 + semver: ^7.3.5 + tsutils: ^3.21.0 + peerDependenciesMeta: + typescript: + optional: true + checksum: a57cf5c441772d48f71657b08712fb2333f98f52988bc03d5f15e1d12620a2eeea634209e88b427514f3ddf5a10b7713255b7b9f5582bd95ac3f0e749e03c510 + languageName: node + linkType: hard + "@typescript-eslint/visitor-keys@npm:3.10.1": version: 3.10.1 resolution: "@typescript-eslint/visitor-keys@npm:3.10.1" @@ -11314,6 +11381,16 @@ __metadata: languageName: node linkType: hard +"@typescript-eslint/visitor-keys@npm:5.3.1": + version: 5.3.1 + resolution: "@typescript-eslint/visitor-keys@npm:5.3.1" + dependencies: + "@typescript-eslint/types": 5.3.1 + eslint-visitor-keys: ^3.0.0 + checksum: cec2dc75b6b31d28ceeedebc4b31e86c98c8f4c01a876e1c64399e4f45b35fbfbbdeff5672d014fbcda1c6a0cbedca91957de6fa3cd83f9cdf24259abbd6c06b + languageName: node + linkType: hard + "@verdaccio/commons-api@npm:9.7.1, @verdaccio/commons-api@npm:^9.7.1": version: 9.7.1 resolution: "@verdaccio/commons-api@npm:9.7.1" @@ -21952,11 +22029,18 @@ __metadata: languageName: node linkType: hard -"eslint-plugin-storybook@link:../eslint-plugin-storybook/::locator=%40storybook%2Froot%40workspace%3A.": - version: 0.0.0-use.local - resolution: "eslint-plugin-storybook@link:../eslint-plugin-storybook/::locator=%40storybook%2Froot%40workspace%3A." +"eslint-plugin-storybook@npm:0.2.2": + version: 0.2.2 + resolution: "eslint-plugin-storybook@npm:0.2.2" + dependencies: + "@storybook/csf": ^0.0.1 + "@typescript-eslint/experimental-utils": ^5.3.0 + requireindex: ^1.1.0 + peerDependencies: + eslint: ">=6" + checksum: d20b62174c53db708c6deca2126d2e6971a00ebbf4f329e13bd2671d99d15e4ca07a666090b9dcea049216b3d5d078e0337372970beef22f074aa104306d94cb languageName: node - linkType: soft + linkType: hard "eslint-plugin-testing-library@npm:^3.9.2": version: 3.10.1 @@ -22016,6 +22100,17 @@ __metadata: languageName: node linkType: hard +"eslint-utils@npm:^3.0.0": + version: 3.0.0 + resolution: "eslint-utils@npm:3.0.0" + dependencies: + eslint-visitor-keys: ^2.0.0 + peerDependencies: + eslint: ">=5" + checksum: 45aa2b63667a8d9b474c98c28af908d0a592bed1a4568f3145cd49fb5d9510f545327ec95561625290313fe126e6d7bdfe3fdbdb6f432689fab6b9497d3bfb52 + languageName: node + linkType: hard + "eslint-visitor-keys@npm:^1.0.0, eslint-visitor-keys@npm:^1.1.0, eslint-visitor-keys@npm:^1.3.0": version: 1.3.0 resolution: "eslint-visitor-keys@npm:1.3.0" @@ -22030,6 +22125,13 @@ __metadata: languageName: node linkType: hard +"eslint-visitor-keys@npm:^3.0.0": + version: 3.1.0 + resolution: "eslint-visitor-keys@npm:3.1.0" + checksum: ba23efd2a273cb5a0794ea76669cbe95892bed5d2e165e7744db6a81ede74f4239cf73d142016421d8297b72000486e4b41bba3078eccb9ef82ae0b7e06e9282 + languageName: node + linkType: hard + "eslint-webpack-plugin@npm:^2.5.2": version: 2.5.2 resolution: "eslint-webpack-plugin@npm:2.5.2" @@ -24699,6 +24801,20 @@ fsevents@^1.2.7: languageName: node linkType: hard +"globby@npm:^11.0.4": + version: 11.0.4 + resolution: "globby@npm:11.0.4" + dependencies: + array-union: ^2.1.0 + dir-glob: ^3.0.1 + fast-glob: ^3.1.1 + ignore: ^5.1.4 + merge2: ^1.3.0 + slash: ^3.0.0 + checksum: de5f828c834baf75e3bd3c629bb3a64d1dfa9965831d0b105b728f9184284c6ba2b0d42e24862b411abc18e6e0af12e60880b3a62e096752de3426f2839f9ef7 + languageName: node + linkType: hard + "globby@npm:^12.0.0": version: 12.0.1 resolution: "globby@npm:12.0.1" @@ -26993,6 +27109,15 @@ fsevents@^1.2.7: languageName: node linkType: hard +"is-glob@npm:^4.0.3": + version: 4.0.3 + resolution: "is-glob@npm:4.0.3" + dependencies: + is-extglob: ^2.1.1 + checksum: 17fb4014e22be3bbecea9b2e3a76e9e34ff645466be702f1693e8f1ee1adac84710d0be0bd9f967d6354036fd51ab7c2741d954d6e91dae6bb69714de92c197a + languageName: node + linkType: hard + "is-hexadecimal@npm:^1.0.0": version: 1.0.4 resolution: "is-hexadecimal@npm:1.0.4" @@ -39410,7 +39535,7 @@ fsevents@^1.2.7: languageName: node linkType: hard -"requireindex@npm:^1.2.0": +"requireindex@npm:^1.1.0, requireindex@npm:^1.2.0": version: 1.2.0 resolution: "requireindex@npm:1.2.0" checksum: 7fb42aed73bf8de9acc4d6716cf07acc7fbe180e58729433bafcf702e76e7bb10e54f8266c06bfec62d752e0ac14d50e8758833de539e6f4e2cd642077866153 @@ -43855,6 +43980,17 @@ resolve@1.19.0: languageName: node linkType: hard +"tsutils@npm:^3.21.0": + version: 3.21.0 + resolution: "tsutils@npm:3.21.0" + dependencies: + tslib: ^1.8.1 + peerDependencies: + typescript: ">=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta" + checksum: 02f19e458ec78ead8fffbf711f834ad8ecd2cc6ade4ec0320790713dccc0a412b99e7fd907c4cda2a1dc602c75db6f12e0108e87a5afad4b2f9e90a24cabd5a2 + languageName: node + linkType: hard + "tty-browserify@npm:0.0.0": version: 0.0.0 resolution: "tty-browserify@npm:0.0.0" From 0d7a96574f7c32e1023096a051e80f72479f6617 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Thu, 11 Nov 2021 00:22:27 +0800 Subject: [PATCH 06/20] Attempt to fix some linting errors --- .../addon-docs/csf-with-mdx-docs.stories.js | 1 + .../stories/addon-storyshots.stories.js | 17 +++++++++++------ .../stories/core/unicode.stories.js | 1 + .../stories/demo/setup.stories.tsx | 3 +-- .../stories/other-dirname.stories.js | 9 ++++----- 5 files changed, 18 insertions(+), 13 deletions(-) diff --git a/examples/official-storybook/stories/addon-docs/csf-with-mdx-docs.stories.js b/examples/official-storybook/stories/addon-docs/csf-with-mdx-docs.stories.js index a64a24f19564..e4963c85d93a 100644 --- a/examples/official-storybook/stories/addon-docs/csf-with-mdx-docs.stories.js +++ b/examples/official-storybook/stories/addon-docs/csf-with-mdx-docs.stories.js @@ -1,3 +1,4 @@ +/* eslint-disable storybook/default-exports */ import React from 'react'; import { Button } from '@storybook/react/demo'; diff --git a/examples/official-storybook/stories/addon-storyshots.stories.js b/examples/official-storybook/stories/addon-storyshots.stories.js index eaf56417ff5a..21e5499aa6a7 100644 --- a/examples/official-storybook/stories/addon-storyshots.stories.js +++ b/examples/official-storybook/stories/addon-storyshots.stories.js @@ -1,7 +1,8 @@ +/* eslint-disable storybook/await-interactions storybook/use-expect */ import React, { useState } from 'react'; import { styled } from '@storybook/theming'; -const Block = styled.div({ +const BlockDiv = styled.div({ display: 'inline-block', height: 400, width: 400, @@ -12,18 +13,22 @@ export default { title: 'Addons/Storyshots', }; -export const block = () => { +export const Block = () => { const [hover, setHover] = useState(false); return ( - setHover(true)} onMouseLeave={() => setHover(false)}> + setHover(true)} + onMouseLeave={() => setHover(false)} + > {hover && 'I am hovered'} - + ); }; -block.storyName = 'Block story'; +Block.storyName = 'Block story'; -block.parameters = { +Block.parameters = { async puppeteerTest(page) { const element = await page.$('[data-test-block]'); await element.hover(); diff --git a/examples/official-storybook/stories/core/unicode.stories.js b/examples/official-storybook/stories/core/unicode.stories.js index e85392f4a872..35189d8e260c 100644 --- a/examples/official-storybook/stories/core/unicode.stories.js +++ b/examples/official-storybook/stories/core/unicode.stories.js @@ -1,3 +1,4 @@ +/* eslint-disable storybook/default-exports */ import React from 'react'; import { storiesOf } from '@storybook/react'; diff --git a/examples/official-storybook/stories/demo/setup.stories.tsx b/examples/official-storybook/stories/demo/setup.stories.tsx index ade8666b7d76..d5e021156ca4 100644 --- a/examples/official-storybook/stories/demo/setup.stories.tsx +++ b/examples/official-storybook/stories/demo/setup.stories.tsx @@ -1,6 +1,5 @@ import React from 'react'; -import { screen } from '@testing-library/dom'; -import userEvent from '@testing-library/user-event'; +import { screen, userEvent } from '@storybook/testing-library'; const Input = () => ; diff --git a/examples/official-storybook/stories/other-dirname.stories.js b/examples/official-storybook/stories/other-dirname.stories.js index 734a8a8912be..06e04f26e8b1 100644 --- a/examples/official-storybook/stories/other-dirname.stories.js +++ b/examples/official-storybook/stories/other-dirname.stories.js @@ -1,10 +1,9 @@ import React from 'react'; -import base from 'paths.macro'; import BaseButton from '../components/BaseButton'; -export const story1 = () => ; -story1.storyName = 'story 1'; +export const Story1 = () => ; +Story1.storyName = 'story 1'; -export const story2 = () => ; -story2.storyName = 'story 2'; +export const Story2 = () => ; +Story2.storyName = 'story 2'; From f97b4c28456bf6cb118a8959000db194e069c527 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 10 Nov 2021 18:35:31 +0100 Subject: [PATCH 07/20] disable default-exports rules for storiesOf files --- addons/docs/src/frameworks/react/react-argtypes.stories.tsx | 1 + examples/angular-cli/src/stories/legacy/storiesOf.stories.ts | 1 + examples/cra-react15/src/stories/welcome.stories.js | 1 + examples/official-storybook/stories/other-dirname.stories.js | 2 ++ lib/cli/src/frameworks/marionette/index.stories.js | 1 + .../template-csf/storybook/stories/Button/Button.stories.js | 1 + .../template-csf/storybook/stories/Welcome/Welcome.stories.js | 1 + lib/components/src/Badge/Badge.stories.tsx | 1 + lib/components/src/Button/Button.stories.tsx | 1 + lib/components/src/brand/StorybookIcon.stories.tsx | 1 + lib/components/src/form/form.stories.tsx | 1 + lib/components/src/icon/icon.stories.tsx | 1 + lib/components/src/spaced/Spaced.stories.tsx | 1 + .../src/syntaxhighlighter/syntaxhighlighter.stories.tsx | 1 + lib/components/src/tabs/tabs.stories.tsx | 1 + lib/components/src/tooltip/ListItem.stories.tsx | 1 + lib/components/src/tooltip/Tooltip.stories.tsx | 1 + lib/components/src/tooltip/TooltipLinkList.stories.tsx | 3 +++ lib/components/src/tooltip/TooltipMessage.stories.tsx | 1 + lib/components/src/tooltip/TooltipNote.stories.tsx | 1 + lib/components/src/tooltip/WithTooltip.stories.tsx | 1 + lib/components/src/typography/link/link.stories.tsx | 1 + lib/ui/src/settings/about.stories.js | 1 + 23 files changed, 26 insertions(+) diff --git a/addons/docs/src/frameworks/react/react-argtypes.stories.tsx b/addons/docs/src/frameworks/react/react-argtypes.stories.tsx index 0f6594721eb4..6a32cd437706 100644 --- a/addons/docs/src/frameworks/react/react-argtypes.stories.tsx +++ b/addons/docs/src/frameworks/react/react-argtypes.stories.tsx @@ -1,3 +1,4 @@ +/* eslint-disable storybook/default-exports */ import React, { useState } from 'react'; import mapValues from 'lodash/mapValues'; import { storiesOf, StoryContext } from '@storybook/react'; diff --git a/examples/angular-cli/src/stories/legacy/storiesOf.stories.ts b/examples/angular-cli/src/stories/legacy/storiesOf.stories.ts index 8b9f3854d808..f7bef101f757 100644 --- a/examples/angular-cli/src/stories/legacy/storiesOf.stories.ts +++ b/examples/angular-cli/src/stories/legacy/storiesOf.stories.ts @@ -1,3 +1,4 @@ +/* eslint-disable storybook/default-exports */ import { storiesOf, moduleMetadata } from '@storybook/angular'; import { Button } from '@storybook/angular/demo'; diff --git a/examples/cra-react15/src/stories/welcome.stories.js b/examples/cra-react15/src/stories/welcome.stories.js index ab49853d1d4d..8a92f672dfcd 100644 --- a/examples/cra-react15/src/stories/welcome.stories.js +++ b/examples/cra-react15/src/stories/welcome.stories.js @@ -1,3 +1,4 @@ +/* eslint-disable storybook/default-exports */ import React from 'react'; import { storiesOf, setAddon } from '@storybook/react'; import { linkTo } from '@storybook/addon-links'; diff --git a/examples/official-storybook/stories/other-dirname.stories.js b/examples/official-storybook/stories/other-dirname.stories.js index 06e04f26e8b1..6d4b955d9577 100644 --- a/examples/official-storybook/stories/other-dirname.stories.js +++ b/examples/official-storybook/stories/other-dirname.stories.js @@ -1,3 +1,5 @@ +/* eslint-disable storybook/default-exports */ +// @TODO: can we delete this file? doesn't seem to make sense. import React from 'react'; import BaseButton from '../components/BaseButton'; diff --git a/lib/cli/src/frameworks/marionette/index.stories.js b/lib/cli/src/frameworks/marionette/index.stories.js index a21a55194725..8cb3fb4c60eb 100644 --- a/lib/cli/src/frameworks/marionette/index.stories.js +++ b/lib/cli/src/frameworks/marionette/index.stories.js @@ -1,3 +1,4 @@ +/* eslint-disable storybook/default-exports */ import { View } from 'backbone.marionette'; import { storiesOf } from '@storybook/marionette'; diff --git a/lib/cli/src/generators/REACT_NATIVE/template-csf/storybook/stories/Button/Button.stories.js b/lib/cli/src/generators/REACT_NATIVE/template-csf/storybook/stories/Button/Button.stories.js index 8f17adc8664f..e75c8a009cc3 100644 --- a/lib/cli/src/generators/REACT_NATIVE/template-csf/storybook/stories/Button/Button.stories.js +++ b/lib/cli/src/generators/REACT_NATIVE/template-csf/storybook/stories/Button/Button.stories.js @@ -1,3 +1,4 @@ +/* eslint-disable storybook/default-exports */ import { action } from '@storybook/addon-actions'; import { text } from '@storybook/addon-knobs'; import { storiesOf } from '@storybook/react-native'; diff --git a/lib/cli/src/generators/REACT_NATIVE/template-csf/storybook/stories/Welcome/Welcome.stories.js b/lib/cli/src/generators/REACT_NATIVE/template-csf/storybook/stories/Welcome/Welcome.stories.js index 98a964bc7146..0a35f23b0dde 100644 --- a/lib/cli/src/generators/REACT_NATIVE/template-csf/storybook/stories/Welcome/Welcome.stories.js +++ b/lib/cli/src/generators/REACT_NATIVE/template-csf/storybook/stories/Welcome/Welcome.stories.js @@ -1,3 +1,4 @@ +/* eslint-disable storybook/default-exports */ import React from 'react'; import { linkTo } from '@storybook/addon-links'; import { storiesOf } from '@storybook/react-native'; diff --git a/lib/components/src/Badge/Badge.stories.tsx b/lib/components/src/Badge/Badge.stories.tsx index be120120e6f0..9aec0115d1c9 100644 --- a/lib/components/src/Badge/Badge.stories.tsx +++ b/lib/components/src/Badge/Badge.stories.tsx @@ -1,3 +1,4 @@ +/* eslint-disable storybook/default-exports */ import React from 'react'; import { storiesOf } from '@storybook/react'; import { Badge } from './Badge'; diff --git a/lib/components/src/Button/Button.stories.tsx b/lib/components/src/Button/Button.stories.tsx index 787c55015987..a21c085e9184 100644 --- a/lib/components/src/Button/Button.stories.tsx +++ b/lib/components/src/Button/Button.stories.tsx @@ -1,3 +1,4 @@ +/* eslint-disable storybook/default-exports */ import React from 'react'; import { storiesOf } from '@storybook/react'; import { Button } from './Button'; diff --git a/lib/components/src/brand/StorybookIcon.stories.tsx b/lib/components/src/brand/StorybookIcon.stories.tsx index 702e6deede08..3f923d5aa44a 100644 --- a/lib/components/src/brand/StorybookIcon.stories.tsx +++ b/lib/components/src/brand/StorybookIcon.stories.tsx @@ -1,3 +1,4 @@ +/* eslint-disable storybook/default-exports */ import React from 'react'; import { storiesOf } from '@storybook/react'; diff --git a/lib/components/src/form/form.stories.tsx b/lib/components/src/form/form.stories.tsx index 38124f1c9bca..a57cc4f97b79 100644 --- a/lib/components/src/form/form.stories.tsx +++ b/lib/components/src/form/form.stories.tsx @@ -1,3 +1,4 @@ +/* eslint-disable storybook/default-exports */ import React from 'react'; import { styled } from '@storybook/theming'; import { storiesOf } from '@storybook/react'; diff --git a/lib/components/src/icon/icon.stories.tsx b/lib/components/src/icon/icon.stories.tsx index 92892d5e9a1d..78f4aa32fe13 100644 --- a/lib/components/src/icon/icon.stories.tsx +++ b/lib/components/src/icon/icon.stories.tsx @@ -1,3 +1,4 @@ +/* eslint-disable storybook/default-exports */ import React from 'react'; import { styled } from '@storybook/theming'; import { storiesOf } from '@storybook/react'; diff --git a/lib/components/src/spaced/Spaced.stories.tsx b/lib/components/src/spaced/Spaced.stories.tsx index 6f3ef7b8065c..54e88ef71ece 100644 --- a/lib/components/src/spaced/Spaced.stories.tsx +++ b/lib/components/src/spaced/Spaced.stories.tsx @@ -1,3 +1,4 @@ +/* eslint-disable storybook/default-exports */ import React from 'react'; import { storiesOf } from '@storybook/react'; import { styled } from '@storybook/theming'; diff --git a/lib/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx b/lib/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx index 7ebf87a91eb2..ce77d404fa31 100644 --- a/lib/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx +++ b/lib/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx @@ -1,3 +1,4 @@ +/* eslint-disable storybook/default-exports */ import * as React from 'react'; import { storiesOf } from '@storybook/react'; import { ThemeProvider, themes, ensure } from '@storybook/theming'; diff --git a/lib/components/src/tabs/tabs.stories.tsx b/lib/components/src/tabs/tabs.stories.tsx index 18924fa66515..79e141ed6a3b 100644 --- a/lib/components/src/tabs/tabs.stories.tsx +++ b/lib/components/src/tabs/tabs.stories.tsx @@ -1,3 +1,4 @@ +/* eslint-disable storybook/default-exports */ import React, { Fragment, Key } from 'react'; import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; diff --git a/lib/components/src/tooltip/ListItem.stories.tsx b/lib/components/src/tooltip/ListItem.stories.tsx index 3809e9101673..5c15832f5622 100644 --- a/lib/components/src/tooltip/ListItem.stories.tsx +++ b/lib/components/src/tooltip/ListItem.stories.tsx @@ -1,3 +1,4 @@ +/* eslint-disable storybook/default-exports */ import React from 'react'; import { storiesOf } from '@storybook/react'; import ListItem from './ListItem'; diff --git a/lib/components/src/tooltip/Tooltip.stories.tsx b/lib/components/src/tooltip/Tooltip.stories.tsx index 65c728ff9d5c..a95405cd2382 100644 --- a/lib/components/src/tooltip/Tooltip.stories.tsx +++ b/lib/components/src/tooltip/Tooltip.stories.tsx @@ -1,3 +1,4 @@ +/* eslint-disable storybook/default-exports */ import React from 'react'; import { storiesOf } from '@storybook/react'; import { styled } from '@storybook/theming'; diff --git a/lib/components/src/tooltip/TooltipLinkList.stories.tsx b/lib/components/src/tooltip/TooltipLinkList.stories.tsx index 3afc5dd84379..46dca6b6848e 100644 --- a/lib/components/src/tooltip/TooltipLinkList.stories.tsx +++ b/lib/components/src/tooltip/TooltipLinkList.stories.tsx @@ -1,3 +1,4 @@ +/* eslint-disable storybook/default-exports */ import React, { Children, cloneElement, FunctionComponent, MouseEvent, ReactElement } from 'react'; import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; @@ -32,6 +33,8 @@ StoryLinkWrapper.defaultProps = { passHref: false, }; +// @TODO: not a story, but not in excludeStories because this is storiesOf format [?] +// eslint-disable-next-line storybook/prefer-pascal-case export const links = [ { id: '1', title: 'Link', href: 'http://google.com' }, { id: '2', title: 'Link', href: 'http://google.com' }, diff --git a/lib/components/src/tooltip/TooltipMessage.stories.tsx b/lib/components/src/tooltip/TooltipMessage.stories.tsx index 1e626b927663..dd74dfd9b7cd 100644 --- a/lib/components/src/tooltip/TooltipMessage.stories.tsx +++ b/lib/components/src/tooltip/TooltipMessage.stories.tsx @@ -1,3 +1,4 @@ +/* eslint-disable storybook/default-exports */ import React from 'react'; import { storiesOf } from '@storybook/react'; import { WithTooltip } from './WithTooltip'; diff --git a/lib/components/src/tooltip/TooltipNote.stories.tsx b/lib/components/src/tooltip/TooltipNote.stories.tsx index 2db9aa3e54dd..38125665e97e 100644 --- a/lib/components/src/tooltip/TooltipNote.stories.tsx +++ b/lib/components/src/tooltip/TooltipNote.stories.tsx @@ -1,3 +1,4 @@ +/* eslint-disable storybook/default-exports */ import React from 'react'; import { storiesOf } from '@storybook/react'; import { WithTooltip } from './WithTooltip'; diff --git a/lib/components/src/tooltip/WithTooltip.stories.tsx b/lib/components/src/tooltip/WithTooltip.stories.tsx index 9f12962f9ede..d1b8703ec868 100644 --- a/lib/components/src/tooltip/WithTooltip.stories.tsx +++ b/lib/components/src/tooltip/WithTooltip.stories.tsx @@ -1,3 +1,4 @@ +/* eslint-disable storybook/default-exports */ import React, { FunctionComponent } from 'react'; import { storiesOf } from '@storybook/react'; import { styled } from '@storybook/theming'; diff --git a/lib/components/src/typography/link/link.stories.tsx b/lib/components/src/typography/link/link.stories.tsx index 10342dae39d0..19a80bf5a336 100644 --- a/lib/components/src/typography/link/link.stories.tsx +++ b/lib/components/src/typography/link/link.stories.tsx @@ -1,3 +1,4 @@ +/* eslint-disable storybook/default-exports */ import React from 'react'; import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; diff --git a/lib/ui/src/settings/about.stories.js b/lib/ui/src/settings/about.stories.js index 552bf4b2cd1d..b2865e9d4241 100644 --- a/lib/ui/src/settings/about.stories.js +++ b/lib/ui/src/settings/about.stories.js @@ -1,3 +1,4 @@ +/* eslint-disable storybook/default-exports */ import React from 'react'; import { storiesOf } from '@storybook/react'; import { actions as createActions } from '@storybook/addon-actions'; From 3ba032e95a0792b85218d3e915f2cf8ce88c6aae Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 10 Nov 2021 18:36:25 +0100 Subject: [PATCH 08/20] update eslint-plugin-storybook --- package.json | 2 +- yarn.lock | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index b9b50476cd66..b2def9a5a2f9 100644 --- a/package.json +++ b/package.json @@ -227,7 +227,7 @@ "eslint-plugin-cypress": "^2.11.2", "eslint-plugin-import": "^2.22.1", "eslint-plugin-react": "^7.22.0", - "eslint-plugin-storybook": "0.2.2", + "eslint-plugin-storybook": "^0.2.2", "eslint-teamcity": "^3.0.1", "esm": "^3.2.25", "express": "^4.17.1", diff --git a/yarn.lock b/yarn.lock index f78ff7ad2d91..bb5d4b0ac436 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8883,7 +8883,7 @@ __metadata: eslint-plugin-cypress: ^2.11.2 eslint-plugin-import: ^2.22.1 eslint-plugin-react: ^7.22.0 - eslint-plugin-storybook: 0.2.2 + eslint-plugin-storybook: ^0.2.2 eslint-teamcity: ^3.0.1 esm: ^3.2.25 express: ^4.17.1 @@ -22029,7 +22029,7 @@ __metadata: languageName: node linkType: hard -"eslint-plugin-storybook@npm:0.2.2": +"eslint-plugin-storybook@npm:^0.2.2": version: 0.2.2 resolution: "eslint-plugin-storybook@npm:0.2.2" dependencies: From 99c8ee6be70ce4c4f3d092bde62e21940f571bbf Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 10 Nov 2021 18:37:05 +0100 Subject: [PATCH 09/20] apply eslint-plugin-storybook to all files --- .eslintrc.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 8a285c586a71..52bac640b1d3 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -7,10 +7,7 @@ module.exports = { }, overrides: [ { - files: [ - 'examples/official-storybook/**/*.stories.@(js|jsx|ts|tsx)', - 'addons/interactions/**/*.stories.@(js|jsx|ts|tsx)', - ], + files: ['*/**/*.stories.@(js|jsx|ts|tsx)'], extends: ['plugin:storybook/recommended'], // 4) Optional: you can override specific rules here From a95b34663f82c7d7643020da995048fd4e469d53 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 10 Nov 2021 18:37:53 +0100 Subject: [PATCH 10/20] fix/disable eslint rules --- examples/angular-cli/.storybook/preview.ts | 1 - .../src/stories/preview/csf3/input-with-play.stories.ts | 7 +++---- examples/cra-kitchen-sink/src/stories/cra-svgr.stories.js | 7 ------- examples/ember-cli/.storybook/preview.js | 1 - .../official-storybook/stories/addon-a11y/form.stories.js | 1 - .../official-storybook/stories/addon-actions.stories.js | 3 --- .../official-storybook/stories/addon-storyshots.stories.js | 3 ++- examples/react-ts/src/AccountForm.stories.tsx | 3 +++ examples/react-ts/src/button.stories.tsx | 3 +++ .../vue-kitchen-sink/src/stories/components/app.stories.js | 4 ++-- .../src/stories/misc/script/script.stories.ts | 2 ++ lib/components/src/bar/button.stories.tsx | 3 ++- lib/ui/src/components/sidebar/Heading.stories.tsx | 2 ++ lib/ui/src/components/sidebar/Tree.stories.tsx | 2 ++ 14 files changed, 21 insertions(+), 21 deletions(-) delete mode 100644 examples/cra-kitchen-sink/src/stories/cra-svgr.stories.js diff --git a/examples/angular-cli/.storybook/preview.ts b/examples/angular-cli/.storybook/preview.ts index e8293c14a250..706ed1c38478 100644 --- a/examples/angular-cli/.storybook/preview.ts +++ b/examples/angular-cli/.storybook/preview.ts @@ -1,4 +1,3 @@ -/* eslint-disable import/extensions, import/no-unresolved */ import { setCompodocJson } from '@storybook/addon-docs/angular'; import addCssWarning from '../src/cssWarning'; diff --git a/examples/angular-cli/src/stories/preview/csf3/input-with-play.stories.ts b/examples/angular-cli/src/stories/preview/csf3/input-with-play.stories.ts index 1a1f810cee9e..b241cb803629 100644 --- a/examples/angular-cli/src/stories/preview/csf3/input-with-play.stories.ts +++ b/examples/angular-cli/src/stories/preview/csf3/input-with-play.stories.ts @@ -1,5 +1,4 @@ -import { screen } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; +import { screen, userEvent, within } from '@storybook/testing-library'; import { InputComponent } from './sb-input.component'; export default { @@ -25,8 +24,8 @@ export const WithTemplate = { props, template: '

Heading

', }), - play: async () => { - const input = await screen.getByAltText('sb-input'); + play: async ({ canvasElement }) => { + const input = within(canvasElement).getByAltText('sb-input'); await userEvent.type(input, `Typing from CSF3`); }, }; diff --git a/examples/cra-kitchen-sink/src/stories/cra-svgr.stories.js b/examples/cra-kitchen-sink/src/stories/cra-svgr.stories.js deleted file mode 100644 index 044c8df8d416..000000000000 --- a/examples/cra-kitchen-sink/src/stories/cra-svgr.stories.js +++ /dev/null @@ -1,7 +0,0 @@ -// FIXME: @igor-dv - -// import React from 'react'; -// import { storiesOf } from '@storybook/react'; -// import { ReactComponent as Logo } from '../logo.svg'; -// -// storiesOf('CRA', module).add('Svgr', () => ); diff --git a/examples/ember-cli/.storybook/preview.js b/examples/ember-cli/.storybook/preview.js index 9e7eaa3b889c..458ddf8981d5 100644 --- a/examples/ember-cli/.storybook/preview.js +++ b/examples/ember-cli/.storybook/preview.js @@ -1,5 +1,4 @@ import { setJSONDoc } from '@storybook/addon-docs/ember'; -// eslint-disable-next-line import/no-unresolved import docJson from '../ember-output/storybook-docgen/index.json'; setJSONDoc(docJson); diff --git a/examples/official-storybook/stories/addon-a11y/form.stories.js b/examples/official-storybook/stories/addon-a11y/form.stories.js index a60eb6b4a6d3..97cdb4b5f9ed 100644 --- a/examples/official-storybook/stories/addon-a11y/form.stories.js +++ b/examples/official-storybook/stories/addon-a11y/form.stories.js @@ -17,7 +17,6 @@ export const WithoutLabel = () => ( ); -WithoutLabel.storyName = 'Without Label'; export const WithLabel = () => ( diff --git a/examples/official-storybook/stories/addon-actions.stories.js b/examples/official-storybook/stories/addon-actions.stories.js index e3f94d324a72..ae7ad1de5b38 100644 --- a/examples/official-storybook/stories/addon-actions.stories.js +++ b/examples/official-storybook/stories/addon-actions.stories.js @@ -77,8 +77,6 @@ export const CircularPayload = () => { return ; }; -CircularPayload.storyName = 'Circular Payload'; - export const ReservedKeywordAsName = () => ; ReservedKeywordAsName.storyName = 'Reserved keyword as name'; @@ -186,7 +184,6 @@ export const LimitActionOutput = () => { ); }; -LimitActionOutput.storyName = 'Limit Action Output'; export const SkippedViaDisableTrue = () => ( diff --git a/examples/official-storybook/stories/addon-storyshots.stories.js b/examples/official-storybook/stories/addon-storyshots.stories.js index 21e5499aa6a7..057b87c42b40 100644 --- a/examples/official-storybook/stories/addon-storyshots.stories.js +++ b/examples/official-storybook/stories/addon-storyshots.stories.js @@ -1,4 +1,5 @@ -/* eslint-disable storybook/await-interactions storybook/use-expect */ +/* eslint-disable storybook/use-storybook-expect */ +/* eslint-disable storybook/await-interactions */ import React, { useState } from 'react'; import { styled } from '@storybook/theming'; diff --git a/examples/react-ts/src/AccountForm.stories.tsx b/examples/react-ts/src/AccountForm.stories.tsx index 86d7587a97f7..d670d64ee45a 100644 --- a/examples/react-ts/src/AccountForm.stories.tsx +++ b/examples/react-ts/src/AccountForm.stories.tsx @@ -1,3 +1,6 @@ +/* eslint-disable storybook/await-interactions */ +/* eslint-disable storybook/use-storybook-testing-library */ +// @TODO: use addon-interactions and remove the rule disable above import React from 'react'; import { ComponentStoryObj, ComponentMeta } from '@storybook/react'; import { screen } from '@testing-library/dom'; diff --git a/examples/react-ts/src/button.stories.tsx b/examples/react-ts/src/button.stories.tsx index 2c278463d020..13d3f9db6bb9 100644 --- a/examples/react-ts/src/button.stories.tsx +++ b/examples/react-ts/src/button.stories.tsx @@ -1,3 +1,6 @@ +/* eslint-disable storybook/await-interactions */ +/* eslint-disable storybook/use-storybook-testing-library */ +// @TODO: use addon-interactions and remove the rule disable above import React from 'react'; import { Meta, ComponentStory } from '@storybook/react'; import { screen } from '@testing-library/dom'; diff --git a/examples/vue-kitchen-sink/src/stories/components/app.stories.js b/examples/vue-kitchen-sink/src/stories/components/app.stories.js index 229c3457cfe4..8f957aa35913 100644 --- a/examples/vue-kitchen-sink/src/stories/components/app.stories.js +++ b/examples/vue-kitchen-sink/src/stories/components/app.stories.js @@ -8,7 +8,7 @@ export default { }, }; -export const app = () => ({ +export const Default = () => ({ render: (h) => h(App), }); -app.storyName = 'App'; +Default.storyName = 'App'; diff --git a/examples/web-components-kitchen-sink/src/stories/misc/script/script.stories.ts b/examples/web-components-kitchen-sink/src/stories/misc/script/script.stories.ts index ce2ccd8a3cd8..26038b714693 100644 --- a/examples/web-components-kitchen-sink/src/stories/misc/script/script.stories.ts +++ b/examples/web-components-kitchen-sink/src/stories/misc/script/script.stories.ts @@ -1,3 +1,5 @@ +/* eslint-disable storybook/hierarchy-separator */ +// @TODO: discuss about having dots in a meta title (that is not related to a separator) import { html } from 'lit'; export default { diff --git a/lib/components/src/bar/button.stories.tsx b/lib/components/src/bar/button.stories.tsx index 492e8f4177e2..c790a03af548 100644 --- a/lib/components/src/bar/button.stories.tsx +++ b/lib/components/src/bar/button.stories.tsx @@ -8,7 +8,8 @@ export default { title: 'Basics/IconButton', }; -// eslint-disable-next-line no-underscore-dangle +// @TODO: Discuss about this use case +/* eslint-disable-next-line storybook/prefer-pascal-case, no-underscore-dangle */ export const _IconButton = () => ( diff --git a/lib/ui/src/components/sidebar/Heading.stories.tsx b/lib/ui/src/components/sidebar/Heading.stories.tsx index a938fa4f2679..a0017d753236 100644 --- a/lib/ui/src/components/sidebar/Heading.stories.tsx +++ b/lib/ui/src/components/sidebar/Heading.stories.tsx @@ -1,3 +1,5 @@ +// @TODO: fix this and use addon-interactions +/* eslint-disable storybook/use-storybook-testing-library */ import React from 'react'; import { ComponentStory, ComponentMeta } from '@storybook/react'; import { ThemeProvider, useTheme, Theme } from '@storybook/theming'; diff --git a/lib/ui/src/components/sidebar/Tree.stories.tsx b/lib/ui/src/components/sidebar/Tree.stories.tsx index bb511a4e1e8c..a5f61d498ef5 100644 --- a/lib/ui/src/components/sidebar/Tree.stories.tsx +++ b/lib/ui/src/components/sidebar/Tree.stories.tsx @@ -1,3 +1,5 @@ +/* eslint-disable storybook/use-storybook-testing-library */ +// @TODO: fix this and use addon-interactions import React from 'react'; import type { StoriesHash } from '@storybook/api'; import { screen } from '@testing-library/dom'; From 02367e06e4039d8ae81b7d861cf865287499c522 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 10 Nov 2021 18:49:13 +0100 Subject: [PATCH 11/20] apply prefer-camel-case rule to all story files --- .../required_with_context/Async.stories.js | 4 +- .../required_with_context/Button.stories.js | 6 +-- .../required_with_context/Welcome.stories.js | 4 +- .../src/stories/welcome-angular.stories.ts | 2 +- .../src/stories/welcome-storybook.stories.ts | 2 +- .../src/stories/0-Welcome.stories.tsx | 4 +- .../stories/polyfill-example.stories.js | 2 +- .../stories/addon-a11y/base-button.stories.js | 4 +- .../addon-docs/addon-docs-blocks.stories.js | 30 +++++------ .../addon-docs/dynamic-title.stories.js | 2 +- .../stories/addon-docs/memo.stories.js | 4 +- .../addon-docs/transform-source.stories.js | 12 ++--- .../stories/core/errors.stories.js | 6 +-- .../stories/core/prefix.stories.js | 4 +- .../src/stories/components/welcome.stories.js | 3 +- .../src/stories/core-errors.stories.js | 6 +-- .../src/stories/misc/script/script.stories.ts | 6 +-- .../src/ActionBar/ActionBar.stories.tsx | 4 +- .../src/ScrollArea/ScrollArea.stories.tsx | 8 +-- lib/components/src/Zoom/Zoom.stories.tsx | 30 +++++------ .../src/blocks/ColorPalette.stories.tsx | 2 +- .../src/blocks/EmptyBlock.stories.tsx | 2 +- .../src/blocks/IconGallery.stories.tsx | 2 +- lib/components/src/blocks/Typeset.stories.tsx | 8 +-- .../src/brand/StorybookLogo.stories.tsx | 2 +- .../src/placeholder/placeholder.stories.tsx | 4 +- .../typography/DocumentWrapper.stories.tsx | 4 +- .../src/components/layout/mobile.stories.tsx | 2 +- .../notifications/NotificationItem.stories.js | 52 +++++++++---------- .../notifications/NotificationList.stories.js | 6 +-- .../src/components/preview/iframe.stories.tsx | 6 +-- .../components/preview/preview.stories.tsx | 10 ++-- .../components/sidebar/Heading.stories.tsx | 22 ++++---- .../src/settings/SettingsFooter.stories.tsx | 2 +- lib/ui/src/settings/shortcuts.stories.tsx | 4 +- 35 files changed, 136 insertions(+), 135 deletions(-) diff --git a/addons/storyshots/storyshots-core/stories/required_with_context/Async.stories.js b/addons/storyshots/storyshots-core/stories/required_with_context/Async.stories.js index d6e03732318b..9fba2aba3688 100644 --- a/addons/storyshots/storyshots-core/stories/required_with_context/Async.stories.js +++ b/addons/storyshots/storyshots-core/stories/required_with_context/Async.stories.js @@ -30,5 +30,5 @@ export default { includeStories: ['withTimeout'], }; -export const withTimeout = () => ; -withTimeout.storyName = `with ${TIMEOUT}ms timeout simulating async operation`; +export const WithTimeout = () => ; +WithTimeout.storyName = `with ${TIMEOUT}ms timeout simulating async operation`; diff --git a/addons/storyshots/storyshots-core/stories/required_with_context/Button.stories.js b/addons/storyshots/storyshots-core/stories/required_with_context/Button.stories.js index 23ef66e18e57..2f154f3e59c4 100644 --- a/addons/storyshots/storyshots-core/stories/required_with_context/Button.stories.js +++ b/addons/storyshots/storyshots-core/stories/required_with_context/Button.stories.js @@ -11,9 +11,9 @@ export default { }, }; -export const withText = () => ; +export const WithText = () => ; -export const withSomeEmoji = () => ( +export const WithSomeEmoji = () => ( ); -withSomeEmoji.storyName = 'with some emoji'; +WithSomeEmoji.storyName = 'with some emoji'; diff --git a/addons/storyshots/storyshots-core/stories/required_with_context/Welcome.stories.js b/addons/storyshots/storyshots-core/stories/required_with_context/Welcome.stories.js index c1ffd1fbe5c5..8c850f44a7bb 100644 --- a/addons/storyshots/storyshots-core/stories/required_with_context/Welcome.stories.js +++ b/addons/storyshots/storyshots-core/stories/required_with_context/Welcome.stories.js @@ -11,6 +11,6 @@ export default { }, }; -export const toStorybook = () => ; +export const ToStorybook = () => ; -toStorybook.storyName = 'to Storybook'; +ToStorybook.storyName = 'to Storybook'; diff --git a/examples/angular-cli/src/stories/welcome-angular.stories.ts b/examples/angular-cli/src/stories/welcome-angular.stories.ts index c0003987c2d2..095afc8616bc 100644 --- a/examples/angular-cli/src/stories/welcome-angular.stories.ts +++ b/examples/angular-cli/src/stories/welcome-angular.stories.ts @@ -6,7 +6,7 @@ export default { title: 'Welcome/ To Angular', } as Meta; -export const toAngular: Story = () => ({ +export const ToAngular: Story = () => ({ component: AppComponent, props: { showApp: linkTo('Button'), diff --git a/examples/angular-cli/src/stories/welcome-storybook.stories.ts b/examples/angular-cli/src/stories/welcome-storybook.stories.ts index a68ba20a49a6..958a9a439153 100644 --- a/examples/angular-cli/src/stories/welcome-storybook.stories.ts +++ b/examples/angular-cli/src/stories/welcome-storybook.stories.ts @@ -6,7 +6,7 @@ export default { title: 'Welcome/ To Storybook', } as Meta; -export const toStorybook: Story = () => ({ +export const ToStorybook: Story = () => ({ component: Welcome, props: { showApp: linkTo('Button'), diff --git a/examples/cra-ts-essentials/src/stories/0-Welcome.stories.tsx b/examples/cra-ts-essentials/src/stories/0-Welcome.stories.tsx index 29a1920ce69d..9920a416e1ff 100644 --- a/examples/cra-ts-essentials/src/stories/0-Welcome.stories.tsx +++ b/examples/cra-ts-essentials/src/stories/0-Welcome.stories.tsx @@ -7,6 +7,6 @@ export default { component: Welcome, }; -export const toStorybook = () => ; +export const ToStorybook = () => ; -toStorybook.storyName = 'to Storybook'; +ToStorybook.storyName = 'to Storybook'; diff --git a/examples/ember-cli/stories/polyfill-example.stories.js b/examples/ember-cli/stories/polyfill-example.stories.js index 841f12358149..48a44973530c 100644 --- a/examples/ember-cli/stories/polyfill-example.stories.js +++ b/examples/ember-cli/stories/polyfill-example.stories.js @@ -4,7 +4,7 @@ export default { title: 'EmberOptions/Polyfills', }; -export const namedBlockExample = () => { +export const NamedBlockExample = () => { return { template: hbs` ( ); InvalidContrast.storyName = 'Invalid contrast'; -export const delayedRender = () => ( +export const DelayedRenderStory = () => ( ); -delayedRender.storyName = 'delayed render'; +DelayedRenderStory.storyName = 'delayed render'; diff --git a/examples/official-storybook/stories/addon-docs/addon-docs-blocks.stories.js b/examples/official-storybook/stories/addon-docs/addon-docs-blocks.stories.js index 1ac7ad185e7c..6a10bf8cc232 100644 --- a/examples/official-storybook/stories/addon-docs/addon-docs-blocks.stories.js +++ b/examples/official-storybook/stories/addon-docs/addon-docs-blocks.stories.js @@ -23,11 +23,11 @@ export default { }, }; -export const defDocsPage = () =>
Default docs page
; +export const DefDocsPage = () =>
Default docs page
; -export const smallDocsPage = () =>
Just primary story,
; +export const SmallDocsPage = () =>
Just primary story,
; -smallDocsPage.parameters = { +SmallDocsPage.parameters = { docs: { page: () => ( <> @@ -38,9 +38,9 @@ smallDocsPage.parameters = { }, }; -export const checkBoxProps = () =>
Primary props displayed with a check box
; +export const CheckBoxProps = () =>
Primary props displayed with a check box
; -checkBoxProps.parameters = { +CheckBoxProps.parameters = { docs: { page: () => { const [showProps, setShowProps] = React.useState(false); @@ -61,9 +61,9 @@ checkBoxProps.parameters = { }, }; -export const customLabels = () =>
Display custom title, Subtitle, Description
; +export const CustomLabels = () =>
Display custom title, Subtitle, Description
; -customLabels.parameters = { +CustomLabels.parameters = { docs: { page: () => ( <> @@ -78,15 +78,15 @@ customLabels.parameters = { }, }; -export const customStoriesFilter = () =>
Displays ALL stories (not excluding first one)
; +export const CustomStoriesFilter = () =>
Displays ALL stories (not excluding first one)
; -customStoriesFilter.parameters = { +CustomStoriesFilter.parameters = { docs: { page: () => , }, }; -export const multipleComponents = () => ( +export const MultipleComponents = () => ( @@ -94,9 +94,9 @@ export const multipleComponents = () => ( ); -multipleComponents.storyName = 'Many Components'; +MultipleComponents.storyName = 'Many Components'; -multipleComponents.parameters = { +MultipleComponents.parameters = { component: ButtonGroup, subcomponents: { SubGroup, @@ -116,14 +116,14 @@ multipleComponents.parameters = { }, }; -export const componentsProps = () =>
Display multiple prop tables in tabs
; +export const ComponentsProps = () =>
Display multiple prop tables in tabs
; -componentsProps.subcomponents = { +ComponentsProps.subcomponents = { 'Docgen Button': DocgenButton, 'Base Button': BaseButton, }; -componentsProps.parameters = { +ComponentsProps.parameters = { docs: { page: () => ( <> diff --git a/examples/official-storybook/stories/addon-docs/dynamic-title.stories.js b/examples/official-storybook/stories/addon-docs/dynamic-title.stories.js index 9250bb4fbea6..08c5b3197bdb 100644 --- a/examples/official-storybook/stories/addon-docs/dynamic-title.stories.js +++ b/examples/official-storybook/stories/addon-docs/dynamic-title.stories.js @@ -6,4 +6,4 @@ export default { title: 'Addons/Docs/dynamic title', }; -export const basic = () => 'Story with title that is evaluated in runtime'; +export const Basic = () => 'Story with title that is evaluated in runtime'; diff --git a/examples/official-storybook/stories/addon-docs/memo.stories.js b/examples/official-storybook/stories/addon-docs/memo.stories.js index 3d07ae61abc9..6a371f8b770a 100644 --- a/examples/official-storybook/stories/addon-docs/memo.stories.js +++ b/examples/official-storybook/stories/addon-docs/memo.stories.js @@ -10,5 +10,5 @@ export default { }, }; -export const displaysCorrectly = () => ; -displaysCorrectly.storyName = 'Displays components with memo correctly'; +export const DisplaysCorrectly = () => ; +DisplaysCorrectly.storyName = 'Displays components with memo correctly'; diff --git a/examples/official-storybook/stories/addon-docs/transform-source.stories.js b/examples/official-storybook/stories/addon-docs/transform-source.stories.js index d805bc05ddf0..b6ae7a8657a8 100644 --- a/examples/official-storybook/stories/addon-docs/transform-source.stories.js +++ b/examples/official-storybook/stories/addon-docs/transform-source.stories.js @@ -9,17 +9,17 @@ export default { }, }; -export const code = () => 'StoryType "CODE" story which has source transformed'; -code.parameters = { +export const Code = () => 'StoryType "CODE" story which has source transformed'; +Code.parameters = { docs: { source: { type: 'code' } }, }; -export const dynamic = () => 'StoryType "DYNAMIC" story which has source transformed'; -dynamic.parameters = { +export const Dynamic = () => 'StoryType "DYNAMIC" story which has source transformed'; +Dynamic.parameters = { docs: { source: { type: 'dynamic' } }, }; -export const auto = () => 'StoryType "AUTO" story which has source transformed'; -dynamic.parameters = { +export const Auto = () => 'StoryType "AUTO" story which has source transformed'; +Dynamic.parameters = { docs: { source: { type: 'auto' } }, }; diff --git a/examples/official-storybook/stories/core/errors.stories.js b/examples/official-storybook/stories/core/errors.stories.js index 727dcf21d92b..1587aa0fe116 100644 --- a/examples/official-storybook/stories/core/errors.stories.js +++ b/examples/official-storybook/stories/core/errors.stories.js @@ -17,15 +17,15 @@ Exception.parameters = { chromatic: { disable: true }, }; -export const badComponent = () => ( +export const BadComponentStory = () => (
Hello world
 ); -badComponent.storyName = 'story errors - invariant error'; +BadComponentStory.storyName = 'story errors - invariant error'; -badComponent.parameters = { +BadComponentStory.parameters = { storyshots: { disable: true }, chromatic: { disable: true }, }; diff --git a/examples/official-storybook/stories/core/prefix.stories.js b/examples/official-storybook/stories/core/prefix.stories.js index 0010f1ddfe65..182404c7c62a 100644 --- a/examples/official-storybook/stories/core/prefix.stories.js +++ b/examples/official-storybook/stories/core/prefix.stories.js @@ -7,5 +7,5 @@ export default { const Template = () => 'Story'; -export const prefixAndName = Template.bind({}); -export const prefix = Template.bind({}); +export const PrefixAndName = Template.bind({}); +export const Prefix = Template.bind({}); diff --git a/examples/vue-kitchen-sink/src/stories/components/welcome.stories.js b/examples/vue-kitchen-sink/src/stories/components/welcome.stories.js index b40eaf5bdecd..35df982eb801 100644 --- a/examples/vue-kitchen-sink/src/stories/components/welcome.stories.js +++ b/examples/vue-kitchen-sink/src/stories/components/welcome.stories.js @@ -7,8 +7,9 @@ export default { component: Welcome, }; -export const welcome = () => { +export const WelcomeStory = () => { return { render: (h) => h(Welcome, { listeners: { buttonRequested: linkTo('Button') } }), }; }; +WelcomeStory.storyName = 'Welcome'; diff --git a/examples/vue-kitchen-sink/src/stories/core-errors.stories.js b/examples/vue-kitchen-sink/src/stories/core-errors.stories.js index 3b5c1245bfe7..1081882d161b 100644 --- a/examples/vue-kitchen-sink/src/stories/core-errors.stories.js +++ b/examples/vue-kitchen-sink/src/stories/core-errors.stories.js @@ -3,9 +3,9 @@ export default { parameters: { chromatic: { disable: true } }, }; -export const throwsError = () => { +export const ThrowsError = () => { throw new Error('foo'); }; -throwsError.parameters = { storyshots: { disable: true } }; +ThrowsError.parameters = { storyshots: { disable: true } }; -export const nullError = () => null; +export const NullError = () => null; diff --git a/examples/web-components-kitchen-sink/src/stories/misc/script/script.stories.ts b/examples/web-components-kitchen-sink/src/stories/misc/script/script.stories.ts index 26038b714693..395b5155a699 100644 --- a/examples/web-components-kitchen-sink/src/stories/misc/script/script.stories.ts +++ b/examples/web-components-kitchen-sink/src/stories/misc/script/script.stories.ts @@ -6,14 +6,14 @@ export default { title: 'Misc. / Script Tag', }; -export const inTemplate = () => html` +export const InTemplate = () => html`
JS alert
`; -export const inString = () => '
JS alert
'; +export const InString = () => '
JS alert
'; -export const typeModule = () => +export const TypeModule = () => '
JS alert from module
'; diff --git a/lib/components/src/ActionBar/ActionBar.stories.tsx b/lib/components/src/ActionBar/ActionBar.stories.tsx index 6b019a2c66c0..a464fcc2c706 100644 --- a/lib/components/src/ActionBar/ActionBar.stories.tsx +++ b/lib/components/src/ActionBar/ActionBar.stories.tsx @@ -28,9 +28,9 @@ export default { ], }; -export const singleItem = () => ; +export const SingleItem = () => ; -export const manyItems = () => ( +export const ManyItems = () => ( any) => {storyFn()}], }; -export const vertical = () => ( +export const Vertical = () => ( {list((i) => ( @@ -50,7 +50,7 @@ export const vertical = () => ( ); -export const horizontal = () => ( +export const Horizontal = () => ( {list((i) => ( {i} @@ -58,7 +58,7 @@ export const horizontal = () => ( ); -export const both = () => ( +export const Both = () => ( {list((i) => ( @@ -71,7 +71,7 @@ export const both = () => ( ); -export const withOuterBorder = () => ( +export const WithOuterBorder = () => (
; -export const elementActualSize = TemplateElement.bind({}); +export const ElementActualSize = TemplateElement.bind({}); -elementActualSize.args = { +ElementActualSize.args = { scale: 1, children: EXAMPLE_ELEMENT, }; -export const elementZoomedIn = TemplateElement.bind({}); +export const ElementZoomedIn = TemplateElement.bind({}); -elementZoomedIn.args = { +ElementZoomedIn.args = { scale: 0.7, children: EXAMPLE_ELEMENT, }; -export const elementZoomedOut = TemplateElement.bind({}); +export const ElementZoomedOut = TemplateElement.bind({}); -elementZoomedOut.args = { +ElementZoomedOut.args = { scale: 3, children: EXAMPLE_ELEMENT, }; @@ -78,37 +78,37 @@ const TemplateIFrame = (args) => { ); }; -export const iFrameActualSize = TemplateIFrame.bind({}); +export const IFrameActualSize = TemplateIFrame.bind({}); -iFrameActualSize.args = { +IFrameActualSize.args = { scale: 1, active: true, }; // The iFrame stories are disabled because useGlobals works in practice // but, for some reason breaks in the stories for Zoom.iFrame -iFrameActualSize.parameters = { +IFrameActualSize.parameters = { chromatic: { disableSnapshot: true }, }; -export const iFrameZoomedIn = TemplateIFrame.bind({}); +export const IFrameZoomedIn = TemplateIFrame.bind({}); -iFrameZoomedIn.args = { +IFrameZoomedIn.args = { scale: 0.7, active: true, }; -iFrameZoomedIn.parameters = { +IFrameZoomedIn.parameters = { chromatic: { disableSnapshot: true }, }; -export const iFrameZoomedOut = TemplateIFrame.bind({}); +export const IFrameZoomedOut = TemplateIFrame.bind({}); -iFrameZoomedOut.args = { +IFrameZoomedOut.args = { scale: 3, active: true, }; -iFrameZoomedOut.parameters = { +IFrameZoomedOut.parameters = { chromatic: { disableSnapshot: true }, }; diff --git a/lib/components/src/blocks/ColorPalette.stories.tsx b/lib/components/src/blocks/ColorPalette.stories.tsx index 2f3830b98a07..f4c18ac7dd71 100644 --- a/lib/components/src/blocks/ColorPalette.stories.tsx +++ b/lib/components/src/blocks/ColorPalette.stories.tsx @@ -6,7 +6,7 @@ export default { component: ColorPalette, }; -export const defaultStyle = () => ( +export const DefaultStyle = () => ( Generic error message; +export const Error = () => Generic error message; diff --git a/lib/components/src/blocks/IconGallery.stories.tsx b/lib/components/src/blocks/IconGallery.stories.tsx index 21401a91a9d8..817cc90a9d4a 100644 --- a/lib/components/src/blocks/IconGallery.stories.tsx +++ b/lib/components/src/blocks/IconGallery.stories.tsx @@ -8,7 +8,7 @@ export default { component: IconGallery, }; -export const defaultStyle = () => ( +export const DefaultStyle = () => ( diff --git a/lib/components/src/blocks/Typeset.stories.tsx b/lib/components/src/blocks/Typeset.stories.tsx index 9945b12555cd..4653fdf49cb6 100644 --- a/lib/components/src/blocks/Typeset.stories.tsx +++ b/lib/components/src/blocks/Typeset.stories.tsx @@ -10,9 +10,9 @@ const fontSizes = ['12px', '14px', '16px', '20px', '24px', '32px', '40px', '48px const fontWeight = 900; const fontFamily = 'monospace'; -export const withFontSizes = () => ; -export const withFontWeight = () => ; -export const withFontFamily = () => ; -export const withWeightText = () => ( +export const WithFontSizes = () => ; +export const WithFontWeight = () => ; +export const WithFontFamily = () => ; +export const WithWeightText = () => ( ); diff --git a/lib/components/src/brand/StorybookLogo.stories.tsx b/lib/components/src/brand/StorybookLogo.stories.tsx index edbf5f1f2a57..57c6e4de6554 100644 --- a/lib/components/src/brand/StorybookLogo.stories.tsx +++ b/lib/components/src/brand/StorybookLogo.stories.tsx @@ -7,4 +7,4 @@ export default { title: 'Basics/Brand/StorybookLogo', }; -export const normal = () => ; +export const Normal = () => ; diff --git a/lib/components/src/placeholder/placeholder.stories.tsx b/lib/components/src/placeholder/placeholder.stories.tsx index 88e937254e9d..4e2a83d5de43 100644 --- a/lib/components/src/placeholder/placeholder.stories.tsx +++ b/lib/components/src/placeholder/placeholder.stories.tsx @@ -8,10 +8,10 @@ export default { title: 'Basics/Placeholder', }; -export const singleChild = () => ( +export const SingleChild = () => ( This is a placeholder with single child, it's bolded ); -export const twoChildren = () => ( +export const TwoChildren = () => ( This has two children, the first bold diff --git a/lib/components/src/typography/DocumentWrapper.stories.tsx b/lib/components/src/typography/DocumentWrapper.stories.tsx index 18e7b74c463b..a67b2bc8b293 100644 --- a/lib/components/src/typography/DocumentWrapper.stories.tsx +++ b/lib/components/src/typography/DocumentWrapper.stories.tsx @@ -9,13 +9,13 @@ export default { decorators: [(storyFn: any) =>
{storyFn()}
], }; -export const withMarkdown = () => ( +export const WithMarkdown = () => ( ); -export const withDOM = () => ( +export const WithDOM = () => (

h1 Heading

h2 Heading

diff --git a/lib/ui/src/components/layout/mobile.stories.tsx b/lib/ui/src/components/layout/mobile.stories.tsx index ec62ff7d23d9..d37f6cb7a891 100644 --- a/lib/ui/src/components/layout/mobile.stories.tsx +++ b/lib/ui/src/components/layout/mobile.stories.tsx @@ -34,7 +34,7 @@ export const InitialAddons = ({ props }: { props: MobileProps }) => ( ); -export const docsOnly = ({ props }: { props: MobileProps }) => ; +export const DocsOnly = ({ props }: { props: MobileProps }) => ; export const Page = ({ props }: { props: MobileProps }) => ( ( +export const Single = () => ( ( /> ); -export const all = () => ( +export const All = () => ( ( /> ); -export const placement = () => ( +export const Placement = () => ( // Note: position:absolute is only for QA/testing. Use position:fixed when integrating into the real UI. ( +export const WorkingStory = () => (