feat(storybook): unify plugin Storybooks into one composed host#55
Open
antfubot wants to merge 2 commits into
Open
feat(storybook): unify plugin Storybooks into one composed host#55antfubot wants to merge 2 commits into
antfubot wants to merge 2 commits into
Conversation
Add a single Storybook UI that composes every plugin's framework-specific Storybook (React, Vue, Svelte, Solid, vanilla) as its own section, so the whole devframe surface can be browsed in one place. - add the @devframes/storybook host that composes each plugin via refs (live dev-server ports in dev, per-plugin static subfolders in build) - scaffold Storybooks for terminals (Svelte) and a11y (Solid) - align every Storybook on Storybook 10 and a shared dark/light theme toggle
✅ Deploy Preview for devfra ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
…the hub A second take on the unified Storybook: instead of Storybook Composition, use @devframes/hub as the shell and surface each plugin's Storybook as its own lazily-mounted iframe dock, alongside the live terminals plugin. - dev: the plugin's `storybook dev` is spawned on first dock open and iframed live (the on-demand embed pattern code-server uses) - build: the pre-built storybook-static/<plugin> is served by the hub on one origin - both unified behind a `storybook-hub:ensure` RPC; each dock's iframe is created lazily and kept mounted to preserve its state
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.
What & why
Each devframe plugin ships its own framework-specific Storybook (git = React, inspect = Vue, code-server = vanilla, and now terminals = Svelte, a11y = Solid). Storybook is single-framework per builder, so "one Storybook with different pages" is done with Storybook Composition: a thin host whose sidebar shows each plugin as its own section.
Changes
@devframes/storybookhost — composes every plugin's Storybook viarefs, resolving to live dev-server ports in dev and to per-plugin static subfolders in a build, plus a branded Overview page.terminals(Svelte,Appempty state) anda11y(Solid, severitySummary), so all five plugins appear as sections.@storybook/addon-essentials/@storybook/vue3(folded into core), added@storybook/svelte-vite+storybook-solidjs-vite; this also resolves git's previous v10-framework-on-v8-core mismatch..dark-class theme toggle across every surface; a unique dev port per plugin.Usage
pnpm storybook— run the host + all five plugin dev servers in parallel.pnpm storybook:build— build one composed static bundle (storybook/storybook-static/).Also:
examples/storybook-hubA second take on the unified view — instead of Storybook Composition, use
@devframes/hubas the shell and surface each plugin's Storybook as its own lazily-mounted iframe dock, alongside the live terminals plugin (mounted viamountDevframe).vite) — the plugin'sstorybook devis spawned on first dock open and iframed live (the on-demand embed pattern the code-server plugin uses).vite preview) — the pre-builtstorybook/storybook-static/<id>is served by the hub on one origin.storybook-hub:ensureRPC; each dock's iframe is created lazily and kept mounted so its state survives tab switches.Notes
localhost/port URLs resolved in the browser, so those ports must be reachable locally; the composed static build and the hub's preview mode each serve on a single origin.lint,typecheck(9/9),build(14/14),test(532/532), a fullstorybook:buildof all six, and the hub example booting with an on-demandstorybook devserving through a dock.This PR was created with the help of an agent.