@customafk/lunas-ui 0.0.7 → 0.0.8

package/packages/components/dialogs/detail-dialog/component/wrapper.tsx

@@ -0,0 +1,17 @@
+import { DialogContent } from "@/components/ui/dialog";
+
+export const DetailDialogWrapper: React.FC<React.PropsWithChildren> = ({
+  children,
+}) => {
+  return (
+    <DialogContent
+      className="relative h-full max-h-[90svh] overflow-hidden rounded-lg border-none p-0 sm:max-w-[calc(100svw-2rem)]"
+      onInteractOutside={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      }}
+    >
+      {children}
+    </DialogContent>
+  );
+};

package/packages/components/dialogs/detail-dialog/index.tsx

@@ -0,0 +1,100 @@
+import { CatIcon } from "lucide-react";
+
+import { Flex } from "@/components/layouts/flex";
+import { Dialog } from "@/components/ui/dialog";
+
+import { DetailDialogHeader } from "./component/header";
+import { DetailDialogMain, DetailDialogMainHeader } from "./component/main";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from "./component/sidebar";
+import { DetailDialogWrapper } from "./component/wrapper";
+
+const DetailDialogSidebar: React.FC<
+  React.PropsWithChildren<{ title?: string; sidebarFooter?: React.ReactNode }>
+> = ({ title, sidebarFooter, children }) => {
+  return (
+    <Sidebar collapsible="icon" className="hidden border-r md:flex">
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton size="lg" tabIndex={-1}>
+              <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+                <CatIcon size={16} />
+              </div>
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-medium">
+                  {title || "Detail Dialog"}
+                </span>
+                <span className="truncate text-xs">Lunas Enterprise</span>
+              </div>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarGroup>{children}</SidebarGroup>
+      </SidebarContent>
+      {sidebarFooter && <SidebarFooter>{sidebarFooter}</SidebarFooter>}
+    </Sidebar>
+  );
+};
+
+type Props = {
+  open?: boolean;
+  isLoading?: boolean;
+  sidebarTitle?: string;
+  sidebar?: React.ReactNode;
+  sidebarFooter?: React.ReactNode;
+  title: string;
+  createdAt: string | Date | number;
+  onOpenChange?: (open: boolean) => void | Promise<void>;
+};
+export const DetailDialog: React.FC<React.PropsWithChildren<Props>> = ({
+  open,
+  isLoading = false,
+  sidebarTitle,
+  sidebar,
+  sidebarFooter,
+  title,
+  createdAt,
+  onOpenChange,
+  children,
+}) => {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DetailDialogWrapper>
+        <DetailDialogHeader />
+
+        <SidebarProvider className="h-full min-h-[85svh] items-start">
+          <DetailDialogSidebar
+            title={sidebarTitle}
+            sidebarFooter={sidebarFooter}
+          >
+            {sidebar}
+          </DetailDialogSidebar>
+          <DetailDialogMain>
+            <DetailDialogMainHeader title={title} createdAt={createdAt} />
+            {isLoading ? (
+              <Flex justify="center" className="bg-muted/50 size-full">
+                <div className="loader" />
+              </Flex>
+            ) : (
+              <section className="bg-muted/50 relative flex-1 overflow-y-auto inset-shadow-sm">
+                {children}
+              </section>
+            )}
+          </DetailDialogMain>
+        </SidebarProvider>
+      </DetailDialogWrapper>
+    </Dialog>
+  );
+};

package/packages/components/dialogs/error-dialog.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { AlertTriangleIcon } from "lucide-react";
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogContent,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "../ui/alert-dialog";
+
+type Props = {
+  open?: boolean;
+  title?: string;
+  description?: string;
+  onOpenChange?: (open: boolean) => void;
+};
+export const ErrorDialog: React.FC<React.PropsWithChildren<Props>> = ({
+  open,
+  title,
+  children,
+  onOpenChange,
+}) => {
+  const handleClose = React.useCallback(() => {
+    onOpenChange?.(false);
+  }, [onOpenChange]);
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent className="gap-8 p-4 sm:max-w-md">
+        <AlertDialogHeader>
+          <div className="text-destructive flex flex-col items-center">
+            <AlertTriangleIcon size={42} />
+            <AlertDialogTitle className="text-xl font-medium">
+              {title || "An error occurred"}
+            </AlertDialogTitle>
+          </div>
+        </AlertDialogHeader>
+        {children}
+        <AlertDialogFooter>
+          <AlertDialogAction className="w-28" onClick={handleClose}>
+            Đóng
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};

