@umituz/web-design-system 1.3.1 → 1.7.1

package/src/presentation/organisms/Accordion.tsx

@@ -1,117 +1,59 @@
 /**
  * Accordion Component (Organism)
- * @description Collapsible content sections
+ * @description Collapsible content sections (Shadcn/ui compatible)
  */
 
-import { useState, useCallback, type ReactNode, type HTMLAttributes } from 'react';
+import * as React from 'react';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { ChevronDown } from 'lucide-react';
 import { cn } from '../../infrastructure/utils';
-import type { BaseProps } from '../../domain/types';
-import { Icon } from '../atoms/Icon';
 
-export interface AccordionItem {
-  value: string;
-  title: string;
-  content: ReactNode;
-  disabled?: boolean;
-}
-
-export interface AccordionProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
-  items: AccordionItem[];
-  allowMultiple?: boolean;
-  defaultValue?: string[];
-  variant?: 'default' | 'bordered' | 'ghost';
-}
-
-const variantStyles: Record<'default' | 'bordered' | 'ghost', string> = {
-  default: 'border-b',
-  bordered: 'border rounded-lg mb-2',
-  ghost: 'border-0',
-};
-
-export function Accordion({
-  items,
-  allowMultiple = false,
-  defaultValue = [],
-  variant = 'default',
-  className,
-  ...props
-}: AccordionProps) {
-  const [openItems, setOpenItems] = useState<string[]>(defaultValue);
-
-  const toggleItem = useCallback((value: string) => {
-    setOpenItems((prev) => {
-      const isOpen = prev.includes(value);
-
-      if (allowMultiple) {
-        return isOpen
-          ? prev.filter((v) => v !== value)
-          : [...prev, value];
-      } else {
-        return isOpen ? [] : [value];
-      }
-    });
-  }, [allowMultiple]);
-
-  return (
-    <div className={cn('w-full', className)} {...props}>
-      {items.map((item, index) => {
-        const isOpen = openItems.includes(item.value);
-
-        return (
-          <div
-            key={item.value}
-            className={cn(
-              'group',
-              variantStyles[variant],
-              variant === 'bordered' && isOpen && 'ring-1 ring-ring'
-            )}
-          >
-            {/* Header */}
-            <button
-              onClick={() => toggleItem(item.value)}
-              disabled={item.disabled}
-              className={cn(
-                'flex w-full items-center justify-between py-4 font-medium transition-all',
-                'hover:text-foreground',
-                item.disabled && 'opacity-50 cursor-not-allowed',
-                variant === 'bordered' && 'px-4'
-              )}
-            >
-              <span>{item.title}</span>
-              <Icon
-                className={cn(
-                  'transition-transform duration-200',
-                  isOpen && 'rotate-180'
-                )}
-                size="sm"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  d="M19.5 8.25l-7.5 7.5-7.5-7.5"
-                />
-              </Icon>
-            </button>
-
-            {/* Content */}
-            {isOpen && (
-              <div
-                className={cn(
-                  'overflow-hidden',
-                  'animate-accordion-down',
-                  variant === 'bordered' && 'px-4 pb-4'
-                )}
-              >
-                <div className="pb-4 text-sm text-muted-foreground">
-                  {item.content}
-                </div>
-              </div>
-            )}
-          </div>
-        );
-      })}
-    </div>
-  );
-}
-
-Accordion.displayName = 'Accordion';
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn('border-b', className)}
+    {...props}
+  />
+));
+AccordionItem.displayName = 'AccordionItem';
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn('pb-4 pt-0', className)}>{children}</div>
+  </AccordionPrimitive.Content>
+));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/src/presentation/organisms/Alert.tsx

@@ -1,96 +1,54 @@
 /**
  * Alert Component (Organism)
- * @description Feedback message with icon
+ * @description Feedback message (Shadcn/ui compatible)
  */
 
-import { forwardRef, type HTMLAttributes } from 'react';
+import * as React from 'react';
 import { cn } from '../../infrastructure/utils';
-import type { BaseProps, ChildrenProps, ColorVariant } from '../../domain/types';
-import { Icon } from '../atoms/Icon';
 
-export type AlertVariant = Extract<ColorVariant, 'success' | 'warning' | 'destructive'> | 'info';
-
-export interface AlertProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
-  variant?: AlertVariant;
-  showIcon?: boolean;
+export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: 'default' | 'destructive';
 }
 
-const variantStyles: Record<AlertVariant, { container: string; iconColor: string }> = {
-  success: {
-    container: 'border-success bg-success/10 text-success',
-    iconColor: 'text-success',
-  },
-  warning: {
-    container: 'border-warning bg-warning/10 text-warning',
-    iconColor: 'text-warning',
-  },
-  destructive: {
-    container: 'border-destructive bg-destructive/10 text-destructive',
-    iconColor: 'text-destructive',
-  },
-  info: {
-    container: 'border-primary bg-primary/10 text-primary',
-    iconColor: 'text-primary',
-  },
-};
-
-const icons: Record<AlertVariant, React.ReactNode> = {
-  success: (
-    <path
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-    />
-  ),
-  warning: (
-    <path
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
-    />
-  ),
-  destructive: (
-    <path
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
-    />
-  ),
-  info: (
-    <path
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"
+const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
+  ({ className, variant = 'default', ...props }, ref) => (
+    <div
+      ref={ref}
+      role="alert"
+      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}
     />
-  ),
-};
-
-export const Alert = forwardRef<HTMLDivElement, AlertProps>(
-  ({ className, variant = 'info', showIcon = true, children, ...props }, ref) => {
-    const styles = variantStyles[variant];
-
-    return (
-      <div
-        ref={ref}
-        role="alert"
-        className={cn(
-          'relative w-full rounded-lg border p-4',
-          styles.container,
-          className
-        )}
-        {...props}
-      >
-        <div className="flex items-start gap-3">
-          {showIcon && (
-            <Icon className={cn('shrink-0 mt-0.5', styles.iconColor)} size="sm">
-              {icons[variant]}
-            </Icon>
-          )}
-          <div className="flex-1">{children}</div>
-        </div>
-      </div>
-    );
-  }
+  )
 );
-
 Alert.displayName = 'Alert';
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn('mb-1 font-medium leading-none tracking-tight', className)}
+    {...props}
+  />
+));
+AlertTitle.displayName = 'AlertTitle';
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('text-sm [&_p]:leading-relaxed', className)}
+    {...props}
+  />
+));
+AlertDescription.displayName = 'AlertDescription';
+
+export { Alert, AlertTitle, AlertDescription };

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>
+  );
+}