@usefragments/ui 1.1.1 → 1.2.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.
Files changed (141) hide show
  1. package/dist/assets/ui.css +327 -274
  2. package/dist/components/Checkbox/Checkbox.module.scss.cjs +11 -11
  3. package/dist/components/Checkbox/Checkbox.module.scss.js +11 -11
  4. package/dist/components/Chip/Chip.module.scss.cjs +15 -15
  5. package/dist/components/Chip/Chip.module.scss.js +15 -15
  6. package/dist/components/Combobox/index.cjs +106 -9
  7. package/dist/components/Combobox/index.d.ts.map +1 -1
  8. package/dist/components/Combobox/index.js +106 -9
  9. package/dist/components/DataTable/DataTable.module.scss.cjs +37 -34
  10. package/dist/components/DataTable/DataTable.module.scss.js +37 -34
  11. package/dist/components/Main/Main.module.scss.cjs +26 -0
  12. package/dist/components/Main/Main.module.scss.js +26 -0
  13. package/dist/components/Main/index.cjs +128 -0
  14. package/dist/components/Main/index.d.ts +22 -0
  15. package/dist/components/Main/index.d.ts.map +1 -0
  16. package/dist/components/Main/index.js +111 -0
  17. package/dist/components/Table/Table.module.scss.cjs +19 -19
  18. package/dist/components/Table/Table.module.scss.js +19 -19
  19. package/dist/components/TableOfContents/TableOfContents.module.scss.cjs +15 -15
  20. package/dist/components/TableOfContents/TableOfContents.module.scss.js +15 -15
  21. package/dist/components/TableOfContents/index.cjs +22 -42
  22. package/dist/components/TableOfContents/index.d.ts +3 -3
  23. package/dist/components/TableOfContents/index.d.ts.map +1 -1
  24. package/dist/components/TableOfContents/index.js +22 -42
  25. package/dist/index.cjs +87 -85
  26. package/dist/index.d.ts +1 -0
  27. package/dist/index.d.ts.map +1 -1
  28. package/dist/index.js +2 -0
  29. package/fragments.json +1 -1
  30. package/package.json +7 -2
  31. package/src/components/Checkbox/Checkbox.contract.json +5 -24
  32. package/src/components/Checkbox/Checkbox.module.scss +4 -2
  33. package/src/components/Chip/Chip.contract.json +11 -28
  34. package/src/components/Chip/Chip.module.scss +21 -45
  35. package/src/components/Combobox/Combobox.contract.json +6 -24
  36. package/src/components/Combobox/index.tsx +132 -6
  37. package/src/components/DataTable/DataTable.module.scss +31 -8
  38. package/src/components/Main/Main.contract.json +79 -0
  39. package/src/components/Main/Main.module.scss +31 -0
  40. package/src/components/Main/index.tsx +124 -0
  41. package/src/components/Table/Table.module.scss +22 -5
  42. package/src/components/TableOfContents/TableOfContents.contract.json +6 -16
  43. package/src/components/TableOfContents/TableOfContents.module.scss +10 -13
  44. package/src/components/TableOfContents/index.tsx +27 -38
  45. package/src/index.ts +3 -0
  46. package/src/tokens/_component-properties.scss +1 -0
  47. package/dist/components/Cloud/DashboardLayoutPrototypes.shared.d.ts +0 -33
  48. package/dist/components/Cloud/DashboardLayoutPrototypes.shared.d.ts.map +0 -1
  49. package/dist/components/Cloud/DashboardLayoutPrototypes.shell.d.ts +0 -11
  50. package/dist/components/Cloud/DashboardLayoutPrototypes.shell.d.ts.map +0 -1
  51. package/dist/components/Cloud/PullRequestsPrototypes.content.d.ts +0 -5
  52. package/dist/components/Cloud/PullRequestsPrototypes.content.d.ts.map +0 -1
  53. package/dist/components/Cloud/PullRequestsPrototypes.detail-panels.d.ts +0 -4
  54. package/dist/components/Cloud/PullRequestsPrototypes.detail-panels.d.ts.map +0 -1
  55. package/dist/components/Cloud/PullRequestsPrototypes.detail.d.ts +0 -3
  56. package/dist/components/Cloud/PullRequestsPrototypes.detail.d.ts.map +0 -1
  57. package/dist/components/Cloud/PullRequestsPrototypes.id-data.d.ts +0 -86
  58. package/dist/components/Cloud/PullRequestsPrototypes.id-data.d.ts.map +0 -1
  59. package/dist/components/Cloud/PullRequestsPrototypes.id-page.d.ts +0 -2
  60. package/dist/components/Cloud/PullRequestsPrototypes.id-page.d.ts.map +0 -1
  61. package/src/components/Accordion/Accordion.stories.tsx +0 -106
  62. package/src/components/Alert/Alert.stories.tsx +0 -119
  63. package/src/components/AppShell/AppShell.stories.tsx +0 -156
  64. package/src/components/Avatar/Avatar.stories.tsx +0 -74
  65. package/src/components/Badge/Badge.stories.tsx +0 -92
  66. package/src/components/BentoGrid/BentoGrid.stories.tsx +0 -98
  67. package/src/components/Box/Box.stories.tsx +0 -150
  68. package/src/components/Breadcrumbs/Breadcrumbs.stories.tsx +0 -87
  69. package/src/components/Button/Button.stories.tsx +0 -103
  70. package/src/components/ButtonGroup/ButtonGroup.stories.tsx +0 -97
  71. package/src/components/Card/Card.stories.tsx +0 -144
  72. package/src/components/Chart/Chart.stories.tsx +0 -119
  73. package/src/components/Checkbox/Checkbox.stories.tsx +0 -68
  74. package/src/components/Chip/Chip.stories.tsx +0 -70
  75. package/src/components/Cloud/CloudGovernanceShell.module.scss +0 -88
  76. package/src/components/Cloud/CloudGovernanceShell.stories.tsx +0 -446
  77. package/src/components/Cloud/ControlSizing.module.scss +0 -49
  78. package/src/components/Cloud/ControlSizing.stories.tsx +0 -238
  79. package/src/components/Cloud/DashboardLayoutPrototypes.module.scss +0 -462
  80. package/src/components/Cloud/DashboardLayoutPrototypes.shared.tsx +0 -375
  81. package/src/components/Cloud/DashboardLayoutPrototypes.shell.tsx +0 -147
  82. package/src/components/Cloud/DashboardLayoutPrototypes.stories.tsx +0 -328
  83. package/src/components/Cloud/PullRequestsPrototypes.content.tsx +0 -283
  84. package/src/components/Cloud/PullRequestsPrototypes.detail-panels.tsx +0 -381
  85. package/src/components/Cloud/PullRequestsPrototypes.detail.tsx +0 -204
  86. package/src/components/Cloud/PullRequestsPrototypes.id-data.ts +0 -395
  87. package/src/components/Cloud/PullRequestsPrototypes.id-page.tsx +0 -349
  88. package/src/components/Cloud/PullRequestsPrototypes.stories.tsx +0 -81
  89. package/src/components/CodeBlock/CodeBlock.stories.tsx +0 -147
  90. package/src/components/Collapsible/Collapsible.stories.tsx +0 -94
  91. package/src/components/ColorPicker/ColorPicker.stories.tsx +0 -74
  92. package/src/components/Combobox/Combobox.stories.tsx +0 -133
  93. package/src/components/Command/Command.stories.tsx +0 -102
  94. package/src/components/ConversationList/ConversationList.stories.tsx +0 -93
  95. package/src/components/DataTable/DataTable.stories.tsx +0 -129
  96. package/src/components/DatePicker/DatePicker.stories.tsx +0 -129
  97. package/src/components/Dialog/Dialog.stories.tsx +0 -154
  98. package/src/components/Drawer/Drawer.stories.tsx +0 -144
  99. package/src/components/Editor/Editor.stories.tsx +0 -99
  100. package/src/components/EmptyState/EmptyState.stories.tsx +0 -97
  101. package/src/components/Field/Field.stories.tsx +0 -109
  102. package/src/components/Fieldset/Fieldset.stories.tsx +0 -116
  103. package/src/components/Form/Form.stories.tsx +0 -142
  104. package/src/components/Grid/Grid.stories.tsx +0 -125
  105. package/src/components/Header/Header.stories.tsx +0 -133
  106. package/src/components/Icon/Icon.stories.tsx +0 -80
  107. package/src/components/IconButton/IconButton.stories.tsx +0 -78
  108. package/src/components/Image/Image.stories.tsx +0 -109
  109. package/src/components/Input/Input.stories.tsx +0 -104
  110. package/src/components/Link/Link.stories.tsx +0 -67
  111. package/src/components/List/List.stories.tsx +0 -95
  112. package/src/components/Listbox/Listbox.stories.tsx +0 -81
  113. package/src/components/Loading/Loading.stories.tsx +0 -69
  114. package/src/components/Markdown/Markdown.stories.tsx +0 -75
  115. package/src/components/Menu/Menu.stories.tsx +0 -113
  116. package/src/components/Message/Message.stories.tsx +0 -85
  117. package/src/components/NavigationMenu/NavigationMenu.stories.tsx +0 -161
  118. package/src/components/Pagination/Pagination.stories.tsx +0 -81
  119. package/src/components/Popover/Popover.stories.tsx +0 -152
  120. package/src/components/Progress/Progress.stories.tsx +0 -64
  121. package/src/components/Prompt/Prompt.stories.tsx +0 -93
  122. package/src/components/RadioGroup/RadioGroup.stories.tsx +0 -107
  123. package/src/components/ScrollArea/ScrollArea.stories.tsx +0 -97
  124. package/src/components/Select/Select.stories.tsx +0 -127
  125. package/src/components/Separator/Separator.stories.tsx +0 -84
  126. package/src/components/Sidebar/Sidebar.stories.tsx +0 -122
  127. package/src/components/Skeleton/Skeleton.stories.tsx +0 -80
  128. package/src/components/Slider/Slider.stories.tsx +0 -73
  129. package/src/components/Stack/Stack.stories.tsx +0 -73
  130. package/src/components/Switch/Switch.stories.tsx +0 -59
  131. package/src/components/Table/Table.stories.tsx +0 -219
  132. package/src/components/TableOfContents/TableOfContents.stories.tsx +0 -120
  133. package/src/components/Tabs/Tabs.stories.tsx +0 -136
  134. package/src/components/Text/Text.stories.tsx +0 -133
  135. package/src/components/Textarea/Textarea.stories.tsx +0 -107
  136. package/src/components/Theme/Theme.stories.tsx +0 -95
  137. package/src/components/ThinkingIndicator/ThinkingIndicator.stories.tsx +0 -85
  138. package/src/components/Toast/Toast.stories.tsx +0 -91
  139. package/src/components/ToggleGroup/ToggleGroup.stories.tsx +0 -114
  140. package/src/components/Tooltip/Tooltip.stories.tsx +0 -95
  141. package/src/components/VisuallyHidden/VisuallyHidden.stories.tsx +0 -78
