@umituz/web-design-system 3.1.22 → 4.0.0

package/src/infrastructure/security/useFormValidation.ts

@@ -1,216 +0,0 @@
-import { useState, useCallback, useMemo } from 'react';
-
-export interface ValidationRule {
-  required?: boolean;
-  minLength?: number;
-  maxLength?: number;
-  pattern?: RegExp;
-  custom?: (value: string) => string | null;
-  message?: string;
-}
-
-export interface ValidationRules {
-  [fieldName: string]: ValidationRule;
-}
-
-export interface ValidationErrors {
-  [fieldName: string]: string;
-}
-
-export interface FormData {
-  [fieldName: string]: string | number | boolean | string[];
-}
-
-const validateField = (value: string | number | boolean | string[], rule: ValidationRule): string | null => {
-  const stringValue = Array.isArray(value) ? value.join(',') : String(value);
-
-  if (rule.required && (!stringValue || stringValue.trim() === '')) {
-    return rule.message || 'This field is required';
-  }
-
-  if (!stringValue || stringValue.trim() === '') {
-    return null;
-  }
-
-  if (rule.minLength && stringValue.length < rule.minLength) {
-    return rule.message || `Must be at least ${rule.minLength} characters`;
-  }
-
-  if (rule.maxLength && stringValue.length > rule.maxLength) {
-    return rule.message || `Must be no more than ${rule.maxLength} characters`;
-  }
-
-  if (rule.pattern && !rule.pattern.test(stringValue)) {
-    return rule.message || 'Invalid format';
-  }
-
-  if (rule.custom) {
-    return rule.custom(stringValue);
-  }
-
-  return null;
-};
-
-export const sanitizeInput = (value: string): string => {
-  return value
-    .trim()
-    .replace(/[<>]/g, '')
-    .replace(/\s+/g, ' ');
-};
-
-export const VALIDATION_PATTERNS = {
-  email: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
-  url: /^https?:\/\/.+/,
-  phone: /^\+?[\d\s\-()]+$/,
-  alphanumeric: /^[a-zA-Z0-9]+$/,
-  noSpecialChars: /^[a-zA-Z0-9\s]+$/,
-} as const;
-
-export const COMMON_RULES = {
-  required: { required: true },
-  email: {
-    pattern: VALIDATION_PATTERNS.email,
-    message: 'Please enter a valid email address'
-  },
-  url: {
-    pattern: VALIDATION_PATTERNS.url,
-    message: 'Please enter a valid URL'
-  },
-  phone: {
-    pattern: VALIDATION_PATTERNS.phone,
-    message: 'Please enter a valid phone number'
-  },
-  shortText: { maxLength: 100 },
-  mediumText: { maxLength: 500 },
-  longText: { maxLength: 2000 },
-  name: {
-    minLength: 2,
-    maxLength: 50,
-    pattern: VALIDATION_PATTERNS.noSpecialChars,
-    message: 'Name must be 2-50 characters and contain only letters, numbers, and spaces'
-  },
-  description: {
-    minLength: 10,
-    maxLength: 500,
-    message: 'Description must be 10-500 characters'
-  },
-} as const;
-
-export const useFormValidation = <T extends FormData>(
-  initialData: T,
-  validationRules: ValidationRules = {}
-) => {
-  const [formData, setFormData] = useState<T>(initialData);
-  const [errors, setErrors] = useState<ValidationErrors>({});
-  const [touched, setTouched] = useState<Record<string, boolean>>({});
-
-  const validateSingleField = useCallback((fieldName: string, value: string | number | boolean | string[]): string | null => {
-    const rule = validationRules[fieldName];
-    if (!rule) return null;
-
-    return validateField(value, rule);
-  }, [validationRules]);
-
-  const validateAllFields = useCallback((): boolean => {
-    const newErrors: ValidationErrors = {};
-    let isValid = true;
-
-    Object.keys(validationRules).forEach(fieldName => {
-      const value = formData[fieldName];
-      const error = validateSingleField(fieldName, value);
-
-      if (error) {
-        newErrors[fieldName] = error;
-        isValid = false;
-      }
-    });
-
-    setErrors(newErrors);
-    return isValid;
-  }, [formData, validateSingleField, validationRules]);
-
-  const updateField = useCallback((fieldName: string, value: string | number | boolean | string[]) => {
-    const sanitizedValue = typeof value === 'string' ? sanitizeInput(value) : value;
-
-    setFormData(prev => ({ ...prev, [fieldName]: sanitizedValue }));
-
-    setTouched(prev => ({ ...prev, [fieldName]: true }));
-
-    if (touched[fieldName] || value !== '') {
-      const error = validateSingleField(fieldName, sanitizedValue);
-      setErrors(prev => ({ ...prev, [fieldName]: error || '' }));
-    }
-  }, [touched, validateSingleField]);
-
-  const clearFieldError = useCallback((fieldName: string) => {
-    setErrors(prev => ({ ...prev, [fieldName]: '' }));
-  }, []);
-
-  const clearAllErrors = useCallback(() => {
-    setErrors({});
-  }, []);
-
-  const resetForm = useCallback(() => {
-    setFormData(initialData);
-    setErrors({});
-    setTouched({});
-  }, [initialData]);
-
-  const setFormDataWithValidation = useCallback((newData: Partial<T>) => {
-    setFormData(prev => ({ ...prev, ...newData }));
-
-    const newErrors: ValidationErrors = {};
-    Object.keys(newData).forEach(fieldName => {
-      if (validationRules[fieldName]) {
-        const fieldValue = newData[fieldName];
-        const error = validateSingleField(fieldName, fieldValue as string | number | boolean | string[]);
-        if (error) {
-          newErrors[fieldName] = error;
-        }
-      }
-    });
-
-    setErrors(prev => ({ ...prev, ...newErrors }));
-  }, [validateSingleField, validationRules]);
-
-  const getFieldProps = useCallback((fieldName: string) => ({
-    value: formData[fieldName] || '',
-    onChange: (value: string | number | boolean | string[]) => updateField(fieldName, value),
-    onBlur: () => {
-      setTouched(prev => ({ ...prev, [fieldName]: true }));
-      const error = validateSingleField(fieldName, formData[fieldName]);
-      setErrors(prev => ({ ...prev, [fieldName]: error || '' }));
-    },
-    error: errors[fieldName],
-    isValid: !errors[fieldName] && touched[fieldName],
-  }), [formData, errors, touched, updateField, validateSingleField]);
-
-  const isFormValid = useMemo(() => {
-    return Object.keys(validationRules).every(fieldName => !errors[fieldName]);
-  }, [errors, validationRules]);
-
-  const hasErrors = useMemo(() => {
-    return Object.values(errors).some(error => error !== '');
-  }, [errors]);
-
-  const touchedFields = useMemo(() => {
-    return Object.keys(touched).filter(fieldName => touched[fieldName]);
-  }, [touched]);
-
-  return {
-    formData,
-    errors,
-    touched,
-    isFormValid,
-    hasErrors,
-    touchedFields,
-    updateField,
-    validateAllFields,
-    validateSingleField,
-    clearFieldError,
-    clearAllErrors,
-    resetForm,
-    setFormDataWithValidation,
-    getFieldProps,
-  };
-};

