Skip to content

Commit 580f7dc

Browse files
tanerengiiintanerengiiin
committed
refactor: format fixes
1 parent 53a1305 commit 580f7dc

5 files changed

Lines changed: 710 additions & 0 deletions

File tree

‎apps/showcase/app/(app)/dialog/dialog-c.tsx‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import { usePresence } from '@primereact/hooks';
2+
import * as React from 'react';
3+
4+
interface DialogContextProps {}
5+
6+
const DialogContext = React.createContext<DialogContextProps | undefined>(undefined);
7+
8+
const useDialog = () => {
9+
const context = React.useContext(DialogContext);
10+
if (!context) {
11+
throw new Error('Dialog components should be used within DialogRoot');
12+
}
13+
return context;
14+
};
15+
function DialogRoot({ children }: { children: React.ReactNode }) {
16+
const [open, setOpen] = React.useState(false);
17+
18+
function toggle() {
19+
setOpen((prev) => !prev);
20+
}
21+
22+
return (
23+
<DialogContext.Provider
24+
value={{
25+
open,
26+
setOpen,
27+
toggle
28+
}}
29+
>
30+
{children}
31+
</DialogContext.Provider>
32+
);
33+
}
34+
35+
function DialogPopup() {
36+
const { open } = useDialog();
37+
38+
const { present, exiting, mounted, ref } = usePresence(open);
39+
40+
const isVisible = present && mounted && !exiting;
41+
42+
if (!present) {
43+
return null;
44+
}
45+
46+
return (
47+
<div
48+
ref={ref}
49+
className={`max-h-[90%] w-90 h-90 max-w-screen rounded-xl flex flex-col
50+
fixed z-50 border border-surface-200 dark:border-surface-700
51+
bg-surface-0 dark:bg-surface-900
52+
text-surface-700 dark:text-surface-0 shadow-lg
53+
data-maximized:w-screen! data-maximized:h-screen data-maximized:top-0 data-maximized:translate-0 data-maximized:inset-0 data-maximized:max-h-full data-maximized:rounded-none
54+
data-enter-from:opacity-0 data-enter-from:scale-[0]
55+
data-leave-to:opacity-0 data-leave-to:scale-[0]
56+
${isVisible ? 'opacity-100 scale-100' : 'opacity-0 scale-0'}
57+
transition-all duration-[3s] ease-out
58+
top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2
59+
data-[position=top]:top-4 data-[position=top]:left-1/2 data-[position=top]:-translate-x-1/2
60+
data-[position=bottom]:bottom-4 data-[position=bottom]:left-1/2 data-[position=bottom]:-translate-x-1/2
61+
data-[position=left]:top-1/2 data-[position=left]:left-4 data-[position=left]:-translate-y-1/2
62+
data-[position=right]:top-1/2 data-[position=right]:right-4 data-[position=right]:-translate-y-1/2
63+
data-[position=topleft]:top-4 data-[position=topleft]:left-4
64+
data-[position=topright]:top-4 data-[position=topright]:right-4
65+
data-[position=bottomleft]:bottom-4 data-[position=bottomleft]:left-4
66+
data-[position=bottomright]:bottom-4 data-[position=bottomright]:right-4
67+
`}
68+
></div>
69+
);
70+
}
71+
72+
function DialogBackdrop() {
73+
const { open } = useDialog();
74+
75+
const { present, exiting, mounted, ref } = usePresence(open);
76+
77+
const isVisible = present && mounted && !exiting;
78+
79+
if (!present) {
80+
return null;
81+
}
82+
return <div ref={ref} className={`fixed z-50 inset-0 bg-black/50 data-enter-from:opacity-0 data-leave-to:opacity-0 ${isVisible ? 'opacity-100' : 'opacity-0'} transition-opacity duration-[5s] ease-out`}></div>;
83+
}
84+
85+
function DialogTrigger({ ...props }: React.ComponentPropsWithoutRef<'button'>) {
86+
const { toggle } = useDialog();
87+
return <button onClick={toggle} {...props} />;
88+
}
89+
90+
export { DialogBackdrop, DialogPopup, DialogRoot, DialogTrigger };

