Skip to content

feat(ui): publish @decocms/ui as an npm package#3136

Open
rafavalls wants to merge 4 commits intomainfrom
rafavalls/design-system-plan
Open

feat(ui): publish @decocms/ui as an npm package#3136
rafavalls wants to merge 4 commits intomainfrom
rafavalls/design-system-plan

Conversation

@rafavalls
Copy link
Copy Markdown
Collaborator

@rafavalls rafavalls commented Apr 21, 2026

Summary

Prepares the design system (packages/ui) for distribution via npm so sibling repos can consume it as @decocms/ui instead of depending on this monorepo. Nothing is actually published by this PR — publishing happens only when version bumps land on main after review.

Three concerns, three commits:

  1. refactor(ui): rename @deco/ui → @decocms/ui — mechanical scope rename across 238 files so the package aligns with @decocms/runtime, @decocms/mesh-sdk, etc. No behavior change.
  2. feat(ui): prepare @decocms/ui for npm publishing — restructures packages/ui/package.json to match the proven @decocms/mesh-sdk publishing pattern (publishConfig, files, peerDeps, repository, license), adds a README covering install/setup/tokens/release, and adds .github/workflows/publish-ui-npm.yaml mirroring the existing publish-runtime-npm.yaml.
  3. feat(ui-playground): add local validation app — minimal Vite + React 19 app at apps/ui-playground that imports only from @decocms/ui. Surfaces tokens, typography, and key components in light/dark mode. Used to validate bun pack output before publishing.

What only a reviewer can do

This PR is self-contained except for one secret: the publish workflow needs an NPM_TOKEN with write access to the @decocms scope. Add it under repo settings → secrets → actions once this is merged. Without it, the workflow fails gracefully (nothing publishes, nothing breaks).

Verification

  • bun install clean, bun.lock updated (scope rename only).
  • bun run --cwd apps/mesh check → passes.
  • bun run --cwd apps/ui-playground check → passes.
  • bun run fmt applied.

Known issue flagged in README

@decocms/ui currently exports raw .tsx source via wildcard ("./components/*": "./src/components/*"), so consumers must import with explicit .tsx extensions and enable allowImportingTsExtensions in their tsconfig. This works fine for the existing workspace apps (they already do this) and for bundler-based consumers (Vite, Next.js), but it will surprise external consumers expecting extension-less imports.

Proper fix (future PR): add a build step that emits .js + .d.ts, or add explicit extensions to the wildcard (breaking — requires all internal imports to drop .tsx). Not in scope here; flagged in the README under "Known limitations".

Release flow after merge

  1. Reviewer adds NPM_TOKEN secret (one-time).
  2. Tag the first version by bumping packages/ui/package.json from 0.1.0 to (say) 0.1.0-rc.1 and merging — that publishes to npm under the next tag, letting you validate without affecting any real latest consumer.
  3. When confident, bump to 0.1.0 and merge → publishes as latest.
  4. Sibling repos add "@decocms/ui": "^0.1.0" and migrate off workspace deps.

Test plan

  • CI passes.
  • Reviewer verifies workflow matches the publish-runtime-npm pattern.
  • Reviewer decides if the apps/ui-playground app should stay (useful for validation) or be dropped (ephemeral, could be gitignored).
  • After merge: add NPM_TOKEN secret, bump to 0.1.0-rc.1, confirm package appears on npm.

🤖 Generated with Claude Code


Summary by cubic

Prepares the design system for npm distribution under @decocms/ui, replaces all @deco/ui imports, and adds an automated publish workflow. Includes a small apps/ui-playground app to validate the package before releases.

  • New Features

    • Added .github/workflows/publish-ui-npm.yaml to publish @decocms/ui on version bumps with next or latest tags; requires NPM_TOKEN.
    • Updated packages/ui/package.json for publishing (publishConfig, files, peer deps) and bumped to 0.1.0; added README.
    • Added apps/ui-playground (Vite + React 19) for local validation of tokens, typography, and core components.
  • Migration

    • Replace @deco/ui imports with @decocms/ui (including CSS like @decocms/ui/styles/global.css).
    • Ensure peer deps are provided by consumers: react, react-dom, tailwindcss, next-themes.
    • Package currently exports .tsx sources; use explicit .tsx imports and enable allowImportingTsExtensions in tsconfig until .js + .d.ts builds are added.

Written for commit 6ab4797. Summary will update on new commits.

rafavalls and others added 4 commits April 21, 2026 18:52
Aligns the design system package scope with the rest of the published
deco packages (@decocms/runtime, @decocms/mesh-sdk, etc.) in preparation
for publishing the package to npm.

Mechanical find-replace across 238 files — no behavioral changes.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- Restructure package.json following the @decocms/mesh-sdk pattern:
  remove "private", add publishConfig, files, repository, license
- Move react/react-dom/tailwindcss/next-themes to peerDependencies
  (prevents dual-instance bugs and enforces consumer version ownership)
- Bump version to 0.1.0 to signal this is a new distribution milestone
- Add README covering install, setup, tokens, customization, release flow
- Add publish workflow (.github/workflows/publish-ui-npm.yaml) mirroring
  the existing @decocms/runtime pattern — publishes automatically when
  the version in package.json changes on main

Requires NPM_TOKEN secret in repo settings before first release.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Minimal Vite + React 19 + Tailwind v4 app that imports only from
@decocms/ui. Surfaces tokens, typography, and core components in light
and dark mode. Use it to:

- Verify new components before publishing
- Catch packaging bugs (missing fonts, Tailwind not scanning, dark mode)
- Validate tarball output after `bun pack` before releasing to npm

Run with `bun run --cwd apps/ui-playground dev` (port 4100).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@github-actions
Copy link
Copy Markdown
Contributor

🧪 Benchmark

Should we run the Virtual MCP strategy benchmark for this PR?

React with 👍 to run the benchmark.

Reaction Action
👍 Run quick benchmark (10 & 128 tools)

Benchmark will run on the next push after you react.

@github-actions
Copy link
Copy Markdown
Contributor

Release Options

Suggested: Minor (2.269.0) — based on feat: prefix

React with an emoji to override the release type:

Reaction Type Next Version
👍 Prerelease 2.268.4-alpha.1
🎉 Patch 2.268.4
❤️ Minor 2.269.0
🚀 Major 3.0.0

Current version: 2.268.3

Note: If multiple reactions exist, the smallest bump wins. If no reactions, the suggested bump is used (default: patch).

Copy link
Copy Markdown
Contributor

@cubic-dev-ai cubic-dev-ai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No issues found across 248 files

Note: This PR contains a large number of files. cubic only reviews up to 75 files per PR, so some files may not have been reviewed. cubic prioritises the most important files to review.

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.

1 participant