@umituz/web-design-system 1.0.0

package/src/presentation/molecules/FormField.tsx

@@ -0,0 +1,61 @@
+/**
+ * FormField Component (Molecule)
+ * @description Label + Input combination
+ */
+
+import { forwardRef, type ReactNode } from 'react';
+import { cn } from '../../infrastructure/utils';
+import type { BaseProps } from '../../domain/types';
+import { Input } from '../atoms/Input';
+import { Text } from '../atoms/Text';
+
+export interface FormFieldProps extends BaseProps {
+  label?: string;
+  error?: string;
+  helperText?: string;
+  required?: boolean;
+  id?: string;
+  inputProps?: React.ComponentProps<typeof Input>;
+}
+
+export const FormField = forwardRef<HTMLInputElement, FormFieldProps>(
+  ({ label, error, helperText, required, id, className, inputProps, ...props }, ref) => {
+    const fieldId = id || inputProps?.id || inputProps?.name;
+    const errorId = error ? `${fieldId}-error` : undefined;
+    const helperId = helperText ? `${fieldId}-helper` : undefined;
+
+    return (
+      <div className={cn('space-y-1.5', className)} {...props}>
+        {label && (
+          <Text as="label" variant="label" size="sm" htmlFor={fieldId}>
+            {label}
+            {required && <span className="text-destructive ml-1">*</span>}
+          </Text>
+        )}
+
+        <Input
+          ref={ref}
+          id={fieldId}
+          aria-invalid={!!error}
+          aria-describedby={cn(errorId, helperId)}
+          error={!!error}
+          {...inputProps}
+        />
+
+        {error && (
+          <Text as="p" variant="caption" size="sm" id={errorId} className="text-destructive">
+            {error}
+          </Text>
+        )}
+
+        {helperText && !error && (
+          <Text as="p" variant="caption" size="sm" id={helperId} className="text-muted-foreground">
+            {helperText}
+          </Text>
+        )}
+      </div>
+    );
+  }
+);
+
+FormField.displayName = 'FormField';

package/src/presentation/molecules/SearchBox.tsx

@@ -0,0 +1,45 @@
+/**
+ * SearchBox Component (Molecule)
+ * @description Input with search icon
+ */
+
+import { forwardRef } from 'react';
+import { cn } from '../../infrastructure/utils';
+import type { BaseProps } from '../../domain/types';
+import { Input } from '../atoms/Input';
+import { Icon } from '../atoms/Icon';
+
+export interface SearchBoxProps extends BaseProps {
+  placeholder?: string;
+  value?: string;
+  onChange?: (value: string) => void;
+}
+
+export const SearchBox = forwardRef<HTMLInputElement, SearchBoxProps>(
+  ({ placeholder = 'Search...', value, onChange, className, ...props }, ref) => {
+    return (
+      <div className={cn('relative', className)} {...props}>
+        <Icon
+          className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"
+          size="sm"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+          />
+        </Icon>
+        <Input
+          ref={ref}
+          type="text"
+          placeholder={placeholder}
+          value={value}
+          onChange={(e) => onChange?.(e.target.value)}
+          className="pl-9"
+        />
+      </div>
+    );
+  }
+);
+
+SearchBox.displayName = 'SearchBox';

package/src/presentation/molecules/Toggle.tsx

