@umituz/web-design-system 1.0.0

package/src/index.ts

@@ -0,0 +1,28 @@
+/**
+ * @umituz/web-design-system
+ *
+ * Web Design System - Atomic Design components (Atoms, Molecules, Organisms)
+ * for React applications with Tailwind CSS
+ *
+ * ⚠️ ONEMLI: App'ler bu root barrel'i kullanMAMALI.
+ * Subpath import kullanin: "@umituz/web-design-system/atoms"
+ *
+ * @example
+ * // ✅ DOGRU: Subpath import
+ * import { Button, Input } from '@umituz/web-design-system/atoms';
+ * import { Card } from '@umituz/web-design-system/organisms';
+ *
+ * // ❌ YANLIS: Root barrel import
+ * import { Button, Card } from '@umituz/web-design-system';
+ */
+
+// Re-export everything for backward compatibility
+export * from './domain/tokens';
+export * from './domain/types';
+export * from './infrastructure/utils';
+export * from './infrastructure/constants';
+export * from './presentation/atoms';
+export * from './presentation/molecules';
+export * from './presentation/organisms';
+export * from './presentation/templates';
+export * from './presentation/hooks';

package/src/infrastructure/constants/component.constants.ts

@@ -0,0 +1,24 @@
+/**
+ * Component Constants
+ * @description Default component configurations
+ */
+
+export const DEFAULT_SIZE = 'md' as const;
+export const DEFAULT_VARIANT = 'primary' as const;
+export const DEFAULT_COLOR_SCHEME = 'light' as const;
+
+export const SIZE_MAP = {
+  xs: 'xs',
+  sm: 'sm',
+  md: 'md',
+  lg: 'lg',
+  xl: 'xl',
+} as const;
+
+export const COLOR_MAP = {
+  primary: 'primary',
+  secondary: 'secondary',
+  success: 'success',
+  warning: 'warning',
+  destructive: 'destructive',
+} as const;

package/src/infrastructure/constants/index.ts

@@ -0,0 +1,13 @@
+/**
+ * Infrastructure Constants
+ * @description Constant exports
+ * Subpath: @umituz/web-design-system/constants
+ */
+
+export {
+  DEFAULT_SIZE,
+  DEFAULT_VARIANT,
+  DEFAULT_COLOR_SCHEME,
+  SIZE_MAP,
+  COLOR_MAP,
+} from './component.constants';

package/src/infrastructure/utils/cn.util.ts

@@ -0,0 +1,13 @@
+/**
+ * cn Utility
+ * @description Conditional className utility (clsx + tailwind-merge alternative)
+ */
+
+export type ClassName = string | undefined | null | false | ClassName[];
+
+export function cn(...classes: ClassName[]): string {
+  return classes
+    .flat(Infinity as any)
+    .filter(Boolean)
+    .join(' ');
+}

package/src/infrastructure/utils/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Infrastructure Utils
+ * @description Utility function exports
+ * Subpath: @umituz/web-design-system/utils
+ */
+
+export {
+  cn,
+  type ClassName,
+} from './cn.util';

package/src/presentation/atoms/Badge.tsx

