@umituz/web-design-system 2.7.2 → 2.9.0

package/src/infrastructure/utils/responsive.utils.ts

@@ -0,0 +1,166 @@
+/**
+ * Responsive Utility Functions
+ * @description Centralized functions for building responsive Tailwind classes
+ * All responsive class construction logic lives here - components should only call these functions
+ */
+
+import { cn } from './cn.util';
+import type { SizeVariant, Breakpoint } from '../../domain/types';
+import {
+  RESPONSIVE_SPACING,
+  RESPONSIVE_ICON_SIZE,
+  RESPONSIVE_CONTAINER_SIZE,
+  RESPONSIVE_TEXT_SIZE,
+  RESPONSIVE_GAP,
+} from '../../domain/tokens/responsive-map.tokens';
+
+/**
+ * Build responsive padding/margin/gap classes
+ * @param property - Tailwind spacing property ('p', 'm', 'px', 'py', 'gap', 'space-y', 'space-x')
+ * @param size - Size variant (sm, md, lg, xl)
+ * @returns Complete responsive class string
+ *
+ * @example
+ * getSpacing('p', 'md') // "p-4 sm:p-5 md:p-5 lg:p-6 xl:p-8 2xl:p-10"
+ */
+export function getSpacing(
+  property: 'p' | 'm' | 'px' | 'py' | 'pt' | 'pb' | 'pl' | 'pr' | 'gap' | 'space-y' | 'space-x',
+  size: SizeVariant
+): string {
+  const token = RESPONSIVE_SPACING[size];
+
+  // Start with base (xs/mobile) value
+  const classes: string[] = [`${property}-${token.xs}`];
+
+  // Add breakpoint-specific classes
+  const breakpoints: Breakpoint[] = ['sm', 'md', 'lg', 'xl', '2xl'];
+  breakpoints.forEach((bp) => {
+    if (token[bp] !== token.xs) {
+      classes.push(`${bp}:${property}-${token[bp]}`);
+    }
+  });
+
+  return classes.join(' ');
+}
+
+/**
+ * Build responsive icon size classes (height + width)
+ * @param size - Size variant
+ * @returns Combined height and width classes
+ *
+ * @example
+ * getIconSize('md') // "h-5 w-5 sm:h-6 sm:w-6 md:h-7 md:w-7 lg:h-8 lg:w-8 xl:h-9 xl:w-9 2xl:h-10 2xl:w-10"
+ */
+export function getIconSize(size: SizeVariant): string {
+  const token = RESPONSIVE_ICON_SIZE[size];
+  const classes: string[] = [`h-${token.xs}`, `w-${token.xs}`];
+
+  const breakpoints: Breakpoint[] = ['sm', 'md', 'lg', 'xl', '2xl'];
+  breakpoints.forEach((bp) => {
+    if (token[bp] !== token.xs) {
+      classes.push(`${bp}:h-${token[bp]}`, `${bp}:w-${token[bp]}`);
+    }
+  });
+
+  return classes.join(' ');
+}
+
+/**
+ * Build responsive container size classes (for icon wrappers)
+ * @param size - Size variant
+ * @returns Combined height, width, and flex center classes
+ *
+ * @example
+ * getContainerSize('md') // "w-10 h-10 sm:w-12 sm:h-12 md:w-12 md:h-12..."
+ */
+export function getContainerSize(size: SizeVariant): string {
+  const token = RESPONSIVE_CONTAINER_SIZE[size];
+  const classes: string[] = [`w-${token.xs}`, `h-${token.xs}`];
+
+  const breakpoints: Breakpoint[] = ['sm', 'md', 'lg', 'xl', '2xl'];
+  breakpoints.forEach((bp) => {
+    if (token[bp] !== token.xs) {
+      classes.push(`${bp}:w-${token[bp]}`, `${bp}:h-${token[bp]}`);
+    }
+  });
+
+  return classes.join(' ');
+}
+
+/**
+ * Get responsive text size classes
+ * @param size - Size variant
+ * @returns Text size class string
+ *
+ * @example
+ * getTextSize('md') // "text-sm sm:text-base"
+ */
+export function getTextSize(size: SizeVariant): string {
+  const token = RESPONSIVE_TEXT_SIZE[size];
+  return cn(token.mobile, token.tablet);
+}
+
+/**
+ * Build responsive gap/spacing classes for layout
+ * @param size - Size variant
+ * @returns Gap class string
+ *
+ * @example
+ * getGap('md') // "gap-3 sm:gap-4 md:gap-4 lg:gap-5 xl:gap-5 2xl:gap-6"
+ */
+export function getGap(size: SizeVariant): string {
+  return getSpacing('gap', size);
+}
+
+/**
+ * Build responsive space-y classes for vertical stacking
+ * @param size - Size variant
+ * @returns Space-y class string
+ *
+ * @example
+ * getSpaceY('md') // "space-y-3 sm:space-y-4 md:space-y-4 lg:space-y-5..."
+ */
+export function getSpaceY(size: SizeVariant): string {
+  return getSpacing('space-y', size);
+}
+
+/**
+ * Get complete responsive styles for common component patterns
+ * @param size - Size variant
+ * @param options - Which styles to include
+ * @returns Combined class string
+ *
+ * @example
+ * getResponsiveStyles('md', { padding: true, gap: true })
+ * // "p-4 sm:p-5 md:p-5 lg:p-6 xl:p-8 2xl:p-10 gap-3 sm:gap-4..."
+ */
+export function getResponsiveStyles(
+  size: SizeVariant,
+  options: {
+    padding?: boolean;
+    gap?: boolean;
+    iconSize?: boolean;
+    textSize?: boolean;
+    containerSize?: boolean;
+  } = {}
+): string {
+  const classes: string[] = [];
+
+  if (options.padding) {
+    classes.push(getSpacing('p', size));
+  }
+  if (options.gap) {
+    classes.push(getGap(size));
+  }
+  if (options.iconSize) {
+    classes.push(getIconSize(size));
+  }
+  if (options.textSize) {
+    classes.push(getTextSize(size));
+  }
+  if (options.containerSize) {
+    classes.push(getContainerSize(size));
+  }
+
+  return classes.join(' ');
+}

