From 183ab1bcb69b4c92aff6351c00918fc7d4ebf76c Mon Sep 17 00:00:00 2001 From: Josanghyeon <05lazy.dev@gmail.com> Date: Sat, 27 May 2023 12:37:05 +0900 Subject: [PATCH 01/65] getting started add install cli yarn --- docs/get-started/install.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/get-started/install.md b/docs/get-started/install.md index 15861bb46364..94a53d5ab4e5 100644 --- a/docs/get-started/install.md +++ b/docs/get-started/install.md @@ -9,6 +9,7 @@ Use the Storybook CLI to install it in a single command. Run this inside your _e From 16d0156fa17306ecfc94938dc425d75917ad9944 Mon Sep 17 00:00:00 2001 From: Gavin King Date: Fri, 14 Jul 2023 11:42:28 +0200 Subject: [PATCH 02/65] search label for attribute doesn't match id of input (fixes #23463) The for attribute value was not set to match the hardcoded value used for the search input id. --- code/ui/manager/src/components/sidebar/Search.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/code/ui/manager/src/components/sidebar/Search.tsx b/code/ui/manager/src/components/sidebar/Search.tsx index 9bd4b6839954..675351ddc552 100644 --- a/code/ui/manager/src/components/sidebar/Search.tsx +++ b/code/ui/manager/src/components/sidebar/Search.tsx @@ -345,9 +345,13 @@ export const Search = React.memo<{ onBlur: () => setPlaceholder('Find components'), }); + const labelProps = getLabelProps({ + htmlFor: 'storybook-explorer-searchfield', + }); + return ( <> - Search for components + Search for components Date: Sun, 20 Aug 2023 11:30:42 +0900 Subject: [PATCH 03/65] Make sure the Next.js Image Context is reused instead of recreated when imported --- code/frameworks/nextjs/package.json | 3 +++ 1 file changed, 3 insertions(+) diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 14ec26a04924..3d1f45e1718a 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -141,12 +141,15 @@ "./src/preview.tsx", "./src/next-image-loader-stub.ts", "./src/images/context.ts", + "./src/images/decorator.tsx", "./src/images/next-future-image.tsx", "./src/images/next-legacy-image.tsx", "./src/images/next-image.tsx", "./src/font/webpack/loader/storybook-nextjs-font-loader.ts" ], "externals": [ + "./context", + "./images/decorator", "sb-original/next/image", "sb-original/next/future/image", "sb-original/next/legacy/image" From f4a1021902b903d2a1c425da3bb089e336b1ab53 Mon Sep 17 00:00:00 2001 From: Martin Nabhan <7613182+martinnabhan@users.noreply.github.com> Date: Tue, 29 Aug 2023 18:13:39 +0900 Subject: [PATCH 04/65] Make sure the Next.js Image Context is reused instead of recreated when imported --- code/frameworks/nextjs/package.json | 8 +++++++- .../src/{images/context.ts => image-context.ts} | 0 code/frameworks/nextjs/src/images/decorator.tsx | 3 ++- .../nextjs/src/images/next-future-image.tsx | 11 ++++------- code/frameworks/nextjs/src/images/next-image.tsx | 9 ++++----- .../nextjs/src/images/next-legacy-image.tsx | 11 ++++------- 6 files changed, 21 insertions(+), 21 deletions(-) rename code/frameworks/nextjs/src/{images/context.ts => image-context.ts} (100%) diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index acdeb7177946..00afe2a336e5 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -27,6 +27,11 @@ "require": "./dist/index.js", "import": "./dist/index.mjs" }, + "./image-context": { + "types": "./dist/image-context.d.ts", + "require": "./dist/image-context.js", + "import": "./dist/image-context.mjs" + }, "./preset": { "types": "./dist/preset.d.ts", "require": "./dist/preset.js" @@ -136,11 +141,12 @@ }, "bundler": { "entries": [ + "./src/image-context.ts", "./src/index.ts", "./src/preset.ts", "./src/preview.tsx", "./src/next-image-loader-stub.ts", - "./src/images/context.ts", + "./src/images/decorator.tsx", "./src/images/next-future-image.tsx", "./src/images/next-legacy-image.tsx", "./src/images/next-image.tsx", diff --git a/code/frameworks/nextjs/src/images/context.ts b/code/frameworks/nextjs/src/image-context.ts similarity index 100% rename from code/frameworks/nextjs/src/images/context.ts rename to code/frameworks/nextjs/src/image-context.ts diff --git a/code/frameworks/nextjs/src/images/decorator.tsx b/code/frameworks/nextjs/src/images/decorator.tsx index f0917b3a3b50..0ee445f8707b 100644 --- a/code/frameworks/nextjs/src/images/decorator.tsx +++ b/code/frameworks/nextjs/src/images/decorator.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import type { Addon_StoryContext } from '@storybook/types'; -import { ImageContext } from './context'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ImageContext } from '@storybook/nextjs/dist/image-context'; export const ImageDecorator = ( Story: React.FC, diff --git a/code/frameworks/nextjs/src/images/next-future-image.tsx b/code/frameworks/nextjs/src/images/next-future-image.tsx index 559d2e857d39..0b841452d1fc 100644 --- a/code/frameworks/nextjs/src/images/next-future-image.tsx +++ b/code/frameworks/nextjs/src/images/next-future-image.tsx @@ -3,18 +3,15 @@ import type * as _NextImage from 'next/image'; // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore import is aliased in webpack config import OriginalNextFutureImage from 'sb-original/next/future/image'; -import { ImageContext } from './context'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ImageContext } from '@storybook/nextjs/dist/image-context'; import { defaultLoader } from './next-image-default-loader'; -function NextFutureImage(props: _NextImage.ImageProps) { +function NextFutureImage({ loader, ...props }: _NextImage.ImageProps) { const imageParameters = React.useContext(ImageContext); return ( - + ); } diff --git a/code/frameworks/nextjs/src/images/next-image.tsx b/code/frameworks/nextjs/src/images/next-image.tsx index 74e252d93a7d..34cf6d242bc4 100644 --- a/code/frameworks/nextjs/src/images/next-image.tsx +++ b/code/frameworks/nextjs/src/images/next-image.tsx @@ -3,15 +3,14 @@ import OriginalNextImage from 'sb-original/next/image'; import type * as _NextImage from 'next/image'; import React from 'react'; -import { ImageContext } from './context'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ImageContext } from '@storybook/nextjs/dist/image-context'; import { defaultLoader } from './next-image-default-loader'; -const MockedNextImage = (props: _NextImage.ImageProps) => { +const MockedNextImage = ({ loader, ...props }: _NextImage.ImageProps) => { const imageParameters = React.useContext(ImageContext); - return ( - - ); + return ; }; export default MockedNextImage; diff --git a/code/frameworks/nextjs/src/images/next-legacy-image.tsx b/code/frameworks/nextjs/src/images/next-legacy-image.tsx index 8d899cc341a5..1e2f8d9df20c 100644 --- a/code/frameworks/nextjs/src/images/next-legacy-image.tsx +++ b/code/frameworks/nextjs/src/images/next-legacy-image.tsx @@ -3,18 +3,15 @@ import OriginalNextLegacyImage from 'sb-original/next/legacy/image'; import type * as _NextLegacyImage from 'next/legacy/image'; import React from 'react'; -import { ImageContext } from './context'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { ImageContext } from '@storybook/nextjs/dist/image-context'; import { defaultLoader } from './next-image-default-loader'; -function NextLegacyImage(props: _NextLegacyImage.ImageProps) { +function NextLegacyImage({ loader, ...props }: _NextLegacyImage.ImageProps) { const imageParameters = React.useContext(ImageContext); return ( - + ); } From 3bd204616c4f6b4f44bf0763460e933dd25e09d2 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 30 Aug 2023 22:56:15 +0200 Subject: [PATCH 05/65] add visual tests addon to storybook:ui --- code/ui/.storybook/main.ts | 8 + code/ui/components/package.json | 1 + code/yarn.lock | 321 +++++++++++++++++++++++++++++++- 3 files changed, 322 insertions(+), 8 deletions(-) diff --git a/code/ui/.storybook/main.ts b/code/ui/.storybook/main.ts index 5f979898a5c2..190a5e4b84da 100644 --- a/code/ui/.storybook/main.ts +++ b/code/ui/.storybook/main.ts @@ -51,6 +51,14 @@ const config: StorybookConfig = { '@storybook/addon-interactions', '@storybook/addon-storysource', '@storybook/addon-designs', + { + name: '@chromaui/addon-visual-tests', + options: { + projectId: 'Project:635781f3500dd2c49e189caf', + projectToken: '80b312430ec4', + buildScriptName: 'storybook:ui:build', + }, + }, ], framework: { name: '@storybook/react-vite', diff --git a/code/ui/components/package.json b/code/ui/components/package.json index 9b170beb3b75..9921b6ef1122 100644 --- a/code/ui/components/package.json +++ b/code/ui/components/package.json @@ -71,6 +71,7 @@ "util-deprecate": "^1.0.2" }, "devDependencies": { + "@chromaui/addon-visual-tests": "^0.0.49", "@popperjs/core": "^2.6.0", "@storybook/icons": "^1.1.6", "@types/react-syntax-highlighter": "11.0.5", diff --git a/code/yarn.lock b/code/yarn.lock index debf9c20cd8d..82f1d07dbd2d 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5,6 +5,18 @@ __metadata: version: 6 cacheKey: 8c0 +"@0no-co/graphql.web@npm:^1.0.1": + version: 1.0.4 + resolution: "@0no-co/graphql.web@npm:1.0.4" + peerDependencies: + graphql: ^14.0.0 || ^15.0.0 || ^16.0.0 + peerDependenciesMeta: + graphql: + optional: true + checksum: bf63cb5b017063363c9a9e06dc17532abc1c2da402c7ebcbc7b5ab2a0601ec93b02de93af9e50d9daffb3b747eddcf0b1e5418a46d1182c5b8087b7d7a1768ad + languageName: node + linkType: hard + "@aashutoshrathi/word-wrap@npm:^1.2.3": version: 1.2.6 resolution: "@aashutoshrathi/word-wrap@npm:1.2.6" @@ -2238,6 +2250,15 @@ __metadata: languageName: node linkType: hard +"@babel/runtime@npm:^7.1.2": + version: 7.22.10 + resolution: "@babel/runtime@npm:7.22.10" + dependencies: + regenerator-runtime: ^0.14.0 + checksum: d3a006fe2cbaf4048b935fb18f55d9ed52c26292182537b442cee57bf524dbb483367c57f464b1a5a96648d9d8d0fdcda848d58a8a09e18ed3f8971dcd684c6c + languageName: node + linkType: hard + "@babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.14.8, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.22.6, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.9.2": version: 7.22.6 resolution: "@babel/runtime@npm:7.22.6" @@ -2321,6 +2342,38 @@ __metadata: languageName: node linkType: hard +"@chromaui/addon-visual-tests@npm:^0.0.49": + version: 0.0.49 + resolution: "@chromaui/addon-visual-tests@npm:0.0.49" + dependencies: + "@storybook/csf-tools": 7.4.0 + "@storybook/design-system": ^7.15.15 + chromatic: 6.24.0 + date-fns: ^2.30.0 + pluralize: ^8.0.0 + ts-dedent: ^2.2.0 + urql: ^4.0.3 + uuid: ^9.0.0 + peerDependencies: + "@storybook/blocks": ^7.2.0 + "@storybook/client-logger": ^7.2.0 + "@storybook/components": ^7.2.0 + "@storybook/core-events": ^7.2.0 + "@storybook/manager-api": ^7.2.0 + "@storybook/preview-api": ^7.2.0 + "@storybook/theming": ^7.2.0 + "@storybook/types": ^7.2.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + react: + optional: true + react-dom: + optional: true + checksum: af5860520f2652d866017ca24d11fc38c18030c7452ba430c2f399c41ef5808af9187ded1f1fdcf936e97c68e821f8cce53495a54d8f40a75b07dfc7b94da3c4 + languageName: node + linkType: hard + "@colors/colors@npm:1.5.0": version: 1.5.0 resolution: "@colors/colors@npm:1.5.0" @@ -2614,7 +2667,7 @@ __metadata: languageName: node linkType: hard -"@emotion/weak-memoize@npm:^0.3.1": +"@emotion/weak-memoize@npm:^0.3.0, @emotion/weak-memoize@npm:^0.3.1": version: 0.3.1 resolution: "@emotion/weak-memoize@npm:0.3.1" checksum: ed514b3cb94bbacece4ac2450d98898066c0a0698bdeda256e312405ca53634cb83c75889b25cd8bbbe185c80f4c05a1f0a0091e1875460ba6be61d0334f0b8a @@ -3347,6 +3400,19 @@ __metadata: languageName: node linkType: hard +"@hypnosphi/create-react-context@npm:^0.3.1": + version: 0.3.1 + resolution: "@hypnosphi/create-react-context@npm:0.3.1" + dependencies: + gud: ^1.0.0 + warning: ^4.0.3 + peerDependencies: + prop-types: ^15.0.0 + react: ">=0.14.0" + checksum: e8072221f9f9c2c47c3ebc5bc6079f9a71938e181d2b4aa3e1d3922707bc097336d5260dad088cf47c1d6e1ff34839fa21f2505a95bddda0d7548c5a955b5691 + languageName: node + linkType: hard + "@isaacs/cliui@npm:^8.0.2": version: 8.0.2 resolution: "@isaacs/cliui@npm:8.0.2" @@ -6665,6 +6731,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/components@workspace:ui/components" dependencies: + "@chromaui/addon-visual-tests": ^0.0.49 "@popperjs/core": ^2.6.0 "@radix-ui/react-select": ^1.2.2 "@radix-ui/react-toolbar": ^1.0.4 @@ -6833,7 +6900,7 @@ __metadata: languageName: unknown linkType: soft -"@storybook/csf-tools@workspace:*, @storybook/csf-tools@workspace:lib/csf-tools": +"@storybook/csf-tools@7.4.0, @storybook/csf-tools@workspace:*, @storybook/csf-tools@workspace:lib/csf-tools": version: 0.0.0-use.local resolution: "@storybook/csf-tools@workspace:lib/csf-tools" dependencies: @@ -6871,6 +6938,32 @@ __metadata: languageName: node linkType: hard +"@storybook/design-system@npm:^7.15.15": + version: 7.15.15 + resolution: "@storybook/design-system@npm:7.15.15" + dependencies: + "@emotion/weak-memoize": ^0.3.0 + "@storybook/theming": ^7.0.2 + "@types/pluralize": ^0.0.29 + "@types/prismjs": ^1.16.6 + "@types/react-modal": ^3.12.1 + "@types/uuid": ^8.3.1 + copy-to-clipboard: ^3.3.1 + human-format: ^0.11.0 + pluralize: ^8.0.0 + polished: ^3.6.4 + prismjs: 1.25.0 + react-github-button: ^0.1.11 + react-modal: ^3.11.2 + react-popper-tooltip: ^2.11.1 + uuid: ^3.3.3 + peerDependencies: + react: ^15.0.0 || ^16.0.0 || ^17.0.0 + react-dom: ^15.0.0 || ^16.0.0 || ^17.0.0 + checksum: 3f2ea63556aed966e906b8e56fa0ef12fd67f919426a63350a7ecba5a6cff277b8e18362d680530f7fdfa7240c8ceb890984a0594f5129f2b9d972e991b297cf + languageName: node + linkType: hard + "@storybook/docs-mdx@npm:^0.1.0": version: 0.1.0 resolution: "@storybook/docs-mdx@npm:0.1.0" @@ -8003,7 +8096,7 @@ __metadata: languageName: node linkType: hard -"@storybook/theming@workspace:*, @storybook/theming@workspace:lib/theming": +"@storybook/theming@^7.0.2, @storybook/theming@workspace:*, @storybook/theming@workspace:lib/theming": version: 0.0.0-use.local resolution: "@storybook/theming@workspace:lib/theming" dependencies: @@ -9193,6 +9286,13 @@ __metadata: languageName: node linkType: hard +"@types/pluralize@npm:^0.0.29": + version: 0.0.29 + resolution: "@types/pluralize@npm:0.0.29" + checksum: 840796fa1db158eb4d9787758d134736e29d9a8035f5b0cbad06e3801fc64b79112ba944c83f9a1a5b94da08703f505b8315b7e0f28bfc0f8e9e1ccfead7b083 + languageName: node + linkType: hard + "@types/prettier@npm:2.7.2": version: 2.7.2 resolution: "@types/prettier@npm:2.7.2" @@ -9214,6 +9314,13 @@ __metadata: languageName: node linkType: hard +"@types/prismjs@npm:^1.16.6": + version: 1.26.0 + resolution: "@types/prismjs@npm:1.26.0" + checksum: dce1388a626c20b95fa2715917deef5a401eec33e9e181f202840ee3b3c7d8a84d5558c834af4c29b8e007741a6a18639b074db8ecccdd6e7de15280fc4dfdd2 + languageName: node + linkType: hard + "@types/prompts@npm:^2.0.9": version: 2.4.4 resolution: "@types/prompts@npm:2.4.4" @@ -9288,6 +9395,15 @@ __metadata: languageName: node linkType: hard +"@types/react-modal@npm:^3.12.1": + version: 3.16.0 + resolution: "@types/react-modal@npm:3.16.0" + dependencies: + "@types/react": "*" + checksum: ee65eb9f47e6c953bed23d716442ee1fcac3c2d586409924317043c8df2e38475c2232ef04e3c57d7d7387d7a319a97732278e92864d7363596e54fc5ebcd0cb + languageName: node + linkType: hard + "@types/react-syntax-highlighter@npm:11.0.5": version: 11.0.5 resolution: "@types/react-syntax-highlighter@npm:11.0.5" @@ -9500,6 +9616,13 @@ __metadata: languageName: node linkType: hard +"@types/uuid@npm:^8.3.1": + version: 8.3.4 + resolution: "@types/uuid@npm:8.3.4" + checksum: b9ac98f82fcf35962317ef7dc44d9ac9e0f6fdb68121d384c88fe12ea318487d5585d3480fa003cf28be86a3bbe213ca688ba786601dce4a97724765eb5b1cf2 + languageName: node + linkType: hard + "@types/uuid@npm:^9.0.1": version: 9.0.2 resolution: "@types/uuid@npm:9.0.2" @@ -9743,6 +9866,16 @@ __metadata: languageName: node linkType: hard +"@urql/core@npm:^4.1.0": + version: 4.1.1 + resolution: "@urql/core@npm:4.1.1" + dependencies: + "@0no-co/graphql.web": ^1.0.1 + wonka: ^6.3.2 + checksum: 1f2077a0ce6cc7e34f03107f6e51f7b4ae77a9ef8f81ac37a81d61828b8ec4fa7b937eb315ead84108164ecd01e442b21f8ad3701fb8df881fa1c63cba114e68 + languageName: node + linkType: hard + "@vitejs/plugin-basic-ssl@npm:1.0.1": version: 1.0.1 resolution: "@vitejs/plugin-basic-ssl@npm:1.0.1" @@ -12721,6 +12854,17 @@ __metadata: languageName: node linkType: hard +"chromatic@npm:6.24.0": + version: 6.24.0 + resolution: "chromatic@npm:6.24.0" + bin: + chroma: dist/bin.js + chromatic: dist/bin.js + chromatic-cli: dist/bin.js + checksum: e5ebc1ff78076e5112d79fd5f4f133febf789cb4713149507f755741cd069daf3f0a2c7f13b7b176becde7734cf010d1d7628a22f3e28087a6faa17f28ffd798 + languageName: node + linkType: hard + "chrome-trace-event@npm:^1.0.2": version: 1.0.3 resolution: "chrome-trace-event@npm:1.0.3" @@ -13966,7 +14110,7 @@ __metadata: languageName: node linkType: hard -"date-fns@npm:^2.0.1": +"date-fns@npm:^2.0.1, date-fns@npm:^2.30.0": version: 2.30.0 resolution: "date-fns@npm:2.30.0" dependencies: @@ -14075,6 +14219,20 @@ __metadata: languageName: node linkType: hard +"deep-equal@npm:^1.1.1": + version: 1.1.1 + resolution: "deep-equal@npm:1.1.1" + dependencies: + is-arguments: ^1.0.4 + is-date-object: ^1.0.1 + is-regex: ^1.0.4 + object-is: ^1.0.1 + object-keys: ^1.1.1 + regexp.prototype.flags: ^1.2.0 + checksum: 473d5dd1d707afd5ad3068864765590591b049d0e0d9a01931599dbbd820e35f09d0a42faa6e4644deb7cf6b7dc90f7bfdf5559f42279d67f714209b62036212 + languageName: node + linkType: hard + "deep-equal@npm:^2.0.5": version: 2.2.2 resolution: "deep-equal@npm:2.2.2" @@ -16155,6 +16313,13 @@ __metadata: languageName: node linkType: hard +"exenv@npm:^1.2.0": + version: 1.2.2 + resolution: "exenv@npm:1.2.2" + checksum: 4e96b355a6b9b9547237288ca779dd673b2e698458b409e88b50df09feb7c85ef94c07354b6b87bc3ed0193a94009a6f7a3c71956da12f45911c0d0f5aa3caa0 + languageName: node + linkType: hard + "exit@npm:^0.1.2": version: 0.1.2 resolution: "exit@npm:0.1.2" @@ -17826,6 +17991,13 @@ __metadata: languageName: node linkType: hard +"gud@npm:^1.0.0": + version: 1.0.0 + resolution: "gud@npm:1.0.0" + checksum: a4db6edc18e2c4e3a22dc9e639e40a4e5650d53dae9cf384a96d5380dfa17ddda376cf6b7797a5c30d140d2532e5a69d167bdb70c2c151dd673253bac6b027f3 + languageName: node + linkType: hard + "gunzip-maybe@npm:^1.4.2": version: 1.4.2 resolution: "gunzip-maybe@npm:1.4.2" @@ -18496,6 +18668,13 @@ __metadata: languageName: node linkType: hard +"human-format@npm:^0.11.0": + version: 0.11.0 + resolution: "human-format@npm:0.11.0" + checksum: 83cc87af67036b4abb6dc585533fcc232279373f8a3a7a4fc1f6d988f6aa35664f986adb818d04d9de3dee240648ec94a9944a8ab1852df21eb67c254e991ea7 + languageName: node + linkType: hard + "human-signals@npm:^2.1.0": version: 2.1.0 resolution: "human-signals@npm:2.1.0" @@ -19359,7 +19538,7 @@ __metadata: languageName: node linkType: hard -"is-regex@npm:^1.0.3, is-regex@npm:^1.0.5, is-regex@npm:^1.1.0, is-regex@npm:^1.1.4": +"is-regex@npm:^1.0.3, is-regex@npm:^1.0.4, is-regex@npm:^1.0.5, is-regex@npm:^1.1.0, is-regex@npm:^1.1.4": version: 1.1.4 resolution: "is-regex@npm:1.1.4" dependencies: @@ -25162,6 +25341,15 @@ __metadata: languageName: node linkType: hard +"polished@npm:^3.6.4": + version: 3.7.2 + resolution: "polished@npm:3.7.2" + dependencies: + "@babel/runtime": ^7.12.5 + checksum: c36439946b5bfbac16c06dd7b00a89f45e07410427344e909c540ce3ddeb9b44d2ae9cc035a9d77f4551e07b9803419ae77767aec85958a0978158a95c0115d8 + languageName: node + linkType: hard + "polished@npm:^4.2.2": version: 4.2.2 resolution: "polished@npm:4.2.2" @@ -25171,6 +25359,13 @@ __metadata: languageName: node linkType: hard +"popper.js@npm:^1.14.4": + version: 1.16.1 + resolution: "popper.js@npm:1.16.1" + checksum: 1c1a826f757edb5b8c2049dfd7a9febf6ae1e9d0e51342fc715b49a0c1020fced250d26484619883651e097c5764bbcacd2f31496e3646027f079dd83e072681 + languageName: node + linkType: hard + "portfinder@npm:^1.0.28": version: 1.0.32 resolution: "portfinder@npm:1.0.32" @@ -25520,6 +25715,13 @@ __metadata: languageName: node linkType: hard +"prismjs@npm:1.25.0": + version: 1.25.0 + resolution: "prismjs@npm:1.25.0" + checksum: 0c3853a6c815b23a07bef77700f60a40b2a12018a383a75cd7d108718717b73927c809e7dd08ac0ae9f16fbe1e005b337262bc95952cf9cfc91914f986b07bd3 + languageName: node + linkType: hard + "prismjs@npm:^1.27.0": version: 1.29.0 resolution: "prismjs@npm:1.29.0" @@ -25662,7 +25864,7 @@ __metadata: languageName: node linkType: hard -"prop-types@npm:^15.6.2, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1": +"prop-types@npm:^15.5.10, prop-types@npm:^15.6.1, prop-types@npm:^15.6.2, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1": version: 15.8.1 resolution: "prop-types@npm:15.8.1" dependencies: @@ -26247,6 +26449,15 @@ __metadata: languageName: node linkType: hard +"react-github-button@npm:^0.1.11": + version: 0.1.11 + resolution: "react-github-button@npm:0.1.11" + dependencies: + prop-types: ^15.5.10 + checksum: e00fa4f3b2dee74f45fff0c9d68d7d75eefa495d27a56ef2e2391f9600623d16b8a9f99c1d35a7b4f620dfb95dd8ed0b1a76fbbfece4be0843cd507c17a37dfa + languageName: node + linkType: hard + "react-helmet-async@npm:^1.0.7": version: 1.3.0 resolution: "react-helmet-async@npm:1.3.0" @@ -26300,6 +26511,13 @@ __metadata: languageName: node linkType: hard +"react-lifecycles-compat@npm:^3.0.0": + version: 3.0.4 + resolution: "react-lifecycles-compat@npm:3.0.4" + checksum: 1d0df3c85af79df720524780f00c064d53a9dd1899d785eddb7264b378026979acbddb58a4b7e06e7d0d12aa1494fd5754562ee55d32907b15601068dae82c27 + languageName: node + linkType: hard + "react-merge-refs@npm:^1.0.0": version: 1.1.0 resolution: "react-merge-refs@npm:1.1.0" @@ -26307,6 +26525,34 @@ __metadata: languageName: node linkType: hard +"react-modal@npm:^3.11.2": + version: 3.16.1 + resolution: "react-modal@npm:3.16.1" + dependencies: + exenv: ^1.2.0 + prop-types: ^15.7.2 + react-lifecycles-compat: ^3.0.0 + warning: ^4.0.3 + peerDependencies: + react: ^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18 + react-dom: ^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18 + checksum: 7b56e2c505b2b924736c471a34754a4211df40ac2d6fb0949cf095aea5e65d3326bd9f111fa7898acf40afa54f526809ad8aa47e02b8328663d11422568dc7b1 + languageName: node + linkType: hard + +"react-popper-tooltip@npm:^2.11.1": + version: 2.11.1 + resolution: "react-popper-tooltip@npm:2.11.1" + dependencies: + "@babel/runtime": ^7.9.2 + react-popper: ^1.3.7 + peerDependencies: + react: ^16.6.0 + react-dom: ^16.6.0 + checksum: f81278f1ea87899ffa57fed85c2531fa583ebca424ae5522e3a1b05c5635c014b3467391e77fb9c48bbc8e7b9f1050fa9302e8ee6134a9333858b5a6e0ae1b49 + languageName: node + linkType: hard + "react-popper-tooltip@npm:^4.4.2": version: 4.4.2 resolution: "react-popper-tooltip@npm:4.4.2" @@ -26321,6 +26567,23 @@ __metadata: languageName: node linkType: hard +"react-popper@npm:^1.3.7": + version: 1.3.11 + resolution: "react-popper@npm:1.3.11" + dependencies: + "@babel/runtime": ^7.1.2 + "@hypnosphi/create-react-context": ^0.3.1 + deep-equal: ^1.1.1 + popper.js: ^1.14.4 + prop-types: ^15.6.1 + typed-styles: ^0.0.7 + warning: ^4.0.2 + peerDependencies: + react: 0.14.x || ^15.0.0 || ^16.0.0 || ^17.0.0 + checksum: d5dd1d0d4b5a3407134681b42a079fce525c94bce892ad177515d54a8cf64203eecbc30231476367e916aaff91221f5b6abd5afc207a86c698f35b7254178488 + languageName: node + linkType: hard + "react-popper@npm:^2.3.0": version: 2.3.0 resolution: "react-popper@npm:2.3.0" @@ -26815,6 +27078,13 @@ __metadata: languageName: node linkType: hard +"regenerator-runtime@npm:^0.14.0": + version: 0.14.0 + resolution: "regenerator-runtime@npm:0.14.0" + checksum: e25f062c1a183f81c99681691a342760e65c55e8d3a4d4fe347ebe72433b123754b942b70b622959894e11f8a9131dc549bd3c9a5234677db06a4af42add8d12 + languageName: node + linkType: hard + "regenerator-transform@npm:^0.15.1": version: 0.15.1 resolution: "regenerator-transform@npm:0.15.1" @@ -26841,7 +27111,7 @@ __metadata: languageName: node linkType: hard -"regexp.prototype.flags@npm:^1.4.3, regexp.prototype.flags@npm:^1.5.0": +"regexp.prototype.flags@npm:^1.2.0, regexp.prototype.flags@npm:^1.4.3, regexp.prototype.flags@npm:^1.5.0": version: 1.5.0 resolution: "regexp.prototype.flags@npm:1.5.0" dependencies: @@ -30162,6 +30432,13 @@ __metadata: languageName: node linkType: hard +"typed-styles@npm:^0.0.7": + version: 0.0.7 + resolution: "typed-styles@npm:0.0.7" + checksum: ec159f0e538364750cf9b8f19136375df64ad364fda355e6f7a7216ebffc67f18b436722c5c6853c89f70e6507eb69e5061ceb9334fa1f54902c0f6be1b985fe + languageName: node + linkType: hard + "typedarray@npm:^0.0.6": version: 0.0.6 resolution: "typedarray@npm:0.0.6" @@ -30723,6 +31000,18 @@ __metadata: languageName: node linkType: hard +"urql@npm:^4.0.3": + version: 4.0.5 + resolution: "urql@npm:4.0.5" + dependencies: + "@urql/core": ^4.1.0 + wonka: ^6.3.2 + peerDependencies: + react: ">= 16.8.0" + checksum: 9560d04b3c2fe72c921bdb21e969039b776e07999704d23bce35f815eb537c9357b6c7322a1b8cd43957550798c30cd15f5130ddd054dfd8a890d17d2be85282 + languageName: node + linkType: hard + "use-callback-ref@npm:^1.3.0": version: 1.3.0 resolution: "use-callback-ref@npm:1.3.0" @@ -30867,6 +31156,15 @@ __metadata: languageName: node linkType: hard +"uuid@npm:^3.3.3": + version: 3.4.0 + resolution: "uuid@npm:3.4.0" + bin: + uuid: ./bin/uuid + checksum: 1c13950df865c4f506ebfe0a24023571fa80edf2e62364297a537c80af09c618299797bbf2dbac6b1f8ae5ad182ba474b89db61e0e85839683991f7e08795347 + languageName: node + linkType: hard + "uuid@npm:^9.0.0": version: 9.0.0 resolution: "uuid@npm:9.0.0" @@ -31480,7 +31778,7 @@ __metadata: languageName: node linkType: hard -"warning@npm:^4.0.2": +"warning@npm:^4.0.2, warning@npm:^4.0.3": version: 4.0.3 resolution: "warning@npm:4.0.3" dependencies: @@ -31952,6 +32250,13 @@ __metadata: languageName: node linkType: hard +"wonka@npm:^6.3.2": + version: 6.3.4 + resolution: "wonka@npm:6.3.4" + checksum: 77329eea673da07717476e1b8f1a22f1e1a4f261bb9a58fa446c03d3da13dbd5b254664f8aded5928d953f33ee5b399a17a4f70336e8b236e478209c0e78cda4 + languageName: node + linkType: hard + "wordwrap@npm:^1.0.0": version: 1.0.0 resolution: "wordwrap@npm:1.0.0" From 15b8f838be36f30a6783b9a17ccbb98ecdab6590 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Thu, 31 Aug 2023 11:58:11 +0200 Subject: [PATCH 06/65] sanitize ansi codes in error message and stack --- code/lib/telemetry/src/sanitize.test.ts | 16 ++++++++++++++++ code/lib/telemetry/src/sanitize.ts | 15 ++++++++++++++- 2 files changed, 30 insertions(+), 1 deletion(-) diff --git a/code/lib/telemetry/src/sanitize.test.ts b/code/lib/telemetry/src/sanitize.test.ts index f5b3a742d3e6..a3389c83df79 100644 --- a/code/lib/telemetry/src/sanitize.test.ts +++ b/code/lib/telemetry/src/sanitize.test.ts @@ -1,7 +1,23 @@ +/* eslint-disable local-rules/no-uncategorized-errors */ import { sanitizeError, cleanPaths } from './sanitize'; describe(`Errors Helpers`, () => { describe(`sanitizeError`, () => { + it(`Sanitizes ansi codes in error`, () => { + const errorMessage = `\u001B[4mStorybook\u001B[0m`; + let e: any; + try { + throw new Error(errorMessage); + } catch (error) { + e = error; + } + + const sanitizedError = sanitizeError(e); + + expect(sanitizedError.message).toEqual('Storybook'); + expect(sanitizedError.stack).toContain('Error: Storybook'); + }); + it(`Sanitizes current path from error stacktraces`, () => { const errorMessage = `this is a test`; let e: any; diff --git a/code/lib/telemetry/src/sanitize.ts b/code/lib/telemetry/src/sanitize.ts index 4c68ed50db94..a611dbea1a13 100644 --- a/code/lib/telemetry/src/sanitize.ts +++ b/code/lib/telemetry/src/sanitize.ts @@ -12,6 +12,11 @@ function regexpEscape(str: string): string { return str.replace(/[-[/{}()*+?.\\^$|]/g, `\\$&`); } +export function removeAnsiEscapeCodes(input: string): string { + // eslint-disable-next-line no-control-regex + return input.replace(/\u001B\[[0-9;]*m/g, ''); +} + export function cleanPaths(str: string, separator: string = sep): string { if (!str) return str; @@ -35,7 +40,15 @@ export function cleanPaths(str: string, separator: string = sep): string { export function sanitizeError(error: Error, pathSeparator: string = sep) { try { // Hack because Node - error = JSON.parse(JSON.stringify(error, Object.getOwnPropertyNames(error))); + error = JSON.parse( + JSON.stringify(error, [...Object.getOwnPropertyNames(error), 'message', 'name']) + ); + if (error.message) { + error.message = removeAnsiEscapeCodes(error.message); + } + if (error.stack) { + error.stack = removeAnsiEscapeCodes(error.stack); + } // Removes all user paths const errorString = cleanPaths(JSON.stringify(error), pathSeparator); From e2e9c24ba9c454c6fcfc8c5958ce1b65ad9a07e3 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Thu, 31 Aug 2023 15:03:03 +0200 Subject: [PATCH 07/65] use node 18 to generate angular sandboxes --- .github/workflows/generate-sandboxes-main.yml | 57 ------------------- ...dboxes-next.yml => generate-sandboxes.yml} | 25 ++++++-- scripts/sandbox/generate.ts | 25 +++++++- 3 files changed, 42 insertions(+), 65 deletions(-) delete mode 100644 .github/workflows/generate-sandboxes-main.yml rename .github/workflows/{generate-sandboxes-next.yml => generate-sandboxes.yml} (69%) diff --git a/.github/workflows/generate-sandboxes-main.yml b/.github/workflows/generate-sandboxes-main.yml deleted file mode 100644 index 66cd1b800d37..000000000000 --- a/.github/workflows/generate-sandboxes-main.yml +++ /dev/null @@ -1,57 +0,0 @@ -name: Generate and push sandboxes (main) - -on: - schedule: - - cron: '2 2 */1 * *' - workflow_dispatch: - # To test fixes on push rather than wait for the scheduling, do the following: - # 1. Uncomment the lines below and add your branch. - # push: - # branches: - # - - # 2. change the "ref" value to in the actions/checkout step below. - # 3. 👉 DON'T FORGET TO UNDO THE VALUES BACK TO `main` BEFORE YOU MERGE YOUR CHANGES! - -jobs: - generate: - runs-on: ubuntu-latest - env: - YARN_ENABLE_IMMUTABLE_INSTALLS: false - CLEANUP_SANDBOX_NODE_MODULES: true - steps: - - uses: actions/setup-node@v3 - with: - node-version: 16 - - uses: actions/checkout@v3 - with: - ref: main - - name: Setup git user - run: | - git config --global user.name "Storybook Bot" - git config --global user.email "bot@storybook.js.org" - - name: Install dependencies - run: node ./scripts/check-dependencies.js - - name: Compile Storybook libraries - run: yarn task --task compile --start-from=auto --no-link - - name: Publishing to local registry - run: yarn local-registry --publish - working-directory: ./code - - name: Running local registry - run: yarn local-registry --open & - working-directory: ./code - - name: Wait for registry - run: yarn wait-on http://localhost:6001 - working-directory: ./code - - name: Generate - run: yarn generate-sandboxes --local-registry - working-directory: ./code - - name: Publish - run: yarn publish-sandboxes --remote=https://storybook-bot:${{ secrets.PAT_STORYBOOK_BOT}}@github.com/storybookjs/sandboxes.git --push --branch=main - working-directory: ./code - - name: The job has failed - if: ${{ failure() || cancelled() }} - env: - DISCORD_WEBHOOK: ${{ secrets.DISCORD_MONITORING_URL }} - uses: Ilshidur/action-discord@master - with: - args: 'The generation of sandboxes in the **main** branch has failed. [View Run](https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }})' diff --git a/.github/workflows/generate-sandboxes-next.yml b/.github/workflows/generate-sandboxes.yml similarity index 69% rename from .github/workflows/generate-sandboxes-next.yml rename to .github/workflows/generate-sandboxes.yml index f22e7cb4a50b..c37ecb643fa8 100644 --- a/.github/workflows/generate-sandboxes-next.yml +++ b/.github/workflows/generate-sandboxes.yml @@ -1,4 +1,4 @@ -name: Generate and push sandboxes (next) +name: Generate and push sandboxes on: schedule: @@ -18,13 +18,26 @@ jobs: env: YARN_ENABLE_IMMUTABLE_INSTALLS: false CLEANUP_SANDBOX_NODE_MODULES: true + strategy: + matrix: + node_version: + - 16 + - 18 + branch: + - main + - next + include: + - node_version: 16 + excludeTemplates: 'angular-cli/prerelease' + - node_version: 18 + includeTemplates: 'angular-cli/prerelease' steps: - uses: actions/setup-node@v3 with: - node-version: 16 + node-version: ${{ matrix.node_version }} - uses: actions/checkout@v3 with: - ref: next + ref: ${{ matrix.branch }} - name: Setup git user run: | git config --global user.name "Storybook Bot" @@ -43,10 +56,10 @@ jobs: run: yarn wait-on http://localhost:6001 working-directory: ./code - name: Generate - run: yarn generate-sandboxes --local-registry + run: yarn generate-sandboxes --local-registry --includeTemplates "${{matrix.includeTemplates}}" --excludeTemplates "${{matrix.excludeTemplates}}" working-directory: ./code - name: Publish - run: yarn publish-sandboxes --remote=https://storybook-bot:${{ secrets.PAT_STORYBOOK_BOT}}@github.com/storybookjs/sandboxes.git --push --branch=next + run: yarn publish-sandboxes --remote=https://storybook-bot:${{ secrets.PAT_STORYBOOK_BOT}}@github.com/storybookjs/sandboxes.git --push --branch=${{ matrix.branch }}} working-directory: ./code - name: The job has failed if: ${{ failure() || cancelled() }} @@ -54,4 +67,4 @@ jobs: DISCORD_WEBHOOK: ${{ secrets.DISCORD_MONITORING_URL }} uses: Ilshidur/action-discord@master with: - args: 'The generation of sandboxes in the **next** branch has failed. [View Run](https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }})' + args: 'The generation of sandboxes in the **${{ matrix.branch }}** branch has failed. [View Run](https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }})' diff --git a/scripts/sandbox/generate.ts b/scripts/sandbox/generate.ts index b74ae5a28d03..6c2455d0d937 100755 --- a/scripts/sandbox/generate.ts +++ b/scripts/sandbox/generate.ts @@ -207,6 +207,17 @@ export const options = createOptions({ description: 'Which template would you like to create?', values: Object.keys(sandboxTemplates), }, + includeTemplates: { + type: 'string', + description: 'Comma-delimited list of templates to include', + promptType: false, + }, + excludeTemplates: { + type: 'string', + description: + 'Comma-delimited list of templates to exclude. Takes precedence over --includedTemplates', + promptType: false, + }, localRegistry: { type: 'boolean', description: 'Generate reproduction from local registry?', @@ -221,6 +232,8 @@ export const options = createOptions({ export const generate = async ({ template, + includeTemplates, + excludeTemplates, localRegistry, debug, }: OptionValues) => { @@ -233,8 +246,11 @@ export const generate = async ({ if (template) { return dirName === template; } - - return true; + let include = includeTemplates ? includeTemplates.split(',').includes(dirName) : true; + if (excludeTemplates && include) { + include = !excludeTemplates.split(',').includes(dirName); + } + return include; }); await runGenerators(generatorConfigs, localRegistry, debug); @@ -244,6 +260,11 @@ if (require.main === module) { program .description('Generate sandboxes from a set of possible templates') .option('--template