From 447a343997623bebf72b05373e2fca3406ba1388 Mon Sep 17 00:00:00 2001 From: Lukas Oppermann Date: Tue, 14 Oct 2025 12:55:08 +0200 Subject: [PATCH 1/5] trying to add live editoer --- package-lock.json | 39 ++++++++++++++++++++ package.json | 1 + packages/react/.storybook/main.ts | 3 ++ packages/react/src/Avatar/Avatar.stories.tsx | 6 +++ 4 files changed, 49 insertions(+) diff --git a/package-lock.json b/package-lock.json index 873b85a5cb9..20a3386605f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -54,6 +54,7 @@ "rimraf": "5.0.5", "size-limit": "11.2.0", "storybook": "^9.1.8", + "storybook-addon-code-editor": "^5.0.0", "stylelint": "16.20.0", "turbo": "^2.5.5", "typescript": "^5.9.2", @@ -1990,6 +1991,16 @@ "node": ">=6.9.0" } }, + "node_modules/@babel/standalone": { + "version": "7.28.4", + "resolved": "https://registry.npmjs.org/@babel/standalone/-/standalone-7.28.4.tgz", + "integrity": "sha512-Qc1BNCfuJZBKs2SC5lqRmSYOw7Ka0X7urZQ7oVsGIax4eGDUIHX+CDg752N4jDxC2rbBh3li098ReGOtjT0x4g==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, "node_modules/@babel/template": { "version": "7.27.2", "license": "MIT", @@ -17346,6 +17357,13 @@ "node": ">=10" } }, + "node_modules/monaco-editor": { + "version": "0.52.2", + "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.52.2.tgz", + "integrity": "sha512-GEQWEZmfkOGLdd3XK8ryrfWz3AIP8YymVXiPHEdewrUq7mh0qrKrfHLNCXcbB6sTnMLnOZ3ztSiKcciFUkIJwQ==", + "dev": true, + "license": "MIT" + }, "node_modules/mri": { "version": "1.2.0", "dev": true, @@ -22563,6 +22581,27 @@ } } }, + "node_modules/storybook-addon-code-editor": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/storybook-addon-code-editor/-/storybook-addon-code-editor-5.0.0.tgz", + "integrity": "sha512-/8P+1upZZzCOXmD1nC8pLivT5rf47dxk2msKtalzV7ppERcU/XHC2jCDYYzjKos3K1YkK1wjzGN6dUsFDFYibQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/standalone": "^7.27.0", + "monaco-editor": "0.52.2" + }, + "peerDependencies": { + "@types/react": "17.x.x || 18.x.x || 19.x.x", + "react": "17.x.x || 18.x.x || 19.x.x", + "storybook": "^9.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/streamx": { "version": "2.22.1", "dev": true, diff --git a/package.json b/package.json index d03601a6519..e81ee5c0a4b 100644 --- a/package.json +++ b/package.json @@ -82,6 +82,7 @@ "rimraf": "5.0.5", "size-limit": "11.2.0", "storybook": "^9.1.8", + "storybook-addon-code-editor": "^5.0.0", "stylelint": "16.20.0", "turbo": "^2.5.5", "typescript": "^5.9.2", diff --git a/packages/react/.storybook/main.ts b/packages/react/.storybook/main.ts index 513fe52378d..0098da7b022 100644 --- a/packages/react/.storybook/main.ts +++ b/packages/react/.storybook/main.ts @@ -3,6 +3,7 @@ import path from 'node:path' import react from '@vitejs/plugin-react' import postcssPresetPrimer from 'postcss-preset-primer' import type {StorybookConfig} from '@storybook/react-vite' +import {getCodeEditorStaticDirs} from 'storybook-addon-code-editor/getStaticDirs' import {isSupported} from '../script/react-compiler.mjs' const require = createRequire(import.meta.url) @@ -10,6 +11,7 @@ const require = createRequire(import.meta.url) const {DEPLOY_ENV = 'development'} = process.env const config: StorybookConfig = { + staticDirs: [...getCodeEditorStaticDirs(__filename)], stories: DEPLOY_ENV === 'development' ? ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'] @@ -20,6 +22,7 @@ const config: StorybookConfig = { getAbsolutePath('@storybook/addon-a11y'), getAbsolutePath('@storybook/addon-links'), getAbsolutePath('@storybook/addon-docs'), + 'storybook-addon-code-editor', ], framework: { diff --git a/packages/react/src/Avatar/Avatar.stories.tsx b/packages/react/src/Avatar/Avatar.stories.tsx index 0a97a0924d3..07ce30f74f3 100644 --- a/packages/react/src/Avatar/Avatar.stories.tsx +++ b/packages/react/src/Avatar/Avatar.stories.tsx @@ -2,6 +2,7 @@ import type {Meta, StoryFn} from '@storybook/react-vite' import type {AvatarProps} from './Avatar' import Avatar, {DEFAULT_AVATAR_SIZE} from './Avatar' import {parseSizeFromArgs} from './storyHelpers' +import {makeLiveEditStory} from 'storybook-addon-code-editor' export default { title: 'Components/Avatar', @@ -17,6 +18,11 @@ type Args = { export const Default = () => +makeLiveEditStory(Default, { + // availableImports: {'my-library': MyLibrary}, + code: ``, +}) + export const Playground: StoryFn = args => { return ( Date: Tue, 14 Oct 2025 14:06:10 +0200 Subject: [PATCH 2/5] added live code editor to Avatar --- packages/react/src/Avatar/Avatar.stories.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/react/src/Avatar/Avatar.stories.tsx b/packages/react/src/Avatar/Avatar.stories.tsx index 07ce30f74f3..a09e9784234 100644 --- a/packages/react/src/Avatar/Avatar.stories.tsx +++ b/packages/react/src/Avatar/Avatar.stories.tsx @@ -3,6 +3,8 @@ import type {AvatarProps} from './Avatar' import Avatar, {DEFAULT_AVATAR_SIZE} from './Avatar' import {parseSizeFromArgs} from './storyHelpers' import {makeLiveEditStory} from 'storybook-addon-code-editor' +// @ts-expect-error Vite raw import for code preview in Storybook +import * as PrimerReactLibrary from '../index'; export default { title: 'Components/Avatar', @@ -16,11 +18,13 @@ type Args = { sizeAtWide?: number } & Omit -export const Default = () => +export const Default = {} makeLiveEditStory(Default, { - // availableImports: {'my-library': MyLibrary}, - code: ``, + availableImports: {'@primer/react': PrimerReactLibrary}, + code: `import { Avatar } from '@primer/react'; + + export default () => `, }) export const Playground: StoryFn = args => { From c413237e7adcd4f48b450423f697f396bc4cf560 Mon Sep 17 00:00:00 2001 From: Lukas Oppermann Date: Tue, 14 Oct 2025 14:09:00 +0200 Subject: [PATCH 3/5] remove comment --- packages/react/src/Avatar/Avatar.stories.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react/src/Avatar/Avatar.stories.tsx b/packages/react/src/Avatar/Avatar.stories.tsx index a09e9784234..74141c057e3 100644 --- a/packages/react/src/Avatar/Avatar.stories.tsx +++ b/packages/react/src/Avatar/Avatar.stories.tsx @@ -3,7 +3,6 @@ import type {AvatarProps} from './Avatar' import Avatar, {DEFAULT_AVATAR_SIZE} from './Avatar' import {parseSizeFromArgs} from './storyHelpers' import {makeLiveEditStory} from 'storybook-addon-code-editor' -// @ts-expect-error Vite raw import for code preview in Storybook import * as PrimerReactLibrary from '../index'; export default { From 81381144d64962bc2addc3d6c97db8b663353076 Mon Sep 17 00:00:00 2001 From: Lukas Oppermann Date: Tue, 14 Oct 2025 14:50:23 +0200 Subject: [PATCH 4/5] update Playground story --- packages/react/src/Avatar/Avatar.stories.tsx | 25 ++++++++++++-------- 1 file changed, 15 insertions(+), 10 deletions(-) diff --git a/packages/react/src/Avatar/Avatar.stories.tsx b/packages/react/src/Avatar/Avatar.stories.tsx index 74141c057e3..fc39dff780e 100644 --- a/packages/react/src/Avatar/Avatar.stories.tsx +++ b/packages/react/src/Avatar/Avatar.stories.tsx @@ -26,16 +26,7 @@ makeLiveEditStory(Default, { export default () => `, }) -export const Playground: StoryFn = args => { - return ( - - ) -} +export const Playground = {} Playground.args = { size: DEFAULT_AVATAR_SIZE, @@ -72,3 +63,17 @@ Playground.argTypes = { }, }, } + +makeLiveEditStory(Playground, { + availableImports: {'@primer/react': PrimerReactLibrary}, + code: `import { Avatar } from '@primer/react'; + +export default (args) => ( + +);`, +}) From ba0ea18e6dfda874705e0ccefef7da915f4bfeb8 Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Wed, 15 Oct 2025 15:57:00 -0400 Subject: [PATCH 5/5] format --- packages/react/src/Avatar/Avatar.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/Avatar/Avatar.stories.tsx b/packages/react/src/Avatar/Avatar.stories.tsx index fc39dff780e..0056a52f359 100644 --- a/packages/react/src/Avatar/Avatar.stories.tsx +++ b/packages/react/src/Avatar/Avatar.stories.tsx @@ -3,7 +3,7 @@ import type {AvatarProps} from './Avatar' import Avatar, {DEFAULT_AVATAR_SIZE} from './Avatar' import {parseSizeFromArgs} from './storyHelpers' import {makeLiveEditStory} from 'storybook-addon-code-editor' -import * as PrimerReactLibrary from '../index'; +import * as PrimerReactLibrary from '../index' export default { title: 'Components/Avatar',