@customafk/lunas-ui 0.0.21 → 0.0.23

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

@@ -1,32 +1,21 @@
-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 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 type { AnyEntity } from '@/types'
+import { ErrorMessage } from '@hookform/error-message'
 
-import { ErrorDialog } from "../dialogs/error-dialog";
-import { Form } from "../ui/form";
+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;
-};
+  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,
@@ -39,51 +28,48 @@ export const FormWrapper = <TFieldValues extends FieldValues = FieldValues>({
 }: React.PropsWithChildren<Props<TFieldValues>>) => {
   const form = useForm({
     ...FormConfig,
-    criteriaMode: "all",
-  });
+    criteriaMode: 'all',
+  })
 
-  const { formState, reset, handleSubmit, subscribe } = form;
-  const { dirtyFields } = formState;
+  const { formState, reset, handleSubmit, subscribe } = form
+  const { dirtyFields } = formState
 
-  const [errorOpen, setErrorOpen] = React.useState<boolean>(false);
+  const [errorOpen, setErrorOpen] = React.useState<boolean>(false)
 
   const handleFormSubmit = React.useCallback<SubmitHandler<TFieldValues>>(
     (data) => {
-      onSubmit(data, formState, dirtyFields);
+      onSubmit(data, formState, dirtyFields)
       if (isResetAfterSubmit) {
-        reset();
+        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);
+      const errorKeys = Object.keys(errors)
+      if (errorKeys.length === 0) return
+      onError?.(errors)
+      setErrorOpen(true)
     },
     [onError],
-  );
+  )
 
   React.useEffect(() => {
-    if (!onSubcribe) return;
+    if (!onSubcribe) return
     const callback = subscribe({
       formState: { values: true },
       callback: ({ values }) => {
-        onSubcribe(values);
+        onSubcribe(values)
       },
-    });
-    return () => callback();
-  }, [onSubcribe, subscribe]);
+    })
+    return () => callback()
+  }, [onSubcribe, subscribe])
 
   return (
     <Form {...form}>
-      <form
-        className={className}
-        onSubmit={handleSubmit(handleFormSubmit, handleFormError)}
-      >
+      <form className={className} onSubmit={handleSubmit(handleFormSubmit, handleFormError)}>
         {children}
       </form>
       <ErrorDialog
@@ -96,9 +82,7 @@ export const FormWrapper = <TFieldValues extends FieldValues = FieldValues>({
           <>
             {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>
+                <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
@@ -109,27 +93,17 @@ export const FormWrapper = <TFieldValues extends FieldValues = FieldValues>({
                         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>
-                                    );
-                                  },
-                                )
+                              ? 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}
                           </>
-                        );
+                        )
                       }}
                     />
                   ))}
@@ -142,5 +116,5 @@ export const FormWrapper = <TFieldValues extends FieldValues = FieldValues>({
         )}
       </ErrorDialog>
     </Form>
-  );
-};
+  )
+}

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

