Skip to content

Commit 551d6e9

Browse files
MananTankMananTank
committed
packages/ui: Add breadcrumb, tooltip, table
1 parent 1d1861f commit 551d6e9

File tree

17 files changed

+424
-928
lines changed

17 files changed

+424
-928
lines changed

‎apps/dashboard/knip.json‎

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,22 @@
11
{
2-
"$schema": "https://unpkg.com/knip@5/schema.json",
3-
"ignore": [
4-
"src/@/components/ui/**",
5-
"src/@/components/misc/AnnouncementBanner.tsx",
6-
"src/@/components/cmd-k-search/index.tsx",
7-
"src/@/lib/search.ts"
8-
],
9-
"ignoreBinaries": ["only-allow"],
10-
"ignoreDependencies": [
11-
"@thirdweb-dev/service-utils",
12-
"@thirdweb-dev/vault-sdk",
13-
"thirdweb",
14-
"@types/color",
15-
"fast-xml-parser",
16-
"@workspace/ui",
17-
"tailwindcss-animate"
18-
],
19-
"next": true,
20-
"project": ["src/**"]
2+
"$schema": "https://unpkg.com/knip@5/schema.json",
3+
"ignore": [
4+
"src/@/components/ui/**",
5+
"src/@/components/misc/AnnouncementBanner.tsx",
6+
"src/@/components/cmd-k-search/index.tsx",
7+
"src/@/lib/search.ts"
8+
],
9+
"ignoreBinaries": ["only-allow"],
10+
"ignoreDependencies": [
11+
"@thirdweb-dev/service-utils",
12+
"@thirdweb-dev/vault-sdk",
13+
"thirdweb",
14+
"@types/color",
15+
"fast-xml-parser",
16+
"@workspace/ui",
17+
"tailwindcss-animate",
18+
"@radix-ui/react-tooltip"
19+
],
20+
"next": true,
21+
"project": ["src/**"]
2122
}

‎apps/dashboard/src/@/components/ui/breadcrumb.tsx‎

