feat(repo): migrate demo and field components to @mieweb/ui by garrity-miepub · Pull Request #26 · mieweb/eSheet

garrity-miepub · 2026-04-10T01:27:05Z

Replace field preview components with @mieweb/ui equivalents:
Text/LongText/MultiText → Input/Textarea
Radio → RadioGroup + Radio
Checkbox → Checkbox
Dropdown → Select
Boolean → styled toggle buttons
Slider → Slider
Rating → styled pill buttons
SingleMatrix → RadioGroup + Radio (display:contents grid fix)
MultiMatrix → Checkbox (display:contents grid fix)
Fix CSS layer ordering: move scoped preflight resets from
@layer utilities → @layer base in renderer and builder so
@mieweb/ui border/appearance utilities are not overridden
Add CSS variable bridge (--ms-color-* → var(--color-*)) for
renderer and builder roots to connect ms: tokens to @mieweb/ui theme
Add brand switching (6 brands) with dynamic CSS loading
Add dark/light theme toggle with localStorage persistence
Replace navbar brand dropdown + emoji with Settings modal
using @mieweb/ui Modal, Select, and lucide-react Settings icon
Wire Monaco editor theme to dark mode in CodeView
Lower builder header z-index (50 → 40) so modals overlay properly
Remove deprecated baseUrl from 5 tsconfig.lib.json files
Remove unused @mieweb/ui dep from renderer package.json
Add @mieweb/ui dep to fields package.json

esheet-mieweb-ui.mov

garrity-miepub · 2026-04-10T02:03:41Z

Summary of Changes

This PR migrates the eSheet demo app and field preview components to use @mieweb/ui components, theming infrastructure, and brand switching.

Field Component Migrations (preview paths)

All field preview paths in packages/fields/ now use @mieweb/ui components instead of custom implementations:

Field	Before	After
TextField	`<input>`	`<Input>` from @mieweb/ui
LongTextField	`<textarea>`	`<Textarea>` from @mieweb/ui
MultiTextField	`<input>`	`<Input>` from @mieweb/ui
RadioField	Custom radio	`<RadioGroup>` + `<Radio>` from @mieweb/ui
CheckField	Custom checkbox	`<Checkbox>` from @mieweb/ui
DropdownField	Custom select	`<Select>` from @mieweb/ui
BooleanField	Custom toggle buttons	`<button>` styled with `ms:` tokens (primary fill / outline toggle)
SliderField	Custom slider	`<Slider>` from @mieweb/ui
RatingField	Custom stars	`<button>` styled pill toggles
SingleMatrixField	`CustomRadio`	`<RadioGroup>` + `<Radio>` with CSS `display: contents` grid fix
MultiMatrixField	`CustomCheckbox`	`<Checkbox>` with CSS `display: contents` grid fix

Not migrated (no @mieweb/ui equivalent): MultiSelectDropdownField (multi-select), RankingField (drag-and-drop).

CSS Layer Fix (critical)

Moved scoped preflight resets from @layer utilities → @layer base in:

packages/renderer/src/index.css
packages/builder/src/index.css

Why: The scoped reset (border-width: 0 on .esheet-renderer-root *) was in @layer utilities, which has the same or higher priority than @mieweb/ui's border-2 utility class. This caused all radio/checkbox borders to be invisible. Moving to @layer base lets utility classes properly override the reset.

CSS Variable Bridge

Added --ms-color-*: var(--color-*) mappings in apps/demo/src/styles.css for .esheet-renderer-root and .ms-builder-root. This bridges the ms: prefixed tokens (from Tailwind prefix(ms)) to @mieweb/ui's theme tokens, enabling proper theming across both renderer and builder.

Matrix Grid Layout Fix

@mieweb/ui RadioGroup renders <fieldset><div>...</div></fieldset> wrapper elements that break CSS grid layouts. Added display: contents rules in styles.css to collapse these wrappers so radio/checkbox children participate directly in the grid.

Demo App Infrastructure

Brand switching: 6 brands (BlueHive, MieWeb, Ozwell, WebChart, Enterprise Health, Waggleline) with dynamic CSS loading and localStorage persistence
Theme toggle: Light/dark mode with .dark class + data-theme attribute on <html>
Settings modal: Replaced navbar brand dropdown + emoji with gear icon button → @mieweb/ui Modal with Theme and Brand Select dropdowns
Monaco dark mode: CodeView now detects dark mode from DOM and switches between light/vs-dark themes

Cleanup

Removed deprecated baseUrl from 5 tsconfig.lib.json files (TS 5.9 deprecation)
Removed unused @mieweb/ui dependency from packages/renderer/package.json
Added @mieweb/ui dependency to packages/fields/package.json
Lowered builder header z-index (50→40) so modals overlay properly
Fixed asChild prop (not supported by @mieweb/ui Button) → hidden input + click handler for file import

@theme

- Replace hardcoded @theme values in builder/renderer with var(--color-*, fallback) so packages auto-read @mieweb/ui theme tokens when available - Remove 130-line duplicate @theme block from demo/styles.css - Remove CSS variable bridge from demo (now handled by package @theme) - Move matrix grid display:contents CSS into packages/renderer - Replace custom useTheme hook with @mieweb/ui/hooks re-export - Add 'system' theme option to Navbar settings