package/src/presentation/molecules/FormField.tsx

@@ -1,10 +1,10 @@
 /**
  * FormField Component (Molecule)
- * @description Label + Input combination
+ * @description Label + Input combination (Responsive)
  */
 
 import { forwardRef } from 'react';
-import { cn } from '../../infrastructure/utils';
+import { cn, getSpaceY } from '../../infrastructure/utils';
 import type { BaseProps } from '../../domain/types';
 import { Input } from '../atoms/Input';
 import { Text } from '../atoms/Text';
@@ -16,20 +16,21 @@ export interface FormFieldProps extends BaseProps {
   required?: boolean;
   id?: string;
   inputProps?: React.ComponentProps<typeof Input>;
+  fullWidth?: boolean; // Enable responsive full width
 }
 
 export const FormField = forwardRef<HTMLInputElement, FormFieldProps>(
-  ({ label, error, helperText, required, id, className, inputProps, ...props }, ref) => {
+  ({ label, error, helperText, required, id, className, inputProps, fullWidth = true, ...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}>
+      <div className={cn(getSpaceY('sm'), fullWidth && 'w-full', className)} {...props}>
         {label && (
-          <label htmlFor={fieldId} className="text-sm font-medium">
+          <label htmlFor={fieldId} className="text-sm font-medium block">
             {label}
-            {required && <span className="text-destructive ml-1">*</span>}
+            {required && <span className="text-destructive ml-1" aria-label="required">*</span>}
           </label>
         )}
 

package/src/presentation/molecules/Select.tsx

@@ -21,7 +21,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      'flex h-9 sm:h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
       className
     )}
     {...props}

package/src/presentation/organisms/EmptyState.tsx

@@ -1,10 +1,10 @@
 /**
  * EmptyState Component (Organism)
- * @description Component for displaying empty states with optional actions
+ * @description Component for displaying empty states with optional actions (Responsive)
  */
 
 import { forwardRef } from 'react';
-import { cn } from '../../infrastructure/utils';
+import { cn, getSpacing, getGap } from '../../infrastructure/utils';
 import type { BaseProps, SizeVariant } from '../../domain/types';
 
 export interface EmptyStateProps extends BaseProps {
@@ -16,36 +16,9 @@ export interface EmptyStateProps extends BaseProps {
     onClick: () => void;
   };
   size?: Extract<SizeVariant, 'sm' | 'md' | 'lg' | 'xl'>;
+  centered?: boolean;
 }
 
-const sizeStyles = {
-  sm: 'p-6 gap-3',
-  md: 'p-8 gap-4',
-  lg: 'p-12 gap-5',
-  xl: 'p-16 gap-6',
-};
-
-const iconSizeStyles = {
-  sm: 'h-8 w-8',
-  md: 'h-12 w-12',
-  lg: 'h-16 w-16',
-  xl: 'h-20 w-20',
-};
-
-const titleSizeStyles = {
-  sm: 'text-sm',
-  md: 'text-base',
-  lg: 'text-lg',
-  xl: 'text-xl',
-};
-
-const descriptionSizeStyles = {
-  sm: 'text-xs',
-  md: 'text-sm',
-  lg: 'text-base',
-  xl: 'text-lg',
-};
-
 export const EmptyState = forwardRef<HTMLDivElement, EmptyStateProps>(
   (
     {
@@ -64,17 +37,18 @@ export const EmptyState = forwardRef<HTMLDivElement, EmptyStateProps>(
         ref={ref}
         className={cn(
           'flex flex-col items-center justify-center text-center',
-          sizeStyles[size],
+          getSpacing('p', size),
+          getGap(size === 'xl' ? 'lg' : size),
           className
         )}
         {...props}
       >
         {Icon && (
-          <Icon className={cn(iconSizeStyles[size], 'text-muted-foreground/50 mx-auto mb-2')} />
+          <Icon className={cn(size === 'sm' ? 'h-8 w-8 sm:h-10 sm:w-10' : size === 'md' ? 'h-12 w-12 sm:h-14 sm:w-14' : size === 'lg' ? 'h-16 w-16 sm:h-20 sm:w-20' : 'h-20 w-20 sm:h-24 sm:w-24', 'text-muted-foreground/50 mx-auto mb-2')} />
         )}
-        <h3 className={cn('font-semibold text-foreground', titleSizeStyles[size])}>{title}</h3>
+        <h3 className={cn('font-semibold text-foreground', size === 'sm' ? 'text-sm sm:text-base' : size === 'md' ? 'text-base sm:text-lg' : size === 'lg' ? 'text-lg sm:text-xl' : 'text-xl sm:text-2xl')}>{title}</h3>
         {description && (
-          <p className={cn('text-muted-foreground max-w-md', descriptionSizeStyles[size])}>
+          <p className={cn('text-muted-foreground max-w-md', size === 'sm' ? 'text-xs sm:text-sm' : size === 'md' ? 'text-sm sm:text-base' : size === 'lg' ? 'text-base sm:text-lg' : 'text-lg sm:text-xl')}>
             {description}
           </p>
         )}

package/src/presentation/organisms/Grid.tsx

@@ -0,0 +1,129 @@
+/**
+ * Grid Component (Organism)
+ * @description Responsive grid system with configurable columns
+ */
+
+import { cn } from '../../infrastructure/utils';
+import type { BaseProps } from '../../domain/types';
+import type { Breakpoint } from '../../domain/types/breakpoint.types';
+
+export interface GridProps extends BaseProps {
+  children: React.ReactNode;
+  cols?: {
+    xs?: number;
+    sm?: number;
+    md?: number;
+    lg?: number;
+    xl?: number;
+    '2xl'?: number;
+  };
+  gap?: number | string;
+  className?: string;
+}
+
+/**
+ * Responsive grid system that adjusts columns based on breakpoint
+ * @param cols - Number of columns per breakpoint
+ * @param gap - Gap between items (spacing unit or custom value)
+ * @param children - Grid items
+ *
+ * @example
+ * ```tsx
+ * // Auto responsive: 1 col mobile, 2 tablet, 3 desktop
+ * <Grid cols={{ xs: 1, sm: 2, lg: 3 }}>
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ * </Grid>
+ *
+ * // Fixed 4 columns
+ * <Grid cols={{ lg: 4 }}>
+ *   {items.map(item => <Card key={item.id}>{item}</Card>)}
+ * </Grid>
+ * ```
+ */
+export const Grid = ({ children, cols = {}, gap = 4, className }: GridProps) => {
+  const {
+    xs = 1,
+    sm = xs,
+    md = sm,
+    lg = md,
+    xl = lg,
+    '2xl': xl2 = xl
+  } = cols;
+
+  const gridCols = cn(
+    'grid',
+    `grid-cols-${xs}`, // xs always applies (mobile-first)
+    sm !== xs && `sm:grid-cols-${sm}`,
+    md !== sm && `md:grid-cols-${md}`,
+    lg !== md && `lg:grid-cols-${lg}`,
+    xl !== lg && `xl:grid-cols-${xl}`,
+    xl2 !== xl && `2xl:grid-cols-${xl2}`
+  );
+
+  const gapClass = typeof gap === 'number' ? `gap-${gap}` : gap;
+
+  return (
+    <div className={cn(gridCols, gapClass, className)}>
+      {children}
+    </div>
+  );
+};
+
+Grid.displayName = 'Grid';
+
+/**
+ * Grid Item component for custom column spans
+ */
+export interface GridItemProps extends BaseProps {
+  children: React.ReactNode;
+  span?: {
+    xs?: number;
+    sm?: number;
+    md?: number;
+    lg?: number;
+    xl?: number;
+    '2xl'?: number;
+  };
+  className?: string;
+}
+
+/**
+ * Grid item with custom column span per breakpoint
+ * @param span - Number of columns to span (1-12)
+ *
+ * @example
+ * ```tsx
+ * <Grid cols={{ lg: 4 }}>
+ *   <GridItem span={{ lg: 2 }}>Spans 2 columns</GridItem>
+ *   <GridItem>Regular 1 column</GridItem>
+ * </Grid>
+ * ```
+ */
+export const GridItem = ({ children, span = {}, className }: GridItemProps) => {
+  const {
+    xs = 1,
+    sm = xs,
+    md = sm,
+    lg = md,
+    xl = lg,
+    '2xl': xl2 = xl
+  } = span;
+
+  const colSpan = cn(
+    'col-span-1',
+    `sm:col-span-${sm}`,
+    `md:col-span-${md}`,
+    `lg:col-span-${lg}`,
+    `xl:col-span-${xl}`,
+    `2xl:col-span-${xl2}`
+  );
+
+  return (
+    <div className={cn(colSpan, className)}>
+      {children}
+    </div>
+  );
+};
+
+GridItem.displayName = 'GridItem';

package/src/presentation/organisms/LoadingState.tsx

@@ -1,10 +1,10 @@
 /**
  * LoadingState Component (Organism)
- * @description Component for displaying loading states
+ * @description Component for displaying loading states (Responsive)
  */
 
 import { forwardRef } from 'react';
-import { cn } from '../../infrastructure/utils';
+import { cn, getSpacing, getGap } from '../../infrastructure/utils';
 import { Spinner } from '../atoms/Spinner';
 import type { BaseProps, SizeVariant } from '../../domain/types';
 
@@ -12,26 +12,9 @@ export interface LoadingStateProps extends BaseProps {
   message?: string;
   size?: Extract<SizeVariant, 'sm' | 'md' | 'lg'>;
   variant?: 'spinner' | 'skeleton' | 'dots';
+  centered?: boolean;
 }
 
-const sizeStyles = {
-  sm: 'gap-3',
-  md: 'gap-4',
-  lg: 'gap-5',
-};
-
-const spinnerSizeStyles = {
-  sm: 'sm' as const,
-  md: 'md' as const,
-  lg: 'lg' as const,
-};
-
-const messageSizeStyles = {
-  sm: 'text-xs',
-  md: 'text-sm',
-  lg: 'text-base',
-};
-
 export const LoadingState = forwardRef<HTMLDivElement, LoadingStateProps>(
   (
     {
@@ -39,30 +22,34 @@ export const LoadingState = forwardRef<HTMLDivElement, LoadingStateProps>(
       message,
       size = 'md',
       variant = 'spinner',
+      centered = true,
       ...props
     },
     ref
   ) => {
+    const spinnerSize: 'sm' | 'md' | 'lg' = size;
     return (
       <div
         ref={ref}
         className={cn(
-          'flex flex-col items-center justify-center p-8',
-          sizeStyles[size],
+          'flex flex-col items-center justify-center',
+          getGap(size),
+          getSpacing('p', size),
+          centered && 'min-h-[200px] sm:min-h-[300px]',
           className
         )}
         {...props}
       >
-        {variant === 'spinner' && <Spinner size={spinnerSizeStyles[size]} />}
+        {variant === 'spinner' && <Spinner size={spinnerSize} />}
         {variant === 'dots' && (
-          <div className="flex gap-1">
+          <div className="flex gap-1 sm:gap-2">
             {[0, 1, 2].map((i) => (
               <div
                 key={i}
                 className={cn(
                   'w-2 h-2 bg-primary rounded-full animate-bounce',
-                  size === 'sm' && 'w-1.5 h-1.5',
-                  size === 'lg' && 'w-3 h-3'
+                  'w-1.5 h-1.5 sm:w-2 sm:h-2',
+                  'lg:w-2.5 h-2.5'
                 )}
                 style={{ animationDelay: `${i * 0.15}s` }}
               />
@@ -70,14 +57,14 @@ export const LoadingState = forwardRef<HTMLDivElement, LoadingStateProps>(
           </div>
         )}
         {variant === 'skeleton' && (
-          <div className="w-full space-y-3">
-            <div className="h-4 bg-muted animate-pulse rounded" style={{ width: '40%' }} />
-            <div className="h-3 bg-muted animate-pulse rounded" style={{ width: '70%' }} />
-            <div className="h-3 bg-muted animate-pulse rounded" style={{ width: '60%' }} />
+          <div className="w-full space-y-2 sm:space-y-3">
+            <div className="h-3 sm:h-4 bg-muted animate-pulse rounded w-2/3 sm:w-1/2" />
+            <div className="h-2.5 sm:h-3 bg-muted animate-pulse rounded w-full" />
+            <div className="h-2.5 sm:h-3 bg-muted animate-pulse rounded w-3/4" />
           </div>
         )}
         {message && variant !== 'skeleton' && (
-          <p className={cn('text-muted-foreground mt-2', messageSizeStyles[size])}>{message}</p>
+          <p className={cn('text-muted-foreground mt-2 sm:mt-3', size === 'sm' ? 'text-xs sm:text-sm' : size === 'md' ? 'text-sm sm:text-base' : 'text-base sm:text-lg', 'text-center max-w-md')}>{message}</p>
         )}
       </div>
     );

package/src/presentation/organisms/MetricCard.tsx

@@ -1,10 +1,10 @@
 /**
  * MetricCard Component (Organism)
- * @description Card component for displaying metrics and statistics with trend indicators
+ * @description Card component for displaying metrics and statistics with trend indicators (Responsive)
  */
 
 import { forwardRef } from 'react';
-import { cn } from '../../infrastructure/utils';
+import { cn, getSpacing, getIconSize, getTextSize, getGap } from '../../infrastructure/utils';
 import { Card, CardContent } from './Card';
 import type { BaseProps, ColorVariant, SizeVariant } from '../../domain/types';
 
@@ -21,32 +21,9 @@ export interface MetricCardProps extends BaseProps {
   variant?: ColorVariant;
   trendValueFormatter?: (value: number) => string;
   onClick?: () => void;
+  responsiveLayout?: boolean; // Enable responsive layout changes
 }
 
-const sizeStyles = {
-  sm: 'p-3',
-  md: 'p-4',
-  lg: 'p-5',
-};
-
-const valueSizeStyles = {
-  sm: 'text-lg',
-  md: 'text-2xl',
-  lg: 'text-3xl',
-};
-
-const iconSizeStyles = {
-  sm: 'h-4 w-4',
-  md: 'h-8 w-8',
-  lg: 'h-10 w-10',
-};
-
-const labelSizeStyles = {
-  sm: 'text-xs',
-  md: 'text-sm',
-  lg: 'text-base',
-};
-
 const trendColors: Record<ColorVariant, { positive: string; negative: string; bg: string }> = {
   primary: { positive: 'text-primary', negative: 'text-destructive', bg: 'bg-primary' },
   secondary: { positive: 'text-secondary', negative: 'text-destructive', bg: 'bg-secondary' },
@@ -68,6 +45,7 @@ export const MetricCard = forwardRef<HTMLDivElement, MetricCardProps>(
       variant = 'primary',
       trendValueFormatter = (v) => `${v > 0 ? '+' : ''}${v}%`,
       onClick,
+      responsiveLayout = true,
       ...props
     },
     ref
@@ -87,34 +65,48 @@ export const MetricCard = forwardRef<HTMLDivElement, MetricCardProps>(
         onClick={onClick}
         {...props}
       >
-        <CardContent className={cn(sizeStyles[size])}>
-          <div className="flex items-center justify-between">
-            <div className="flex-1">
-              <p className={cn('text-muted-foreground font-medium', labelSizeStyles[size])}>{title}</p>
-              <p className={cn('font-bold text-foreground', valueSizeStyles[size])}>
+        <CardContent className={getSpacing('p', size)}>
+          <div className={cn(
+            'flex items-center justify-between',
+            getGap('md'),
+            responsiveLayout && 'flex-col sm:flex-row'
+          )}>
+            <div className={cn(
+              'flex-1',
+              responsiveLayout && 'text-center sm:text-left w-full sm:w-auto'
+            )}>
+              <p className={cn('text-muted-foreground font-medium', getTextSize(size))}>{title}</p>
+              <p className={cn('font-bold text-foreground mt-1', size === 'sm' ? 'text-lg sm:text-xl' : size === 'md' ? 'text-2xl' : 'text-3xl sm:text-4xl')}>
                 {typeof value === 'number' ? value.toLocaleString() : value}
               </p>
               {trend && (
-                <div className="flex items-center gap-1 mt-1">
+                <div className={cn(
+                  'flex items-center gap-1 mt-1',
+                  responsiveLayout ? 'justify-center sm:justify-start' : ''
+                )}>
                   <span
                     className={cn(
-                      'text-xs font-medium',
+                      'text-xs sm:text-sm font-medium',
                       isPositive ? colors.positive : colors.negative
                     )}
                   >
                     {TrendIcon}
                   </span>
-                  <p className={cn('text-xs', isPositive ? colors.positive : colors.negative)}>
+                  <p className={cn('text-xs sm:text-sm', isPositive ? colors.positive : colors.negative)}>
                     {trendValueFormatter(trend.value)}
                   </p>
                   {trend.label && (
-                    <p className="text-xs text-muted-foreground ml-1">{trend.label}</p>
+                    <p className="text-xs text-muted-foreground ml-1 hidden sm:inline">{trend.label}</p>
                   )}
                 </div>
               )}
             </div>
             {Icon && (
-              <Icon className={cn(iconSizeStyles[size], iconColor, 'flex-shrink-0')} />
+              <div className={cn(
+                responsiveLayout ? 'sm:self-auto' : ''
+              )}>
+                <Icon className={cn(getIconSize(size), iconColor, 'flex-shrink-0')} />
+              </div>
             )}
           </div>
         </CardContent>