@@ -1,8 +1,8 @@
-"use client"
+'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'
+import { type Option, MultipleSelector } from '../ui/multi-select'
 
 type Props<TFieldValues extends FieldValues = FieldValues> = {
   name: FieldPath<TFieldValues>

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

@@ -44,9 +44,7 @@ export const NumberField = <TFieldValues extends FieldValues = FieldValues>({
               }}
             />
           </FormControl>
-          {isShowCount && (
-            <div className="text-muted-foreground text-end text-xs">{valueWatch?.length ?? 0} characters</div>
-          )}
+          {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,4 +1,4 @@
-"use client"
+'use client'
 import type { FieldPath, FieldValues } from 'react-hook-form'
 
 import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../ui/form'

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

@@ -1,4 +1,4 @@
-"use client"
+'use client'
 import type { FieldPath, FieldValues } from 'react-hook-form'
 
 import { cn } from '@/lib/utils'

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

@@ -1,4 +1,4 @@
-"use client"
+'use client'
 import type { FieldPath, FieldValues } from 'react-hook-form'
 
 import { cn } from '@/lib/utils'
@@ -23,9 +23,7 @@ export const SwitchField = <TFieldValues extends FieldValues = FieldValues>({
       name={name}
       render={({ field }) => (
         <div className="spage-y-1">
-          <FormItem
-            className={cn('border-border flex flex-row items-center justify-between rounded-lg border p-3 shadow-xs')}
-          >
+          <FormItem className={cn('border-border-weak flex flex-row items-center justify-between rounded-lg border p-3 shadow-xs')}>
             <div className="space-y-0.5">
               <FormLabel className="cursor-pointer text-sm">{label}</FormLabel>
               {description && <FormDescription className="text-xs">{description}</FormDescription>}

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

@@ -1,4 +1,4 @@
-"use client"
+'use client'
 import React from 'react'
 import { type FieldPath, type FieldValues, useWatch } from 'react-hook-form'
 import { XIcon } from 'lucide-react'
@@ -48,12 +48,7 @@ export const TextField = <TFieldValues extends FieldValues = FieldValues>({
           {isShowLabel && <FormLabel>{label}</FormLabel>}
           <div className="relative">
             <FormControl>
-              <Input
-                {...field}
-                placeholder={placeholder}
-                className={cn('w-full', isShowClearButton && 'pr-9')}
-                onValueChange={onValueChange}
-              />
+              <Input {...field} placeholder={placeholder} className={cn('w-full', isShowClearButton && 'pr-9')} onValueChange={onValueChange} />
             </FormControl>
             {isShowClearButton && valueWatch && (
               <button
@@ -68,9 +63,7 @@ export const TextField = <TFieldValues extends FieldValues = FieldValues>({
           </div>
           <Flex width="full" padding="none" justify="end">
             {isShowErrorMsg && <FormMessage className="grow" />}
-            {isShowCount && (
-              <div className="text-muted-foreground text-end text-xs">{valueWatch?.length ?? 0} characters</div>
-            )}
+            {isShowCount && <div className="text-muted-foreground text-end text-xs">{valueWatch?.length ?? 0} characters</div>}
           </Flex>
           {!!description && <FormDescription>{description}</FormDescription>}
         </FormItem>

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

@@ -1,4 +1,4 @@
-"use client"
+'use client'
 import { type FieldPath, type FieldValues, useWatch } from 'react-hook-form'
 
 import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../ui/form'
@@ -33,17 +33,9 @@ export const TextareaField = <TFieldValues extends FieldValues = FieldValues>({
         <FormItem className="w-full">
           <FormLabel>{label}</FormLabel>
           <FormControl>
-            <Textarea
-              {...field}
-              placeholder={placeholder}
-              className="w-full"
-              rows={rows}
-              onValueChange={onValueChange}
-            />
+            <Textarea {...field} placeholder={placeholder} className="w-full" rows={rows} onValueChange={onValueChange} />
           </FormControl>
-          {isShowCount && (
-            <div className="text-muted-foreground text-end text-xs">{valueWatch?.length ?? 0} characters</div>
-          )}
+          {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/layouts/flex.tsx

@@ -1,93 +1,82 @@
-"use client";
-import React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
+'use client'
+import React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
 
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils'
 
-const flexVariants = cva(["relative flex", "text-sm"], {
+const flexVariants = cva(['relative flex', 'text-sm'], {
   variants: {
     vertical: {
-      true: "flex-col",
-      false: "flex-row",
+      true: 'flex-col',
+      false: 'flex-row',
     },
     width: {
-      full: "w-full",
-      auto: "w-auto",
-      fit: "w-fit",
-      screen: "w-screen",
-      min: "w-min",
-      max: "w-max",
+      full: 'w-full',
+      auto: 'w-auto',
+      fit: 'w-fit',
+      screen: 'w-screen',
+      min: 'w-min',
+      max: 'w-max',
     },
     wrap: {
-      true: "flex-wrap",
-      false: "flex-nowrap",
+      true: 'flex-wrap',
+      false: 'flex-nowrap',
     },
     margin: {
-      sm: "m-2",
-      md: "m-4",
-      lg: "m-6",
-      xl: "m-8",
-      none: "m-0",
+      sm: 'm-2',
+      md: 'm-4',
+      lg: 'm-6',
+      xl: 'm-8',
+      none: 'm-0',
     },
     padding: {
-      sm: "p-2",
-      md: "p-4",
-      lg: "p-6",
-      xl: "p-8",
-      none: "p-0",
+      sm: 'p-2',
+      md: 'p-4',
+      lg: 'p-6',
+      xl: 'p-8',
+      none: 'p-0',
     },
     gap: {
-      xs: "gap-1",
-      sm: "gap-2",
-      md: "gap-4",
-      lg: "gap-6",
-      xl: "gap-8",
-      none: "gap-0",
+      xs: 'gap-1',
+      sm: 'gap-2',
+      md: 'gap-4',
+      lg: 'gap-6',
+      xl: 'gap-8',
+      none: 'gap-0',
     },
     justify: {
-      start: "justify-start",
-      center: "justify-center",
-      end: "justify-end",
-      between: "justify-between",
-      around: "justify-around",
-      evenly: "justify-evenly",
-      stretch: "justify-stretch",
+      start: 'justify-start',
+      center: 'justify-center',
+      end: 'justify-end',
+      between: 'justify-between',
+      around: 'justify-around',
+      evenly: 'justify-evenly',
+      stretch: 'justify-stretch',
     },
     align: {
-      start: "items-start",
-      center: "items-center",
-      end: "items-end",
-      baseline: "items-baseline",
-      stretch: "items-stretch",
+      start: 'items-start',
+      center: 'items-center',
+      end: 'items-end',
+      baseline: 'items-baseline',
+      stretch: 'items-stretch',
     },
   },
   defaultVariants: {
     vertical: false,
     wrap: true,
-    width: "fit",
-    margin: "none",
-    padding: "sm",
-    gap: "xs",
-    justify: "start",
-    align: "center",
+    width: 'fit',
+    margin: 'none',
+    padding: 'sm',
+    gap: 'xs',
+    justify: 'start',
+    align: 'center',
   },
-});
+})
 
 type Props = {
-  className?: string;
-} & VariantProps<typeof flexVariants>;
-export const Flex = ({
-  vertical,
-  wrap,
-  width,
-  margin,
-  padding,
-  gap,
-  justify,
-  align,
-  className,
-  children,
-}: React.PropsWithChildren<Props>) => {
+  className?: string
+} & VariantProps<typeof flexVariants>
+export const Flex = ({ vertical, wrap, width, margin, padding, gap, justify, align, className, children }: React.PropsWithChildren<Props>) => {
   return (
     <div
       className={cn(
@@ -106,5 +95,5 @@ export const Flex = ({
     >
       {children}
     </div>
-  );
-};
+  )
+}

package/packages/components/layouts/main/content.tsx

@@ -1,4 +1,4 @@
-import { SidebarInset } from "@/components/ui/sidebar";
+import { SidebarInset } from '@/components/ui/sidebar'
 
 export const MainLayoutContent = ({ children }: React.PropsWithChildren) => {
   return (
@@ -7,5 +7,5 @@ export const MainLayoutContent = ({ children }: React.PropsWithChildren) => {
         <div className="absolute inset-0">{children}</div>
       </section>
     </SidebarInset>
-  );
-};
+  )
+}

package/packages/components/layouts/main/header.tsx

@@ -1,24 +1,20 @@
-import {
-  BellIcon,
-  CircleQuestionMarkIcon,
-  ShoppingCartIcon,
-} from "lucide-react";
+import { BellIcon, CircleQuestionMarkIcon, ShoppingCartIcon } from 'lucide-react'
 
-import { Button } from "@/components/ui/button";
-import { SidebarTrigger } from "@/components/ui/sidebar";
-import { cn } from "@/lib/utils";
+import { Button } from '@/components/ui/button'
+import { SidebarTrigger } from '@/components/ui/sidebar'
+import { cn } from '@/lib/utils'
 
 export const MainLayoutHeader = () => {
   return (
     <header
       className={cn(
-        "bg-card",
-        "h-(--header-height)",
-        "absolute inset-x-0 top-0 z-20",
-        "flex items-center gap-2 border-b shadow-sm",
-        "transition-[width,height] ease-linear",
-        "group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)",
-        "px-4",
+        'bg-card',
+        'h-(--header-height)',
+        'absolute inset-x-0 top-0 z-20',
+        'flex items-center gap-2 border-b shadow-sm',
+        'transition-[width,height] ease-linear',
+        'group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)',
+        'px-4',
       )}
     >
       <SidebarTrigger />
@@ -33,21 +29,13 @@ export const MainLayoutHeader = () => {
         </div>
       </div>
       <div className="flex flex-1 items-center justify-end">
-        <Button
-          variant="ghost"
-          size="icon"
-          className="text-muted-foreground rounded-full"
-        >
+        <Button variant="ghost" size="icon" className="text-muted-foreground rounded-full">
           <CircleQuestionMarkIcon />
         </Button>
-        <Button
-          variant="ghost"
-          size="icon"
-          className="text-muted-foreground rounded-full"
-        >
+        <Button variant="ghost" size="icon" className="text-muted-foreground rounded-full">
           <BellIcon />
         </Button>
       </div>
     </header>
-  );
-};
+  )
+}

package/packages/components/layouts/main/wrapper.tsx

@@ -1,5 +1,5 @@
-import { SidebarProvider } from "@/components/ui/sidebar";
+import { SidebarProvider } from '@/components/ui/sidebar'
 
 export const MainLayoutWrapper = ({ children }: React.PropsWithChildren) => {
-  return <SidebarProvider className="w-svw">{children}</SidebarProvider>;
-};
+  return <SidebarProvider className="w-svw">{children}</SidebarProvider>
+}

package/packages/components/styles/base.css

@@ -0,0 +1,29 @@
+:root {
+  body {
+    margin: 0;
+    min-width: 320px;
+    min-height: 100vh;
+
+    font-synthesis: none;
+    font-synthesis-weight: none;
+    text-rendering: optimizeLegibility;
+
+    letter-spacing: -0.015625rem;
+    overflow-wrap: break-word;
+    hyphens: auto;
+
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  /* Custom scrollbar styling. Thanks @pranathiperii. */
+  ::-webkit-scrollbar {
+    width: 0.375rem;
+  }
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: var(--border);
+    border-radius: 0.375rem;
+  }
+}