@umituz/web-design-system 3.1.22 → 4.0.2

package/src/presentation/organisms/Comments.tsx

@@ -1,103 +0,0 @@
-/**
- * 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 as unknown as Record<string, unknown>);
-      }
-    });
-
-    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/ConfirmDialog.tsx

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

@@ -1,244 +0,0 @@
-/**
- * FilterBar Component (Organism)
- * @description Mobile filter bar with search, categories, tags, and sort with optimized performance
- */
-
-import { useState, useCallback, memo } from 'react';
-import React from 'react';
-import type { BaseProps } from '../../domain/types';
-
-export interface Category {
-  id: string;
-  name: string;
-  count: number;
-  icon: React.ComponentType<{ className?: string; size?: number }>;
-}
-
-export interface SortOption {
-  id: string;
-  name: string;
-}
-
-export interface FilterBarProps extends BaseProps {
-  searchQuery: string;
-  setSearchQuery: (query: string) => void;
-  selectedCategory: string | null;
-  onCategoryChange: (category: string) => void;
-  categories: Category[];
-  popularTags: string[];
-  selectedTags: string[];
-  onTagToggle: (tag: string) => void;
-  sortBy: string;
-  onSortChange: (sort: string) => void;
-  sortOptions: readonly SortOption[] | SortOption[];
-  hasActiveFilters: boolean;
-  onClearFilters: () => void;
-}
-
-// Memoize category button component
-const CategoryButton = memo<{
-  category: Category;
-  selectedCategory: string | null;
-  onCategoryChange: (category: string) => void;
-}>(({ category, selectedCategory, onCategoryChange }) => {
-  const Icon = category.icon;
-  const isActive = selectedCategory === category.id;
-
-  const handleClick = useCallback(() => {
-    onCategoryChange(category.id);
-  }, [category.id, onCategoryChange]);
-
-  return (
-    <button
-      onClick={handleClick}
-      className={`flex items-center gap-2 px-3 py-2 rounded-lg text-xs transition-all transition-theme ${
-        isActive
-          ? 'bg-primary-light text-text-primary font-medium'
-          : 'bg-bg-secondary text-text-secondary hover:bg-bg-tertiary hover:text-text-primary'
-      }`}
-      type="button"
-      aria-pressed={isActive}
-    >
-      <Icon size={14} />
-      <span>{category.name}</span>
-    </button>
-  );
-});
-
-CategoryButton.displayName = 'CategoryButton';
-
-// Memoize tag button component
-const TagButton = memo<{
-  tag: string;
-  isSelected: boolean;
-  onTagToggle: (tag: string) => void;
-}>(({ tag, isSelected, onTagToggle }) => {
-  const handleClick = useCallback(() => {
-    onTagToggle(tag);
-  }, [tag, onTagToggle]);
-
-  return (
-    <button
-      onClick={handleClick}
-      className={`px-3 py-1.5 rounded-full text-xs font-medium transition-all transition-theme ${
-        isSelected
-          ? 'bg-primary-light text-text-primary'
-          : 'bg-bg-secondary text-text-secondary hover:bg-bg-tertiary hover:text-text-primary'
-      }`}
-      type="button"
-      aria-pressed={isSelected}
-    >
-      {tag}
-    </button>
-  );
-});
-
-TagButton.displayName = 'TagButton';
-
-export const FilterBar = memo<FilterBarProps>(({
-  searchQuery,
-  setSearchQuery,
-  selectedCategory,
-  onCategoryChange,
-  categories,
-  popularTags,
-  selectedTags,
-  onTagToggle,
-  sortBy,
-  onSortChange,
-  sortOptions,
-  hasActiveFilters,
-  onClearFilters,
-  className,
-}) => {
-  const [isFilterOpen, setIsFilterOpen] = useState(false);
-
-  const handleSearchChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    setSearchQuery(e.target.value);
-  }, [setSearchQuery]);
-
-  const handleToggleFilters = useCallback(() => {
-    setIsFilterOpen(prev => !prev);
-  }, []);
-
-  const handleSortChange = useCallback((e: React.ChangeEvent<HTMLSelectElement>) => {
-    onSortChange(e.target.value);
-  }, [onSortChange]);
-
-  const handleClearFilters = useCallback(() => {
-    onClearFilters();
-  }, [onClearFilters]);
-
-  return (
-    <div className={`lg:hidden mb-4 space-y-3 ${className || ''}`}>
-      {/* Search */}
-      <div className="relative">
-        <svg
-          className="absolute left-3 top-1/2 -translate-y-1/2 text-text-secondary"
-          width="18"
-          height="18"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        >
-          <circle cx="11" cy="11" r="8" />
-          <path d="m21 21-4.35-4.35" />
-        </svg>
-        <input
-          type="text"
-          placeholder="Search..."
-          value={searchQuery}
-          onChange={handleSearchChange}
-          className="w-full pl-9 pr-4 py-2.5 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"
-          aria-label="Search"
-        />
-      </div>
-
-      {/* Filter Toggle + Sort + Clear Filters */}
-      <div className="flex items-center gap-2 flex-wrap">
-        <button
-          onClick={handleToggleFilters}
-          className="flex items-center gap-2 px-4 py-2.5 bg-bg-secondary text-text-primary rounded-lg border border-border hover:border-primary-light transition-all text-sm font-medium transition-theme"
-          type="button"
-          aria-expanded={isFilterOpen}
-          aria-label="Toggle filters"
-        >
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-            <path d="M12 20v-6M6 20V10M18 20V4" />
-          </svg>
-          Filters
-          {(selectedCategory || selectedTags.length > 0) && (
-            <span className="ml-1 px-2 py-0.5 bg-primary-light text-text-primary text-xs rounded-full">
-              {[selectedCategory, ...selectedTags].filter(Boolean).length}
-            </span>
-          )}
-        </button>
-
-        {/* Sort Dropdown */}
-        <select
-          value={sortBy}
-          onChange={handleSortChange}
-          className="px-3 py-2.5 bg-bg-secondary text-text-primary rounded-lg border border-border focus:border-primary-light focus:outline-none transition-theme text-sm"
-          aria-label="Sort by"
-        >
-          {sortOptions.map((option) => (
-            <option key={option.id} value={option.id}>
-              {option.name}
-            </option>
-          ))}
-        </select>
-
-        {/* Clear Filters */}
-        {hasActiveFilters && (
-          <button
-            onClick={handleClearFilters}
-            className="px-3 py-2.5 text-text-secondary hover:text-text-primary text-sm transition-colors"
-            type="button"
-          >
-            Clear All
-          </button>
-        )}
-      </div>
-
-      {/* Mobile Filter Drawer */}
-      {isFilterOpen && (
-        <div className="bg-bg-card rounded-xl p-4 border border-border space-y-4 transition-theme">
-          {/* Categories */}
-          <div>
-            <h4 className="text-sm font-semibold text-text-primary mb-3">Categories</h4>
-            <div className="grid grid-cols-2 gap-2">
-              {categories.map((category) => (
-                <CategoryButton
-                  key={category.id}
-                  category={category}
-                  selectedCategory={selectedCategory}
-                  onCategoryChange={onCategoryChange}
-                />
-              ))}
-            </div>
-          </div>
-
-          {/* Popular Tags */}
-          <div>
-            <h4 className="text-sm font-semibold text-text-primary mb-3">Popular Tags</h4>
-            <div className="flex flex-wrap gap-2">
-              {popularTags.map((tag) => (
-                <TagButton
-                  key={tag}
-                  tag={tag}
-                  isSelected={selectedTags.includes(tag)}
-                  onTagToggle={onTagToggle}
-                />
-              ))}
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-});
-
-FilterBar.displayName = 'FilterBar';

package/src/presentation/organisms/FilterSidebar.tsx

@@ -1,172 +0,0 @@
-/**
- * FilterSidebar Component (Organism)
- * @description Desktop sidebar with search, categories, tags, and sort options
- */
-
-import React from 'react';
-import type { BaseProps } from '../../domain/types';
-
-export interface Category {
-  id: string;
-  name: string;
-  count: number;
-  icon: React.ComponentType<{ className?: string; size?: number }>;
-}
-
-export interface SortOption {
-  id: string;
-  name: string;
-}
-
-export interface FilterSidebarProps extends BaseProps {
-  searchQuery: string;
-  setSearchQuery: (query: string) => void;
-  selectedCategory: string | null;
-  onCategoryChange: (category: string) => void;
-  categories: Category[];
-  popularTags: string[];
-  selectedTags: string[];
-  onTagToggle: (tag: string) => void;
-  sortBy: string;
-  onSortChange: (sort: string) => void;
-  sortOptions: readonly SortOption[] | SortOption[];
-  hasActiveFilters: boolean;
-  onClearFilters: () => void;
-  children?: React.ReactNode;
-}
-
-export const FilterSidebar = ({
-  searchQuery,
-  setSearchQuery,
-  selectedCategory,
-  onCategoryChange,
-  categories,
-  popularTags,
-  selectedTags,
-  onTagToggle,
-  sortBy,
-  onSortChange,
-  sortOptions,
-  hasActiveFilters,
-  onClearFilters,
-  children,
-  className,
-}: FilterSidebarProps) => {
-  return (
-    <aside className={`hidden lg:block w-64 flex-shrink-0 ${className || ''}`}>
-      <div className="sticky top-24 space-y-6">
-        {/* Search */}
-        <div className="relative">
-          <svg
-            className="absolute left-3 top-1/2 -translate-y-1/2 text-text-secondary"
-            width="18"
-            height="18"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          >
-            <circle cx="11" cy="11" r="8" />
-            <path d="m21 21-4.35-4.35" />
-          </svg>
-          <input
-            type="text"
-            placeholder="Search..."
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            className="w-full pl-9 pr-4 py-2.5 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"
-            aria-label="Search"
-          />
-        </div>
-
-        {/* Categories */}
-        <div>
-          <h3 className="text-sm font-semibold text-text-primary mb-3">Categories</h3>
-          <div className="space-y-1">
-            {categories.map((category) => {
-              const Icon = category.icon;
-              const isActive = selectedCategory === category.id;
-              return (
-                <button
-                  key={category.id}
-                  onClick={() => onCategoryChange(category.id)}
-                  className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-all transition-theme ${
-                    isActive
-                      ? 'bg-primary-light text-text-primary font-medium'
-                      : 'text-text-secondary hover:bg-bg-secondary hover:text-text-primary'
-                  }`}
-                  type="button"
-                  aria-pressed={isActive}
-                >
-                  <Icon size={16} />
-                  <span className="flex-1 text-left">{category.name}</span>
-                  <span className={`text-xs ${isActive ? 'text-text-primary' : 'text-text-secondary'}`}>
-                    {category.count}
-                  </span>
-                </button>
-              );
-            })}
-          </div>
-        </div>
-
-        {/* Popular Tags */}
-        <div>
-          <h3 className="text-sm font-semibold text-text-primary mb-3">Popular Tags</h3>
-          <div className="flex flex-wrap gap-2">
-            {popularTags.map((tag) => (
-              <button
-                key={tag}
-                onClick={() => onTagToggle(tag)}
-                className={`px-3 py-1.5 rounded-full text-xs font-medium transition-all transition-theme ${
-                  selectedTags.includes(tag)
-                    ? 'bg-primary-light text-text-primary'
-                    : 'bg-bg-secondary text-text-secondary hover:bg-bg-tertiary hover:text-text-primary'
-                }`}
-                type="button"
-                aria-pressed={selectedTags.includes(tag)}
-              >
-                {tag}
-              </button>
-            ))}
-          </div>
-        </div>
-
-        {/* Sort */}
-        <div>
-          <h3 className="text-sm font-semibold text-text-primary mb-3">Sort By</h3>
-          <select
-            value={sortBy}
-            onChange={(e) => onSortChange(e.target.value)}
-            className="w-full px-3 py-2.5 bg-bg-secondary text-text-primary rounded-lg border border-border focus:border-primary-light focus:outline-none transition-theme text-sm"
-            aria-label="Sort by"
-          >
-            {sortOptions.map((option) => (
-              <option key={option.id} value={option.id}>
-                {option.name}
-              </option>
-            ))}
-          </select>
-        </div>
-
-        {/* Additional Content */}
-        {children}
-
-        {/* Clear Filters */}
-        {hasActiveFilters && (
-          <button
-            onClick={onClearFilters}
-            className="w-full flex items-center justify-center gap-2 px-4 py-2.5 bg-bg-secondary text-text-secondary rounded-lg border border-border hover:border-primary-light hover:text-text-primary transition-all text-sm font-medium transition-theme"
-            type="button"
-          >
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <path d="M18 6L6 18M6 6l12 12" />
-            </svg>
-            Clear All Filters
-          </button>
-        )}
-      </div>
-    </aside>
-  );
-};

package/src/presentation/organisms/Footer.tsx

@@ -1,86 +0,0 @@
-/**
- * Footer Organism Component
- * @description Minimal footer with brand and social icons - optimized for performance
- */
-
-import { forwardRef, type HTMLAttributes, type ReactNode, memo } from 'react';
-import React from 'react';
-import { cn } from '../../infrastructure/utils';
-import type { BaseProps } from '../../domain/types';
-
-export interface FooterProps extends HTMLAttributes<HTMLElement>, BaseProps {
-  brand?: {
-    name: string;
-  };
-  social?: Array<{
-    name: string;
-    href: string;
-    icon: ReactNode;
-  }>;
-  copyright?: string;
-}
-
-type SocialItem = {
-  name: string;
-  href: string;
-  icon: ReactNode;
-};
-
-// Memoize social icon component to prevent unnecessary re-renders
-const SocialIcon = memo<{
-  item: SocialItem;
-}>(({ item }) => (
-  <a
-    href={item.href}
-    target="_blank"
-    rel="noopener noreferrer"
-    className="flex items-center justify-center w-10 h-10 rounded-lg bg-bg-secondary/50 text-text-secondary hover:bg-primary-gradient hover:text-white transition-all duration-200"
-    aria-label={item.name}
-    title={item.name}
-  >
-    <span className="relative">{item.icon}</span>
-  </a>
-));
-
-SocialIcon.displayName = 'SocialIcon';
-
-export const Footer = memo(forwardRef<HTMLElement, FooterProps>(
-  ({ className, brand, social, copyright = '© 2026 UmitUZ. All rights reserved.', ...props }, ref) => {
-    return (
-      <footer
-        ref={ref}
-        className={cn('relative mt-8 transition-theme', className)}
-        {...props}
-      >
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-          <div className="flex flex-col md:flex-row items-center justify-between gap-6">
-            {/* Brand */}
-            {brand && (
-              <div className="text-xl font-bold text-text-primary">
-                {brand.name}
-              </div>
-            )}
-
-            {/* Social Icons */}
-            {social && social.length > 0 && (
-              <div className="flex items-center gap-3">
-                {social.map((item, index) => (
-                  <SocialIcon key={`${item.name}-${index}`} item={item} />
-                ))}
-              </div>
-            )}
-          </div>
-
-          {/* Copyright */}
-          {copyright && (
-            <div className="text-center mt-6 pt-6 border-t border-border/20">
-              <p className="text-sm text-text-secondary/60">{copyright}</p>
-            </div>
-          )}
-        </div>
-      </footer>
-    );
-  }
-));
-
-Footer.displayName = 'Footer';