package/packages/components/dialogs/form-dialog.tsx

@@ -0,0 +1,106 @@
+import type {
+  FieldValues,
+  FormState,
+  SubmitErrorHandler,
+  UseFormProps,
+} from "react-hook-form";
+
+import { cn } from "@/lib/utils";
+
+import { FormWrapper } from "../forms/form-wrapper";
+import { Button } from "../ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "../ui/dialog";
+
+type Props<TFieldValues extends FieldValues = FieldValues> = {
+  form: UseFormProps<TFieldValues>;
+
+  open: boolean;
+  isSubmitting?: boolean;
+  isResetAfterSubmit?: boolean;
+  disableSubmit?: boolean;
+  title?: string;
+  description?: string;
+  className?: string;
+
+  onOpenChange: (open: boolean) => void;
+  onSubmit: (
+    data: TFieldValues,
+    formState: FormState<FieldValues>,
+    dirtyFields: FormState<FieldValues>["dirtyFields"],
+  ) => void | Promise<void>;
+  onError?: SubmitErrorHandler<TFieldValues>;
+  onReset?: () => void;
+};
+export const FormDialog = <TFieldValues extends FieldValues = FieldValues>({
+  form,
+  open,
+  isSubmitting = false,
+  isResetAfterSubmit = true,
+  disableSubmit = false,
+  title,
+  description,
+  className,
+
+  onOpenChange,
+  onSubmit,
+  onError,
+  onReset,
+  children,
+}: React.PropsWithChildren<Props<TFieldValues>>) => {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        className={cn("flex flex-col gap-0 border-none p-0", className)}
+        onInteractOutside={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+        }}
+      >
+        <DialogHeader className="flex-0 gap-2 border-b px-6 pt-6 pb-4">
+          <DialogTitle>{title || "Form Dialog"}</DialogTitle>
+          <DialogDescription>
+            {description ||
+              "This is a form dialog where you can add your form elements."}
+          </DialogDescription>
+        </DialogHeader>
+        <FormWrapper
+          form={form}
+          isResetAfterSubmit={isResetAfterSubmit}
+          className="flex flex-1 flex-col overflow-y-auto pt-4"
+          onSubmit={onSubmit}
+          onError={onError}
+        >
+          <main className="flex-1 overflow-y-auto px-6">{children}</main>
+          <DialogFooter className="border-t px-6 pt-4 pb-6">
+            <Button
+              tabIndex={-1}
+              type="button"
+              variant="outline"
+              className="w-30 rounded-full"
+              onClick={onReset}
+            >
+              Reset
+            </Button>
+            <Button
+              autoFocus
+              tabIndex={0}
+              type="submit"
+              isLoading={isSubmitting}
+              disabled={disableSubmit}
+              className="w-30 rounded-full"
+            >
+              Xác nhận
+            </Button>
+          </DialogFooter>
+        </FormWrapper>
+      </DialogContent>
+    </Dialog>
+  );
+};

package/packages/components/dialogs/loading-dialog.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+import { Dialog, DialogContent, DialogTitle } from "../ui/dialog";
+
+type Props = {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+};
+export const LoadingDialog: React.FC<Props> = ({ open, onOpenChange }) => {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        showCloseButton={false}
+        className="pointer-events-none border-none bg-transparent shadow-none outline-0 [&>div]:bg-transparent"
+      >
+        <DialogTitle />
+        <div className="flex items-center justify-center">
+          <div className="loader opacity-60" />
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};

package/packages/components/forms/combobox-field.tsx

