Skip to content

feat: consume @codaco/fresco-ui (migrate components/ui out of Fresco)#735

Merged
buckhalt merged 26 commits intonextfrom
reorganise-ui
May 1, 2026
Merged

feat: consume @codaco/fresco-ui (migrate components/ui out of Fresco)#735
buckhalt merged 26 commits intonextfrom
reorganise-ui

Conversation

@jthrilly
Copy link
Copy Markdown
Member

@jthrilly jthrilly commented May 1, 2026

Summary

Migrates Fresco's components/ui/ directory (and supporting hooks, utils, styles) out of this repo and into a new published package, @codaco/fresco-ui. Fresco now consumes the package at ^0.1.1.

Companion PR: complexdatacollective/network-canvas-monorepo#478 (read that for the package design + decisions).

This PR is the consumer-side half: dependency add, CSS wire-up, file relocations, codemod, source deletion, dep cleanup.

Numbers

  • 302 files deleted from components/ui/, utils/, hooks/, lib/interviewer/components/icons/, styles/shared/, styles/plugins/
  • 955 imports rewritten across 422 files (~/components/ui/X@codaco/fresco-ui/X, plus utils/hooks/styles paths)
  • 19 dependencies + 1 devDependency removed via pnpm knip cleanup (Tiptap stack, base-ui, Radix Slot, Comlink, cva, fuse.js, nanoid, react-aria-components, react-best-merge-refs, rehype/remark plugins, tailwind-merge, usehooks-ts)

What stays in Fresco

Per the package's design:

  • components/SubmitButton.tsx (relocated from components/ui/) — depends on Next form-state hooks
  • components/Link.tsx (relocated, NativeLink export removed) — wraps next/link
  • lib/interviewer/forms/useProtocolForm.{tsx,stories.tsx} (relocated from components/ui/form/hooks/) — Network-Canvas-protocol-aware bridge that imports the Fresco interviewer Redux selector

CSS / Tailwind

