Skip to content

Commit 8e9a916

Browse files
tanerengiiintanerengiiin
committed
refactor: format fixes
1 parent 580f7dc commit 8e9a916

File tree

39 files changed

+939
-767
lines changed

39 files changed

+939
-767
lines changed

‎apps/showcase/demo/headless/dialog/basic-demo.tsx‎

Lines changed: 57 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -51,69 +51,69 @@ export default function BasicDemo() {
5151
<div className="fixed inset-0 z-1100">
5252
{backdropMotion.state.rendered && <div {...backdropProps} ref={backdropRef} className="fixed inset-0 bg-black/50" />}
5353
<div {...positionerProps} className="fixed inset-0 flex items-center justify-center p-8 pointer-events-none">
54-
{popupMotion.state.rendered && (
55-
<div
56-
{...popupProps}
57-
ref={popupRef}
58-
className="w-[28rem] max-w-[90vw] max-h-full bg-surface-0 dark:bg-surface-900 rounded-xl shadow-2xl flex flex-col border border-surface-200 dark:border-surface-700 pointer-events-auto"
59-
>
60-
<div {...headerProps} className="flex items-center justify-between p-5">
61-
<span className="text-lg font-semibold">Edit Profile</span>
62-
<button
63-
{...closeProps}
64-
className="inline-flex items-center justify-center w-8 h-8 rounded-full cursor-pointer hover:bg-surface-100 dark:hover:bg-surface-800 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary transition"
65-
>
66-
<Times />
67-
</button>
68-
</div>
69-
<div {...contentProps} className="px-5 pb-5 flex flex-col gap-4 overflow-y-auto">
70-
<div className="flex flex-col gap-1">
71-
<label htmlFor="name" className="text-sm font-semibold">
72-
Name
73-
</label>
74-
<input
75-
id="name"
76-
defaultValue="Amanda Miller"
77-
className="w-full px-3 py-2 border border-surface-200 dark:border-surface-700 rounded-lg bg-transparent text-sm focus:outline focus:outline-1 focus:outline-primary"
78-
/>
79-
</div>
80-
<div className="flex flex-col gap-1">
81-
<label htmlFor="username" className="text-sm font-semibold">
82-
Username
83-
</label>
84-
<input
85-
id="username"
86-
defaultValue="@amandamiller"
87-
className="w-full px-3 py-2 border border-surface-200 dark:border-surface-700 rounded-lg bg-transparent text-sm focus:outline focus:outline-1 focus:outline-primary"
88-
/>
89-
</div>
90-
<div className="flex flex-col gap-1">
91-
<label htmlFor="email" className="text-sm font-semibold">
92-
Email
93-
</label>
94-
<input
95-
id="email"
96-
defaultValue="amanda@example.com"
97-
className="w-full px-3 py-2 border border-surface-200 dark:border-surface-700 rounded-lg bg-transparent text-sm focus:outline focus:outline-1 focus:outline-primary"
98-
/>
99-
</div>
100-
<div className="flex justify-end gap-2 mt-2">
54+
{popupMotion.state.rendered && (
55+
<div
56+
{...popupProps}
57+
ref={popupRef}
58+
className="w-[28rem] max-w-[90vw] max-h-full bg-surface-0 dark:bg-surface-900 rounded-xl shadow-2xl flex flex-col border border-surface-200 dark:border-surface-700 pointer-events-auto"
59+
>
60+
<div {...headerProps} className="flex items-center justify-between p-5">
61+
<span className="text-lg font-semibold">Edit Profile</span>
10162
<button
10263
{...closeProps}
103-
className="px-4 py-2 rounded-lg border border-surface-200 dark:border-surface-700 bg-transparent text-sm font-medium cursor-pointer hover:bg-surface-50 dark:hover:bg-surface-800 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary transition"
64+
className="inline-flex items-center justify-center w-8 h-8 rounded-full cursor-pointer hover:bg-surface-100 dark:hover:bg-surface-800 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary transition"
10465
>
105-
Cancel
106-
</button>
107-
<button
108-
{...closeProps}
109-
className="px-4 py-2 rounded-lg bg-primary text-primary-contrast text-sm font-medium cursor-pointer hover:bg-primary-emphasis focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary transition"
110-
>
111-
Save Changes
66+
<Times />
11267
</button>
11368
</div>
69+
<div {...contentProps} className="px-5 pb-5 flex flex-col gap-4 overflow-y-auto">
70+
<div className="flex flex-col gap-1">
71+
<label htmlFor="name" className="text-sm font-semibold">
72+
Name
73+
</label>
74+
<input
75+
id="name"
76+
defaultValue="Amanda Miller"
77+
className="w-full px-3 py-2 border border-surface-200 dark:border-surface-700 rounded-lg bg-transparent text-sm focus:outline focus:outline-1 focus:outline-primary"
78+
/>
79+
</div>
80+
<div className="flex flex-col gap-1">
81+
<label htmlFor="username" className="text-sm font-semibold">
82+
Username
83+
</label>
84+
<input
85+
id="username"
86+
defaultValue="@amandamiller"
87+
className="w-full px-3 py-2 border border-surface-200 dark:border-surface-700 rounded-lg bg-transparent text-sm focus:outline focus:outline-1 focus:outline-primary"
88+
/>
89+
</div>
90+
<div className="flex flex-col gap-1">
91+
<label htmlFor="email" className="text-sm font-semibold">
92+
Email
93+
</label>
94+
<input
95+
id="email"
96+
defaultValue="amanda@example.com"
97+
className="w-full px-3 py-2 border border-surface-200 dark:border-surface-700 rounded-lg bg-transparent text-sm focus:outline focus:outline-1 focus:outline-primary"
98+
/>
99+
</div>
100+
<div className="flex justify-end gap-2 mt-2">
101+
<button
102+
{...closeProps}
103+
className="px-4 py-2 rounded-lg border border-surface-200 dark:border-surface-700 bg-transparent text-sm font-medium cursor-pointer hover:bg-surface-50 dark:hover:bg-surface-800 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary transition"
104+
>
105+
Cancel
106+
</button>
107+
<button
108+
{...closeProps}
109+
className="px-4 py-2 rounded-lg bg-primary text-primary-contrast text-sm font-medium cursor-pointer hover:bg-primary-emphasis focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary transition"
110+
>
111+
Save Changes
112+
</button>
113+
</div>
114+
</div>
114115
</div>
115-
</div>
116-
)}
116+
)}
117117
</div>
118118
</div>,
119119
document.body

‎apps/showcase/demo/headless/orderlist/basic-demo.tsx‎

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -27,23 +27,40 @@ export default function BasicDemo() {
2727
setSelection((prev) => (prev.includes(item) ? prev.filter((s) => s !== item) : [...prev, item]));
2828
};
2929

30-
const btnClassName = 'px-2 py-1 rounded bg-surface-100 dark:bg-surface-800 hover:bg-surface-200 dark:hover:bg-surface-700 text-sm disabled:opacity-50';
30+
const btnClassName =
31+
'px-2 py-1 rounded bg-surface-100 dark:bg-surface-800 hover:bg-surface-200 dark:hover:bg-surface-700 text-sm disabled:opacity-50';
3132
const hasSelection = selection.length > 0;
3233

3334
return (
3435
<div className="flex justify-center">
3536
<div className="flex gap-2 w-full max-w-xs">
3637
<div {...orderList.controlsProps} className="flex flex-col gap-1">
37-
<button onClick={orderList.firstProps.onClick as React.MouseEventHandler} disabled={!hasSelection || undefined} className={btnClassName}>
38+
<button
39+
onClick={orderList.firstProps.onClick as React.MouseEventHandler}
40+
disabled={!hasSelection || undefined}
41+
className={btnClassName}
42+
>
3843
⇈
3944
</button>
40-
<button onClick={orderList.prevProps.onClick as React.MouseEventHandler} disabled={!hasSelection || undefined} className={btnClassName}>
45+
<button
46+
onClick={orderList.prevProps.onClick as React.MouseEventHandler}
47+
disabled={!hasSelection || undefined}
48+
className={btnClassName}
49+
>
4150
↑
4251
</button>
43-
<button onClick={orderList.nextProps.onClick as React.MouseEventHandler} disabled={!hasSelection || undefined} className={btnClassName}>
52+
<button
53+
onClick={orderList.nextProps.onClick as React.MouseEventHandler}
54+
disabled={!hasSelection || undefined}
55+
className={btnClassName}
56+
>
4457
↓
4558
</button>
46-
<button onClick={orderList.lastProps.onClick as React.MouseEventHandler} disabled={!hasSelection || undefined} className={btnClassName}>
59+
<button
60+
onClick={orderList.lastProps.onClick as React.MouseEventHandler}
61+
disabled={!hasSelection || undefined}
62+
className={btnClassName}
63+
>
4764
⇊
4865
</button>
4966
</div>

‎apps/showcase/demo/headless/picklist/basic-demo.tsx‎

Lines changed: 34 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,8 @@ export default function BasicDemo() {
3636
const listClassName = 'flex-1 border border-surface-200 dark:border-surface-700 rounded-lg overflow-hidden min-h-48';
3737
const itemClassName = (item: City) =>
3838
`px-3 py-2 cursor-pointer select-none text-sm border-b border-surface-100 dark:border-surface-800 last:border-b-0 ${selection.includes(item) ? 'bg-primary/10 text-primary' : 'hover:bg-surface-50 dark:hover:bg-surface-900'}`;
39-
const btnClassName = 'px-2 py-1 rounded bg-surface-100 dark:bg-surface-800 hover:bg-surface-200 dark:hover:bg-surface-700 text-sm disabled:opacity-50';
39+
const btnClassName =
40+
'px-2 py-1 rounded bg-surface-100 dark:bg-surface-800 hover:bg-surface-200 dark:hover:bg-surface-700 text-sm disabled:opacity-50';
4041

4142
const hasSourceSelection = selection.some((s) => source.includes(s));
4243
const hasTargetSelection = selection.some((s) => target.includes(s));
@@ -46,28 +47,54 @@ export default function BasicDemo() {
4647
<div {...pickList.rootProps} className="flex gap-3 items-center w-full max-w-lg">
4748
<div {...pickList.sourceListProps} className={listClassName}>
4849
{(pickList.state.source as typeof cities).map((item, i) => (
49-
<div key={item.code} {...pickList.getOptionProps(item, i, 'source')} onClick={() => toggleSelection(item)} className={itemClassName(item)}>
50+
<div
51+
key={item.code}
52+
{...pickList.getOptionProps(item, i, 'source')}
53+
onClick={() => toggleSelection(item)}
54+
className={itemClassName(item)}
55+
>
5056
{item.name}
5157
</div>
5258
))}
5359
</div>
5460
<div className="flex flex-col gap-1">
55-
<button onClick={pickList.moveToTargetProps.onClick as React.MouseEventHandler} disabled={!hasSourceSelection || undefined} className={btnClassName}>
61+
<button
62+
onClick={pickList.moveToTargetProps.onClick as React.MouseEventHandler}
63+
disabled={!hasSourceSelection || undefined}
64+
className={btnClassName}
65+
>
5666
→
5767
</button>
58-
<button onClick={pickList.moveAllToTargetProps.onClick as React.MouseEventHandler} disabled={source.length === 0 || undefined} className={btnClassName}>
68+
<button
69+
onClick={pickList.moveAllToTargetProps.onClick as React.MouseEventHandler}
70+
disabled={source.length === 0 || undefined}
71+
className={btnClassName}
72+
>
5973
⇉
6074
</button>
61-
<button onClick={pickList.moveToSourceProps.onClick as React.MouseEventHandler} disabled={!hasTargetSelection || undefined} className={btnClassName}>
75+
<button
76+
onClick={pickList.moveToSourceProps.onClick as React.MouseEventHandler}
77+
disabled={!hasTargetSelection || undefined}
78+
className={btnClassName}
79+
>
6280
←
6381
</button>
64-
<button onClick={pickList.moveAllToSourceProps.onClick as React.MouseEventHandler} disabled={target.length === 0 || undefined} className={btnClassName}>
82+
<button
83+
onClick={pickList.moveAllToSourceProps.onClick as React.MouseEventHandler}
84+
disabled={target.length === 0 || undefined}
85+
className={btnClassName}
86+
>
6587
⇇
6688
</button>
6789
</div>
6890
<div {...pickList.targetListProps} className={listClassName}>
6991
{(pickList.state.target as typeof cities).map((item, i) => (
70-
<div key={item.code} {...pickList.getOptionProps(item, i, 'target')} onClick={() => toggleSelection(item)} className={itemClassName(item)}>
92+
<div
93+
key={item.code}
94+
{...pickList.getOptionProps(item, i, 'target')}
95+
onClick={() => toggleSelection(item)}
96+
className={itemClassName(item)}
97+
>
7198
{item.name}
7299
</div>
73100
))}

‎apps/showcase/demo/headless/sidebar/basic-demo.module.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,11 @@
1818
border-right: 1px solid light-dark(var(--p-surface-200), var(--p-surface-700));
1919
background: light-dark(var(--p-surface-0), var(--p-surface-950));
2020
color: light-dark(var(--p-surface-700), var(--p-surface-200));
21-
transition: width 250ms cubic-bezier(.4, 0, .2, 1);
21+
transition: width 250ms cubic-bezier(0.4, 0, 0.2, 1);
2222
overflow: hidden;
2323
}
2424

25-
.sidebar[data-state='collapsed'] {
25+
.sidebar[data-state="collapsed"] {
2626
width: 3rem;
2727
}
2828

‎apps/showcase/demo/headless/sidebar/basic-demo.tsx‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,17 @@ const projectItems = [
1717
{ icon: Folder, label: 'Documents', subItems: [{ label: 'Shared' }, { label: 'Private' }] }
1818
];
1919

20-
function CollapsibleMenuItem({ icon: Icon, label, subItems, isOpen }: { icon: React.FC<any>; label: string; subItems: { label: string; isActive?: boolean }[]; isOpen: boolean }) {
20+
function CollapsibleMenuItem({
21+
icon: Icon,
22+
label,
23+
subItems,
24+
isOpen
25+
}: {
26+
icon: React.FC<any>;
27+
label: string;
28+
subItems: { label: string; isActive?: boolean }[];
29+
isOpen: boolean;
30+
}) {
2131
const { state: itemState, triggerProps, contentProps } = useSidebarMenuItem({ collapsible: true, defaultOpen: isOpen });
2232

2333
return (
@@ -71,7 +81,13 @@ function SidebarContent({ layout }: { layout: any }) {
7181
<ul className={styles.menu}>
7282
{projectItems.map((item) =>
7383
item.subItems && state.open ? (
74-
<CollapsibleMenuItem key={item.label} icon={item.icon} label={item.label} subItems={item.subItems} isOpen={item.subItems.some((s) => s.isActive)} />
84+
<CollapsibleMenuItem
85+
key={item.label}
86+
icon={item.icon}
87+
label={item.label}
88+
subItems={item.subItems}
89+
isOpen={item.subItems.some((s) => s.isActive)}
90+
/>
7591
) : (
7692
<li key={item.label} className={styles.menuItem}>
7793
<button className={styles.menuButton}>

0 commit comments

Comments
 (0)