@umituz/web-design-system 3.1.22 → 4.0.0

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

package/src/presentation/organisms/FormModal.tsx

@@ -1,126 +0,0 @@
-/**
- * FormModal Component (Template)
- * @description Pre-configured modal with form wrapper and loading state
- * Reduces boilerplate in modal components like CampaignModal, ProjectListModal
- */
-
-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 { Loader2 } from 'lucide-react';
-import type { BaseProps } from '../../domain/types';
-
-export interface FormModalProps extends BaseProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  title: string;
-  description?: string;
-  children: ReactNode;
-  onSubmit?: (e: React.FormEvent) => void | Promise<void>;
-  loading?: boolean;
-  submitText?: string;
-  cancelText?: string;
-  showFooter?: boolean;
-  footer?: ReactNode;
-  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
-  preventCloseOnSubmit?: boolean;
-}
-
-const sizeStyles = {
-  sm: 'sm:max-w-[400px]',
-  md: 'sm:max-w-[425px]',
-  lg: 'sm:max-w-[600px]',
-  xl: 'sm:max-w-[800px]',
-  full: 'sm:max-w-[95vw]',
-};
-
-export const FormModal = forwardRef<HTMLDivElement, FormModalProps>(
-  (
-    {
-      className,
-      open,
-      onOpenChange,
-      title,
-      description,
-      children,
-      onSubmit,
-      loading = false,
-      submitText = 'Submit',
-      cancelText = 'Cancel',
-      showFooter = true,
-      footer,
-      size = 'md',
-      preventCloseOnSubmit = false,
-      ...props
-    },
-    ref
-  ) => {
-    const handleSubmit = async (e: React.FormEvent) => {
-      e.preventDefault();
-      if (onSubmit && !loading) {
-        await onSubmit(e);
-        if (!preventCloseOnSubmit) {
-          onOpenChange(false);
-        }
-      }
-    };
-
-    return (
-      <Dialog open={open} onOpenChange={onOpenChange}>
-        <DialogContent className={cn(sizeStyles[size], className)} ref={ref} {...props}>
-          {onSubmit ? (
-            <form onSubmit={handleSubmit}>
-              <DialogHeader>
-                <DialogTitle>{title}</DialogTitle>
-                {description && <DialogDescription>{description}</DialogDescription>}
-              </DialogHeader>
-              <div className="grid gap-4 py-4">{children}</div>
-              {showFooter && (
-                <DialogFooter>
-                  {footer || (
-                    <>
-                      <Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={loading}>
-                        {cancelText}
-                      </Button>
-                      <Button type="submit" disabled={loading}>
-                        {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-                        {submitText}
-                      </Button>
-                    </>
-                  )}
-                </DialogFooter>
-              )}
-            </form>
-          ) : (
-            <>
-              <DialogHeader>
-                <DialogTitle>{title}</DialogTitle>
-                {description && <DialogDescription>{description}</DialogDescription>}
-              </DialogHeader>
-              <div className="grid gap-4 py-4">{children}</div>
-              {showFooter && (
-                <DialogFooter>
-                  {footer || (
-                    <Button variant="outline" onClick={() => onOpenChange(false)} disabled={loading}>
-                      {cancelText}
-                    </Button>
-                  )}
-                </DialogFooter>
-              )}
-            </>
-          )}
-        </DialogContent>
-      </Dialog>
-    );
-  }
-);
-
-FormModal.displayName = 'FormModal';