@customafk/lunas-ui 0.0.26 → 0.0.28

package/packages/components/layouts/flex.tsx

@@ -1,99 +0,0 @@
-'use client'
-import React from 'react'
-import { cva, type VariantProps } from 'class-variance-authority'
-
-import { cn } from '@/lib/utils'
-
-const flexVariants = cva(['relative flex', 'text-sm'], {
-  variants: {
-    vertical: {
-      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',
-    },
-    wrap: {
-      true: 'flex-wrap',
-      false: 'flex-nowrap',
-    },
-    margin: {
-      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',
-    },
-    gap: {
-      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',
-    },
-    align: {
-      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',
-  },
-})
-
-type 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(
-        flexVariants({
-          vertical,
-          width,
-          wrap,
-          margin,
-          padding,
-          gap,
-          justify,
-          align,
-          className,
-        }),
-      )}
-    >
-      {children}
-    </div>
-  )
-}

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

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

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

@@ -1,41 +0,0 @@
-import { BellIcon, CircleQuestionMarkIcon, ShoppingCartIcon } from 'lucide-react'
-
-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',
-      )}
-    >
-      <SidebarTrigger />
-
-      <div className="ml-2.5 flex gap-x-2">
-        <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
-          <ShoppingCartIcon size={20} />
-        </div>
-        <div className="grid flex-1 text-left text-sm leading-tight">
-          <span className="truncate font-medium">Lunas Store</span>
-          <span className="truncate text-xs">Established 2023</span>
-        </div>
-      </div>
-      <div className="flex flex-1 items-center justify-end">
-        <Button variant="ghost" size="icon" className="text-muted-foreground rounded-full">
-          <CircleQuestionMarkIcon />
-        </Button>
-        <Button variant="ghost" size="icon" className="text-muted-foreground rounded-full">
-          <BellIcon />
-        </Button>
-      </div>
-    </header>
-  )
-}

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

@@ -1,3 +0,0 @@
-export * from './wrapper'
-export * from './content'
-export * from './header'

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

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

package/packages/components/table/data-table-pagination.tsx