@@ -0,0 +1,61 @@
+/**
+ * Toggle Component (Molecule)
+ * @description Switch/toggle button
+ */
+
+import { forwardRef, type ButtonHTMLAttributes } from 'react';
+import { cn } from '../../infrastructure/utils';
+import type { BaseProps } from '../../domain/types';
+
+export interface ToggleProps extends ButtonHTMLAttributes<HTMLButtonElement>, BaseProps {
+  pressed?: boolean;
+  onPressedChange?: (pressed: boolean) => void;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+const sizeStyles = {
+  sm: 'h-5 w-9',
+  md: 'h-6 w-11',
+  lg: 'h-7 w-13',
+};
+
+const thumbSizeStyles = {
+  sm: 'h-4 w-4 data-[state=checked:translate-x-4',
+  md: 'h-5 w-5 data-[state=checked:translate-x-5',
+  lg: 'h-6 w-6 data-[state=checked:translate-x-6',
+};
+
+export const Toggle = forwardRef<HTMLButtonElement, ToggleProps>(
+  ({ className, pressed = false, onPressedChange, size = 'md', disabled, ...props }, ref) => {
+    return (
+      <button
+        ref={ref}
+        type="button"
+        role="switch"
+        aria-checked={pressed}
+        disabled={disabled}
+        data-state={pressed ? 'checked' : 'unchecked'}
+        onClick={() => onPressedChange?.(!pressed)}
+        className={cn(
+          'peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent',
+          'transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+          'disabled:cursor-not-allowed disabled:opacity-50',
+          'data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+          sizeStyles[size],
+          className
+        )}
+        {...props}
+      >
+        <span
+          className={cn(
+            'pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform',
+            thumbSizeStyles[size],
+            'data-[state=unchecked]:translate-x-0'
+          )}
+        />
+      </button>
+    );
+  }
+);
+
+Toggle.displayName = 'Toggle';

package/src/presentation/molecules/index.ts

@@ -0,0 +1,20 @@
+/**
+ * Molecules Export
+ * @description Molecule components - combinations of atoms
+ * Subpath: @umituz/web-design-system/molecules
+ */
+
+export { FormField } from './FormField';
+export type { FormFieldProps } from './FormField';
+
+export { SearchBox } from './SearchBox';
+export type { SearchBoxProps } from './SearchBox';
+
+export { Avatar } from './Avatar';
+export type { AvatarProps } from './Avatar';
+
+export { Chip } from './Chip';
+export type { ChipProps } from './Chip';
+
+export { Toggle } from './Toggle';
+export type { ToggleProps } from './Toggle';

package/src/presentation/organisms/Alert.tsx

@@ -0,0 +1,96 @@
+/**
+ * Alert Component (Organism)
+ * @description Feedback message with icon
+ */
+
+import { forwardRef, type HTMLAttributes } from 'react';
+import { cn } from '../../infrastructure/utils';
+import type { BaseProps, ChildrenProps, ColorVariant } from '../../domain/types';
+import { Icon } from '../atoms/Icon';
+
+export type AlertVariant = Extract<ColorVariant, 'success' | 'warning' | 'destructive'> | 'info';
+
+export interface AlertProps extends HTMLAttributes<HTMLDivElement>, BaseProps, ChildrenProps {
+  variant?: AlertVariant;
+  showIcon?: boolean;
+}
+
+const variantStyles: Record<AlertVariant, { container: string; iconColor: string }> = {
+  success: {
+    container: 'border-success bg-success/10 text-success',
+    iconColor: 'text-success',
+  },
+  warning: {
+    container: 'border-warning bg-warning/10 text-warning',
+    iconColor: 'text-warning',
+  },
+  destructive: {
+    container: 'border-destructive bg-destructive/10 text-destructive',
+    iconColor: 'text-destructive',
+  },
+  info: {
+    container: 'border-primary bg-primary/10 text-primary',
+    iconColor: 'text-primary',
+  },
+};
+
+const icons: Record<AlertVariant, React.ReactNode> = {
+  success: (
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+    />
+  ),
+  warning: (
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
+    />
+  ),
+  destructive: (
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
+    />
+  ),
+  info: (
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"
+    />
+  ),
+};
+
+export const Alert = forwardRef<HTMLDivElement, AlertProps>(
+  ({ className, variant = 'info', showIcon = true, children, ...props }, ref) => {
+    const styles = variantStyles[variant];
+
+    return (
+      <div
+        ref={ref}
+        role="alert"
+        className={cn(
+          'relative w-full rounded-lg border p-4',
+          styles.container,
+          className
+        )}
+        {...props}
+      >
+        <div className="flex items-start gap-3">
+          {showIcon && (
+            <Icon className={cn('shrink-0 mt-0.5', styles.iconColor)} size="sm">
+              {icons[variant]}
+            </Icon>
+          )}
+          <div className="flex-1">{children}</div>
+        </div>
+      </div>
+    );
+  }
+);
+
+Alert.displayName = 'Alert';

package/src/presentation/organisms/Card.tsx

@@ -0,0 +1,90 @@
+/**
+ * Card Component (Organism)
+ * @description Content container with header, body, footer
+ */
+
+import { forwardRef, type HTMLAttributes } from 'react';
+import { cn } from '../../infrastructure/utils';
+import type { BaseProps, ChildrenProps } from '../../domain/types';
+
+export interface CardProps extends HTMLAttributes<HTMLDivElement>, BaseProps, ChildrenProps {
+  variant?: 'default' | 'outlined' | 'elevated';
+}
+
+const variantStyles: Record<'default' | 'outlined' | 'elevated', string> = {
+  default: 'border border-border bg-card text-card-foreground',
+  outlined: 'border-2 border-border bg-transparent',
+  elevated: 'border-0 shadow-lg bg-card text-card-foreground',
+};
+
+export const Card = forwardRef<HTMLDivElement, CardProps>(
+  ({ className, variant = 'default', children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn('rounded-lg', variantStyles[variant], className)}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+Card.displayName = 'Card';
+
+export const CardHeader = forwardRef<HTMLDivElement, CardProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('flex flex-col space-y-1.5 p-6', className)}
+      {...props}
+    />
+  )
+);
+
+CardHeader.displayName = 'CardHeader';
+
+export const CardTitle = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3
+      ref={ref}
+      className={cn('text-lg font-semibold leading-none tracking-tight', className)}
+      {...props}
+    />
+  )
+);
+
+CardTitle.displayName = 'CardTitle';
+
+export const CardDescription = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p
+      ref={ref}
+      className={cn('text-sm text-muted-foreground', className)}
+      {...props}
+    />
+  )
+);
+
+CardDescription.displayName = 'CardDescription';
+
+export const CardContent = forwardRef<HTMLDivElement, CardProps>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+  )
+);
+
+CardContent.displayName = 'CardContent';
+
+export const CardFooter = forwardRef<HTMLDivElement, CardProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('flex items-center p-6 pt-0', className)}
+      {...props}
+    />
+  )
+);
+
+CardFooter.displayName = 'CardFooter';

