Skip to content

Commit 54e91c2

Browse files
Barata-RibeiroBarata-Ribeiro
committed
refactor(ui): adjust several UI components for improved readability and consistency
- Simplified component definitions by removing unnecessary line breaks and using implicit returns. - Updated type imports to use `ComponentProps` for better type inference. - Reformatted class names for consistency and clarity in the Table and Tooltip components. - Adjusted export statements for clarity and consistency across components.
1 parent caa82bf commit 54e91c2

11 files changed

Lines changed: 1461 additions & 1691 deletions

File tree

‎resources/js/components/ui/breadcrumb.tsx‎

Lines changed: 76 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,109 +1,96 @@
1-
import * as React from "react"
2-
import { Slot } from "@radix-ui/react-slot"
3-
import { ChevronRight, MoreHorizontal } from "lucide-react"
1+
import { Slot } from '@radix-ui/react-slot';
2+
import { ChevronRight, MoreHorizontal } from 'lucide-react';
43

5-
import { cn } from "@/lib/utils"
4+
import { cn } from '@/lib/utils';
5+
import type { ComponentProps } from 'react';
66

7-
function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
8-
return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
7+
function Breadcrumb({ ...props }: ComponentProps<'nav'>) {
8+
return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
99
}
1010

11-
function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
12-
return (
13-
<ol
14-
data-slot="breadcrumb-list"
15-
className={cn(
16-
"text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
17-
className
18-
)}
19-
{...props}
20-
/>
21-
)
11+
function BreadcrumbList({ className, ...props }: ComponentProps<'ol'>) {
12+
return (
13+
<ol
14+
data-slot="breadcrumb-list"
15+
className={cn(
16+
'flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground sm:gap-2.5',
17+
className,
18+
)}
19+
{...props}
20+
/>
21+
);
2222
}
2323

24-
function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
25-
return (
26-
<li
27-
data-slot="breadcrumb-item"
28-
className={cn("inline-flex items-center gap-1.5", className)}
29-
{...props}
30-
/>
31-
)
24+
function BreadcrumbItem({ className, ...props }: ComponentProps<'li'>) {
25+
return <li data-slot="breadcrumb-item" className={cn('inline-flex items-center gap-1.5', className)} {...props} />;
3226
}
3327

3428
function BreadcrumbLink({
35-
asChild,
36-
className,
37-
...props
38-
}: React.ComponentProps<"a"> & {
39-
asChild?: boolean
29+
asChild,
30+
className,
31+
...props
32+
}: ComponentProps<'a'> & {
33+
asChild?: boolean;
4034
}) {
41-
const Comp = asChild ? Slot : "a"
35+
const Comp = asChild ? Slot : 'a';
4236

43-
return (
44-
<Comp
45-
data-slot="breadcrumb-link"
46-
className={cn("hover:text-foreground transition-colors", className)}
47-
{...props}
48-
/>
49-
)
37+
return (
38+
<Comp
39+
data-slot="breadcrumb-link"
40+
className={cn('transition-colors hover:text-foreground', className)}
41+
{...props}
42+
/>
43+
);
5044
}
5145

52-
function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
53-
return (
54-
<span
55-
data-slot="breadcrumb-page"
56-
role="link"
57-
aria-disabled="true"
58-
aria-current="page"
59-
className={cn("text-foreground font-normal", className)}
60-
{...props}
61-
/>
62-
)
46+
function BreadcrumbPage({ className, ...props }: ComponentProps<'span'>) {
47+
return (
48+
<span
49+
data-slot="breadcrumb-page"
50+
role="link"
51+
aria-disabled="true"
52+
aria-current="page"
53+
className={cn('font-normal text-foreground', className)}
54+
{...props}
55+
/>
56+
);
6357
}
6458

