vince/dimensionlab-website
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

Add Storybook component explorer for dashboard UI #13

New issue
Closed
opened 2026-06-18 16:39:43 +02:00 by vince · 0 comments
vince commented 2026-06-18 16:39:43 +02:00
Owner
Copy link

Parent: #1

Design reference

System overview dashboard reference

Goal

Add Storybook so every reusable dashboard component can be viewed, reviewed, and tested in isolation while the product UI is still being built.

Existing components/ui decision

There is no components/ui directory in dimensionlab-website yet. The React files in /home/vince/forgejo-brutalist-frontend/src/components/ui can inform the visual language, but must not be copied directly because this product is SvelteKit/Svelte.

Use as Svelte equivalents now:

  • Button: for refresh, preview/publish actions, future editor actions, and compact toolbar controls.
  • Badge: for status, severity, source, stale/unavailable, and operational labels.
  • Separator: for hard layout dividers where a semantic component is clearer than ad hoc borders.

Add now because the dashboard needs them even though they are not in the old React UI folder:

  • IconGlyph: generic Iconify renderer driven by model-provided icon names.
  • IconButton: square action button for refresh/open/inspect controls.
  • Panel: hard-edged section frame used by dashboard sections.
  • GridFrame: page/grid wrapper for the command-center layout.
  • TelemetryCard: metric card with value, unit, severity, source label, progress/sparkline slot, and stale/error states.
  • ProgressMeter: compact bar meter for metric cards.
  • Sparkline: lightweight chart primitive; can later feed richer uPlot cases.
  • ServiceRow: service link/status row with icon, title, description, latency/status, and keyboard focus behavior.
  • ServiceGroupPanel: grouped list of service rows.
  • StatusStrip: top/bottom operational status band.
  • WeatherModule: generic compact summary module, not hardcoded to weather-only content.
  • FooterStatusCell: individual footer/status-bar item.
  • EmptyState, LoadingState, ErrorState, UnavailableState: reusable system states.

Defer until an editor/admin workflow needs them:

  • Input: not needed for the public dashboard shell, but likely needed for import/editor/agent preview UI later.
  • ToggleGroup: defer until there are actual view/density/filter controls.
  • ScrollArea: avoid for the one-page dashboard; use native page scrolling unless a future editor/sidebar requires a custom scroll region.

Scope

  • Add Storybook for the SvelteKit/Svelte component stack.
  • Create stories for every component listed in the component inventory above.
  • Use generic fixture data only; stories must not contain Dimension Lab service names, URLs, host names, metric labels, or operational values.
  • Add state variants for normal, warning, danger, stale, loading, unavailable, empty, focused, compact, dense, and long-text cases where relevant.
  • Add viewport-oriented stories for desktop command-center density and mobile stacking.
  • Wire Iconify-driven icons through model-like story props instead of hardcoded service-specific imports.
  • Document how to run Storybook locally and how component stories relate to the renderer and dashboard model.

Required stories

Base UI:

  • Button.stories.svelte: default, secondary, danger, ghost/outline, disabled, loading, icon-leading, compact.
  • IconButton.stories.svelte: refresh/open/inspect examples, disabled, active, focus-visible.
  • Badge.stories.svelte: neutral, ok, warning, danger, stale, unavailable, long label.
  • Separator.stories.svelte: horizontal, vertical, dense panel use.
  • IconGlyph.stories.svelte: valid icon, missing icon fallback, size variants, severity colors.

Dashboard primitives:

  • Panel.stories.svelte: default, dense, warning, danger, empty, nested-content guard.
  • GridFrame.stories.svelte: desktop grid, tablet wrap, mobile stack.
  • TelemetryCard.stories.svelte: percent, bytes, temperature, latency, no data, stale, warning, danger, long source label.
  • ProgressMeter.stories.svelte: low/normal/warn/danger/empty values.
  • Sparkline.stories.svelte: flat, rising, spiky, missing data, stale.
  • ServiceRow.stories.svelte: normal, down, degraded, stale, no link, long title/description, keyboard focus.
  • ServiceGroupPanel.stories.svelte: short list, long list, empty group, mixed statuses.
  • StatusStrip.stories.svelte: all operational, degraded, incident, syncing, stale.
  • WeatherModule.stories.svelte: compact summary, unavailable, long location/value, generic module variant.
  • FooterStatusCell.stories.svelte: label/value, action cell, stale, long value.
  • SystemState.stories.svelte: loading, empty, error, unavailable, validation failure.

