@umituz/web-design-system 1.0.2 → 1.0.4

package/src/presentation/hooks/useKeyboard.ts

@@ -0,0 +1,89 @@
+/**
+ * useKeyboard Hook
+ * @description Keyboard event handling
+ */
+
+import { useEffect } from 'react';
+
+export type KeyboardKey = string;
+export type KeyboardModifier = 'ctrl' | 'shift' | 'alt' | 'meta';
+
+export interface KeyboardOptions {
+  key: KeyboardKey;
+  modifiers?: KeyboardModifier[];
+  onKeyDown?: (event: KeyboardEvent) => void;
+  onKeyUp?: (event: KeyboardEvent) => void;
+  enabled?: boolean;
+}
+
+export function useKeyboard({
+  key,
+  modifiers = [],
+  onKeyDown,
+  onKeyUp,
+  enabled = true,
+}: KeyboardOptions) {
+  useEffect(() => {
+    if (!enabled) return;
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      const keyMatches = event.key.toLowerCase() === key.toLowerCase();
+      const modifiersMatch = modifiers.every((mod) => {
+        switch (mod) {
+          case 'ctrl':
+            return event.ctrlKey;
+          case 'shift':
+            return event.shiftKey;
+          case 'alt':
+            return event.altKey;
+          case 'meta':
+            return event.metaKey;
+          default:
+            return true;
+        }
+      });
+
+      if (keyMatches && modifiersMatch) {
+        onKeyDown?.(event);
+      }
+    };
+
+    const handleKeyUp = (event: KeyboardEvent) => {
+      const keyMatches = event.key.toLowerCase() === key.toLowerCase();
+      const modifiersMatch = modifiers.every((mod) => {
+        switch (mod) {
+          case 'ctrl':
+            return event.ctrlKey;
+          case 'shift':
+            return event.shiftKey;
+          case 'alt':
+            return event.altKey;
+          case 'meta':
+            return event.metaKey;
+          default:
+            return true;
+        }
+      });
+
+      if (keyMatches && modifiersMatch) {
+        onKeyUp?.(event);
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    document.addEventListener('keyup', handleKeyUp);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+      document.removeEventListener('keyup', handleKeyUp);
+    };
+  }, [key, modifiers, onKeyDown, onKeyUp, enabled]);
+}
+
+export function useEscape(callback: () => void, enabled = true) {
+  useKeyboard({
+    key: 'Escape',
+    onKeyDown: callback,
+    enabled,
+  });
+}

package/src/presentation/hooks/useScrollLock.ts

@@ -0,0 +1,26 @@
+/**
+ * useScrollLock Hook
+ * @description Lock/unlock body scroll
+ */
+
+import { useEffect } from 'react';
+
+export function useScrollLock(enabled: boolean = true) {
+  useEffect(() => {
+    if (!enabled) return;
+
+    const originalStyle = window.getComputedStyle(document.body).overflow;
+    const originalPaddingRight = window.getComputedStyle(document.body).paddingRight;
+
+    // Calculate scrollbar width
+    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+
+    document.body.style.overflow = 'hidden';
+    document.body.style.paddingRight = `${scrollbarWidth}px`;
+
+    return () => {
+      document.body.style.overflow = originalStyle;
+      document.body.style.paddingRight = originalPaddingRight;
+    };
+  }, [enabled]);
+}

package/src/presentation/hooks/useToggle.ts

@@ -0,0 +1,16 @@
+/**
+ * useToggle Hook
+ * @description Toggle boolean state
+ */
+
+import { useCallback, useState } from 'react';
+
+export function useToggle(initialValue: boolean = false): [boolean, () => void, (value: boolean) => void] {
+  const [value, setValue] = useState(initialValue);
+
+  const toggle = useCallback(() => {
+    setValue((v) => !v);
+  }, []);
+
+  return [value, toggle, setValue];
+}

package/src/presentation/molecules/CheckboxGroup.tsx

@@ -0,0 +1,68 @@
+/**
+ * CheckboxGroup Component (Molecule)
+ * @description Group of checkboxes
+ */
+
+import { forwardRef, type HTMLAttributes } from 'react';
+import { cn } from '../../infrastructure/utils';
+import type { BaseProps } from '../../domain/types';
+import { Checkbox } from '../atoms/Checkbox';
+import { Text } from '../atoms/Text';
+
+export interface CheckboxOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+export interface CheckboxGroupProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
+  options: CheckboxOption[];
+  value?: string[];
+  onChange?: (values: string[]) => void;
+  orientation?: 'vertical' | 'horizontal';
+}
+
+const orientationStyles: Record<'vertical' | 'horizontal', string> = {
+  vertical: 'flex-col gap-3',
+  horizontal: 'flex-row gap-6',
+};
+
+export const CheckboxGroup = forwardRef<HTMLDivElement, CheckboxGroupProps>(
+  ({ className, options, value = [], onChange, orientation = 'vertical', ...props }, ref) => {
+    const handleCheckedChange = (optionValue: string, checked: boolean) => {
+      if (checked) {
+        onChange?.([...value, optionValue]);
+      } else {
+        onChange?.(value.filter((v) => v !== optionValue));
+      }
+    };
+
+    return (
+      <div
+        ref={ref}
+        role="group"
+        className={cn('flex', orientationStyles[orientation], className)}
+        {...props}
+      >
+        {options.map((option) => (
+          <label
+            key={option.value}
+            className={cn(
+              'flex items-center gap-2 cursor-pointer',
+              option.disabled && 'opacity-50 cursor-not-allowed'
+            )}
+          >
+            <Checkbox
+              checked={value.includes(option.value)}
+              onCheckedChange={(checked) => handleCheckedChange(option.value, checked)}
+              disabled={option.disabled}
+            />
+            <Text size="sm">{option.label}</Text>
+          </label>
+        ))}
+      </div>
+    );
+  }
+);
+
+CheckboxGroup.displayName = 'CheckboxGroup';

package/src/presentation/molecules/InputGroup.tsx

@@ -0,0 +1,65 @@
+/**
+ * InputGroup Component (Molecule)
+ * @description Input with prefix/suffix elements
+ */
+
+import { forwardRef, type ReactNode, type HTMLAttributes } from 'react';
+import { cn } from '../../infrastructure/utils';
+import type { BaseProps, ChildrenProps } from '../../domain/types';
+import { Input } from '../atoms/Input';
+
+export interface InputGroupProps extends HTMLAttributes<HTMLDivElement>, BaseProps, ChildrenProps {
+  leftElement?: ReactNode;
+  rightElement?: ReactNode;
+}
+
+export const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(
+  ({ className, leftElement, rightElement, children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className="relative"
+        {...props}
+      >
+        {leftElement && (
+          <div className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground">
+            {leftElement}
+          </div>
+        )}
+        {children}
+        {rightElement && (
+          <div className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground">
+            {rightElement}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+InputGroup.displayName = 'InputGroup';
+
+export const GroupedInput = forwardRef<HTMLInputElement, React.ComponentProps<typeof Input> & {
+  leftElement?: ReactNode;
+  rightElement?: ReactNode;
+}>(
+  ({ className, leftElement, rightElement, ...props }, ref) => {
+    return (
+      <InputGroup>
+        {leftElement}
+        <Input
+          ref={ref}
+          className={cn(
+            leftElement && 'pl-10',
+            rightElement && 'pr-10',
+            className
+          )}
+          {...props}
+        />
+        {rightElement}
+      </InputGroup>
+    );
+  }
+);
+
+GroupedInput.displayName = 'GroupedInput';

package/src/presentation/molecules/RadioGroup.tsx

@@ -0,0 +1,63 @@
+/**
+ * RadioGroup Component (Molecule)
+ * @description Group of radio buttons
+ */
+
+import { forwardRef, type HTMLAttributes } from 'react';
+import { cn } from '../../infrastructure/utils';
+import type { BaseProps } from '../../domain/types';
+import { Radio } from '../atoms/Radio';
+import { Text } from '../atoms/Text';
+
+export interface RadioOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+export interface RadioGroupProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
+  name: string;
+  options: RadioOption[];
+  value?: string;
+  onChange?: (value: string) => void;
+  orientation?: 'vertical' | 'horizontal';
+}
+
+const orientationStyles: Record<'vertical' | 'horizontal', string> = {
+  vertical: 'flex-col gap-3',
+  horizontal: 'flex-row gap-6',
+};
+
+export const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
+  ({ className, name, options, value, onChange, orientation = 'vertical', ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        role="radiogroup"
+        className={cn('flex', orientationStyles[orientation], className)}
+        {...props}
+      >
+        {options.map((option) => (
+          <label
+            key={option.value}
+            className={cn(
+              'flex items-center gap-2 cursor-pointer',
+              option.disabled && 'opacity-50 cursor-not-allowed'
+            )}
+          >
+            <Radio
+              name={name}
+              value={option.value}
+              checked={value === option.value}
+              onChange={() => !option.disabled && onChange?.(option.value)}
+              disabled={option.disabled}
+            />
+            <Text size="sm">{option.label}</Text>
+          </label>
+        ))}
+      </div>
+    );
+  }
+);
+
+RadioGroup.displayName = 'RadioGroup';

package/src/presentation/molecules/Select.tsx

@@ -0,0 +1,41 @@
+/**
+ * Select Component (Molecule)
+ * @description Dropdown select input
+ */
+
+import { forwardRef, type SelectHTMLAttributes } from 'react';
+import { cn } from '../../infrastructure/utils';
+import type { BaseProps } from '../../domain/types';
+
+export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement>, BaseProps {
+  error?: boolean;
+  options: Array<{ value: string; label: string; disabled?: boolean }>;
+}
+
+export const Select = forwardRef<HTMLSelectElement, SelectProps>(
+  ({ className, error, options, disabled, ...props }, ref) => {
+    return (
+      <select
+        ref={ref}
+        disabled={disabled}
+        className={cn(
+          'flex h-9 w-full rounded-md border border-input bg-background px-3 py-2',
+          'text-sm ring-offset-background',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+          'disabled:cursor-not-allowed disabled:opacity-50',
+          error && 'border-destructive',
+          className
+        )}
+        {...props}
+      >
+        {options.map((option) => (
+          <option key={option.value} value={option.value} disabled={option.disabled}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+    );
+  }
+);
+
+Select.displayName = 'Select';

package/src/presentation/molecules/Textarea.tsx

@@ -0,0 +1,43 @@
+/**
+ * Textarea Component (Molecule)
+ * @description Multi-line text input
+ */
+
+import { forwardRef, type TextareaHTMLAttributes } from 'react';
+import { cn } from '../../infrastructure/utils';
+import type { BaseProps } from '../../domain/types';
+
+export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement>, BaseProps {
+  error?: boolean;
+  resize?: 'none' | 'both' | 'horizontal' | 'vertical';
+}
+
+const resizeStyles: Record<'none' | 'both' | 'horizontal' | 'vertical', string> = {
+  none: 'resize-none',
+  both: 'resize',
+  horizontal: 'resize-x',
+  vertical: 'resize-y',
+};
+
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, error, resize = 'vertical', ...props }, ref) => {
+    return (
+      <textarea
+        ref={ref}
+        className={cn(
+          'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2',
+          'text-sm ring-offset-background',
+          'placeholder:text-muted-foreground',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+          'disabled:cursor-not-allowed disabled:opacity-50',
+          error && 'border-destructive',
+          resizeStyles[resize],
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);
+
+Textarea.displayName = 'Textarea';

package/src/presentation/molecules/index.ts

@@ -18,3 +18,18 @@ export type { ChipProps } from './Chip';
 
 export { Toggle } from './Toggle';
 export type { ToggleProps } from './Toggle';
+
+export { Select } from './Select';
+export type { SelectProps } from './Select';
+
+export { Textarea } from './Textarea';
+export type { TextareaProps } from './Textarea';
+
+export { RadioGroup } from './RadioGroup';
+export type { RadioGroupProps, RadioOption } from './RadioGroup';
+
+export { CheckboxGroup } from './CheckboxGroup';
+export type { CheckboxGroupProps, CheckboxOption } from './CheckboxGroup';
+
+export { InputGroup, GroupedInput } from './InputGroup';
+export type { InputGroupProps } from './InputGroup';

package/src/presentation/organisms/Accordion.tsx

@@ -0,0 +1,117 @@
+/**
+ * Accordion Component (Organism)
+ * @description Collapsible content sections
+ */
+
+import { useState, useCallback, type ReactNode, type HTMLAttributes } from 'react';
+import { cn } from '../../infrastructure/utils';
+import type { BaseProps } from '../../domain/types';
+import { Icon } from '../atoms/Icon';
+
+export interface AccordionItem {
+  value: string;
+  title: string;
+  content: ReactNode;
+  disabled?: boolean;
+}
+
+export interface AccordionProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
+  items: AccordionItem[];
+  allowMultiple?: boolean;
+  defaultValue?: string[];
+  variant?: 'default' | 'bordered' | 'ghost';
+}
+
+const variantStyles: Record<'default' | 'bordered' | 'ghost', string> = {
+  default: 'border-b',
+  bordered: 'border rounded-lg mb-2',
+  ghost: 'border-0',
+};
+
+export function Accordion({
+  items,
+  allowMultiple = false,
+  defaultValue = [],
+  variant = 'default',
+  className,
+  ...props
+}: AccordionProps) {
+  const [openItems, setOpenItems] = useState<string[]>(defaultValue);
+
+  const toggleItem = useCallback((value: string) => {
+    setOpenItems((prev) => {
+      const isOpen = prev.includes(value);
+
+      if (allowMultiple) {
+        return isOpen
+          ? prev.filter((v) => v !== value)
+          : [...prev, value];
+      } else {
+        return isOpen ? [] : [value];
+      }
+    });
+  }, [allowMultiple]);
+
+  return (
+    <div className={cn('w-full', className)} {...props}>
+      {items.map((item, index) => {
+        const isOpen = openItems.includes(item.value);
+
+        return (
+          <div
+            key={item.value}
+            className={cn(
+              'group',
+              variantStyles[variant],
+              variant === 'bordered' && isOpen && 'ring-1 ring-ring'
+            )}
+          >
+            {/* Header */}
+            <button
+              onClick={() => toggleItem(item.value)}
+              disabled={item.disabled}
+              className={cn(
+                'flex w-full items-center justify-between py-4 font-medium transition-all',
+                'hover:text-foreground',
+                item.disabled && 'opacity-50 cursor-not-allowed',
+                variant === 'bordered' && 'px-4'
+              )}
+            >
+              <span>{item.title}</span>
+              <Icon
+                className={cn(
+                  'transition-transform duration-200',
+                  isOpen && 'rotate-180'
+                )}
+                size="sm"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M19.5 8.25l-7.5 7.5-7.5-7.5"
+                />
+              </Icon>
+            </button>
+
+            {/* Content */}
+            {isOpen && (
+              <div
+                className={cn(
+                  'overflow-hidden',
+                  'animate-accordion-down',
+                  variant === 'bordered' && 'px-4 pb-4'
+                )}
+              >
+                <div className="pb-4 text-sm text-muted-foreground">
+                  {item.content}
+                </div>
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+Accordion.displayName = 'Accordion';

package/src/presentation/organisms/Breadcrumb.tsx

@@ -0,0 +1,83 @@
+/**
+ * Breadcrumb Component (Organism)
+ * @description Navigation breadcrumb trail
+ */
+
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
+import { cn } from '../../infrastructure/utils';
+import type { BaseProps } from '../../domain/types';
+import { Icon } from '../atoms/Icon';
+import { Link } from '../atoms/Link';
+
+export interface BreadcrumbItem {
+  label: string;
+  href?: string;
+  icon?: ReactNode;
+}
+
+export interface BreadcrumbsProps extends HTMLAttributes<HTMLElement>, BaseProps {
+  items: BreadcrumbItem[];
+  separator?: ReactNode;
+}
+
+export const Breadcrumbs = forwardRef<HTMLElement, BreadcrumbsProps>(
+  ({ className, items, separator, ...props }, ref) => {
+    const defaultSeparator = (
+      <Icon size="xs" className="text-muted-foreground">
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M8.25 4.5l7.5 7.5-7.5 7.5"
+        />
+      </Icon>
+    );
+
+    return (
+      <nav
+        ref={ref}
+        aria-label="Breadcrumb"
+        className={cn('flex items-center gap-2 text-sm', className)}
+        {...props}
+      >
+        {items.map((item, index) => {
+          const isLast = index === items.length - 1;
+
+          return (
+            <div key={index} className="flex items-center gap-2">
+              {index > 0 && (separator || defaultSeparator)}
+
+              {item.href ? (
+                <Link
+                  href={item.href}
+                  className={cn(
+                    'flex items-center gap-1.5',
+                    isLast
+                      ? 'text-foreground font-medium'
+                      : 'text-muted-foreground hover:text-foreground'
+                  )}
+                >
+                  {item.icon}
+                  {item.label}
+                </Link>
+              ) : (
+                <span
+                  className={cn(
+                    'flex items-center gap-1.5',
+                    isLast
+                      ? 'text-foreground font-medium'
+                      : 'text-muted-foreground'
+                  )}
+                >
+                  {item.icon}
+                  {item.label}
+                </span>
+              )}
+            </div>
+          );
+        })}
+      </nav>
+    );
+  }
+);
+
+Breadcrumbs.displayName = 'Breadcrumbs';