Lines changed: 3 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -1,119 +1,9 @@
1-
import { Slot } from "@radix-ui/react-slot";
2-
import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
3-
import * as React from "react";
4-
5-
import { cn } from "@/lib/utils";
6-
7-
const Breadcrumb = React.forwardRef<
8-
HTMLElement,
9-
React.ComponentPropsWithoutRef<"nav"> & {
10-
separator?: React.ReactNode;
11-
}
12-
>(({ ...props }, ref) => <nav aria-label="breadcrumb" ref={ref} {...props} />);
13-
Breadcrumb.displayName = "Breadcrumb";
14-
15-
const BreadcrumbList = React.forwardRef<
16-
HTMLOListElement,
17-
React.ComponentPropsWithoutRef<"ol">
18-
>(({ className, ...props }, ref) => (
19-
<ol
20-
className={cn(
21-
"flex flex-wrap items-center gap-1.5 break-words text-muted-foreground text-sm sm:gap-2.5",
22-
className,
23-
)}
24-
ref={ref}
25-
{...props}
26-
/>
27-
));
28-
BreadcrumbList.displayName = "BreadcrumbList";
29-
30-
const BreadcrumbItem = React.forwardRef<
31-
HTMLLIElement,
32-
React.ComponentPropsWithoutRef<"li">
33-
>(({ className, ...props }, ref) => (
34-
<li
35-
className={cn("inline-flex items-center gap-1.5", className)}
36-
ref={ref}
37-
{...props}
38-
/>
39-
));
40-
BreadcrumbItem.displayName = "BreadcrumbItem";
41-
42-
const BreadcrumbLink = React.forwardRef<
43-
HTMLAnchorElement,
44-
React.ComponentPropsWithoutRef<"a"> & {
45-
asChild?: boolean;
46-
}
47-
>(({ asChild, className, ...props }, ref) => {
48-
const Comp = asChild ? Slot : "a";
49-
50-
return (
51-
<Comp
52-
className={cn("transition-colors hover:text-foreground", className)}
53-
ref={ref}
54-
{...props}
55-
/>
56-
);
57-
});
58-
BreadcrumbLink.displayName = "BreadcrumbLink";
59-
60-
const BreadcrumbPage = React.forwardRef<
61-
HTMLSpanElement,
62-
React.ComponentPropsWithoutRef<"span">
63-
>(({ className, ...props }, ref) => (
64-
// biome-ignore lint/a11y/useFocusableInteractive: required
65-
<span
66-
aria-current="page"
67-
aria-disabled="true"
68-
className={cn("font-normal text-foreground", className)}
69-
ref={ref}
70-
role="link"
71-
{...props}
72-
/>
73-
));
74-
BreadcrumbPage.displayName = "BreadcrumbPage";
75-
76-
const BreadcrumbSeparator = ({
77-
children,
78-
className,
79-
...props
80-
}: React.ComponentProps<"li">) => (
81-
<li
82-
aria-hidden="true"
83-
className={cn("[&>svg]:size-3.5", className)}
84-
role="presentation"
85-
{...props}
86-
>
87-
{children ?? <ChevronRightIcon />}
88-
</li>
89-
);
90-
BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
91-
92-
const BreadcrumbEllipsis = ({
93-
className,
94-
...props
95-
}: React.ComponentProps<"span">) => (
96-
<span
97-
aria-hidden="true"
98-
className={cn(
99-
"relative flex h-9 w-9 items-center justify-center",
100-
className,
101-
)}
102-
role="presentation"
103-
{...props}
104-
>
105-
<MoreHorizontalIcon className="h-4 w-4" />
106-
<span className="sr-only">More</span>
107-
</span>
108-
);
109-
BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";
110-
1111
export {
1122
Breadcrumb,
113-
BreadcrumbList,
3+
BreadcrumbEllipsis,
1144
BreadcrumbItem,
1155
BreadcrumbLink,
6+
BreadcrumbList,
1167
BreadcrumbPage,
1178
BreadcrumbSeparator,
118-
BreadcrumbEllipsis,
119-
};
9+
} from "@workspace/ui/components/breadcrumb";

‎apps/dashboard/src/@/components/ui/table.tsx‎