@@ -0,0 +1,113 @@
+"use client"
+import React from 'react'
+import type { FieldPath, FieldValues } from 'react-hook-form'
+import { ChevronDownIcon, PlusIcon } from 'lucide-react'
+
+import { Button } from '@/components/ui/button'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from '@/components/ui/command'
+import { FormControl, FormDescription, FormField, FormItem, FormLabel } from '@/components/ui/form'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { cn } from '@/lib/utils'
+import { PopoverPortal } from '@radix-ui/react-popover'
+
+type Props<TFieldValues extends FieldValues = FieldValues> = {
+  name: FieldPath<TFieldValues>
+  label?: string
+  placeholder?: string
+  options?: { value: string | number; label: string }[]
+  isShowErrorMsg?: boolean
+  modal?: boolean
+  description?: string
+  onAddNewItem?: () => void
+}
+
+export const ComboboxField = <TFieldValues extends FieldValues = FieldValues>({
+  name,
+  label = 'Combobox',
+  placeholder = 'Chọn một mục',
+  description,
+  options,
+  onAddNewItem,
+}: Props<TFieldValues>) => {
+  return (
+    <FormField
+      name={name}
+      render={({ field }) => {
+        return (
+          <FormItem className="w-full">
+            <FormLabel>{label}</FormLabel>
+            <Popover modal={true}>
+              <PopoverTrigger asChild>
+                <FormControl>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    role="combobox"
+                    className={cn(
+                      'flex justify-between rounded-md px-3',
+                      'font-normal outline-offset-0',
+                      'focus-visible:outline-[3px]',
+                      '[&_div]:justify-between',
+                      'data-[state=open]:border-primary',
+                      'data-[state=open]:ring-ring',
+                      'data-[state=open]:ring-4',
+                      'focus:border-primary',
+                      'focus:ring-ring',
+                      'focus:ring-4',
+                    )}
+                  >
+                    {field.value ? (
+                      <span className="flex min-w-0 items-center gap-2">
+                        {options?.find(({ value }) => value === field.value)?.label}
+                      </span>
+                    ) : (
+                      <span className="text-muted-foreground">{placeholder}</span>
+                    )}
+                    <ChevronDownIcon size={16} className="text-muted-foreground/80 shrink-0" aria-hidden="true" />
+                  </Button>
+                </FormControl>
+              </PopoverTrigger>
+              <PopoverPortal>
+                <PopoverContent className="border-input w-full max-w-[var(--radix-popover-trigger-width)] p-0">
+                  <Command>
+                    <CommandInput placeholder={placeholder ?? 'Tìm kiếm'} />
+                    <CommandList>
+                      <CommandGroup className="max-h-40 overflow-y-auto">
+                        {options?.map(({ value, label }) => (
+                          <CommandItem key={value} value={label} onSelect={() => field.onChange(value)}>
+                            {label}
+                          </CommandItem>
+                        ))}
+                      </CommandGroup>
+                      {onAddNewItem && (
+                        <React.Fragment>
+                          <CommandSeparator />
+                          <CommandGroup>
+                            <Button type="button" variant="ghost" className="w-full justify-start font-normal">
+                              <PlusIcon size={14} className="-ms-2 opacity-60" aria-hidden="true" />
+                              Thêm mới
+                            </Button>
+                          </CommandGroup>
+                        </React.Fragment>
+                      )}
+                    </CommandList>
+                    <CommandEmpty>Không có kết quả</CommandEmpty>
+                  </Command>
+                </PopoverContent>
+              </PopoverPortal>
+            </Popover>
+            {!!description && <FormDescription>{description}</FormDescription>}
+          </FormItem>
+        )
+      }}
+    />
+  )
+}

package/packages/components/forms/date-field.tsx

