@umituz/web-design-system 3.1.22 → 4.0.2

package/src/presentation/organisms/MainNavbar.tsx

@@ -1,320 +0,0 @@
-/**
- * MainNavbar Component (Organism)
- * @description Full-featured navigation bar with logo, links, theme toggle, language selector, and mobile menu
- */
-
-import { useState, useEffect, useRef, useMemo } from 'react';
-// @ts-ignore - react-router-dom is a peer dependency, may not be available during package build
-import { Link, useLocation } from 'react-router-dom';
-import React from 'react';
-import { Show, Hide } from '../atoms';
-import type { BaseProps } from '../../domain/types';
-
-export interface NavItem {
-  name: string;
-  path: string;
-}
-
-export interface MainNavbarLanguage {
-  code: string;
-  name: string;
-  flag: string;
-}
-
-export interface MainNavbarProps extends BaseProps {
-  logo?: React.ReactNode;
-  appName: string;
-  navItems: NavItem[];
-  supportedLanguages: Record<string, MainNavbarLanguage>;
-  currentLanguage: string;
-  onLanguageChange: (code: string) => void;
-  theme: 'light' | 'dark';
-  onThemeToggle: () => void;
-  githubUrl?: string;
-  githubLabel?: string;
-  translations?: {
-    language: string;
-    switchToMode: (mode: string) => string;
-    lightMode: string;
-    darkMode: string;
-    github: string;
-  };
-}
-
-export const MainNavbar = ({
-  logo,
-  appName,
-  navItems,
-  supportedLanguages,
-  currentLanguage,
-  onLanguageChange,
-  theme,
-  onThemeToggle,
-  githubUrl,
-  githubLabel = 'GitHub',
-  translations = {
-    language: 'Language',
-    switchToMode: (mode: string) => `Switch to ${mode} mode`,
-    lightMode: 'Light Mode',
-    darkMode: 'Dark Mode',
-    github: 'GitHub',
-  },
-  className,
-}: MainNavbarProps) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [isLangOpen, setIsLangOpen] = useState(false);
-  const location = useLocation();
-  const langDropdownRef = useRef<HTMLDivElement>(null);
-
-  const navItemsMemo = useMemo(() => navItems, [JSON.stringify(navItems)]);
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (langDropdownRef.current && !langDropdownRef.current.contains(event.target as Node)) {
-        setIsLangOpen(false);
-      }
-    };
-
-    if (isLangOpen) {
-      document.addEventListener('mousedown', handleClickOutside);
-      return () => {
-        document.removeEventListener('mousedown', handleClickOutside);
-      };
-    }
-  }, [isLangOpen]);
-
-  return (
-    <nav className={`bg-bg-primary sticky top-0 z-50 border-b border-border transition-theme ${className || ''}`}>
-      <div className="max-w-7xl mx-auto px-4">
-        <div className="flex justify-between h-16 items-center">
-          {/* Logo + App Name */}
-          <Link to="/" className="flex items-center gap-2 sm:gap-3">
-            {logo}
-            <span className="text-xl font-bold text-text-primary">{appName}</span>
-          </Link>
-
-          {/* Desktop Menu */}
-          <Show above="lg">
-            <div className="flex items-center gap-6 lg:gap-8">
-              {navItemsMemo.map((item) => {
-                const isActive = location.pathname === item.path;
-                return (
-                  <Link
-                    key={item.path}
-                    to={item.path}
-                    className={`font-medium transition-colors transition-theme whitespace-nowrap ${
-                      isActive ? 'text-primary-light' : 'text-text-secondary hover:text-primary-light'
-                    }`}
-                  >
-                    {item.name}
-                  </Link>
-                );
-              })}
-            </div>
-          </Show>
-
-          {/* Actions */}
-          <div className="flex items-center gap-2 md:gap-3">
-            {/* Language Selector */}
-            <Show above="lg">
-              <div className="relative" ref={langDropdownRef}>
-                <button
-                  onClick={() => setIsLangOpen(!isLangOpen)}
-                  className="p-2 rounded-lg bg-bg-secondary text-text-secondary hover:text-primary-light border border-border hover:border-primary-light transition-all transition-theme"
-                  title={translations.language}
-                  type="button"
-                >
-                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                  <path d="m5 8 6 6" />
-                  <path d="m4 14 6-6 2-3" />
-                  <path d="M2 5h12" />
-                  <path d="M7 2h1" />
-                  <path d="m22 22-5-10-5 10" />
-                  <path d="M14 18h6" />
-                </svg>
-              </button>
-
-              {isLangOpen && (
-                <div className="absolute right-0 top-full mt-2 w-48 bg-bg-card rounded-lg border border-border shadow-xl z-50">
-                  {Object.entries(supportedLanguages).map(([code, { name, flag }]) => (
-                    <button
-                      key={code}
-                      onClick={() => {
-                        onLanguageChange(code);
-                        setIsLangOpen(false);
-                      }}
-                      className={`w-full flex items-center gap-3 px-4 py-3 text-left hover:bg-bg-tertiary transition-colors transition-theme ${
-                        currentLanguage === code ? 'bg-bg-tertiary text-primary-light' : 'text-text-secondary'
-                      }`}
-                      type="button"
-                    >
-                      <span className="text-xl">{flag}</span>
-                      <span className="text-sm">{name}</span>
-                      {currentLanguage === code && (
-                        <span className="ml-auto text-primary-light">✓</span>
-                      )}
-                    </button>
-                  ))}
-                </div>
-              )}
-              </div>
-            </Show>
-
-            {/* Theme Toggle */}
-            <button
-              onClick={onThemeToggle}
-              className="p-2 rounded-lg bg-bg-secondary text-text-secondary hover:text-primary-light border border-border hover:border-primary-light transition-all transition-theme"
-              title={translations.switchToMode(theme === 'dark' ? 'light' : 'dark')}
-              aria-label={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
-              type="button"
-            >
-              {theme === 'dark' ? (
-                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                  <circle cx="12" cy="12" r="4" />
-                  <path d="M12 2v2" />
-                  <path d="M12 20v2" />
-                  <path d="m4.93 4.93 1.41 1.41" />
-                  <path d="m17.66 17.66 1.41 1.41" />
-                  <path d="M2 12h2" />
-                  <path d="M20 12h2" />
-                  <path d="m6.34 17.66-1.41 1.41" />
-                  <path d="m19.07 4.93-1.41 1.41" />
-                </svg>
-              ) : (
-                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                  <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
-                </svg>
-              )}
-            </button>
-
-            {/* GitHub */}
-            <Show above="lg">
-              {githubUrl && (
-                <a
-                  href={githubUrl}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="flex items-center gap-2 px-4 py-2 bg-bg-secondary text-text-secondary rounded-lg border border-border hover:border-primary-light hover:text-text-primary transition-all transition-theme"
-                >
-                  <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
-                    <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
-                  </svg>
-                  <span className="font-medium">{githubLabel}</span>
-                </a>
-              )}
-            </Show>
-
-            {/* Mobile Button */}
-            <Hide above="lg">
-              <button
-                onClick={() => setIsOpen(!isOpen)}
-                className="text-text-secondary flex"
-                type="button"
-                aria-label="Toggle menu"
-              >
-                {isOpen ? (
-                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                    <path d="M18 6L6 18M6 6l12 12" />
-                  </svg>
-                ) : (
-                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                    <line x1="4" x2="20" y1="12" y2="12" />
-                    <line x1="4" x2="20" y1="6" y2="6" />
-                    <line x1="4" x2="20" y1="18" y2="18" />
-                  </svg>
-                )}
-              </button>
-            </Hide>
-          </div>
-        </div>
-      </div>
-
-      {/* Mobile Menu */}
-      <Hide above="lg">
-        {isOpen && (
-          <div className="bg-bg-secondary border-t border-border transition-theme">
-          <div className="px-4 py-4 space-y-2">
-            {/* Theme Toggle Mobile */}
-            <button
-              onClick={onThemeToggle}
-              className="w-full flex items-center gap-3 px-4 py-3 rounded-lg text-text-secondary hover:bg-bg-tertiary transition-all transition-theme"
-              type="button"
-            >
-              {theme === 'dark' ? (
-                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                  <circle cx="12" cy="12" r="4" />
-                  <path d="M12 2v2" />
-                  <path d="M12 20v2" />
-                  <path d="m4.93 4.93 1.41 1.41" />
-                  <path d="m17.66 17.66 1.41 1.41" />
-                  <path d="M2 12h2" />
-                  <path d="M20 12h2" />
-                  <path d="m6.34 17.66-1.41 1.41" />
-                  <path d="m19.07 4.93-1.41 1.41" />
-                </svg>
-              ) : (
-                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                  <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
-                </svg>
-              )}
-              <span>{theme === 'dark' ? translations.lightMode : translations.darkMode}</span>
-            </button>
-
-            {/* Language Selector Mobile */}
-            <div className="px-4 py-2">
-              <div className="text-text-secondary text-sm mb-2">{translations.language}</div>
-              <div className="grid grid-cols-2 gap-2">
-                {Object.entries(supportedLanguages).map(([code, { name, flag }]) => (
-                  <button
-                    key={code}
-                    onClick={() => onLanguageChange(code)}
-                    className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-all transition-theme ${
-                      currentLanguage === code
-                        ? 'bg-primary-light text-text-primary'
-                        : 'bg-bg-primary text-text-secondary hover:bg-bg-tertiary'
-                    }`}
-                    type="button"
-                  >
-                    <span>{flag}</span>
-                    <span>{name}</span>
-                  </button>
-                ))}
-              </div>
-            </div>
-
-            {navItemsMemo.map((item) => {
-              const isActive = location.pathname === item.path;
-              return (
-                <Link
-                  key={item.path}
-                  to={item.path}
-                  className={`block px-4 py-2 rounded-lg font-medium transition-theme ${
-                    isActive ? 'text-primary-light bg-bg-tertiary' : 'text-text-secondary hover:bg-bg-tertiary'
-                  }`}
-                  onClick={() => setIsOpen(false)}
-                >
-                  {item.name}
-                </Link>
-              );
-            })}
-
-            {githubUrl && (
-              <a
-                href={githubUrl}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="flex items-center gap-2 px-4 py-2 text-text-secondary hover:text-text-primary rounded-lg hover:bg-bg-tertiary transition-all transition-theme"
-              >
-                <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
-                  <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
-                </svg>
-                <span>{githubLabel}</span>
-              </a>
-            )}
-          </div>
-        </div>
-        )}
-      </Hide>
-    </nav>
-  );
-};

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';