@customafk/lunas-ui 0.0.25 → 0.0.27

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

@@ -1,91 +0,0 @@
-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="border-border-weak 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-muted/20 size-full">
-                <div className="loader" />
-              </Flex>
-            ) : (
-              <section className="bg-muted-muted/20 relative flex-1 overflow-y-auto inset-shadow-sm">{children}</section>
-            )}
-          </DetailDialogMain>
-        </SidebarProvider>
-      </DetailDialogWrapper>
-    </Dialog>
-  )
-}

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

@@ -1,34 +0,0 @@
-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

@@ -1,74 +0,0 @@
-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" color="muted" 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

@@ -1,20 +0,0 @@
-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

@@ -1,104 +0,0 @@
-'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'
-
-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"
-                    color="muted"
-                    className={cn(
-                      'flex justify-between rounded-md px-3',
-                      'outline-border-weak font-normal',
-                      '[&_div]:justify-between',
-                      'data-[state=open]:border-primary-strong',
-                      'data-[state=open]:outline-1',
-                      'data-[state=open]:outline-primary-strong',
-                      'data-[state=open]:ring-primary-weak',
-                      'data-[state=open]:ring-4',
-                      'focus:border-primary-strong',
-                      'focus:ring-4',
-                      'focus:ring-primary-weak',
-                      'focus:outline-1',
-                      'focus:outline-primary-strong',
-                    )}
-                  >
-                    {field.value ? (
-                      <span className="flex min-w-0 items-center gap-2">{options?.find(({ value }) => value === field.value)?.label}</span>
-                    ) : (
-                      <span className="text-text-positive-muted">{placeholder}</span>
-                    )}
-                    <ChevronDownIcon size={16} className="text-text-positive-weak shrink-0" aria-hidden="true" />
-                  </Button>
-                </FormControl>
-              </PopoverTrigger>
-              <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>
-            </Popover>
-            {!!description && <FormDescription>{description}</FormDescription>}
-          </FormItem>
-        )
-      }}
-    />
-  )
-}

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

@@ -1,62 +0,0 @@
-'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

@@ -1,120 +0,0 @@
-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

@@ -1,56 +0,0 @@
-'use client'
-import type { FieldPath, FieldValues } from 'react-hook-form'
-
-import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../ui/form'
-import { type Option, MultipleSelector } 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>
-        )
-      }}
-    />
-  )
-}

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

@@ -1,54 +0,0 @@
-import { type FieldPath, type FieldValues, useWatch } from 'react-hook-form'
-
-import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../ui/form'
-import { NumberInput } from '../ui/inputs/number-input'
-
-type Props<TFieldValues extends FieldValues = FieldValues> = {
-  name: FieldPath<TFieldValues>
-  label?: string
-  description?: string
-  placeholder?: string
-  unitText?: string
-  isShowClearButton?: boolean
-  isShowErrorMsg?: boolean
-  isShowCount?: boolean
-  onValueChange?: (value?: number) => void
-}
-export const NumberField = <TFieldValues extends FieldValues = FieldValues>({
-  name,
-  label = 'Number Field',
-  placeholder = '0',
-  isShowErrorMsg = false,
-  isShowCount = false,
-  unitText = '',
-  description = '',
-  onValueChange,
-}: Props<TFieldValues>) => {
-  const valueWatch = useWatch({ name })
-
-  return (
-    <FormField
-      name={name}
-      render={({ field: { onChange, ...field } }) => (
-        <FormItem className="w-full gap-0">
-          <FormLabel>{label}</FormLabel>
-          <FormControl>
-            <NumberInput
-              {...field}
-              placeholder={placeholder}
-              className="w-full"
-              unitText={unitText}
-              onValueChange={(value) => {
-                onChange(value)
-                onValueChange?.(value)
-              }}
-            />
-          </FormControl>
-          {isShowCount && <div className="text-muted-foreground text-end text-xs">{valueWatch?.length ?? 0} characters</div>}
-          {!!description && <FormDescription>{description}</FormDescription>}
-          {isShowErrorMsg && <FormMessage />}
-        </FormItem>
-      )}
-    />
-  )
-}

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

@@ -1,38 +0,0 @@
-'use client'
-import type { FieldPath, FieldValues } from 'react-hook-form'
-
-import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../ui/form'
-import { PasswordInput } from '../ui/inputs/password-input'
-
-type Props<TFieldValues extends FieldValues = FieldValues> = {
-  name: FieldPath<TFieldValues>
-  label?: string
-  description?: string
-  placeholder?: string
-  isShowErrorMsg?: boolean
-  onValueChange?: (value: string) => void
-}
-export const PasswordField = <TFieldValues extends FieldValues = FieldValues>({
-  name,
-  label = 'Text Field',
-  placeholder = 'Enter text here',
-  isShowErrorMsg = false,
-  description,
-  onValueChange,
-}: Props<TFieldValues>) => {
-  return (
-    <FormField
-      name={name}
-      render={({ field }) => (
-        <FormItem className="w-full">
-          <FormLabel>{label}</FormLabel>
-          <FormControl>
-            <PasswordInput placeholder={placeholder} {...field} onValueChange={onValueChange} />
-          </FormControl>
-          {!!description && <FormDescription>{description}</FormDescription>}
-          {isShowErrorMsg && <FormMessage />}
-        </FormItem>
-      )}
-    />
-  )
-}