styles/globals.css now imports @codaco/fresco-ui/styles.css (which carries the @theme tokens, the three custom Tailwind plugins, and an @source for the package's compiled output). Fresco's themes (styles/themes/{default,interview}.css) stay as before — they're consumer-specific.

What's bundled in the merge from next

This branch merges origin/next (19 commits) to pick up the WebKit geospatial test skip + activity-feed and protocol-download fixes. Three commits from next modified files we'd already migrated to the package:

  • Combobox keep-search-query fix (3ebe64629) + docs note (7e5b22c96)
  • PasswordField Omit<..., 'type'> (e6f10e04d)

Those are ported into the package and shipped as @codaco/fresco-ui@0.1.1.

Verification

  • pnpm typecheck clean
  • pnpm test:unit passes (170 tests)
  • pnpm test:e2e — 163 passed, 0 failed, 5 skipped (chromium + firefox + webkit; webkit-only Mapbox stages skipped via next's test.skip)
  • ✅ Visual smoke test confirmed by user (dev server walkthrough of dashboard, modals, toasts, interview stage)
  • pnpm knip shows no new unused exports

Test plan

  • CI: full typecheck, lint, unit tests pass
  • CI: e2e suite (chromium/firefox/webkit)
  • Branch deploy: smoke-test dashboard, settings dialog, an interview stage, a toast trigger, theme switch
  • Confirm pnpm install resolves @codaco/fresco-ui@^0.1.1 cleanly

Follow-ups

  1. Lint warnings in the package code — pre-existing a11y / non-null-assertion / console-log issues from Fresco's source (not addressed in either PR; needs a polish pass).
  2. Stale baseline cleanup: tests/e2e/visual-snapshots/webkit/stage-8-final.png was deleted. Other webkit geospatial baselines may also need a regenerate-or-remove pass since those tests are now skipped on webkit.

jthrilly added 14 commits April 29, 2026 21:39
…used deps

Deletes the source files now provided by @codaco/fresco-ui (components/ui,
relocated utils/hooks, tailwind plugins, interviewer icons, shared style helpers)
and removes the dependencies that no longer have any direct importers in Fresco
according to knip:

dependencies removed: @radix-ui/react-slot, @tiptap/* (8 packages), comlink,
cva, fuse.js, nanoid, react-aria-components, react-best-merge-refs,
rehype-raw, rehype-sanitize, remark-gemoji, tailwind-merge.

devDependencies removed: @testing-library/user-event.

Also drops stale optimizePackageImports entries in next.config.ts and the
fuse.js prebundle hint in vitest.config.ts; both pointed at sources that
moved into @codaco/fresco-ui.
# Conflicts:
#	app/dashboard/_components/ProtocolsTable/ActionsDropdown.tsx
#	lib/form/components/fields/Combobox/Combobox.tsx
#	lib/form/components/fields/PasswordField.tsx
Copilot AI review requested due to automatic review settings May 1, 2026 07:02
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Copilot wasn't able to review this pull request because it exceeds the maximum number of files (300). Try reducing the number of changed files and requesting a review from Copilot again.

@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 1, 2026

@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 1, 2026

✅ E2E tests — success

📊 View report

jthrilly added 4 commits May 1, 2026 09:52
Stages 8, 19, 40, and 50 are Geospatial Interface stages with WebKit
support disabled. The stale baselines no longer match the migrated UI.
Migrate all `@codaco/fresco-ui/form/components/X` imports to the
flattened `@codaco/fresco-ui/form/X` form. No behavior changes.
Updates 23 imports across the dashboard, interviewer, and shared
components to reference the PascalCase subpaths exported by
@codaco/fresco-ui (Badge, DropdownMenu, Popover, Skeleton, Table,
Tooltip).
@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 1, 2026

❌ E2E tests — failure

📊 View report

Tailwind v4's CSS resolver walks node_modules from the consuming file
upward. pnpm doesn't hoist transitive deps, so the @plugin directives
in @codaco/fresco-ui/styles.css couldn't resolve from styles/globals.css.
Declaring it directly forces the symlink.
@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 1, 2026

❌ E2E tests — failure

📊 View report

…peer

@codaco/fresco-ui@0.3.0 moves @codaco/tailwind-config to peerDependencies.
public-hoist-pattern in .npmrc forces pnpm to symlink it to top-level
node_modules so Tailwind v4's CSS resolver can find the @plugin paths.
@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 1, 2026

❌ E2E tests — failure

📊 View report

Stage 8 was already skipping webkit (unstable WebGL paint pipeline)
but stages 19, 40, 50 were marked test.slow(webkit) instead — they
ran on webkit with longer timeouts and would always fail because
their baseline webkit snapshots were intentionally removed.
@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 1, 2026

❌ E2E tests — failure

📊 View report

jthrilly added 2 commits May 1, 2026 14:48
fresco-ui 2.0.0 widens the @codaco/tailwind-config peer to ^0.4.0.
pnpm peer-dep resolution stuck on the old 0.2.0 across the bump,
so declaring tailwind-config as an explicit direct dep forces the
right version into the hoisted node_modules tree.
styles/themes/{default,interview}.css were near-duplicates of
@codaco/tailwind-config/fresco/{default-theme,interview-theme}.css
(differing only in the font @import and a header comment). Drop the
local copies and import the canonical files in the relevant entry points.
The Inclusive Sans + Nunito @import is now loaded transitively via
@codaco/fresco-ui/styles.css → @codaco/tailwind-config/fresco/fonts.css.
@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 1, 2026

❌ E2E tests — failure

📊 View report

@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 1, 2026

❌ E2E tests — failure

📊 View report

@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 1, 2026

❌ E2E tests — failure

📊 View report

@buckhalt buckhalt merged commit a4c38ac into next May 1, 2026
12 of 14 checks passed
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.

3 participants