package/src/infrastructure/security/validation.ts

@@ -1,246 +0,0 @@
-export interface ValidationResult {
-  isValid: boolean;
-  error?: string;
-}
-
-export interface ValidationConfig {
-  allowHtml?: boolean;
-  stripTags?: boolean;
-  allowedTags?: string[];
-  allowedAttributes?: string[];
-}
-
-/**
- * Input validation with XSS protection
- * Basic sanitization without external dependencies
- */
-export const validateInput = (
-  input: string,
-  maxLength: number = 1000,
-  minLength: number = 0,
-  config?: ValidationConfig
-): ValidationResult => {
-  const trimmed = input.trim();
-
-  // Required field validation
-  if (minLength > 0 && !trimmed) {
-    return { isValid: false, error: "This field is required" };
-  }
-
-  // Length validation
-  if (trimmed.length > maxLength) {
-    return { isValid: false, error: `Must be less than ${maxLength} characters` };
-  }
-
-  if (trimmed.length < minLength) {
-    return { isValid: false, error: `Must be at least ${minLength} characters` };
-  }
-
-  // HTML tag check for non-HTML content
-  if (!config?.allowHtml) {
-    // FIX: Better HTML detection that catches encoded variations
-    const htmlPatterns = [
-      /<[^>]*>/gi,           // Standard HTML tags
-      /&lt;[^&]*&gt;/gi,      // HTML encoded tags
-      /&lt;[a-z]/gi,         // Partial encoded tags
-      /javascript:/gi,        // JavaScript protocol
-      /vbscript:/gi,          // VBScript protocol
-      /data:text\/html/gi,    // Data URI with HTML
-      /on\w+\s*=/gi,          // Inline event handlers
-      /<script/gi,            // Script tags (case-insensitive)
-      /<\/script>/gi,         // Closing script tags
-    ];
-
-    for (const pattern of htmlPatterns) {
-      if (pattern.test(trimmed)) {
-        return { isValid: false, error: "HTML tags or scripts are not allowed" };
-      }
-    }
-  }
-
-  return { isValid: true };
-};
-
-/**
- * Email validation with basic security checks
- */
-export const validateEmail = (email: string): ValidationResult => {
-  const trimmed = email.trim();
-
-  if (!trimmed) {
-    return { isValid: false, error: "Email is required" };
-  }
-
-  // Check for HTML/script content
-  if (/<[^>]*>/.test(trimmed)) {
-    return { isValid: false, error: "Invalid characters in email address" };
-  }
-
-  // Email regex
-  const emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
-
-  if (!emailRegex.test(trimmed)) {
-    return { isValid: false, error: "Please enter a valid email address" };
-  }
-
-  // Check for suspicious patterns
-  const suspiciousPatterns = [
-    /javascript:/gi,
-    /data:/gi,
-    /<[^>]*>/gi
-  ];
-
-  for (const pattern of suspiciousPatterns) {
-    if (pattern.test(trimmed)) {
-      return { isValid: false, error: "Invalid email format" };
-    }
-  }
-
-  return { isValid: true };
-};
-
-/**
- * URL validation with security checks
- */
-export const validateUrl = (url: string): ValidationResult => {
-  const trimmed = url.trim();
-
-  if (!trimmed) {
-    return { isValid: false, error: "URL is required" };
-  }
-
-  // Check for HTML/script content
-  if (/<[^>]*>/.test(trimmed)) {
-    return { isValid: false, error: "Invalid characters in URL" };
-  }
-
-  try {
-    const urlObj = new URL(trimmed);
-
-    // Only allow safe protocols
-    const allowedProtocols = ['http:', 'https:', 'ftp:', 'ftps:'];
-    if (!allowedProtocols.includes(urlObj.protocol)) {
-      return { isValid: false, error: "Only HTTP, HTTPS, and FTP URLs are allowed" };
-    }
-
-    return { isValid: true };
-  } catch {
-    return { isValid: false, error: "Please enter a valid URL" };
-  }
-};
-
-/**
- * Required field validation
- */
-export const validateRequired = (value: string): ValidationResult => {
-  const trimmed = value.trim();
-
-  if (!trimmed) {
-    return { isValid: false, error: "This field is required" };
-  }
-
-  return { isValid: true };
-};
-
-/**
- * Basic input sanitization
- * Removes potentially dangerous content
- */
-export const sanitizeInput = (
-  input: string,
-  config?: ValidationConfig
-): string => {
-  if (!input) return '';
-
-  let sanitized = input.trim();
-
-  // Remove dangerous content for non-HTML input
-  if (!config?.allowHtml) {
-    sanitized = sanitized
-      .replace(/javascript:/gi, '')
-      .replace(/vbscript:/gi, '')
-      .replace(/data:text\/html/gi, '')
-      .replace(/data:application\/javascript/gi, '')
-      .replace(/on\w+\s*=/gi, '')
-      .replace(/<[^>]*>/g, '');
-  }
-
-  // Limit length
-  return sanitized.slice(0, config?.allowHtml ? 10000 : 1000);
-};
-
-/**
- * Validate and sanitize file names
- * Prevents directory traversal and other file-based attacks
- */
-export const validateFileName = (fileName: string): ValidationResult => {
-  const trimmed = fileName.trim();
-
-  if (!trimmed) {
-    return { isValid: false, error: "File name is required" };
-  }
-
-  // FIX: Remove global flag from regex patterns to prevent lastIndex issues
-  // Each pattern is tested once and should not have global flag
-  const dangerousPatterns = [
-    { pattern: /\.\./, name: 'Directory traversal' },
-    { pattern: /[<>:"|?*]/, name: 'Invalid characters' },
-    { pattern: /^(con|prn|aux|nul|com[1-9]|lpt[1-9])$/i, name: 'Windows reserved' },
-    { pattern: /^\./, name: 'Hidden file' },
-    { pattern: /\.$/, name: 'Trailing dot' },
-    { pattern: /\s+$/, name: 'Trailing whitespace' }
-  ];
-
-  for (const { pattern, name } of dangerousPatterns) {
-    if (pattern.test(trimmed)) {
-      return { isValid: false, error: `Invalid file name: ${name}` };
-    }
-  }
-
-  // Length check
-  if (trimmed.length > 255) {
-    return { isValid: false, error: "File name too long (max 255 characters)" };
-  }
-
-  return { isValid: true };
-};
-
-/**
- * Content Security Policy helper
- * Validates that content meets basic CSP requirements
- */
-export const validateCSPCompliance = (content: string): ValidationResult => {
-  const violations = [];
-
-  // FIX: Enhanced script detection - catch more variations
-  const scriptPatterns = [
-    /<script[^>]*>/gi,
-    /<script/gi,
-    /<\/script>/gi,
-    /javascript:/gi,
-    /vbscript:/gi,
-    /data:\s*text\/html/gi,
-    /data:\s*application\/javascript/gi
-  ];
-
-  for (const pattern of scriptPatterns) {
-    if (pattern.test(content)) {
-      violations.push("Potentially dangerous script content detected");
-      break;
-    }
-  }
-
-  // Check for inline styles (more lenient - styles are often used legitimately)
-  if (/<style[^>]*>[\s\S]*?<\/style>/gi.test(content)) {
-    violations.push("Inline style blocks not allowed");
-  }
-
-  if (violations.length > 0) {
-    return {
-      isValid: false,
-      error: `Content Security Policy violations: ${violations.join(', ')}`
-    };
-  }
-
-  return { isValid: true };
-};

package/src/presentation/hooks/useLanguage.ts

@@ -1,109 +0,0 @@
-/**
- * useLanguage Hook
- * @description Language management with i18n integration
- */
-
-import { useTranslation } from 'react-i18next';
-
-export type Language = string;
-
-export interface SupportedLanguage {
-  name: string;
-  flag: string;
-}
-
-export interface UseLanguageReturn {
-  currentLanguage: Language;
-  changeLanguage: (language: Language) => void;
-  t: (key: string, params?: Record<string, unknown>) => string;
-  supportedLanguages: Record<Language, SupportedLanguage>;
-}
-
-/**
- * Validates if a language code exists in supported languages
- */
-function isValidLanguage(
-  code: string,
-  supportedLanguages: Record<Language, SupportedLanguage>
-): boolean {
-  return Object.keys(supportedLanguages).includes(code);
-}
-
-/**
- * Normalizes language code to match supported languages
- * Tries exact match first, then tries to match by language code prefix
- */
-function normalizeLanguage(
-  code: string,
-  supportedLanguages: Record<Language, SupportedLanguage>,
-  defaultLanguage: Language
-): Language {
-  // If code is valid, return it
-  if (isValidLanguage(code, supportedLanguages)) {
-    return code;
-  }
-
-  // Try to extract language code (e.g., 'en-US' -> 'en')
-  const [language] = code.split('-');
-  const matchedKey = Object.keys(supportedLanguages).find((key) =>
-    key.startsWith(language)
-  );
-
-  return (matchedKey as Language) || defaultLanguage;
-}
-
-/**
- * Language management hook with i18n integration
- *
- * @example
- * ```tsx
- * const { currentLanguage, changeLanguage, t, supportedLanguages } = useLanguage({
- *   defaultLanguage: 'en-US',
- *   supportedLanguages: {
- *     'en-US': { name: 'English', flag: '🇺🇸' },
- *     'tr-TR': { name: 'Türkçe', flag: '🇹🇷' },
- *   }
- * });
- *
- * // Change language
- * changeLanguage('tr-TR');
- *
- * // Translate
- * const title = t('common.title');
- * ```
- */
-export function useLanguage(options?: {
-  defaultLanguage?: Language;
-  supportedLanguages?: Record<Language, SupportedLanguage>;
-}): UseLanguageReturn {
-  const {
-    defaultLanguage = 'en-US',
-    supportedLanguages = {} as Record<Language, SupportedLanguage>,
-  } = options || {};
-
-  const { t, i18n } = useTranslation();
-
-  // Safely get and validate current language
-  const currentLanguage: Language = normalizeLanguage(
-    i18n.language,
-    supportedLanguages,
-    defaultLanguage
-  );
-
-  const changeLanguage = (language: Language) => {
-    // Validate language before changing
-    if (isValidLanguage(language, supportedLanguages)) {
-      i18n.changeLanguage(language);
-    } else {
-      // Fall back to default language
-      i18n.changeLanguage(defaultLanguage);
-    }
-  };
-
-  return {
-    currentLanguage,
-    changeLanguage,
-    t,
-    supportedLanguages,
-  };
-}

package/src/presentation/molecules/Breadcrumb.tsx

@@ -1,54 +0,0 @@
-/**
- * Breadcrumb Component (Molecule)
- * @description Navigation breadcrumb with home icon
- */
-
-// @ts-ignore - react-router-dom is a peer dependency, may not be available during package build
-import { Link } from 'react-router-dom';
-import type { BaseProps } from '../../domain/types';
-
-export interface BreadcrumbItem {
-  label: string;
-  href?: string;
-}
-
-export interface BreadcrumbProps extends BaseProps {
-  items: BreadcrumbItem[];
-}
-
-export const Breadcrumb = ({ items, className }: BreadcrumbProps) => {
-  return (
-    <nav className={`flex items-center gap-2 text-sm mb-4 md:mb-6 ${className || ''}`} aria-label="Breadcrumb">
-      {/* Home */}
-      <Link
-        to="/"
-        className="flex items-center gap-1 text-text-secondary hover:text-primary-light transition-colors"
-        aria-label="Home"
-      >
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-          <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
-          <polyline points="9 22 9 12 15 12 15 22" />
-        </svg>
-      </Link>
-
-      {/* Breadcrumb items */}
-      {items.map((item, index) => (
-        <div key={index} className="flex items-center gap-2">
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-text-secondary">
-            <polyline points="9 18 15 12 9 6" />
-          </svg>
-          {item.href ? (
-            <Link
-              to={item.href}
-              className="text-text-secondary hover:text-primary-light transition-colors"
-            >
-              {item.label}
-            </Link>
-          ) : (
-            <span className="text-text-primary font-medium">{item.label}</span>
-          )}
-        </div>
-      ))}
-    </nav>
-  );
-};