‎apps/showcase/app/(app)/dialog/dialog.tsx‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
import * as React from 'react';
2+
import { useMotion } from '../../../../../packages/@primereact/core/src/motion/useMotion';
3+
4+
interface DialogContextProps {}
5+
6+
const DialogContext = React.createContext<DialogContextProps | undefined>(undefined);
7+
8+
const useDialog = () => {
9+
const context = React.useContext(DialogContext);
10+
if (!context) {
11+
throw new Error('Dialog components should be used within DialogRoot');
12+
}
13+
return context;
14+
};
15+
function DialogRoot({ children }: { children: React.ReactNode }) {
16+
const [open, setOpen] = React.useState(false);
17+
18+
function toggle() {
19+
setOpen((prev) => !prev);
20+
}
21+
22+
return (
23+
<DialogContext.Provider
24+
value={{
25+
open,
26+
setOpen,
27+
toggle
28+
}}
29+
>
30+
{children}
31+
</DialogContext.Provider>
32+
);
33+
}
34+
35+
function DialogPopup() {
36+
const ref = React.useRef<HTMLDivElement>(null);
37+
const { open } = useDialog();
38+
const motion = useMotion({
39+
visible: open,
40+
elementRef: ref
41+
});
42+
43+
if (!motion.state.rendered) {
44+
return null;
45+
}
46+
return (
47+
<div
48+
ref={ref}
49+
className={`max-h-[90%] w-90 h-90 max-w-screen rounded-xl flex flex-col
50+
fixed z-50 border border-surface-200 dark:border-surface-700
51+
bg-surface-0 dark:bg-surface-900
52+
text-surface-700 dark:text-surface-0 shadow-lg
53+
data-maximized:w-screen! data-maximized:h-screen data-maximized:top-0 data-maximized:translate-0 data-maximized:inset-0 data-maximized:max-h-full data-maximized:rounded-none
54+
data-enter-from:opacity-0 data-enter-from:scale-[0] opacity-100 scale-100
55+
data-leave-to:opacity-0 data-leave-to:scale-[0]
56+
transition-all duration-[3s] ease-out
57+
top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2
58+
data-[position=top]:top-4 data-[position=top]:left-1/2 data-[position=top]:-translate-x-1/2
59+
data-[position=bottom]:bottom-4 data-[position=bottom]:left-1/2 data-[position=bottom]:-translate-x-1/2
60+
data-[position=left]:top-1/2 data-[position=left]:left-4 data-[position=left]:-translate-y-1/2
61+
data-[position=right]:top-1/2 data-[position=right]:right-4 data-[position=right]:-translate-y-1/2
62+
data-[position=topleft]:top-4 data-[position=topleft]:left-4
63+
data-[position=topright]:top-4 data-[position=topright]:right-4
64+
data-[position=bottomleft]:bottom-4 data-[position=bottomleft]:left-4
65+
data-[position=bottomright]:bottom-4 data-[position=bottomright]:right-4
66+
`}
67+
></div>
68+
);
69+
}
70+
71+
function DialogBackdrop() {
72+
const ref = React.useRef<HTMLDivElement>(null);
73+
const { open } = useDialog();
74+
75+
const motion = useMotion({
76+
visible: open,
77+
elementRef: ref
78+
});
79+
80+
if (!motion.state.rendered) {
81+
return null;
82+
}
83+
return <div ref={ref} className="fixed z-50 inset-0 bg-black/50 opacity-100 data-enter-from:opacity-0 data-leave-to:opacity-0 transition-opacity duration-[5s] ease-out"></div>;
84+
}
85+
86+
function DialogTrigger({ ...props }: React.ComponentPropsWithoutRef<'button'>) {
87+
const { toggle } = useDialog();
88+
return <button onClick={toggle} {...props} />;
89+
}
90+
91+
export { DialogBackdrop, DialogPopup, DialogRoot, DialogTrigger };

‎apps/showcase/app/(app)/dialog/page.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
'use client';
2+
import { Portal } from 'primereact/portal';
3+
import { DialogBackdrop, DialogPopup, DialogRoot, DialogTrigger } from './dialog';
4+
5+
export default function DialogPage() {
6+
return (
7+
<div>
8+
<DialogRoot>
9+
<DialogTrigger>Open Dialog</DialogTrigger>
10+
<Portal>
11+
<DialogBackdrop></DialogBackdrop>
12+
<DialogPopup></DialogPopup>
13+
</Portal>
14+
</DialogRoot>
15+
</div>
16+
);
17+
}