Composition stories:

  • DashboardHeader.stories.svelte: title/subtitle/status module composition with generic content.
  • TelemetryStrip.stories.svelte: 8-card and 16-card density, wrap behavior, mixed severity.
  • DashboardOnePager.stories.svelte: full generic dashboard composition at desktop and mobile widths.

Acceptance criteria

  • npm run storybook starts the component explorer.
  • npm run build-storybook succeeds.
  • Every reusable UI component introduced by the design system has at least one story.
  • Critical components have state variants that cover status severity, loading/error/empty states, focus states, responsive behavior, and long content.
  • A source search confirms Storybook fixtures do not embed Dimension Lab-specific content.
  • Storybook can be used to review visual polish without running live telemetry or persistence.
  • Deferred components are not built just because they existed in the older React UI folder.

Out of scope

  • Storybook deployment/hosting.
  • Full visual regression pipeline; that remains in #10.
  • Real dashboard content stories; Dimension Lab content belongs in model seed data from #11.
  • Copying React components/ui files from the Forgejo frontend project.
Parent: #1 ## Design reference ![System overview dashboard reference](https://git.dimensionlab.net/attachments/39e9396a-a4cc-4110-aadd-633bda94cd03) ## Goal Add Storybook so every reusable dashboard component can be viewed, reviewed, and tested in isolation while the product UI is still being built. ## Existing `components/ui` decision There is no `components/ui` directory in `dimensionlab-website` yet. The React files in `/home/vince/forgejo-brutalist-frontend/src/components/ui` can inform the visual language, but must not be copied directly because this product is SvelteKit/Svelte. Use as Svelte equivalents now: - `Button`: for refresh, preview/publish actions, future editor actions, and compact toolbar controls. - `Badge`: for status, severity, source, stale/unavailable, and operational labels. - `Separator`: for hard layout dividers where a semantic component is clearer than ad hoc borders. Add now because the dashboard needs them even though they are not in the old React UI folder: - `IconGlyph`: generic Iconify renderer driven by model-provided icon names. - `IconButton`: square action button for refresh/open/inspect controls. - `Panel`: hard-edged section frame used by dashboard sections. - `GridFrame`: page/grid wrapper for the command-center layout. - `TelemetryCard`: metric card with value, unit, severity, source label, progress/sparkline slot, and stale/error states. - `ProgressMeter`: compact bar meter for metric cards. - `Sparkline`: lightweight chart primitive; can later feed richer `uPlot` cases. - `ServiceRow`: service link/status row with icon, title, description, latency/status, and keyboard focus behavior. - `ServiceGroupPanel`: grouped list of service rows. - `StatusStrip`: top/bottom operational status band. - `WeatherModule`: generic compact summary module, not hardcoded to weather-only content. - `FooterStatusCell`: individual footer/status-bar item. - `EmptyState`, `LoadingState`, `ErrorState`, `UnavailableState`: reusable system states. Defer until an editor/admin workflow needs them: - `Input`: not needed for the public dashboard shell, but likely needed for import/editor/agent preview UI later. - `ToggleGroup`: defer until there are actual view/density/filter controls. - `ScrollArea`: avoid for the one-page dashboard; use native page scrolling unless a future editor/sidebar requires a custom scroll region. ## Scope - Add Storybook for the SvelteKit/Svelte component stack. - Create stories for every component listed in the component inventory above. - Use generic fixture data only; stories must not contain Dimension Lab service names, URLs, host names, metric labels, or operational values. - Add state variants for normal, warning, danger, stale, loading, unavailable, empty, focused, compact, dense, and long-text cases where relevant. - Add viewport-oriented stories for desktop command-center density and mobile stacking. - Wire Iconify-driven icons through model-like story props instead of hardcoded service-specific imports. - Document how to run Storybook locally and how component stories relate to the renderer and dashboard model. ## Required stories Base UI: - [ ] `Button.stories.svelte`: default, secondary, danger, ghost/outline, disabled, loading, icon-leading, compact. - [ ] `IconButton.stories.svelte`: refresh/open/inspect examples, disabled, active, focus-visible. - [ ] `Badge.stories.svelte`: neutral, ok, warning, danger, stale, unavailable, long label. - [ ] `Separator.stories.svelte`: horizontal, vertical, dense panel use. - [ ] `IconGlyph.stories.svelte`: valid icon, missing icon fallback, size variants, severity colors. Dashboard primitives: - [ ] `Panel.stories.svelte`: default, dense, warning, danger, empty, nested-content guard. - [ ] `GridFrame.stories.svelte`: desktop grid, tablet wrap, mobile stack. - [ ] `TelemetryCard.stories.svelte`: percent, bytes, temperature, latency, no data, stale, warning, danger, long source label. - [ ] `ProgressMeter.stories.svelte`: low/normal/warn/danger/empty values. - [ ] `Sparkline.stories.svelte`: flat, rising, spiky, missing data, stale. - [ ] `ServiceRow.stories.svelte`: normal, down, degraded, stale, no link, long title/description, keyboard focus. - [ ] `ServiceGroupPanel.stories.svelte`: short list, long list, empty group, mixed statuses. - [ ] `StatusStrip.stories.svelte`: all operational, degraded, incident, syncing, stale. - [ ] `WeatherModule.stories.svelte`: compact summary, unavailable, long location/value, generic module variant. - [ ] `FooterStatusCell.stories.svelte`: label/value, action cell, stale, long value. - [ ] `SystemState.stories.svelte`: loading, empty, error, unavailable, validation failure. Composition stories: - [ ] `DashboardHeader.stories.svelte`: title/subtitle/status module composition with generic content. - [ ] `TelemetryStrip.stories.svelte`: 8-card and 16-card density, wrap behavior, mixed severity. - [ ] `DashboardOnePager.stories.svelte`: full generic dashboard composition at desktop and mobile widths. ## Acceptance criteria - `npm run storybook` starts the component explorer. - `npm run build-storybook` succeeds. - Every reusable UI component introduced by the design system has at least one story. - Critical components have state variants that cover status severity, loading/error/empty states, focus states, responsive behavior, and long content. - A source search confirms Storybook fixtures do not embed Dimension Lab-specific content. - Storybook can be used to review visual polish without running live telemetry or persistence. - Deferred components are not built just because they existed in the older React UI folder. ## Out of scope - Storybook deployment/hosting. - Full visual regression pipeline; that remains in #10. - Real dashboard content stories; Dimension Lab content belongs in model seed data from #11. - Copying React `components/ui` files from the Forgejo frontend project.
vince added the
frontend
quality
 labels 2026-06-18 16:39:43 +02:00
