feat(ui): publish @decocms/ui as an npm package#3136
Open
Conversation
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>
Contributor
🧪 BenchmarkShould we run the Virtual MCP strategy benchmark for this PR? React with 👍 to run the benchmark.
Benchmark will run on the next push after you react. |
Contributor
Release OptionsSuggested: Minor ( React with an emoji to override the release type:
Current version:
|
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
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
Prepares the design system (
packages/ui) for distribution via npm so sibling repos can consume it as@decocms/uiinstead of depending on this monorepo. Nothing is actually published by this PR — publishing happens only when version bumps land onmainafter review.Three concerns, three commits:
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.feat(ui): prepare @decocms/ui for npm publishing— restructurespackages/ui/package.jsonto match the proven@decocms/mesh-sdkpublishing pattern (publishConfig, files, peerDeps, repository, license), adds a README covering install/setup/tokens/release, and adds.github/workflows/publish-ui-npm.yamlmirroring the existingpublish-runtime-npm.yaml.feat(ui-playground): add local validation app— minimal Vite + React 19 app atapps/ui-playgroundthat imports only from@decocms/ui. Surfaces tokens, typography, and key components in light/dark mode. Used to validatebun packoutput before publishing.What only a reviewer can do
This PR is self-contained except for one secret: the publish workflow needs an
NPM_TOKENwith write access to the@decocmsscope. Add it under repo settings → secrets → actions once this is merged. Without it, the workflow fails gracefully (nothing publishes, nothing breaks).Verification
bun installclean,bun.lockupdated (scope rename only).bun run --cwd apps/mesh check→ passes.bun run --cwd apps/ui-playground check→ passes.bun run fmtapplied.Known issue flagged in README
@decocms/uicurrently exports raw .tsx source via wildcard ("./components/*": "./src/components/*"), so consumers must import with explicit.tsxextensions and enableallowImportingTsExtensionsin 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
NPM_TOKENsecret (one-time).packages/ui/package.jsonfrom0.1.0to (say)0.1.0-rc.1and merging — that publishes to npm under thenexttag, letting you validate without affecting any reallatestconsumer.0.1.0and merge → publishes aslatest."@decocms/ui": "^0.1.0"and migrate off workspace deps.Test plan
publish-runtime-npmpattern.apps/ui-playgroundapp should stay (useful for validation) or be dropped (ephemeral, could be gitignored).NPM_TOKENsecret, bump to0.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/uiimports, and adds an automated publish workflow. Includes a smallapps/ui-playgroundapp to validate the package before releases.New Features
.github/workflows/publish-ui-npm.yamlto publish@decocms/uion version bumps withnextorlatesttags; requiresNPM_TOKEN.packages/ui/package.jsonfor publishing (publishConfig,files, peer deps) and bumped to0.1.0; added README.apps/ui-playground(Vite + React 19) for local validation of tokens, typography, and core components.Migration
@deco/uiimports with@decocms/ui(including CSS like@decocms/ui/styles/global.css).react,react-dom,tailwindcss,next-themes..tsxsources; use explicit.tsximports and enableallowImportingTsExtensionsintsconfiguntil.js+.d.tsbuilds are added.Written for commit 6ab4797. Summary will update on new commits.