@customafk/lunas-ui 0.0.20 → 0.0.22

package/packages/components/data-display/role-badge.tsx

@@ -1,33 +1,29 @@
-import React from "react";
+import React from 'react'
 
-import { ERole } from "@/types";
+import { ERole } from '@/types'
 
-import { Badge } from "../ui/badge";
+import { Badge } from '../ui/badge'
 
 type Props = {
-  status: ERole;
-};
-export const RoleBadge: React.FC<React.PropsWithChildren<Props>> = ({
-  status,
-}) => {
-  const colors = React.useMemo<
-    Record<ERole, React.ComponentProps<typeof Badge>["color"]>
-  >(() => {
+  status: ERole
+}
+export const RoleBadge: React.FC<React.PropsWithChildren<Props>> = ({ status }) => {
+  const colors = React.useMemo<Record<ERole, React.ComponentProps<typeof Badge>['color']>>(() => {
     return {
-      [ERole.ADMIN]: "red",
-      [ERole.SUPER_ADMIN]: "purple",
-      [ERole.MODERATOR]: "indigo",
-      [ERole.STAFF]: "green",
-      [ERole.USER]: "blue",
-    };
-  }, []);
+      [ERole.ADMIN]: 'red',
+      [ERole.SUPER_ADMIN]: 'purple',
+      [ERole.MODERATOR]: 'indigo',
+      [ERole.STAFF]: 'green',
+      [ERole.USER]: 'blue',
+    }
+  }, [])
   return (
     <Badge color={colors[status]} className="min-w-24 justify-center">
-      {status === ERole.SUPER_ADMIN && "Super Admin"}
-      {status === ERole.ADMIN && "Admin"}
-      {status === ERole.MODERATOR && "Moderator"}
-      {status === ERole.STAFF && "Staff"}
-      {status === ERole.USER && "User"}
+      {status === ERole.SUPER_ADMIN && 'Super Admin'}
+      {status === ERole.ADMIN && 'Admin'}
+      {status === ERole.MODERATOR && 'Moderator'}
+      {status === ERole.STAFF && 'Staff'}
+      {status === ERole.USER && 'User'}
     </Badge>
-  );
-};
+  )
+}

package/packages/components/data-display/statistic.tsx

@@ -1,141 +1,139 @@
-import React from "react";
+import React from 'react'
 
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils'
 