@@ -1,395 +0,0 @@
1
- import type { StateVariant } from "./DashboardLayoutPrototypes.shared";
2
-
3
- export type CheckState = "failed" | "passed" | "warning";
4
-
5
- export type GithubCheck = {
6
- name: string;
7
- state: CheckState;
8
- label: string;
9
- variant: StateVariant;
10
- summary: string;
11
- duration: string;
12
- };
13
-
14
- export type GithubComment = {
15
- id: string;
16
- author: string;
17
- status: string;
18
- variant: StateVariant;
19
- file: string;
20
- line: number;
21
- body: string;
22
- designerSignal: string;
23
- };
24
-
25
- export type ImpactArea = {
26
- area: string;
27
- criticality: string;
28
- coverage: string;
29
- findings: string;
30
- owner: string;
31
- review: string;
32
- variant: StateVariant;
33
- };
34
-
35
- export type FindingSeverity = "Blocking" | "Safe fix" | "Review";
36
-
37
- /** How a finding can be remediated — drives the per-row action verb. */
38
- export type FixKind = "Deterministic" | "Proposed" | "Manual";
39
-
40
- export type PrFinding = {
41
- id: string;
42
- /** Versioned diagnostic code (FUI####). */
43
- code: string;
44
- /** Rule family the finding belongs to. */
45
- rule: string;
46
- severity: FindingSeverity;
47
- variant: StateVariant;
48
- /** Introduced by this PR (gates merge) vs. pre-existing legacy debt (never gates). */
49
- origin: "Introduced" | "Legacy";
50
- file: string;
51
- line: number;
52
- area: string;
53
- /** Call-sites this single finding-family touches in the PR — the bulk-action rationale. */
54
- occurrences: number;
55
- fix: FixKind;
56
- suggestion: string;
57
- body: string;
58
- designerSignal?: string;
59
- /** Surfaced as a human-readable review thread in the Conversation tab. */
60
- thread?: boolean;
61
- };
62
-
63
- export type Reviewer = {
64
- name: string;
65
- status: string;
66
- variant: StateVariant;
67
- };
68
-
69
- export type ChangedFile = {
70
- path: string;
71
- area: string;
72
- additions: number;
73
- deletions: number;
74
- findings: number;
75
- };
76
-
77
- export const prIdPagePullRequest = {
78
- number: 248,
79
- title: "Refresh marketing campaign cards",
80
- branch: "feat/launch-pages",
81
- author: "Maya Chen",
82
- coverageBefore: 68,
83
- coverageAfter: 61,
84
- comments: 8,
85
- safeFixes: 5,
86
- };
87
-
88
- export const githubChecks: GithubCheck[] = [
89
- {
90
- name: "fragments/contract-compliance",
91
- state: "failed",
92
- label: "Required",
93
- variant: "error",
94
- summary: "3 blocking design-contract comments must be resolved.",
95
- duration: "1m 42s",
96
- },
97
- {
98
- name: "fragments/governance-report",
99
- state: "warning",
100
- label: "Advisory",
101
- variant: "warning",
102
- summary: "Coverage fell 7 points in Marketing; 5 fixes are deterministic.",
103
- duration: "1m 46s",
104
- },
105
- {
106
- name: "build",
107
- state: "passed",
108
- label: "CI",
109
- variant: "success",
110
- summary: "Production bundle and typecheck completed.",
111
- duration: "3m 12s",
112
- },
113
- {
114
- name: "storybook visual review",
115
- state: "passed",
116
- label: "Design",
117
- variant: "success",
118
- summary: "No snapshot deltas on shared primitives.",
119
- duration: "2m 08s",
120
- },
121
- ];
122
-
123
- export const impactAreas: ImpactArea[] = [
124
- {
125
- area: "Marketing",
126
- criticality: "Public launch",
127
- coverage: "68% -> 61%",
128
- findings: "11 findings",
129
- owner: "Growth design",
130
- review: "CTA, danger states, card spacing",
131
- variant: "error",
132
- },
133
- {
134
- area: "Dashboard",
135
- criticality: "Core app",
136
- coverage: "84% -> 84%",
137
- findings: "0 findings",
138
- owner: "Cloud product",
139
- review: "No review needed",
140
- variant: "success",
141
- },
142
- {
143
- area: "Checkout",
144
- criticality: "Revenue",
145
- coverage: "91% -> 91%",
146
- findings: "0 findings",
147
- owner: "Revenue systems",
148
- review: "No touched surfaces",
149
- variant: "success",
150
- },
151
- ];
152
-
153
- // Single source of truth for PR #248 findings. Both the table-first detail
154
- // (Layout 3) and the conversation prototype (Layout 4) read from this list so
155
- // the two surfaces can never drift apart.
156
- export const prFindings: PrFinding[] = [
157
- {
158
- id: "button-contract",
159
- code: "FUI3101",
160
- rule: "Canonical usage",
161
- severity: "Blocking",
162
- variant: "error",
163
- origin: "Introduced",
164
- file: "src/routes/(marketing)/launch/Hero.tsx",
165
- line: 42,
166
- area: "Marketing",
167
- occurrences: 4,
168
- fix: "Deterministic",
169
- suggestion: "Replace with <Button>",
170
- body: "Native button introduced in a public launch hero. Use Button so loading, disabled, focus, and variants stay governed.",
171
- designerSignal: "Primary CTA behavior is outside the design-system contract.",
172
- thread: true,
173
- },
174
- {
175
- id: "danger-token",
176
- code: "FUI2110",
177
- rule: "Tokens · color",
178
- severity: "Blocking",
179
- variant: "error",
180
- origin: "Introduced",
181
- file: "src/routes/(marketing)/launch/Form.tsx",
182
- line: 88,
183
- area: "Marketing",
184
- occurrences: 3,
185
- fix: "Deterministic",
186
- suggestion: "Use var(--fui-color-danger-bg)",
187
- body: "Raw danger background bypasses the semantic danger token. Replace the hardcoded value before merge.",
188
- designerSignal: "Error and warning color semantics can drift from brand.",
189
- thread: true,
190
- },
191
- {
192
- id: "brand-accent",
193
- code: "FUI2101",
194
- rule: "Tokens · brand",
195
- severity: "Blocking",
196
- variant: "error",
197
- origin: "Introduced",
198
- file: "src/routes/(marketing)/launch/Hero.tsx",
199
- line: 51,
200
- area: "Marketing",
201
- occurrences: 2,
202
- fix: "Deterministic",
203
- suggestion: "Use var(--fui-color-accent)",
204
- body: "Hardcoded #6d5efc on the CTA bypasses the brand accent token.",
205
- },
206
- {
207
- id: "spacing-gap",
208
- code: "FUI2120",
209
- rule: "Tokens · spacing",
210
- severity: "Safe fix",
211
- variant: "warning",
212
- origin: "Introduced",
213
- file: "src/components/campaign/CardGrid.tsx",
214
- line: 31,
215
- area: "Marketing",
216
- occurrences: 6,
217
- fix: "Deterministic",
218
- suggestion: "Use var(--fui-space-4)",
219
- body: "Off-scale 18px gap. Snap to the nearest spacing token.",
220
- },
221
- {
222
- id: "radius-scale",
223
- code: "FUI2122",
224
- rule: "Tokens · radius",
225
- severity: "Safe fix",
226
- variant: "warning",
227
- origin: "Introduced",
228
- file: "src/components/campaign/Card.tsx",
229
- line: 12,
230
- area: "Marketing",
231
- occurrences: 4,
232
- fix: "Deterministic",
233
- suggestion: "Use var(--fui-radius-md)",
234
- body: "Hardcoded 10px corner radius is off the radius scale.",
235
- },
236
- {
237
- id: "font-size",
238
- code: "FUI2130",
239
- rule: "Tokens · type",
240
- severity: "Safe fix",
241
- variant: "warning",
242
- origin: "Introduced",
243
- file: "src/routes/(marketing)/launch/Hero.tsx",
244
- line: 60,
245
- area: "Marketing",
246
- occurrences: 2,
247
- fix: "Deterministic",
248
- suggestion: "Use var(--fui-font-size-lg)",
249
- body: "Hardcoded 19px heading size bypasses the type scale.",
250
- },
251
- {
252
- id: "shadow-token",
253
- code: "FUI2140",
254
- rule: "Tokens · elevation",
255
- severity: "Safe fix",
256
- variant: "warning",
257
- origin: "Introduced",
258
- file: "src/components/campaign/Card.tsx",
259
- line: 20,
260
- area: "Marketing",
261
- occurrences: 5,
262
- fix: "Deterministic",
263
- suggestion: "Use var(--fui-shadow-sm)",
264
- body: "Raw box-shadow does not match the elevation scale.",
265
- },
266
- {
267
- id: "muted-text",
268
- code: "FUI2112",
269
- rule: "Tokens · color",
270
- severity: "Safe fix",
271
- variant: "warning",
272
- origin: "Legacy",
273
- file: "src/routes/(marketing)/launch/Footer.tsx",
274
- line: 14,
275
- area: "Marketing",
276
- occurrences: 3,
277
- fix: "Deterministic",
278
- suggestion: "Use var(--fui-text-tertiary)",
279
- body: "Pre-existing hardcoded muted gray. Visible as legacy debt; does not gate this PR.",
280
- },
281
- {
282
- id: "spacing-rhythm",
283
- code: "FUI4010",
284
- rule: "Spacing rhythm",
285
- severity: "Review",
286
- variant: "info",
287
- origin: "Introduced",
288
- file: "src/components/campaign/CardGrid.tsx",
289
- line: 31,
290
- area: "Marketing",
291
- occurrences: 6,
292
- fix: "Proposed",
293
- suggestion: "Snap to scale or mark intentional",
294
- body: "Spacing is off scale. Use the nearest Fragments spacing token or mark this as an intentional campaign exception.",
295
- designerSignal: "Card rhythm changes across the marketing grid.",
296
- thread: true,
297
- },
298
- {
299
- id: "icon-button-label",
300
- code: "FUI1204",
301
- rule: "A11y · name",
302
- severity: "Review",
303
- variant: "info",
304
- origin: "Introduced",
305
- file: "src/routes/(marketing)/launch/Hero.tsx",
306
- line: 70,
307
- area: "Marketing",
308
- occurrences: 1,
309
- fix: "Manual",
310
- suggestion: "Add an accessible label",
311
- body: "Icon-only share button has no accessible name.",
312
- },
313
- {
314
- id: "heading-order",
315
- code: "FUI1330",
316
- rule: "A11y · structure",
317
- severity: "Review",
318
- variant: "info",
319
- origin: "Legacy",
320
- file: "src/routes/(marketing)/launch/Form.tsx",
321
- line: 22,
322
- area: "Marketing",
323
- occurrences: 1,
324
- fix: "Manual",
325
- suggestion: "Restore heading order",
326
- body: "Heading level skips from h2 to h4. Pre-existing; does not gate this PR.",
327
- },
328
- ];
329
-
330
- export const blockingFindings = prFindings.filter((finding) => finding.severity === "Blocking");
331
- export const introducedFindings = prFindings.filter((finding) => finding.origin === "Introduced");
332
- export const threadFindings = prFindings.filter((finding) => finding.thread);
333
-
334
- // Layout 4 renders a curated subset of findings as GitHub-style review threads.
335
- // Deriving it here keeps the conversation prototype in lock-step with the table.
336
- export const githubComments: GithubComment[] = threadFindings.map((finding) => ({
337
- id: finding.id,
338
- author: "fragments[bot]",
339
- status: finding.severity,
340
- variant: finding.variant,
341
- file: finding.file,
342
- line: finding.line,
343
- body: finding.body,
344
- designerSignal: finding.designerSignal ?? "",
345
- }));
346
-
347
- export const reviewers: Reviewer[] = [
348
- { name: "Growth design", status: "Review needed", variant: "warning" },
349
- { name: "Cloud platform", status: "Blocked", variant: "error" },
350
- ];
351
-
352
- export const changedFiles: ChangedFile[] = [
353
- {
354
- path: "src/routes/(marketing)/launch/Hero.tsx",
355
- area: "Marketing",
356
- additions: 64,
357
- deletions: 12,
358
- findings: 4,
359
- },
360
- {
361
- path: "src/routes/(marketing)/launch/Form.tsx",
362
- area: "Marketing",
363
- additions: 38,
364
- deletions: 9,
365
- findings: 2,
366
- },
367
- {
368
- path: "src/components/campaign/CardGrid.tsx",
369
- area: "Marketing",
370
- additions: 27,
371
- deletions: 5,
372
- findings: 3,
373
- },
374
- {
375
- path: "src/components/campaign/Card.tsx",
376
- area: "Marketing",
377
- additions: 19,
378
- deletions: 3,
379
- findings: 2,
380
- },
381
- {
382
- path: "src/routes/(marketing)/launch/Footer.tsx",
383
- area: "Marketing",
384
- additions: 8,
385
- deletions: 2,
386
- findings: 0,
387
- },
388
- {
389
- path: "src/styles/campaign.css",
390
- area: "Marketing",
391
- additions: 14,
392
- deletions: 6,
393
- findings: 0,
394
- },
395
- ];