admin-ui-starter-kit 0.1.1 → 0.1.3
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/.agents/skills/admin-ui-consumer-migration/SKILL.md +126 -0
- package/.agents/skills/component-library-rules/SKILL.md +17 -2
- package/.agents/skills/component-library-rules/references/import-paths.md +6 -0
- package/AGENTS.md +11 -6
- package/COMPONENT_SELECTION.md +115 -0
- package/INTEGRATION.md +10 -0
- package/MIGRATION.md +235 -0
- package/PUBLISHING.md +8 -3
- package/README.md +34 -12
- package/package.json +254 -23
- package/scripts/audit-consumer.mjs +326 -0
- package/scripts/install-skill.mjs +50 -36
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: admin-ui-consumer-migration
|
|
3
|
+
description: Use when migrating a React app to consume `admin-ui-starter-kit`, replacing copied local UI folders, auditing exact package imports, deciding what stays app-owned, or wiring framework adapters such as Inertia without recreating local package mirrors.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Admin UI Consumer Migration
|
|
7
|
+
|
|
8
|
+
Use this skill inside consuming apps, not when editing package internals.
|
|
9
|
+
|
|
10
|
+
Goal: move reusable UI to `admin-ui-starter-kit` imports while keeping
|
|
11
|
+
app-specific routing, APIs, auth, translations, brand assets, and domain logic
|
|
12
|
+
inside the app.
|
|
13
|
+
|
|
14
|
+
## First reads
|
|
15
|
+
|
|
16
|
+
When available in the installed package or repo, read these before editing:
|
|
17
|
+
|
|
18
|
+
1. `MIGRATION.md` — migration sequence and deletion rules.
|
|
19
|
+
2. `COMPONENT_SELECTION.md` — which component/import to use.
|
|
20
|
+
3. `INTEGRATION.md` — install, provider, exact import, and framework wiring.
|
|
21
|
+
4. `.agents/skills/component-library-rules/references/components/INDEX.json` —
|
|
22
|
+
searchable component index.
|
|
23
|
+
|
|
24
|
+
Do not bulk-load every component doc. Use the index, then read only the matching
|
|
25
|
+
component file.
|
|
26
|
+
|
|
27
|
+
## Migration order
|
|
28
|
+
|
|
29
|
+
1. Install package, stylesheet, and `<UIProvider>`.
|
|
30
|
+
2. Replace typography, buttons, badges, cards, and simple display components.
|
|
31
|
+
3. Replace repeated row and metadata patterns with `Item` and `MetadataList`.
|
|
32
|
+
4. Replace form rows with `FormField` / `ControlledFormField`.
|
|
33
|
+
5. Replace tables, filters, metrics, comments, overlays, and other features.
|
|
34
|
+
6. Replace page/header/sidebar layout surfaces last.
|
|
35
|
+
7. Delete copied local folders only after imports, typecheck, and build are
|
|
36
|
+
clean.
|
|
37
|
+
|
|
38
|
+
## Exact package imports only
|
|
39
|
+
|
|
40
|
+
Use:
|
|
41
|
+
|
|
42
|
+
```tsx
|
|
43
|
+
import { Button } from 'admin-ui-starter-kit/base/buttons';
|
|
44
|
+
import { Text } from 'admin-ui-starter-kit/typography';
|
|
45
|
+
import { MetadataList } from 'admin-ui-starter-kit/base/display/metadata';
|
|
46
|
+
import { Comments } from 'admin-ui-starter-kit/features/comments';
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
Do not use:
|
|
50
|
+
|
|
51
|
+
```tsx
|
|
52
|
+
import { Button } from '@/components/ui/base/buttons';
|
|
53
|
+
import { Button } from 'admin-ui-starter-kit/base';
|
|
54
|
+
import { MetadataList } from 'admin-ui-starter-kit/base/display/metadata/metadata-list';
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
If a path is not listed in `package.json` `exports`, treat it as private.
|
|
58
|
+
|
|
59
|
+
## Adapter rule
|
|
60
|
+
|
|
61
|
+
Adapters are allowed only when they bind app-specific behaviour.
|
|
62
|
+
|
|
63
|
+
Good:
|
|
64
|
+
|
|
65
|
+
```tsx
|
|
66
|
+
import { Link, router } from '@inertiajs/react';
|
|
67
|
+
import { Button, type ButtonProps } from 'admin-ui-starter-kit/base/buttons';
|
|
68
|
+
|
|
69
|
+
export function InertiaButton({ href, ...props }: ButtonProps & { href: string }) {
|
|
70
|
+
return <Button {...props} onClick={() => router.visit(href)} />;
|
|
71
|
+
}
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
Bad:
|
|
75
|
+
|
|
76
|
+
```ts
|
|
77
|
+
export { Button } from 'admin-ui-starter-kit/base/buttons';
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
Do not create local mirrors, barrels, or aliases that hide package imports.
|
|
81
|
+
Agents should replace call-site imports directly unless a wrapper adds routing,
|
|
82
|
+
auth, API, translation, or domain behaviour.
|
|
83
|
+
|
|
84
|
+
## Keep app-owned
|
|
85
|
+
|
|
86
|
+
Do not migrate these into package imports or generic wrappers:
|
|
87
|
+
|
|
88
|
+
- Brand/logo assets and product marks.
|
|
89
|
+
- Error boundaries.
|
|
90
|
+
- Auth, permission gates, tenant/workspace selectors.
|
|
91
|
+
- Route-aware global search content and API-backed search.
|
|
92
|
+
- Domain-specific cards/features that encode business rules.
|
|
93
|
+
- Inertia/router/query clients, Wayfinder actions, API calls, app i18n.
|
|
94
|
+
- Page-level data loading and layout orchestration.
|
|
95
|
+
|
|
96
|
+
## Useful commands
|
|
97
|
+
|
|
98
|
+
Run in the consuming app:
|
|
99
|
+
|
|
100
|
+
```bash
|
|
101
|
+
npx admin-ui-starter-kit-audit
|
|
102
|
+
npx admin-ui-starter-kit-audit --fix
|
|
103
|
+
npm run typecheck
|
|
104
|
+
npm run build
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
Use `--fix` only for conservative import rewrites from known copied paths.
|
|
108
|
+
Review the diff before deleting local folders.
|
|
109
|
+
|
|
110
|
+
## Component selection shortcuts
|
|
111
|
+
|
|
112
|
+
| Need | Import |
|
|
113
|
+
| --- | --- |
|
|
114
|
+
| Text/headings | `admin-ui-starter-kit/typography` |
|
|
115
|
+
| Buttons | `admin-ui-starter-kit/base/buttons` |
|
|
116
|
+
| Badges | `admin-ui-starter-kit/base/badge` |
|
|
117
|
+
| Card shell | `admin-ui-starter-kit/base/cards` |
|
|
118
|
+
| Icon/avatar/title row | `admin-ui-starter-kit/base/item` |
|
|
119
|
+
| Label/value metadata | `admin-ui-starter-kit/base/display/metadata` |
|
|
120
|
+
| Form rows | `admin-ui-starter-kit/base/forms` |
|
|
121
|
+
| Tables | `admin-ui-starter-kit/base/table` |
|
|
122
|
+
| Filters | `admin-ui-starter-kit/features/filters` |
|
|
123
|
+
| Comments | `admin-ui-starter-kit/features/comments` |
|
|
124
|
+
| Dialogs/drawers | `admin-ui-starter-kit/features/overlays` |
|
|
125
|
+
| Metrics/charts | `admin-ui-starter-kit/composed/analytics` |
|
|
126
|
+
| Page/header/sidebar | `admin-ui-starter-kit/layout/page`, `/header`, `/sidebar` |
|
|
@@ -56,6 +56,11 @@ These deeper guides live alongside this file under `references/`. The skill stay
|
|
|
56
56
|
|
|
57
57
|
Don't read all of them — find the matching guide for the immediate task, follow it, return.
|
|
58
58
|
|
|
59
|
+
Consumer-app migration guidance lives outside this maintainer skill:
|
|
60
|
+
[`../admin-ui-consumer-migration/SKILL.md`](../admin-ui-consumer-migration/SKILL.md),
|
|
61
|
+
`MIGRATION.md`, and `COMPONENT_SELECTION.md`. Use those when replacing copied
|
|
62
|
+
local UI in downstream apps.
|
|
63
|
+
|
|
59
64
|
## Component reference index
|
|
60
65
|
|
|
61
66
|
Every component documented in the showcase has a generated markdown
|
|
@@ -99,9 +104,14 @@ to see how the library uses it before writing fresh code.
|
|
|
99
104
|
The references are generated from the MDX showcase by
|
|
100
105
|
`npm run docs:sync-skill`; CI runs the freshness check via `npm run verify`.
|
|
101
106
|
|
|
102
|
-
##
|
|
107
|
+
## Maintainer skill scope
|
|
103
108
|
|
|
104
|
-
|
|
109
|
+
This skill is the source of truth for anything inside `src/components/**`.
|
|
110
|
+
The separate `admin-ui-consumer-migration` skill is for downstream app
|
|
111
|
+
migrations. The harness may surface generic skills (`frontend-design`,
|
|
112
|
+
`shadcn`, `tailwind-v4-shadcn`, etc.) from the user's plugin set, but for this
|
|
113
|
+
package's component internals, this skill wins. The relevant material from
|
|
114
|
+
those generic skills is inlined here:
|
|
105
115
|
|
|
106
116
|
- **Visual taste / "escape generic AI aesthetics"** → see rule 16 (visual evaluation) and the "Tone for visual work" section in `AGENTS.md`. The library voice is calm, neutral, dense without being cramped — admin density, not marketing flash.
|
|
107
117
|
- **Adding a shadcn primitive** → step 0 of [`references/base-wrapper.md`](references/base-wrapper.md): `npx shadcn@latest add <primitive>` lands the file in `src/components/ui/<primitive>.tsx`. Then write the wrapper.
|
|
@@ -784,6 +794,11 @@ from `admin-ui-starter-kit/base/display/metadata` so consumers do not need to
|
|
|
784
794
|
load the broader `base/display` barrel. Never document file-level paths such as
|
|
785
795
|
`admin-ui-starter-kit/base/display/metadata/metadata-list`.
|
|
786
796
|
|
|
797
|
+
The package `exports` map must list every public family as an exact key:
|
|
798
|
+
`./base/buttons`, `./features/comments`, `./layout/page`, etc. Do not use
|
|
799
|
+
wildcard exports such as `./base/*`, and do not use null wildcard blockers such
|
|
800
|
+
as `./base/*/*`; bundlers can treat those patterns inconsistently.
|
|
801
|
+
|
|
787
802
|
Base UI-backed triggers use Base UI's `render` prop, not Radix's `asChild`.
|
|
788
803
|
For dropdown menus, write:
|
|
789
804
|
|
|
@@ -41,6 +41,12 @@ Do not use or document broad `admin-ui-starter-kit/base`,
|
|
|
41
41
|
They are intentionally not exported so optional peers stay isolated to the exact
|
|
42
42
|
component family that needs them.
|
|
43
43
|
|
|
44
|
+
`package.json` must publish those component families as explicit exact keys,
|
|
45
|
+
not wildcard package exports. For example, publish `./base/buttons` and
|
|
46
|
+
`./features/comments`, not `./base/*` or `./features/*`. Do not use null
|
|
47
|
+
wildcard blockers such as `./base/*/*`; exact exports already keep undocumented
|
|
48
|
+
nested paths private and avoid bundler resolver drift.
|
|
49
|
+
|
|
44
50
|
Most public boundaries are first-level families. A nested subfamily is public
|
|
45
51
|
only when it has an explicit `package.json` export and `vite.lib.config.ts`
|
|
46
52
|
entry. Current intentional nested subfamily:
|
package/AGENTS.md
CHANGED
|
@@ -43,7 +43,7 @@ Read it once for context; it is not a live roadmap.
|
|
|
43
43
|
|
|
44
44
|
## Mandatory reading before any code change
|
|
45
45
|
|
|
46
|
-
The **only** mandatory skill in this repo is
|
|
46
|
+
The **only** mandatory maintainer skill in this repo is
|
|
47
47
|
[`component-library-rules`](.agents/skills/component-library-rules/SKILL.md).
|
|
48
48
|
It encodes 24 rules covering layer order, typography, density, tokens,
|
|
49
49
|
strings/i18n, framework-agnostic contracts, slot/render-prop
|
|
@@ -59,9 +59,11 @@ pages, ui-provider, consumer wiring, import paths, visual evaluation,
|
|
|
59
59
|
testing, layout, composed-domains. Pull the matching one when the work
|
|
60
60
|
fits; don't read all of them.
|
|
61
61
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
62
|
+
The repo also ships
|
|
63
|
+
[`admin-ui-consumer-migration`](.agents/skills/admin-ui-consumer-migration/SKILL.md)
|
|
64
|
+
for downstream apps migrating copied UI into the package. Use that skill in
|
|
65
|
+
consumer repos; use `component-library-rules` when changing this package.
|
|
66
|
+
If a topic isn't covered, ask before inventing a pattern.
|
|
65
67
|
|
|
66
68
|
## The architectural layers
|
|
67
69
|
|
|
@@ -117,8 +119,11 @@ Hard rules (full detail in the skill):
|
|
|
117
119
|
|
|
118
120
|
- **Entry**: `src/preview/PreviewApp.tsx` (showcase) and the public
|
|
119
121
|
`package.json` `exports` map (`.`, `./ui-provider`,
|
|
120
|
-
`./typography`, `./base
|
|
121
|
-
`./
|
|
122
|
+
`./typography`, exact `./base/<family>`, exact
|
|
123
|
+
`./composed/<family>`, exact `./features/<feature>`, `./layout`,
|
|
124
|
+
exact `./layout/<family>`, `./lib/strings`, `./lib/utils`).
|
|
125
|
+
The exports map must use exact keys, not wildcard/null blocker
|
|
126
|
+
patterns.
|
|
122
127
|
- **`<UIProvider>`** (`@/lib/ui-provider`) — the **only** library-level
|
|
123
128
|
provider. Holds opinionated display defaults (`money.defaultCurrency`,
|
|
124
129
|
`dates.weekStartsOn`, `badge.defaultSize`, `card.defaultPadding`, …).
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
# Component Selection Guide
|
|
2
|
+
|
|
3
|
+
Use this when deciding which package entrypoint belongs at a call site.
|
|
4
|
+
|
|
5
|
+
Public imports are exact. If a path is not listed in `package.json` `exports`
|
|
6
|
+
or documented here, treat it as private.
|
|
7
|
+
|
|
8
|
+
## Common decisions
|
|
9
|
+
|
|
10
|
+
| Need | Use | Import |
|
|
11
|
+
| --- | --- | --- |
|
|
12
|
+
| Text, headings, labels, links | `Text`, `Heading`, `Label`, `TextLink` | `admin-ui-starter-kit/typography` |
|
|
13
|
+
| Button or icon button | `Button`, `TextButton`, button variants | `admin-ui-starter-kit/base/buttons` |
|
|
14
|
+
| Status pill or count badge | `Badge` | `admin-ui-starter-kit/base/badge` |
|
|
15
|
+
| Card shell | `SmartCard` | `admin-ui-starter-kit/base/cards` |
|
|
16
|
+
| Row with icon/avatar/title/meta/actions | `Item` family | `admin-ui-starter-kit/base/item` |
|
|
17
|
+
| Label/value metadata | `MetadataList` | `admin-ui-starter-kit/base/display/metadata` |
|
|
18
|
+
| Tooltip, avatar, separator, inline stat | display family | `admin-ui-starter-kit/base/display` |
|
|
19
|
+
| Form label/control/error row | `FormField`, `ControlledFormField` | `admin-ui-starter-kit/base/forms` |
|
|
20
|
+
| Inputs, selects, textareas, QR fields | form field exports | `admin-ui-starter-kit/base/forms` |
|
|
21
|
+
| Searchable select | `Combobox` | `admin-ui-starter-kit/base/combobox` |
|
|
22
|
+
| Popover menu or command menu | `PopoverMenu`, `Command` | `admin-ui-starter-kit/base/popover-menu`, `admin-ui-starter-kit/base/command` |
|
|
23
|
+
| Dropdown navigation menus | navigation family | `admin-ui-starter-kit/base/navigation` |
|
|
24
|
+
| Data table | `DataTable` | `admin-ui-starter-kit/base/table` |
|
|
25
|
+
| Date picker or date range picker | date picker family | `admin-ui-starter-kit/base/date-pickers` |
|
|
26
|
+
| Map or place autocomplete | map family | `admin-ui-starter-kit/base/map` |
|
|
27
|
+
| KPI cards and charts | analytics surfaces | `admin-ui-starter-kit/composed/analytics` |
|
|
28
|
+
| Commerce/order/product surfaces | commerce surfaces | `admin-ui-starter-kit/composed/commerce` |
|
|
29
|
+
| Timeline | timeline surfaces | `admin-ui-starter-kit/composed/timelines` |
|
|
30
|
+
| Comments panel | `Comments` | `admin-ui-starter-kit/features/comments` |
|
|
31
|
+
| Filter bar/facets | filters feature | `admin-ui-starter-kit/features/filters` |
|
|
32
|
+
| Dialog, drawer, alert dialog | overlays feature | `admin-ui-starter-kit/features/overlays` |
|
|
33
|
+
| Global search shell | global search feature | `admin-ui-starter-kit/features/global-search` |
|
|
34
|
+
| Mentions/typeahead | mentions or suggestions feature | `admin-ui-starter-kit/features/mentions`, `admin-ui-starter-kit/features/suggestions` |
|
|
35
|
+
| Rich text editor | TipTap-backed editor | `admin-ui-starter-kit/features/rich-text-editor` |
|
|
36
|
+
| Page title/actions/breadcrumb chrome | page layout | `admin-ui-starter-kit/layout/page` |
|
|
37
|
+
| Header shell/search/action slots | header layout | `admin-ui-starter-kit/layout/header` |
|
|
38
|
+
| Sidebar shell | sidebar layout | `admin-ui-starter-kit/layout/sidebar` |
|
|
39
|
+
|
|
40
|
+
## Decision tree
|
|
41
|
+
|
|
42
|
+
1. Is it plain user-facing text?
|
|
43
|
+
Use `typography`. Do not hand-roll `text-xs text-muted-foreground` spans.
|
|
44
|
+
|
|
45
|
+
2. Is it a primitive UI control or presentational wrapper?
|
|
46
|
+
Use `base`. Buttons, badges, cards, form fields, popovers, tables, maps,
|
|
47
|
+
display helpers, and item rows live there.
|
|
48
|
+
|
|
49
|
+
3. Is it a reusable domain-shaped surface built from base components?
|
|
50
|
+
Use `composed`. Metrics, commerce cards, admin rows, timeline surfaces, and
|
|
51
|
+
dense data-display blocks belong there.
|
|
52
|
+
|
|
53
|
+
4. Does it include feature state, slots, callbacks, or app-level behaviour?
|
|
54
|
+
Use `features`. Comments, filters, search, overlays, mentions, sync, and
|
|
55
|
+
rich text editor live there.
|
|
56
|
+
|
|
57
|
+
5. Is it page chrome?
|
|
58
|
+
Use `layout`. Keep routing and active-link state in the app.
|
|
59
|
+
|
|
60
|
+
6. Does it hardcode backend, auth, routing, app translations, or product
|
|
61
|
+
branding?
|
|
62
|
+
Keep it in the app. Wrap package components only where the wrapper binds
|
|
63
|
+
app-specific behaviour.
|
|
64
|
+
|
|
65
|
+
## Adapter examples
|
|
66
|
+
|
|
67
|
+
Use an app adapter when you bind framework behaviour:
|
|
68
|
+
|
|
69
|
+
```tsx
|
|
70
|
+
import { router } from '@inertiajs/react';
|
|
71
|
+
import { Button, type ButtonProps } from 'admin-ui-starter-kit/base/buttons';
|
|
72
|
+
|
|
73
|
+
export function InertiaActionButton({
|
|
74
|
+
href,
|
|
75
|
+
method = 'get',
|
|
76
|
+
...props
|
|
77
|
+
}: ButtonProps & { href: string; method?: 'get' | 'post' | 'put' | 'delete' }) {
|
|
78
|
+
return <Button {...props} onClick={() => router.visit(href, { method })} />;
|
|
79
|
+
}
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
Do not create app wrappers that only rename or re-export package components:
|
|
83
|
+
|
|
84
|
+
```ts
|
|
85
|
+
export { Button } from 'admin-ui-starter-kit/base/buttons';
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
## Exact import rules
|
|
89
|
+
|
|
90
|
+
Use:
|
|
91
|
+
|
|
92
|
+
```tsx
|
|
93
|
+
import { Button } from 'admin-ui-starter-kit/base/buttons';
|
|
94
|
+
import { Text } from 'admin-ui-starter-kit/typography';
|
|
95
|
+
import { MetadataList } from 'admin-ui-starter-kit/base/display/metadata';
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
Do not use:
|
|
99
|
+
|
|
100
|
+
```tsx
|
|
101
|
+
import { Button } from 'admin-ui-starter-kit/base';
|
|
102
|
+
import { MetadataList } from 'admin-ui-starter-kit/base/display/metadata/metadata-list';
|
|
103
|
+
import { Button } from '@/components/ui/base/buttons';
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
## Where agents should look
|
|
107
|
+
|
|
108
|
+
1. `AGENTS.md`
|
|
109
|
+
2. `.agents/skills/component-library-rules/SKILL.md`
|
|
110
|
+
3. `.agents/skills/admin-ui-consumer-migration/SKILL.md`
|
|
111
|
+
4. `.agents/skills/component-library-rules/references/components/INDEX.json`
|
|
112
|
+
5. The specific component doc under `references/components/*.md`
|
|
113
|
+
6. `INTEGRATION.md`
|
|
114
|
+
7. `MIGRATION.md`
|
|
115
|
+
8. `package.json` `exports`
|
package/INTEGRATION.md
CHANGED
|
@@ -2,6 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
Use this when installing `admin-ui-starter-kit` into a React app.
|
|
4
4
|
|
|
5
|
+
If the app already has a copied local design system, follow
|
|
6
|
+
[`MIGRATION.md`](MIGRATION.md) first. Use
|
|
7
|
+
[`COMPONENT_SELECTION.md`](COMPONENT_SELECTION.md) when deciding which exact
|
|
8
|
+
entrypoint replaces a local component.
|
|
9
|
+
|
|
5
10
|
## 1. Install the package and required peers
|
|
6
11
|
|
|
7
12
|
```bash
|
|
@@ -40,6 +45,10 @@ Only documented nested subfamily entrypoints are public. For example,
|
|
|
40
45
|
`admin-ui-starter-kit/base/display/metadata` so consumers do not need the
|
|
41
46
|
broader `base/display` barrel or its optional peers.
|
|
42
47
|
|
|
48
|
+
The package publishes exact export keys, not wildcard package exports. If an
|
|
49
|
+
import path is not documented or listed in `package.json` `exports`, treat it as
|
|
50
|
+
private even when a declaration file happens to exist under `dist/`.
|
|
51
|
+
|
|
43
52
|
The root entrypoint is intentionally small:
|
|
44
53
|
|
|
45
54
|
```tsx
|
|
@@ -136,6 +145,7 @@ For a quick smoke test:
|
|
|
136
145
|
```bash
|
|
137
146
|
npm run typecheck
|
|
138
147
|
npm run build
|
|
148
|
+
npx admin-ui-starter-kit-audit
|
|
139
149
|
```
|
|
140
150
|
|
|
141
151
|
If a build reports a missing optional peer, either install the peer listed
|
package/MIGRATION.md
ADDED
|
@@ -0,0 +1,235 @@
|
|
|
1
|
+
# Migration Guide
|
|
2
|
+
|
|
3
|
+
Use this when replacing a copied local design system with the published
|
|
4
|
+
`admin-ui-starter-kit` package.
|
|
5
|
+
|
|
6
|
+
The goal is not to move every UI file into npm. The package owns reusable UI.
|
|
7
|
+
The consuming app owns routing, API calls, auth context, translations, brand
|
|
8
|
+
assets, and domain-specific behaviour.
|
|
9
|
+
|
|
10
|
+
## 1. Install and mount
|
|
11
|
+
|
|
12
|
+
```bash
|
|
13
|
+
npm install admin-ui-starter-kit react react-dom tailwindcss lucide-react
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
If the app still uses `lucide-react` v0, upgrade it as part of the migration.
|
|
17
|
+
This package has a lucide v1 peer.
|
|
18
|
+
|
|
19
|
+
Mount the stylesheet and provider once:
|
|
20
|
+
|
|
21
|
+
```tsx
|
|
22
|
+
import 'admin-ui-starter-kit/style.css';
|
|
23
|
+
import { UIProvider } from 'admin-ui-starter-kit/ui-provider';
|
|
24
|
+
|
|
25
|
+
<UIProvider
|
|
26
|
+
config={{
|
|
27
|
+
money: { defaultCurrency: 'USD', locale: 'en-US' },
|
|
28
|
+
dates: { weekStartsOn: 1 },
|
|
29
|
+
badge: { defaultSize: 'xs' },
|
|
30
|
+
button: { defaultSize: 'sm' },
|
|
31
|
+
}}
|
|
32
|
+
>
|
|
33
|
+
<App />
|
|
34
|
+
</UIProvider>;
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
## 2. Replace local primitives first
|
|
38
|
+
|
|
39
|
+
Start with the low-level imports used everywhere. Keep the changes mechanical
|
|
40
|
+
and verify after each group.
|
|
41
|
+
|
|
42
|
+
```tsx
|
|
43
|
+
import { Button } from 'admin-ui-starter-kit/base/buttons';
|
|
44
|
+
import { Badge } from 'admin-ui-starter-kit/base/badge';
|
|
45
|
+
import { SmartCard } from 'admin-ui-starter-kit/base/cards';
|
|
46
|
+
import { Text, Heading } from 'admin-ui-starter-kit/typography';
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
Do not create local mirror files that re-export package primitives. Replace the
|
|
50
|
+
call-site imports directly.
|
|
51
|
+
|
|
52
|
+
## 3. Replace repeated display patterns
|
|
53
|
+
|
|
54
|
+
Use package components for shapes that repeat across the app:
|
|
55
|
+
|
|
56
|
+
```tsx
|
|
57
|
+
import { MetadataList } from 'admin-ui-starter-kit/base/display/metadata';
|
|
58
|
+
import { Item, ItemContent, ItemMedia, ItemTitle } from 'admin-ui-starter-kit/base/item';
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
Use `MetadataList` for label/value data, compact summaries, and entity details.
|
|
62
|
+
Use `Item` for rows with media, title, description, metadata, or actions.
|
|
63
|
+
|
|
64
|
+
## 4. Replace form rows
|
|
65
|
+
|
|
66
|
+
Use the package form shell before moving larger forms:
|
|
67
|
+
|
|
68
|
+
```tsx
|
|
69
|
+
import { ControlledFormField, Input, Select } from 'admin-ui-starter-kit/base/forms';
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
Keep form submission, validation schemas, and API mutation wiring in the app.
|
|
73
|
+
The package should own the field row and control presentation, not the backend
|
|
74
|
+
contract.
|
|
75
|
+
|
|
76
|
+
## 5. Replace tables, filters, metrics, and overlays
|
|
77
|
+
|
|
78
|
+
Move shared app surfaces after primitives are stable:
|
|
79
|
+
|
|
80
|
+
```tsx
|
|
81
|
+
import { DataTable } from 'admin-ui-starter-kit/base/table';
|
|
82
|
+
import { FilterProvider } from 'admin-ui-starter-kit/features/filters';
|
|
83
|
+
import { MetricGrid } from 'admin-ui-starter-kit/composed/analytics';
|
|
84
|
+
import { Dialog, Drawer } from 'admin-ui-starter-kit/features/overlays';
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
Install optional peers only for the entrypoints you import. For example,
|
|
88
|
+
`base/table` needs `@tanstack/react-table`, `composed/analytics` needs
|
|
89
|
+
`recharts`, and `features/rich-text-editor` needs TipTap.
|
|
90
|
+
|
|
91
|
+
## 6. Replace layouts last
|
|
92
|
+
|
|
93
|
+
Migrate page chrome after shared atoms and features are clean:
|
|
94
|
+
|
|
95
|
+
```tsx
|
|
96
|
+
import { PageHeader, PageActions } from 'admin-ui-starter-kit/layout/page';
|
|
97
|
+
import { Header, HeaderSearch } from 'admin-ui-starter-kit/layout/header';
|
|
98
|
+
import { AppSidebar, SidebarProvider } from 'admin-ui-starter-kit/layout/sidebar';
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
Route-aware layout state, active navigation logic, auth menus, and application
|
|
102
|
+
search content stay in the app. The package provides the shell and slots.
|
|
103
|
+
|
|
104
|
+
## 7. Keep app-owned adapters, not local mirrors
|
|
105
|
+
|
|
106
|
+
A consuming app may create adapters for framework wiring, but not local mirrors.
|
|
107
|
+
|
|
108
|
+
Good:
|
|
109
|
+
|
|
110
|
+
```tsx
|
|
111
|
+
import { Link } from '@inertiajs/react';
|
|
112
|
+
import { PageHeader, type PageHeaderProps } from 'admin-ui-starter-kit/layout/page';
|
|
113
|
+
|
|
114
|
+
export function AppPageHeader(props: PageHeaderProps) {
|
|
115
|
+
return (
|
|
116
|
+
<PageHeader
|
|
117
|
+
{...props}
|
|
118
|
+
renderLink={(href, children) => <Link href={href}>{children}</Link>}
|
|
119
|
+
/>
|
|
120
|
+
);
|
|
121
|
+
}
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
Bad:
|
|
125
|
+
|
|
126
|
+
```ts
|
|
127
|
+
export { Button } from 'admin-ui-starter-kit/base/buttons';
|
|
128
|
+
export { Text } from 'admin-ui-starter-kit/typography';
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
The package owns UI. The app owns routing, API calls, auth context, and
|
|
132
|
+
translations.
|
|
133
|
+
|
|
134
|
+
## 8. Inertia recipe
|
|
135
|
+
|
|
136
|
+
Keep Inertia imports in the consuming app:
|
|
137
|
+
|
|
138
|
+
```tsx
|
|
139
|
+
import { Link, router } from '@inertiajs/react';
|
|
140
|
+
import { Button } from 'admin-ui-starter-kit/base/buttons';
|
|
141
|
+
import { Comments } from 'admin-ui-starter-kit/features/comments';
|
|
142
|
+
import { PageHeader } from 'admin-ui-starter-kit/layout/page';
|
|
143
|
+
|
|
144
|
+
<PageHeader
|
|
145
|
+
title="Customers"
|
|
146
|
+
actions={<Button onClick={() => router.visit('/customers/create')}>Create</Button>}
|
|
147
|
+
renderLink={(href, children) => <Link href={href}>{children}</Link>}
|
|
148
|
+
/>;
|
|
149
|
+
|
|
150
|
+
<Comments
|
|
151
|
+
comments={comments}
|
|
152
|
+
onSubmit={(values) => router.post(route('comments.store'), values)}
|
|
153
|
+
onDelete={(id) => router.delete(route('comments.destroy', id))}
|
|
154
|
+
strings={{
|
|
155
|
+
empty: t('comments.empty'),
|
|
156
|
+
composerPlaceholder: t('comments.placeholder'),
|
|
157
|
+
}}
|
|
158
|
+
/>;
|
|
159
|
+
```
|
|
160
|
+
|
|
161
|
+
Do not add Inertia adapters to the package. Document app adapters locally when
|
|
162
|
+
they bind routes, Wayfinder actions, translations, or app APIs.
|
|
163
|
+
|
|
164
|
+
## 9. Do not migrate these
|
|
165
|
+
|
|
166
|
+
Keep these in the consuming app:
|
|
167
|
+
|
|
168
|
+
- Brand assets, logos, app icons, and product-specific marks.
|
|
169
|
+
- Error boundaries and app-level exception handling.
|
|
170
|
+
- Route-aware search content and backend-connected global search.
|
|
171
|
+
- Auth menus, permission gates, and tenant/workspace selectors.
|
|
172
|
+
- Domain-specific cards and features that encode business rules.
|
|
173
|
+
- API clients, query caches, Inertia router calls, and Wayfinder route actions.
|
|
174
|
+
- App-specific layout orchestration and page-level data loading.
|
|
175
|
+
|
|
176
|
+
## 10. Delete copied folders after imports are clean
|
|
177
|
+
|
|
178
|
+
Only delete local copied folders after typecheck and build pass:
|
|
179
|
+
|
|
180
|
+
```text
|
|
181
|
+
components/ui/base
|
|
182
|
+
components/ui/typography
|
|
183
|
+
components/ui/navigation
|
|
184
|
+
components/layout
|
|
185
|
+
components/features/comments
|
|
186
|
+
components/features/filters
|
|
187
|
+
components/features/metrics
|
|
188
|
+
```
|
|
189
|
+
|
|
190
|
+
The exact folders vary by app. Delete only copied package equivalents; keep
|
|
191
|
+
app-owned components.
|
|
192
|
+
|
|
193
|
+
## 11. Hard import rules
|
|
194
|
+
|
|
195
|
+
Use exact public exports:
|
|
196
|
+
|
|
197
|
+
```tsx
|
|
198
|
+
import { Button } from 'admin-ui-starter-kit/base/buttons';
|
|
199
|
+
import { Text } from 'admin-ui-starter-kit/typography';
|
|
200
|
+
import { MetadataList } from 'admin-ui-starter-kit/base/display/metadata';
|
|
201
|
+
```
|
|
202
|
+
|
|
203
|
+
Do not use:
|
|
204
|
+
|
|
205
|
+
```tsx
|
|
206
|
+
import { Button } from '@/components/ui/base/buttons';
|
|
207
|
+
import { Button } from 'admin-ui-starter-kit/base';
|
|
208
|
+
import { MetadataList } from 'admin-ui-starter-kit/base/display/metadata/metadata-list';
|
|
209
|
+
```
|
|
210
|
+
|
|
211
|
+
Run the package audit in a consumer app:
|
|
212
|
+
|
|
213
|
+
```bash
|
|
214
|
+
npx admin-ui-starter-kit-audit
|
|
215
|
+
```
|
|
216
|
+
|
|
217
|
+
Use `--fix` for conservative import rewrites from known copied paths:
|
|
218
|
+
|
|
219
|
+
```bash
|
|
220
|
+
npx admin-ui-starter-kit-audit --fix
|
|
221
|
+
```
|
|
222
|
+
|
|
223
|
+
## 12. Verification
|
|
224
|
+
|
|
225
|
+
After each migration chunk:
|
|
226
|
+
|
|
227
|
+
```bash
|
|
228
|
+
npm run typecheck
|
|
229
|
+
npm run build
|
|
230
|
+
npx admin-ui-starter-kit-audit
|
|
231
|
+
```
|
|
232
|
+
|
|
233
|
+
If a package import fails, check `package.json` `exports` in
|
|
234
|
+
`admin-ui-starter-kit`. Public imports are exact keys. Undocumented nested
|
|
235
|
+
paths are private even when declaration files exist under `dist/`.
|
package/PUBLISHING.md
CHANGED
|
@@ -54,7 +54,12 @@ Read the file list. **Confirm:**
|
|
|
54
54
|
- `dist/files/` and `dist/images/` are included for font and map CSS assets.
|
|
55
55
|
- `style.css.d.ts` is included for strict TypeScript side-effect CSS imports.
|
|
56
56
|
- `dist/showcase/` is included.
|
|
57
|
-
- `README.md`, `INTEGRATION.md`, `
|
|
57
|
+
- `README.md`, `INTEGRATION.md`, `MIGRATION.md`,
|
|
58
|
+
`COMPONENT_SELECTION.md`, `LICENSE`, `CHANGELOG.md` are included.
|
|
59
|
+
- `.agents/skills/component-library-rules/` and
|
|
60
|
+
`.agents/skills/admin-ui-consumer-migration/` are included.
|
|
61
|
+
- `scripts/audit-consumer.mjs`, `scripts/install-skill.mjs`, and
|
|
62
|
+
`scripts/serve-showcase.mjs` are included.
|
|
58
63
|
- `src/App.css` is included so consumers can copy the token source when
|
|
59
64
|
building their own Tailwind output.
|
|
60
65
|
- `node_modules/`, `coverage/`, `.git/`, `dist-ssr/`, the preview app
|
|
@@ -112,8 +117,8 @@ You cannot delete or overwrite a published version. Always dry-run first.
|
|
|
112
117
|
| --- | --- |
|
|
113
118
|
| `npm publish` says "private package" | Remove `"private": true` from `package.json` |
|
|
114
119
|
| `npm publish` says "name not available" | Someone took the name; pick a new one |
|
|
115
|
-
| Consumers report "module not found" for `admin-ui-starter-kit/foo` | Add `./foo` to the `exports` map AND `vite.lib.config.ts
|
|
116
|
-
| Consumers report "module not found" for a nested component path | Only explicitly exported nested subfamilies are public. Add an exact `exports` entry plus `vite.lib.config.ts` entry, or document the first-level family import. |
|
|
120
|
+
| Consumers report "module not found" for `admin-ui-starter-kit/foo` | Add an exact `./foo` entry to the `exports` map AND `vite.lib.config.ts`; rebuild and republish |
|
|
121
|
+
| Consumers report "module not found" for a nested component path | Only explicitly exported nested subfamilies are public. Add an exact `exports` entry plus `vite.lib.config.ts` entry, or document the first-level family import. Do not add wildcard or null-blocker exports. |
|
|
117
122
|
| Consumers must upgrade `lucide-react` | Expected for apps still on lucide v0; this package has a lucide v1 peer. |
|
|
118
123
|
| Published bundle has stale code | Confirm `prepublishOnly` ran; check `dist/` mtime; bump patch and republish |
|
|
119
124
|
| `peer dep warning: <pkg> not installed` for an optional peer | Verify the entry is in `peerDependenciesMeta.optional` block; consumer can ignore |
|