diff --git a/packages/lsd-react/.storybook/scripts/export-components.ts b/packages/lsd-react/.storybook/scripts/export-components.ts new file mode 100644 index 0000000..b97eb43 --- /dev/null +++ b/packages/lsd-react/.storybook/scripts/export-components.ts @@ -0,0 +1,102 @@ +import type { ArgTypes } from '@storybook/react' +import * as fs from 'fs' +import * as fsp from 'fs/promises' +import { glob } from 'glob' +import path from 'path' +import { fileURLToPath } from 'url' + +const DIRNAME = fileURLToPath(import.meta.url) +const ROOT_DIR = path.resolve(DIRNAME, '../../../') +const BUILD_DIR = path.resolve(ROOT_DIR, 'storybook-static') +const STORIES_JSON = path.resolve(BUILD_DIR, 'stories.json') + +type StoryInfo = { + id: string + name: string + title: string + kind: string + importPath: string + tags: string[] + story: string + parameters: { + __id: string + docsOnly: boolean + fileName: string + } +} + +type StoriesJson = { + v: number + stories: StoryInfo[] +} + +export const fromStories = async (storiesJson: StoriesJson) => { + const { stories: storiesMap } = storiesJson + const stories = Object.values(storiesMap).filter( + (story) => !story.parameters.docsOnly, + ) + + const components: Record< + string, + { + stories: StoryInfo[] + argTypes: ArgTypes + __docgenInfo: any + } + > = {} + + const storyFiles = await glob( + path.join(BUILD_DIR, 'assets') + `/*.stories-*.js`, + ) + + for (const file of storyFiles) { + const mod = await import(file) + const { title, component, argTypes } = mod.default + + components[component.displayName] = { + argTypes, + stories: stories.filter((story) => story.kind === title), + __docgenInfo: component.__docgenInfo, + } + } + + return Object.entries(components) + .map(([name, details]) => ({ + name, + ...details, + })) + .sort((a, b) => a.name.localeCompare(b.name)) +} + +export const run = async () => { + if (!fs.existsSync(BUILD_DIR)) { + console.error('The storybook-static dir not found!') + process.exit(1) + } + if (!fs.existsSync(STORIES_JSON)) { + console.error('The stories.json file not found!') + process.exit(1) + } + + const stories = await import(STORIES_JSON, { assert: { type: 'json' } }) + + await fsp.writeFile( + path.join(BUILD_DIR, 'package.json'), + Buffer.from( + JSON.stringify({ + type: 'module', + }), + ), + ) + + const result = await fromStories(stories.default) + + await fsp.writeFile( + path.join(BUILD_DIR, 'components.json'), + Buffer.from(JSON.stringify(result)), + ) + + fs.unlinkSync(path.join(BUILD_DIR, 'package.json')) +} + +run() diff --git a/packages/lsd-react/.storybook/scripts/package.json b/packages/lsd-react/.storybook/scripts/package.json new file mode 100644 index 0000000..3dbc1ca --- /dev/null +++ b/packages/lsd-react/.storybook/scripts/package.json @@ -0,0 +1,3 @@ +{ + "type": "module" +} diff --git a/packages/lsd-react/package.json b/packages/lsd-react/package.json index b2b3b4a..9b34759 100644 --- a/packages/lsd-react/package.json +++ b/packages/lsd-react/package.json @@ -9,7 +9,8 @@ "build": "tsc && vite build", "watch": "tsc && vite build --watch --emptyOutDir false", "storybook": "storybook dev -p 6006 -s .storybook/public", - "build-storybook": "storybook build -s .storybook/public && ts-node -P tsconfig.node.json .storybook/scripts/export-storybook.ts", + "build-storybook": "storybook build -s .storybook/public && yarn storybook:export-components", + "storybook:export-components": "ts-node -P tsconfig.node.json .storybook/scripts/export-components.ts", "preview": "vite preview", "prepublish": "yarn build" },