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 6c1acdeef11..8a285c586a7 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 2c0f84e90e7..d255f1ee1ba 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 a87531cdf71..ecff42e7814 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 d255f1ee1ba..ed592a5133f 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 ecff42e7814..c86720e3979 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 ed592a5133f..82a47c3246f 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 c86720e3979..947df907453 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 06a03c6dff4..ee7596641f1 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 82a47c3246f..b9b50476cd6 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 947df907453..f78ff7ad2d9 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 a64a24f1956..e4963c85d93 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 eaf56417ff5..21e5499aa6a 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 e85392f4a87..35189d8e260 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 ade8666b7d7..d5e021156ca 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 734a8a8912b..06e04f26e8b 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 0f6594721eb..6a32cd43770 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 8b9f3854d80..f7bef101f75 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 ab49853d1d4..8a92f672dfc 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 06e04f26e8b..6d4b955d957 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 a21a5519472..8cb3fb4c60e 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 8f17adc8664..e75c8a009cc 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 98a964bc714..0a35f23b0dd 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 be120120e6f..9aec0115d1c 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 787c5501598..a21c085e918 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 702e6deede0..3f923d5aa44 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 38124f1c9bc..a57cc4f97b7 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 92892d5e9a1..78f4aa32fe1 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 6f3ef7b8065..54e88ef71ec 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 7ebf87a91eb..ce77d404fa3 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 18924fa6651..79e141ed6a3 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 3809e910167..5c15832f562 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 65c728ff9d5..a95405cd238 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 3afc5dd8437..46dca6b6848 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 1e626b92766..dd74dfd9b7c 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 2db9aa3e54d..38125665e97 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 9f12962f9ed..d1b8703ec86 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 10342dae39d..19a80bf5a33 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 552bf4b2cd1..b2865e9d424 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 b9b50476cd6..b2def9a5a2f 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 f78ff7ad2d9..bb5d4b0ac43 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 8a285c586a7..52bac640b1d 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 e8293c14a25..706ed1c3847 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 1a1f810cee9..b241cb80362 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 044c8df8d41..00000000000 --- 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 9e7eaa3b889..458ddf8981d 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 a60eb6b4a6d..97cdb4b5f9e 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 e3f94d324a7..ae7ad1de5b3 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 21e5499aa6a..057b87c42b4 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 86d7587a97f..d670d64ee45 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 2c278463d02..13d3f9db6bb 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 229c3457cfe..8f957aa3591 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 ce2ccd8a3cd..26038b71469 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 492e8f4177e..c790a03af54 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 a938fa4f267..a0017d75323 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 bb511a4e1e8..a5f61d498ef 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 d6e03732318..9fba2aba368 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 23ef66e18e5..2f154f3e59c 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 c1ffd1fbe5c..8c850f44a7b 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 c0003987c2d..095afc8616b 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 a68ba20a49a..958a9a43915 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 29a1920ce69..9920a416e1f 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 841f1235814..48a44973530 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 1ac7ad185e7..6a10bf8cc23 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 9250bb4fbea..08c5b3197bd 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 3d07ae61abc..6a371f8b770 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 d805bc05ddf..b6ae7a8657a 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 727dcf21d92..1587aa0fe11 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 0010f1ddfe6..182404c7c62 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 b40eaf5bdec..35df982eb80 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 3b5c1245bfe..1081882d161 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 26038b71469..395b5155a69 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 6b019a2c66c..a464fcc2c70 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 2f3830b98a0..f4c18ac7dd7 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 21401a91a9d..817cc90a9d4 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 9945b12555c..4653fdf49cb 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 edbf5f1f2a5..57c6e4de655 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 88e937254e9..4e2a83d5de4 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 18e7b74c463..a67b2bc8b29 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 ec62ff7d23d..d37f6cb7a89 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 = () => (