@umituz/web-design-system 3.1.21 → 4.0.0

package/src/presentation/organisms/Modal.tsx

@@ -1,173 +0,0 @@
-/**
- * Modal Component (Organism)
- * @description Dialog/overlay container with optimized transitions
- */
-
-import { forwardRef, type HTMLAttributes, useEffect, useState, useRef } from 'react';
-import React from 'react';
-import { cn } from '../../infrastructure/utils';
-import type { BaseProps } from '../../domain/types';
-
-export interface ModalProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
-  open?: boolean;
-  onClose?: () => void;
-  showCloseButton?: boolean;
-  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
-}
-
-const sizeStyles: Record<'sm' | 'md' | 'lg' | 'xl' | 'full', string> = {
-  sm: 'max-w-sm',
-  md: 'max-w-md',
-  lg: 'max-w-lg',
-  xl: 'max-w-xl',
-  full: 'max-w-full mx-4',
-};
-
-export const Modal = React.memo(forwardRef<HTMLDivElement, ModalProps>(
-  ({ open = false, onClose, showCloseButton = true, size = 'md', className, children, ...props }, ref) => {
-    const [shouldRender, setShouldRender] = useState(open);
-    const [isAnimating, setIsAnimating] = useState(false);
-    const rafRef = useRef<number | null>(null);
-    const timerRef = useRef<number | null>(null);
-
-    useEffect(() => {
-      if (open) {
-        setShouldRender(true);
-        // FIX: Store rafId and cleanup properly
-        rafRef.current = requestAnimationFrame(() => {
-          setIsAnimating(true);
-        });
-      } else {
-        setIsAnimating(false);
-        // Wait for animation to complete before unmounting
-        timerRef.current = window.setTimeout(() => {
-          setShouldRender(false);
-        }, 200); // Match animation duration
-      }
-
-      // FIX: Proper cleanup for both animation frame and timeout
-      return () => {
-        if (rafRef.current) {
-          cancelAnimationFrame(rafRef.current);
-        }
-        if (timerRef.current) {
-          clearTimeout(timerRef.current);
-        }
-      };
-    }, [open]);
-
-    if (!shouldRender) return null;
-
-    const handleBackdropClick = (e: React.MouseEvent) => {
-      if (e.target === e.currentTarget && onClose) {
-        onClose();
-      }
-    };
-
-    return (
-      <div
-        className="fixed inset-0 z-50 flex items-center justify-center"
-        {...props}
-      >
-        {/* Backdrop */}
-        <div
-          className={`fixed inset-0 bg-background/80 backdrop-blur-sm transition-opacity duration-200 ${
-            isAnimating ? 'opacity-100' : 'opacity-0'
-          }`}
-          onClick={handleBackdropClick}
-          aria-hidden="true"
-        />
-
-        {/* Modal */}
-        <div
-          ref={ref}
-          className={cn(
-            'relative z-50 w-full rounded-lg border bg-card p-6 shadow-lg',
-            'transition-all duration-200',
-            isAnimating ? 'opacity-100 scale-100' : 'opacity-0 scale-95',
-            sizeStyles[size],
-            className
-          )}
-          role="dialog"
-          aria-modal="true"
-        >
-          {showCloseButton && (
-            <button
-              onClick={onClose}
-              className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
-              aria-label="Close modal"
-            >
-              <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-              </svg>
-              <span className="sr-only">Close</span>
-            </button>
-          )}
-
-          {children}
-        </div>
-      </div>
-    );
-  }
-));
-
-Modal.displayName = 'Modal';
-
-export const ModalHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)}
-      {...props}
-    />
-  )
-);
-
-ModalHeader.displayName = 'ModalHeader';
-
-export const ModalTitle = forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
-  ({ className, ...props }, ref) => (
-    <h2
-      ref={ref}
-      className={cn('text-lg font-semibold leading-none tracking-tight', className)}
-      {...props}
-    />
-  )
-);
-
-ModalTitle.displayName = 'ModalTitle';
-
-export const ModalDescription = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(
-  ({ className, ...props }, ref) => (
-    <p
-      ref={ref}
-      className={cn('text-sm text-muted-foreground', className)}
-      {...props}
-    />
-  )
-);
-
-ModalDescription.displayName = 'ModalDescription';
-
-export const ModalContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('mt-4', className)} {...props} />
-  )
-);
-
-ModalContent.displayName = 'ModalContent';
-
-export const ModalFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn(
-        'mt-4 flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
-        className
-      )}
-      {...props}
-    />
-  )
-);
-
-ModalFooter.displayName = 'ModalFooter';

package/src/presentation/organisms/Navbar.tsx