@@ -0,0 +1,46 @@
+/**
+ * Badge Component (Atom)
+ * @description Small status or label indicator
+ */
+
+import { forwardRef, type HTMLAttributes } from 'react';
+import { cn } from '../../infrastructure/utils';
+import type { BaseProps, ColorVariant, SizeVariant } from '../../domain/types';
+
+export interface BadgeProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
+  variant?: ColorVariant;
+  size?: Extract<SizeVariant, 'sm' | 'md' | 'lg'>;
+}
+
+const variantStyles: Record<ColorVariant, string> = {
+  primary: 'bg-primary text-primary-foreground border-primary',
+  secondary: 'bg-secondary text-secondary-foreground border-secondary',
+  success: 'bg-success text-success-foreground border-success',
+  warning: 'bg-warning text-warning-foreground border-warning',
+  destructive: 'bg-destructive text-destructive-foreground border-destructive',
+};
+
+const sizeStyles: Record<'sm' | 'md' | 'lg', string> = {
+  sm: 'px-2 py-0.5 text-xs',
+  md: 'px-2.5 py-1 text-sm',
+  lg: 'px-3 py-1.5 text-base',
+};
+
+export const Badge = forwardRef<HTMLDivElement, BadgeProps>(
+  ({ className, variant = 'primary', size = 'md', ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'inline-flex items-center rounded-full border font-medium',
+          variantStyles[variant],
+          sizeStyles[size],
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);
+
+Badge.displayName = 'Badge';

package/src/presentation/atoms/Button.tsx

@@ -0,0 +1,54 @@
+/**
+ * Button Component (Atom)
+ * @description Interactive button element
+ */
+
+import { forwardRef, type ButtonHTMLAttributes } from 'react';
+import { cn } from '../../infrastructure/utils';
+import type { BaseProps, SizeVariant, ColorVariant } from '../../domain/types';
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, BaseProps {
+  variant?: ColorVariant;
+  size?: SizeVariant;
+  fullWidth?: boolean;
+}
+
+const variantStyles: Record<ColorVariant, string> = {
+  primary: 'bg-primary text-primary-foreground hover:bg-primary/90',
+  secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+  success: 'bg-success text-success-foreground hover:bg-success/90',
+  warning: 'bg-warning text-warning-foreground hover:bg-warning/90',
+  destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+};
+
+const sizeStyles: Record<SizeVariant, string> = {
+  xs: 'h-7 px-2 text-xs',
+  sm: 'h-8 px-3 text-sm',
+  md: 'h-9 px-4 text-sm',
+  lg: 'h-10 px-5 text-base',
+  xl: 'h-11 px-6 text-lg',
+};
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant = 'primary', size = 'md', fullWidth = false, disabled, type = 'button', ...props }, ref) => {
+    return (
+      <button
+        ref={ref}
+        type={type}
+        disabled={disabled}
+        className={cn(
+          'inline-flex items-center justify-center rounded-md font-medium transition-colors',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+          'disabled:pointer-events-none disabled:opacity-50',
+          variantStyles[variant],
+          sizeStyles[size],
+          fullWidth && 'w-full',
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);
+
+Button.displayName = 'Button';

package/src/presentation/atoms/Icon.tsx

@@ -0,0 +1,37 @@
+/**
+ * Icon Component (Atom)
+ * @description Wrapper for SVG icons
+ */
+
+import { forwardRef, type SVGAttributes } from 'react';
+import { cn } from '../../infrastructure/utils';
+import type { BaseProps, SizeVariant } from '../../domain/types';
+
+export interface IconProps extends SVGAttributes<SVGSVGElement>, BaseProps {
+  size?: Extract<SizeVariant, 'xs' | 'sm' | 'md' | 'lg' | 'xl'>;
+}
+
+const sizeStyles: Record<'xs' | 'sm' | 'md' | 'lg' | 'xl', string> = {
+  xs: 'h-3 w-3',
+  sm: 'h-4 w-4',
+  md: 'h-5 w-5',
+  lg: 'h-6 w-6',
+  xl: 'h-8 w-8',
+};
+
+export const Icon = forwardRef<SVGSVGElement, IconProps>(
+  ({ className, size = 'md', viewBox = '0 0 24 24', fill = 'none', xmlns = 'http://www.w3.org/2000/svg', ...props }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        viewBox={viewBox}
+        fill={fill}
+        xmlns={xmlns}
+        className={cn('inline-block shrink-0', sizeStyles[size], className)}
+        {...props}
+      />
+    );
+  }
+);
+
+Icon.displayName = 'Icon';

package/src/presentation/atoms/Input.tsx

@@ -0,0 +1,44 @@
+/**
+ * Input Component (Atom)
+ * @description Text input field
+ */
+
+import { forwardRef, type InputHTMLAttributes } from 'react';
+import { cn } from '../../infrastructure/utils';
+import type { BaseProps, SizeVariant } from '../../domain/types';
+
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement>, BaseProps {
+  error?: boolean;
+  size?: Extract<SizeVariant, 'sm' | 'md' | 'lg'>;
+}
+
+const sizeStyles: Record<'sm' | 'md' | 'lg', string> = {
+  sm: 'h-8 px-3 text-sm',
+  md: 'h-9 px-3 text-sm',
+  lg: 'h-10 px-4 text-base',
+};
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ className, error, size = 'md', type = 'text', ...props }, ref) => {
+    return (
+      <input
+        ref={ref}
+        type={type}
+        className={cn(
+          'flex w-full rounded-md border bg-background px-3 py-2',
+          'text-sm ring-offset-background',
+          'file:border-0 file:bg-transparent file:text-sm file:font-medium',
+          'placeholder:text-muted-foreground',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+          'disabled:cursor-not-allowed disabled:opacity-50',
+          sizeStyles[size],
+          error ? 'border-destructive' : 'border-input',
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);
+
+Input.displayName = 'Input';

package/src/presentation/atoms/Spinner.tsx

@@ -0,0 +1,39 @@
+/**
+ * Spinner Component (Atom)
+ * @description Loading indicator
+ */
+
+import { forwardRef, type HTMLAttributes } from 'react';
+import { cn } from '../../infrastructure/utils';
+import type { BaseProps, SizeVariant } from '../../domain/types';
+
+export interface SpinnerProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
+  size?: Extract<SizeVariant, 'sm' | 'md' | 'lg' | 'xl'>;
+}
+
+const sizeStyles: Record<'sm' | 'md' | 'lg' | 'xl', string> = {
+  sm: 'h-4 w-4 border-2',
+  md: 'h-6 w-6 border-2',
+  lg: 'h-8 w-8 border-3',
+  xl: 'h-12 w-12 border-4',
+};
+
+export const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(
+  ({ className, size = 'md', ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'animate-spin rounded-full border-primary border-t-transparent',
+          sizeStyles[size],
+          className
+        )}
+        role="status"
+        aria-label="Loading"
+        {...props}
+      />
+    );
+  }
+);
+
+Spinner.displayName = 'Spinner';

