feat(storybook): Vue Storybook setup for npm components#5
Merged
Conversation
Brings up Storybook 10 for npm/src/components with per-component stories and a Quasar-aware preview harness. Fixes the broken built-in Quasar icons (e.g. q-select's dropdown arrow rendering as raw "arrow_drop_down" ligature text): iconSet is switched to material-symbols-outlined so internal icon names route through the existing self-hosted iconMapFn instead of the unloaded Material Icons webfont. Cherry-picked the Storybook-relevant slice of a stale WIP worktree (based on an old pre-ACP-refactor commit); left out its accidental @nitra/cursor→n-cursor reversion and unrelated stryker/coverage tooling changes, which would have undone main's already-completed migration to @7n/rules. Also updated AgentDialog.stories.js's mock agent to match the current useAcpAgent() shape (agentKind/modelTier/ availableAgentKinds/availableTiers/loadEnv) — the old mock predated the ACP refactor and threw on mount. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Each new export exercises a real branch already in the component templates, not a fabricated prop combination: - StatePill: Partial, Rejected — fill out the remaining STATUS_COLOR keys not yet covered by a story. - RequestView: Pending (bare status, no summary/actions/error) and ActionFailure (mixed ok/fail actions — exercises the red sym_o_error icon branch alongside the green success one). - BaseDialog: NoIcon — covers the icon's v-if branch when omitted. - AuditDialog: Empty — covers the "No requests yet" empty-state branch (mocked journal.list() returning []). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
vitaliytv
added a commit
that referenced
this pull request
Jul 19, 2026
…ACP migration Resolved conflicts by keeping main's newer stories/preview.js/icon-fix (ACP-updated AgentDialog mock, more story variants, iconSet+iconMapFn combo for internal Quasar icons) and layering this branch's unique contribution on top: named vitest project "storybook" in vitest.config.mjs wired to the @7n/test coverage contract, an isolated vitest.stryker.config.mjs (Stryker's vitest-runner can't initialize a config with a browser/Playwright project), and @7n/test + peers in root devDependencies. Root package.json also picks up main's @nitra/cursor -> @7n/rules migration while keeping the coverage-related additions. Verified post-merge: unit (23/23) and storybook (20/20) vitest projects pass, `bunx 7n-test coverage` produces both JS and Vue (Storybook) rows without the Stryker crash.
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.
Summary
npm/src/componentswith per-component stories and a Quasar-aware preview harness.q-select's dropdown arrow rendering as rawarrow_drop_downligature text) by switchingiconSettomaterial-symbols-outlinedso icon names route through the existing self-hostediconMapFn.StatePillPartial/Rejected,RequestViewPending/ActionFailure,BaseDialogNoIcon,AuditDialogEmpty.AgentDialog.stories.js's mock agent updated to match the currentuseAcpAgent()shape (agentKind/modelTier/...), matching main's ACP migration.Test plan
bun run storybook(or equivalent) boots and each story renders without console errorsq-select-using storybun run lint/bun teststill pass on this branch🤖 Generated with Claude Code