Skip to content

Commit c6d07d0

Browse files
tanerengiiintanerengiiin
committed
refactor: refactor Dialog with draggable support and motion, remove Backdrop, improve Sidebar types
1 parent 4f36c0e commit c6d07d0

66 files changed

Lines changed: 2112 additions & 751 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎apps/showcase/demo/primitive/backdrop/basic-demo.module.css‎

Lines changed: 0 additions & 84 deletions
This file was deleted.

‎apps/showcase/demo/primitive/backdrop/basic-demo.tsx‎

Lines changed: 0 additions & 29 deletions
This file was deleted.

‎apps/showcase/demo/styled/dialog/preview.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ export default function Preview() {
1212
<Dialog.Root>
1313
<Dialog.Trigger as={Button}>Edit Profile</Dialog.Trigger>
1414
<Dialog.Portal>
15-
<Dialog.Backdrop />
1615
<Dialog.Popup style={{ width: '28rem' }}>
1716
<Dialog.Header>
1817
<Dialog.Title>Edit Profile</Dialog.Title>

‎apps/showcase/demo/styled/sidebar/nested-demo.tsx‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
'use client';
2+
import { ChevronDown, Folder, Globe, Image, Sidebar as SidebarIcon, Video } from '@primeicons/react';
3+
import { Avatar } from '@primereact/ui/avatar';
4+
import { Button } from '@primereact/ui/button';
5+
import { Sidebar } from '@primereact/ui/sidebar';
6+
7+
type MenuItem = {
8+
label: string;
9+
icon?: React.FC<any>;
10+
isActive?: boolean;
11+
children?: MenuItem[];
12+
};
13+
14+
const fileTree: MenuItem[] = [
15+
{
16+
label: 'Documents',
17+
icon: Folder,
18+
children: [
19+
{
20+
label: 'Work',
21+
children: [
22+
{
23+
label: 'Projects',
24+
children: [{ label: 'Q1 Report', isActive: true }, { label: 'Q2 Report' }, { label: 'Roadmap' }]
25+
},
26+
{ label: 'Invoices' },
27+
{ label: 'Contracts' }
28+
]
29+
},
30+
{
31+
label: 'Personal',
32+
children: [{ label: 'Recipes' }, { label: 'Travel' }]
33+
}
34+
]
35+
},
36+
{
37+
label: 'Media',
38+
icon: Image,
39+
children: [
40+
{
41+
label: 'Photos',
42+
children: [{ label: '2024' }, { label: '2025' }]
43+
},
44+
{
45+
label: 'Videos',
46+
icon: Video,
47+
children: [{ label: 'Tutorials' }, { label: 'Recordings' }]
48+
}
49+
]
50+
},
51+
{
52+
label: 'Websites',
53+
icon: Globe,
54+
children: [{ label: 'Blog' }, { label: 'Portfolio' }, { label: 'Documentation' }]
55+
}
56+
];
57+
58+
function renderMenuItems(items: MenuItem[]) {
59+
return items.map((item) =>
60+
item.children ? (
61+
<Sidebar.MenuItem key={item.label} collapsible defaultOpen={hasActiveChild(item)}>
62+
<Sidebar.MenuButton tooltip={item.label}>
63+
{item.icon && <item.icon />}
64+
<span>{item.label}</span>
65+
<ChevronDown className="ml-auto transition-transform duration-200 [[data-open]>&]:rotate-180" />
66+
</Sidebar.MenuButton>
67+
<Sidebar.MenuSub>{renderMenuItems(item.children)}</Sidebar.MenuSub>
68+
</Sidebar.MenuItem>
69+
) : (
70+
<Sidebar.MenuSubItem key={item.label}>
71+
<Sidebar.MenuSubButton isActive={item.isActive}>
72+
<span>{item.label}</span>
73+
</Sidebar.MenuSubButton>
74+
</Sidebar.MenuSubItem>
75+
)
76+
);
77+
}
78+
79+
function hasActiveChild(item: MenuItem): boolean {
80+
if (item.isActive) return true;
81+
82+
return item.children?.some(hasActiveChild) ?? false;
83+
}
84+
85+
export default function NestedDemo() {
86+
return (
87+
<div className="border border-surface-200 dark:border-surface-700 rounded-lg overflow-hidden">
88+
<Sidebar.Layout className="min-h-112 relative!">
89+
<Sidebar.Root id="nested" collapsible="icon" className="h-112">
90+
<Sidebar.Spacer />
91+
<Sidebar.Panel>
92+
<Sidebar.Body>
93+
<Sidebar.Header>
94+
<Sidebar.Menu>
95+
<Sidebar.MenuItem>
96+
<Sidebar.MenuButton className="p-1!">
97+
<div className="flex size-6 shrink-0 items-center justify-center rounded-md bg-linear-to-br from-emerald-500 to-teal-600 text-white text-xs font-bold leading-none">
98+
F
99+
</div>
100+
<span className="font-semibold text-sm">File Manager</span>
101+
</Sidebar.MenuButton>
102+
</Sidebar.MenuItem>
103+
</Sidebar.Menu>
104+
</Sidebar.Header>
105+
106+
<Sidebar.Content>
107+
<Sidebar.Group>
108+
<Sidebar.GroupLabel>Files</Sidebar.GroupLabel>
109+
<Sidebar.GroupContent>
110+
<Sidebar.Menu>{renderMenuItems(fileTree)}</Sidebar.Menu>
111+
</Sidebar.GroupContent>
112+
</Sidebar.Group>
113+
</Sidebar.Content>
114+
115+
<Sidebar.Footer>
116+
<Sidebar.Menu>
117+
<Sidebar.MenuItem>
118+
<Sidebar.MenuButton tooltip="John Doe" className="p-1!">
119+
<Avatar.Root className="size-6 shrink-0 text-xs" shape="circle">
120+
<Avatar.Fallback>JD</Avatar.Fallback>
121+
</Avatar.Root>
122+
<span>John Doe</span>
123+
</Sidebar.MenuButton>
124+
</Sidebar.MenuItem>
125+
</Sidebar.Menu>
126+
</Sidebar.Footer>
127+
<Sidebar.Rail />
128+
</Sidebar.Body>
129+
</Sidebar.Panel>
130+
</Sidebar.Root>
131+
132+
<Sidebar.Inset>
133+
<header className="flex h-12 items-center gap-2 border-b border-surface-200 dark:border-surface-700 px-4">
134+
<Sidebar.Trigger as={Button} severity="secondary" variant="text" size="small" iconOnly>
135+
<SidebarIcon />
136+
</Sidebar.Trigger>
137+
<span className="text-sm font-medium">File Manager</span>
138+
</header>
139+
<div className="flex-1 p-6">
140+
<h1 className="text-2xl font-bold mb-4">Q1 Report</h1>
141+
<p className="text-muted-color">Documents &gt; Work &gt; Projects &gt; Q1 Report</p>
142+
</div>
143+
</Sidebar.Inset>
144+
</Sidebar.Layout>
145+
</div>
146+
);
147+
}

‎apps/showcase/demo/tailwind/dialog/position-demo.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
'use client';
2-
import { ArrowDown, ArrowDownLeft, ArrowDownRight, ArrowLeft, ArrowRight, ArrowUp, ArrowUpLeft, ArrowUpRight, Times } from '@primeicons/react';
3-
import { DialogRootChangeEvent, DialogRootProps } from 'primereact/dialog';
42
import { Button } from '@/components/ui/button';
53
import {
64
Dialog,
@@ -15,6 +13,8 @@ import {
1513
} from '@/components/ui/dialog';
1614
import { InputText } from '@/components/ui/inputtext';
1715
import { Label } from '@/components/ui/label';
16+
import { ArrowDown, ArrowDownLeft, ArrowDownRight, ArrowLeft, ArrowRight, ArrowUp, ArrowUpLeft, ArrowUpRight, Times } from '@primeicons/react';
17+
import { DialogRootChangeEvent, DialogRootProps } from 'primereact/dialog';
1818
import * as React from 'react';
1919

2020
export default function PositionDemo() {
@@ -66,7 +66,7 @@ export default function PositionDemo() {
6666
<ArrowUpLeft />
6767
</Button>
6868
</div>
69-
<Dialog open={open} onOpenChange={(e: DialogRootChangeEvent) => setOpen(e.value as boolean)} position={position} draggable={false}>
69+
<Dialog open={open} onOpenChange={(e: DialogRootChangeEvent) => setOpen(e.value as boolean)} position={position}>
7070
<DialogPortal>
7171
<DialogBackdrop />
7272
<DialogPopup style={{ width: '25rem' }}>

‎apps/showcase/demo/tailwind/dialog/preview.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
'use client';
2-
import { Times } from '@primeicons/react';
32
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
43
import { Button } from '@/components/ui/button';
54
import {
@@ -16,11 +15,12 @@ import {
1615
} from '@/components/ui/dialog';
1716
import { InputText } from '@/components/ui/inputtext';
1817
import { Label } from '@/components/ui/label';
18+
import { Times } from '@primeicons/react';
1919

2020
export default function Preview() {
2121
return (
2222
<div className="flex justify-center">
23-
<Dialog>
23+
<Dialog draggable>
2424
<DialogTrigger as={Button}>Edit Profile</DialogTrigger>
2525
<DialogPortal>
2626
<DialogBackdrop />

0 commit comments

Comments
 (0)