package/src/presentation/atoms/Text.tsx

@@ -0,0 +1,64 @@
+/**
+ * Text Component (Atom)
+ * @description Styled text element
+ */
+
+import { forwardRef, type HTMLAttributes } from 'react';
+import { cn } from '../../infrastructure/utils';
+import type { BaseProps } from '../../domain/types';
+
+export type TextElement = 'p' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export type TextVariant = 'body' | 'heading' | 'label' | 'caption';
+export type TextSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+
+export interface TextProps extends HTMLAttributes<HTMLElement>, BaseProps {
+  as?: TextElement;
+  variant?: TextVariant;
+  size?: TextSize;
+  weight?: 'normal' | 'medium' | 'semibold' | 'bold';
+}
+
+const variantStyles: Record<TextVariant, string> = {
+  body: 'text-foreground',
+  heading: 'text-foreground font-semibold',
+  label: 'text-foreground font-medium',
+  caption: 'text-muted-foreground',
+};
+
+const sizeStyles: Record<TextSize, string> = {
+  xs: 'text-xs',
+  sm: 'text-sm',
+  md: 'text-base',
+  lg: 'text-lg',
+  xl: 'text-xl',
+  '2xl': 'text-2xl',
+  '3xl': 'text-3xl',
+  '4xl': 'text-4xl',
+};
+
+const weightStyles: Record<'normal' | 'medium' | 'semibold' | 'bold', string> = {
+  normal: 'font-normal',
+  medium: 'font-medium',
+  semibold: 'font-semibold',
+  bold: 'font-bold',
+};
+
+export const Text = forwardRef<HTMLElement, TextProps>(
+  ({ className, as = 'p', variant = 'body', size = 'md', weight = 'normal', ...props }, ref) => {
+    const Tag = as as any;
+    return (
+      <Tag
+        ref={ref}
+        className={cn(
+          variantStyles[variant],
+          sizeStyles[size],
+          weightStyles[weight],
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);
+
+Text.displayName = 'Text';

package/src/presentation/atoms/index.ts

@@ -0,0 +1,23 @@
+/**
+ * Atoms Export
+ * @description Atomic components - smallest UI elements
+ * Subpath: @umituz/web-design-system/atoms
+ */
+
+export { Button } from './Button';
+export type { ButtonProps } from './Button';
+
+export { Badge } from './Badge';
+export type { BadgeProps } from './Badge';
+
+export { Input } from './Input';
+export type { InputProps } from './Input';
+
+export { Text } from './Text';
+export type { TextProps, TextElement, TextVariant, TextSize } from './Text';
+
+export { Icon } from './Icon';
+export type { IconProps } from './Icon';
+
+export { Spinner } from './Spinner';
+export type { SpinnerProps } from './Spinner';

package/src/presentation/hooks/index.ts

@@ -0,0 +1,13 @@
+/**
+ * Presentation Hooks Export
+ * @description React hooks
+ * Subpath: @umituz/web-design-system/hooks
+ */
+
+export { useTheme } from './useTheme';
+export type { Theme, UseThemeReturn } from './useTheme';
+
+export { useMediaQuery, useBreakpoint } from './useMediaQuery';
+export type { Breakpoint } from './useMediaQuery';
+
+export { useLocalStorage } from './useLocalStorage';

package/src/presentation/hooks/useLocalStorage.ts

@@ -0,0 +1,44 @@
+/**
+ * useLocalStorage Hook
+ * @description LocalStorage state management
+ */
+
+import { useCallback, useEffect, useState } from 'react';
+
+export function useLocalStorage<T>(
+  key: string,
+  initialValue: T
+): [T, (value: T | ((prev: T) => T)) => void, () => void] {
+  const [storedValue, setStoredValue] = useState<T>(() => {
+    try {
+      const item = window.localStorage.getItem(key);
+      return item ? JSON.parse(item) : initialValue;
+    } catch {
+      return initialValue;
+    }
+  });
+
+  const setValue = useCallback(
+    (value: T | ((prev: T) => T)) => {
+      try {
+        const valueToStore = value instanceof Function ? value(storedValue) : value;
+        setStoredValue(valueToStore);
+        window.localStorage.setItem(key, JSON.stringify(valueToStore));
+      } catch (error) {
+        console.error(`Error setting localStorage key "${key}":`, error);
+      }
+    },
+    [key, storedValue]
+  );
+
+  const removeValue = useCallback(() => {
+    try {
+      window.localStorage.removeItem(key);
+      setStoredValue(initialValue);
+    } catch (error) {
+      console.error(`Error removing localStorage key "${key}":`, error);
+    }
+  }, [key, initialValue]);
+
+  return [storedValue, setValue, removeValue];
+}

package/src/presentation/hooks/useMediaQuery.ts

@@ -0,0 +1,46 @@
+/**
+ * useMediaQuery Hook
+ * @description Responsive breakpoint detection
+ */
+
+import { useEffect, useState } from 'react';
+
+export type Breakpoint = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+
+const breakpointValues: Record<Breakpoint, number> = {
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  '2xl': 1536,
+};
+
+export function useMediaQuery(breakpoint: Breakpoint): boolean {
+  const [matches, setMatches] = useState(false);
+
+  useEffect(() => {
+    const media = window.matchMedia(`(min-width: ${breakpointValues[breakpoint]}px)`);
+    setMatches(media.matches);
+
+    const listener = () => setMatches(media.matches);
+    media.addEventListener('change', listener);
+    return () => media.removeEventListener('change', listener);
+  }, [breakpoint]);
+
+  return matches;
+}
+
+export function useBreakpoint(): Breakpoint | null {
+  const isSm = useMediaQuery('sm');
+  const isMd = useMediaQuery('md');
+  const isLg = useMediaQuery('lg');
+  const isXl = useMediaQuery('xl');
+  const is2xl = useMediaQuery('2xl');
+
+  if (is2xl) return '2xl';
+  if (isXl) return 'xl';
+  if (isLg) return 'lg';
+  if (isMd) return 'md';
+  if (isSm) return 'sm';
+  return null;
+}

package/src/presentation/hooks/useTheme.ts

@@ -0,0 +1,51 @@
+/**
+ * useTheme Hook
+ * @description Theme toggle functionality
+ */
+
+import { useEffect, useState } from 'react';
+
+export type Theme = 'light' | 'dark';
+
+export interface UseThemeReturn {
+  theme: Theme;
+  toggleTheme: () => void;
+  setTheme: (theme: Theme) => void;
+}
+
+export function useTheme(): UseThemeReturn {
+  const [theme, setThemeState] = useState<Theme>(() => {
+    try {
+      const saved = localStorage.getItem('theme') as Theme | null;
+      if (saved === 'light' || saved === 'dark') return saved;
+      return 'light';
+    } catch {
+      return 'light';
+    }
+  });
+
+  useEffect(() => {
+    const root = document.documentElement;
+    root.classList.remove('light', 'dark');
+    root.classList.add(theme);
+    try {
+      localStorage.setItem('theme', theme);
+    } catch {
+      // Ignore
+    }
+  }, [theme]);
+
+  const toggleTheme = () => {
+    setThemeState((prev) => (prev === 'light' ? 'dark' : 'light'));
+  };
+
+  const setTheme = (newTheme: Theme) => {
+    setThemeState(newTheme);
+  };
+
+  return {
+    theme,
+    toggleTheme,
+    setTheme,
+  };
+}

package/src/presentation/molecules/Avatar.tsx

@@ -0,0 +1,52 @@
+/**
+ * Avatar Component (Molecule)
+ * @description User avatar with fallback
+ */
+
+import { forwardRef, type HTMLAttributes } from 'react';
+import { cn } from '../../infrastructure/utils';
+import type { BaseProps, SizeVariant } from '../../domain/types';
+
+export interface AvatarProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
+  src?: string;
+  alt?: string;
+  fallback?: string;
+  size?: Extract<SizeVariant, 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'>;
+}
+
+const sizeStyles: Record<'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl', string> = {
+  xs: 'h-6 w-6 text-xs',
+  sm: 'h-8 w-8 text-sm',
+  md: 'h-10 w-10 text-base',
+  lg: 'h-12 w-12 text-lg',
+  xl: 'h-16 w-16 text-xl',
+  '2xl': 'h-20 w-20 text-2xl',
+};
+
+export const Avatar = forwardRef<HTMLDivElement, AvatarProps>(
+  ({ className, src, alt, fallback, size = 'md', ...props }, ref) => {
+    const hasError = !src;
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted',
+          sizeStyles[size],
+          className
+        )}
+        {...props}
+      >
+        {hasError ? (
+          <span className="font-medium text-muted-foreground">
+            {fallback || '?'}
+          </span>
+        ) : (
+          <img src={src} alt={alt || 'Avatar'} className="h-full w-full object-cover" />
+        )}
+      </div>
+    );
+  }
+);
+
+Avatar.displayName = 'Avatar';

