@customafk/lunas-ui 0.0.26 → 0.0.27

package/packages/components/data-display/phone-number.tsx

@@ -1,14 +0,0 @@
-import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip'
-
-export const PhoneNumberDisplay: React.FC<React.PropsWithChildren<{ value: string }>> = ({ value }) => {
-  return (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <p className="font-number text-secondary-foreground text-sm">{value.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3')}</p>
-      </TooltipTrigger>
-      <TooltipContent align="start">
-        <p>{value.slice(1).replace(/(\d{2})(\d{3})(\d{4})/, '(00) (+84) ($1) $2-$3')}</p>
-      </TooltipContent>
-    </Tooltip>
-  )
-}

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

@@ -1,29 +0,0 @@
-import React from 'react'
-
-import { ERole } from '@/types'
-
-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']>>(() => {
-    return {
-      [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'}
-    </Badge>
-  )
-}

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

@@ -1,139 +0,0 @@
-import React from 'react'
-
-import { cn } from '@/lib/utils'
-
-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
-}
-export const Statistic = React.memo(
-  ({
-    decimalSeparator = '.',
-    groupSeparator = ',',
-    prefix: Prefix,
-    suffix: Suffix,
-    precision,
-    roundingMode = 'round',
-    showTrailingZeros = false,
-    size = 'lg',
-    value,
-  }: Props) => {
-    // Memoize rounding function
-    const applyRounding = React.useCallback(
-      (num: number, precisionValue: number): number => {
-        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':
-          default:
-            return Math.round(num * multiplier) / multiplier
-        }
-      },
-      [roundingMode],
-    )
-
-    // Memoize number formatting options
-    const formatOptions = React.useMemo((): Intl.NumberFormatOptions => {
-      const options: Intl.NumberFormatOptions = {}
-
-      if (typeof precision === 'number' && precision >= 0) {
-        if (showTrailingZeros) {
-          options.minimumFractionDigits = precision
-          options.maximumFractionDigits = precision
-        } else {
-          options.maximumFractionDigits = precision
-        }
-      }
-
-      return options
-    }, [precision, showTrailingZeros])
-
-    const formatNumber = React.useCallback(
-      (num: number): string => {
-        let processedNum = num
-
-        // Áp dụng làm tròn nếu có precision
-        if (typeof precision === 'number' && precision >= 0) {
-          processedNum = applyRounding(num, precision)
-        }
-
-        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 (isNaN(value) || !isFinite(value)) {
-          return 'N/A'
-        }
-        return formatNumber(value)
-      }
-
-      // Xử lý giá trị string
-      if (typeof value === 'string') {
-        const trimmedValue = value.trim()
-
-        // Nếu là chuỗi rỗng
-        if (!trimmedValue) {
-          return 'N/A'
-        }
-
-        // Thử convert sang number
-        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 formatNumber(numValue)
-      }
-
-      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
-      }
-      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',
-        )}
-      >
-        {Prefix}
-        <p>{finalFormattedValue}</p>
-        {Suffix}
-      </Flex>
-    )
-  },
-)
-Statistic.displayName = 'Statistic'

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

@@ -1,44 +0,0 @@
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from '../ui/alert-dialog'
-
-type Props = {
-  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 }) => {
-  return (
-    <AlertDialog open={open} onOpenChange={onOpenChange}>
-      <AlertDialogContent>
-        <AlertDialogHeader className="gap-0">
-          <AlertDialogTitle>{title}</AlertDialogTitle>
-          <AlertDialogDescription>{description}</AlertDialogDescription>
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel>Cancel</AlertDialogCancel>
-          <AlertDialogAction className="w-24" onClick={onConfirm}>
-            {!isLoading ? (
-              'Confirm'
-            ) : (
-              <div className="absolute inset-0 flex items-center justify-center">
-                <div className="loader-spinner text-muted-foreground" />
-              </div>
-            )}
-          </AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  )
-}

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

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

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

@@ -1,35 +0,0 @@
-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 { SidebarTrigger } from './sidebar'
-
-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, createdAt }) => {
-  return (
-    <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>
-        <Flex padding="none" className="text-muted-foreground">
-          <CalendarIcon size={12} />
-          {!!createdAt && <DateDisplay showTime showHoliday date={createdAt} format="full" />}
-        </Flex>
-      </Flex>
-    </header>
-  )
-}