Skip to content

feat(storybook): add Colors example page#2

Merged
wreiske merged 1 commit into
mainfrom
feature/colors-examples
Jan 20, 2026
Merged

feat(storybook): add Colors example page#2
wreiske merged 1 commit into
mainfrom
feature/colors-examples

Conversation

@garrity-miepub

Copy link
Copy Markdown
Collaborator

Add a new Colors page under Examples that displays all theme colors with their CSS variables, hex values, and Tailwind classes.

  • Primary color scale (50-950)
  • Semantic colors (background, foreground, card, muted, border, etc.)
  • Status colors (destructive, success, warning)
  • Click-to-copy functionality for all values
  • Dark mode values shown where different
  • Usage examples for CSS and Tailwind
colors.mov

Add a new Colors page under Examples that displays all theme colors
with their CSS variables, hex values, and Tailwind classes.

- Primary color scale (50-950)
- Semantic colors (background, foreground, card, muted, border, etc.)
- Status colors (destructive, success, warning)
- Click-to-copy functionality for all values
- Dark mode values shown where different
- Usage examples for CSS and Tailwind
@wreiske wreiske merged commit 297f3ea into main Jan 20, 2026
1 check passed
garrity-miepub added a commit that referenced this pull request Feb 11, 2026
Address 5 of 7 review comments from the Copilot pull request reviewer
on PR #89, with the remaining 2 acknowledged as intentional deferrals.

Changes:

1. Replace Math.random() with React.useId() for gridIdRef (line 214)
   - Eliminates SSR/hydration mismatch risk by producing deterministic,
     stable IDs across server and client renders.
   - Colons in useId() output are sanitized to hyphens for DOM id
     compatibility.

2. Fix useEffect dependency array (line 467)
   - Replaced manual [source.type, source.url, JSON.stringify(source.data)]
     with [initializeDataVis, destroyInstances].
   - initializeDataVis is a useCallback that already captures source,
     viewOptions, gridOptions, and all callback props in its deps, so
     the effect now correctly re-triggers when ANY of those change.
   - Previously, viewOptions/gridOptions updates were silently ignored.
   - Removes both eslint-disable comments for react-hooks/exhaustive-deps.

3. Remove JSON.stringify(source.data) from dependency array (line 467)
   - Resolved automatically by fix #2 above.
   - Eliminates the risk of expensive serialization on large datasets
     and potential throws on circular structures.

4. Remove unused dv-brand-* CSS class names from brand variants (line 99)
   - No corresponding CSS rules existed anywhere in the repo.
   - Brand theming is handled entirely via CSS custom properties set by
     ThemeProvider, making these class names dead code.
   - All brand variant values set to empty strings (preserving the
     variant type system for future use).

5. Fix import specifier mismatch with peer dependency (line 315)
   - Now tries import('@mieweb/wcdatavis') first, matching the declared
     peerDependency name.
   - Falls back to import('wcdatavis') for local dev (file: dep) and
     Storybook (Vite alias to shim).
   - Consumers who install the scoped package no longer need custom
     build aliases.

Deferred (not changed, explained in PR review comments):
- datavis-theme.css not in dist/: DataVis not yet in tsup entry points.
- file: devDependency: Intentional local dev workflow; CI uses stubs.
garrity-miepub added a commit that referenced this pull request May 1, 2026
- StepIndicator: add aria-label to step circle buttons (button-name)
- Slider: move hidden input outside role="slider" div (nested-interactive)
- BusinessHoursEditor story: add tabIndex + role to scrollable pre (scrollable-region-focusable)
- Timeline: add aria-label to progressbar (aria-progressbar-name)
- Dashboard story: disable DataVis NITRO ARIA rules per-story (upstream library)
- AudioPlayer: fix time display contrast (text-muted-foreground → text-neutral-600)
- Sidebar story: add aria-label to collapse buttons (button-name)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants