@umituz/web-design-system 3.1.22 → 4.0.2

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>
-  );
-};

package/src/presentation/organisms/AlertDialog.tsx

@@ -1,181 +0,0 @@
-/**
- * AlertDialog Component
- * @description Alert dialog component for critical confirmations using @radix-ui/react-alert-dialog
- * @example
- * import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction } from '@umituz/web-design-system/organisms';
- *
- * <AlertDialog>
- *   <AlertDialogTrigger asChild>
- *     <Button>Open Alert Dialog</Button>
- *   </AlertDialogTrigger>
- *   <AlertDialogContent>
- *     <AlertDialogHeader>
- *       <AlertDialogTitle>Are you sure?</AlertDialogTitle>
- *       <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
- *     </AlertDialogHeader>
- *     <AlertDialogFooter>
- *       <AlertDialogCancel>Cancel</AlertDialogCancel>
- *       <AlertDialogAction>Continue</AlertDialogAction>
- *     </AlertDialogFooter>
- *   </AlertDialogContent>
- * </AlertDialog>
- */
-
-import * as React from "react";
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
-
-import { cn } from "../../infrastructure/utils";
-
-// Import buttonVariants from the atoms folder
-// We need to define it here since Button uses cva
-import { cva } from "class-variance-authority";
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-    },
-  }
-);
-
-const AlertDialog = AlertDialogPrimitive.Root;
-
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
-
-const AlertDialogPortal = AlertDialogPrimitive.Portal;
-
-const AlertDialogOverlay = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Overlay
-    className={cn(
-      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
-    )}
-    {...props}
-    ref={ref}
-  />
-));
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-
-const AlertDialogContent = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <AlertDialogPortal>
-    <AlertDialogOverlay />
-    <AlertDialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className
-      )}
-      {...props}
-    />
-  </AlertDialogPortal>
-));
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
-
-const AlertDialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
-      className
-    )}
-    {...props}
-  />
-);
-AlertDialogHeader.displayName = "AlertDialogHeader";
-
-const AlertDialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    )}
-    {...props}
-  />
-);
-AlertDialogFooter.displayName = "AlertDialogFooter";
-
-const AlertDialogTitle = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Title
-    ref={ref}
-    className={cn("text-lg font-semibold", className)}
-    {...props}
-  />
-));
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
-
-const AlertDialogDescription = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-));
-AlertDialogDescription.displayName =
-  AlertDialogPrimitive.Description.displayName;
-
-const AlertDialogAction = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Action>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Action
-    ref={ref}
-    className={cn(buttonVariants(), className)}
-    {...props}
-  />
-));
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-
-const AlertDialogCancel = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Cancel
-    ref={ref}
-    className={cn(
-      buttonVariants({ variant: "outline" }),
-      "mt-2 sm:mt-0",
-      className
-    )}
-    {...props}
-  />
-));
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
-
-export {
-  AlertDialog,
-  AlertDialogPortal,
-  AlertDialogOverlay,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogFooter,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogAction,
-  AlertDialogCancel,
-};

package/src/presentation/organisms/Calendar.tsx

@@ -1,79 +0,0 @@
-/**
- * Calendar Component
- * @description Date picker component using react-day-picker
- * @example
- * import { Calendar } from '@umituz/web-design-system/organisms';
- *
- * <Calendar
- *   mode="single"
- *   selected={date}
- *   onSelect={setDate}
- *   className="rounded-md border"
- * />
- */
-
-import * as React from "react";
-import { ChevronLeft, ChevronRight } from "lucide-react";
-import { DayPicker } from "react-day-picker";
-
-import { cn } from "../../infrastructure/utils";
-
-export type CalendarProps = React.ComponentProps<typeof DayPicker>;
-
-function Calendar({
-  className,
-  classNames,
-  showOutsideDays = true,
-  ...props
-}: CalendarProps) {
-  return (
-    <DayPicker
-      showOutsideDays={showOutsideDays}
-      className={cn("p-3", className)}
-      classNames={{
-        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
-        month: "space-y-4",
-        caption: "flex justify-center pt-1 relative items-center",
-        caption_label: "text-sm font-medium",
-        nav: "space-x-1 flex items-center",
-        nav_button: cn(
-          "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
-        ),
-        nav_button_previous: "absolute left-1",
-        nav_button_next: "absolute right-1",
-        table: "w-full border-collapse space-y-1",
-        head_row: "flex",
-        head_cell:
-          "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
-        row: "flex w-full mt-2",
-        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
-        day: cn(
-          "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-9 w-9 p-0 font-normal aria-selected:opacity-100"
-        ),
-        day_range_end: "day-range-end",
-        day_selected:
-          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
-        day_today: "bg-accent text-accent-foreground",
-        day_outside:
-          "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
-        day_disabled: "text-muted-foreground opacity-50",
-        day_range_middle:
-          "aria-selected:bg-accent aria-selected:text-accent-foreground",
-        day_hidden: "invisible",
-        ...classNames,
-      }}
-      components={{
-        Chevron: ({ orientation, ...props }) =>
-          orientation === 'left' ? (
-            <ChevronLeft className="h-4 w-4" {...props} />
-          ) : (
-            <ChevronRight className="h-4 w-4" {...props} />
-          ),
-      }}
-      {...props}
-    />
-  );
-}
-Calendar.displayName = "Calendar";
-
-export { Calendar };