package/src/presentation/organisms/Modal.tsx

@@ -0,0 +1,130 @@
+/**
+ * Modal Component (Organism)
+ * @description Dialog/overlay container
+ */
+
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
+import { cn } from '../../infrastructure/utils';
+import type { BaseProps, ChildrenProps } from '../../domain/types';
+
+export interface ModalProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
+  open?: boolean;
+  onClose?: () => void;
+  showCloseButton?: boolean;
+  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+}
+
+const sizeStyles: Record<'sm' | 'md' | 'lg' | 'xl' | 'full', string> = {
+  sm: 'max-w-sm',
+  md: 'max-w-md',
+  lg: 'max-w-lg',
+  xl: 'max-w-xl',
+  full: 'max-w-full mx-4',
+};
+
+export const Modal = forwardRef<HTMLDivElement, ModalProps>(
+  ({ open = false, onClose, showCloseButton = true, size = 'md', className, children, ...props }, ref) => {
+    if (!open) return null;
+
+    return (
+      <div
+        className="fixed inset-0 z-50 flex items-center justify-center"
+        {...props}
+      >
+        {/* Backdrop */}
+        <div
+          className="fixed inset-0 bg-background/80 backdrop-blur-sm"
+          onClick={onClose}
+        />
+
+        {/* Modal */}
+        <div
+          ref={ref}
+          className={cn(
+            'relative z-50 w-full rounded-lg border bg-card p-6 shadow-lg',
+            'animate-in fade-in-0 zoom-in-95',
+            sizeStyles[size],
+            className
+          )}
+          role="dialog"
+          aria-modal="true"
+        >
+          {showCloseButton && (
+            <button
+              onClick={onClose}
+              className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+            >
+              <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+              <span className="sr-only">Close</span>
+            </button>
+          )}
+
+          {children}
+        </div>
+      </div>
+    );
+  }
+);
+
+Modal.displayName = 'Modal';
+
+export const ModalHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)}
+      {...props}
+    />
+  )
+);
+
+ModalHeader.displayName = 'ModalHeader';
+
+export const ModalTitle = forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h2
+      ref={ref}
+      className={cn('text-lg font-semibold leading-none tracking-tight', className)}
+      {...props}
+    />
+  )
+);
+
+ModalTitle.displayName = 'ModalTitle';
+
+export const ModalDescription = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p
+      ref={ref}
+      className={cn('text-sm text-muted-foreground', className)}
+      {...props}
+    />
+  )
+);
+
+ModalDescription.displayName = 'ModalDescription';
+
+export const ModalContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('mt-4', className)} {...props} />
+  )
+);
+
+ModalContent.displayName = 'ModalContent';
+
+export const ModalFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        'mt-4 flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+
+ModalFooter.displayName = 'ModalFooter';

package/src/presentation/organisms/Navbar.tsx

