Skip to content

Move overflow-ui in-repo as @workflowbuilder/ui + UI Library docs#40

Closed
librowski wants to merge 9 commits into
mainfrom
librowski/Move-Overflow-UI-to-WB
Closed

Move overflow-ui in-repo as @workflowbuilder/ui + UI Library docs#40
librowski wants to merge 9 commits into
mainfrom
librowski/Move-Overflow-UI-to-WB

Conversation

@librowski

Copy link
Copy Markdown
Collaborator

Summary

Moves the overflow-ui component library (the Base UI rewrite) into this monorepo as the publishable @workflowbuilder/ui package, switches all consumers off the published @synergycodes/overflow-ui@1.0.0-beta.27 (MUI) onto it, and builds a full UI Library documentation section (page-per-component, twin to the Overflow UI docs) with source-generated API tables and a Design Tokens pipeline page.

Decisions taken with the maintainer: rename to @workflowbuilder/ui (+ @workflowbuilder/ui-tokens), keep it publishable to npm, consume built dist via workspace:*.

What's in here

Package move

  • packages/ui (@workflowbuilder/ui) + packages/tokens (@workflowbuilder/ui-tokens) brought in from overflow-ui@base-ui-migration, preserving the multi-entry build, the CSS @layer contract (ui.base/ui.component), and combine-css-bundle. Dropped decision-logs, the overflow-ui.js back-compat shim, dead deps, and the preview app.
  • Aligned with root tooling (eslint/tsconfig extend root), deps onto the catalog:, React 18→19, @base-ui/react added to the catalog.

Consumers (sdk / demo / ai-studio)

  • 75 imports @synergycodes/overflow-ui@workflowbuilder/ui; workspace:*; @base-ui/react added; removed the LOCAL_OVERFLOW_UI vite aliases + overflow-ui-css alias + dev:local; SDK index.css switched to @workflowbuilder/ui/{tokens,index}.css.
  • Fixed the real Base UI API breaks against the new surface (Switch.onChange(checked, event); DatePicker date-fns valueFormat). Menu/Select/IconSwitch/Tooltip were already compatible.
  • @base-ui/react pinned to 1.4.1 (the version the library was validated against) - 1.6.0 changed Dialog transitions and broke the modal backdrop fade.

Build

  • dist builds on pnpm install via prepare (topological: tokens → ui); build:lib chains tokens → ui → sdk.

Docs (apps/docs, Starlight)

  • New UI Library section: Overview, Design tokens page, UI Components (18 pages) and Diagram Components (5 pages) - one page per component with a live interactive example (React island), usage, props, and CSS variables.
  • Props & CSS-variable tables are generated from source (scripts/generate-ui-api.mjs): TypeDoc extracts per-component props (type/required/default/description) from the library's prop types; CSS variables are extracted from the component stylesheets. Rendered inline via PropsTable / CssVariablesTable Astro components - no hand-maintained tables.
  • Design Tokens page documents the tokens.json (Figma) → style-dictionary → --ax-* CSS pipeline, theming, customization, and the known "missing token" gaps.

Verification

  • pnpm install clean; build, build:lib, build:docs, build:ai-studio green; pnpm typecheck, pnpm lint, pnpm test (sdk 184 + execution-core 78) green.
  • Rendered demo + ai-studio + docs in a browser: components styled (layer order, switches, modal backdrop transition, datepicker, select), docs pages live + interactive, themed with Starlight.
  • Nothing resolves @synergycodes/overflow-ui from npm or the old local dist path.

Notes for reviewer

  • pnpm check is red only on pre-existing astro check errors in apps/docs head.astro / sidebar.astro (untouched here; reproduces with this branch's changes stashed). All other gates pass.
  • A changeset is included for @workflowbuilder/sdk (consumes the in-repo UI). @workflowbuilder/ui is now a second publishable package, so 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 here).
  • Added missing lint-staged.config.mjs to packages/ui and packages/tokens (they were never committed through the hook before).

Out of scope

No npm publish; no release-workflow / tag-scheme migration; the "Overflow" product upsell card (overflow-card.astro) is left as-is (it advertises the commercial product, not the vendored library).

Move the Base UI rewrite of overflow-ui (packages/ui + packages/tokens)
into the monorepo, renamed and published as @workflowbuilder/ui and
@workflowbuilder/ui-tokens. The sdk, demo and ai-studio consume it via
workspace:* and provide @base-ui/react.

- packages/ui, packages/tokens: extend the root eslint/tsconfig, move
  shared deps onto the catalog, bump to React 19, add @base-ui/react
  (^1.4.0). Drop the legacy overflow-ui.js shim and add a ./index.css
  export. Preserve the multi-entry build and the CSS layer contract.
- sdk, demo, ai-studio: rewrite imports to @workflowbuilder/ui, drop the
  LOCAL_OVERFLOW_UI vite aliases, the overflow-ui-css alias and dev:local.
  Fix the Switch onChange signature and the DatePicker date-fns
  valueFormat tokens against the new Base UI API.
- build: tokens and ui dist build on install via prepare (topological);
  build:lib chains tokens, ui then sdk.
- docs: point UI-library references at @workflowbuilder/ui.
@librowski

Copy link
Copy Markdown
Collaborator Author

Split into #41 (package + consumers) and #42 (UI Library docs, stacked on #41) for easier review.

@librowski librowski closed this Jun 24, 2026
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