@@ -0,0 +1,65 @@
+"use client"
+import type { FieldPath, FieldValues } from 'react-hook-form'
+import { format } from 'date-fns'
+import { CalendarIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+import { Button } from '../ui/button'
+import { Calendar } from '../ui/calendar'
+import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../ui/form'
+import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover'
+
+type Props<TFieldValues extends FieldValues = FieldValues> = {
+  name: FieldPath<TFieldValues>
+  label?: string
+  placeholder?: string
+  description?: string
+  isShowErrorMsg?: boolean
+  modal?: boolean
+}
+
+export const DateField = <TFieldValues extends FieldValues = FieldValues>({
+  name,
+  label = 'Date Field',
+  placeholder = 'Select a date',
+  description = '',
+  isShowErrorMsg = false,
+}: Props<TFieldValues>) => {
+  return (
+    <FormField
+      name={name}
+      render={({ field }) => (
+        <FormItem className="w-full">
+          <FormLabel>{label}</FormLabel>
+          <Popover modal>
+            <PopoverTrigger asChild>
+              <FormControl>
+                <Button
+                  variant="outline"
+                  className={cn('w-full pl-3 text-left font-normal', !field.value && 'text-muted-foreground')}
+                >
+                  {field.value ? format(field.value, 'PPP') : <span> {placeholder || 'Pick a date'}</span>}
+                  <CalendarIcon className="ml-auto size-4 opacity-50" />
+                </Button>
+              </FormControl>
+            </PopoverTrigger>
+            <PopoverContent className="w-auto p-0" align="start">
+              <Calendar
+                mode="single"
+                selected={field.value}
+                onSelect={(date) => {
+                  field.onChange(date?.toISOString())
+                }}
+                captionLayout="dropdown"
+                disabled={(date) => date < new Date('2022-01-01')}
+              />
+            </PopoverContent>
+          </Popover>
+          {!!description && <FormDescription>{description}</FormDescription>}
+          {isShowErrorMsg && <FormMessage />}
+        </FormItem>
+      )}
+    />
+  )
+}

package/packages/components/forms/form-wrapper.tsx

@@ -0,0 +1,146 @@
+import React from "react";
+import {
+  type FieldValues,
+  type FormState,
+  type SubmitErrorHandler,
+  type SubmitHandler,
+  useForm,
+  type UseFormProps,
+} from "react-hook-form";
+import { AlertCircleIcon } from "lucide-react";
+
+import type { AnyEntity } from "@/types";
+import { ErrorMessage } from "@hookform/error-message";
+
+import { ErrorDialog } from "../dialogs/error-dialog";
+import { Form } from "../ui/form";
+
+type Props<TFieldValues extends FieldValues = FieldValues> = {
+  form: UseFormProps<TFieldValues>;
+  isResetAfterSubmit?: boolean;
+  className?: string;
+  onSubmit: (
+    data: TFieldValues,
+    formState: FormState<FieldValues>,
+    dirtyFields: FormState<FieldValues>["dirtyFields"],
+  ) => void | Promise<void>;
+  onError?: SubmitErrorHandler<TFieldValues>;
+  onSubcribe?: (values: TFieldValues) => void;
+};
+
+export const FormWrapper = <TFieldValues extends FieldValues = FieldValues>({
+  form: FormConfig,
+  isResetAfterSubmit = true,
+  className,
+  onSubmit,
+  onError,
+  onSubcribe,
+  children,
+}: React.PropsWithChildren<Props<TFieldValues>>) => {
+  const form = useForm({
+    ...FormConfig,
+    criteriaMode: "all",
+  });
+
+  const { formState, reset, handleSubmit, subscribe } = form;
+  const { dirtyFields } = formState;
+
+  const [errorOpen, setErrorOpen] = React.useState<boolean>(false);
+
+  const handleFormSubmit = React.useCallback<SubmitHandler<TFieldValues>>(
+    (data) => {
+      onSubmit(data, formState, dirtyFields);
+      if (isResetAfterSubmit) {
+        reset();
+      }
+    },
+    [dirtyFields, formState, isResetAfterSubmit, onSubmit, reset],
+  );
+
+  const handleFormError = React.useCallback<SubmitErrorHandler<TFieldValues>>(
+    (errors) => {
+      const errorKeys = Object.keys(errors);
+      if (errorKeys.length === 0) return;
+      onError?.(errors);
+      setErrorOpen(true);
+    },
+    [onError],
+  );
+
+  React.useEffect(() => {
+    if (!onSubcribe) return;
+    const callback = subscribe({
+      formState: { values: true },
+      callback: ({ values }) => {
+        onSubcribe(values);
+      },
+    });
+    return () => callback();
+  }, [onSubcribe, subscribe]);
+
+  return (
+    <Form {...form}>
+      <form
+        className={className}
+        onSubmit={handleSubmit(handleFormSubmit, handleFormError)}
+      >
+        {children}
+      </form>
+      <ErrorDialog
+        open={errorOpen}
+        title="Lỗi nhập dữ liệu"
+        description="An unexpected error has occurred. Please check the errors below and try again."
+        onOpenChange={setErrorOpen}
+      >
+        {errorOpen && (
+          <>
+            {Object.keys(formState.errors).length > 0 ? (
+              <div className="flex max-w-100 flex-col gap-2 px-4">
+                <p className="text-muted-foreground text-sm font-semibold">
+                  Cảnh báo: Vui lòng kiểm tra các lỗi sau:
+                </p>
+                <div className="flex flex-col space-y-1">
+                  {Object.entries(formState.errors).map(([key]) => (
+                    <ErrorMessage
+                      key={key}
+                      errors={formState.errors}
+                      name={key as AnyEntity}
+                      render={({ messages }) => {
+                        return (
+                          <>
+                            {messages
+                              ? Object.entries(messages).map(
+                                  ([type, message]) => {
+                                    return (
+                                      <div
+                                        key={type}
+                                        className="text-accent-foreground flex items-start gap-x-1 truncate text-sm font-normal"
+                                      >
+                                        <AlertCircleIcon
+                                          size={16}
+                                          className="text-destructive mt-0.5 min-w-4 flex-0"
+                                        />
+                                        <p className="line-clamp-2 flex-1 text-wrap">
+                                          {message}
+                                        </p>
+                                      </div>
+                                    );
+                                  },
+                                )
+                              : null}
+                          </>
+                        );
+                      }}
+                    />
+                  ))}
+                </div>
+              </div>
+            ) : (
+              <p className="text-muted-foreground text-sm">No errors found.</p>
+            )}
+          </>
+        )}
+      </ErrorDialog>
+    </Form>
+  );
+};

package/packages/components/forms/multi-select-field.tsx

@@ -0,0 +1,56 @@
+"use client"
+import type { FieldPath, FieldValues } from 'react-hook-form'
+
+import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../ui/form'
+import MultipleSelector, { type Option } from '../ui/multi-select'
+
+type Props<TFieldValues extends FieldValues = FieldValues> = {
+  name: FieldPath<TFieldValues>
+  isShowLabel?: boolean
+  isShowErrorMsg?: boolean
+  label?: string
+  description?: string
+  placeholder?: string
+  options?: { value: string; label: string }[]
+  onAdd?: () => void
+}
+export const MultiSelectField = <TFieldValues extends FieldValues = FieldValues>({
+  name,
+  label = 'Multi Select Field',
+  isShowLabel = true,
+  isShowErrorMsg,
+  placeholder = 'Select options',
+  description = '',
+  options = [],
+  onAdd,
+}: Props<TFieldValues>) => {
+  return (
+    <FormField
+      name={name}
+      render={({ field: { value, onChange } }) => {
+        const val = options.filter((option) => value?.includes(option.value))
+        const handleOnChange = (value: Option[]) => {
+          const selectedValues = value.map((v) => v.value)
+          onChange(selectedValues)
+        }
+        return (
+          <FormItem className="w-full gap-0">
+            {isShowLabel && <FormLabel>{label}</FormLabel>}
+            <FormControl>
+              <MultipleSelector
+                placeholder={placeholder}
+                emptyIndicator="No options available"
+                value={val}
+                options={options}
+                onChange={handleOnChange}
+                onAddNewItem={onAdd}
+              />
+            </FormControl>
+            {!!description && <FormDescription>{description}</FormDescription>}
+            {isShowErrorMsg && <FormMessage />}
+          </FormItem>
+        )
+      }}
+    />
+  )
+}