From ba50e5ddba15a9375798c177d8732d526908a9d2 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Fri, 13 Dec 2024 14:14:14 -0600 Subject: [PATCH 01/13] test: add check for story ids in generated docs --- .github/workflows/ci.yml | 6 ++- package-lock.json | 19 ++++++-- packages/react/package.json | 2 +- .../react/script/components-json/build.ts | 48 +++++++++++++++++++ 4 files changed, 69 insertions(+), 6 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index ddcb6795761..c794d17b1d3 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -408,8 +408,12 @@ jobs: cache: 'npm' - name: Install dependencies run: npm ci + - name: Build storybook to generate story IDs + run: npm run build:storybook + working-directory: packages/react - name: Build components.json - run: npm run build:components.json + run: npx tsx scripts/components-json/build.ts --storybook-data 'packages/react/storybook-static/index.json' + working-directory: packages/react sizes: runs-on: ubuntu-latest diff --git a/package-lock.json b/package-lock.json index e54147a6610..47fc593519d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -62,7 +62,7 @@ "name": "example-app-router", "version": "0.0.0", "dependencies": { - "@primer/react": "37.6.0", + "@primer/react": "37.8.0", "next": "^14.2.10", "react": "^18.3.1", "react-dom": "^18.3.1", @@ -81,7 +81,7 @@ "react-dom": "^18.3.1" }, "devDependencies": { - "@primer/react": "37.6.0", + "@primer/react": "37.8.0", "@types/react": "^18.3.11", "@types/react-dom": "^18.3.0", "@typescript-eslint/eslint-plugin": "^7.11.0", @@ -115,7 +115,7 @@ "version": "0.0.0", "dependencies": { "@primer/octicons-react": "^19.9.0", - "@primer/react": "37.6.0", + "@primer/react": "37.8.0", "clsx": "^1.2.1", "next": "^14.2.10", "react": "^18.3.1", @@ -5914,6 +5914,10 @@ "version": "1.7.2", "license": "MIT" }, + "node_modules/@primer/cli": { + "resolved": "packages/cli", + "link": true + }, "node_modules/@primer/css": { "version": "21.3.6", "dev": true, @@ -30304,6 +30308,13 @@ "url": "https://github.com/sponsors/wooorm" } }, + "packages/cli": { + "name": "@primer/cli", + "version": "0.0.0", + "bin": { + "cli": "dist/cli.js" + } + }, "packages/postcss-preset-primer": { "version": "0.0.0", "dependencies": { @@ -30466,7 +30477,7 @@ }, "packages/react": { "name": "@primer/react", - "version": "37.6.0", + "version": "37.8.0", "license": "MIT", "dependencies": { "@github/relative-time-element": "^4.4.3", diff --git a/packages/react/package.json b/packages/react/package.json index e76de7f0771..6e55d18734d 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -39,7 +39,7 @@ "clean": "rimraf dist lib lib-esm css", "start": "concurrently npm:start:*", "start:storybook": "STORYBOOK=true storybook dev -p 6006", - "build:storybook": "script/build-storybook", + "build:storybook": "storybook build", "build:docs": "NODE_OPTIONS=--openssl-legacy-provider script/build-docs", "build:docs:preview": "NODE_OPTIONS=--openssl-legacy-provider script/build-docs preview", "build:components.json": "tsx script/components-json/build.ts", diff --git a/packages/react/script/components-json/build.ts b/packages/react/script/components-json/build.ts index 33c7a82f7bf..61a48021c42 100644 --- a/packages/react/script/components-json/build.ts +++ b/packages/react/script/components-json/build.ts @@ -2,6 +2,8 @@ import generate from '@babel/generator' import {parse} from '@babel/parser' import traverse from '@babel/traverse' import type {ArrowFunctionExpression, Identifier, FunctionDeclaration} from '@babel/types' +import path from 'node:path' +import {parseArgs} from 'node:util' import Ajv from 'ajv' import {pascalCase, kebabCase} from 'change-case' import glob from 'fast-glob' @@ -11,6 +13,14 @@ import prettier from '@prettier/sync' import componentSchema from './component.schema.json' import outputSchema from './output.schema.json' +const args = parseArgs({ + options: { + 'storybook-data': { + type: 'string', + }, + }, +}) + // Only includes fields we use in this script type Component = { name: string @@ -40,6 +50,23 @@ const storyPrefix = { stable: '', } +let _storybookData: StorybookData | null = null + +function getStorybookData(): StorybookData { + const input = args.values['storybook-data'] + if (!input) { + throw new Error('Unable to get value for --storybook-data') + } + + if (_storybookData === null) { + const filepath = path.resolve(process.cwd(), args.values['storybook-data']!) + const contents = fs.readFileSync(filepath, 'utf-8') + _storybookData = JSON.parse(contents) + } + + return _storybookData as StorybookData +} + const components = docsFiles.map(docsFilepath => { const docs = JSON.parse(fs.readFileSync(docsFilepath, 'utf-8')) @@ -114,6 +141,18 @@ const components = docsFiles.map(docsFilepath => { } } + if (args.values['storybook-data']) { + const storybookData = getStorybookData() + for (const story of docs.stories) { + const match = Object.values(storybookData.entries).find(entry => { + return entry.id === story.id + }) + if (!match) { + throw new Error(`Story "${story.id}" not found in storybook-data`) + } + } + } + // TODO: Provide default type and description for sx and ref props return { source: `https://github.com/primer/react/tree/main/packages/react/${docsFilepath.substring(0, docsFilepath.lastIndexOf('/'))}`, @@ -236,3 +275,12 @@ function getStoryIds(docs: Component, storyNames: string[]) { return ids.map(id => ({id})) } + +interface StorybookData { + v: number + entries: { + [key: string]: { + id: string + } + } +} From 577bc6496263aef73702fa477fbd156128af9a6e Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Fri, 27 Dec 2024 11:10:32 -0500 Subject: [PATCH 02/13] merge with main --- package-lock.json | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index 47fc593519d..e652889ff6d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5914,10 +5914,6 @@ "version": "1.7.2", "license": "MIT" }, - "node_modules/@primer/cli": { - "resolved": "packages/cli", - "link": true - }, "node_modules/@primer/css": { "version": "21.3.6", "dev": true, @@ -30311,6 +30307,7 @@ "packages/cli": { "name": "@primer/cli", "version": "0.0.0", + "extraneous": true, "bin": { "cli": "dist/cli.js" } From 0f8b165ab483eab85ae494d91e93237f37f78d2f Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Fri, 27 Dec 2024 11:55:26 -0500 Subject: [PATCH 03/13] fix: script path --- .github/workflows/ci.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index c794d17b1d3..dd4289539f2 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -412,7 +412,7 @@ jobs: run: npm run build:storybook working-directory: packages/react - name: Build components.json - run: npx tsx scripts/components-json/build.ts --storybook-data 'packages/react/storybook-static/index.json' + run: npx tsx script/components-json/build.ts --storybook-data 'packages/react/storybook-static/index.json' working-directory: packages/react sizes: From 165ecb4c545e67802f5f4d6140d4b1fc7379bc28 Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Fri, 27 Dec 2024 12:31:45 -0500 Subject: [PATCH 04/13] fix: script path --- .github/workflows/ci.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index dd4289539f2..5db06240809 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -412,7 +412,7 @@ jobs: run: npm run build:storybook working-directory: packages/react - name: Build components.json - run: npx tsx script/components-json/build.ts --storybook-data 'packages/react/storybook-static/index.json' + run: npx tsx script/components-json/build.ts --storybook-data 'storybook-static/index.json' working-directory: packages/react sizes: From 7d4688c982d84b1d021ec1b54e6a11925a98cbd5 Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Fri, 27 Dec 2024 12:35:14 -0500 Subject: [PATCH 05/13] fix: IconButton story id --- packages/react/src/Button/IconButton.docs.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/Button/IconButton.docs.json b/packages/react/src/Button/IconButton.docs.json index 88d7ae75938..567264e81b9 100644 --- a/packages/react/src/Button/IconButton.docs.json +++ b/packages/react/src/Button/IconButton.docs.json @@ -35,7 +35,7 @@ "id": "components-iconbutton-features--external-tooltip" }, { - "id": "components-iconbutton-features--external-tooltip-version1" + "id": "components-iconbutton-features--external-tooltip-version-1" }, { "id": "components-iconbutton-features--as-a-menu-anchor" From 4d34eb20e95f5d0617c7cc21c1d962ca364ff3ec Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Fri, 27 Dec 2024 12:41:40 -0500 Subject: [PATCH 06/13] fix: IconButton story id --- packages/react/src/Button/IconButton.features.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/Button/IconButton.features.stories.tsx b/packages/react/src/Button/IconButton.features.stories.tsx index d8db5c4b4c2..31e23203f12 100644 --- a/packages/react/src/Button/IconButton.features.stories.tsx +++ b/packages/react/src/Button/IconButton.features.stories.tsx @@ -34,7 +34,7 @@ export const ExternalTooltip = () => ( ) -export const ExternalTooltipVersion1 = () => ( +export const ExternalTooltipVersion_1 = () => ( From 6478fb1045773c846f59e6e269a36b7bdf6666e9 Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Fri, 27 Dec 2024 12:57:56 -0500 Subject: [PATCH 07/13] fix: Hidden story id --- packages/react/src/Hidden/Hidden.docs.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react/src/Hidden/Hidden.docs.json b/packages/react/src/Hidden/Hidden.docs.json index 2820003d38c..440061f656c 100644 --- a/packages/react/src/Hidden/Hidden.docs.json +++ b/packages/react/src/Hidden/Hidden.docs.json @@ -5,13 +5,13 @@ "a11yReviewed": false, "stories": [ { - "id": "drafts-components-hidden--default" + "id": "experimental-components-hidden--default" }, { - "id": "drafts-components-hidden-features--hide-content" + "id": "experimental-components-hidden-features--hide-content" }, { - "id": "drafts-components-hidden-features--render-content-responsively" + "id": "experimental-components-hidden-features--render-content-responsively" } ], "importPath": "@primer/react/experimental", From 271a8a393a3f0f043559479278abdba7b4b8ac8a Mon Sep 17 00:00:00 2001 From: Marie Lucca <40550942+francinelucca@users.noreply.github.com> Date: Fri, 27 Dec 2024 12:58:34 -0500 Subject: [PATCH 08/13] Create hungry-mugs-stare.md --- .changeset/hungry-mugs-stare.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/hungry-mugs-stare.md diff --git a/.changeset/hungry-mugs-stare.md b/.changeset/hungry-mugs-stare.md new file mode 100644 index 00000000000..7f01a956231 --- /dev/null +++ b/.changeset/hungry-mugs-stare.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +test: add check for story ids in generated docs From 071fae5f5811d2547a8927a401567eb7f5a29661 Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Fri, 27 Dec 2024 15:27:54 -0500 Subject: [PATCH 09/13] fix: InlineMessage story id --- .../react/src/Button/IconButton.features.stories.tsx | 1 + .../react/src/InlineMessage/InlineMessage.docs.json | 12 ++++++------ 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/react/src/Button/IconButton.features.stories.tsx b/packages/react/src/Button/IconButton.features.stories.tsx index 31e23203f12..75050d7c805 100644 --- a/packages/react/src/Button/IconButton.features.stories.tsx +++ b/packages/react/src/Button/IconButton.features.stories.tsx @@ -34,6 +34,7 @@ export const ExternalTooltip = () => ( ) +/* eslint-disable-next-line camelcase */ export const ExternalTooltipVersion_1 = () => ( diff --git a/packages/react/src/InlineMessage/InlineMessage.docs.json b/packages/react/src/InlineMessage/InlineMessage.docs.json index 4547cfe57d5..d88519391bd 100644 --- a/packages/react/src/InlineMessage/InlineMessage.docs.json +++ b/packages/react/src/InlineMessage/InlineMessage.docs.json @@ -6,22 +6,22 @@ "importPath": "@primer/react/experimental", "stories": [ { - "id": "components-inlinemessage--default" + "id": "experimental-components-inlinemessage--default" }, { - "id": "components-inlinemessage-features--critical" + "id": "experimental-components-inlinemessage-features--critical" }, { - "id": "components-inlinemessage-features--success" + "id": "experimental-components-inlinemessage-features--success" }, { - "id": "components-inlinemessage-features--unavailable" + "id": "experimental-components-inlinemessage-features--unavailable" }, { - "id": "components-inlinemessage-features--warning" + "id": "experimental-components-inlinemessage-features--warning" }, { - "id": "components-inlinemessage-features--multiline" + "id": "experimental-components-inlinemessage-features--multiline" } ], "props": [ From 0c60aa1fb434cd5f8e4990bcf4a7c0df02f74162 Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Fri, 27 Dec 2024 15:48:13 -0500 Subject: [PATCH 10/13] update Portal story docs --- packages/react/src/Portal/Portal.docs.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react/src/Portal/Portal.docs.json b/packages/react/src/Portal/Portal.docs.json index 8d680098767..b73d9921e64 100644 --- a/packages/react/src/Portal/Portal.docs.json +++ b/packages/react/src/Portal/Portal.docs.json @@ -5,16 +5,16 @@ "a11yReviewed": false, "stories": [ { - "id": "components-portal--default" + "id": "behaviors-portal--default" }, { - "id": "components-portal-features--custom-portal-root-by-id" + "id": "behaviors-portal-features--custom-portal-root-by-id" }, { - "id": "components-portal-features--custom-portal-root-by-registration" + "id": "behaviors-portal-features--custom-portal-root-by-registration" }, { - "id": "components-portal-features--multiple-portal-roots" + "id": "behaviors-portal-features--multiple-portal-roots" } ], "importPath": "@primer/react", From 44e43f8cdc7d102c539d7cca159fae67af6204e5 Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Fri, 27 Dec 2024 16:03:48 -0500 Subject: [PATCH 11/13] update TooltipV2 story docs --- packages/react/src/TooltipV2/Tooltip.docs.json | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/react/src/TooltipV2/Tooltip.docs.json b/packages/react/src/TooltipV2/Tooltip.docs.json index d8b04275e00..45d4bae1dd5 100644 --- a/packages/react/src/TooltipV2/Tooltip.docs.json +++ b/packages/react/src/TooltipV2/Tooltip.docs.json @@ -7,31 +7,31 @@ "importPath": "@primer/react/next", "stories": [ { - "id": "components-tooltip--default" + "id": "components-tooltipv2--default" }, { - "id": "components-tooltip-features--anchor-has-margin" + "id": "components-tooltipv2-features--anchor-has-margin" }, { - "id": "components-tooltip-features--label-type" + "id": "components-tooltipv2-features--label-type" }, { - "id": "components-tooltip-features--description-type" + "id": "components-tooltipv2-features--description-type" }, { - "id": "components-tooltip-features--icon-button-with-description" + "id": "components-tooltipv2-features--icon-button-with-description" }, { - "id": "components-tooltip-features--all-directions" + "id": "components-tooltipv2-features--all-directions" }, { - "id": "components-tooltip-features--multiline-text" + "id": "components-tooltipv2-features--multiline-text" }, { - "id": "components-tooltip-features--calculated-direction" + "id": "components-tooltipv2-features--calculated-direction" }, { - "id": "components-tooltip-features--on-action-menu-anchor" + "id": "components-tooltipv2-features--on-action-menu-anchor" } ], "props": [ From c5bdd3e4d2f4c055dcd54f36014b539ea0ae25f7 Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Fri, 27 Dec 2024 16:11:21 -0500 Subject: [PATCH 12/13] Revert "merge with main" This reverts commit 577bc6496263aef73702fa477fbd156128af9a6e. --- package-lock.json | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index 89e651e86f5..24d312e14ae 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5916,6 +5916,10 @@ "version": "1.7.2", "license": "MIT" }, + "node_modules/@primer/cli": { + "resolved": "packages/cli", + "link": true + }, "node_modules/@primer/css": { "version": "21.3.6", "dev": true, @@ -30314,7 +30318,6 @@ "packages/cli": { "name": "@primer/cli", "version": "0.0.0", - "extraneous": true, "bin": { "cli": "dist/cli.js" } From 949f52fe152179ff1acf92d3fd6f9c8c9e00e827 Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Fri, 27 Dec 2024 16:17:20 -0500 Subject: [PATCH 13/13] deps: package-lock fix --- package-lock.json | 13 +------------ 1 file changed, 1 insertion(+), 12 deletions(-) diff --git a/package-lock.json b/package-lock.json index 24d312e14ae..73c7f2fb270 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5916,10 +5916,6 @@ "version": "1.7.2", "license": "MIT" }, - "node_modules/@primer/cli": { - "resolved": "packages/cli", - "link": true - }, "node_modules/@primer/css": { "version": "21.3.6", "dev": true, @@ -30315,13 +30311,6 @@ "url": "https://github.com/sponsors/wooorm" } }, - "packages/cli": { - "name": "@primer/cli", - "version": "0.0.0", - "bin": { - "cli": "dist/cli.js" - } - }, "packages/postcss-preset-primer": { "version": "0.0.0", "dependencies": { @@ -30493,7 +30482,7 @@ "@oddbird/popover-polyfill": "^0.4.4", "@primer/behaviors": "^1.7.2", "@primer/live-region-element": "^0.7.1", - "@primer/octicons-react": "19.13.0", + "@primer/octicons-react": "^19.13.0", "@primer/primitives": "9.x || 10.x", "@styled-system/css": "^5.1.5", "@styled-system/props": "^5.1.5",