History

refactor(web): remove unused layout and menu components

Julius Marminge committed 2 months ago

Commit 00330cd1 parent 9d12bd78 files · +4 −238Browse files

Unified · Split

8 files
  1. apps/web/src/components/ui/autocomplete.tsx +0 −11
  2. apps/web/src/components/ui/badge.tsx +1 −1
  3. apps/web/src/components/ui/command.tsx +0 −30
  4. apps/web/src/components/ui/group.tsx +1 −26
  5. apps/web/src/components/ui/menu.tsx +0 −15
  6. apps/web/src/components/ui/scroll-area.tsx +1 −1
  7. apps/web/src/components/ui/sidebar.tsx +0 −133
  8. apps/web/src/components/ui/table.tsx +1 −21
apps/web/src/components/ui/autocomplete.tsx+0−11
@@ -136,16 +136,6 @@ function AutocompleteItem({ className, children, ...props }: AutocompletePrimiti · 135 unmodified lines
136 );136 );
137}137}
138 138
139function AutocompleteSeparator({ className, ...props }: AutocompletePrimitive.Separator.Props) {
140 return (
141 <AutocompletePrimitive.Separator
142 className={cn("mx-2 my-1 h-px bg-border last:hidden", className)}
143 data-slot="autocomplete-separator"
144 {...props}
145 />
146 );
147}
148
149function AutocompleteGroup({ className, ...props }: AutocompletePrimitive.Group.Props) {139function AutocompleteGroup({ className, ...props }: AutocompletePrimitive.Group.Props) {
150 return (140 return (
151 <AutocompletePrimitive.Group141 <AutocompletePrimitive.Group
@@ -231,7 +221,6 @@ export { · 79 unmodified lines
231 AutocompleteInput,221 AutocompleteInput,
232 AutocompletePopup,222 AutocompletePopup,
233 AutocompleteItem,223 AutocompleteItem,
234 AutocompleteSeparator,
235 AutocompleteGroup,224 AutocompleteGroup,
236 AutocompleteGroupLabel,225 AutocompleteGroupLabel,
237 AutocompleteEmpty,226 AutocompleteEmpty,
apps/web/src/components/ui/badge.tsx+1−1
@@ -57,4 +57,4 @@ function Badge({ className, variant, size, render, ...props }: BadgeProps) { · 56 unmodified lines
57 });57 });
58}58}
59 59
60export { Badge, badgeVariants };60export { Badge };
apps/web/src/components/ui/command.tsx+0−30
@@ -7,13 +7,11 @@ import { cn } from "~/lib/utils"; · 6 unmodified lines
7import {7import {
8 Autocomplete,8 Autocomplete,
9 AutocompleteCollection,9 AutocompleteCollection,
10 AutocompleteEmpty,
11 AutocompleteGroup,10 AutocompleteGroup,
12 AutocompleteGroupLabel,11 AutocompleteGroupLabel,
13 AutocompleteInput,12 AutocompleteInput,
14 AutocompleteItem,13 AutocompleteItem,
15 AutocompleteList,14 AutocompleteList,
16 AutocompleteSeparator,
17} from "~/components/ui/autocomplete";15} from "~/components/ui/autocomplete";
18import { DIALOG_BACKDROP_CLASS, DIALOG_POPUP_CLASS } from "~/components/ui/dialog-styles";16import { DIALOG_BACKDROP_CLASS, DIALOG_POPUP_CLASS } from "~/components/ui/dialog-styles";
19import { Button } from "~/components/ui/button";17import { Button } from "~/components/ui/button";
@@ -22,8 +20,6 @@ const CommandDialog = CommandDialogPrimitive.Root; · 2 unmodified lines
22 20
23const CommandDialogPortal = CommandDialogPrimitive.Portal;21const CommandDialogPortal = CommandDialogPrimitive.Portal;
24 22
25const CommandCreateHandle = CommandDialogPrimitive.createHandle;
26
27function CommandDialogTrigger(props: CommandDialogPrimitive.Trigger.Props) {23function CommandDialogTrigger(props: CommandDialogPrimitive.Trigger.Props) {
28 return <CommandDialogPrimitive.Trigger data-slot="command-dialog-trigger" {...props} />;24 return <CommandDialogPrimitive.Trigger data-slot="command-dialog-trigger" {...props} />;
29}25}
@@ -135,16 +131,6 @@ function CommandList({ className, ...props }: React.ComponentProps<typeof Autoco · 105 unmodified lines
135 );131 );
136}132}
137 133
138function CommandEmpty({ className, ...props }: React.ComponentProps<typeof AutocompleteEmpty>) {
139 return (
140 <AutocompleteEmpty
141 className={cn("not-empty:py-6", className)}
142 data-slot="command-empty"
143 {...props}
144 />
145 );
146}
147
148function CommandPanel({ className, ...props }: React.ComponentProps<"div">) {134function CommandPanel({ className, ...props }: React.ComponentProps<"div">) {
149 return (135 return (
150 <div136 <div
@@ -187,19 +173,6 @@ function CommandItem({ className, ...props }: React.ComponentProps<typeof Autoco · 36 unmodified lines
187 );173 );
188}174}
189 175
190function CommandSeparator({
191 className,
192 ...props
193}: React.ComponentProps<typeof AutocompleteSeparator>) {
194 return (
195 <AutocompleteSeparator
196 className={cn("my-2", className)}
197 data-slot="command-separator"
198 {...props}
199 />
200 );
201}
202
203function CommandShortcut({ className, ...props }: React.ComponentProps<"kbd">) {176function CommandShortcut({ className, ...props }: React.ComponentProps<"kbd">) {
204 return (177 return (
205 <kbd178 <kbd
@@ -241,13 +214,11 @@ function CommandFooterAction({ · 35 unmodified lines
241}214}
242 215
243export {216export {
244 CommandCreateHandle,
245 Command,217 Command,
246 CommandCollection,218 CommandCollection,
247 CommandDialog,219 CommandDialog,
248 CommandDialogPopup,220 CommandDialogPopup,
249 CommandDialogTrigger,221 CommandDialogTrigger,
250 CommandEmpty,
251 CommandFooter,222 CommandFooter,
252 CommandFooterAction,223 CommandFooterAction,
253 CommandGroup,224 CommandGroup,
@@ -256,6 +227,5 @@ export { · 2 unmodified lines
256 CommandItem,227 CommandItem,
257 CommandList,228 CommandList,
258 CommandPanel,229 CommandPanel,
259 CommandSeparator,
260 CommandShortcut,230 CommandShortcut,
261};231};
apps/web/src/components/ui/group.tsx+1−26
@@ -1,7 +1,5 @@
1"use client";1"use client";
2 2
3import { mergeProps } from "@base-ui/react/merge-props";
4import { useRender } from "@base-ui/react/use-render";
5import { cva, type VariantProps } from "class-variance-authority";3import { cva, type VariantProps } from "class-variance-authority";
6import type * as React from "react";4import type * as React from "react";
7 5
@@ -48,21 +46,6 @@ function Group({ · 40 unmodified lines
48 );46 );
49}47}
50 48
51function GroupText({ className, render, ...props }: useRender.ComponentProps<"div">) {
52 const defaultProps = {
53 className: cn(
54 "relative inline-flex items-center whitespace-nowrap gap-2 rounded-lg border border-input bg-muted not-dark:bg-clip-padding px-[calc(--spacing(3)-1px)] text-muted-foreground text-base sm:text-sm shadow-xs/5 outline-none transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/6%)] dark:bg-input/64 dark:before:shadow-[0_-1px_--theme(--color-white/6%)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 [&_svg]:-mx-0.5",
55 className,
56 ),
57 "data-slot": "group-text",
58 };
59 return useRender({
60 defaultTagName: "div",
61 props: mergeProps(defaultProps, props),
62 render,
63 });
64}
65
66function GroupSeparator({49function GroupSeparator({
67 className,50 className,
68 orientation = "vertical",51 orientation = "vertical",
@@ -82,12 +65,4 @@ function GroupSeparator({ · 13 unmodified lines
82 );65 );
83}66}
84 67
85export {68export { Group, GroupSeparator };
86 Group,
87 Group as ButtonGroup,
88 GroupText,
89 GroupText as ButtonGroupText,
90 GroupSeparator,
91 GroupSeparator as ButtonGroupSeparator,
92 groupVariants,
93};
apps/web/src/components/ui/menu.tsx+0−15
@@ -6,12 +6,8 @@ import type * as React from "react"; · 5 unmodified lines
6 6
7import { cn } from "~/lib/utils";7import { cn } from "~/lib/utils";
8 8
9const MenuCreateHandle = MenuPrimitive.createHandle;
10
11const Menu = MenuPrimitive.Root;9const Menu = MenuPrimitive.Root;
12 10
13const MenuPortal = MenuPrimitive.Portal;
14
15function MenuTrigger({ className, children, ...props }: MenuPrimitive.Trigger.Props) {11function MenuTrigger({ className, children, ...props }: MenuPrimitive.Trigger.Props) {
16 return (12 return (
17 <MenuPrimitive.Trigger className={className} data-slot="menu-trigger" {...props}>13 <MenuPrimitive.Trigger className={className} data-slot="menu-trigger" {...props}>
@@ -297,33 +293,22 @@ function MenuSubPopup({ · 279 unmodified lines
297}293}
298 294
299export {295export {
300 MenuCreateHandle,
301 MenuCreateHandle as DropdownMenuCreateHandle,
302 Menu,296 Menu,
303 Menu as DropdownMenu,297 Menu as DropdownMenu,
304 MenuPortal,
305 MenuPortal as DropdownMenuPortal,
306 MenuTrigger,298 MenuTrigger,
307 MenuTrigger as DropdownMenuTrigger,299 MenuTrigger as DropdownMenuTrigger,
308 MenuPopup,300 MenuPopup,
309 MenuPopup as DropdownMenuContent,301 MenuPopup as DropdownMenuContent,
310 MenuGroup,302 MenuGroup,
311 MenuGroup as DropdownMenuGroup,
312 MenuItem,303 MenuItem,
313 MenuItem as DropdownMenuItem,304 MenuItem as DropdownMenuItem,
314 MenuCheckboxItem,305 MenuCheckboxItem,
315 MenuCheckboxItem as DropdownMenuCheckboxItem,
316 MenuRadioGroup,306 MenuRadioGroup,
317 MenuRadioGroup as DropdownMenuRadioGroup,
318 MenuRadioItem,307 MenuRadioItem,
319 MenuRadioItem as DropdownMenuRadioItem,
320 MenuRadioItemIndicator,308 MenuRadioItemIndicator,
321 MenuGroupLabel,309 MenuGroupLabel,
322 MenuGroupLabel as DropdownMenuLabel,
323 MenuSeparator,310 MenuSeparator,
324 MenuSeparator as DropdownMenuSeparator,
325 MenuShortcut,311 MenuShortcut,
326 MenuShortcut as DropdownMenuShortcut,
327 MenuSub,312 MenuSub,
328 MenuSub as DropdownMenuSub,313 MenuSub as DropdownMenuSub,
329 MenuSubTrigger,314 MenuSubTrigger,
apps/web/src/components/ui/scroll-area.tsx+1−1
@@ -88,4 +88,4 @@ function ScrollBar({ · 87 unmodified lines
88 );88 );
89}89}
90 90
91export { getVirtualizedScrollFadeClassName, ScrollArea, ScrollBar };91export { getVirtualizedScrollFadeClassName, ScrollArea };
apps/web/src/components/ui/sidebar.tsx+0−133
@@ -5,9 +5,7 @@ import { PanelLeftCloseIcon, PanelLeftIcon } from "lucide-react"; · 4 unmodified lines
5import * as React from "react";5import * as React from "react";
6import { cn } from "~/lib/utils";6import { cn } from "~/lib/utils";
7import { Button } from "~/components/ui/button";7import { Button } from "~/components/ui/button";
8import { Input } from "~/components/ui/input";
9import { ScrollArea } from "~/components/ui/scroll-area";8import { ScrollArea } from "~/components/ui/scroll-area";
10import { Separator } from "~/components/ui/separator";
11import {9import {
12 Sheet,10 Sheet,
13 SheetDescription,11 SheetDescription,
@@ -15,7 +13,6 @@ import { · 1 unmodified line
15 SheetPopup,13 SheetPopup,
16 SheetTitle,14 SheetTitle,
17} from "~/components/ui/sheet";15} from "~/components/ui/sheet";
18import { Skeleton } from "~/components/ui/skeleton";
19import { Tooltip, TooltipPopup, TooltipTrigger } from "~/components/ui/tooltip";16import { Tooltip, TooltipPopup, TooltipTrigger } from "~/components/ui/tooltip";
20import { useIsMobile } from "~/hooks/useMediaQuery";17import { useIsMobile } from "~/hooks/useMediaQuery";
21import { getLocalStorageItem, setLocalStorageItem } from "~/hooks/useLocalStorage";18import { getLocalStorageItem, setLocalStorageItem } from "~/hooks/useLocalStorage";
@@ -645,17 +642,6 @@ function SidebarInset({ className, ...props }: React.ComponentProps<"main">) { · 623 unmodified lines
645 );642 );
646}643}
647 644
648function SidebarInput({ className, ...props }: React.ComponentProps<typeof Input>) {
649 return (
650 <Input
651 className={cn("h-8 w-full bg-background shadow-none", className)}
652 data-sidebar="input"
653 data-slot="sidebar-input"
654 {...props}
655 />
656 );
657}
658
659function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {645function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
660 return (646 return (
661 <div647 <div
@@ -678,17 +664,6 @@ function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) { · 16 unmodified lines
678 );664 );
679}665}
680 666
681function SidebarSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {
682 return (
683 <Separator
684 className={cn("mx-2 w-auto! bg-sidebar-border", className)}
685 data-sidebar="separator"
686 data-slot="sidebar-separator"
687 {...props}
688 />
689 );
690}
691
692function SidebarContent({667function SidebarContent({
693 className,668 className,
694 fixedHeader,669 fixedHeader,
@@ -728,55 +703,6 @@ function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) { · 33 unmodified lines
728 );703 );
729}704}
730 705
731function SidebarGroupLabel({ className, render, ...props }: useRender.ComponentProps<"div">) {
732 const defaultProps = {
733 className: cn(
734 "flex h-8 shrink-0 items-center rounded-lg px-2 font-medium text-sidebar-foreground text-xs outline-hidden ring-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
735 "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
736 className,
737 ),
738 "data-sidebar": "group-label",
739 "data-slot": "sidebar-group-label",
740 };
741
742 return useRender({
743 defaultTagName: "div",
744 props: mergeProps(defaultProps, props),
745 render,
746 });
747}
748
749function SidebarGroupAction({ className, render, ...props }: useRender.ComponentProps<"button">) {
750 const defaultProps = {
751 className: cn(
752 "absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-lg p-0 text-sidebar-foreground outline-hidden ring-ring transition-transform hover:bg-sidebar-row-hover hover:text-sidebar-foreground focus-visible:ring-2 [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0",
753 // Increases the hit area of the button on mobile.
754 "after:-inset-2 after:absolute md:after:hidden",
755 "group-data-[collapsible=icon]:hidden",
756 className,
757 ),
758 "data-sidebar": "group-action",
759 "data-slot": "sidebar-group-action",
760 };
761
762 return useRender({
763 defaultTagName: "button",
764 props: mergeProps(defaultProps, props),
765 render,
766 });
767}
768
769function SidebarGroupContent({ className, ...props }: React.ComponentProps<"div">) {
770 return (
771 <div
772 className={cn("w-full text-sm", className)}
773 data-sidebar="group-content"
774 data-slot="sidebar-group-content"
775 {...props}
776 />
777 );
778}
779
780function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {706function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
781 return (707 return (
782 <ul708 <ul
@@ -875,58 +801,6 @@ function SidebarMenuButton({ · 92 unmodified lines
875 );801 );
876}802}
877 803
878function SidebarMenuBadge({ className, ...props }: React.ComponentProps<"div">) {
879 return (
880 <div
881 className={cn(
882 "pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-lg px-1 font-medium text-sidebar-foreground text-xs tabular-nums",
883 "peer-hover/menu-button:text-sidebar-foreground peer-data-[active=true]/menu-button:text-sidebar-foreground",
884 "peer-data-[size=sm]/menu-button:top-1",
885 "peer-data-[size=default]/menu-button:top-1.5",
886 "peer-data-[size=lg]/menu-button:top-2.5",
887 "group-data-[collapsible=icon]:hidden",
888 className,
889 )}
890 data-sidebar="menu-badge"
891 data-slot="sidebar-menu-badge"
892 {...props}
893 />
894 );
895}
896
897function SidebarMenuSkeleton({
898 className,
899 showIcon = false,
900 ...props
901}: React.ComponentProps<"div"> & {
902 showIcon?: boolean;
903}) {
904 // Random width between 50 to 90%. Intentionally wrapped in useMemo to avoid changing width on every render.
905 const width = React.useMemo(() => {
906 return `${Math.floor(Math.random() * 40) + 50}%`;
907 }, []);
908
909 return (
910 <div
911 className={cn("flex h-8 items-center gap-2 rounded-lg px-2", className)}
912 data-sidebar="menu-skeleton"
913 data-slot="sidebar-menu-skeleton"
914 {...props}
915 >
916 {showIcon && <Skeleton className="size-4 rounded-lg" data-sidebar="menu-skeleton-icon" />}
917 <Skeleton
918 className="h-4 max-w-(--skeleton-width) flex-1"
919 data-sidebar="menu-skeleton-text"
920 style={
921 {
922 "--skeleton-width": width,
923 } as React.CSSProperties
924 }
925 />
926 </div>
927 );
928}
929
930function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {804function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
931 return (805 return (
932 <ul806 <ul
@@ -990,23 +864,16 @@ export { · 57 unmodified lines
990 SidebarContent,864 SidebarContent,
991 SidebarFooter,865 SidebarFooter,
992 SidebarGroup,866 SidebarGroup,
993 SidebarGroupAction,
994 SidebarGroupContent,
995 SidebarGroupLabel,
996 SidebarHeader,867 SidebarHeader,
997 SidebarInput,
998 SidebarInset,868 SidebarInset,
999 SidebarMenu,869 SidebarMenu,
1000 SidebarMenuBadge,
1001 SidebarMenuButton,870 SidebarMenuButton,
1002 SidebarMenuItem,871 SidebarMenuItem,
1003 SidebarMenuSkeleton,
1004 SidebarMenuSub,872 SidebarMenuSub,
1005 SidebarMenuSubButton,873 SidebarMenuSubButton,
1006 SidebarMenuSubItem,874 SidebarMenuSubItem,
1007 SidebarProvider,875 SidebarProvider,
1008 SidebarRail,876 SidebarRail,
1009 SidebarSeparator,
1010 SidebarTrigger,877 SidebarTrigger,
1011 useSidebar,878 useSidebar,
1012 useSidebarVisibility,879 useSidebarVisibility,
apps/web/src/components/ui/table.tsx+1−21
@@ -28,16 +28,6 @@ function TableBody({ className, ...props }: React.ComponentProps<"tbody">) { · 27 unmodified lines
28 );28 );
29}29}
30 30
31function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
32 return (
33 <tfoot
34 data-slot="table-footer"
35 className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)}
36 {...props}
37 />
38 );
39}
40
41function TableRow({ className, ...props }: React.ComponentProps<"tr">) {31function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
42 return (32 return (
43 <tr33 <tr
@@ -74,14 +64,4 @@ function TableCell({ className, ...props }: React.ComponentProps<"td">) { · 30 unmodified lines
74 );64 );
75}65}
76 66
77function TableCaption({ className, ...props }: React.ComponentProps<"caption">) {67export { Table, TableHeader, TableBody, TableHead, TableRow, TableCell };
78 return (
79 <caption
80 data-slot="table-caption"
81 className={cn("mt-4 text-xs text-muted-foreground", className)}
82 {...props}
83 />
84 );
85}
86
87export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };