create-react-zr-architecture 1.0.0

package/template/setup-template.sh

@@ -0,0 +1,277 @@
+#!/bin/bash
+
+# ════════════════════════════════════════════════════════════
+# Script para crear archivos del template
+# ════════════════════════════════════════════════════════════
+
+# _gitignore
+cat > _gitignore << 'EOF'
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Environment
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Database
+*.db
+*.sqlite
+*.sqlite3
+EOF
+
+# _env
+cat > _env << 'EOF'
+VITE_API_URL=http://localhost:3000/api
+EOF
+
+# _env.example
+cat > _env.example << 'EOF'
+VITE_API_URL=http://localhost:3000/api
+EOF
+
+# components.json
+cat te",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/presentation/components",
+    "utils": "@/lib/utils",
+    "ui": "@/presentation/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/shared/hooks"
+  }
+}
+EOF
+
+# tailwind.config.js
+cat > tailwind.config.js << 'EOF'
+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: ["class"],
+  content: [
+    './pages/**/*.{ts,tsx}',
+    './components/**/*.{ts,tsx}',
+    './app/**/*.{ts,tsx}',
+    './src/**/*.{ts,tsx}',
+  ],
+  prefix: "",
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+}
+EOF
+
+# tsconfig.json
+cat > tsconfig.json << 'EOF'
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}
+EOF
+
+# tsconfig.app.json
+cat > tsconfig.app.json << 'EOF'
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+
+    /* Path Aliases */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}
+EOF
+
+# tsconfig.node.json
+cat > tsconfig.node.json << 'EOF'
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}
+EOF
+
+# vite.config.ts
+cat > vite.config.ts << 'EOF'
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react-swc";
+import path from "path";
+
+export default defineConfig({
+  server: {
+    host: "::",
+    port: 8080,
+    strictPort: false,
+    open: false,
+  },
+  plugins: [react()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+});
+EOF
+
+# postcss.config.js
+cat > postcss.config.js << 'EOF'
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
+EOF
+
+# index.html
+cat > index.html << 'EOF'
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React Clean Architecture</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
+EOF
+
+echo "✅ Archivos de configuración creados"

package/template/src/app/App.tsx

@@ -0,0 +1,25 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { AuthProvider } from '@/presentation/context/auth/AuthContext';
+import { IndexPage } from '@/presentation/pages/Index';
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      retry: 1,
+      staleTime: 5 * 60 * 1000, // 5 minutos
+    },
+  },
+});
+
+function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <AuthProvider>
+        <IndexPage />
+      </AuthProvider>
+    </QueryClientProvider>
+  );
+}
+
+export default App;

package/template/src/domain/entities/User.ts

@@ -0,0 +1,8 @@
+import { BaseEntity } from '@/shared/types';
+
+export interface User extends BaseEntity {
+  email: string;
+  nombre: string;
+  rol: string;
+  activo: boolean;
+}

package/template/src/domain/repositories/UserRepository.ts

@@ -0,0 +1,11 @@
+import { User } from '@/domain/entities/User';
+import { PaginatedResponse } from '@/shared/types';
+
+export interface UserRepository {
+  getAll(): Promise<User[]>;
+  getById(id: string): Promise<User>;
+  create(user: Omit<User, 'id' | 'createdAt' | 'updatedAt'>): Promise<User>;
+  update(id: string, user: Partial<User>): Promise<User>;
+  delete(id: string): Promise<void>;
+  getPaginated(page: number, pageSize: number): Promise<PaginatedResponse<User>>;
+}

package/template/src/domain/usecases/users/CreateUserUseCase.ts

@@ -0,0 +1,15 @@
+import { UserRepository } from '@/domain/repositories/UserRepository';
+import { User } from '@/domain/entities/User';
+
+export class CreateUserUseCase {
+  constructor(private userRepository: UserRepository) {}
+
+  async execute(userData: Omit<User, 'id' | 'createdAt' | 'updatedAt'>): Promise<User> {
+    // Aquí puedes agregar validaciones de negocio
+    if (!userData.email || !userData.nombre) {
+      throw new Error('Email y nombre son requeridos');
+    }
+
+    return this.userRepository.create(userData);
+  }
+}

package/template/src/domain/usecases/users/GetAllUsersUseCase.ts

@@ -0,0 +1,10 @@
+import { UserRepository } from '@/domain/repositories/UserRepository';
+import { User } from '@/domain/entities/User';
+
+export class GetAllUsersUseCase {
+  constructor(private userRepository: UserRepository) {}
+
+  async execute(): Promise<User[]> {
+    return this.userRepository.getAll();
+  }
+}

package/template/src/infrastructure/api/apiClient.ts