vince closed this issue 2026-06-18 19:04:18 +02:00
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
codex/remove-prompts-site-item
codex/use-host-deploy-runner
codex/document-forgejo-runner-deploy-option
codex/forgejo-actions-auto-deploy
codex/fix-initial-stale-health-summary
codex/dashboard-sse-events
codex/dashboard-batch-tiles
codex/dashboard-observability
codex/dashboard-adaptive-hydration
codex/dashboard-last-known-tiles
codex/dashboard-service-snapshot
codex/dashboard-tile-cache
codex/dashboard-hydration-scheduler
codex/dashboard-client-lifecycle
codex/fix-website-container-build
codex/independent-tile-hydration
codex/ui-submodule
codex/turbo-env-inputs
codex/ui-prop-type-exports
codex/turbo-ui-entrypoints
codex/turbo-package-exports
codex/turbo-pruned-container
codex/turbo-ui-filetree
codex/turbo-package-boundaries
codex/turbo-idiomatic-workspace
codex/turbo-component-library
codex/console-visual-system
codex/brutalist-theme-toggle
codex/light-mode-toggle
codex/react-migration
codex/agent-config-tier
codex/dashboard-type-balance
codex/dense-bookmark-dividers
codex/issue-1-observability-dashboard
codex/decorative-style-primitives
codex/issue-10-mvp-qa-gate
codex/issue-7-model-renderer
codex/issue-11-dimension-lab-seed
codex/issue-13-storybook
codex/issue-6-design-system
codex/issue-4-dashboard-persistence
codex/issue-3-dashboard-model
codex/issue-2-sveltekit-runtime
No results found.
Labels
Clear labels   
agent

AI-agent configuration surface and tool contracts

  
architecture

Product architecture and core technical decisions

  
backend

Server runtime, persistence, and APIs

  
frontend

Frontend UI, renderer, and visual system work

  
quality

Testing, accessibility, QA, and release readiness

  
telemetry

Metrics, health checks, status, and datasource integrations

  
umbrella

Tracks a multi-part design/build initiative

No labels
agent
architecture
backend
frontend
quality
telemetry
umbrella
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: vince/dimensionlab-website#13
No description provided.
Delete branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?