@@ -1,70 +0,0 @@
-import { type Table } from '@tanstack/react-table'
-import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react'
-
-import { Button } from '@/components/ui/button'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
-
-interface DataTablePaginationProps<TData> {
-  table: Table<TData>
-}
-
-export function DataTablePagination<TData>({ table }: DataTablePaginationProps<TData>) {
-  'use no memo'
-  return (
-    <div className="mt-4 flex w-full flex-0 flex-wrap items-center justify-between gap-y-4 px-2">
-      <div className="text-muted-foreground flex-1 text-sm">
-        {table.getFilteredSelectedRowModel().rows.length} of {table.getFilteredRowModel().rows.length} row(s) selected.
-      </div>
-      <div className="flex flex-wrap items-center space-x-6 gap-y-4 lg:space-x-8">
-        <div className="flex items-center space-x-2">
-          <p className="text-sm font-medium">Rows per page</p>
-          <Select
-            value={`${table.getState().pagination.pageSize}`}
-            onValueChange={(value) => {
-              table.setPageSize(Number(value))
-            }}
-          >
-            <SelectTrigger className="h-8 w-[70px]">
-              <SelectValue placeholder={table.getState().pagination.pageSize} />
-            </SelectTrigger>
-            <SelectContent side="top">
-              {[10, 20, 30, 40, 50].map((pageSize) => (
-                <SelectItem key={pageSize} value={`${pageSize}`}>
-                  {pageSize}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-        <div className="flex w-25 items-center justify-center text-sm font-medium">
-          Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
-        </div>
-        <div className="flex items-center space-x-2 *:size-9 *:p-0">
-          <Button variant="outline" className="lg:flex" onClick={() => table.setPageIndex(0)} disabled={!table.getCanPreviousPage()}>
-            <span className="sr-only">Go to first page</span>
-            <ChevronsLeft />
-          </Button>
-          <Button variant="outline" onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()}>
-            <span className="sr-only">Go to previous page</span>
-            <ChevronLeft />
-          </Button>
-          <Button type="button" variant="outline" onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>
-            <span className="sr-only">Go to next page</span>
-            <ChevronRight />
-          </Button>
-          <Button
-            variant="outline"
-            className="lg:flex"
-            onClick={() => {
-              table.setPageIndex(table.getPageCount() - 1)
-            }}
-            disabled={!table.getCanNextPage()}
-          >
-            <span className="sr-only">Go to last page</span>
-            <ChevronsRight />
-          </Button>
-        </div>
-      </div>
-    </div>
-  )
-}

package/packages/components/table/data-table.tsx

@@ -1,241 +0,0 @@
-import React, { type CSSProperties } from 'react'
-import { type Column, flexRender, type Header, type Table as ReactTable } from '@tanstack/react-table'
-import { ArrowLeftToLineIcon, ArrowRightToLineIcon, ChevronDown, ChevronUp, EllipsisIcon, PackagePlusIcon, PinOffIcon } from 'lucide-react'
-
-import { cn } from '@/lib/utils'
-import type { AnyEntity } from '@/types'
-
-import { Button } from '../ui/button'
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../ui/dropdown-menu'
-import { ScrollArea, ScrollBar } from '../ui/scroll-area'
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../ui/table'
-
-// Helper function to compute pinning styles for columns
-const getPinningStyles = (column: Column<AnyEntity>): CSSProperties => {
-  const isPinned = column.getIsPinned()
-  return {
-    left: isPinned === 'left' ? `${column.getStart('left')}px` : undefined,
-    right: isPinned === 'right' ? `${column.getAfter('right')}px` : undefined,
-    position: isPinned ? 'sticky' : 'relative',
-    width: column.getSize(),
-    zIndex: isPinned ? 1 : 0,
-  }
-}
-
-const SortingIndicator = ({ column }: { column: Column<AnyEntity> }) => {
-  const sortDirection = column.getIsSorted()
-
-  const icons = {
-    asc: <ChevronUp className="shrink-0 opacity-60" size={16} strokeWidth={2} aria-hidden="true" />,
-    desc: <ChevronDown className="shrink-0 opacity-60" size={16} strokeWidth={2} aria-hidden="true" />,
-  }
-
-  return sortDirection ? icons[sortDirection] : null
-}
-
-const PinControls = ({ column }: { column: Column<AnyEntity> }) => {
-  const columnHeader = column.columnDef.header as string
-
-  if (!column.getCanPin()) return null
-
-  if (column.getIsPinned()) {
-    return (
-      <Button
-        size="icon"
-        variant="ghost"
-        className="hover:[&_svg]:text-secondary-foreground -mr-1 size-7 shadow-none"
-        aria-label={`Unpin ${columnHeader} column`}
-        title={`Unpin ${columnHeader} column`}
-        onClick={() => column.pin(false)}
-      >
-        <PinOffIcon className="opacity-60" size={16} aria-hidden="true" />
-      </Button>
-    )
-  }
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button
-          size="icon"
-          variant="ghost"
-          className="-mr-1 size-7 shadow-none"
-          aria-label={`Pin options for ${columnHeader} column`}
-          title={`Pin options for ${columnHeader} column`}
-        >
-          <EllipsisIcon className="opacity-60" size={16} aria-hidden="true" />
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
-        <DropdownMenuItem onClick={() => column.pin('left')}>
-          <ArrowLeftToLineIcon size={16} className="opacity-60" aria-hidden="true" />
-          Stick to left
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => column.pin('right')}>
-          <ArrowRightToLineIcon size={16} className="opacity-60" aria-hidden="true" />
-          Stick to right
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}
-
-const HeaderContent = ({ header }: { header: Header<AnyEntity, unknown> }) => {
-  const { column } = header
-
-  const handleSort = (e: React.KeyboardEvent) => {
-    if (column.getCanSort() && (e.key === 'Enter' || e.key === ' ')) {
-      e.preventDefault()
-      column.getToggleSortingHandler()?.(e)
-    }
-  }
-
-  return (
-    <div className="flex items-center justify-between gap-2 truncate">
-      {!header.isPlaceholder && (
-        <div
-          className={cn(column.getCanSort() && 'flex h-full cursor-pointer items-center justify-between gap-2 select-none')}
-          onClick={column.getToggleSortingHandler()}
-          onKeyDown={handleSort}
-          tabIndex={column.getCanSort() ? 0 : undefined}
-        >
-          <span className="truncate">{flexRender(column.columnDef.header, header.getContext())}</span>
-          <SortingIndicator column={column} />
-        </div>
-      )}
-      {!header.isPlaceholder && <PinControls column={column} />}
-    </div>
-  )
-}
-
-interface DataTableProps {
-  table: ReactTable<AnyEntity>
-  columnsLength?: number
-  isLoading?: boolean
-  onClickRow?: (id: string) => void
-}
-
-export const DataTable = ({ table, isLoading, onClickRow }: DataTableProps) => {
-  'use no memo'
-  return (
-    <ScrollArea className="border-border bg-background relative w-full overflow-auto rounded-lg border">
-      <Table
-        className={cn(
-          '!w-full',
-          '[&_td]:border-border',
-          '[&_th]:border-border',
-          'table-fixed border-separate border-spacing-0',
-          '[&_tfoot_td]:border-t',
-          '[&_th]:border-b',
-          '[&_tr]:border-none',
-          '[&_tr:not(:last-child)_td]:border-b',
-        )}
-        style={{
-          width: table.getTotalSize(),
-        }}
-      >
-        <TableHeader className="bg-muted/50 sticky top-0 z-10 backdrop-blur-xs">
-          {table.getHeaderGroups().map((headerGroup) => (
-            <TableRow key={headerGroup.id} className="bg-muted/50">
-              {headerGroup.headers.map((header) => {
-                const { column } = header
-                const isPinned = column.getIsPinned()
-                const isLastLeftPinned = isPinned === 'left' && column.getIsLastColumn('left')
-                const isFirstRightPinned = isPinned === 'right' && column.getIsFirstColumn('right')
-                return (
-                  <TableHead
-                    key={header.id}
-                    data-pinned={isPinned || undefined}
-                    data-last-col={isLastLeftPinned ? 'left' : isFirstRightPinned ? 'right' : undefined}
-                    className={cn(
-                      'text-accent-foreground/60 relative h-9 border-r font-semibold select-none',
-                      'data-pinned:backdrop-blur-xs',
-                      'data-pinned:bg-muted/90',
-                      '[&>.cursor-col-resize]:last:opacity-0',
-                      '[&[data-pinned][data-last-col]]:border-border',
-                      '[&:not([data-pinned]):has(+[data-pinned])_div.cursor-col-resize:last-child]:opacity-0',
-                      '[&[data-last-col=left]_div.cursor-col-resize:last-child]:opacity-0',
-                      '[&[data-pinned=left][data-last-col=left]]:border-r',
-                      '[&[data-pinned=right]:last-child_div.cursor-col-resize:last-child]:opacity-0',
-                      '[&[data-pinned=right][data-last-col=right]]:border-l',
-                    )}
-                    {...{
-                      colSpan: header.colSpan,
-                      style: {
-                        width: header.getSize(),
-                        maxWidth: header.getSize(),
-                        ...getPinningStyles(header.column),
-                      },
-                    }}
-                  >
-                    <HeaderContent header={header} />
-                  </TableHead>
-                )
-              })}
-            </TableRow>
-          ))}
-        </TableHeader>
-
-        <TableBody className={cn(isLoading && 'h-36', table.getRowModel().rows?.length === 0 && 'h-48')}>
-          {isLoading ? (
-            <TableRow className="absolute top-9 flex h-36 w-full items-center justify-center">
-              <TableCell>loading...</TableCell>
-            </TableRow>
-          ) : (
-            <React.Fragment>
-              {table.getRowModel().rows?.length ? (
-                table.getRowModel().rows.map((row) => (
-                  <TableRow
-                    key={row.id}
-                    data-state={row.getIsSelected() && 'selected'}
-                    className="cursor-pointer border-none focus:outline-none"
-                    onClick={() => onClickRow?.(row?.id || row.original?.id?.toString() || row.original?.uuid || undefined)}
-                  >
-                    {row.getVisibleCells().map((cell) => {
-                      const { column } = cell
-                      const isPinned = column.getIsPinned()
-                      const isLastLeftPinned = isPinned === 'left' && column.getIsLastColumn('left')
-                      const isFirstRightPinned = isPinned === 'right' && column.getIsFirstColumn('right')
-                      return (
-                        <TableCell
-                          key={cell.id}
-                          style={{
-                            ...getPinningStyles(column),
-                            width: cell.column.getSize(),
-                            maxWidth: cell.column.getSize(),
-                          }}
-                          data-pinned={isPinned || undefined}
-                          data-last-col={isLastLeftPinned ? 'left' : isFirstRightPinned ? 'right' : undefined}
-                          className={cn(
-                            'overflow-hidden py-2.5',
-                            '[&[data-pinned][data-last-col]]:border-border',
-                            '[&[data-pinned=left][data-last-col=left]]:border-r',
-                            '[&[data-pinned=right][data-last-col=right]]:border-l',
-                            'data-pinned:bg-background/90',
-                          )}
-                        >
-                          {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                        </TableCell>
-                      )
-                    })}
-                  </TableRow>
-                ))
-              ) : (
-                <TableRow className="absolute top-9 flex h-36 w-full items-center justify-center">
-                  <TableCell>
-                    <div className="text-muted-foreground flex size-full flex-col items-center justify-center gap-y-8 text-base">
-                      <PackagePlusIcon size={48} strokeWidth={2} />
-                      <p>Thêm dữ liệu để hiển thị</p>
-                    </div>
-                  </TableCell>
-                </TableRow>
-              )}
-            </React.Fragment>
-          )}
-        </TableBody>
-      </Table>
-      <ScrollBar orientation="vertical" className="z-10 w-2" />
-      <ScrollBar orientation="horizontal" className="absolute right-0 bottom-0 left-0 h-2" />
-    </ScrollArea>
-  )
-}

package/packages/components/table/index.tsx

@@ -1,107 +0,0 @@
-import React from 'react'
-import {
-  type ColumnDef,
-  type ColumnFiltersState,
-  getCoreRowModel,
-  getFacetedRowModel,
-  getFacetedUniqueValues,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  type PaginationState,
-  type RowSelectionState,
-  type SortingState,
-  useReactTable,
-  type VisibilityState,
-} from '@tanstack/react-table'
-
-import { DataTable } from './data-table'
-import { DataTablePagination } from './data-table-pagination'
-import { Flex } from '../layouts/flex'
-import { AddNewBtn } from '../ui/buttons/add-new'
-import { RefreshBtn } from '../ui/buttons/refresh'
-import { SearchInput } from '../ui/inputs/search-input'
-
-type Props<T> = {
-  data: T[]
-  totalCount?: number
-  isLoading?: boolean
-  columns: ColumnDef<T>[]
-  pagination?: PaginationState
-  onAdd?: () => void
-  onRefresh?: () => void
-  onClickRow?: (id: string) => void
-  onPaginationChange?: React.Dispatch<React.SetStateAction<PaginationState>>
-}
-export function Table<T extends Record<string, unknown>>({
-  data,
-  totalCount,
-  isLoading,
-  columns,
-  pagination,
-  onAdd,
-  onRefresh,
-  onClickRow,
-  onPaginationChange,
-}: Props<T>) {
-  'use no memo'
-
-  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({})
-  const [sorting, setSorting] = React.useState<SortingState>([])
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([])
-  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({})
-
-  const initialState = React.useMemo(
-    () => ({
-      columnPinning: { right: ['actions', 'update', 'delete'] },
-      pagination: { pageIndex: 0, pageSize: 20 },
-    }),
-    [],
-  )
-
-  const table = useReactTable<T>({
-    initialState,
-    data,
-    columns,
-    rowCount: totalCount,
-    columnResizeMode: 'onChange',
-    manualPagination: true,
-    enableColumnResizing: false,
-    enableMultiRowSelection: false,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    getFacetedRowModel: getFacetedRowModel(),
-    getFacetedUniqueValues: getFacetedUniqueValues(),
-    getRowId: (row) => (row.id as string) || (row.uuid as string),
-    state: {
-      rowSelection,
-      sorting,
-      columnVisibility,
-      columnFilters,
-      ...(pagination ? { pagination } : {}),
-    },
-    onRowSelectionChange: setRowSelection,
-    onSortingChange: setSorting,
-    onColumnVisibilityChange: setColumnVisibility,
-    onColumnFiltersChange: setColumnFilters,
-    ...(onPaginationChange ? { onPaginationChange } : {}),
-  })
-
-  return (
-    <Flex vertical wrap={false} gap="sm" align="start" className="size-full overflow-y-auto pt-1">
-      <Flex justify="between" padding="none" width="full" className="flex-0">
-        <SearchInput placeholder="Search..." />
-        <Flex className="px-0">
-          {onAdd && <AddNewBtn onClick={onAdd} />}
-          <RefreshBtn onClick={onRefresh} />
-        </Flex>
-      </Flex>
-      <Flex padding="none" vertical wrap={false} width="full" className="flex-1 overflow-auto">
-        <DataTable table={table} isLoading={isLoading} onClickRow={onClickRow} />
-        <DataTablePagination<T> table={table} />
-      </Flex>
-    </Flex>
-  )
-}

package/packages/components/typography/paragraph.tsx

@@ -1,29 +0,0 @@
-'use client'
-import { cva } from 'class-variance-authority'
-
-import { cn } from '@/lib/utils'
-
-type Props = {
-  variant?: 'p' | 'muted' | 'lead' | 'sm' | 'lg'
-  className?: string
-  children?: React.ReactNode
-}
-
-const paragraphVariants = cva('', {
-  variants: {
-    variant: {
-      p: 'leading-7 [&:not(:first-child)]:mt-6',
-      sm: 'text-sm leading-none font-normal',
-      lg: 'text-lg font-semibold',
-      lead: 'text-text-positive-strong text-xl',
-      muted: 'text-text-positive-muted text-sm',
-    },
-    default: {
-      variant: 'sm',
-    },
-  },
-})
-
-export const Paragraph = ({ variant = 'p', className, children }: Props) => {
-  return <p className={cn('text-text-positive', paragraphVariants({ variant }), className)}>{children}</p>
-}

package/packages/components/typography/title.tsx

@@ -1,31 +0,0 @@
-import type { JSX } from 'react'
-import { cva } from 'class-variance-authority'
-
-import { cn } from '@/lib/utils'
-
-const titleVariants = cva('scroll-m-20 text-text-positive-strong tracking-tight', {
-  variants: {
-    level: {
-      1: 'text-center text-4xl font-extrabold text-balance',
-      2: 'border-b pb-2 text-3xl font-semibold first:mt-0',
-      3: 'text-2xl font-semibold',
-      4: 'text-xl font-semibold',
-      5: 'text-lg font-semibold',
-      6: 'text-base font-semibold',
-    },
-    default: {
-      level: 1,
-    },
-  },
-})
-
-type Props = {
-  level?: 1 | 2 | 3 | 4 | 5 | 6
-  className?: string
-  children?: React.ReactNode
-}
-
-export const Title = ({ level = 1, className, children }: Props) => {
-  const Comp = `h${level}` as keyof JSX.IntrinsicElements
-  return <Comp className={cn(titleVariants({ level }), className)}>{children}</Comp>
-}