feat(storybook): shadcn migrations, continuous update strategy by hakalb · Pull Request #430 · codeware-sthlm/codeware

hakalb · 2026-05-18T21:41:06Z

Summary

Consolidates _core/tailwind-setup.css as the single source for dark variant, nova data-attribute variants, and @theme inline mappings — imported by all themes
Adds shadcn as a 4th reference theme (zinc palette) for verifying components against the upstream default before applying project-specific themes
Upgrades all shadcn components to nova style via the new shadcn:update target
Adds theme-sync generator to dev-plugin that validates completeness against _core/tailwind-setup.css and _core/typography-prose.js blueprints, auto-detects dark strategy, and generates themes.css + themes-meta.ts
Adds Storybook stories for all shadcn components and a Theme › Overview story
Redesigns Introduction.mdx with Mermaid diagrams, GFM tables, and up-to-date architecture documentation

Test plan

Run pnpm nx storybook and verify Introduction page renders with Mermaid diagrams and tables
Switch App Theme toolbar → all four themes render correctly
Switch Color Theme toolbar → light/dark toggles work per theme
Open Theme › Overview story — all token swatches visible across four themes
Run pnpm nx sync — passes with no drift detected
Run pnpm nx shadcn:update on a clean branch — diff reflects only upstream changes

🤖 Generated with Claude Code

bolt-new-by-stackblitz · 2026-05-18T21:41:10Z

Run & review this pull request in StackBlitz Codeflow.

Copilot

Pull request overview

Consolidates the Tailwind/shadcn theme plumbing into a single _core/tailwind-setup.css, adds a shadcn reference theme (zinc), introduces a dev-plugin Nx generator (theme-sync) that validates theme completeness and emits themes.css / themes-meta.ts for Storybook, upgrades all shadcn components to nova-style templates (with the new radix-ui umbrella import and updated class strings), and wires up an Nx-managed Storybook 10 app with stories, MDX docs and a Theme Overview.

Changes:

New tools/dev-plugin Nx plugin with the theme-sync sync generator, registered as a global sync generator and on Storybook targets.
Theme refactor: all themes import _core/tailwind-setup.css; new shadcn and payload-admin standalone themes; CMS custom.css reduced to a single import.
Upgrades shadcn components to nova style, adds storybook stories/MDX for all of them, plus the Storybook app, preview decorator, Introduction MDX and Theme Overview story.

Reviewed changes

Copilot reviewed 107 out of 113 changed files in this pull request and generated 10 comments.

Show a summary per file

