feat(core): add Storybook coverage for dock and floating-panel components#398
Open
antfubot wants to merge 6 commits into
Open
feat(core): add Storybook coverage for dock and floating-panel components#398antfubot wants to merge 6 commits into
antfubot wants to merge 6 commits into
Conversation
…ents Adds a top-level `storybook/` workspace (theme-synced manager + preview, autodocs, a generated Overview page) and co-located stories for the webcomponents dock UI: the floating dock bar, edge/float dock modes, panel, groups (button/popover/sidebar), overflow, entries and the floating popover. Stories boot the real dock context over an in-memory mock RPC, so grouping, selection, commands and when-clauses behave as they do at runtime. Makes the shells controllable for isolation without changing runtime behavior: a `#view` slot on DockPanel/DockEdge, and a `useIsRpcTrusted` composable that replaces three uncleaned trust subscriptions. Story-only utility classes are kept out of the shipped shadow-DOM stylesheet.
commit: |
Bumps the storybook catalog to v10.4.6 and switches the preview + DockIcon decorators from the `h(story())` form to the stable template-based `<story/>` decorator. Under the vue3-vite renderer `story()` no longer returns a component, so hand-wrapping it mounted an `undefined` vnode and crashed with "Cannot read properties of undefined (reading 'length')". Also rounds out the story mock RPC (client.register, ensureTrusted, message list) so the fully-composed embedded shell renders. Verified headless: all 48 story entries and the docs pages render without JS errors.
Render the fixed-position dock shells (float bar, edge panel, embedded, standalone, panel) and the fixed overlays (command palette, confirm, toasts) as iframes in the docs canvas via `docs.story.inline: false`, so they no longer appear empty when embedded in autodocs / the Overview. Fix the command palette story: `paletteOpen` is now flipped in `onMounted`, so the open transition fires instead of leaving the palette at opacity-0. Harden `IconifyIcon` against icon fetch failures — a rejected iconify request now degrades to a blank icon instead of crashing the surrounding panel, and failed fetches are no longer cached so a later render can retry. Add stories for the remaining client components and views: brand logos, KeybindingBadge, CommandPaletteItem, CommandPalette, HashBadge, MessageItem, ToastOverlay, Confirm, ViewLauncher, the builtin auth-notice and settings views, the standalone shell, and a json-render primitives gallery. Verified headless (Playwright): all 82 story entries and the docs pages render without JS errors.
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
2 participants
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.
Description
Sets up Storybook for the Vite DevTools core client and gives good coverage of the floating panel, groups and dock modes, following the
@antfu/designstorybook recipe.Storybook workspace (
storybook/) — a top-level, private@vitejs/devtools-storybookpackage:vue3-vite+@storybook/addon-docs,docgen: false(ships raw.vue), UnoCSS wired throughviteFinalwith the repoalias.ts.themeglobal drives light/dark across the preview iframe, the manager chrome and autodocs surfaces.scripts/gen-overview.mtsgenerates a single Overview MDX gallery from disk so it never drifts (pnpm -C storybook docs:overview).Stories (co-located next to the components, 61 story entries): dock
Icon,Entry,EntriesWithCategories, groupButton/Popover/Sidebar, overflow button,FloatingPopover, and the shells — Float Bar (every edge position, groups, overflow, minimized, unauthorized), Edge Panel (4 positions, toolbar-only, group rail), Float Panel, and the full Embedded shell.Story infra (
packages/core/.../webcomponents/stories/):createMockDocksContext()boots the realcreateDocksContextover an in-memory mock RPC, so grouping,switchEntry, commands and when-clauses behave exactly as at runtime — with a mutableisTrustedflag for the unauthorized paths. Ships realistic fixtures and a<Suspense>-based mount helper.Refactors for isolation (behavior-preserving):
#viewslot onDockPanel/DockEdgeso the panel body renders without the live iframe-pane view machinery (default slot keeps the runtime path).useIsRpcTrustedcomposable with scope cleanup, replacing three uncleanedrpc.events.on('rpc:is-trusted:updated')subscriptions inDock/DockEmbedded/DockStandalone(fixes a listener leak).Linked Issues
Additional context
pnpm lint && pnpm test && pnpm typecheck && pnpm build(194 tests pass, including 6 new headless tests exercising the mock-context infra) and a greenstorybook build. The rootpnpm buildgraph does not pull in Storybook.#viewslots anduseIsRpcTrusted— the only runtime-facing changes. The viewport-positioning/drag internals were intentionally left intact (they story faithfully inside the preview iframe).This PR was created with the help of an agent.