@umituz/web-design-system 2.1.0 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/web-design-system",
-  "version": "2.1.0",
+  "version": "2.3.0",
   "private": false,
   "description": "Web Design System - Atomic Design components (Atoms, Molecules, Organisms, Templates) for React applications",
   "main": "./src/index.ts",

package/src/presentation/organisms/Comments.tsx

@@ -0,0 +1,103 @@
+/**
+ * Comments Component (Organism)
+ * @description Giscus-based GitHub Discussions comment widget
+ */
+
+import { useEffect, useRef } from 'react';
+import { cn } from '../../infrastructure/utils';
+import type { BaseProps } from '../../domain/types';
+
+export interface GiscusConfig {
+  repo: string;
+  repoId: string;
+  category?: string;
+  mapping?: 'pathname' | 'url' | 'title' | 'og:title' | 'custom';
+  term?: string;
+  strict?: '0' | '1';
+  reactionsEnabled?: '0' | '1';
+  emitMetadata?: '0' | '1';
+  inputPosition?: 'top' | 'bottom';
+  theme?: 'light' | 'dark' | 'dark_dimmed' | 'transparent_dark' | 'preferred_color_scheme';
+  lang?: string;
+}
+
+export interface CommentsProps extends BaseProps {
+  slug: string;
+  config?: Partial<GiscusConfig>;
+  title?: string;
+  description?: string;
+}
+
+declare global {
+  interface Window {
+    giscus?: {
+      render: (element: HTMLElement, config: Record<string, unknown>) => void;
+    };
+  }
+}
+
+export const Comments = ({
+  slug,
+  config,
+  title = 'Comments',
+  description = 'Join the discussion! Share your thoughts and questions below.',
+  className,
+}: CommentsProps) => {
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    // Load Giscus script dynamically
+    const script = document.createElement('script');
+    script.src = 'https://giscus.app/client.js';
+    script.async = true;
+    script.crossOrigin = 'anonymous';
+
+    script.addEventListener('load', () => {
+      if (window.giscus && rootRef.current) {
+        const defaultConfig: GiscusConfig = {
+          repo: 'umituz/umituz-apps',
+          repoId: 'R_kgDONJ7RJw',
+          category: 'Announcements',
+          mapping: 'pathname',
+          term: slug,
+          strict: '0',
+          reactionsEnabled: '1',
+          emitMetadata: '0',
+          inputPosition: 'top',
+          theme: 'dark',
+          lang: 'en',
+          ...config,
+        };
+
+        window.giscus.render(rootRef.current, defaultConfig);
+      }
+    });
+
+    document.head.appendChild(script);
+
+    return () => {
+      // Only remove if script exists and is in DOM
+      if (script.parentNode === document.head) {
+        document.head.removeChild(script);
+      }
+    };
+  }, [slug, config]);
+
+  return (
+    <div className={cn('mt-8', className)}>
+      <div className="bg-bg-card rounded-xl p-6 border border-border transition-theme">
+        <h3 className="text-xl font-bold text-text-primary mb-4">{title}</h3>
+        <p className="text-text-secondary text-sm mb-4">
+          {description}
+        </p>
+        <div
+          ref={rootRef}
+          id="giscus-comments"
+          className="min-h-[200px]"
+        />
+      </div>
+    </div>
+  );
+};
+
+Comments.displayName = 'Comments';

package/src/presentation/organisms/ImageLightbox.tsx