package/src/presentation/molecules/Chip.tsx

@@ -0,0 +1,58 @@
+/**
+ * Chip Component (Molecule)
+ * @description Selectable/removable tag
+ */
+
+import { forwardRef, type ReactNode } from 'react';
+import { cn } from '../../infrastructure/utils';
+import type { BaseProps, ColorVariant } from '../../domain/types';
+import { Badge } from '../atoms/Badge';
+import { Icon } from '../atoms/Icon';
+
+export interface ChipProps extends BaseProps {
+  label: string;
+  variant?: ColorVariant;
+  onRemove?: () => void;
+  onClick?: () => void;
+  removable?: boolean;
+}
+
+export const Chip = forwardRef<HTMLDivElement, ChipProps>(
+  ({ label, variant = 'secondary', onRemove, onClick, removable = true, className, ...props }, ref) => {
+    return (
+      <Badge
+        ref={ref}
+        variant={variant}
+        className={cn(
+          'gap-1.5 pr-2',
+          onClick && 'cursor-pointer hover:opacity-80',
+          className
+        )}
+        onClick={onClick}
+        {...props}
+      >
+        <span>{label}</span>
+        {removable && onRemove && (
+          <button
+            type="button"
+            onClick={(e) => {
+              e.stopPropagation();
+              onRemove();
+            }}
+            className="hover:opacity-70"
+          >
+            <Icon size="xs">
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M6 18L18 6M6 6l12 12"
+              />
+            </Icon>
+          </button>
+        )}
+      </Badge>
+    );
+  }
+);
+
+Chip.displayName = 'Chip';