@fragments-sdk/ui 0.9.1 → 0.9.2
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/package.json
CHANGED
|
@@ -144,7 +144,7 @@ export default defineFragment({
|
|
|
144
144
|
name: 'Screen',
|
|
145
145
|
description: 'Full-screen loading state with optional label',
|
|
146
146
|
render: () => (
|
|
147
|
-
<div style={{ position: 'relative', width: '300px', height: '200px', border: '1px solid #ccc', borderRadius: '8px', overflow: 'hidden' }}>
|
|
147
|
+
<div style={{ position: 'relative', width: '300px', height: '200px', border: '1px solid #ccc', borderRadius: '8px', overflow: 'hidden', transform: 'scale(1)' }}>
|
|
148
148
|
<Loading.Screen size="lg" label="Loading application..." showLabel />
|
|
149
149
|
</div>
|
|
150
150
|
),
|
|
@@ -86,44 +86,56 @@ const demoContainerStyle: React.CSSProperties = {
|
|
|
86
86
|
width: '100%',
|
|
87
87
|
};
|
|
88
88
|
|
|
89
|
+
// Isolate preview sidebar state from any parent SidebarProvider (e.g., docs app's AppShell)
|
|
90
|
+
function PreviewIsolation({ children }: { children: React.ReactNode }) {
|
|
91
|
+
return (
|
|
92
|
+
<SidebarProvider enableKeyboardShortcut={false}>
|
|
93
|
+
{children}
|
|
94
|
+
</SidebarProvider>
|
|
95
|
+
);
|
|
96
|
+
}
|
|
97
|
+
|
|
89
98
|
// Stateful demo for collapsed state
|
|
90
99
|
function CollapsedDemo() {
|
|
91
100
|
const [collapsed, setCollapsed] = useState(true);
|
|
92
101
|
return (
|
|
93
|
-
<
|
|
94
|
-
<
|
|
95
|
-
<Sidebar
|
|
96
|
-
<LogoIcon size={32} />
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
<Sidebar.
|
|
101
|
-
<Sidebar.
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
<Sidebar.
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
<Sidebar.
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
102
|
+
<SidebarProvider collapsed={collapsed} onCollapsedChange={setCollapsed} enableKeyboardShortcut={false}>
|
|
103
|
+
<div style={demoContainerStyle}>
|
|
104
|
+
<Sidebar>
|
|
105
|
+
<Sidebar.Header collapsedContent={<LogoIcon size={32} />}>
|
|
106
|
+
<LogoIcon size={32} />
|
|
107
|
+
<span style={{ fontWeight: 600, fontSize: '16px' }}>Acme App</span>
|
|
108
|
+
</Sidebar.Header>
|
|
109
|
+
<Sidebar.Nav>
|
|
110
|
+
<Sidebar.Section>
|
|
111
|
+
<Sidebar.Item icon={<HomeIcon />} active>Dashboard</Sidebar.Item>
|
|
112
|
+
<Sidebar.Item icon={<ChartIcon />}>Analytics</Sidebar.Item>
|
|
113
|
+
<Sidebar.Item icon={<UsersIcon />}>Team</Sidebar.Item>
|
|
114
|
+
<Sidebar.Item icon={<FolderIcon />}>Projects</Sidebar.Item>
|
|
115
|
+
</Sidebar.Section>
|
|
116
|
+
<Sidebar.Section label="Settings">
|
|
117
|
+
<Sidebar.Item icon={<GearIcon />}>Preferences</Sidebar.Item>
|
|
118
|
+
<Sidebar.Item icon={<HelpIcon />}>Help</Sidebar.Item>
|
|
119
|
+
</Sidebar.Section>
|
|
120
|
+
</Sidebar.Nav>
|
|
121
|
+
<Sidebar.Footer>
|
|
122
|
+
<Sidebar.CollapseToggle />
|
|
123
|
+
</Sidebar.Footer>
|
|
124
|
+
</Sidebar>
|
|
125
|
+
<main style={mainContentStyle}>
|
|
126
|
+
Hover over icons to see tooltips. Click toggle to expand.
|
|
127
|
+
</main>
|
|
128
|
+
</div>
|
|
129
|
+
</SidebarProvider>
|
|
119
130
|
);
|
|
120
131
|
}
|
|
121
132
|
|
|
122
133
|
// Demo for submenu expansion using uncontrolled defaultExpanded
|
|
123
134
|
function SubmenuDemo() {
|
|
124
135
|
return (
|
|
125
|
-
<
|
|
126
|
-
<
|
|
136
|
+
<PreviewIsolation>
|
|
137
|
+
<div style={demoContainerStyle}>
|
|
138
|
+
<Sidebar>
|
|
127
139
|
<Sidebar.Header collapsedContent={<LogoIcon size={32} />}>
|
|
128
140
|
<LogoIcon size={32} />
|
|
129
141
|
<span style={{ fontWeight: 600, fontSize: '16px' }}>Acme App</span>
|
|
@@ -156,6 +168,7 @@ function SubmenuDemo() {
|
|
|
156
168
|
Click on "Projects" or "Team" to toggle their submenus
|
|
157
169
|
</main>
|
|
158
170
|
</div>
|
|
171
|
+
</PreviewIsolation>
|
|
159
172
|
);
|
|
160
173
|
}
|
|
161
174
|
|
|
@@ -182,7 +195,7 @@ function ExternalTriggerContent() {
|
|
|
182
195
|
function ProviderDemo() {
|
|
183
196
|
return (
|
|
184
197
|
<div style={demoContainerStyle}>
|
|
185
|
-
<SidebarProvider>
|
|
198
|
+
<SidebarProvider enableKeyboardShortcut={false}>
|
|
186
199
|
<Sidebar>
|
|
187
200
|
<Sidebar.Header collapsedContent={<LogoIcon size={32} />}>
|
|
188
201
|
<LogoIcon size={32} />
|
|
@@ -206,8 +219,9 @@ function ProviderDemo() {
|
|
|
206
219
|
// Demo for asChild pattern with mock Link
|
|
207
220
|
function AsChildDemo() {
|
|
208
221
|
return (
|
|
209
|
-
<
|
|
210
|
-
<
|
|
222
|
+
<PreviewIsolation>
|
|
223
|
+
<div style={demoContainerStyle}>
|
|
224
|
+
<Sidebar>
|
|
211
225
|
<Sidebar.Header collapsedContent={<LogoIcon size={32} />}>
|
|
212
226
|
<LogoIcon size={32} />
|
|
213
227
|
<span style={{ fontWeight: 600, fontSize: '16px' }}>Acme App</span>
|
|
@@ -236,14 +250,16 @@ function AsChildDemo() {
|
|
|
236
250
|
Items rendered as Link components using asChild pattern
|
|
237
251
|
</main>
|
|
238
252
|
</div>
|
|
253
|
+
</PreviewIsolation>
|
|
239
254
|
);
|
|
240
255
|
}
|
|
241
256
|
|
|
242
257
|
// Demo for section with action button
|
|
243
258
|
function SectionActionDemo() {
|
|
244
259
|
return (
|
|
245
|
-
<
|
|
246
|
-
<
|
|
260
|
+
<PreviewIsolation>
|
|
261
|
+
<div style={demoContainerStyle}>
|
|
262
|
+
<Sidebar>
|
|
247
263
|
<Sidebar.Header collapsedContent={<LogoIcon size={32} />}>
|
|
248
264
|
<LogoIcon size={32} />
|
|
249
265
|
<span style={{ fontWeight: 600, fontSize: '16px' }}>Acme App</span>
|
|
@@ -274,6 +290,7 @@ function SectionActionDemo() {
|
|
|
274
290
|
Section header has an "Add" action button
|
|
275
291
|
</main>
|
|
276
292
|
</div>
|
|
293
|
+
</PreviewIsolation>
|
|
277
294
|
);
|
|
278
295
|
}
|
|
279
296
|
|
|
@@ -282,8 +299,9 @@ function SkeletonDemo() {
|
|
|
282
299
|
const [loading, setLoading] = useState(true);
|
|
283
300
|
|
|
284
301
|
return (
|
|
285
|
-
<
|
|
286
|
-
<
|
|
302
|
+
<PreviewIsolation>
|
|
303
|
+
<div style={demoContainerStyle}>
|
|
304
|
+
<Sidebar>
|
|
287
305
|
<Sidebar.Header collapsedContent={<LogoIcon size={32} />}>
|
|
288
306
|
<LogoIcon size={32} />
|
|
289
307
|
<span style={{ fontWeight: 600, fontSize: '16px' }}>Acme App</span>
|
|
@@ -317,6 +335,7 @@ function SkeletonDemo() {
|
|
|
317
335
|
</div>
|
|
318
336
|
</main>
|
|
319
337
|
</div>
|
|
338
|
+
</PreviewIsolation>
|
|
320
339
|
);
|
|
321
340
|
}
|
|
322
341
|
|
|
@@ -324,8 +343,9 @@ function SkeletonDemo() {
|
|
|
324
343
|
function OffcanvasDemo() {
|
|
325
344
|
const [collapsed, setCollapsed] = useState(true);
|
|
326
345
|
return (
|
|
327
|
-
<
|
|
328
|
-
<
|
|
346
|
+
<SidebarProvider collapsed={collapsed} onCollapsedChange={setCollapsed} collapsible="offcanvas" enableKeyboardShortcut={false}>
|
|
347
|
+
<div style={demoContainerStyle}>
|
|
348
|
+
<Sidebar>
|
|
329
349
|
<Sidebar.Header collapsedContent={<LogoIcon size={32} />}>
|
|
330
350
|
<LogoIcon size={32} />
|
|
331
351
|
<span style={{ fontWeight: 600, fontSize: '16px' }}>Acme App</span>
|
|
@@ -346,6 +366,7 @@ function OffcanvasDemo() {
|
|
|
346
366
|
Offcanvas mode hides sidebar completely. Toggle stays visible to re-open.
|
|
347
367
|
</main>
|
|
348
368
|
</div>
|
|
369
|
+
</SidebarProvider>
|
|
349
370
|
);
|
|
350
371
|
}
|
|
351
372
|
|
|
@@ -354,8 +375,9 @@ function RailDemo() {
|
|
|
354
375
|
const [collapsed, setCollapsed] = useState(false);
|
|
355
376
|
|
|
356
377
|
return (
|
|
357
|
-
<
|
|
358
|
-
<
|
|
378
|
+
<SidebarProvider collapsed={collapsed} onCollapsedChange={setCollapsed} enableKeyboardShortcut={false}>
|
|
379
|
+
<div style={{ ...demoContainerStyle, position: 'relative' }}>
|
|
380
|
+
<Sidebar>
|
|
359
381
|
<Sidebar.Header collapsedContent={<LogoIcon size={32} />}>
|
|
360
382
|
<LogoIcon size={32} />
|
|
361
383
|
<span style={{ fontWeight: 600, fontSize: '16px' }}>Acme App</span>
|
|
@@ -380,6 +402,7 @@ function RailDemo() {
|
|
|
380
402
|
</div>
|
|
381
403
|
</main>
|
|
382
404
|
</div>
|
|
405
|
+
</SidebarProvider>
|
|
383
406
|
);
|
|
384
407
|
}
|
|
385
408
|
|
|
@@ -544,32 +567,34 @@ export default defineFragment({
|
|
|
544
567
|
</Sidebar.Footer>
|
|
545
568
|
</Sidebar>`,
|
|
546
569
|
render: () => (
|
|
547
|
-
<
|
|
548
|
-
<
|
|
549
|
-
<Sidebar
|
|
550
|
-
<LogoIcon size={32} />
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
<Sidebar.
|
|
555
|
-
<Sidebar.
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
<Sidebar.
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
<Sidebar.
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
570
|
+
<PreviewIsolation>
|
|
571
|
+
<div style={demoContainerStyle}>
|
|
572
|
+
<Sidebar>
|
|
573
|
+
<Sidebar.Header collapsedContent={<LogoIcon size={32} />}>
|
|
574
|
+
<LogoIcon size={32} />
|
|
575
|
+
<span style={{ fontWeight: 600, fontSize: '16px' }}>Acme App</span>
|
|
576
|
+
</Sidebar.Header>
|
|
577
|
+
<Sidebar.Nav>
|
|
578
|
+
<Sidebar.Section>
|
|
579
|
+
<Sidebar.Item icon={<HomeIcon />} active>Dashboard</Sidebar.Item>
|
|
580
|
+
<Sidebar.Item icon={<ChartIcon />}>Analytics</Sidebar.Item>
|
|
581
|
+
<Sidebar.Item icon={<UsersIcon />}>Team</Sidebar.Item>
|
|
582
|
+
<Sidebar.Item icon={<FolderIcon />}>Projects</Sidebar.Item>
|
|
583
|
+
</Sidebar.Section>
|
|
584
|
+
<Sidebar.Section label="Settings">
|
|
585
|
+
<Sidebar.Item icon={<GearIcon />}>Preferences</Sidebar.Item>
|
|
586
|
+
<Sidebar.Item icon={<HelpIcon />}>Help</Sidebar.Item>
|
|
587
|
+
</Sidebar.Section>
|
|
588
|
+
</Sidebar.Nav>
|
|
589
|
+
<Sidebar.Footer>
|
|
590
|
+
<Sidebar.CollapseToggle />
|
|
591
|
+
</Sidebar.Footer>
|
|
592
|
+
</Sidebar>
|
|
593
|
+
<main style={mainContentStyle}>
|
|
594
|
+
Dashboard content goes here
|
|
595
|
+
</main>
|
|
596
|
+
</div>
|
|
597
|
+
</PreviewIsolation>
|
|
573
598
|
),
|
|
574
599
|
},
|
|
575
600
|
{
|
|
@@ -612,28 +637,30 @@ export default defineFragment({
|
|
|
612
637
|
</Sidebar.Nav>
|
|
613
638
|
</Sidebar>`,
|
|
614
639
|
render: () => (
|
|
615
|
-
<
|
|
616
|
-
<
|
|
617
|
-
<Sidebar
|
|
618
|
-
<LogoIcon size={32} />
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
<Sidebar.
|
|
623
|
-
<Sidebar.
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
<Sidebar.
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
640
|
+
<PreviewIsolation>
|
|
641
|
+
<div style={demoContainerStyle}>
|
|
642
|
+
<Sidebar>
|
|
643
|
+
<Sidebar.Header collapsedContent={<LogoIcon size={32} />}>
|
|
644
|
+
<LogoIcon size={32} />
|
|
645
|
+
<span style={{ fontWeight: 600, fontSize: '16px' }}>Acme App</span>
|
|
646
|
+
</Sidebar.Header>
|
|
647
|
+
<Sidebar.Nav>
|
|
648
|
+
<Sidebar.Section>
|
|
649
|
+
<Sidebar.Item icon={<HomeIcon />} active>Dashboard</Sidebar.Item>
|
|
650
|
+
<Sidebar.Item icon={<ChartIcon />} badge="3">Analytics</Sidebar.Item>
|
|
651
|
+
<Sidebar.Item icon={<UsersIcon />} badge="12">Team</Sidebar.Item>
|
|
652
|
+
<Sidebar.Item icon={<FolderIcon />}>Projects</Sidebar.Item>
|
|
653
|
+
</Sidebar.Section>
|
|
654
|
+
</Sidebar.Nav>
|
|
655
|
+
<Sidebar.Footer>
|
|
656
|
+
<Sidebar.CollapseToggle />
|
|
657
|
+
</Sidebar.Footer>
|
|
658
|
+
</Sidebar>
|
|
659
|
+
<main style={mainContentStyle}>
|
|
660
|
+
Badges indicate unread items or notifications
|
|
661
|
+
</main>
|
|
662
|
+
</div>
|
|
663
|
+
</PreviewIsolation>
|
|
637
664
|
),
|
|
638
665
|
},
|
|
639
666
|
{
|
|
@@ -683,28 +710,30 @@ export default defineFragment({
|
|
|
683
710
|
</Sidebar.Nav>
|
|
684
711
|
</Sidebar>`,
|
|
685
712
|
render: () => (
|
|
686
|
-
<
|
|
687
|
-
<
|
|
688
|
-
<Sidebar
|
|
689
|
-
<LogoIcon size={32} />
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
<Sidebar.
|
|
694
|
-
<Sidebar.
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
<Sidebar.
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
713
|
+
<PreviewIsolation>
|
|
714
|
+
<div style={demoContainerStyle}>
|
|
715
|
+
<Sidebar>
|
|
716
|
+
<Sidebar.Header collapsedContent={<LogoIcon size={32} />}>
|
|
717
|
+
<LogoIcon size={32} />
|
|
718
|
+
<span style={{ fontWeight: 600, fontSize: '16px' }}>Acme App</span>
|
|
719
|
+
</Sidebar.Header>
|
|
720
|
+
<Sidebar.Nav>
|
|
721
|
+
<Sidebar.Section>
|
|
722
|
+
<Sidebar.Item icon={<HomeIcon />} active>Dashboard</Sidebar.Item>
|
|
723
|
+
<Sidebar.Item icon={<ChartIcon />}>Analytics</Sidebar.Item>
|
|
724
|
+
<Sidebar.Item icon={<UsersIcon />} disabled>Team (Coming Soon)</Sidebar.Item>
|
|
725
|
+
<Sidebar.Item icon={<FolderIcon />} disabled>Projects (Upgrade)</Sidebar.Item>
|
|
726
|
+
</Sidebar.Section>
|
|
727
|
+
</Sidebar.Nav>
|
|
728
|
+
<Sidebar.Footer>
|
|
729
|
+
<Sidebar.CollapseToggle />
|
|
730
|
+
</Sidebar.Footer>
|
|
731
|
+
</Sidebar>
|
|
732
|
+
<main style={mainContentStyle}>
|
|
733
|
+
Disabled items cannot be clicked
|
|
734
|
+
</main>
|
|
735
|
+
</div>
|
|
736
|
+
</PreviewIsolation>
|
|
708
737
|
),
|
|
709
738
|
},
|
|
710
739
|
{
|