React Scope Rule Architect

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@features/*": ["src/features/*"],
      "@shared/*": ["src/shared/*"],
      "@infrastructure/*": ["src/infrastructure/*"]
    }
  }
}

import { useState, useEffect } from 'react';
import { CartItem } from './components/cart-item';
import { CartSummary } from './components/cart-summary';
import { CheckoutButton } from './components/checkout-button';
import { useCart } from './hooks/use-cart';
import type { CartItem as CartItemType } from './models';

/**
 * Shopping Cart Feature Container
 * Handles cart state management and business logic
 */
export function ShoppingCart() {
  const { items, total, addItem, removeItem, updateQuantity } = useCart();
  const [isCheckingOut, setIsCheckingOut] = useState(false);

  const handleCheckout = async () => {
    setIsCheckingOut(true);
    try {
      // Checkout logic
    } finally {
      setIsCheckingOut(false);
    }
  };

  return (
    <div className="shopping-cart">
      <h1>Shopping Cart</h1>
      <div className="cart-items">
        {items.map((item) => (
          <CartItem
            key={item.id}
            item={item}
            onRemove={removeItem}
            onUpdateQuantity={updateQuantity}
          />
        ))}
      </div>
      <CartSummary total={total} itemCount={items.length} />
      <CheckoutButton
        onClick={handleCheckout}
        disabled={isCheckingOut || items.length === 0}
      />
    </div>
  );
}

import type { CartItem as CartItemType } from '../models';
import { Button } from '@shared/components/button';

interface CartItemProps {
  item: CartItemType;
  onRemove: (id: string) => void;
  onUpdateQuantity: (id: string, quantity: number) => void;
}

/**
 * Cart Item Component
 * Pure presentational component for displaying a cart item
 */
export function CartItem({ item, onRemove, onUpdateQuantity }: CartItemProps) {
  return (
    <div className="cart-item">
      <img src={item.image} alt={item.name} />
      <div className="item-details">
        <h3>{item.name}</h3>
        <p>${item.price}</p>
      </div>
      <div className="item-controls">
        <input
          type="number"
          value={item.quantity}
          onChange={(e) => onUpdateQuantity(item.id, parseInt(e.target.value))}
          min="1"
        />
        <Button onClick={() => onRemove(item.id)} variant="danger">
          Remove
        </Button>
      </div>
    </div>
  );
}

import { useState, useCallback } from 'react';
import { cartService } from '../services/cart-service';
import type { CartItem } from '../models';

/**
 * Custom hook for cart state management
 */
export function useCart() {
  const [items, setItems] = useState<CartItem[]>([]);
  const [loading, setLoading] = useState(false);

  const addItem = useCallback(async (item: CartItem) => {
    setLoading(true);
    try {
      const updatedCart = await cartService.addItem(item);
      setItems(updatedCart);
    } finally {
      setLoading(false);
    }
  }, []);

  const removeItem = useCallback(async (id: string) => {
    setLoading(true);
    try {
      const updatedCart = await cartService.removeItem(id);
      setItems(updatedCart);
    } finally {
      setLoading(false);
    }
  }, []);

  const updateQuantity = useCallback(async (id: string, quantity: number) => {
    setLoading(true);
    try {
      const updatedCart = await cartService.updateQuantity(id, quantity);
      setItems(updatedCart);
    } finally {
      setLoading(false);
    }
  }, []);

  const total = items.reduce((sum, item) => sum + item.price * item.quantity, 0);

  return {
    items,
    total,
    loading,
    addItem,
    removeItem,
    updateQuantity,
  };
}

import type { ReactNode } from 'react';

interface ButtonProps {
  children: ReactNode;
  onClick?: () => void;
  variant?: 'primary' | 'secondary' | 'danger';
  disabled?: boolean;
}

/**
 * Shared Button Component
 * Used across multiple features (shopping-cart, user-profile, etc.)
 */
export function Button({
  children,
  onClick,
  variant = 'primary',
  disabled = false,
}: ButtonProps) {
  return (
    <button
      className={`button button--${variant}`}
      onClick={onClick}
      disabled={disabled}
    >
      {children}
    </button>
  );
}