@umituz/web-design-system 1.5.1 → 1.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/web-design-system",
-  "version": "1.5.1",
+  "version": "1.7.1",
   "private": false,
   "description": "Web Design System - Atomic Design components (Atoms, Molecules, Organisms, Templates) for React applications",
   "main": "./src/index.ts",
@@ -53,14 +53,27 @@
   },
   "peerDependencies": {
     "@radix-ui/react-accordion": ">=1.0.0",
+    "@radix-ui/react-collapsible": ">=1.0.0",
+    "@radix-ui/react-dialog": ">=1.0.0",
+    "@radix-ui/react-hover-card": ">=1.0.0",
+    "@radix-ui/react-label": ">=2.0.0",
+    "@radix-ui/react-popover": ">=1.0.0",
+    "@radix-ui/react-scroll-area": ">=1.0.0",
     "@radix-ui/react-select": ">=2.0.0",
     "clsx": ">=2.0.0",
+    "lucide-react": ">=0.400.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "tailwind-merge": ">=2.0.0"
   },
   "devDependencies": {
     "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-hover-card": "^1.1.8",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-scroll-area": "^1.2.10",
     "@radix-ui/react-select": "^2.2.6",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",

package/src/presentation/atoms/Label.tsx

@@ -0,0 +1,25 @@
+/**
+ * Label Component (Atom)
+ * @description Form label (Shadcn/ui compatible)
+ */
+
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { cn } from '../../infrastructure/utils';
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(
+      'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+      className
+    )}
+    {...props}
+  />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };

package/src/presentation/atoms/index.ts

@@ -45,3 +45,5 @@ export type { TooltipProps } from './Tooltip';
 
 export { Progress } from './Progress';
 export type { ProgressProps } from './Progress';
+
+export { Label } from './Label';

package/src/presentation/molecules/ListItem.tsx

@@ -0,0 +1,128 @@
+/**
+ * ListItem Component (Molecule)
+ * @description Reusable list item with icon, content, and actions
+ * Reduces boilerplate in list components throughout the app
+ */
+
+import { forwardRef, type ReactNode, type MouseEvent } from 'react';
+import { cn } from '../../infrastructure/utils';
+import { Button } from '../atoms';
+import type { BaseProps } from '../../domain/types';
+
+export interface ListItemProps extends BaseProps {
+  title: string;
+  description?: string;
+  icon?: ReactNode;
+  actions?: ReactNode;
+  leftContent?: ReactNode;
+  rightContent?: ReactNode;
+  onClick?: () => void;
+  href?: string;
+  disabled?: boolean;
+  selected?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+  variant?: 'default' | 'bordered' | 'ghost';
+}
+
+const sizeStyles = {
+  sm: 'p-3 gap-3',
+  md: 'p-4 gap-4',
+  lg: 'p-5 gap-5',
+};
+
+const titleSizeStyles = {
+  sm: 'text-sm',
+  md: 'text-base',
+  lg: 'text-lg',
+};
+
+const descriptionSizeStyles = {
+  sm: 'text-xs',
+  md: 'text-sm',
+  lg: 'text-base',
+};
+
+const iconSizeStyles = {
+  sm: 'h-4 w-4',
+  md: 'h-5 w-5',
+  lg: 'h-6 w-6',
+};
+
+export const ListItem = forwardRef<HTMLDivElement, ListItemProps>(
+  (
+    {
+      className,
+      title,
+      description,
+      icon,
+      actions,
+      leftContent,
+      rightContent,
+      onClick,
+      href,
+      disabled = false,
+      selected = false,
+      size = 'md',
+      variant = 'default',
+      ...props
+    },
+    ref
+  ) => {
+    const baseClasses = cn(
+      'flex items-center justify-between w-full transition-all duration-200',
+      sizeStyles[size],
+      !disabled && onClick && 'cursor-pointer hover:bg-muted/50 active:scale-[0.98]',
+      selected && 'bg-muted/50 border-primary',
+      variant === 'bordered' && 'border border-border rounded-lg',
+      variant === 'ghost' && 'hover:bg-muted/30',
+      disabled && 'opacity-50 cursor-not-allowed',
+      className
+    );
+
+    const content = (
+      <>
+        {leftContent || icon ? (
+          <div className="flex items-center gap-3 flex-shrink-0">
+            {icon && <div className={cn(iconSizeStyles[size], 'text-muted-foreground')}>{icon}</div>}
+            {!icon && leftContent}
+          </div>
+        ) : null}
+
+        <div className="flex-1 min-w-0">
+          <p className={cn('font-medium text-foreground truncate', titleSizeStyles[size])}>{title}</p>
+          {description && (
+            <p className={cn('text-muted-foreground truncate', descriptionSizeStyles[size])}>{description}</p>
+          )}
+        </div>
+
+        {rightContent || actions ? (
+          <div className="flex items-center gap-2 flex-shrink-0">
+            {rightContent}
+            {actions}
+          </div>
+        ) : null}
+      </>
+    );
+
+    if (href && !disabled) {
+      return (
+        <a href={href} ref={ref as any} className={baseClasses} {...(props as any)}>
+          {content}
+        </a>
+      );
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={baseClasses}
+        onClick={disabled ? undefined : onClick}
+        {...props}
+      >
+        {content}
+      </div>
+    );
+  }
+);
+
+ListItem.displayName = 'ListItem';