@@ -1,75 +0,0 @@
-/**
- * Navbar Component (Organism)
- * @description Navigation bar with logo and links - optimized for performance
- */
-
-import { forwardRef, type HTMLAttributes } from 'react';
-import React from 'react';
-import { cn } from '../../infrastructure/utils';
-import type { BaseProps } from '../../domain/types';
-
-export interface NavbarProps extends HTMLAttributes<HTMLElement>, BaseProps {
-  variant?: 'default' | 'sticky' | 'fixed';
-}
-
-const variantStyles: Record<'default' | 'sticky' | 'fixed', string> = {
-  default: 'relative',
-  sticky: 'sticky top-0 z-50',
-  fixed: 'fixed top-0 left-0 right-0 z-50',
-};
-
-export const Navbar = React.memo(forwardRef<HTMLElement, NavbarProps>(
-  ({ className, variant = 'default', children, ...props }, ref) => {
-    return (
-      <nav
-        ref={ref}
-        className={cn(
-          'flex h-16 items-center gap-4 border-b border-border/40 bg-background/95 px-4 backdrop-blur supports-[backdrop-filter]:bg-background/60',
-          variantStyles[variant],
-          className
-        )}
-        {...props}
-      >
-        {children}
-      </nav>
-    );
-  }
-));
-
-Navbar.displayName = 'Navbar';
-
-export const NavbarBrand = React.memo(forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn('flex items-center gap-2 font-bold text-lg', className)}
-      {...props}
-    />
-  )
-));
-
-NavbarBrand.displayName = 'NavbarBrand';
-
-export const NavbarLinks = React.memo(forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn('hidden items-center gap-6 md:flex', className)}
-      {...props}
-    />
-  )
-));
-
-NavbarLinks.displayName = 'NavbarLinks';
-
-export const NavbarActions = React.memo(forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn('ml-auto flex items-center gap-2', className)}
-      {...props}
-    />
-  )
-));
-
-NavbarActions.displayName = 'NavbarActions';

package/src/presentation/organisms/NewsletterSignup.tsx

@@ -1,165 +0,0 @@
-/**
- * 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/QuickActionCard.tsx

@@ -1,93 +0,0 @@
-/**
- * QuickActionCard Component (Organism)
- * @description Card component for quick navigation actions with icon (Responsive)
- */
-
-import { forwardRef } from 'react';
-import { cn, getSpacing, getIconSize, getContainerSize, getTextSize, getGap } from '../../infrastructure/utils';
-import type { BaseProps, SizeVariant } from '../../domain/types';
-
-export interface QuickActionCardProps extends BaseProps {
-  label: string;
-  icon?: React.ComponentType<{ className?: string }>;
-  iconColor?: string;
-  iconBgColor?: string;
-  onClick?: () => void;
-  href?: string;
-  size?: Extract<SizeVariant, 'sm' | 'md' | 'lg'>;
-  target?: '_blank' | '_self' | '_parent' | '_top';
-  responsiveLayout?: boolean; // Enable responsive layout changes
-}
-
-export const QuickActionCard = forwardRef<HTMLAnchorElement | HTMLDivElement, QuickActionCardProps>(
-  (
-    {
-      className,
-      label,
-      icon: Icon,
-      iconColor = 'text-white',
-      iconBgColor = 'bg-primary',
-      onClick,
-      href,
-      size = 'md',
-      target = '_self',
-      responsiveLayout = true,
-      ...props
-    },
-    ref
-  ) => {
-    const content = (
-      <>
-        {Icon && (
-          <div className={cn(getContainerSize(size), 'rounded-lg flex items-center justify-center flex-shrink-0', iconBgColor)}>
-            <Icon className={cn(getIconSize(size), iconColor)} />
-          </div>
-        )}
-        <span className={cn(
-          'font-medium text-foreground group-hover:text-primary transition-colors',
-          getTextSize(size),
-          responsiveLayout && 'text-center sm:text-left'
-        )}>
-          {label}
-        </span>
-      </>
-    );
-
-    const baseClasses = cn(
-      'bg-card border border-border rounded-xl',
-      responsiveLayout ? 'flex flex-col sm:flex-row items-center justify-center sm:justify-start' : 'flex items-center',
-      'hover:border-primary/50 hover:shadow-md transition-all duration-200 group',
-      getSpacing('p', size),
-      getGap(size === 'sm' ? 'sm' : size),
-      className
-    );
-
-    if (href) {
-      return (
-        <a
-          ref={ref as React.Ref<HTMLAnchorElement>}
-          href={href}
-          target={target}
-          className={baseClasses}
-          onClick={onClick}
-          {...props}
-        >
-          {content}
-        </a>
-      );
-    }
-
-    return (
-      <div
-        ref={ref as React.Ref<HTMLDivElement>}
-        className={baseClasses}
-        onClick={onClick}
-        {...props}
-      >
-        {content}
-      </div>
-    );
-  }
-);
-
-QuickActionCard.displayName = 'QuickActionCard';