@oatfi/ui 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +46 -0
- package/dist/index.cjs.js +1659 -0
- package/dist/index.cjs.js.map +1 -0
- package/dist/index.d.ts +476 -0
- package/dist/index.esm.js +1602 -0
- package/dist/index.esm.js.map +1 -0
- package/package.json +82 -0
package/README.md
ADDED
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
# @oatfi/ui
|
|
2
|
+
|
|
3
|
+
Shared UI primitives, theme contract, and `<Preview>` component for OatFi embedded components.
|
|
4
|
+
|
|
5
|
+
Consumed by:
|
|
6
|
+
- `onboarding-flow-general` (the embedded onboarding microfrontend) — primitives + `ThemeProvider`
|
|
7
|
+
- `oatfi-dashboards` — the `<Preview>` component on the Partner Settings → Branding page
|
|
8
|
+
|
|
9
|
+
Targets React 19 + MUI 7 + styled-components 6.
|
|
10
|
+
|
|
11
|
+
## Status
|
|
12
|
+
|
|
13
|
+
Pre-alpha. See `/branding-rollout/oatfi-ui-plan.md` for the build plan.
|
|
14
|
+
|
|
15
|
+
- **Step 1 (scaffold + publishing):** done. pnpm + semantic-release pipeline mirrors `@oatfi/remote-loader` (`.releaserc.json`, `.github/workflows/publish.yml`).
|
|
16
|
+
- **Step 2 (theme contract):** done. `ThemeProvider`, `mergeBranding`, `defaultTheme`, `useTheme`, and the `Branding` / `Theme` types live in `src/theme/`.
|
|
17
|
+
- **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`.
|
|
18
|
+
- **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.
|
|
19
|
+
- **Step 5 (nav/utility primitives):** done. `Stepper`, `Tabs`, `Loader`, `DotsMenu` in `src/components/` (`Button` lives in `src/styles/layout.ts`).
|
|
20
|
+
- **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.
|
|
21
|
+
- **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.
|
|
22
|
+
- **Step 8 (consumer smoke test):** remaining — `npm link` into `onboarding-flow-general`'s Storybook to compare a ported primitive against the original.
|
|
23
|
+
|
|
24
|
+
## Theme usage
|
|
25
|
+
|
|
26
|
+
```tsx
|
|
27
|
+
import { ThemeProvider } from '@oatfi/ui';
|
|
28
|
+
|
|
29
|
+
<ThemeProvider branding={{ primaryColor: '#ff0000', borderRadius: 12 }}>
|
|
30
|
+
<App />
|
|
31
|
+
</ThemeProvider>;
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
`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.
|
|
35
|
+
|
|
36
|
+
## Scripts
|
|
37
|
+
|
|
38
|
+
```bash
|
|
39
|
+
pnpm run typecheck # tsc --noEmit
|
|
40
|
+
pnpm run test # vitest run
|
|
41
|
+
pnpm run test:watch # vitest (watch)
|
|
42
|
+
pnpm run format # oxfmt write
|
|
43
|
+
pnpm run format:check # oxfmt check
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
Storybook and the Rollup build are added in later steps of the plan (`build`/`test` join CI then).
|