@umituz/web-design-system 2.0.1 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/web-design-system",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "private": false,
   "description": "Web Design System - Atomic Design components (Atoms, Molecules, Organisms, Templates) for React applications",
   "main": "./src/index.ts",
@@ -77,6 +77,7 @@
     "react-day-picker": ">=9.0.0",
     "react-dom": ">=19.0.0",
     "react-i18next": ">=13.0.0",
+    "react-syntax-highlighter": ">=15.0.0",
     "tailwind-merge": ">=2.0.0"
   },
   "devDependencies": {
@@ -99,6 +100,7 @@
     "@radix-ui/react-tooltip": "^1.2.7",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.577.0",
@@ -106,6 +108,7 @@
     "react-day-picker": "^9.14.0",
     "react-dom": "^19.0.0",
     "react-i18next": "^13.0.0",
+    "react-syntax-highlighter": "^16.1.1",
     "tailwind-merge": "^3.5.0",
     "typescript": "~5.9.2"
   },

package/src/presentation/organisms/ImageLightbox.tsx

@@ -0,0 +1,253 @@
+/**
+ * ImageLightbox Component (Organism)
+ * @description Full-screen image gallery with zoom, navigation, and thumbnails
+ */
+
+import { useState, useCallback, useEffect } from 'react';
+import { cn } from '../../infrastructure/utils';
+import type { BaseProps } from '../../domain/types';
+import { Icon } from '../atoms/Icon';
+
+export interface ImageLightboxImage {
+  src: string;
+  alt: string;
+  title?: string;
+}
+
+export interface ImageLightboxProps extends BaseProps {
+  images: ImageLightboxImage[];
+  initialIndex?: number;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export const ImageLightbox = ({
+  images,
+  initialIndex = 0,
+  isOpen,
+  onClose,
+  className,
+}: ImageLightboxProps) => {
+  // Early return if closed
+  if (!isOpen) return null;
+
+  // Early return if no images
+  if (!images || images.length === 0) {
+    return null;
+  }
+
+  const [currentIndex, setCurrentIndex] = useState(initialIndex);
+  const [isZoomed, setIsZoomed] = useState(false);
+
+  // Ensure initialIndex is within bounds
+  const safeIndex = Math.min(Math.max(initialIndex, 0), images.length - 1);
+  const currentImage = images[safeIndex];
+
+  // Use useCallback to memoize navigation functions
+  const goToNext = useCallback(() => {
+    setCurrentIndex((prev) => (prev + 1) % images.length);
+  }, [images.length]);
+
+  const goToPrevious = useCallback(() => {
+    setCurrentIndex((prev) => (prev - 1 + images.length) % images.length);
+  }, [images.length]);
+
+  const handleImageClick = useCallback(() => {
+    setIsZoomed(!isZoomed);
+  }, [isZoomed]);
+
+  // Handle keyboard navigation
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      switch (e.key) {
+        case 'Escape':
+          onClose();
+          break;
+        case 'ArrowLeft':
+          goToPrevious();
+          break;
+        case 'ArrowRight':
+          goToNext();
+          break;
+        case '+':
+        case '=':
+          setIsZoomed(!isZoomed);
+          break;
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [onClose, goToPrevious, goToNext, isZoomed]);
+
+  // Prevent body scroll when lightbox is open
+  useEffect(() => {
+    const originalOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+
+    return () => {
+      document.body.style.overflow = originalOverflow;
+    };
+  }, []);
+
+  if (!currentImage) return null;
+
+  return (
+    <div
+      className="fixed inset-0 z-50 bg-black/90 flex items-center justify-center p-4"
+      onClick={onClose}
+    >
+      {/* Close button */}
+      <button
+        onClick={onClose}
+        className="absolute top-4 right-4 p-2 bg-black/50 hover:bg-black/70 rounded-full text-white transition-all"
+        aria-label="Close lightbox"
+      >
+        <Icon className="text-white">
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M6 18L18 6M6 6l12 12"
+          />
+        </Icon>
+      </button>
+
+      {/* Navigation - Previous */}
+      {images.length > 1 && (
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            goToPrevious();
+          }}
+          className="absolute left-4 p-2 bg-black/50 hover:bg-black/70 rounded-full text-white transition-all"
+          aria-label="Previous image"
+        >
+          <Icon className="text-white" size="lg">
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M15 19l-7-7 7-7"
+            />
+          </Icon>
+        </button>
+      )}
+
+      {/* Navigation - Next */}
+      {images.length > 1 && (
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            goToNext();
+          }}
+          className="absolute right-4 p-2 bg-black/50 hover:bg-black/70 rounded-full text-white transition-all"
+          aria-label="Next image"
+        >
+          <Icon className="text-white" size="lg">
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M9 5l7 7-7 7"
+            />
+          </Icon>
+        </button>
+      )}
+
+      {/* Main Image */}
+      <div
+        className="relative max-w-5xl max-h-[90vh] w-full"
+        onClick={handleImageClick}
+      >
+        <img
+          src={currentImage.src}
+          alt={currentImage.alt}
+          className={cn(
+            'w-full h-full object-contain',
+            isZoomed ? 'cursor-zoom-out' : 'cursor-zoom-in'
+          )}
+          style={{
+            maxHeight: '90vh',
+            objectFit: 'contain',
+          }}
+        />
+
+        {/* Zoom indicator */}
+        <div className="absolute bottom-4 right-4 flex items-center gap-2 bg-black/50 px-3 py-2 rounded-full">
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              setIsZoomed(!isZoomed);
+            }}
+            className="p-1 hover:bg-black/70 rounded-full transition-all text-white"
+            aria-label={isZoomed ? 'Zoom out' : 'Zoom in'}
+          >
+            {isZoomed ? (
+              <Icon className="text-white" size="sm">
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM13 10H7"
+                />
+              </Icon>
+            ) : (
+              <Icon className="text-white" size="sm">
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v6m3-3H7"
+                />
+              </Icon>
+            )}
+          </button>
+        </div>
+      </div>
+
+      {/* Image Counter */}
+      {images.length > 1 && (
+        <div className="absolute bottom-4 left-4 bg-black/50 px-4 py-2 rounded-full text-white text-sm">
+          {currentIndex + 1} / {images.length}
+        </div>
+      )}
+
+      {/* Image Title */}
+      {currentImage.title && (
+        <div className="absolute bottom-4 left-1/2 -translate-x-1/2 bg-black/50 px-4 py-2 rounded-full text-white text-sm max-w-md text-center">
+          {currentImage.title}
+        </div>
+      )}
+
+      {/* Thumbnails */}
+      {images.length > 1 && (
+        <div className="absolute bottom-20 left-1/2 -translate-x-1/2 flex gap-2 max-w-xl overflow-x-auto">
+          {images.map((image, index) => (
+            <button
+              key={index}
+              onClick={(e) => {
+                e.stopPropagation();
+                setCurrentIndex(index);
+              }}
+              className={cn(
+                'flex-shrink-0 w-16 h-16 rounded-lg overflow-hidden border-2 transition-all',
+                index === currentIndex
+                  ? 'border-white scale-110'
+                  : 'border-transparent opacity-50 hover:opacity-100'
+              )}
+            >
+              <img
+                src={image.src}
+                alt={image.alt}
+                className="w-full h-full object-cover"
+              />
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+ImageLightbox.displayName = 'ImageLightbox';

package/src/presentation/organisms/index.ts

@@ -1,75 +1,24 @@
 /**
  * Organisms Export
- * @description Organism components - complex UI combinations
+ * @description Complex UI components composed of molecules and atoms
  * Subpath: @umituz/web-design-system/organisms
  */
 
-export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './Card';
-export type { CardProps } from './Card';
-
-export { Alert, AlertTitle, AlertDescription } from './Alert';
-export type { AlertProps } from './Alert';
-
-export { Modal, ModalHeader, ModalTitle, ModalDescription, ModalContent, ModalFooter } from './Modal';
-export type { ModalProps } from './Modal';
-
+// Layout & Structure
 export { Navbar, NavbarBrand, NavbarLinks, NavbarActions } from './Navbar';
 export type { NavbarProps } from './Navbar';
 
-export {
-  Table,
-  TableHeader,
-  TableBody,
-  TableFooter,
-  TableRow,
-  TableHead,
-  TableCell,
-  TableCaption
-} from './Table';
-export type { TableProps } from './Table';
-
-export { Tabs } from './Tabs';
-export type { TabsProps, Tab } from './Tabs';
-
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from './Accordion';
-
-export {
-  Dialog,
-  DialogPortal,
-  DialogOverlay,
-  DialogClose,
-  DialogTrigger,
-  DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
-  DialogDescription,
-} from './Dialog';
+export { Footer } from './Footer';
 
 export { Breadcrumbs } from './Breadcrumb';
-export type { BreadcrumbsProps, BreadcrumbItem } from './Breadcrumb';
+export type { BreadcrumbItem, BreadcrumbsProps } from './Breadcrumb';
 
-export { HoverCard, HoverCardTrigger, HoverCardContent } from './HoverCard';
-
-export { Popover, PopoverTrigger, PopoverContent } from './Popover';
-
-export { Collapsible, CollapsibleTrigger, CollapsibleContent } from './Collapsible';
-
-export {
-  Sheet,
-  SheetClose,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetOverlay,
-  SheetPortal,
-  SheetTitle,
-  SheetTrigger,
-} from './Sheet';
+// Data Display
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './Card';
+export type { CardProps, CardHeaderProps, CardTitleProps, CardDescriptionProps, CardContentProps, CardFooterProps } from './Card';
 
-export { Footer } from './Footer';
-export type { FooterProps } from './Footer';
+export { StatCard } from './StatCard';
+export type { StatCardProps } from './StatCard';
 
 export { MetricCard } from './MetricCard';
 export type { MetricCardProps } from './MetricCard';
@@ -77,57 +26,80 @@ export type { MetricCardProps } from './MetricCard';
 export { QuickActionCard } from './QuickActionCard';
 export type { QuickActionCardProps } from './QuickActionCard';
 
+// Lists & Tables
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell } from './Table';
+export type { TableProps, TableHeaderProps, TableBodyProps, TableFooterProps, TableHeadProps, TableRowProps, TableCellProps } from './Table';
+
+export { DataTable } from './DataTable';
+export type { DataTableProps, ColumnDef } from './DataTable';
+
+export { List, ListItem, ListHeader } from './List';
+export type { ListProps, ListItemProps, ListHeaderProps } from './List';
+
+// Feedback & Empty States
+export { Alert, AlertTitle, AlertDescription } from './Alert';
+export type { AlertProps, AlertTitleProps, AlertDescriptionProps } from './Alert';
+
 export { EmptyState } from './EmptyState';
 export type { EmptyStateProps } from './EmptyState';
 
 export { LoadingState } from './LoadingState';
 export type { LoadingStateProps } from './LoadingState';
 
-export { DataTable } from './DataTable';
-export type { DataTableProps, Column } from './DataTable';
+// Overlays & Modals
+export { Dialog, DialogHeader, DialogTitle, DialogDescription, DialogContent, DialogFooter } from './Dialog';
+export type { DialogProps } from './Dialog';
 
-export { StatCard } from './StatCard';
-export type { StatCardProps } from './StatCard';
+export { Modal } from './Modal';
+export type { ModalProps } from './Modal';
 
 export { FormModal } from './FormModal';
 export type { FormModalProps } from './FormModal';
 
-export { ConfirmDialog } from './ConfirmDialog';
-export type { ConfirmDialogProps } from './ConfirmDialog';
+export { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction } from './AlertDialog';
+export type { AlertDialogProps } from './AlertDialog';
 
-export { Calendar } from './Calendar';
-export type { CalendarProps } from './Calendar';
+export { Popover, PopoverTrigger, PopoverContent } from './Popover';
+export type { PopoverProps } from './Popover';
+
+export { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetFooter } from './Sheet';
+export type { SheetProps, SheetSide } from './Sheet';
+
+export { HoverCard, HoverCardTrigger, HoverCardContent } from './HoverCard';
+export type { HoverCardProps } from './HoverCard';
+
+export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuLabel } from './DropdownMenu';
+export type { DropdownMenuProps } from './DropdownMenu';
 
-export {
-  AlertDialog,
-  AlertDialogPortal,
-  AlertDialogOverlay,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogFooter,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogAction,
-  AlertDialogCancel,
-} from './AlertDialog';
-
-export {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuGroup,
-  DropdownMenuPortal,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuRadioGroup,
-} from './DropdownMenu';
+// Interactive Components
+export { Tabs, TabsList, TabsTrigger, TabsContent } from './Tabs';
+export type { TabsProps } from './Tabs';
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from './Accordion';
+export type { AccordionProps } from './Accordion';
+
+export { Toggle } from './Toggle';
+export type { ToggleProps } from './Toggle';
 
 export { ToggleGroup, ToggleGroupItem } from './ToggleGroup';
+export type { ToggleGroupProps, ToggleGroupItemProps } from './ToggleGroup';
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent } from './Collapsible';
+export type { CollapsibleProps } from './Collapsible';
+
+// Form Components
+export { CheckboxGroup } from './CheckboxGroup';
+export type { CheckboxGroupProps } from './CheckboxGroup';
+
+export { RadioGroup, RadioGroupItem } from './RadioGroup';
+export type { RadioGroupProps, RadioGroupItemProps } from './RadioGroup';
+
+export { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, SelectGroup, SelectLabel, SelectSeparator } from './Select';
+export type { SelectProps } from './Select';
+
+export { Calendar } from './Calendar';
+export type { CalendarProps } from './Calendar';
+
+// NEW: Media & Content Components
+export { ImageLightbox } from './ImageLightbox';
+export type { ImageLightboxProps, ImageLightboxImage } from './ImageLightbox';