oboda-fiesta 0.0.1

package/.claude/settings.local.json

@@ -0,0 +1,9 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(find:*)",
+      "Bash(rg:*)"
+    ],
+    "deny": []
+  }
+}

package/components/_table/context.ts

@@ -0,0 +1,20 @@
+import { createContext, useContext } from 'react'
+import { TableContextValue } from './types'
+
+export const useTableContext = () => {
+  const context = useContext(TableContext)
+  if (!context) {
+    throw new Error('useTableContext must be used within a TableProvider')
+  }
+  return context
+}
+
+export const TableContext = createContext<TableContextValue>({
+  data: [],
+  columns: [],
+  table: null,
+  enableColumnOrdering: false,
+  enableColumnResizing: false,
+  enableSorting: false,
+  isLoading: false
+})

package/components/_table/index.ts

@@ -0,0 +1,10 @@
+export * from './table'
+export * from './table-provider'
+export * from './table-head'
+export * from './table-header'
+export * from './table-header-group'
+export * from './table-body'
+export * from './table-row'
+export * from './table-cell'
+export * from './table-pagination'
+export * from './types'

package/components/_table/table-body.tsx

@@ -0,0 +1,26 @@
+import { cn } from '@repo/oboda-fiesta/lib/utils'
+import { useTableContext } from './context'
+import { TableBodyProps } from './types'
+import { TableCellRaw } from './table-cell'
+import { TableRowRaw } from './table-row'
+
+export const TableBody = ({ children, className, ...props }: TableBodyProps) => {
+  const { table, isLoading } = useTableContext()
+  const rows = table?.getRowModel().rows
+
+  if (!rows?.length && !isLoading) {
+    return (
+      <TableRowRaw>
+        <TableCellRaw colSpan={table?.getAllColumns().length} className='text-center'>
+          No result
+        </TableCellRaw>
+      </TableRowRaw>
+    )
+  }
+
+  return (
+    <tbody data-slot='table-body' className={cn('overflow-x-auto [&_tr:last-child]:border-0', className)} {...props}>
+      {rows?.map((row) => children({ row }))}
+    </tbody>
+  )
+}

package/components/_table/table-cell.tsx

