Skip to content

Add @workflowbuilder/ui + ui-tokens packages (1/3: packages)#44

Open
librowski wants to merge 6 commits into
mainfrom
ui-package
Open

Add @workflowbuilder/ui + ui-tokens packages (1/3: packages)#44
librowski wants to merge 6 commits into
mainfrom
ui-package

Conversation

@librowski

@librowski librowski commented Jun 24, 2026

Copy link
Copy Markdown
Collaborator

Part 1 of 3. Stacked series for the @workflowbuilder/ui work, split for review:

  1. this PR - add the package (no consumers touched yet)
  2. Migrate consumers to @workflowbuilder/ui (2/3: consumers) #45 - migrate consumers onto it
  3. UI Library docs: page-per-component + source-generated tables (3/3) #42 - UI Library documentation

Summary

Brings the overflow-ui Base UI rewrite into the monorepo as the publishable @workflowbuilder/ui package (+ private @workflowbuilder/ui-tokens). Nothing consumes it yet - sdk / demo / ai-studio still build against the published @synergycodes/overflow-ui@1.0.0-beta.27 on this branch; the switch-over is Part 2. This keeps the (large but mostly vendored) package addition reviewable on its own.

Changes

  • packages/ui + packages/tokens imported from overflow-ui@base-ui-migration, preserving the multi-entry build, the CSS @layer contract (ui.base / ui.component), combine-css-bundle, and the Style-Dictionary token pipeline (tokens.json → CSS). Dropped decision-logs, the overflow-ui.js back-compat shim, dead deps, and the preview app.
  • Aligned with root tooling (eslint / tsconfig extend root), shared deps onto the catalog:, React 18→19, @base-ui/react added to the catalog (pinned 1.4.1).
  • build:ui builds tokens → ui; build:lib chains tokens → ui → sdk. dist builds on pnpm install via prepare.
  • knip.config.js + CLAUDE.md updated to register the two new workspaces.

Verification

  • pnpm install clean; build:lib, build, build:ai-studio green; pnpm -r typecheck green for all workspaces (the only failures are the pre-existing astro check errors in apps/docs/{head,sidebar}.astro, unrelated).
  • Most of the file count is the vendored library (packages/ui/**) - low review effort; the build/tooling wiring is the real surface here.

Notes

  • @workflowbuilder/ui is a second publishable package - the release tag scheme (v*) needs migrating to scoped tags before publishing it (flagged in CLAUDE.md / packages/sdk/RELEASE.md; maintainer, out of scope).
  • No npm publish.

- SegmentPicker: type onChange/onSelect/onClick event as React.MouseEvent
  instead of MouseEventHandler (types vs runtime mismatch in public API)
- Modal: apply className and ...rest to the same root element with ref,
  not split across the modal and content divs
- Button: log a clear error for children that match no variant instead of
  silently rendering null
- tokens: drop the swallowing try/catch in ejectTokens so a failed write
  aborts the build instead of feeding empty/stale JSON to the CSS step
- tokens: lift tsconfig lib to es2021 (String.replaceAll)
- add per-package lint-staged configs so in-package tsc runs on commit
- remove empty output.json and stale TODO in src/index.ts
- rebrand vite lib + combine-css plugin names away from Overflow UI
- Shape: replace '' sentinel with explicit 'default'
- Snackbar/NodePanel JSDoc match actual behavior; check-built-css comment
  no longer references a non-existent stylelint rule
- Switch: drop redundant styles prop (keep className)
- Tooltip: inline the constant open/close delays, drop the speculative
  delay context (placement context kept)
- tokens: scope codeChunks to generateCSSBundle; fix double-slash token dir
Set up Vitest in @workflowbuilder/ui (jsdom) and @workflowbuilder/ui-tokens
(node) and wire both into the root pnpm test.

Extract the pure helpers that were buried in component files into sibling,
non-barrel modules so they can be unit-tested without rendering: date-picker
date-utils (parseDateValue/normalizeInitialValue/dayjsTokenToDateFns), and the
menu/tooltip placement mappers. Public types are re-exported so the package API
is unchanged.

Coverage: button structural guards, rangeBetween, getValidShape, the date
parsing/timezone logic, placement->side/align + offset mapping, and toFileName.
50 ui + 4 tokens tests. Exclude specs from the dts build so they don't ship.
- narrow @base-ui/react peer range to ~1.4.0 (1.5/1.6 regressed transitions)
- resolve the bundle-vs-dependency split: date-fns, react-day-picker, clsx and
  Phosphor are bundled into dist, so move them to devDependencies; only the
  external react-textarea-autosize stays a runtime dependency (peers unchanged)
- rewrite npm description/keywords away from the diagram-library boilerplate
- fix the README dev section (real pnpm --filter commands; no preview-page) and
  drop leftover 'Overflow UI' branding
- correct CLAUDE.md: ui-tokens is private (not in changeset ignore)
Retire the single-package v* tag scheme now that the repo publishes two
packages. Each package releases via its own scoped tag and workflow:
- @workflowbuilder/sdk@X.Y.Z -> release-sdk.yml (trigger + version-parse updated)
- @workflowbuilder/ui@X.Y.Z  -> release-ui.yml (new; OIDC trusted publisher,
  provenance, build:ui, version/idempotency checks, GitHub Release)

Add a UI lint/typecheck/test/build job to pr-check. Update RELEASE.md and
CLAUDE.md for the scoped-tag two-package flow and correct the stale changeset
ignore claim. Each package needs its own npm trusted publisher (manual, noted
in RELEASE.md).
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