chore(design-sync): sync Lab component library to claude.ai/design#440
Draft
samcm wants to merge 1 commit into
Draft
chore(design-sync): sync Lab component library to claude.ai/design#440samcm wants to merge 1 commit into
samcm wants to merge 1 commit into
Conversation
Adds the design-sync configuration that publishes lab's Storybook component
library (91 reusable components) to a claude.ai/design project, so the Design
agent builds UIs from the real compiled components.
lab is an app, not a published library, so this bridges the gap:
- .design-sync/ds-entry.ts — barrel re-exporting every storied component to the
bundle global; declared as the package `types` entry for prop extraction
- .design-sync/ds-providers.tsx — replicates the storybook decorator chain
(QueryClient + mocks, ThemeProvider dark, Router, Network) as the preview provider
- .design-sync/ds-tailwind.css — compiled Tailwind (utilities + inlined fonts)
- .design-sync/tsconfig.paths.json — @/ alias + index-dir resolution for esbuild
- .design-sync/echarts-core-shim.js — fixes echarts-for-react CJS interop
- .design-sync/ds-body-guard.ts — body guard for import-time CSS-var probing
- .design-sync/{config.json,conventions.md,NOTES.md} — sync config, agent-facing
usage guide, and re-sync notes
Excludes map components (runtime geo-data fetch / echarts-gl) and a handful of
components whose stories depend on providers/mocks outside the global decorators.
Claude-Session: https://claude.ai/code/session_01Fr96eYncEsAayj1WaJW1g8
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Publishes lab's Storybook component library to a claude.ai/design project (ethPandaOps Lab) so the Design agent builds UIs from the real compiled components.
What this adds
lab is an application, not a published component library, so this bridges the gap between the two — all under
.design-sync/(build artifacts and caches are gitignored):ds-entry.ts— auto-generated barrel re-exporting every storied component onto the bundle global; also declared as the packagetypesentry (inpackage.json) so the converter can extract prop types.ds-providers.tsx— replicates.storybook/preview.tsx's decorator chain (hydrated QueryClient, ThemeProvider pinned dark, ConfigGate, memory Router, NetworkProvider) as the preview provider.ds-tailwind.css— the compiled Tailwind (all utilities used across the library) with Space Grotesk@font-faces inlined as data URIs; wired viacfg.cssEntry.tsconfig.paths.json— a clean@/alias + explicitsrc/index-dir mappings for esbuild (the repo'stsconfig.app.jsonhas a trailing comma that breaks the alias plugin).echarts-core-shim.js— unwrapsecharts-for-react/lib/core's CJS default so echarts charts render under esbuild.ds-body-guard.ts— ensures a<body>exists before import-time CSS-variable probing runs.config.json(sync config),conventions.md(agent-facing usage guide, prepended to the README),NOTES.md(re-sync notes + every fix and exclusion documented).Scope
91 reusable components synced and verified (previews graded against the real Storybook render). Excluded: the four map components (runtime geo-data fetch / echarts-gl incompatible with esbuild), and a handful whose stories depend on providers/mocks that live outside the Storybook global decorators (documented in NOTES.md).
Project: https://claude.ai/design/p/8e0ad382-54fd-42aa-8661-dccfcb925556
https://claude.ai/code/session_01Fr96eYncEsAayj1WaJW1g8