‎apps/showcase/app/(app)/sidebar/page.tsx‎

Lines changed: 187 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,187 @@
1+
'use client';
2+
3+
import { Bell, Calendar, ChartBar, CreditCard, EllipsisV, Folder, Home, Inbox, Search, ShoppingCart, Sparkles, Star, Users } from '@primeicons/react';
4+
import { Sidebar } from './sidebar';
5+
6+
export default function SidebarPage() {
7+
return (
8+
<div className="relative my-20 max-w-3xl w-full mx-auto border border-surface-200 dark:border-surface-700 rounded-lg overflow-hidden">
9+
<Sidebar.Manager className="min-h-[50vh] ">
10+
<Sidebar.HoverArea />
11+
<Sidebar.Root className="h-[50vh]">
12+
<Sidebar.Rail />
13+
<Sidebar.Header>
14+
<Sidebar.Menu>
15+
<Sidebar.MenuItem>
16+
<Sidebar.MenuButton tooltip="Acme Inc" className="h-auto! p-0 group-data-[collapsible=icon]:p-0! ">
17+
<div className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-blue-600 text-surface-50">
18+
<Sparkles className="size-3" />
19+
</div>
20+
<span className="font-semibold text-base">Acme Inc</span>
21+
</Sidebar.MenuButton>
22+
<Sidebar.MenuAction showOnHover>
23+
<EllipsisV />
24+
</Sidebar.MenuAction>
25+
</Sidebar.MenuItem>
26+
</Sidebar.Menu>
27+
</Sidebar.Header>
28+
29+
<Sidebar.Content>
30+
{/* Main Navigation */}
31+
<Sidebar.Group>
32+
<Sidebar.GroupLabel>Navigation</Sidebar.GroupLabel>
33+
<Sidebar.GroupContent>
34+
<Sidebar.Menu>
35+
<Sidebar.MenuItem>
36+
<Sidebar.MenuButton isActive tooltip="Home">
37+
<Home />
38+
<span>Home</span>
39+
</Sidebar.MenuButton>
40+
<Sidebar.MenuAction showOnHover>
41+
<EllipsisV />
42+
</Sidebar.MenuAction>
43+
</Sidebar.MenuItem>
44+
<Sidebar.MenuItem>
45+
<Sidebar.MenuButton tooltip="Inbox">
46+
<Inbox />
47+
<span>Inbox</span>
48+
<span className="ml-auto rounded-full bg-neutral-900 px-1.5 py-0.5 text-xs text-neutral-50 group-data-[collapsible=icon]:hidden">12</span>
49+
</Sidebar.MenuButton>
50+
<Sidebar.MenuAction showOnHover>
51+
<EllipsisV />
52+
</Sidebar.MenuAction>
53+
</Sidebar.MenuItem>
54+
<Sidebar.MenuItem>
55+
<Sidebar.MenuButton tooltip="Search">
56+
<Search />
57+
<span>Search</span>
58+
</Sidebar.MenuButton>
59+
<Sidebar.MenuAction showOnHover>
60+
<EllipsisV />
61+
</Sidebar.MenuAction>
62+
</Sidebar.MenuItem>
63+
<Sidebar.MenuItem>
64+
<Sidebar.MenuButton tooltip="Notifications">
65+
<Bell />
66+
<span>Notifications</span>
67+
<span className="ml-auto rounded-full bg-neutral-900 px-1.5 py-0.5 text-xs text-neutral-50 group-data-[collapsible=icon]:hidden">3</span>
68+
</Sidebar.MenuButton>
69+
<Sidebar.MenuAction showOnHover>
70+
<EllipsisV />
71+
</Sidebar.MenuAction>
72+
</Sidebar.MenuItem>
73+
</Sidebar.Menu>
74+
</Sidebar.GroupContent>
75+
</Sidebar.Group>
76+
77+
{/* Projects */}
78+
<Sidebar.Group>
79+
<Sidebar.GroupLabel>Projects</Sidebar.GroupLabel>
80+
<Sidebar.GroupContent>
81+
<Sidebar.Menu>
82+
<Sidebar.MenuItem>
83+
<Sidebar.MenuButton tooltip="Analytics">
84+
<ChartBar />
85+
<span>Analytics</span>
86+
</Sidebar.MenuButton>
87+
<Sidebar.MenuAction showOnHover>
88+
<EllipsisV />
89+
</Sidebar.MenuAction>
90+
</Sidebar.MenuItem>
91+
<Sidebar.MenuItem>
92+
<Sidebar.MenuButton tooltip="Team">
93+
<Users />
94+
<span>Team</span>
95+
</Sidebar.MenuButton>
96+
<Sidebar.MenuAction showOnHover>
97+
<EllipsisV />
98+
</Sidebar.MenuAction>
99+
</Sidebar.MenuItem>
100+
<Sidebar.MenuItem>
101+
<Sidebar.MenuButton tooltip="Calendar">
102+
<Calendar />
103+
<span>Calendar</span>
104+
</Sidebar.MenuButton>
105+
<Sidebar.MenuAction showOnHover>
106+
<EllipsisV />
107+
</Sidebar.MenuAction>
108+
</Sidebar.MenuItem>
109+
<Sidebar.MenuItem>
110+
<Sidebar.MenuButton tooltip="Documents">
111+
<Folder />
112+
<span>Documents</span>
113+
</Sidebar.MenuButton>
114+
<Sidebar.MenuAction showOnHover>
115+
<EllipsisV />
116+
</Sidebar.MenuAction>
117+
</Sidebar.MenuItem>
118+
</Sidebar.Menu>
119+
</Sidebar.GroupContent>
120+
</Sidebar.Group>
121+
122+
{/* Billing */}
123+
<Sidebar.Group>
124+
<Sidebar.GroupLabel>Billing</Sidebar.GroupLabel>
125+
<Sidebar.GroupContent>
126+
<Sidebar.Menu>
127+
<Sidebar.MenuItem>
128+
<Sidebar.MenuButton tooltip="Payments">
129+
<CreditCard />
130+
<span>Payments</span>
131+
</Sidebar.MenuButton>
132+
<Sidebar.MenuAction showOnHover>
133+
<EllipsisV />
134+
</Sidebar.MenuAction>
135+
</Sidebar.MenuItem>
136+
<Sidebar.MenuItem>
137+
<Sidebar.MenuButton tooltip="Orders">
138+
<ShoppingCart />
139+
<span>Orders</span>
140+
</Sidebar.MenuButton>
141+
<Sidebar.MenuAction showOnHover>
142+
<EllipsisV />
143+
</Sidebar.MenuAction>
144+
</Sidebar.MenuItem>
145+
<Sidebar.MenuItem>
146+
<Sidebar.MenuButton tooltip="Subscriptions">
147+
<Star />
148+
<span>Subscriptions</span>
149+
</Sidebar.MenuButton>
150+
<Sidebar.MenuAction showOnHover>
151+
<EllipsisV />
152+
</Sidebar.MenuAction>
153+
</Sidebar.MenuItem>
154+
</Sidebar.Menu>
155+
</Sidebar.GroupContent>
156+
</Sidebar.Group>
157+
</Sidebar.Content>
158+
159+
<Sidebar.Footer>
160+
<Sidebar.Menu>
161+
<Sidebar.MenuItem>
162+
<Sidebar.MenuButton tooltip="John Doe" className="h-auto! p-0 group-data-[collapsible=icon]:p-0!">
163+
<div className="flex size-8 shrink-0 items-center justify-center rounded-full bg-surface-200 dark:bg-surface-800 text-xs font-medium">JD</div>
164+
<span>John Doe</span>
165+
</Sidebar.MenuButton>
166+
<Sidebar.MenuAction showOnHover>
167+
<EllipsisV />
168+
</Sidebar.MenuAction>
169+
</Sidebar.MenuItem>
170+
</Sidebar.Menu>
171+
</Sidebar.Footer>
172+
</Sidebar.Root>
173+
174+
<Sidebar.Inset>
175+
<header className="flex h-12 items-center gap-2 border-b border-surface-200 dark:border-surface-700 px-4">
176+
<Sidebar.Trigger />
177+
<span className="text-sm font-medium">Dashboard</span>
178+
</header>
179+
<div className="flex-1 p-6">
180+
<h1 className="text-2xl font-bold mb-4">Welcome back, John</h1>
181+
<p className="text-muted-color">Select an item from the sidebar to get started.</p>
182+
</div>
183+
</Sidebar.Inset>
184+
</Sidebar.Manager>
185+
</div>
186+
);
187+
}

0 commit comments

Comments
 (0)