From 4f02ea507a317cf41947e88017b2cc56c8a7a713 Mon Sep 17 00:00:00 2001 From: dvelo <52332868+DeveloLongScript@users.noreply.github.com> Date: Fri, 14 Feb 2025 18:40:01 -0600 Subject: [PATCH 1/6] fix: eslint configs --- apps/stage1-clk-transfer/eslint.config.mjs | 3 ++- apps/stage2-clk-transfer/eslint.config.mjs | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/apps/stage1-clk-transfer/eslint.config.mjs b/apps/stage1-clk-transfer/eslint.config.mjs index 06b4cc9..a4b2b15 100644 --- a/apps/stage1-clk-transfer/eslint.config.mjs +++ b/apps/stage1-clk-transfer/eslint.config.mjs @@ -16,7 +16,8 @@ const eslintConfig = [ "react-hooks/exhaustive-deps": "off", "react/no-unescaped-entities": "off", "react/display-name": "off", - "@typescript-eslint/no-unused-vars": "off" + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-empty-object-type": "off", } }) ]; diff --git a/apps/stage2-clk-transfer/eslint.config.mjs b/apps/stage2-clk-transfer/eslint.config.mjs index 06b4cc9..a4b2b15 100644 --- a/apps/stage2-clk-transfer/eslint.config.mjs +++ b/apps/stage2-clk-transfer/eslint.config.mjs @@ -16,7 +16,8 @@ const eslintConfig = [ "react-hooks/exhaustive-deps": "off", "react/no-unescaped-entities": "off", "react/display-name": "off", - "@typescript-eslint/no-unused-vars": "off" + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-empty-object-type": "off", } }) ]; From 4f9126fd0293ac9771f6904b0d1d4b53fca84ffa Mon Sep 17 00:00:00 2001 From: dvelo <52332868+DeveloLongScript@users.noreply.github.com> Date: Fri, 14 Feb 2025 19:03:45 -0600 Subject: [PATCH 2/6] fix: radix types --- apps/stage1-clk-transfer/package.json | 49 ++++++++++++--------------- apps/stage2-clk-transfer/package.json | 49 ++++++++++++--------------- 2 files changed, 44 insertions(+), 54 deletions(-) diff --git a/apps/stage1-clk-transfer/package.json b/apps/stage1-clk-transfer/package.json index 28a9926..2dd23c8 100644 --- a/apps/stage1-clk-transfer/package.json +++ b/apps/stage1-clk-transfer/package.json @@ -11,33 +11,28 @@ "dependencies": { "@clerk/nextjs": "^6.10.3", "@hookform/resolvers": "^3.10.0", - "@radix-ui/react-accordion": "^1.2.2", - "@radix-ui/react-alert-dialog": "^1.1.5", - "@radix-ui/react-aspect-ratio": "^1.1.1", - "@radix-ui/react-avatar": "^1.1.2", - "@radix-ui/react-checkbox": "^1.1.3", - "@radix-ui/react-collapsible": "^1.1.2", - "@radix-ui/react-context-menu": "^2.2.5", - "@radix-ui/react-dialog": "^1.1.5", - "@radix-ui/react-dropdown-menu": "^2.1.5", - "@radix-ui/react-hover-card": "^1.1.5", - "@radix-ui/react-label": "^2.1.1", - "@radix-ui/react-menubar": "^1.1.5", - "@radix-ui/react-navigation-menu": "^1.2.4", - "@radix-ui/react-popover": "^1.1.5", - "@radix-ui/react-progress": "^1.1.1", - "@radix-ui/react-radio-group": "^1.2.2", - "@radix-ui/react-scroll-area": "^1.2.2", - "@radix-ui/react-select": "^2.1.5", - "@radix-ui/react-separator": "^1.1.1", - "@radix-ui/react-slider": "^1.2.2", - "@radix-ui/react-slot": "^1.1.1", - "@radix-ui/react-switch": "^1.1.2", - "@radix-ui/react-tabs": "^1.1.2", - "@radix-ui/react-toast": "^1.2.5", - "@radix-ui/react-toggle": "^1.1.1", - "@radix-ui/react-toggle-group": "^1.1.1", - "@radix-ui/react-tooltip": "^1.1.7", + "@radix-ui/react-aspect-ratio": "^1.1.1", + "@radix-ui/react-avatar": "^1.1.1", + "@radix-ui/react-collapsible": "^1.1.1", + "@radix-ui/react-hover-card": "^1.1.1", + "@radix-ui/react-icons": "^1.3.0", + "@radix-ui/react-menubar": "^1.1.1", + "@radix-ui/react-primitive": "^2.0.0", + "@radix-ui/react-select": "^2.1.2", + "@radix-ui/react-switch": "^1.1.0", + "@radix-ui/react-checkbox": "^1.1.1", + "@radix-ui/react-context-menu": "^2.1.5", + "@radix-ui/react-dialog": "^1.1.2", + "@radix-ui/react-dropdown-menu": "^2.1.2", + "@radix-ui/react-label": "^2.1.0", + "@radix-ui/react-navigation-menu": "^1.1.4", + "@radix-ui/react-popover": "^1.0.7", + "@radix-ui/react-radio-group": "^1.2.0", + "@radix-ui/react-scroll-area": "^1.1.0", + "@radix-ui/react-separator": "^1.1.0", + "@radix-ui/react-slot": "^1.1.0", + "@radix-ui/react-tabs": "^1.1.0", + "@radix-ui/react-tooltip": "^1.1.3", "@types/jsonwebtoken": "^9.0.8", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", diff --git a/apps/stage2-clk-transfer/package.json b/apps/stage2-clk-transfer/package.json index 30f7976..d1d8aec 100644 --- a/apps/stage2-clk-transfer/package.json +++ b/apps/stage2-clk-transfer/package.json @@ -11,33 +11,28 @@ "dependencies": { "@clerk/nextjs": "^6.10.3", "@hookform/resolvers": "^3.10.0", - "@radix-ui/react-accordion": "^1.2.2", - "@radix-ui/react-alert-dialog": "^1.1.5", - "@radix-ui/react-aspect-ratio": "^1.1.1", - "@radix-ui/react-avatar": "^1.1.2", - "@radix-ui/react-checkbox": "^1.1.3", - "@radix-ui/react-collapsible": "^1.1.2", - "@radix-ui/react-context-menu": "^2.2.5", - "@radix-ui/react-dialog": "^1.1.5", - "@radix-ui/react-dropdown-menu": "^2.1.5", - "@radix-ui/react-hover-card": "^1.1.5", - "@radix-ui/react-label": "^2.1.1", - "@radix-ui/react-menubar": "^1.1.5", - "@radix-ui/react-navigation-menu": "^1.2.4", - "@radix-ui/react-popover": "^1.1.5", - "@radix-ui/react-progress": "^1.1.1", - "@radix-ui/react-radio-group": "^1.2.2", - "@radix-ui/react-scroll-area": "^1.2.2", - "@radix-ui/react-select": "^2.1.5", - "@radix-ui/react-separator": "^1.1.1", - "@radix-ui/react-slider": "^1.2.2", - "@radix-ui/react-slot": "^1.1.1", - "@radix-ui/react-switch": "^1.1.2", - "@radix-ui/react-tabs": "^1.1.2", - "@radix-ui/react-toast": "^1.2.5", - "@radix-ui/react-toggle": "^1.1.1", - "@radix-ui/react-toggle-group": "^1.1.1", - "@radix-ui/react-tooltip": "^1.1.7", + "@radix-ui/react-aspect-ratio": "^1.1.1", + "@radix-ui/react-avatar": "^1.1.1", + "@radix-ui/react-collapsible": "^1.1.1", + "@radix-ui/react-hover-card": "^1.1.1", + "@radix-ui/react-icons": "^1.3.0", + "@radix-ui/react-menubar": "^1.1.1", + "@radix-ui/react-primitive": "^2.0.0", + "@radix-ui/react-select": "^2.1.2", + "@radix-ui/react-switch": "^1.1.0", + "@radix-ui/react-checkbox": "^1.1.1", + "@radix-ui/react-context-menu": "^2.1.5", + "@radix-ui/react-dialog": "^1.1.2", + "@radix-ui/react-dropdown-menu": "^2.1.2", + "@radix-ui/react-label": "^2.1.0", + "@radix-ui/react-navigation-menu": "^1.1.4", + "@radix-ui/react-popover": "^1.0.7", + "@radix-ui/react-radio-group": "^1.2.0", + "@radix-ui/react-scroll-area": "^1.1.0", + "@radix-ui/react-separator": "^1.1.0", + "@radix-ui/react-slot": "^1.1.0", + "@radix-ui/react-tabs": "^1.1.0", + "@radix-ui/react-tooltip": "^1.1.3", "@types/jsonwebtoken": "^9.0.8", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", From 219935c0d4ae4b27e02bc3d766bbc46f8a9dae40 Mon Sep 17 00:00:00 2001 From: dvelo <52332868+DeveloLongScript@users.noreply.github.com> Date: Fri, 14 Feb 2025 19:06:49 -0600 Subject: [PATCH 3/6] fix: remove loading button --- .../src/components/ui/loading-button.tsx | 96 ------------------- .../src/components/ui/loading-button.tsx | 96 ------------------- 2 files changed, 192 deletions(-) delete mode 100644 apps/stage1-clk-transfer/src/components/ui/loading-button.tsx delete mode 100644 apps/stage2-clk-transfer/src/components/ui/loading-button.tsx diff --git a/apps/stage1-clk-transfer/src/components/ui/loading-button.tsx b/apps/stage1-clk-transfer/src/components/ui/loading-button.tsx deleted file mode 100644 index f8520e9..0000000 --- a/apps/stage1-clk-transfer/src/components/ui/loading-button.tsx +++ /dev/null @@ -1,96 +0,0 @@ -/* - * MHSF, Minehut Server List - * All external content is rather licensed under the ECA Agreement - * located here: https://mhsf.app/docs/legal/external-content-agreement - * - * All code under MHSF is licensed under the MIT License - * by open source contributors - * - * Copyright (c) 2025 dvelo - * - * Permission is hereby granted, free of charge, to any person obtaining a copy - * of this software and associated documentation files (the "Software"), to - * deal in the Software without restriction, including without limitation the - * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or - * sell copies of the Software, and to permit persons to whom the Software is - * furnished to do so, subject to the following conditions: - * - * The above copyright notice and this permission notice shall be included in all - * copies or substantial portions of the Software. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, - * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES - * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND - * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT - * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, - * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING - * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR - * OTHER DEALINGS IN THE SOFTWARE. - */ - -import * as React from "react"; -import { Slot } from "@radix-ui/react-slot"; -import { cva, type VariantProps } from "class-variance-authority"; -import { cn } from "@/lib/utils"; -import { Loader2 } from "lucide-react"; -import { Button, buttonVariants } from "./button"; - -export interface ButtonProps - extends React.ButtonHTMLAttributes, - VariantProps { - asChild?: boolean; - loading?: boolean; -} - -const LoadingButton = React.forwardRef( - ( - { className, variant, size, asChild = false, loading, children, ...props }, - ref - ) => { - if (asChild) { - return ( - - <> - {React.Children.map( - children as React.ReactElement, - (child: React.ReactElement) => { - return React.cloneElement(child, { - className: cn(buttonVariants({ variant, size }), className), - children: ( - <> - {loading && ( - - )} - {child.props.children} - - ), - }); - } - )} - - - ); - } - - return ( - - ); - } -); -LoadingButton.displayName = "LoadingButton"; - -export { LoadingButton, buttonVariants }; diff --git a/apps/stage2-clk-transfer/src/components/ui/loading-button.tsx b/apps/stage2-clk-transfer/src/components/ui/loading-button.tsx deleted file mode 100644 index f8520e9..0000000 --- a/apps/stage2-clk-transfer/src/components/ui/loading-button.tsx +++ /dev/null @@ -1,96 +0,0 @@ -/* - * MHSF, Minehut Server List - * All external content is rather licensed under the ECA Agreement - * located here: https://mhsf.app/docs/legal/external-content-agreement - * - * All code under MHSF is licensed under the MIT License - * by open source contributors - * - * Copyright (c) 2025 dvelo - * - * Permission is hereby granted, free of charge, to any person obtaining a copy - * of this software and associated documentation files (the "Software"), to - * deal in the Software without restriction, including without limitation the - * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or - * sell copies of the Software, and to permit persons to whom the Software is - * furnished to do so, subject to the following conditions: - * - * The above copyright notice and this permission notice shall be included in all - * copies or substantial portions of the Software. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, - * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES - * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND - * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT - * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, - * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING - * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR - * OTHER DEALINGS IN THE SOFTWARE. - */ - -import * as React from "react"; -import { Slot } from "@radix-ui/react-slot"; -import { cva, type VariantProps } from "class-variance-authority"; -import { cn } from "@/lib/utils"; -import { Loader2 } from "lucide-react"; -import { Button, buttonVariants } from "./button"; - -export interface ButtonProps - extends React.ButtonHTMLAttributes, - VariantProps { - asChild?: boolean; - loading?: boolean; -} - -const LoadingButton = React.forwardRef( - ( - { className, variant, size, asChild = false, loading, children, ...props }, - ref - ) => { - if (asChild) { - return ( - - <> - {React.Children.map( - children as React.ReactElement, - (child: React.ReactElement) => { - return React.cloneElement(child, { - className: cn(buttonVariants({ variant, size }), className), - children: ( - <> - {loading && ( - - )} - {child.props.children} - - ), - }); - } - )} - - - ); - } - - return ( - - ); - } -); -LoadingButton.displayName = "LoadingButton"; - -export { LoadingButton, buttonVariants }; From 4b962d8321ca382f802a8d9716495f434876c4cf Mon Sep 17 00:00:00 2001 From: dvelo <52332868+DeveloLongScript@users.noreply.github.com> Date: Fri, 14 Feb 2025 19:11:58 -0600 Subject: [PATCH 4/6] fix: remove setting component --- .../src/components/ui/setting.tsx | 88 ------------------- .../src/components/ui/setting.tsx | 88 ------------------- 2 files changed, 176 deletions(-) delete mode 100644 apps/stage1-clk-transfer/src/components/ui/setting.tsx delete mode 100644 apps/stage2-clk-transfer/src/components/ui/setting.tsx diff --git a/apps/stage1-clk-transfer/src/components/ui/setting.tsx b/apps/stage1-clk-transfer/src/components/ui/setting.tsx deleted file mode 100644 index 6bbc1b1..0000000 --- a/apps/stage1-clk-transfer/src/components/ui/setting.tsx +++ /dev/null @@ -1,88 +0,0 @@ -/* - * MHSF, Minehut Server List - * All external content is rather licensed under the ECA Agreement - * located here: https://mhsf.app/docs/legal/external-content-agreement - * - * All code under MHSF is licensed under the MIT License - * by open source contributors - * - * Copyright (c) 2025 dvelo - * - * Permission is hereby granted, free of charge, to any person obtaining a copy - * of this software and associated documentation files (the "Software"), to - * deal in the Software without restriction, including without limitation the - * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or - * sell copies of the Software, and to permit persons to whom the Software is - * furnished to do so, subject to the following conditions: - * - * The above copyright notice and this permission notice shall be included in all - * copies or substantial portions of the Software. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, - * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES - * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND - * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT - * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, - * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING - * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR - * OTHER DEALINGS IN THE SOFTWARE. - */ - -"use client"; - -import { Button } from "@/components/ui/button"; -import { - Card, - CardContent, - CardDescription, - CardFooter, - CardHeader, - CardTitle, -} from "@/components/ui/card"; -import { Input } from "@/components/ui/input"; -import { zodResolver } from "@hookform/resolvers/zod"; -import { useForm, UseFormReturn } from "react-hook-form"; -import { z } from "zod"; -import { Form } from "./form"; - -export default function Setting({ - name, - description, - button, - input, - onSubmit, - form, -}: { - name: string; - description: JSX.Element; - button: JSX.Element; - input?: JSX.Element; - onSubmit?: () => void; - form?: UseFormReturn; -}) { - return ( - - - {name} - {description} - - {input && form && ( -
- - {input} - {button} -
- - )} - - {!input && ( - {button} - )} - - ); -} diff --git a/apps/stage2-clk-transfer/src/components/ui/setting.tsx b/apps/stage2-clk-transfer/src/components/ui/setting.tsx deleted file mode 100644 index 6bbc1b1..0000000 --- a/apps/stage2-clk-transfer/src/components/ui/setting.tsx +++ /dev/null @@ -1,88 +0,0 @@ -/* - * MHSF, Minehut Server List - * All external content is rather licensed under the ECA Agreement - * located here: https://mhsf.app/docs/legal/external-content-agreement - * - * All code under MHSF is licensed under the MIT License - * by open source contributors - * - * Copyright (c) 2025 dvelo - * - * Permission is hereby granted, free of charge, to any person obtaining a copy - * of this software and associated documentation files (the "Software"), to - * deal in the Software without restriction, including without limitation the - * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or - * sell copies of the Software, and to permit persons to whom the Software is - * furnished to do so, subject to the following conditions: - * - * The above copyright notice and this permission notice shall be included in all - * copies or substantial portions of the Software. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, - * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES - * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND - * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT - * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, - * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING - * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR - * OTHER DEALINGS IN THE SOFTWARE. - */ - -"use client"; - -import { Button } from "@/components/ui/button"; -import { - Card, - CardContent, - CardDescription, - CardFooter, - CardHeader, - CardTitle, -} from "@/components/ui/card"; -import { Input } from "@/components/ui/input"; -import { zodResolver } from "@hookform/resolvers/zod"; -import { useForm, UseFormReturn } from "react-hook-form"; -import { z } from "zod"; -import { Form } from "./form"; - -export default function Setting({ - name, - description, - button, - input, - onSubmit, - form, -}: { - name: string; - description: JSX.Element; - button: JSX.Element; - input?: JSX.Element; - onSubmit?: () => void; - form?: UseFormReturn; -}) { - return ( - - - {name} - {description} - - {input && form && ( -
- - {input} - {button} -
- - )} - - {!input && ( - {button} - )} - - ); -} From 701ad0734000afa5d661a4ef13c0b705c247b7da Mon Sep 17 00:00:00 2001 From: dvelo <52332868+DeveloLongScript@users.noreply.github.com> Date: Fri, 14 Feb 2025 19:59:10 -0600 Subject: [PATCH 5/6] fix: --- .../src/components/ui/sidebar.tsx | 801 ------------------ .../src/components/ui/sidebar.tsx | 801 ------------------ 2 files changed, 1602 deletions(-) delete mode 100644 apps/stage1-clk-transfer/src/components/ui/sidebar.tsx delete mode 100644 apps/stage2-clk-transfer/src/components/ui/sidebar.tsx diff --git a/apps/stage1-clk-transfer/src/components/ui/sidebar.tsx b/apps/stage1-clk-transfer/src/components/ui/sidebar.tsx deleted file mode 100644 index 0011638..0000000 --- a/apps/stage1-clk-transfer/src/components/ui/sidebar.tsx +++ /dev/null @@ -1,801 +0,0 @@ -/* - * MHSF, Minehut Server List - * All external content is rather licensed under the ECA Agreement - * located here: https://mhsf.app/docs/legal/external-content-agreement - * - * All code under MHSF is licensed under the MIT License - * by open source contributors - * - * Copyright (c) 2025 dvelo - * - * Permission is hereby granted, free of charge, to any person obtaining a copy - * of this software and associated documentation files (the "Software"), to - * deal in the Software without restriction, including without limitation the - * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or - * sell copies of the Software, and to permit persons to whom the Software is - * furnished to do so, subject to the following conditions: - * - * The above copyright notice and this permission notice shall be included in all - * copies or substantial portions of the Software. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, - * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES - * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND - * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT - * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, - * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING - * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR - * OTHER DEALINGS IN THE SOFTWARE. - */ - -"use client"; - -import { Slot } from "@radix-ui/react-slot"; -import { type VariantProps, cva } from "class-variance-authority"; -import { PanelLeft } from "lucide-react"; -import * as React from "react"; - -import { Button } from "@/components/ui/button"; -import { Input } from "@/components/ui/input"; -import { Separator } from "@/components/ui/separator"; -import { Sheet, SheetContent } from "@/components/ui/sheet"; -import { Skeleton } from "@/components/ui/skeleton"; -import { - Tooltip, - TooltipContent, - TooltipProvider, - TooltipTrigger, -} from "@/components/ui/tooltip"; -import { useIsMobile } from "@/lib/hooks/use-mobile"; -import { cn } from "@/lib/utils"; - -const SIDEBAR_COOKIE_NAME = "sidebar:state"; -const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7; -const SIDEBAR_WIDTH = "16rem"; -const SIDEBAR_WIDTH_MOBILE = "18rem"; -const SIDEBAR_WIDTH_ICON = "3rem"; -const SIDEBAR_KEYBOARD_SHORTCUT = "b"; - -type SidebarContext = { - state: "expanded" | "collapsed"; - open: boolean; - setOpen: (open: boolean) => void; - openMobile: boolean; - setOpenMobile: (open: boolean) => void; - isMobile: boolean; - toggleSidebar: () => void; -}; - -const SidebarContext = React.createContext(null); - -function useSidebar() { - const context = React.useContext(SidebarContext); - if (!context) { - throw new Error("useSidebar must be used within a SidebarProvider."); - } - - return context; -} - -const SidebarProvider = React.forwardRef< - HTMLDivElement, - React.ComponentProps<"div"> & { - defaultOpen?: boolean; - open?: boolean; - onOpenChange?: (open: boolean) => void; - } ->( - ( - { - defaultOpen = true, - open: openProp, - onOpenChange: setOpenProp, - className, - style, - children, - ...props - }, - ref, - ) => { - const isMobile = useIsMobile(); - const [openMobile, setOpenMobile] = React.useState(false); - - // This is the internal state of the sidebar. - // We use openProp and setOpenProp for control from outside the component. - const [_open, _setOpen] = React.useState(defaultOpen); - const open = openProp ?? _open; - const setOpen = React.useCallback( - (value: boolean | ((value: boolean) => boolean)) => { - const openState = typeof value === "function" ? value(open) : value; - if (setOpenProp) { - setOpenProp(openState); - } else { - _setOpen(openState); - } - - // This sets the cookie to keep the sidebar state. - document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`; - }, - [setOpenProp, open], - ); - - // Helper to toggle the sidebar. - const toggleSidebar = React.useCallback(() => { - return isMobile - ? setOpenMobile((open) => !open) - : setOpen((open) => !open); - }, [isMobile, setOpen, setOpenMobile]); - - // Adds a keyboard shortcut to toggle the sidebar. - React.useEffect(() => { - const handleKeyDown = (event: KeyboardEvent) => { - if ( - event.key === SIDEBAR_KEYBOARD_SHORTCUT && - (event.metaKey || event.ctrlKey) - ) { - event.preventDefault(); - toggleSidebar(); - } - }; - - window.addEventListener("keydown", handleKeyDown); - return () => window.removeEventListener("keydown", handleKeyDown); - }, [toggleSidebar]); - - // We add a state so that we can do data-state="expanded" or "collapsed". - // This makes it easier to style the sidebar with Tailwind classes. - const state = open ? "expanded" : "collapsed"; - - const contextValue = React.useMemo( - () => ({ - state, - open, - setOpen, - isMobile, - openMobile, - setOpenMobile, - toggleSidebar, - }), - [ - state, - open, - setOpen, - isMobile, - openMobile, - setOpenMobile, - toggleSidebar, - ], - ); - - return ( - - -
- {children} -
- - - ); - }, -); -SidebarProvider.displayName = "SidebarProvider"; - -const Sidebar = React.forwardRef< - HTMLDivElement, - React.ComponentProps<"div"> & { - side?: "left" | "right"; - variant?: "sidebar" | "floating" | "inset"; - collapsible?: "offcanvas" | "icon" | "none"; - } ->( - ( - { - side = "left", - variant = "sidebar", - collapsible = "offcanvas", - className, - children, - ...props - }, - ref, - ) => { - const { isMobile, state, openMobile, setOpenMobile } = useSidebar(); - - if (collapsible === "none") { - return ( -
- {children} -
- ); - } - - if (isMobile) { - return ( - - -
{children}
- - - ); - } - - return ( -
- {/* This is what handles the sidebar gap on desktop */} -
- -
- ); - }, -); -Sidebar.displayName = "Sidebar"; - -const SidebarTrigger = React.forwardRef< - React.ElementRef, - React.ComponentProps ->(({ className, onClick, ...props }, ref) => { - const { toggleSidebar } = useSidebar(); - - return ( - - ); -}); -SidebarTrigger.displayName = "SidebarTrigger"; - -const SidebarRail = React.forwardRef< - HTMLButtonElement, - React.ComponentProps<"button"> ->(({ className, ...props }, ref) => { - const { toggleSidebar } = useSidebar(); - - return ( - - ); -}); -SidebarTrigger.displayName = "SidebarTrigger"; - -const SidebarRail = React.forwardRef< - HTMLButtonElement, - React.ComponentProps<"button"> ->(({ className, ...props }, ref) => { - const { toggleSidebar } = useSidebar(); - - return ( -