package/src/presentation/molecules/ScrollArea.tsx

@@ -0,0 +1,50 @@
+/**
+ * ScrollArea Component (Molecule)
+ * @description Custom scrollable area (Shadcn/ui compatible)
+ */
+
+import * as React from 'react';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import { cn } from '../../infrastructure/utils';
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn('relative overflow-hidden', className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = 'vertical', ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      'flex touch-none select-none transition-colors',
+      orientation === 'vertical' &&
+        'h-full w-2.5 border-l border-l-transparent p-[1px]',
+      orientation === 'horizontal' &&
+        'h-2.5 flex-col border-t border-t-transparent p-[1px]',
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };

package/src/presentation/molecules/index.ts

@@ -33,3 +33,8 @@ export type { CheckboxGroupProps, CheckboxOption } from './CheckboxGroup';
 
 export { InputGroup, GroupedInput } from './InputGroup';
 export type { InputGroupProps } from './InputGroup';
+
+export { ScrollArea, ScrollBar } from './ScrollArea';
+
+export { ListItem } from './ListItem';
+export type { ListItemProps } from './ListItem';

package/src/presentation/organisms/Alert.tsx

@@ -4,32 +4,23 @@
  */
 
 import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '../../infrastructure/utils';
 
-const alertVariants = cva(
-  'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
-  {
-    variants: {
-      variant: {
-        default: 'bg-background text-foreground',
-        destructive: 'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  }
-);
-
-export interface AlertProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof alertVariants> {}
+export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: 'default' | 'destructive';
+}
 
 const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
-  ({ className, variant, ...props }, ref) => (
+  ({ className, variant = 'default', ...props }, ref) => (
     <div
       ref={ref}
       role="alert"
-      className={cn(alertVariants({ variant }), className)}
+      className={cn(
+        'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
+        variant === 'default' && 'bg-background text-foreground',
+        variant === 'destructive' && 'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
+        className
+      )}
       {...props}
     />
   )

package/src/presentation/organisms/Collapsible.tsx

@@ -0,0 +1,14 @@
+/**
+ * Collapsible Component (Organism)
+ * @description Collapsible content (Shadcn/ui compatible)
+ */
+
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+
+const Collapsible = CollapsiblePrimitive.Root;
+
+const CollapsibleTrigger = CollapsiblePrimitive.Trigger;
+
+const CollapsibleContent = CollapsiblePrimitive.Content;
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/src/presentation/organisms/ConfirmDialog.tsx

@@ -0,0 +1,97 @@
+/**
+ * ConfirmDialog Component (Organism)
+ * @description Confirmation dialog for destructive actions
+ * Reduces boilerplate in delete/remove confirmation modals
+ */
+
+import { forwardRef, type ReactNode } from 'react';
+import { cn } from '../../infrastructure/utils';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from './Dialog';
+import { Button } from '../atoms';
+import { AlertTriangle } from 'lucide-react';
+import type { BaseProps } from '../../domain/types';
+
+export interface ConfirmDialogProps extends BaseProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: string;
+  message?: string;
+  description?: string;
+  onConfirm: () => void | Promise<void>;
+  loading?: boolean;
+  confirmText?: string;
+  cancelText?: string;
+  variant?: 'default' | 'destructive';
+  icon?: ReactNode;
+}
+
+export const ConfirmDialog = forwardRef<HTMLDivElement, ConfirmDialogProps>(
+  (
+    {
+      className,
+      open,
+      onOpenChange,
+      title,
+      message,
+      description,
+      onConfirm,
+      loading = false,
+      confirmText = 'Confirm',
+      cancelText = 'Cancel',
+      variant = 'destructive',
+      icon,
+      ...props
+    },
+    ref
+  ) => {
+    const handleConfirm = async () => {
+      if (!loading) {
+        await onConfirm();
+        onOpenChange(false);
+      }
+    };
+
+    return (
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent className={cn('sm:max-w-[425px]', className)} ref={ref} {...props}>
+          <DialogHeader>
+            <div className="flex items-center gap-3">
+              {icon || (
+                variant === 'destructive' && (
+                  <div className="w-10 h-10 rounded-full bg-destructive/10 flex items-center justify-center">
+                    <AlertTriangle className="h-5 w-5 text-destructive" />
+                  </div>
+                )
+              )}
+              <DialogTitle>{title}</DialogTitle>
+            </div>
+            {description && <DialogDescription>{description}</DialogDescription>}
+          </DialogHeader>
+          {message && (
+            <div className="py-4">
+              <p className="text-sm text-muted-foreground">{message}</p>
+            </div>
+          )}
+          <DialogFooter>
+            <Button variant="outline" onClick={() => onOpenChange(false)} disabled={loading}>
+              {cancelText}
+            </Button>
+            <Button variant={variant} onClick={handleConfirm} disabled={loading}>
+              {loading && <span className="mr-2 h-4 w-4 animate-spin">⟳</span>}
+              {confirmText}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+);
+
+ConfirmDialog.displayName = 'ConfirmDialog';

package/src/presentation/organisms/DataTable.tsx

@@ -0,0 +1,233 @@
+/**
+ * DataTable Component (Organism)
+ * @description Enhanced table component for displaying data with sorting and pagination
+ */
+
+import { useState, useMemo } from 'react';
+import { cn } from '../../infrastructure/utils';
+import {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableRow,
+  TableHead,
+  TableCell,
+  TableCaption,
+} from './Table';
+import { Button } from '../atoms/Button';
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';
+import type { BaseProps, SizeVariant, ColorVariant } from '../../domain/types';
+
+export interface Column<T> {
+  id: string;
+  header: string;
+  accessor: keyof T | ((row: T) => React.ReactNode);
+  cell?: (row: T) => React.ReactNode;
+  sortable?: boolean;
+  className?: string;
+}
+
+export interface DataTableProps<T> extends BaseProps {
+  data: T[];
+  columns: Column<T>[];
+  caption?: string;
+  size?: Extract<SizeVariant, 'sm' | 'md' | 'lg'>;
+  variant?: ColorVariant;
+  sortable?: boolean;
+  paginated?: boolean;
+  pageSize?: number;
+  emptyState?: {
+    title: string;
+    description?: string;
+  };
+  onRowClick?: (row: T) => void;
+}
+
+export function DataTable<T extends Record<string, unknown>>({
+  className,
+  data,
+  columns,
+  caption,
+  size = 'md',
+  variant = 'primary',
+  sortable = false,
+  paginated = false,
+  pageSize = 10,
+  emptyState,
+  onRowClick,
+  ...props
+}: DataTableProps<T>) {
+  const [sortColumn, setSortColumn] = useState<string | null>(null);
+  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const handleSort = (columnId: string) => {
+    if (!sortable) return;
+
+    if (sortColumn === columnId) {
+      setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
+    } else {
+      setSortColumn(columnId);
+      setSortDirection('asc');
+    }
+  };
+
+  const sortedData = useMemo(() => {
+    if (!sortColumn || !sortable) return data;
+
+    return [...data].sort((a, b) => {
+      const column = columns.find((col) => col.id === sortColumn);
+      if (!column) return 0;
+
+      const aValue = typeof column.accessor === 'function' ? column.accessor(a) : a[column.accessor];
+      const bValue = typeof column.accessor === 'function' ? column.accessor(b) : b[column.accessor];
+
+      if (aValue === bValue) return 0;
+
+      const comparison = aValue < bValue ? -1 : 1;
+      return sortDirection === 'asc' ? comparison : -comparison;
+    });
+  }, [data, sortColumn, sortDirection, columns, sortable]);
+
+  const paginatedData = useMemo(() => {
+    if (!paginated) return sortedData;
+
+    const start = (currentPage - 1) * pageSize;
+    const end = start + pageSize;
+    return sortedData.slice(start, end);
+  }, [sortedData, currentPage, paginated, pageSize]);
+
+  const totalPages = Math.ceil(data.length / pageSize);
+
+  const renderCell = (row: T, column: Column<T>) => {
+    if (column.cell) {
+      return column.cell(row);
+    }
+
+    const value = typeof column.accessor === 'function' ? column.accessor(row) : row[column.accessor];
+    return value as React.ReactNode;
+  };
+
+  const sizeStyles = {
+    sm: 'text-xs',
+    md: 'text-sm',
+    lg: 'text-base',
+  };
+
+  const paddingStyles = {
+    sm: 'px-2 py-2',
+    md: 'px-4 py-3',
+    lg: 'px-6 py-4',
+  };
+
+  if (data.length === 0 && emptyState) {
+    return (
+      <div className={cn('p-8 text-center', className)}>
+        <p className="font-semibold text-foreground">{emptyState.title}</p>
+        {emptyState.description && (
+          <p className="text-sm text-muted-foreground mt-1">{emptyState.description}</p>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn('space-y-4', className)} {...props}>
+      <Table>
+        {caption && <TableCaption>{caption}</TableCaption>}
+        <TableHeader>
+          <TableRow>
+            {columns.map((column) => (
+              <TableHead
+                key={column.id}
+                className={cn(
+                  sizeStyles[size],
+                  paddingStyles[size],
+                  column.sortable && sortable && 'cursor-pointer hover:bg-muted/50',
+                  column.className
+                )}
+                onClick={() => column.sortable && handleSort(column.id)}
+              >
+                <div className="flex items-center gap-2">
+                  {column.header}
+                  {column.sortable && sortable && sortColumn === column.id && (
+                    <span className="text-xs">{sortDirection === 'asc' ? '↑' : '↓'}</span>
+                  )}
+                </div>
+              </TableHead>
+            ))}
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {paginatedData.map((row, rowIndex) => (
+            <TableRow
+              key={rowIndex}
+              className={cn(onRowClick && 'cursor-pointer hover:bg-muted/50')}
+              onClick={() => onRowClick?.(row)}
+            >
+              {columns.map((column) => (
+                <TableCell
+                  key={column.id}
+                  className={cn(paddingStyles[size], column.className)}
+                >
+                  {renderCell(row, column)}
+                </TableCell>
+              ))}
+            </TableRow>
+          ))}
+        </TableBody>
+        {paginated && (
+          <TableFooter>
+            <TableRow>
+              <TableCell colSpan={columns.length}>
+                <div className="flex items-center justify-between">
+                  <p className={cn('text-muted-foreground', sizeStyles[size])}>
+                    Showing {((currentPage - 1) * pageSize) + 1} to {Math.min(currentPage * pageSize, data.length)} of {data.length} results
+                  </p>
+                  <div className="flex items-center gap-2">
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      onClick={() => setCurrentPage(1)}
+                      disabled={currentPage === 1}
+                    >
+                      <ChevronsLeft className="h-4 w-4" />
+                    </Button>
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
+                      disabled={currentPage === 1}
+                    >
+                      <ChevronLeft className="h-4 w-4" />
+                    </Button>
+                    <span className={cn('text-sm font-medium', sizeStyles[size])}>
+                      Page {currentPage} of {totalPages}
+                    </span>
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
+                      disabled={currentPage === totalPages}
+                    >
+                      <ChevronRight className="h-4 w-4" />
+                    </Button>
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      onClick={() => setCurrentPage(totalPages)}
+                      disabled={currentPage === totalPages}
+                    >
+                      <ChevronsRight className="h-4 w-4" />
+                    </Button>
+                  </div>
+                </div>
+              </TableCell>
+            </TableRow>
+          </TableFooter>
+        )}
+      </Table>
+    </div>
+  );
+}