midsuit
/
julong-lib
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: implement Drawer component and associated subcomponents for enhanced UI functionality

This commit is contained in:
faisolavolut 2025-03-20 14:39:21 +07:00
parent 623207f11c
commit 7f916db9d1
9 changed files with 182 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
components/form/field/TypeRadio.tsx
View File

@ -1,3 +1,4 @@
import { cn } from "@/lib/utils";
import { useLocal } from "@/lib/utils/use-local";
import { FC, useEffect } from "react";
import { IoRadioButtonOff, IoRadioButtonOn } from "react-icons/io5";
@ -73,8 +74,8 @@ export const FieldRadio: FC<any> = ({
<>
<div className={cx("flex items-center w-full flex-row")}>
<div
className={cx(
`flex flex-col p-0.5 flex-1`,
className={cn(
`flex flex-col p-0.5 flex-1 text-sm `,
!is_tree && "space-y-1 ",
className
)}
@ -111,7 +112,7 @@ export const FieldRadio: FC<any> = ({
}
}}
className={cx(
"text-sm opt-item flex flex-row gap-x-1 cursor-pointer items-center rounded-full p-0.5 ",
"opt-item flex flex-row gap-x-1 cursor-pointer items-center rounded-full p-0.5 ",
isChecked && "active"
)}
>

4
components/partials/Sidebar.tsx
View File

@ -5,7 +5,7 @@ import { useEffect, useState } from "react";
import classNames from "classnames";
import { HiAdjustments, HiCog } from "react-icons/hi";
import { css } from "@emotion/css";
import { FaAngleUp, FaChevronDown, FaChevronUp } from "react-icons/fa";
import { FaChevronDown, FaChevronUp } from "react-icons/fa";
import { SidebarLinkBetter } from "../ui/link-better";
import { detectCase } from "@/lib/utils/detectCase";
import { useLocal } from "@/lib/utils/use-local";
@ -403,7 +403,7 @@ const SidebarTree: React.FC<TreeMenuProps> = ({ data, minimaze, mini }) => {
</div>
</div>
<div className="flex flex-row w-full">
<div className="flex flex-row w-full flex-wrap">
<div
className={cx(
"flex flex-row justify-center flex-grow rounded-lg",

2
components/tablist/TabHeader.tsx
View File

@ -64,7 +64,7 @@ export const TabHeader: React.FC<any> = ({
}, []);
if (!local.data?.length) return <></>;
return (
<div className="flex flex-row w-full">
<div className="flex flex-row w-full flex-wrap">
<Tabs
className="flex flex-col w-full"
defaultValue={onValue(local.data?.[0])}

2
components/tablist/TabHeaderBetter.tsx
View File

@ -45,7 +45,7 @@ export const TabHeaderBetter: React.FC<any> = ({
}, []);
if (!local.data?.length) return <></>;
return (
<div className="flex flex-row w-full">
<div className="flex flex-row w-full flex-wrap">
<Tabs
className="flex flex-col w-full"
defaultValue={onValue(local.data?.[0])}

2
components/tablist/Tablist.tsx
View File

@ -64,7 +64,7 @@ export const Tablist: React.FC<any> = ({
}, []);
if (!local.data?.length) return <></>;
return (
<div className="flex flex-row w-full">
<div className="flex flex-row w-full flex-wrap">
<Tabs
className="flex flex-col w-full"
defaultValue={onValue(local.data?.[0])}

150
components/ui/drawer.tsx Normal file
View File

@ -0,0 +1,150 @@
"use client";
import * as React from "react";
import { Drawer as DrawerPrimitive } from "vaul";
import { cn } from "@/lib/utils";
import { empty } from "@/lib/utils/isStringEmpty";
const Drawer = ({
shouldScaleBackground = true,
...props
}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
<DrawerPrimitive.Root
shouldScaleBackground={shouldScaleBackground}
{...props}
/>
);
Drawer.displayName = "Drawer";
const DrawerTrigger = DrawerPrimitive.Trigger;
const DrawerPortal = DrawerPrimitive.Portal;
const DrawerClose = DrawerPrimitive.Close;
const DrawerOverlay = React.forwardRef<
React.ElementRef<typeof DrawerPrimitive.Overlay>,
React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
>(({ className, ...props }, ref) => (
<DrawerPrimitive.Overlay
ref={ref}
className={cn("fixed inset-0 z-50 bg-black/80", className)}
{...props}
/>
));
DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
const DrawerContent = React.forwardRef<
React.ElementRef<typeof DrawerPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
>(({ className, children, ...props }, ref) => (
<DrawerPortal>
<DrawerOverlay />
<DrawerPrimitive.Content
ref={ref}
className={cn(
"fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
className
)}
{...props}
>
<div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
{children}
</DrawerPrimitive.Content>
</DrawerPortal>
));
DrawerContent.displayName = "DrawerContent";
const DrawerHeader = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
{...props}
/>
);
DrawerHeader.displayName = "DrawerHeader";
const DrawerFooter = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn("mt-auto flex flex-col gap-2 p-4", className)}
{...props}
/>
);
DrawerFooter.displayName = "DrawerFooter";
const DrawerTitle = React.forwardRef<
React.ElementRef<typeof DrawerPrimitive.Title>,
React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
>(({ className, ...props }, ref) => (
<DrawerPrimitive.Title
ref={ref}
className={cn(
"text-lg font-semibold leading-none tracking-tight",
className
)}
{...props}
/>
));
DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
const DrawerDescription = React.forwardRef<
React.ElementRef<typeof DrawerPrimitive.Description>,
React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
>(({ className, ...props }, ref) => (
<DrawerPrimitive.Description
ref={ref}
className={cn("text-sm text-muted-foreground", className)}
{...props}
/>
));
const DrawerBetter = ({
className,
hiddenHeader,
title,
description,
open,
contentOpen,
showClose = true,
side = "right",
onOpenChange,
children,
...props
}: any) => {
const [isOpen, setOpen] = React.useState(false as boolean);
return (
<Drawer>
<DrawerTrigger asChild>{children}</DrawerTrigger>
<DrawerContent>
<div className="mx-auto w-full max-w-sm">
<DrawerHeader
className={cx(empty(title) && empty(description) ? "hidden" : "")}
>
<DrawerTitle>{title}</DrawerTitle>
<DrawerDescription>{description}</DrawerDescription>
</DrawerHeader>
{contentOpen}
</div>
</DrawerContent>
</Drawer>
);
};
DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
export {
Drawer,
DrawerBetter,
DrawerPortal,
DrawerOverlay,
DrawerTrigger,
DrawerClose,
DrawerContent,
DrawerHeader,
DrawerFooter,
DrawerTitle,
DrawerDescription,
};

1
package.json
View File

@ -68,6 +68,7 @@
"sonner": "^1.7.0",
"tinycolor2": "^1.6.0",
"uuid": "^11.0.3",
"vaul": "^1.1.2",
"xlsx": "^0.18.5"
},
"devDependencies": {

12
svg/FilterOutline.tsx Normal file
View File

@ -0,0 +1,12 @@
import { SVGProps } from "react";
const SvgComponent = (props: SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
<g fill="none" stroke="currentColor" strokeLinecap="round">
<path d="M5 12V4m14 16v-3M5 20v-4m14-3V4m-7 3V4m0 16v-9" />
<circle cx={5} cy={14} r={2} />
<circle cx={12} cy={9} r={2} />
<circle cx={19} cy={15} r={2} />
</g>
</svg>
);
export { SvgComponent as FilterOutline };

10
svg/SortEp.tsx Normal file
View File

@ -0,0 +1,10 @@
import { SVGProps } from "react";
const SvgComponent = (props: SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" {...props}>
<path
fill="currentColor"
d="M384 96a32 32 0 0 1 64 0v786.752a32 32 0 0 1-54.592 22.656L95.936 608a32 32 0 0 1 0-45.312h.128a32 32 0 0 1 45.184 0L384 805.632zm192 45.248a32 32 0 0 1 54.592-22.592L928.064 416a32 32 0 0 1 0 45.312h-.128a32 32 0 0 1-45.184 0L640 218.496V928a32 32 0 1 1-64 0z"
/>
</svg>
);
export { SvgComponent as SortEp };