@@ -0,0 +1,74 @@
+/**
+ * Navbar Component (Organism)
+ * @description Navigation bar with logo and links
+ */
+
+import { forwardRef, type HTMLAttributes } from 'react';
+import { cn } from '../../infrastructure/utils';
+import type { BaseProps, ChildrenProps } from '../../domain/types';
+
+export interface NavbarProps extends HTMLAttributes<HTMLElement>, BaseProps, ChildrenProps {
+  variant?: 'default' | 'sticky' | 'fixed';
+}
+
+const variantStyles: Record<'default' | 'sticky' | 'fixed', string> = {
+  default: 'relative',
+  sticky: 'sticky top-0 z-50',
+  fixed: 'fixed top-0 left-0 right-0 z-50',
+};
+
+export const Navbar = forwardRef<HTMLElement, NavbarProps>(
+  ({ className, variant = 'default', children, ...props }, ref) => {
+    return (
+      <nav
+        ref={ref}
+        className={cn(
+          'flex h-16 items-center gap-4 border-b border-border/40 bg-background/95 px-4 backdrop-blur supports-[backdrop-filter]:bg-background/60',
+          variantStyles[variant],
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </nav>
+    );
+  }
+);
+
+Navbar.displayName = 'Navbar';
+
+export const NavbarBrand = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('flex items-center gap-2 font-bold text-lg', className)}
+      {...props}
+    />
+  )
+);
+
+NavbarBrand.displayName = 'NavbarBrand';
+
+export const NavbarLinks = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('hidden items-center gap-6 md:flex', className)}
+      {...props}
+    />
+  )
+);
+
+NavbarLinks.displayName = 'NavbarLinks';
+
+export const NavbarActions = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('ml-auto flex items-center gap-2', className)}
+      {...props}
+    />
+  )
+);
+
+NavbarActions.displayName = 'NavbarActions';

package/src/presentation/organisms/index.ts

@@ -0,0 +1,17 @@
+/**
+ * Organisms Export
+ * @description Organism components - complex UI combinations
+ * Subpath: @umituz/web-design-system/organisms
+ */
+
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './Card';
+export type { CardProps } from './Card';
+
+export { Alert } from './Alert';
+export type { AlertProps, AlertVariant } from './Alert';
+
+export { Modal, ModalHeader, ModalTitle, ModalDescription, ModalContent, ModalFooter } from './Modal';
+export type { ModalProps } from './Modal';
+
+export { Navbar, NavbarBrand, NavbarLinks, NavbarActions } from './Navbar';
+export type { NavbarProps } from './Navbar';

package/src/presentation/templates/Form.tsx

@@ -0,0 +1,41 @@
+/**
+ * Form Template (Template)
+ * @description Complete form structure
+ */
+
+import { forwardRef, type FormHTMLAttributes } from 'react';
+import { cn } from '../../infrastructure/utils';
+import type { BaseProps, ChildrenProps } from '../../domain/types';
+
+export interface FormProps extends FormHTMLAttributes<HTMLFormElement>, BaseProps, ChildrenProps {
+  onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
+}
+
+export const Form = forwardRef<HTMLFormElement, FormProps>(
+  ({ className, onSubmit, children, ...props }, ref) => {
+    return (
+      <form
+        ref={ref}
+        onSubmit={onSubmit}
+        className={cn('space-y-4', className)}
+        {...props}
+      >
+        {children}
+      </form>
+    );
+  }
+);
+
+Form.displayName = 'Form';
+
+export const FormActions = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('flex items-center gap-2 justify-end', className)}
+      {...props}
+    />
+  )
+);
+
+FormActions.displayName = 'FormActions';

package/src/presentation/templates/List.tsx

@@ -0,0 +1,46 @@
+/**
+ * List Template (Template)
+ * @description Structured list container
+ */
+
+import { forwardRef, type HTMLAttributes } from 'react';
+import { cn } from '../../infrastructure/utils';
+import type { BaseProps, ChildrenProps } from '../../domain/types';
+
+export interface ListProps extends HTMLAttributes<HTMLUListElement>, BaseProps, ChildrenProps {
+  variant?: 'default' | 'bordered' | 'spaced';
+}
+
+const variantStyles: Record<'default' | 'bordered' | 'spaced', string> = {
+  default: '',
+  bordered: 'divide-y divide-border',
+  spaced: 'space-y-2',
+};
+
+export const List = forwardRef<HTMLUListElement, ListProps>(
+  ({ className, variant = 'default', children, ...props }, ref) => {
+    return (
+      <ul
+        ref={ref}
+        className={cn(variantStyles[variant], className)}
+        {...props}
+      >
+        {children}
+      </ul>
+    );
+  }
+);
+
+List.displayName = 'List';
+
+export const ListItem = forwardRef<HTMLLIElement, HTMLAttributes<HTMLLIElement>>(
+  ({ className, ...props }, ref) => (
+    <li
+      ref={ref}
+      className={cn('py-2', className)}
+      {...props}
+    />
+  )
+);
+
+ListItem.displayName = 'ListItem';