@@ -26,7 +26,6 @@ export const ImageLightbox = ({
   initialIndex = 0,
   isOpen,
   onClose,
-  className,
 }: ImageLightboxProps) => {
   // Early return if closed
   if (!isOpen) return null;

package/src/presentation/organisms/NewsletterSignup.tsx

@@ -0,0 +1,165 @@
+/**
+ * NewsletterSignup Component (Organism)
+ * @description Newsletter subscription form with email validation
+ */
+
+import { useState, useEffect, useMemo } from 'react';
+import { cn } from '../../infrastructure/utils';
+import type { BaseProps } from '../../domain/types';
+import { Icon } from '../atoms/Icon';
+
+const SUBSCRIBER_COUNT_MIN = 1000;
+const SUBSCRIBER_COUNT_MAX = 6000;
+
+export interface NewsletterSignupProps extends BaseProps {
+  onSubscribe?: (email: string) => Promise<void>;
+  subscriberCountMin?: number;
+  subscriberCountMax?: number;
+}
+
+export const NewsletterSignup = ({
+  onSubscribe,
+  subscriberCountMin = SUBSCRIBER_COUNT_MIN,
+  subscriberCountMax = SUBSCRIBER_COUNT_MAX,
+  className,
+}: NewsletterSignupProps) => {
+  const [email, setEmail] = useState('');
+  const [isSubscribed, setIsSubscribed] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  // FIXED: Generate random count per component instance, not at module load
+  const subscriberCount = useMemo(
+    () => Math.floor(Math.random() * (subscriberCountMax - subscriberCountMin + 1)) + subscriberCountMin,
+    [subscriberCountMin, subscriberCountMax]
+  );
+
+  const validateEmail = (email: string) => {
+    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return re.test(email);
+  };
+
+  // Reset success message after 5 seconds with cleanup
+  useEffect(() => {
+    if (isSubscribed) {
+      const timeout = setTimeout(() => {
+        setIsSubscribed(false);
+      }, 5000);
+      return () => clearTimeout(timeout);
+    }
+  }, [isSubscribed]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+
+    // Validate email
+    if (!email) {
+      setError('Please enter your email address');
+      return;
+    }
+
+    if (!validateEmail(email)) {
+      setError('Please enter a valid email address');
+      return;
+    }
+
+    setIsLoading(true);
+
+    try {
+      // Call the subscribe function if provided
+      if (onSubscribe) {
+        await onSubscribe(email);
+      } else {
+        // Simulate API call for demo purposes
+        await new Promise(resolve => setTimeout(resolve, 1000));
+      }
+
+      setIsLoading(false);
+      setIsSubscribed(true);
+      setEmail('');
+    } catch (err) {
+      setIsLoading(false);
+      setError('Failed to subscribe. Please try again.');
+    }
+  };
+
+  if (isSubscribed) {
+    return (
+      <div className={cn('bg-bg-card rounded-xl p-4 border border-border', className)}>
+        <div className="flex items-center gap-3 text-green-600">
+          <Icon className="text-green-600" size="lg">
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+            />
+          </Icon>
+          <div>
+            <div className="font-semibold text-sm">Thanks for subscribing!</div>
+            <div className="text-xs text-text-secondary">Check your inbox to confirm your subscription</div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn('bg-bg-card rounded-xl p-4 border border-border', className)}>
+      <div className="flex items-center gap-2 mb-3">
+        <Icon className="text-primary-light" size="lg">
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M3 8l7.89 5.26a2 2 0 002.22 0l7.89-5.26a2 2 0 002.22 0L21 8V5a2 2 0 00-2-2H5a2 2 0 00-2 2v3a2 2 0 002.22 0z"
+          />
+        </Icon>
+        <h3 className="text-sm font-semibold text-text-primary">Newsletter</h3>
+      </div>
+      <p className="text-xs text-text-secondary mb-3">
+        Get the latest articles delivered straight to your inbox. No spam, ever.
+      </p>
+      <form onSubmit={handleSubmit} className="space-y-2">
+        <input
+          type="email"
+          placeholder="your@email.com"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          className="w-full px-3 py-2 bg-bg-secondary text-text-primary rounded-lg border border-border focus:border-primary-light focus:outline-none placeholder-text-secondary/50 transition-theme text-sm"
+          disabled={isLoading}
+        />
+        {error && (
+          <p className="text-xs text-red-500">{error}</p>
+        )}
+        <button
+          type="submit"
+          disabled={isLoading}
+          className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-primary-gradient text-text-primary rounded-lg font-medium hover:shadow-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed text-sm"
+        >
+          {isLoading ? (
+            <>Subscribing...</>
+          ) : (
+            <>
+              <Icon size="sm">
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M22 2L11 13M22 2l-7 20M2 2l15 15L2 2l15-15"
+                />
+              </Icon>
+              Subscribe
+            </>
+          )}
+        </button>
+      </form>
+      <p className="text-xs text-text-secondary mt-2">
+        Join {subscriberCount.toLocaleString()}+ subscribers
+      </p>
+    </div>
+  );
+};
+
+NewsletterSignup.displayName = 'NewsletterSignup';

package/src/presentation/organisms/index.ts

@@ -1,24 +1,75 @@
 /**
  * Organisms Export
- * @description Complex UI components composed of molecules and atoms
+ * @description Organism components - complex UI combinations
  * Subpath: @umituz/web-design-system/organisms
  */
 
-// Layout & Structure
+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';
+
 export { Navbar, NavbarBrand, NavbarLinks, NavbarActions } from './Navbar';
 export type { NavbarProps } from './Navbar';
 
-export { Footer } from './Footer';
+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 { Breadcrumbs } from './Breadcrumb';
-export type { BreadcrumbItem, BreadcrumbsProps } from './Breadcrumb';
+export type { BreadcrumbsProps, BreadcrumbItem } from './Breadcrumb';
 
-// Data Display
-export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './Card';
-export type { CardProps, CardHeaderProps, CardTitleProps, CardDescriptionProps, CardContentProps, CardFooterProps } from './Card';
+export { HoverCard, HoverCardTrigger, HoverCardContent } from './HoverCard';
 
-export { StatCard } from './StatCard';
-export type { StatCardProps } from './StatCard';
+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';
+
+export { Footer } from './Footer';
+export type { FooterProps } from './Footer';
 
 export { MetricCard } from './MetricCard';
 export type { MetricCardProps } from './MetricCard';
@@ -26,80 +77,68 @@ 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';
 
-// Overlays & Modals
-export { Dialog, DialogHeader, DialogTitle, DialogDescription, DialogContent, DialogFooter } from './Dialog';
-export type { DialogProps } from './Dialog';
+export { DataTable } from './DataTable';
+export type { DataTableProps, Column } from './DataTable';
 
-export { Modal } from './Modal';
-export type { ModalProps } from './Modal';
+export { StatCard } from './StatCard';
+export type { StatCardProps } from './StatCard';
 
 export { FormModal } from './FormModal';
 export type { FormModalProps } from './FormModal';
 
-export { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction } from './AlertDialog';
-export type { AlertDialogProps } from './AlertDialog';
-
-export { Popover, PopoverTrigger, PopoverContent } from './Popover';
-export type { PopoverProps } from './Popover';
+export { ConfirmDialog } from './ConfirmDialog';
+export type { ConfirmDialogProps } from './ConfirmDialog';
 
-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';
-
-// 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 { Calendar } from './Calendar';
+export type { CalendarProps } from './Calendar';
 
-export { Toggle } from './Toggle';
-export type { ToggleProps } from './Toggle';
+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';
 
 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';
+
+// NEW: Content & Engagement Components
+export { NewsletterSignup } from './NewsletterSignup';
+export type { NewsletterSignupProps } from './NewsletterSignup';
+
+export { Comments } from './Comments';
+export type { CommentsProps, GiscusConfig } from './Comments';