garrity-miepub · 2026-04-11T00:11:44Z

Theming Refactor — Addressing Feedback

Based on feedback that too much theming/styling lived in the demo app instead of the packages, this commit moves the theming infrastructure where it belongs.

What Changed (5 files, -224 / +45 lines)

1. Package `@theme` blocks now read from `@mieweb/ui` tokens automatically

Files: packages/builder/src/index.css, packages/renderer/src/index.css

Previously the packages had hardcoded color values:

--color-msprimary: #3b82f6;

Now they use var() references with fallbacks:

--color-msprimary: var(--color-primary, #3b82f6);

This means:

With @mieweb/ui: packages auto-inherit the active brand's colors (primary, destructive, warning, etc.)
Without @mieweb/ui: packages fall back to sensible defaults — no breakage for standalone consumers

2. Removed 130-line duplicate `@theme` block from demo

File: apps/demo/src/styles.css

The demo app's @theme block was mapping --mieweb-* → --color-*, but @mieweb/ui/styles.css (already imported) does this exact mapping. Pure duplication — removed.

3. Removed CSS variable bridge from demo

File: apps/demo/src/styles.css

The bridge (.esheet-renderer-root, .ms-builder-root { --ms-color-msprimary: var(--color-primary); ... }) existed because the packages' @theme had hardcoded values. Now that packages read var(--color-primary, fallback) directly, the bridge is unnecessary — deleted.

4. Moved matrix grid CSS into renderer package

File: packages/renderer/src/index.css

The display: contents rules for matrix field grids (fixing @mieweb/ui RadioGroup/Checkbox wrapper elements in CSS grids) were in the demo app. Moved to packages/renderer/src/index.css since this is a renderer concern — any consumer of the renderer would need these rules.

5. Replaced custom `useTheme` with `@mieweb/ui/hooks`

File: apps/demo/src/hooks/useTheme.ts

The demo had a 35-line hand-rolled useTheme hook. @mieweb/ui/hooks already exports useTheme() with:

light | dark | system support (including system preference detection)
localStorage persistence
Sets both .dark class and data-theme attribute on <html>

Replaced with a 2-line re-export to keep import paths stable. Added "System" option to the Navbar theme selector.

Consumer Impact

After this refactor, a consumer's CSS setup is minimal:

@import '@mieweb/ui/brands/bluehive.css' layer(theme);
@import 'tailwindcss';
@import '@mieweb/ui/styles.css';
/* That's it — no bridge, no theme block, no matrix hacks */

The packages are self-wiring: they read @mieweb/ui's theme tokens when present, fall back gracefully when not.

- Replace circular pill buttons with connected rectangular buttons - Use inline-flex w-fit container with border dividers between items - Selected item gets primary fill, unselected gets surface background - Remove unused @mieweb/ui Button import

garrity-miepub added 2 commits April 9, 2026 21:18

POC: mieweb-ui migration

91271ac

fix(repo): format + fix typecheck (asChild → click handler)

cf8420a

garrity-miepub changed the title ~~POC: mieweb-ui migration~~ feat(repo): migrate demo and field components to @mieweb/ui Apr 10, 2026

garrity-miepub and others added 6 commits April 9, 2026 22:12

fix(repo): move lightningcss-darwin-arm64 to optionalDependencies

09508c2

fix(repo): remove lightningcss-darwin-arm64 from package.json entirely

ec59d21

fix(repo): regenerate lock file from main base

fa83fa7

fix(repo): regenerate lock file with npm 10 to match CI

ebbc61b

Merge branch 'main' into feature/mieweb-ui-migration

5daa5aa

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(repo): migrate demo and field components to @mieweb/ui#26

feat(repo): migrate demo and field components to @mieweb/ui#26
garrity-miepub wants to merge 9 commits intomainfrom
feature/mieweb-ui-migration

garrity-miepub commented Apr 10, 2026

Uh oh!

garrity-miepub commented Apr 10, 2026

Uh oh!

garrity-miepub commented Apr 11, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

garrity-miepub commented Apr 10, 2026

Uh oh!

garrity-miepub commented Apr 10, 2026

Summary of Changes

Field Component Migrations (preview paths)

CSS Layer Fix (critical)

CSS Variable Bridge

Matrix Grid Layout Fix

Demo App Infrastructure

Cleanup

Uh oh!

garrity-miepub commented Apr 11, 2026

Theming Refactor — Addressing Feedback

What Changed (5 files, -224 / +45 lines)

1. Package @theme blocks now read from @mieweb/ui tokens automatically

2. Removed 130-line duplicate @theme block from demo

3. Removed CSS variable bridge from demo

4. Moved matrix grid CSS into renderer package

5. Replaced custom useTheme with @mieweb/ui/hooks

Consumer Impact

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

1. Package `@theme` blocks now read from `@mieweb/ui` tokens automatically

2. Removed 130-line duplicate `@theme` block from demo

5. Replaced custom `useTheme` with `@mieweb/ui/hooks`