65-
function BreadcrumbSeparator({
66-
children,
67-
className,
68-
...props
69-
}: React.ComponentProps<"li">) {
70-
return (
71-
<li
72-
data-slot="breadcrumb-separator"
73-
role="presentation"
74-
aria-hidden="true"
75-
className={cn("[&>svg]:size-3.5", className)}
76-
{...props}
77-
>
78-
{children ?? <ChevronRight />}
79-
</li>
80-
)
59+
function BreadcrumbSeparator({ children, className, ...props }: ComponentProps<'li'>) {
60+
return (
61+
<li
62+
data-slot="breadcrumb-separator"
63+
role="presentation"
64+
aria-hidden="true"
65+
className={cn('[&>svg]:size-3.5', className)}
66+
{...props}
67+
>
68+
{children ?? <ChevronRight />}
69+
</li>
70+
);
8171
}
8272

83-
function BreadcrumbEllipsis({
84-
className,
85-
...props
86-
}: React.ComponentProps<"span">) {
87-
return (
88-
<span
89-
data-slot="breadcrumb-ellipsis"
90-
role="presentation"
91-
aria-hidden="true"
92-
className={cn("flex size-9 items-center justify-center", className)}
93-
{...props}
94-
>
95-
<MoreHorizontal className="size-4" />
96-
<span className="sr-only">More</span>
97-
</span>
98-
)
73+
function BreadcrumbEllipsis({ className, ...props }: ComponentProps<'span'>) {
74+
return (
75+
<span
76+
data-slot="breadcrumb-ellipsis"
77+
role="presentation"
78+
aria-hidden="true"
79+
className={cn('flex size-9 items-center justify-center', className)}
80+
{...props}
81+
>
82+
<MoreHorizontal className="size-4" />
83+
<span className="sr-only">More</span>
84+
</span>
85+
);
9986
}
10087

10188
export {
102-
Breadcrumb,
103-
BreadcrumbList,
104-
BreadcrumbItem,
105-
BreadcrumbLink,
106-
BreadcrumbPage,
107-
BreadcrumbSeparator,
108-
BreadcrumbEllipsis,
109-
}
89+
Breadcrumb,
90+
BreadcrumbEllipsis,
91+
BreadcrumbItem,
92+
BreadcrumbLink,
93+
BreadcrumbList,
94+
BreadcrumbPage,
95+
BreadcrumbSeparator,
96+
};

‎resources/js/components/ui/checkbox.tsx‎

Lines changed: 23 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,27 @@
1-
import * as React from "react"
2-
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
3-
import { CheckIcon } from "lucide-react"
1+
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
2+
import { CheckIcon } from 'lucide-react';
3+
import * as React from 'react';
44

5-
import { cn } from "@/lib/utils"
5+
import { cn } from '@/lib/utils';
66

7-
function Checkbox({
8-
className,
9-
...props
10-
}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
11-
return (
12-
<CheckboxPrimitive.Root
13-
data-slot="checkbox"
14-
className={cn(
15-
"peer border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
16-
className
17-
)}
18-
{...props}
19-
>
20-
<CheckboxPrimitive.Indicator
21-
data-slot="checkbox-indicator"
22-
className="flex items-center justify-center text-current transition-none"
23-
>
24-
<CheckIcon className="size-3.5" />
25-
</CheckboxPrimitive.Indicator>
26-
</CheckboxPrimitive.Root>
27-
)
7+
function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
8+
return (
9+
<CheckboxPrimitive.Root
10+
data-slot="checkbox"
11+
className={cn(
12+
'peer size-4 shrink-0 rounded-lg border border-input shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:aria-invalid:ring-destructive/40',
13+
className,
14+
)}
15+
{...props}
16+
>
17+
<CheckboxPrimitive.Indicator
18+
data-slot="checkbox-indicator"
19+
className="flex items-center justify-center text-current transition-none"
20+
>
21+
<CheckIcon className="size-3.5" />
22+
</CheckboxPrimitive.Indicator>
23+
</CheckboxPrimitive.Root>
24+
);
2825
}
2926

30-
export { Checkbox }
27+
export { Checkbox };

‎resources/js/components/ui/command.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ function CommandDialog({
3838
<DialogDescription>{description}</DialogDescription>
3939
</DialogHeader>
4040
<DialogContent className={cn('overflow-hidden p-0', className)} showCloseButton={showCloseButton}>
41-
<Command className="**:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
41+
<Command className="**:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground **:[[cmdk-group]]:px-2 **:[[cmdk-input]]:h-12 **:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-3">
4242
{children}
4343
</Command>
4444
</DialogContent>
@@ -81,7 +81,7 @@ function CommandGroup({ className, ...props }: ComponentProps<typeof CommandPrim
8181
<CommandPrimitive.Group
8282
data-slot="command-group"
8383
className={cn(
84-
'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',
84+
'overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground',
8585
className,
8686
)}
8787
{...props}

0 commit comments

Comments
 (0)