ionbase-ui 0.20.0 → 0.22.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/dist/figma-map.json +2047 -0
- package/dist/meta/components.json +1 -1
- package/dist/meta/index.json +1 -1
- package/dist/meta/patterns/DataTable.json +133 -0
- package/dist/meta/patterns/DestructiveConfirm.json +112 -0
- package/dist/meta/patterns/Form.json +127 -0
- package/dist/meta/patterns/PageShell.json +96 -0
- package/dist/meta/patterns/SettingsPanel.json +136 -0
- package/dist/meta/patterns/Wizard.json +130 -0
- package/dist/meta/patterns/index.json +133 -0
- package/llms.txt +11 -1
- package/package.json +8 -3
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "Wizard",
|
|
3
|
+
"summary": "A sequence of steps with per-step validation, where progress survives leaving.",
|
|
4
|
+
"useWhen": [
|
|
5
|
+
"a task genuinely has an order — later steps depend on earlier answers",
|
|
6
|
+
"the whole task is too long to present as one form without abandonment"
|
|
7
|
+
],
|
|
8
|
+
"composes": [
|
|
9
|
+
"Button",
|
|
10
|
+
"Input",
|
|
11
|
+
"Select",
|
|
12
|
+
"Checkbox",
|
|
13
|
+
"RadioGroup",
|
|
14
|
+
"Radio",
|
|
15
|
+
"Alert",
|
|
16
|
+
"Badge",
|
|
17
|
+
"Divider",
|
|
18
|
+
"Modal"
|
|
19
|
+
],
|
|
20
|
+
"structure": [
|
|
21
|
+
"A step indicator naming every step and marking the current one — not Tabs, because the steps are not peers and cannot be visited in any order.",
|
|
22
|
+
"One step's fields at a time, each step a Form in its own right.",
|
|
23
|
+
"Back and Next, plus save-and-exit for anything longer than three steps.",
|
|
24
|
+
"A final review step listing every answer with a link back to the step that set it."
|
|
25
|
+
],
|
|
26
|
+
"states": {
|
|
27
|
+
"loading": {
|
|
28
|
+
"must": "Disable Next and say what is happening on it. Never advance optimistically.",
|
|
29
|
+
"why": "advancing before the server accepts step N means step N+1 may be built on rejected data"
|
|
30
|
+
},
|
|
31
|
+
"empty": {
|
|
32
|
+
"must": "A resumed wizard opens on the first incomplete step, not step one.",
|
|
33
|
+
"why": "restarting a half-finished task is why users abandon it the second time"
|
|
34
|
+
},
|
|
35
|
+
"error": {
|
|
36
|
+
"must": "Stay on the failing step, mark the fields, and keep every answer from every step.",
|
|
37
|
+
"why": "losing step 1's answers because step 3 failed is the worst version of this pattern"
|
|
38
|
+
},
|
|
39
|
+
"partial": {
|
|
40
|
+
"must": "Save each completed step as it is accepted, so leaving mid-wizard loses at most the current step.",
|
|
41
|
+
"why": "save-and-exit that only saves at the end is not save-and-exit"
|
|
42
|
+
}
|
|
43
|
+
},
|
|
44
|
+
"propsUsed": {
|
|
45
|
+
"Button": [
|
|
46
|
+
"variant",
|
|
47
|
+
"size",
|
|
48
|
+
"isDisabled"
|
|
49
|
+
],
|
|
50
|
+
"Input": [
|
|
51
|
+
"label",
|
|
52
|
+
"isInvalid",
|
|
53
|
+
"errorMessage",
|
|
54
|
+
"isRequired"
|
|
55
|
+
],
|
|
56
|
+
"Select": [
|
|
57
|
+
"label",
|
|
58
|
+
"isInvalid",
|
|
59
|
+
"errorMessage"
|
|
60
|
+
],
|
|
61
|
+
"RadioGroup": [
|
|
62
|
+
"label",
|
|
63
|
+
"value",
|
|
64
|
+
"onChange"
|
|
65
|
+
],
|
|
66
|
+
"Alert": [
|
|
67
|
+
"intent",
|
|
68
|
+
"title"
|
|
69
|
+
],
|
|
70
|
+
"Badge": [
|
|
71
|
+
"intent"
|
|
72
|
+
],
|
|
73
|
+
"Modal": [
|
|
74
|
+
"isOpen",
|
|
75
|
+
"onOpenChange",
|
|
76
|
+
"title",
|
|
77
|
+
"footer"
|
|
78
|
+
]
|
|
79
|
+
},
|
|
80
|
+
"variantsUsed": {
|
|
81
|
+
"Button": {
|
|
82
|
+
"variant": [
|
|
83
|
+
"primary-brand",
|
|
84
|
+
"secondary",
|
|
85
|
+
"tertiary"
|
|
86
|
+
]
|
|
87
|
+
},
|
|
88
|
+
"Alert": {
|
|
89
|
+
"intent": [
|
|
90
|
+
"error",
|
|
91
|
+
"information"
|
|
92
|
+
]
|
|
93
|
+
},
|
|
94
|
+
"Badge": {
|
|
95
|
+
"intent": [
|
|
96
|
+
"success",
|
|
97
|
+
"neutral"
|
|
98
|
+
]
|
|
99
|
+
}
|
|
100
|
+
},
|
|
101
|
+
"a11y": {
|
|
102
|
+
"requires": [
|
|
103
|
+
"the step change announced, and focus moved to the new step's heading — otherwise a screen-reader user does not know the page changed",
|
|
104
|
+
"the current step's position stated in text, not only drawn: \"Step 2 of 5\"",
|
|
105
|
+
"each step's fields validated on its own Next, not all at the end"
|
|
106
|
+
],
|
|
107
|
+
"notes": [
|
|
108
|
+
"Do not build this from Tabs. The tablist role announces peers that may be visited in any order, which is the opposite of a wizard.",
|
|
109
|
+
"A Modal wraps the whole wizard only when abandoning it is safe. A long task in a dialog that closes on an outside click loses everything."
|
|
110
|
+
]
|
|
111
|
+
},
|
|
112
|
+
"antiPatterns": [
|
|
113
|
+
{
|
|
114
|
+
"dont": "Tabs as the step indicator",
|
|
115
|
+
"why": "the role promises peers in any order, and nothing stops a user landing on the last step first"
|
|
116
|
+
},
|
|
117
|
+
{
|
|
118
|
+
"dont": "validating every step only at the end",
|
|
119
|
+
"why": "the user is sent back through steps they thought were finished"
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
"dont": "a wizard for a task that fits on one screen",
|
|
123
|
+
"why": "each step boundary is an opportunity to abandon"
|
|
124
|
+
},
|
|
125
|
+
{
|
|
126
|
+
"dont": "a progress bar with no step names",
|
|
127
|
+
"why": "a percentage does not tell the user what is left or whether they can finish now"
|
|
128
|
+
}
|
|
129
|
+
]
|
|
130
|
+
}
|
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
{
|
|
2
|
+
"package": "ionbase-ui",
|
|
3
|
+
"version": "0.22.0",
|
|
4
|
+
"usage": "A pattern is a documented composition of components, not a component. Read one here, then read the contracts of what it composes.",
|
|
5
|
+
"patterns": {
|
|
6
|
+
"DataTable": {
|
|
7
|
+
"summary": "A table of records with a toolbar, selection, and the three states everyone forgets.",
|
|
8
|
+
"composes": [
|
|
9
|
+
"Table",
|
|
10
|
+
"TableHead",
|
|
11
|
+
"TableBody",
|
|
12
|
+
"TableRow",
|
|
13
|
+
"TableCell",
|
|
14
|
+
"Checkbox",
|
|
15
|
+
"Button",
|
|
16
|
+
"Badge",
|
|
17
|
+
"Alert",
|
|
18
|
+
"Input"
|
|
19
|
+
],
|
|
20
|
+
"states": [
|
|
21
|
+
"loading",
|
|
22
|
+
"empty",
|
|
23
|
+
"error",
|
|
24
|
+
"partial"
|
|
25
|
+
],
|
|
26
|
+
"detail": "dist/meta/patterns/DataTable.json"
|
|
27
|
+
},
|
|
28
|
+
"DestructiveConfirm": {
|
|
29
|
+
"summary": "A confirmation the user cannot pass through by reflex, for actions that cannot be undone.",
|
|
30
|
+
"composes": [
|
|
31
|
+
"Modal",
|
|
32
|
+
"Button",
|
|
33
|
+
"Input",
|
|
34
|
+
"Alert",
|
|
35
|
+
"Badge"
|
|
36
|
+
],
|
|
37
|
+
"states": [
|
|
38
|
+
"loading",
|
|
39
|
+
"empty",
|
|
40
|
+
"error",
|
|
41
|
+
"partial"
|
|
42
|
+
],
|
|
43
|
+
"detail": "dist/meta/patterns/DestructiveConfirm.json"
|
|
44
|
+
},
|
|
45
|
+
"Form": {
|
|
46
|
+
"summary": "A form that validates, reports errors where the user can act on them, and survives a failed submit.",
|
|
47
|
+
"composes": [
|
|
48
|
+
"Input",
|
|
49
|
+
"Select",
|
|
50
|
+
"Checkbox",
|
|
51
|
+
"Radio",
|
|
52
|
+
"RadioGroup",
|
|
53
|
+
"Toggle",
|
|
54
|
+
"PhoneInput",
|
|
55
|
+
"Button",
|
|
56
|
+
"Alert",
|
|
57
|
+
"Divider"
|
|
58
|
+
],
|
|
59
|
+
"states": [
|
|
60
|
+
"loading",
|
|
61
|
+
"empty",
|
|
62
|
+
"error",
|
|
63
|
+
"partial"
|
|
64
|
+
],
|
|
65
|
+
"detail": "dist/meta/patterns/Form.json"
|
|
66
|
+
},
|
|
67
|
+
"PageShell": {
|
|
68
|
+
"summary": "The frame every screen sits in: header, navigation, a named content region.",
|
|
69
|
+
"composes": [
|
|
70
|
+
"Header",
|
|
71
|
+
"NavItem",
|
|
72
|
+
"Logo",
|
|
73
|
+
"LogoMark",
|
|
74
|
+
"Avatar",
|
|
75
|
+
"Button",
|
|
76
|
+
"Divider",
|
|
77
|
+
"ToastProvider"
|
|
78
|
+
],
|
|
79
|
+
"states": [
|
|
80
|
+
"loading",
|
|
81
|
+
"empty",
|
|
82
|
+
"error"
|
|
83
|
+
],
|
|
84
|
+
"detail": "dist/meta/patterns/PageShell.json"
|
|
85
|
+
},
|
|
86
|
+
"SettingsPanel": {
|
|
87
|
+
"summary": "Grouped settings that either apply immediately or are saved together — never both in one panel.",
|
|
88
|
+
"composes": [
|
|
89
|
+
"Toggle",
|
|
90
|
+
"Checkbox",
|
|
91
|
+
"RadioGroup",
|
|
92
|
+
"Radio",
|
|
93
|
+
"Select",
|
|
94
|
+
"Input",
|
|
95
|
+
"Button",
|
|
96
|
+
"Alert",
|
|
97
|
+
"Divider",
|
|
98
|
+
"Badge",
|
|
99
|
+
"Tabs",
|
|
100
|
+
"TabItem"
|
|
101
|
+
],
|
|
102
|
+
"states": [
|
|
103
|
+
"loading",
|
|
104
|
+
"empty",
|
|
105
|
+
"error",
|
|
106
|
+
"partial"
|
|
107
|
+
],
|
|
108
|
+
"detail": "dist/meta/patterns/SettingsPanel.json"
|
|
109
|
+
},
|
|
110
|
+
"Wizard": {
|
|
111
|
+
"summary": "A sequence of steps with per-step validation, where progress survives leaving.",
|
|
112
|
+
"composes": [
|
|
113
|
+
"Button",
|
|
114
|
+
"Input",
|
|
115
|
+
"Select",
|
|
116
|
+
"Checkbox",
|
|
117
|
+
"RadioGroup",
|
|
118
|
+
"Radio",
|
|
119
|
+
"Alert",
|
|
120
|
+
"Badge",
|
|
121
|
+
"Divider",
|
|
122
|
+
"Modal"
|
|
123
|
+
],
|
|
124
|
+
"states": [
|
|
125
|
+
"loading",
|
|
126
|
+
"empty",
|
|
127
|
+
"error",
|
|
128
|
+
"partial"
|
|
129
|
+
],
|
|
130
|
+
"detail": "dist/meta/patterns/Wizard.json"
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
}
|
package/llms.txt
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
> IonBase is a React design system for enterprise SaaS, built to be consumed by an agent rather than read by a developer. Every component ships a machine-readable contract carrying the judgement a type signature cannot: when to use it, what to use instead, the anti-patterns, and what it guarantees for accessibility versus what it requires of you.
|
|
4
4
|
|
|
5
|
-
Version 0.
|
|
5
|
+
Version 0.22.0. 35 components.
|
|
6
6
|
|
|
7
7
|
## Read these, in this order
|
|
8
8
|
|
|
@@ -15,6 +15,16 @@ Both are importable: `ionbase-ui/meta/index` and `ionbase-ui/meta/<Name>.json`.
|
|
|
15
15
|
|
|
16
16
|
`Alert`, `Avatar`, `AvatarGroup`, `Badge`, `Button`, `Checkbox`, `Divider`, `FullCard`, `Header`, `Icon`, `Input`, `Link`, `Logo`, `LogoMark`, `Menu`, `MenuItem`, `Modal`, `NavItem`, `PhoneInput`, `Popover`, `Radio`, `RadioGroup`, `ScrollProgress`, `Select`, `TabItem`, `Table`, `TableBody`, `TableCell`, `TableHead`, `TableRow`, `Tabs`, `Toast`, `ToastProvider`, `Toggle`, `Tooltip`
|
|
17
17
|
|
|
18
|
+
## Patterns
|
|
19
|
+
|
|
20
|
+
Compositions of the components above, in `dist/meta/patterns/`. Read `dist/meta/patterns/index.json`, then one recipe. They are the only place the empty, loading and error states are specified — no component owns those, which is why they are the part that gets left out.
|
|
21
|
+
|
|
22
|
+
`DataTable`, `DestructiveConfirm`, `Form`, `PageShell`, `SettingsPanel`, `Wizard`
|
|
23
|
+
|
|
24
|
+
## Coming from a Figma design?
|
|
25
|
+
|
|
26
|
+
`dist/figma-map.json` maps every Figma component and node id in the IonBase library to the React component and the real props — what Code Connect does, without needing an Organization plan. Look up the node id or the component name rather than guessing from a screenshot.
|
|
27
|
+
|
|
18
28
|
## Rules that ship with this package
|
|
19
29
|
|
|
20
30
|
- `ionbase-ui/eslint-plugin` — five rules driven from the contracts: deprecated props, missing accessible names, raw style values, measured contrast failures, competing primary actions.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ionbase-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.22.0",
|
|
4
4
|
"description": "IonBase Design System — accessible React components, styles and design tokens in one package",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -14,6 +14,8 @@
|
|
|
14
14
|
"./meta": "./dist/meta/components.json",
|
|
15
15
|
"./meta/index": "./dist/meta/index.json",
|
|
16
16
|
"./meta/*": "./dist/meta/*",
|
|
17
|
+
"./patterns": "./dist/meta/patterns/index.json",
|
|
18
|
+
"./patterns/*": "./dist/meta/patterns/*",
|
|
17
19
|
"./styles": "./dist/styles/index.css",
|
|
18
20
|
"./styles/*": "./dist/styles/*",
|
|
19
21
|
"./tokens": "./dist/styles/tokens/index.css",
|
|
@@ -22,6 +24,7 @@
|
|
|
22
24
|
"types": "./dist/tokens-js.d.ts",
|
|
23
25
|
"default": "./dist/tokens-js.js"
|
|
24
26
|
},
|
|
27
|
+
"./figma-map": "./dist/figma-map.json",
|
|
25
28
|
"./llms.txt": "./llms.txt",
|
|
26
29
|
"./stylelint-config": "./stylelint-config.js",
|
|
27
30
|
"./eslint-plugin": "./eslint-plugin/index.js"
|
|
@@ -59,7 +62,7 @@
|
|
|
59
62
|
},
|
|
60
63
|
"scripts": {
|
|
61
64
|
"dev": "tsc --watch",
|
|
62
|
-
"build": "node scripts/sync-tokens.mjs && tsc --build --force && node scripts/copy-css.mjs && node scripts/verify-client-boundaries.mjs && node scripts/verify-contrast.mjs && node scripts/build-meta.mjs && node scripts/verify-meta.mjs && node scripts/build-llms.mjs",
|
|
65
|
+
"build": "node scripts/sync-tokens.mjs && tsc --build --force && node scripts/copy-css.mjs && node scripts/verify-client-boundaries.mjs && node scripts/verify-contrast.mjs && node scripts/build-meta.mjs && node scripts/verify-meta.mjs && node scripts/build-patterns.mjs && node scripts/verify-figma-map.mjs && node scripts/build-llms.mjs",
|
|
63
66
|
"typecheck": "tsc --noEmit",
|
|
64
67
|
"lint": "eslint . && stylelint \"src/styles/*.css\"",
|
|
65
68
|
"format": "prettier --check .",
|
|
@@ -68,7 +71,9 @@
|
|
|
68
71
|
"meta:verify": "node scripts/build-meta.mjs && node scripts/verify-meta.mjs",
|
|
69
72
|
"contrast": "node scripts/verify-contrast.mjs",
|
|
70
73
|
"contrast:list": "node scripts/verify-contrast.mjs --list",
|
|
71
|
-
"llms": "node scripts/build-llms.mjs"
|
|
74
|
+
"llms": "node scripts/build-llms.mjs",
|
|
75
|
+
"patterns": "node scripts/build-patterns.mjs",
|
|
76
|
+
"figma:map": "node scripts/verify-figma-map.mjs"
|
|
72
77
|
},
|
|
73
78
|
"peerDependencies": {
|
|
74
79
|
"react": "^18.0.0 || ^19.0.0",
|