-import { Flex } from "../layouts/flex";
+import { Flex } from '../layouts/flex'
 
 type Props = {
-  decimalSeparator?: string;
-  groupSeparator?: string;
-  prefix?: React.ReactNode;
-  suffix?: React.ReactNode;
-  precision?: number; // Số chữ số thập phân
-  roundingMode?: "round" | "floor" | "ceil"; // Kiểu làm tròn
-  showTrailingZeros?: boolean; // Hiển thị số 0 cuối
-  size?: "xs" | "sm" | "md" | "lg" | "xl"; // Kích thước của component
-  value: number | string;
-};
+  decimalSeparator?: string
+  groupSeparator?: string
+  prefix?: React.ReactNode
+  suffix?: React.ReactNode
+  precision?: number // Số chữ số thập phân
+  roundingMode?: 'round' | 'floor' | 'ceil' // Kiểu làm tròn
+  showTrailingZeros?: boolean // Hiển thị số 0 cuối
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' // Kích thước của component
+  value: number | string
+}
 export const Statistic = React.memo(
   ({
-    decimalSeparator = ".",
-    groupSeparator = ",",
+    decimalSeparator = '.',
+    groupSeparator = ',',
     prefix: Prefix,
     suffix: Suffix,
     precision,
-    roundingMode = "round",
+    roundingMode = 'round',
     showTrailingZeros = false,
-    size = "lg",
+    size = 'lg',
     value,
   }: Props) => {
     // Memoize rounding function
     const applyRounding = React.useCallback(
       (num: number, precisionValue: number): number => {
-        const multiplier = Math.pow(10, precisionValue);
+        const multiplier = Math.pow(10, precisionValue)
 
         switch (roundingMode) {
-          case "floor":
-            return Math.floor(num * multiplier) / multiplier;
-          case "ceil":
-            return Math.ceil(num * multiplier) / multiplier;
-          case "round":
+          case 'floor':
+            return Math.floor(num * multiplier) / multiplier
+          case 'ceil':
+            return Math.ceil(num * multiplier) / multiplier
+          case 'round':
           default:
-            return Math.round(num * multiplier) / multiplier;
+            return Math.round(num * multiplier) / multiplier
         }
       },
       [roundingMode],
-    );
+    )
 
     // Memoize number formatting options
     const formatOptions = React.useMemo((): Intl.NumberFormatOptions => {
-      const options: Intl.NumberFormatOptions = {};
+      const options: Intl.NumberFormatOptions = {}
 
-      if (typeof precision === "number" && precision >= 0) {
+      if (typeof precision === 'number' && precision >= 0) {
         if (showTrailingZeros) {
-          options.minimumFractionDigits = precision;
-          options.maximumFractionDigits = precision;
+          options.minimumFractionDigits = precision
+          options.maximumFractionDigits = precision
         } else {
-          options.maximumFractionDigits = precision;
+          options.maximumFractionDigits = precision
         }
       }
 
-      return options;
-    }, [precision, showTrailingZeros]);
+      return options
+    }, [precision, showTrailingZeros])
 
     const formatNumber = React.useCallback(
       (num: number): string => {
-        let processedNum = num;
+        let processedNum = num
 
         // Áp dụng làm tròn nếu có precision
-        if (typeof precision === "number" && precision >= 0) {
-          processedNum = applyRounding(num, precision);
+        if (typeof precision === 'number' && precision >= 0) {
+          processedNum = applyRounding(num, precision)
         }
 
-        return processedNum.toLocaleString("en-US", formatOptions);
+        return processedNum.toLocaleString('en-US', formatOptions)
       },
       [applyRounding, formatOptions, precision],
-    );
+    )
 
     // Memoize value processing
     const processedValue = React.useMemo((): string => {
       // Xử lý giá trị number
-      if (typeof value === "number") {
+      if (typeof value === 'number') {
         if (isNaN(value) || !isFinite(value)) {
-          return "N/A";
+          return 'N/A'
         }
-        return formatNumber(value);
+        return formatNumber(value)
       }
 
       // Xử lý giá trị string
-      if (typeof value === "string") {
-        const trimmedValue = value.trim();
+      if (typeof value === 'string') {
+        const trimmedValue = value.trim()
 
         // Nếu là chuỗi rỗng
         if (!trimmedValue) {
-          return "N/A";
+          return 'N/A'
         }
 
         // Thử convert sang number
-        const numValue = Number(trimmedValue);
+        const numValue = Number(trimmedValue)
 
         if (isNaN(numValue) || !isFinite(numValue)) {
           // Nếu không phải số, trả về string gốc
-          return "N/A";
+          return 'N/A'
         }
 
-        return formatNumber(numValue);
+        return formatNumber(numValue)
       }
 
-      return "N/A";
-    }, [value, formatNumber]);
+      return 'N/A'
+    }, [value, formatNumber])
 
     // Memoize separator replacement
     const finalFormattedValue = React.useMemo((): string => {
       // Chỉ thay thế separators nếu khác mặc định
-      if (decimalSeparator === "." && groupSeparator === ",") {
-        return processedValue;
+      if (decimalSeparator === '.' && groupSeparator === ',') {
+        return processedValue
       }
-      return processedValue
-        .replace(/,/g, groupSeparator)
-        .replace(/\./g, decimalSeparator);
-    }, [processedValue, decimalSeparator, groupSeparator]);
+      return processedValue.replace(/,/g, groupSeparator).replace(/\./g, decimalSeparator)
+    }, [processedValue, decimalSeparator, groupSeparator])
 
     return (
       <Flex
         padding="none"
         className={cn(
-          "text-secondary-foreground font-number text-lg",
-          size === "xs" && "text-xs",
-          size === "sm" && "text-sm",
-          size === "md" && "text-base",
-          size === "lg" && "text-lg",
-          size === "xl" && "text-xl",
+          'text-secondary-foreground font-number text-lg',
+          size === 'xs' && 'text-xs',
+          size === 'sm' && 'text-sm',
+          size === 'md' && 'text-base',
+          size === 'lg' && 'text-lg',
+          size === 'xl' && 'text-xl',
         )}
       >
         {Prefix}
         <p>{finalFormattedValue}</p>
         {Suffix}
       </Flex>
-    );
+    )
   },