Lines changed: 5 additions & 150 deletions
Original file line numberDiff line numberDiff line change
@@ -1,156 +1,11 @@
1-
import * as React from "react";
2-
3-
import { cn } from "@/lib/utils";
4-
import { ScrollShadow } from "./ScrollShadow";
5-
6-
const Table = React.forwardRef<
7-
HTMLTableElement,
8-
React.HTMLAttributes<HTMLTableElement>
9-
>(({ className, ...props }, ref) => (
10-
<table
11-
className={cn(
12-
"w-full caption-bottom border-collapse align-top text-sm lining-nums tabular-nums",
13-
className,
14-
)}
15-
ref={ref}
16-
{...props}
17-
/>
18-
));
19-
Table.displayName = "Table";
20-
21-
const TableHeader = React.forwardRef<
22-
HTMLTableSectionElement,
23-
React.HTMLAttributes<HTMLTableSectionElement>
24-
>(({ className, ...props }, ref) => (
25-
<thead
26-
className={cn("relative border-b bg-background", className)}
27-
ref={ref}
28-
{...props}
29-
/>
30-
));
31-
32-
TableHeader.displayName = "TableHeader";
33-
34-
const TableBody = React.forwardRef<
35-
HTMLTableSectionElement,
36-
React.HTMLAttributes<HTMLTableSectionElement>
37-
>(({ className, ...props }, ref) => (
38-
<tbody
39-
className={cn("[&_tr:last-child]:border-0", className)}
40-
ref={ref}
41-
{...props}
42-
/>
43-
));
44-
TableBody.displayName = "TableBody";
45-
46-
const TableFooter = React.forwardRef<
47-
HTMLTableSectionElement,
48-
React.HTMLAttributes<HTMLTableSectionElement>
49-
>(({ className, ...props }, ref) => (
50-
<tfoot
51-
className={cn(
52-
"border-border border-t bg-card font-medium [&>tr]:last:border-b-0",
53-
className,
54-
)}
55-
ref={ref}
56-
{...props}
57-
/>
58-
));
59-
TableFooter.displayName = "TableFooter";
60-
61-
const TableRow = React.forwardRef<
62-
HTMLTableRowElement,
63-
React.HTMLAttributes<HTMLTableRowElement> & {
64-
/**
65-
* Contain the absolutely position elements inside the row with position:relative + transform:translate(0)
66-
* transform:translate(0) is required because position:relative on tr element does not work on webkit
67-
*/
68-
linkBox?: boolean;
69-
}
70-
>(({ className, linkBox, ...props }, ref) => (
71-
<tr
72-
className={cn(
73-
"border-border border-b last:border-0 data-[state=selected]:bg-muted",
74-
linkBox && "relative translate-x-0 translate-y-0",
75-
className,
76-
)}
77-
ref={ref}
78-
{...props}
79-
/>
80-
));
81-
TableRow.displayName = "TableRow";
82-
83-
const TableHead = React.forwardRef<
84-
HTMLTableCellElement,
85-
React.ThHTMLAttributes<HTMLTableCellElement>
86-
>(({ className, ...props }, ref) => (
87-
<th
88-
className={cn(
89-
"px-6 py-4 text-left align-middle font-medium text-muted-foreground text-xs uppercase tracking-wider [&:has([role=checkbox])]:pr-0",
90-
className,
91-
)}
92-
ref={ref}
93-
{...props}
94-
/>
95-
));
96-
TableHead.displayName = "TableHead";
97-
98-
const TableCell = React.forwardRef<
99-
HTMLTableCellElement,
100-
React.TdHTMLAttributes<HTMLTableCellElement>
101-
>(({ className, ...props }, ref) => (
102-
<td
103-
className={cn(
104-
"px-6 py-4 text-start align-middle text-sm [&:has([role=checkbox])]:pr-0",
105-
className,
106-
)}
107-
ref={ref}
108-
{...props}
109-
/>
110-
));
111-
TableCell.displayName = "TableCell";
112-
113-
const TableCaption = React.forwardRef<
114-
HTMLTableCaptionElement,
115-
React.HTMLAttributes<HTMLTableCaptionElement>
116-
>(({ className, ...props }, ref) => (
117-
<caption
118-
className={cn("py-4 text-muted-foreground text-sm", className)}
119-
ref={ref}
120-
{...props}
121-
/>
122-
));
123-
TableCaption.displayName = "TableCaption";
124-
125-
function TableContainer(props: {
126-
children: React.ReactNode;
127-
className?: string;
128-
scrollableContainerClassName?: string;
129-
}) {
130-
return (
131-
<ScrollShadow
132-
className={cn(
133-
"relative whitespace-nowrap rounded-lg border border-border bg-card",
134-
props.className,
135-
)}
136-
disableTopShadow
137-
scrollableClassName={props.scrollableContainerClassName}
138-
shadowClassName="z-30"
139-
shadowColor="hsl(var(--muted))"
140-
>
141-
{props.children}
142-
</ScrollShadow>
143-
);
144-
}
145-
1461
export {
1472
Table,
148-
TableHeader,
1493
TableBody,
4+
TableCaption,
5+
TableCell,
6+
TableContainer,
1507
TableFooter,
1518
TableHead,
9+
TableHeader,
15210
TableRow,
153-
TableCell,
154-
TableCaption,
155-
TableContainer,
156-
};
11+
} from "@workspace/ui/components/table";

0 commit comments

Comments
 (0)