@@ -0,0 +1,32 @@
+import { flexRender } from '@tanstack/react-table'
+import { useTableContext } from './context'
+import { TableCellProps } from './types'
+import { cn } from '@repo/oboda-fiesta/lib/utils'
+
+export const TableCellRaw = ({ className, ...props }: React.ComponentProps<'td'>) => {
+  return (
+    <td
+      data-slot='table-cell'
+      className={cn(
+        'text-foreground border-border whitespace-nowrap border-b px-4 py-3 align-middle text-sm',
+        'font-normal',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export const TableCell = ({ cell, className, ...props }: TableCellProps) => {
+  const { enableColumnResizing } = useTableContext()
+  const meta = cell.column.columnDef.meta as { align?: 'right' | 'center' }
+  return (
+    <TableCellRaw
+      className={cn(className, meta?.align === 'right' && 'text-right', meta?.align === 'center' && 'text-center')}
+      style={enableColumnResizing ? { width: cell.column.getSize() } : undefined}
+      {...props}
+    >
+      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+    </TableCellRaw>
+  )
+}

package/components/_table/table-head.tsx

@@ -0,0 +1,171 @@
+import { useSortable } from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+import { flexRender, type Header } from '@tanstack/react-table'
+import { cn } from '@repo/oboda-fiesta/lib/utils'
+import { GripVertical, ArrowUpDown, ArrowUp, ArrowDown } from 'lucide-react'
+import { TableHeadProps } from './types'
+import { useTableContext } from './context'
+
+const SortIcon = ({ header }: { header: Header<unknown, unknown> }) => {
+  const sortDirection = header.column.getIsSorted()
+
+  if (sortDirection === 'asc') {
+    return <ArrowUp className='h-4 w-4' />
+  }
+
+  if (sortDirection === 'desc') {
+    return <ArrowDown className='h-4 w-4' />
+  }
+
+  return <ArrowUpDown className='h-4 w-4 opacity-50' />
+}
+
+export const TableHeadRaw = ({ className, ...props }: React.ComponentProps<'th'>) => {
+  return (
+    <th
+      data-slot='table-head'
+      className={cn(
+        'border-border text text-secondary h-12 whitespace-nowrap border-b px-4 text-left align-middle text-xs font-bold leading-[1.4] tracking-[0.02em]',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+type DraggableTableHeadProps = {
+  header: Header<unknown, unknown>
+  className?: string
+}
+
+const DraggableTableHead = ({ header, className }: DraggableTableHeadProps) => {
+  const { enableColumnResizing, enableColumnOrdering } = useTableContext()
+  const isResizable = enableColumnResizing
+  const isDraggable = enableColumnOrdering
+  const canSort = header.column.getCanSort()
+  const meta = header.column.columnDef.meta as { align?: 'right' | 'center' }
+
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: header.column.id })
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+    ...(isResizable ? { width: header.getSize() } : {})
+  }
+
+  const handleSort = () => {
+    if (canSort) {
+      header.column.toggleSorting()
+    }
+  }
+
+  return (
+    <TableHeadRaw
+      ref={setNodeRef}
+      key={header.id}
+      colSpan={header.colSpan}
+      className={cn(
+        isResizable && 'relative border-r',
+        isDragging && 'cursor-grabbing',
+        canSort && 'hover:bg-muted/50 cursor-pointer',
+        className
+      )}
+      style={style}
+      onClick={handleSort}
+    >
+      <div
+        className={cn(
+          'flex items-center justify-between',
+          meta?.align === 'right' && 'justify-end',
+          meta?.align === 'center' && 'justify-center'
+        )}
+      >
+        <div
+          className={cn(
+            'flex flex-1 items-center gap-2',
+            meta?.align === 'right' && 'justify-end',
+            meta?.align === 'center' && 'justify-center'
+          )}
+        >
+          {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+          {canSort && !header.isPlaceholder && <SortIcon header={header} />}
+        </div>
+        {isDraggable && !header.isPlaceholder && (
+          <button
+            {...attributes}
+            {...listeners}
+            className='hover:text-muted-foreground/70 ml-2 cursor-grab touch-none'
+            onClick={(e) => e.stopPropagation()}
+          >
+            <GripVertical className='h-4 w-4' />
+          </button>
+        )}
+      </div>
+      {isResizable && (
+        <div
+          onDoubleClick={() => header.column.resetSize()}
+          onMouseDown={header.getResizeHandler()}
+          onTouchStart={header.getResizeHandler()}
+          className={cn(
+            'resizer bg-border absolute right-0 top-0 h-full w-1 cursor-col-resize touch-none select-none opacity-0 hover:opacity-100',
+            header.column.getIsResizing() && 'bg-secondary z-50 h-screen w-[2px] opacity-100',
+            'transition-opacity duration-150'
+          )}
+        />
+      )}
+    </TableHeadRaw>
+  )
+}
+
+export const TableHead = ({ header, className }: TableHeadProps) => {
+  const { table } = useTableContext()
+  const isDraggable = table?.options.onColumnOrderChange !== undefined
+  const meta = header.column.columnDef.meta as { align?: 'right' | 'center' }
+
+  if (isDraggable) {
+    return <DraggableTableHead header={header} className={className} />
+  }
+
+  const isResizable = table?.options.columnResizeMode !== undefined
+  const canSort = header.column.getCanSort()
+
+  const handleSort = () => {
+    if (canSort) {
+      header.column.toggleSorting()
+    }
+  }
+
+  return (
+    <TableHeadRaw
+      key={header.id}
+      colSpan={header.colSpan}
+      className={cn(isResizable && 'relative border-r', canSort && 'hover:bg-muted/50 cursor-pointer', className)}
+      style={isResizable ? { width: header.getSize() } : undefined}
+      onClick={handleSort}
+    >
+      <div
+        className={cn(
+          'flex items-center gap-2',
+          meta?.align === 'right' && 'text-right',
+          meta?.align === 'center' && 'text-center'
+        )}
+      >
+        {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+        {canSort && !header.isPlaceholder && <SortIcon header={header} />}
+      </div>
+      {isResizable && (
+        <div
+          onDoubleClick={() => header.column.resetSize()}
+          onMouseDown={header.getResizeHandler()}
+          onTouchStart={header.getResizeHandler()}
+          className={cn(
+            'resizer bg-border absolute right-0 top-0 h-full w-1 cursor-col-resize touch-none select-none opacity-0 hover:opacity-100',
+            header.column.getIsResizing() && 'bg-secondary z-50 h-screen w-[2px] opacity-100',
+            'transition-opacity duration-150'
+          )}
+        />
+      )}
+    </TableHeadRaw>
+  )
+}

package/components/_table/table-header-group.tsx

@@ -0,0 +1,9 @@
+import { cn } from '@repo/oboda-fiesta/lib/utils'
+import { TableRowRaw } from './table-row'
+import { TableHeaderGroupProps } from './types'
+
+export const TableHeaderGroup = ({ headerGroup, children, className }: TableHeaderGroupProps) => (
+  <TableRowRaw key={headerGroup.id} className={cn(className, 'first:*:first:rounded-tl-lg first:*:last:rounded-tr-lg')}>
+    {headerGroup.headers.map((header) => children({ header }))}
+  </TableRowRaw>
+)

package/components/_table/table-header.tsx

@@ -0,0 +1,35 @@
+import { cn } from '@repo/oboda-fiesta/lib/utils'
+import { TableHeaderProps } from './types'
+import { useContext } from 'react'
+import { TableContext, useTableContext } from './context'
+import { SortableContext } from '@dnd-kit/sortable'
+import { horizontalListSortingStrategy } from '@dnd-kit/sortable'
+
+const TableHeaderRaw = ({ className, ...props }: React.ComponentProps<'thead'>) => {
+  return <thead data-slot='table-header' className={cn('bg-background z-1 sticky top-0', className)} {...props} />
+}
+export const TableHeader = ({ className, children }: TableHeaderProps) => {
+  const { table, enableColumnOrdering } = useTableContext()
+  const isDraggable = enableColumnOrdering
+
+  const content = (
+    <TableHeaderRaw className={className}>
+      {table?.getHeaderGroups().map((headerGroup) => children({ headerGroup }))}
+    </TableHeaderRaw>
+  )
+
+  if (isDraggable && table) {
+    const currentColumns = table.getAllLeafColumns().map((col) => col.id)
+    const stateColumnOrder = table.getState().columnOrder
+
+    const columnOrder = stateColumnOrder?.length > 0 ? stateColumnOrder : currentColumns
+
+    return (
+      <SortableContext items={columnOrder} strategy={horizontalListSortingStrategy}>
+        {content}
+      </SortableContext>
+    )
+  }
+
+  return content
+}

package/components/_table/table-pagination.tsx

@@ -0,0 +1,84 @@
+import { cn } from '@repo/oboda-fiesta/lib/utils'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+import { Button } from '../button'
+import { TablePaginationProps } from './types'
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '../select'
+
+export function TablePagination({
+  pageIndex,
+  pageSize,
+  pageCount,
+  totalRows,
+  onPageSizeChange,
+  onPreviousPage,
+  onNextPage,
+  pageSizeOptions = [10, 20, 30, 50, 100],
+  showPageSizeSelector = true,
+  isLoading = false,
+  className
+}: TablePaginationProps) {
+  const startItem = pageIndex * pageSize + 1
+  const endItem = Math.min((pageIndex + 1) * pageSize, totalRows)
+
+  // Infer pagination state
+  const canPreviousPage = !isLoading && pageIndex > 0
+  const canNextPage = !isLoading && pageIndex < pageCount - 1
+
+  return (
+    <div
+      className={cn(
+        'flex w-full flex-col items-center justify-between gap-2 py-2 sm:flex-row sm:justify-end sm:gap-4',
+        className
+      )}
+    >
+      {/* Mobile: Stack vertically, Desktop: Horizontal layout */}
+      <div className='flex w-full flex-col items-center gap-2 sm:w-auto sm:flex-row sm:gap-4'>
+        {showPageSizeSelector && (
+          <div className='flex w-full items-center justify-center gap-2 sm:w-auto sm:justify-start'>
+            <span className='text-muted-foreground whitespace-nowrap text-xs sm:text-sm'>Rows per page:</span>
+            <Select value={pageSize.toString()} onValueChange={(value) => onPageSizeChange(Number(value))}>
+              <SelectTrigger className='h-8 w-fit text-xs sm:text-sm'>
+                <SelectValue placeholder={pageSize.toString()} />
+              </SelectTrigger>
+              <SelectContent side='top'>
+                {pageSizeOptions.map((size) => (
+                  <SelectItem key={size} value={size.toString()}>
+                    {size}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        )}
+
+        <div className='text-muted-foreground order-first text-xs sm:order-none sm:text-sm'>
+          {startItem}-{endItem} of {totalRows}
+        </div>
+      </div>
+
+      <div className='flex items-center gap-1'>
+        <Button
+          variant='tertiary'
+          size='sm'
+          onClick={onPreviousPage}
+          disabled={!canPreviousPage}
+          className='h-8 w-8 p-0 sm:h-9 sm:w-9'
+        >
+          <ChevronLeft className='h-4 w-4' />
+          <span className='sr-only'>Previous page</span>
+        </Button>
+
+        <Button
+          variant='tertiary'
+          size='sm'
+          onClick={onNextPage}
+          disabled={!canNextPage}
+          className='h-8 w-8 p-0 sm:h-9 sm:w-9'
+        >
+          <ChevronRight className='h-4 w-4' />
+          <span className='sr-only'>Next page</span>
+        </Button>
+      </div>
+    </div>
+  )
+}

package/components/_table/table-provider.tsx

@@ -0,0 +1,128 @@
+import { useState } from 'react'
+import {
+  ColumnOrderState,
+  ColumnSizingState,
+  getCoreRowModel,
+  SortingState,
+  Updater,
+  useReactTable
+} from '@tanstack/react-table'
+import { TableProviderProps } from './types'
+import {
+  closestCenter,
+  DndContext,
+  DragEndEvent,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors
+} from '@dnd-kit/core'
+import { arrayMove, sortableKeyboardCoordinates } from '@dnd-kit/sortable'
+import { TableContext } from './context'
+import { Loader2 } from 'lucide-react'
+import { Table } from './table'
+
+export const TableProvider = <TData, TValue>({
+  columns,
+  data,
+  children,
+  className,
+  enableColumnResizing = false,
+  enableColumnOrdering = false,
+  enableSorting = false,
+  sorting,
+  onSortingChange,
+  isLoading = false
+}: TableProviderProps<TData, TValue>) => {
+  const [columnSizing, setColumnSizing] = useState<ColumnSizingState>({})
+  const [columnOrder, setColumnOrder] = useState<ColumnOrderState>(() => {
+    return []
+  })
+
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    enableSorting: enableSorting,
+    onSortingChange: (updaterOrValue) => {
+      const newValue = updaterOrValue instanceof Function ? updaterOrValue(sorting ?? []) : updaterOrValue
+      onSortingChange?.(newValue)
+    },
+    manualSorting: true,
+    manualFiltering: true,
+    manualPagination: true,
+    ...(enableColumnResizing && {
+      columnResizeMode: 'onChange',
+      columnResizeDirection: 'ltr',
+      onColumnSizingChange: setColumnSizing
+    }),
+    ...(enableColumnOrdering && {
+      onColumnOrderChange: setColumnOrder
+    }),
+    state: {
+      ...(enableSorting && sorting?.length && { sorting }),
+      ...(enableColumnResizing && { columnSizing }),
+      ...(enableColumnOrdering && { columnOrder })
+    }
+  })
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 8
+      }
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates
+    })
+  )
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event
+
+    if (active.id !== over?.id && over?.id) {
+      setColumnOrder((currentOrder) => {
+        const actualOrder = currentOrder.length > 0 ? currentOrder : table.getAllLeafColumns().map((col) => col.id)
+
+        const oldIndex = actualOrder.indexOf(active.id as string)
+        const newIndex = actualOrder.indexOf(over.id as string)
+
+        if (oldIndex !== -1 && newIndex !== -1) {
+          return arrayMove(actualOrder, oldIndex, newIndex)
+        }
+        return actualOrder
+      })
+    }
+  }
+
+  const content = (
+    <TableContext.Provider
+      value={{
+        data,
+        columns: columns as never,
+        table: table as never,
+        enableColumnOrdering,
+        enableColumnResizing,
+        enableSorting,
+        isLoading
+      }}
+    >
+      {isLoading && (
+        <div className='bg-background/50 absolute inset-0 z-10 flex items-center justify-center'>
+          <Loader2 className='h-4 w-4 animate-spin' />
+        </div>
+      )}
+      <Table className={className}>{children}</Table>
+    </TableContext.Provider>
+  )
+
+  if (enableColumnOrdering) {
+    return (
+      <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+        {content}
+      </DndContext>
+    )
+  }
+
+  return content
+}

package/components/_table/table-row.tsx

@@ -0,0 +1,12 @@
+import { cn } from '@repo/oboda-fiesta/lib/utils'
+import { TableRowProps } from './types'
+
+export const TableRowRaw = ({ className, ...props }: React.ComponentProps<'tr'>) => {
+  return <tr data-slot='table-row' className={cn('transition-colors', 'hover:bg-muted', className)} {...props} />
+}
+
+export const TableRow = ({ row, children, className }: TableRowProps) => (
+  <TableRowRaw key={row.id} data-state={row.getIsSelected() && 'selected'} className={className}>
+    {row.getVisibleCells().map((cell) => children({ cell }))}
+  </TableRowRaw>
+)

package/components/_table/table.tsx

@@ -0,0 +1,21 @@
+import { cn } from '@repo/oboda-fiesta/lib/utils'
+import { useTableContext } from './context'
+
+export const Table = ({ className, ...props }: React.ComponentProps<'table'>) => {
+  const { table, enableColumnResizing } = useTableContext()
+  const isResizable = enableColumnResizing
+
+  return (
+    <div
+      data-slot='table-container'
+      className='border-border bg-background h-full w-full overflow-x-auto rounded-lg border shadow-sm'
+    >
+      <table
+        data-slot='table'
+        className={cn('w-full caption-bottom border-separate border-spacing-0 text-sm', className)}
+        style={isResizable && table ? { width: table.getCenterTotalSize() } : undefined}
+        {...props}
+      />
+    </div>
+  )
+}

package/components/_table/types.ts

@@ -0,0 +1,96 @@
+import type {
+  Cell,
+  Column,
+  ColumnDef,
+  Header,
+  HeaderGroup,
+  Row,
+  Table,
+  SortingState,
+  OnChangeFn
+} from '@tanstack/react-table'
+import type { HTMLAttributes, ReactNode } from 'react'
+
+export type {
+  ColumnDef,
+  ColumnResizeMode,
+  ColumnResizeDirection,
+  Cell,
+  Column,
+  Header,
+  HeaderGroup,
+  Row,
+  SortingState,
+  ColumnSizingState,
+  ColumnOrderState,
+  ColumnFiltersState,
+  PaginationState
+} from '@tanstack/react-table'
+
+export type TableContextValue = {
+  data: unknown[]
+  columns: ColumnDef<unknown, unknown>[]
+  table: Table<unknown> | null
+  enableColumnOrdering: boolean
+  enableColumnResizing: boolean
+  enableSorting: boolean
+  isLoading: boolean
+}
+export type TableProviderProps<TData, TValue> = {
+  columns: ColumnDef<TData, TValue>[]
+  data: TData[]
+  children: ReactNode
+  className?: string
+  enableColumnResizing?: boolean
+  enableColumnOrdering?: boolean
+  isLoading?: boolean
+  enableSorting?: boolean
+  sorting?: SortingState
+  onSortingChange?: (newSorting: SortingState) => void
+}
+
+export type TableHeadProps = {
+  header: Header<unknown, unknown>
+  className?: string
+}
+
+export type TableHeaderGroupProps = {
+  headerGroup: HeaderGroup<unknown>
+  children: (props: { header: Header<unknown, unknown> }) => ReactNode
+  className?: string
+}
+
+export type TableHeaderProps = {
+  className?: string
+  children: (props: { headerGroup: HeaderGroup<unknown> }) => ReactNode
+}
+
+export type TableCellProps = {
+  cell: Cell<unknown, unknown>
+  className?: string
+}
+
+export type TableRowProps = {
+  row: Row<unknown>
+  children: (props: { cell: Cell<unknown, unknown> }) => ReactNode
+  className?: string
+}
+
+export type TableBodyProps = {
+  children: (props: { row: Row<unknown> }) => ReactNode
+  className?: string
+}
+
+export type TablePaginationProps = {
+  pageIndex: number
+  pageSize: number
+  pageCount: number
+  totalRows: number
+  onPageSizeChange: (pageSize: number) => void
+  onPreviousPage: () => void
+  onNextPage: () => void
+  pageSizeOptions?: number[]
+  showPageSizeSelector?: boolean
+  className?: string
+  isLoading?: boolean
+}

package/components/_table/utils.ts

@@ -0,0 +1 @@
+