File	Description
tools/dev-plugin/**	New Nx plugin hosting the `theme-sync` generator + tests, project/tsconfig wiring.
tools/dev-plugin/src/generators/theme-sync/theme-sync.ts	Validates theme tokens against `_core` blueprints, auto-detects dark strategy, emits `themes.css` & `themes-meta.ts`.
libs/shared/theme/src/lib/_core/**	New consolidated `tailwind-setup.css`, prose/typography modules.
libs/shared/theme/src/lib/{shadcn,payload-admin}/**	New reference and CMS admin themes.
libs/shared/theme/src/lib/{spotlight,codeware}/**	Migrated to share `_core/tailwind-setup.css`; brand/core/prose tokens normalized.
libs/shared/theme/src/lib/core/** (deleted)	Old `theme-map-*` and `layer-base.css` removed; replaced by `_core/tailwind-setup.css`.
libs/shared/ui/shadcn/src/lib/components/**	shadcn components upgraded to nova style; switched to `radix-ui` umbrella import.
libs/shared/ui/shadcn/src/lib/.stories.tsx & .mdx	New Storybook stories + MDX docs for all shadcn components.
libs/shared/ui/{primitives,icon-picker,color-picker,code}/src/lib/*.{stories.tsx,mdx}	Stories and docs for shared UI primitives.
apps/storybook/**	New Nx project for Storybook 10 with preview, mermaid head, Theme Overview, Introduction MDX.
apps/storybook/.storybook/themes-meta.ts, themes.css	Generated outputs from `theme-sync`.
apps/cms/src/app/(payload)/custom.css	Replaced inline shadcn tokens with shared theme import + `.twp` rem/spacing overrides.
apps/cms/src/app/(site)/spotlight.css, apps/cms/src/app/(frontend)/globals.css	Switched to `_core` typography and theme imports.
apps/web/app/tailwind.css	Same migration to `_core` typography.
package.json, nx.json, tsconfig.base.json	Storybook + vitest 4 + radix-ui + dev-plugin path/plugin registrations.
project.json	New `shadcn:update` target; description tweak for `shadcn:add`.
components.json	shadcn style changed to `"nova"`.
libs/shared/util/payload-types/src/lib/payload-types.ts	Regenerated payload types (formatting only).
packages/{fly-deployment-action,fly...,nx-migrate-action,deploy-env-action,core} & lefthook.yml & .verdaccio/config.yml & tools/payload-proxy/docker-compose.yml & vitest.shims.d.ts & apps/web/server.ts & libs/shared/feature/infisical/**	Quote-style and vitest v4 mock-shape adjustments; minor formatting.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@theme

- fix 'zink' -> 'zinc' typos in theme-light.css comments - remove duplicate package.json glob in dev-plugin eslint config - replace fragile node -p pipeline with jq in shadcn:update - add missing shadcn:info target referenced in Introduction.mdx - fix detectDarkStrategy to match .dark robustly via regex - fix extractBlock to track brace depth instead of using lastIndexOf - fix extractThemeInlineTokens to use matchAll for multiple @theme inline blocks - fix --sidebar token misclassification in SHADCN_TOKENS vs SIDEBAR_TOKENS

nx-cloud · 2026-05-18T23:09:10Z

View your CI Pipeline Execution ↗ for commit 5b30b7b

Command	Status	Duration	Result
`nx affected -t lint,test,build -c ci`	✅ Succeeded	44s	View ↗
`nx-cloud record -- nx format:check`	✅ Succeeded	2s	View ↗

☁️ Nx Cloud last updated this comment at 2026-05-19 20:59:51 UTC

nx-cloud · 2026-05-18T23:09:10Z

View your CI Pipeline Execution ↗ for commit 7e5bc97

Command	Status	Duration	Result
`nx-cloud record -- nx format:check`	❌ Failed	3s	View ↗

☁️ Nx Cloud last updated this comment at 2026-05-18 23:09:09 UTC

nx-cloud · 2026-05-18T23:09:10Z

View your CI Pipeline Execution ↗ for commit 7e5bc97

Command	Status	Duration	Result
`nx-cloud record -- nx format:check`	❌ Failed	3s	View ↗

☁️ Nx Cloud last updated this comment at 2026-05-18 23:09:09 UTC

Copilot

Pull request overview

Copilot reviewed 107 out of 113 changed files in this pull request and generated 5 comments.

Comments suppressed due to low confidence (1)

tools/dev-plugin/src/generators/theme-sync/theme-sync.ts:45

extractBlock parses braces character-by-character without skipping over string literals or comments. CSS content: "}" or block comments containing { / } would corrupt the depth counter and yield an incorrect block. While the current theme files don't trigger this, the function is used as a generic block extractor and could break silently when themes add comments or content rules. Consider stripping comments first (as extractDefinedTokens does) before counting braces, and document that string literals are not supported.

Copilot

Pull request overview

Copilot reviewed 107 out of 113 changed files in this pull request and generated 5 comments.

sentry · 2026-05-19T06:31:09Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 85.66%. Comparing base (8a75ba2) to head (5b30b7b).

❗ There is a different number of reports uploaded between BASE (8a75ba2) and HEAD (5b30b7b). Click for more details.

HEAD has 1 upload less than BASE

Flag BASE (8a75ba2) HEAD (5b30b7b)

2 1

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #430      +/-   ##
==========================================
- Coverage   91.11%   85.66%   -5.46%     
==========================================
  Files          29       61      +32     
  Lines         563     1109     +546     
  Branches      148      235      +87     
==========================================
+ Hits          513      950     +437     
- Misses         50      159     +109

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

…ries

Copilot

Pull request overview

Copilot reviewed 110 out of 116 changed files in this pull request and generated 3 comments.

codeware-actions · 2026-05-19T20:51:58Z

✨ Your pull request projects are ready for preview

Project	Status	Preview
cms (_default)	✅ Deployed	https://cdwr-cms-pr-430.fly.dev
cms (demo)	✅ Deployed	https://cdwr-cms-pr-430-demo.fly.dev
web (demo)	✅ Deployed	https://cdwr-web-pr-430-demo.fly.dev

Copilot AI review requested due to automatic review settings May 18, 2026 21:41

Copilot started reviewing on behalf of hakalb May 18, 2026 21:41 View session

Copilot AI reviewed May 18, 2026

View reviewed changes

Copilot AI review requested due to automatic review settings May 18, 2026 23:08

Copilot started reviewing on behalf of hakalb May 18, 2026 23:08 View session

Copilot AI reviewed May 18, 2026

View reviewed changes

Comment thread tools/dev-plugin/package.json

Comment thread tools/dev-plugin/src/generators/theme-sync/theme-sync.ts

Comment thread tools/dev-plugin/src/generators/theme-sync/theme-sync.ts

Comment thread project.json

Comment thread apps/storybook/.storybook/preview.tsx Outdated

Copilot AI review requested due to automatic review settings May 19, 2026 06:20

Copilot started reviewing on behalf of hakalb May 19, 2026 06:21 View session

Copilot AI reviewed May 19, 2026

View reviewed changes

Comment thread tools/dev-plugin/package.json

Comment thread project.json Outdated

Comment thread apps/cms/src/app/(payload)/custom.css

Comment thread tools/dev-plugin/src/generators/theme-sync/theme-sync.ts

Comment thread apps/storybook/.storybook/preview.tsx Outdated

github-actions Bot added the preview-deploy PR Trigger: run continuous preview deployments label May 19, 2026

hakalb added 11 commits May 19, 2026 20:38

feat(theme): extract theming refactor, Storybook setup and shadcn sto…

4d6c05a

…ries

chore(deps): add Storybook, vitest browser and tailwind-vite packages

a1647c1

chore(repo): fix formatting and vitest config

d1bb68e

feat(shared): upgrade shadcn components to nova style

2d19917

chore(repo): remove redundant tsconfig.json, add shadcn:update target

3b10fc7

chore(repo): derive shadcn preset code dynamically in update target

2c76060

feat(storybook): add stories for all shadcn components

46af706

fix(shared): add missing nova Tailwind data-attribute variants

2bb6877

fix(shared): fix data-selected variant, sonner theme, nav story layout

4fd1301

feat(shared): consolidate _core setup, add shadcn reference theme

ceb95b9

feat(storybook): add Mermaid, GFM tables, redesign Introduction docs

a7f3a16

hakalb force-pushed the cod-386-shadcn-migrations-continuous-update-strategy-and branch from a730417 to a7f3a16 Compare May 19, 2026 18:51

fix(repo): copy pnpm lockfile and disable Nx Cloud in Dockerfiles

9054b04

Copilot AI review requested due to automatic review settings May 19, 2026 20:26

Copilot started reviewing on behalf of hakalb May 19, 2026 20:26 View session

Copilot AI reviewed May 19, 2026

View reviewed changes

Comment thread libs/shared/ui/shadcn/src/lib/alert.mdx

Comment thread project.json

Comment thread tools/dev-plugin/src/generators/theme-sync/theme-sync.ts

hakalb had a problem deploying to preview May 19, 2026 20:41 — with GitHub Actions Failure

hakalb added 2 commits May 19, 2026 22:55

fix(web): add required radix-ui package

ab1532f

ci(workflow): enable merge queue on ci extended to use branch rules

5b30b7b

hakalb deployed to preview May 19, 2026 21:10 — with GitHub Actions Active

hakalb enabled auto-merge May 19, 2026 21:17

hakalb added this pull request to the merge queue May 19, 2026

Merged via the queue into main with commit 83c5f0a May 19, 2026
20 checks passed

hakalb deleted the cod-386-shadcn-migrations-continuous-update-strategy-and branch May 19, 2026 21:24

Conversation

hakalb commented May 18, 2026

Summary

Test plan

Uh oh!

bolt-new-by-stackblitz Bot commented May 18, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

nx-cloud Bot commented May 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

nx-cloud Bot commented May 18, 2026

Uh oh!

nx-cloud Bot commented May 18, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

sentry Bot commented May 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

codeware-actions Bot commented May 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

2 participants

nx-cloud Bot commented May 18, 2026 •

edited

Loading

sentry Bot commented May 19, 2026 •

edited

Loading

codeware-actions Bot commented May 19, 2026 •

edited

Loading