@@ -0,0 +1,73 @@
+import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';
+import { env } from '@/shared/config/env';
+
+class ApiClient {
+  private client: AxiosInstance;
+
+  constructor(baseURL: string) {
+    this.client = axios.create({
+      baseURL,
+      timeout: 30000,
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+
+    this.setupInterceptors();
+  }
+
+  private setupInterceptors() {
+    // Request interceptor
+    this.client.interceptors.request.use(
+      (config) => {
+        const token = localStorage.getItem('token');
+        if (token) {
+          config.headers.Authorization = `Bearer ${token}`;
+        }
+        return config;
+      },
+      (error) => {
+        return Promise.reject(error);
+      }
+    );
+
+    // Response interceptor
+    this.client.interceptors.response.use(
+      (response) => response,
+      (error) => {
+        if (error.response?.status === 401) {
+          localStorage.removeItem('token');
+          window.location.href = '/login';
+        }
+        return Promise.reject(error);
+      }
+    );
+  }
+
+  async get<T>(url: string, config?: AxiosRequestConfig): Promise<T> {
+    const response: AxiosResponse<T> = await this.client.get(url, config);
+    return response.data;
+  }
+
+  async post<T>(url: string, data?: unknown, config?: AxiosRequestConfig): Promise<T> {
+    const response: AxiosResponse<T> = await this.client.post(url, data, config);
+    return response.data;
+  }
+
+  async put<T>(url: string, data?: unknown, config?: AxiosRequestConfig): Promise<T> {
+    const response: AxiosResponse<T> = await this.client.put(url, data, config);
+    return response.data;
+  }
+
+  async patch<T>(url: string, data?: unknown, config?: AxiosRequestConfig): Promise<T> {
+    const response: AxiosResponse<T> = await this.client.patch(url, data, config);
+    return response.data;
+  }
+
+  async delete<T>(url: string, config?: AxiosRequestConfig): Promise<T> {
+    const response: AxiosResponse<T> = await this.client.delete(url, config);
+    return response.data;
+  }
+}
+
+export const apiClient = new ApiClient(env.apiUrl);

package/template/src/infrastructure/repositories/UserRepositoryImpl.ts

@@ -0,0 +1,32 @@
+import { UserRepository } from '@/domain/repositories/UserRepository';
+import { User } from '@/domain/entities/User';
+import { PaginatedResponse } from '@/shared/types';
+import { apiClient } from '@/infrastructure/api/apiClient';
+
+export class UserRepositoryImpl implements UserRepository {
+  async getAll(): Promise<User[]> {
+    return apiClient.get<User[]>('/users');
+  }
+
+  async getById(id: string): Promise<User> {
+    return apiClient.get<User>(`/users/${id}`);
+  }
+
+  async create(user: Omit<User, 'id' | 'createdAt' | 'updatedAt'>): Promise<User> {
+    return apiClient.post<User>('/users', user);
+  }
+
+  async update(id: string, user: Partial<User>): Promise<User> {
+    return apiClient.put<User>(`/users/${id}`, user);
+  }
+
+  async delete(id: string): Promise<void> {
+    return apiClient.delete<void>(`/users/${id}`);
+  }
+
+  async getPaginated(page: number, pageSize: number): Promise<PaginatedResponse<User>> {
+    return apiClient.get<PaginatedResponse<User>>(`/users?page=${page}&pageSize=${pageSize}`);
+  }
+}
+
+export const userRepository = new UserRepositoryImpl();

package/template/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/template/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import '@/styles/index.css'
+import App from '@/app/App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

package/template/src/presentation/context/auth/AuthContext.tsx

@@ -0,0 +1,84 @@
+import { createContext, useReducer, ReactNode, useEffect } from 'react';
+
+interface User {
+  id: string;
+  email: string;
+  nombre: string;
+  rol: string;
+}
+
+interface AuthState {
+  user: User | null;
+  token: string | null;
+  isAuthenticated: boolean;
+  isLoading: boolean;
+}
+
+type AuthAction =
+  | { type: 'LOGIN'; payload: { user: User; token: string } }
+  | { type: 'LOGOUT' }
+  | { type: 'SET_LOADING'; payload: boolean };
+
+const initialState: AuthState = {
+  user: null,
+  token: localStorage.getItem('token'),
+  isAuthenticated: false,
+  isLoading: true,
+};
+
+const authReducer = (state: AuthState, action: AuthAction): AuthState => {
+  switch (action.type) {
+    case 'LOGIN':
+      localStorage.setItem('token', action.payload.token);
+      return {
+        ...state,
+        user: action.payload.user,
+        token: action.payload.token,
+        isAuthenticated: true,
+        isLoading: false,
+      };
+    case 'LOGOUT':
+      localStorage.removeItem('token');
+      return {
+        ...state,
+        user: null,
+        token: null,
+        isAuthenticated: false,
+        isLoading: false,
+      };
+    case 'SET_LOADING':
+      return {
+        ...state,
+        isLoading: action.payload,
+      };
+    default:
+      return state;
+  }
+};
+
+export const AuthContext = createContext<{
+  state: AuthState;
+  dispatch: React.Dispatch<AuthAction>;
+} | null>(null);
+
+export const AuthProvider = ({ children }: { children: ReactNode }) => {
+  const [state, dispatch] = useReducer(authReducer, initialState);
+
+  useEffect(() => {
+    // Aquí podrías verificar el token al cargar la app
+    const token = localStorage.getItem('token');
+    if (token) {
+      // Verificar token con el backend
+      // Por ahora solo marcamos como no loading
+      dispatch({ type: 'SET_LOADING', payload: false });
+    } else {
+      dispatch({ type: 'SET_LOADING', payload: false });
+    }
+  }, []);
+
+  return (
+    <AuthContext.Provider value={{ state, dispatch }}>
+      {children}
+    </AuthContext.Provider>
+  );
+};

package/template/src/presentation/context/auth/useAuthContext.tsx

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import { AuthContext } from './AuthContext';
+
+export const useAuthContext = () => {
+  const context = useContext(AuthContext);
+  
+  if (!context) {
+    throw new Error('useAuthContext debe ser usado dentro de AuthProvider');
+  }
+  
+  return context;
+};

package/template/src/presentation/pages/Index.tsx

@@ -0,0 +1,76 @@
+export const IndexPage = () => {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-background">
+      <div className="text-center space-y-6 p-8 max-w-4xl">
+        <h1 className="text-5xl font-bold text-foreground bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">
+          React Clean Architecture
+        </h1>
+        <p className="text-xl text-muted-foreground">
+          Template profesional con TypeScript, Vite, Tailwind CSS y shadcn/ui
+        </p>
+        
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-12">
+          {/* Configurado */}
+          <div className="p-6 border rounded-lg bg-card hover:shadow-lg transition-shadow">
+            <div className="flex items-center gap-2 mb-4">
+              <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
+              <h3 className="font-semibold text-lg">✅ Configurado</h3>
+            </div>
+            <ul className="text-left space-y-2 text-sm text-muted-foreground">
+              <li>• React Hook Form + Zod</li>
+              <li>• TanStack Query</li>
+              <li>• Zustand (state)</li>
+              <li>• Path Aliases (@/*)</li>
+              <li>• Tailwind + shadcn/ui</li>
+              <li>• Axios + Socket.io</li>
+            </ul>
+          </div>
+          
+          {/* Estructura */}
+          <div className="p-6 border rounded-lg bg-card hover:shadow-lg transition-shadow">
+            <div className="flex items-center gap-2 mb-4">
+              <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
+              <h3 className="font-semibold text-lg">📁 Clean Architecture</h3>
+            </div>
+            <ul className="text-left space-y-2 text-sm text-muted-foreground">
+              <li>• <span className="font-mono">domain/</span> (entities, usecases)</li>
+              <li>• <span className="font-mono">infrastructure/</span> (api, repos)</li>
+              <li>• <span className="font-mono">presentation/</span> (UI, pages)</li>
+              <li>• <span className="font-mono">shared/</span> (utils, types)</li>
+            </ul>
+          </div>
+        </div>
+
+        {/* Próximos pasos */}
+        <div className="mt-12 p-6 border rounded-lg bg-muted/50">
+          <h3 className="font-semibold mb-4">🚀 Próximos pasos</h3>
+          <div className="space-y-3 text-left">
+            <div>
+              <p className="text-sm text-muted-foreground mb-1">1. Agregar componentes shadcn:</p>
+              <code className="block p-3 bg-background rounded text-sm font-mono">
+                npx shadcn-ui@latest add button card form table
+              </code>
+            </div>
+            <div>
+              <p className="text-sm text-muted-foreground mb-1">2. Crear tus entidades en:</p>
+              <code className="block p-3 bg-background rounded text-sm font-mono">
+                src/domain/entities/
+              </code>
+            </div>
+            <div>
+              <p className="text-sm text-muted-foreground mb-1">3. Implementar tus use cases:</p>
+              <code className="block p-3 bg-background rounded text-sm font-mono">
+                src/domain/usecases/
+              </code>
+            </div>
+          </div>
+        </div>
+
+        <div className="mt-8 text-sm text-muted-foreground">
+          <p>📚 Documentación completa en <span className="font-mono">README.md</span></p>
+          <p className="mt-2">Creado con ❤️ usando Clean Architecture</p>
+        </div>
+      </div>
+    </div>
+  );
+};