@oatfi/ui

Shared UI primitives, theme contract, and <Preview> component for OatFi embedded components.

Consumed by:

• onboarding-flow-general (the embedded onboarding microfrontend) — primitives + ThemeProvider
• oatfi-dashboards — the <Preview> component on the Partner Settings → Branding page

Targets React 19 + MUI 7 + styled-components 6.

Status

Pre-alpha. See /branding-rollout/oatfi-ui-plan.md for the build plan.

• Step 1 (scaffold + publishing): done. pnpm + semantic-release pipeline mirrors @oatfi/remote-loader (.releaserc.json, .github/workflows/publish.yml).
• Step 2 (theme contract): done. ThemeProvider, mergeBranding, defaultTheme, useTheme, and the Branding / Theme types live in src/theme/.
• Step 3 (style bases + Storybook): done. Style bases in src/styles/ (inputs.ts, layout.ts, forms.ts) and Storybook 10 with a branding-driven ThemeProvider decorator. Run pnpm run storybook.
• Step 4 (form primitives): done. 12 primitives in src/components/ (TextInput, EmailInput, PhoneInput, SSNInput, TaxIdInput, CurrencyInput, DateInput, DropDown, SearchDropdown, FileInput, RadioInput, CheckboxInput) — each with interaction tests and Default/Branded stories. All carry testId/name props and accessible label/error associations for the downstream e2e suite.
• Step 5 (nav/utility primitives): done. Stepper, Tabs, Loader, DotsMenu in src/components/ (Button lives in src/styles/layout.ts).
• Step 6 (<Preview>): done. src/preview/Preview.tsx — a self-contained branded snapshot (header, inputs, buttons, stepper) that wraps its own ThemeProvider and takes a branding prop. This is the export the dashboard branding page consumes.
• Step 7 (build + publish pipeline): done. pnpm run build (Rollup) emits dist/{index.esm.js,index.cjs.js,index.d.ts} with peer deps externalized; CI runs typecheck → test → build → semantic-release. Verified by installing the npm pack tarball into a scratch React 19 project and type-checking the imports.
• Step 8 (consumer smoke test): remaining — npm link into onboarding-flow-general's Storybook to compare a ported primitive against the original.

Theme usage

import { ThemeProvider } from '@oatfi/ui';

<ThemeProvider branding={{ primaryButtonColor: '#0ea5e9', borderRadius: 12 }}>
  <App />
</ThemeProvider>;

branding is optional and partial — any omitted field falls back to defaultTheme. The provider feeds both styled-components and MUI from the same resolved theme. Configurable fields: primaryButtonColor, secondaryButtonColor, borderRadius, borderWidth, fontFamily (text colors primary/secondary are fixed theme defaults, not partner-configurable).

Scripts

pnpm run typecheck     # tsc --noEmit
pnpm run test          # vitest run
pnpm run test:watch    # vitest (watch)
pnpm run format        # oxfmt write
pnpm run format:check  # oxfmt check

Storybook and the Rollup build are added in later steps of the plan (build/test join CI then).