build: restructure repo as pnpm workspace monorepo#262
Merged
Conversation
Move @hyphen/hyphen-components into packages/components and add a private root orchestrator package. Root scripts keep their existing names (build, test, lint, build-storybook, ...) so CI workflows continue to work unchanged. CSS module class hashes verified byte-identical to the published 7.7.0 build (builds run with the package directory as cwd). Also removes the inert husky v4 config, moves prettier/semantic-release config to the root, and drops the hardcoded Chromatic project token from the chromatic script in favor of CHROMATIC_PROJECT_TOKEN. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011RgD5FXSTdCKoAJVJpLUVL
Copies the token source (tokens/, assets/, formats/, utils/, build.mjs) from Hyphen/hyphen-design-tokens at v7.7.0 (HEAD, including the unreleased Style Dictionary v3->v5 migration documented in MIGRATION.md). Package changes relative to the standalone repo: - files: ["build"] (drops the stale "properties" entry) - removes the dangling main field (build/index.js never existed; consumers use deep subpath imports, intentionally no exports map) - repository now points at this monorepo with directory metadata, which npm provenance validation requires - drops prepack/semantic-release (releases move to the monorepo flow) and the unused node-fetch/dotenv devDependencies - jest upgraded 26 -> 29 to coexist with the components toolchain Build output verified byte-identical to the upstream HEAD build except generation timestamps; upstream HEAD vs published 7.7.0 differs only by the documented SD5 migration deltas (hex case, comment style, headers). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011RgD5FXSTdCKoAJVJpLUVL
Switch @hyphen/hyphen-design-tokens in components to workspace:^ so a token change and the component change that motivated it land in one PR. Root scripts build the tokens package before any task that consumes its build output (test, storybook, build-storybook, chromatic). Because the tokens package now resolves outside node_modules, Vite no longer applies its automatic CommonJS interop to the CJS icon/logo components. The Storybook config opts the relevant deep imports back in via optimizeDeps.include (dev) and build.commonjsOptions (static build), and Brands.mdx imports logos through the images/react index map instead of 14 individual CJS files. The tokens package also gains a real main (build/json/variables.json) replacing the previously dangling build/index.js reference. Verified: full build, 1122 tests, static storybook build, and a Playwright smoke test of the dev server and built storybook rendering icon and brand-logo pages. CSS class hashes remain identical to the published 7.7.0 build. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011RgD5FXSTdCKoAJVJpLUVL
Release workflow now derives the version from the GitHub release tag, stamps it into both packages, and publishes them with 'pnpm publish -r' (pnpm rewrites workspace:^ to a real semver range; npm publish does not). Packages publish in dependency order with npm provenance intact. semantic-release gains exec+git plugins so the computed version is committed back to both package.json files before tagging. The npm plugin is removed since the workspace root is private and publishing happens in the Release workflow. PR and Chromatic workflows: node 20.19 -> 22 (style-dictionary v5 requires >=22), an explicit design-tokens build before Chromatic runs, workingDir pointed at packages/components, and the now-unneeded registry .npmrc setup steps removed. Verified with a pnpm publish -r dry run at a test version: both tarballs pack correctly and the workspace dependency rewrites to the stamped version. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011RgD5FXSTdCKoAJVJpLUVL
Root README becomes a monorepo overview, AGENTS.md documents the workspace layout and root-script ordering, and links that pointed at the old hyphen-design-tokens repo now point at packages/design-tokens (including the token file links in Heading prop docs, which referenced a properties/ directory that no longer matches the source layout). The design-tokens README drops its stale Figma-token requirement and package-linking instructions. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011RgD5FXSTdCKoAJVJpLUVL
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request restructures the repository into a pnpm workspace monorepo, separating the codebase into two packages: packages/components and packages/design-tokens. It updates root configuration files, including package.json, .gitignore, and .releaserc, and updates documentation to reflect the new workspace layout. Feedback points out two critical issues: the missing pnpm-workspace.yaml file required to define the workspace, and the need to update and commit the pnpm-lock.yaml file during the automated release process to prevent CI failures.
There was a problem hiding this comment.
Code Review
This pull request restructures the repository into a pnpm workspace monorepo, moving the component library into packages/components and setting up root-level scripts to coordinate builds and testing across packages. While the transition is well-documented, several critical issues need to be addressed: a pnpm-workspace.yaml file must be added to the root so pnpm recognizes the workspace; the logo imports in Brands.mdx need to be corrected to use namespace imports and PascalCase keys to avoid runtime failures; and the release configuration in .releaserc should be updated to regenerate and commit the pnpm-lock.yaml file when package versions change, preventing CI failures.
Deploying hyphen-components with
|
| Latest commit: |
7e45ba7
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://15c14e78.hyphen-components.pages.dev |
| Branch Preview URL: | https://claude-design-tokens-workflo.hyphen-components.pages.dev |
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
2 participants
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.
Move @hyphen/hyphen-components into packages/components and add a private
root orchestrator package. Root scripts keep their existing names (build,
test, lint, build-storybook, ...) so CI workflows continue to work
unchanged. CSS module class hashes verified byte-identical to the
published 7.7.0 build (builds run with the package directory as cwd).
Also removes the inert husky v4 config, moves prettier/semantic-release
config to the root, and drops the hardcoded Chromatic project token from
the chromatic script in favor of CHROMATIC_PROJECT_TOKEN.
Co-Authored-By: Claude Fable 5 noreply@anthropic.com
Claude-Session: https://claude.ai/code/session_011RgD5FXSTdCKoAJVJpLUVL