-);
-Statistic.displayName = "Statistic";
+)
+Statistic.displayName = 'Statistic'

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

@@ -7,25 +7,18 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
-} from "../ui/alert-dialog";
+} from '../ui/alert-dialog'
 
 type Props = {
-  open?: boolean;
-  isLoading?: boolean;
-  title: string;
-  description: string;
-  onOpenChange?: (open: boolean) => void;
-  onConfirm?: () => void;
-};
+  open?: boolean
+  isLoading?: boolean
+  title: string
+  description: string
+  onOpenChange?: (open: boolean) => void
+  onConfirm?: () => void
+}
 
-export const ConfirmDialog: React.FC<React.PropsWithChildren<Props>> = ({
-  open,
-  isLoading = false,
-  title,
-  description,
-  onOpenChange,
-  onConfirm,
-}) => {
+export const ConfirmDialog: React.FC<React.PropsWithChildren<Props>> = ({ open, isLoading = false, title, description, onOpenChange, onConfirm }) => {
   return (
     <AlertDialog open={open} onOpenChange={onOpenChange}>
       <AlertDialogContent>
@@ -37,7 +30,7 @@ export const ConfirmDialog: React.FC<React.PropsWithChildren<Props>> = ({
           <AlertDialogCancel>Cancel</AlertDialogCancel>
           <AlertDialogAction className="w-24" onClick={onConfirm}>
             {!isLoading ? (
-              "Confirm"
+              'Confirm'
             ) : (
               <div className="absolute inset-0 flex items-center justify-center">
                 <div className="loader-spinner text-muted-foreground" />
@@ -47,5 +40,5 @@ export const ConfirmDialog: React.FC<React.PropsWithChildren<Props>> = ({
         </AlertDialogFooter>
       </AlertDialogContent>
     </AlertDialog>
-  );
-};
+  )
+}

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

@@ -1,8 +1,4 @@
-import {
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
+import { DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog'
 
 export const DetailDialogHeader = () => {
   return (
@@ -10,5 +6,5 @@ export const DetailDialogHeader = () => {
       <DialogTitle className="sr-only"></DialogTitle>
       <DialogDescription className="sr-only"></DialogDescription>
     </DialogHeader>
-  );
-};
+  )
+}

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

@@ -1,39 +1,35 @@
-import { CalendarIcon } from "lucide-react";
+import { CalendarIcon } from 'lucide-react'
 
-import { DateDisplay } from "@/components/data-display/date";
-import { Flex } from "@/components/layouts/flex";
-import { Title } from "@/components/typography/title";
+import { DateDisplay } from '@/components/data-display/date'
+import { Flex } from '@/components/layouts/flex'
+import { Title } from '@/components/typography/title'
 
-import { SidebarTrigger } from "./sidebar";
+import { SidebarTrigger } from './sidebar'
 
-export const DetailDialogMain: React.FC<React.PropsWithChildren> = ({
-  children,
-}) => {
+export const DetailDialogMain: React.FC<React.PropsWithChildren> = ({ children }) => {
   return (
     <main className="relative flex h-full flex-1 flex-col">
       <div className="absolute inset-0 flex size-full flex-col">{children}</div>
     </main>
-  );
-};
+  )
+}
 
 export const DetailDialogMainHeader: React.FC<
   React.PropsWithChildren<{
-    title: string;
-    createdAt: string | Date | number;
+    title: string
+    createdAt: string | Date | number
   }>
 > = ({ title, createdAt }) => {
   return (
-    <header className="relative flex items-start gap-x-2.5 border-b px-2 py-2.5">
+    <header className="border-border-weak relative flex items-start gap-x-2.5 border-b px-2 py-2.5">
       <SidebarTrigger />
       <Flex vertical align="start" padding="none" className="flex-1">
-        <Title level={5}>{title || "Detail Dialog"}</Title>
+        <Title level={5}>{title || 'Detail Dialog'}</Title>
         <Flex padding="none" className="text-muted-foreground">
           <CalendarIcon size={12} />
-          {!!createdAt && (
-            <DateDisplay showTime showHoliday date={createdAt} format="full" />
-          )}
+          {!!createdAt && <DateDisplay showTime showHoliday date={createdAt} format="full" />}
         </Flex>
       </Flex>
     </header>
-  );
-};
+  )
+}