-
-
-
- {columns.map((column) => (
- |
- {column.header}
- |
- ))}
-
-
-
- {data.length === 0 ? (
-
- |
- {emptyMessage}
- |
-
- ) : (
- data.map((row, rowIndex) => (
- onRowClick?.(row)}
- className={cn(
- 'bg-card hover:bg-muted/50 transition-colors',
- onRowClick && 'cursor-pointer'
- )}
- >
- {columns.map((column) => (
- |
- {column.render
- ? column.render(row[column.key], row)
- : String(row[column.key] ?? '')}
- |
- ))}
-
- ))
- )}
-
-
+ const allSelected = data.length > 0 && selectedIds.length === data.length
+ const someSelected = selectedIds.length > 0 && selectedIds.length < data.length
+
+ const handleSelectAll = () => {
+ if (!onSelectionChange || !getRowId) return
+
+ if (allSelected) {
+ onSelectionChange([])
+ } else {
+ onSelectionChange(data.map(getRowId))
+ }
+ }
+
+ const handleSelectRow = (id: string) => {
+ if (!onSelectionChange) return
+
+ if (selectedIds.includes(id)) {
+ onSelectionChange(selectedIds.filter(selectedId => selectedId !== id))
+ } else {
+ onSelectionChange([...selectedIds, id])
+ }
+ }
+
+ if (loading) {
+ return (
+
+
+ )
+ }
+
+ if (data.length === 0) {
+ return (
+
+ )
+ }
+
+ return (
+
+
+
+
+
+ {selectable && (
+
+
+
+ )}
+ {columns.map((column) => (
+
+ {column.sortable && onSort ? (
+ {
+ const newDirection = sortKey === column.key && sortDirection === 'asc' ? 'desc' : 'asc'
+ onSort(column.key, newDirection)
+ }}
+ />
+ ) : (
+ column.header
+ )}
+
+ ))}
+
+
+
+ {data.map((item, index) => {
+ const rowId = getRowId ? getRowId(item) : String(index)
+ const isSelected = selectedIds.includes(rowId)
+
+ return (
+ onRowClick?.(item)}
+ >
+ {selectable && (
+
+ handleSelectRow(rowId)}
+ aria-label={`Select row ${rowId}`}
+ onClick={(e) => e.stopPropagation()}
+ />
+
+ )}
+ {columns.map((column) => (
+
+ {column.render
+ ? column.render(item)
+ : column.accessor
+ ? column.accessor(item)
+ : (item as any)[column.key]}
+
+ ))}
+
+ )
+ })}
+
+
+
+
+ {pagination && (
+
+ )}
)
}
+
+export { DataTable }
diff --git a/src/components/ui/filter-bar.tsx b/src/components/ui/filter-bar.tsx
index ba5500d..80ff9dc 100644
--- a/src/components/ui/filter-bar.tsx
+++ b/src/components/ui/filter-bar.tsx
@@ -1,38 +1,95 @@
import * as React from 'react'
import { cn } from '@/lib/utils'
+import { Button } from './button'
+import { Funnel, X } from '@phosphor-icons/react'
+import { Badge } from './badge'
+
+export interface FilterOption {
+ key: string
+ label: string
+ value: any
+}
export interface FilterBarProps extends React.HTMLAttributes
{
- children: React.ReactNode
+ activeFilters: FilterOption[]
+ onRemoveFilter: (key: string) => void
+ onClearAll: () => void
+ onOpenFilters?: () => void
+ showFilterButton?: boolean
}
-export function FilterBar({ children, className, ...props }: FilterBarProps) {
- return (
-
- {children}
-
- )
-}
+const FilterBar = React.forwardRef(
+ ({
+ className,
+ activeFilters,
+ onRemoveFilter,
+ onClearAll,
+ onOpenFilters,
+ showFilterButton = true,
+ ...props
+ }, ref) => {
+ if (activeFilters.length === 0 && !showFilterButton) {
+ return null
+ }
-export interface FilterGroupProps extends React.HTMLAttributes {
- label?: string
- children: React.ReactNode
-}
+ return (
+
+ {showFilterButton && onOpenFilters && (
+
+ )}
-export function FilterGroup({ label, children, className, ...props }: FilterGroupProps) {
- return (
-
- {label && (
-
- )}
- {children}
-
- )
-}
+ {activeFilters.map((filter) => (
+
+
+ {filter.label}: {filter.value}
+
+
+
+ ))}
+
+ {activeFilters.length > 0 && (
+
+ )}
+
- {children}
-
- )
+const Grid = React.forwardRef(
+ ({ className, cols = 1, gap = 4, responsive = true, children, ...props }, ref) => {
+ const gridColsClass = responsive
+ ? `grid-cols-1 ${cols >= 2 ? 'sm:grid-cols-2' : ''} ${cols >= 3 ? 'md:grid-cols-3' : ''} ${cols === 4 ? 'lg:grid-cols-4' : ''} ${cols >= 5 ? `lg:grid-cols-${cols}` : ''}`
+ : `grid-cols-${cols}`
+
+ return (
+
+ {children}
+
+ )
+ }
+)
+Grid.displayName = 'Grid'
+
+export interface GridItemProps extends React.HTMLAttributes {
+ colSpan?: 1 | 2 | 3 | 4 | 5 | 6 | 12 | 'full'
+ rowSpan?: 1 | 2 | 3 | 4 | 5 | 6 | 'full'
}
+
+const GridItem = React.forwardRef(
+ ({ className, colSpan, rowSpan, children, ...props }, ref) => {
+ return (
+
+ {children}
+
+ )
+ }
+)
+GridItem.displayName = 'GridItem'
+
+export { Grid, GridItem }
diff --git a/src/components/ui/metric-card.tsx b/src/components/ui/metric-card.tsx
index dcfb69b..3546a52 100644
--- a/src/components/ui/metric-card.tsx
+++ b/src/components/ui/metric-card.tsx
@@ -1,114 +1,64 @@
import * as React from 'react'
import { cn } from '@/lib/utils'
+import { Card } from './card'
-const MetricCard = React.forwardRef<
- HTMLDivElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
-
-))
+export interface MetricCardProps extends React.HTMLAttributes {
+ label: string
+ value: string | number
+ change?: {
+ value: number
+ trend: 'up' | 'down' | 'neutral'
+ }
+ icon?: React.ReactNode
+ description?: string
+ loading?: boolean
+}
+
+const MetricCard = React.forwardRef(
+ ({ className, label, value, change, icon, description, loading = false, ...props }, ref) => {
+ const trendColor = change?.trend === 'up'
+ ? 'text-success'
+ : change?.trend === 'down'
+ ? 'text-destructive'
+ : 'text-muted-foreground'
+
+ const trendSign = change?.trend === 'up' ? '+' : change?.trend === 'down' ? '-' : ''
+
+ return (
+
+
+
+
+ {label}
+
+ {loading ? (
+
+ ) : (
+
+ {value}
+
+ )}
+ {change && (
+
+ {trendSign}{Math.abs(change.value)}%
+
+ )}
+ {description && (
+
+ {description}
+
+ )}
+
+ {icon && (
+
+ {icon}
+
+ )}
+
-
-
+
+
+ {title}
+ {description && {description}}
+
+
+ {children}
+
+ {footer && (
+
+ {footer}
+
)}
- >
- {children}
-
-
+
+
+
+ }
>
-
{children}
- {onClose && (
-
+ {description && (
+
+ {description}
+
)}
-
- {children}
-
- )
-}
-
-export interface ModalBodyProps extends React.HTMLAttributes {
- children: React.ReactNode
-}
-
-export function ModalBody({ children, className, ...props }: ModalBodyProps) {
- return (
-
- {children}
-
- )
-}
-
-export interface ModalFooterProps extends React.HTMLAttributes {
- children: React.ReactNode
-}
-
-export function ModalFooter({ children, className, ...props }: ModalFooterProps) {
- return (
-
- {children}
-
- )
-}
+export { Modal, ConfirmModal }
diff --git a/src/components/ui/page-header.tsx b/src/components/ui/page-header.tsx
index 824efc0..e76c6cc 100644
--- a/src/components/ui/page-header.tsx
+++ b/src/components/ui/page-header.tsx
@@ -2,61 +2,50 @@ import * as React from 'react'
import { cn } from '@/lib/utils'
export interface PageHeaderProps extends React.HTMLAttributes {
- children: React.ReactNode
+ title: string
+ description?: string
+ actions?: React.ReactNode
+ breadcrumbs?: React.ReactNode
+ backButton?: React.ReactNode
}
-export function PageHeader({ children, className, ...props }: PageHeaderProps) {
- return (
-
- {children}
-
- )
-}
+const PageHeader = React.forwardRef(
+ ({ className, title, description, actions, breadcrumbs, backButton, ...props }, ref) => {
+ return (
+
+ {breadcrumbs && (
+
+ {breadcrumbs}
+
+ )}
+
+
+
+ {backButton}
+
+ {title}
+
+
+ {description && (
+
+ {description}
+
+ )}
+
+ {actions && (
+
+ {actions}
+
+ )}
+
+
- {children}
-
- )
-}
-
-export interface PageDescriptionProps extends React.HTMLAttributes {
- children: React.ReactNode
-}
-
-export function PageDescription({ children, className, ...props }: PageDescriptionProps) {
- return (
-
- {children}
-
- )
-}
-
-export interface PageActionsProps extends React.HTMLAttributes {
- children: React.ReactNode
-}
-
-export function PageActions({ children, className, ...props }: PageActionsProps) {
- return (
-
- {children}
-
- )
-}
-
-export interface PageHeaderRowProps extends React.HTMLAttributes {
- children: React.ReactNode
-}
-
-export function PageHeaderRow({ children, className, ...props }: PageHeaderRowProps) {
- return (
-
- {children}
-
- )
-}
+export { PageHeader }
diff --git a/src/components/ui/quick-pagination.tsx b/src/components/ui/quick-pagination.tsx
index 1ff8610..fb6af82 100644
--- a/src/components/ui/quick-pagination.tsx
+++ b/src/components/ui/quick-pagination.tsx
@@ -7,43 +7,76 @@ export interface QuickPaginationProps {
currentPage: number
totalPages: number
onPageChange: (page: number) => void
+ itemsPerPage?: number
+ totalItems?: number
+ showInfo?: boolean
className?: string
}
-export function QuickPagination({
- currentPage,
- totalPages,
- onPageChange,
- className
-}: QuickPaginationProps) {
- const canGoPrevious = currentPage > 1
- const canGoNext = currentPage < totalPages
+const QuickPagination = React.forwardRef(
+ ({
+ currentPage,
+ totalPages,
+ onPageChange,
+ itemsPerPage,
+ totalItems,
+ showInfo = false,
+ className
+ }, ref) => {
+ const canGoPrevious = currentPage > 1
+ const canGoNext = currentPage < totalPages
- return (
-
-
+
+ {title && (
+
+ {title}
+
+ )}
+ {description && (
+
+ {description}
+
+ )}
+
+ {action && (
+
+ {action}
+
+ )}
+
- {children}
-
- )
-}
-
-export interface SectionTitleProps extends React.HTMLAttributes {
- children: React.ReactNode
-}
-
-export function SectionTitle({ children, className, ...props }: SectionTitleProps) {
- return (
-
- {children}
-
- )
-}
-
-export interface SectionDescriptionProps extends React.HTMLAttributes {
- children: React.ReactNode
-}
-
-export function SectionDescription({ children, className, ...props }: SectionDescriptionProps) {
- return (
-
- {children}
-
- )
-}
-
-export interface SectionContentProps extends React.HTMLAttributes {
- children: React.ReactNode
-}
-
-export function SectionContent({ children, className, ...props }: SectionContentProps) {
- return (
-
- {children}
-
- )
-}
+export { Section }
diff --git a/src/components/ui/stack.tsx b/src/components/ui/stack.tsx
index 790ffb0..6a09ff0 100644
--- a/src/components/ui/stack.tsx
+++ b/src/components/ui/stack.tsx
@@ -2,46 +2,62 @@ import * as React from 'react'
import { cn } from '@/lib/utils'
export interface StackProps extends React.HTMLAttributes {
- children: React.ReactNode
direction?: 'horizontal' | 'vertical'
- spacing?: 'none' | 'sm' | 'md' | 'lg' | 'xl'
- align?: 'start' | 'center' | 'end' | 'stretch'
- justify?: 'start' | 'center' | 'end' | 'between' | 'around'
+ spacing?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12
+ align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline'
+ justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'
+ wrap?: boolean
}
-export function Stack({
- children,
- direction = 'vertical',
- spacing = 'md',
- align = 'stretch',
- justify = 'start',
- className,
- ...props
-}: StackProps) {
- return (
-
- {children}
-
- )
-}
+const Stack = React.forwardRef(
+ ({
+ className,
+ direction = 'vertical',
+ spacing = 4,
+ align = 'stretch',
+ justify = 'start',
+ wrap = false,
+ children,
+ ...props
+ }, ref) => {
+ const isHorizontal = direction === 'horizontal'
+
+ const alignmentClass = {
+ start: 'items-start',
+ center: 'items-center',
+ end: 'items-end',
+ stretch: 'items-stretch',
+ baseline: 'items-baseline'
+ }[align]
+
+ const justifyClass = {
+ start: 'justify-start',
+ center: 'justify-center',
+ end: 'justify-end',
+ between: 'justify-between',
+ around: 'justify-around',
+ evenly: 'justify-evenly'
+ }[justify]
+
+ return (
+
+ {children}
+
+ )
+ }
+)
+Stack.displayName = 'Stack'
+
+export { Stack }
diff --git a/src/components/ui/tag.tsx b/src/components/ui/tag.tsx
index 31bf63b..5110d0b 100644
--- a/src/components/ui/tag.tsx
+++ b/src/components/ui/tag.tsx
@@ -1,56 +1,77 @@
import * as React from 'react'
import { cn } from '@/lib/utils'
-import { Button } from './button'
-import { X } from '@phosphor-icons/react'
-export interface TagProps extends React.HTMLAttributes {
- children: React.ReactNode
+export interface TagProps extends React.HTMLAttributes {
+ variant?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'destructive' | 'info'
+ size?: 'sm' | 'md' | 'lg'
onRemove?: () => void
- variant?: 'default' | 'primary' | 'success' | 'warning' | 'destructive'
+ removable?: boolean
}
-export function Tag({
- children,
- onRemove,
- variant = 'default',
- className,
- ...props
-}: TagProps) {
- return (
-
- {children}
- {onRemove && (
-
- )}
-
- )
-}
+const Tag = React.forwardRef(
+ ({
+ className,
+ variant = 'default',
+ size = 'md',
+ onRemove,
+ removable = false,
+ children,
+ ...props
+ }, ref) => {
+ const variantClasses = {
+ default: 'bg-muted text-muted-foreground hover:bg-muted/80',
+ primary: 'bg-primary text-primary-foreground hover:bg-primary/90',
+ secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+ success: 'bg-success/10 text-success hover:bg-success/20',
+ warning: 'bg-warning/10 text-warning hover:bg-warning/20',
+ destructive: 'bg-destructive/10 text-destructive hover:bg-destructive/20',
+ info: 'bg-info/10 text-info hover:bg-info/20'
+ }
-export interface TagGroupProps extends React.HTMLAttributes {
- children: React.ReactNode
-}
+ const sizeClasses = {
+ sm: 'text-xs px-2 py-0.5',
+ md: 'text-sm px-2.5 py-1',
+ lg: 'text-base px-3 py-1.5'
+ }
-export function TagGroup({ children, className, ...props }: TagGroupProps) {
- return (
-
- {children}
-
- )
-}
+ return (
+
+ {children}
+ {(onRemove || removable) && (
+
+ )}
+
+ )
+ }
+)
+Tag.displayName = 'Tag'
+
+export { Tag }
diff --git a/src/hooks/README.md b/src/hooks/README.md
index abb2590..f4ae4e3 100644
--- a/src/hooks/README.md
+++ b/src/hooks/README.md
@@ -1,24 +1,29 @@
# Custom Hook Library
-A comprehensive collection of React hooks for the WorkForce Pro platform.
+A comprehensive collection of 40+ React hooks for the WorkForce Pro platform.
## Available Hooks
-### State Management
+### State Management (7 hooks)
- **useToggle** - Boolean state toggle with setter
- **usePrevious** - Access previous value of state
- **useLocalStorage** - Persist state in localStorage
- **useDisclosure** - Modal/drawer open/close state
-- **useUndo** - Undo/redo state management
+- **useUndo** - Undo/redo state management with history
- **useFormState** - Form state with validation and dirty tracking
+- **useArray** - Array manipulation (push, filter, update, remove, move, swap)
+- **useMap** - Map data structure with reactive updates
+- **useSet** - Set data structure with reactive updates
-### Async Operations
+### Async Operations (4 hooks)
- **useAsync** - Handle async operations with loading/error states
- **useDebounce** - Debounce rapidly changing values
- **useThrottle** - Throttle function calls
- **useInterval** - Declarative setInterval hook
+- **useTimeout** - Declarative setTimeout hook
+- **useCountdown** - Countdown timer with start/pause/reset
-### UI & Interaction
+### UI & Interaction (10 hooks)
- **useMediaQuery** - Responsive media query matching
- **useIsMobile** - Mobile device detection
- **useWindowSize** - Track window dimensions
@@ -31,20 +36,21 @@ A comprehensive collection of React hooks for the WorkForce Pro platform.
- **useClipboard** - Enhanced clipboard with timeout
- **useFocusTrap** - Trap focus within element
-### Data Management
+### Data Management (5 hooks)
- **useFilter** - Filter arrays with debouncing
- **useSort** - Sort arrays by key and direction
- **usePagination** - Paginate large datasets
- **useSelection** - Multi-select management
- **useTable** - Complete table with sort/filter/pagination
-### Forms & Validation
+### Forms & Validation (5 hooks)
- **useFormValidation** - Form validation with error handling
- **useWizard** - Multi-step form/wizard state
- **useMultiStepForm** - Advanced multi-step form with validation
- **useConfirmation** - Confirmation dialog state
+- **useSteps** - Step navigation with progress tracking
-### Browser & Navigation
+### Browser & Navigation (3 hooks)
- **useQueryParams** - URL query parameter management
- **useDownload** - File download utilities (JSON, CSV, etc.)
@@ -283,5 +289,122 @@ import { useInterval } from '@/hooks'
useInterval(() => {
checkForUpdates()
-}, 5000)
+}, 5000, { enabled: true, immediate: false })
```
+
+### useCountdown
+```tsx
+import { useCountdown } from '@/hooks'
+
+const { seconds, minutes, remainingSeconds, start, pause, reset, isFinished } = useCountdown(60)
+
+
+
{minutes}:{remainingSeconds.toString().padStart(2, '0')}
+
+
+
+