create-react-zr-architecture 1.0.0

package/template/create-src-files.sh

@@ -0,0 +1,785 @@
+#!/bin/bash
+
+# ════════════════════════════════════════════════════════════
+# Mega Script: Crear TODOS los archivos src/ del template
+# Uso: ./create-src-files.sh (ejecutar desde template/)
+# ════════════════════════════════════════════════════════════
+
+echo "🚀 Creando estructura completa de archivos src/..."
+
+# ════════════════════════════════════════════════════════════
+# Crear estructura de carpetas
+# ════════════════════════════════════════════════════════════
+mkdir -p src/app
+mkdir -p src/domain/entities
+mkdir -p src/domain/repositories
+mkdir -p src/domain/usecases/users
+mkdir -p src/domain/types
+mkdir -p src/infrastructure/api
+mkdir -p src/infrastructure/config
+mkdir -p src/infrastructure/data
+mkdir -p src/infrastructure/repositories
+mkdir -p src/infrastructure/services
+mkdir -p src/presentation/components/layouts
+mkdir -p src/presentation/components/shared
+mkdir -p src/presentation/components/tables
+mkdir -p src/presentation/components/ui
+mkdir -p src/presentation/context/auth
+mkdir -p src/presentation/pages/auth
+mkdir -p src/presentation/pages/management
+mkdir -p src/presentation/routes/config
+mkdir -p src/presentation/routes/guards
+mkdir -p src/presentation/utils
+mkdir -p src/presentation/viewmodels/hooks
+mkdir -p src/presentation/assets/logos
+mkdir -p src/shared/config
+mkdir -p src/shared/constants
+mkdir -p src/shared/hooks
+mkdir -p src/shared/lib
+mkdir -p src/shared/types
+mkdir -p src/shared/utils
+mkdir -p src/lib
+mkdir -p src/styles
+
+# ════════════════════════════════════════════════════════════
+# STYLES
+# ════════════════════════════════════════════════════════════
+cat > src/styles/index.css << 'EOF'
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+EOF
+
+# ════════════════════════════════════════════════════════════
+# LIB
+# ════════════════════════════════════════════════════════════
+cat > src/lib/utils.ts << 'EOF'
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+EOF
+
+# ════════════════════════════════════════════════════════════
+# SHARED - Types
+# ════════════════════════════════════════════════════════════
+cat > src/shared/types/index.ts << 'EOF'
+// ════════════════════════════════════════════════════════════
+// Common Types
+// ════════════════════════════════════════════════════════════
+
+export interface BaseEntity {
+  id: string;
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+export interface PaginatedResponse<T> {
+  data: T[];
+  total: number;
+  page: number;
+  pageSize: number;
+  totalPages: number;
+}
+
+export interface ApiResponse<T> {
+  success: boolean;
+  data?: T;
+  error?: string;
+  message?: string;
+}
+
+export type AsyncState<T> = {
+  data: T | null;
+  loading: boolean;
+  error: string | null;
+};
+
+export interface TableColumn<T> {
+  key: keyof T | string;
+  label: string;
+  sortable?: boolean;
+  render?: (value: any, row: T) => React.ReactNode;
+}
+
+export interface SelectOption {
+  value: string;
+  label: string;
+}
+EOF
+
+# ════════════════════════════════════════════════════════════
+# SHARED - Config
+# ════════════════════════════════════════════════════════════
+cat > src/shared/config/env.ts << 'EOF'
+// ════════════════════════════════════════════════════════════
+// Environment Variables
+// ════════════════════════════════════════════════════════════
+
+export const env = {
+  apiUrl: import.meta.env.VITE_API_URL || 'http://localhost:3000/api',
+  isDevelopment: import.meta.env.DEV,
+  isProduction: import.meta.env.PROD,
+} as const;
+EOF
+
+# ════════════════════════════════════════════════════════════
+# SHARED - Utils
+# ════════════════════════════════════════════════════════════
+cat > src/shared/utils/format.ts << 'EOF'
+// ════════════════════════════════════════════════════════════
+// Format Utilities
+// ════════════════════════════════════════════════════════════
+
+export const formatCurrency = (amount: number, currency = 'USD'): string => {
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency,
+  }).format(amount);
+};
+
+export const formatDate = (date: Date | string, format = 'short'): string => {
+  const d = typeof date === 'string' ? new Date(date) : date;
+  
+  const options: Intl.DateTimeFormatOptions = 
+    format === 'short' 
+      ? { year: 'numeric', month: 'short', day: 'numeric' }
+      : { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' };
+  
+  return new Intl.DateTimeFormat('en-US', options).format(d);
+};
+
+export const formatNumber = (num: number): string => {
+  return new Intl.NumberFormat('en-US').format(num);
+};
+
+export const truncate = (str: string, length: number): string => {
+  if (str.length <= length) return str;
+  return str.substring(0, length) + '...';
+};
+EOF
+
+cat > src/shared/utils/validation.ts << 'EOF'
+// ════════════════════════════════════════════════════════════
+// Validation Utilities
+// ════════════════════════════════════════════════════════════
+
+export const isValidEmail = (email: string): boolean => {
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  return emailRegex.test(email);
+};
+
+export const isValidPhone = (phone: string): boolean => {
+  const phoneRegex = /^\+?[\d\s-()]+$/;
+  return phoneRegex.test(phone);
+};
+
+export const isValidUrl = (url: string): boolean => {
+  try {
+    new URL(url);
+    return true;
+  } catch {
+    return false;
+  }
+};
+EOF
+
+# ════════════════════════════════════════════════════════════
+# SHARED - Constants
+# ════════════════════════════════════════════════════════════
+cat > src/shared/constants/index.ts << 'EOF'
+// ════════════════════════════════════════════════════════════
+// Application Constants
+// ════════════════════════════════════════════════════════════
+
+export const APP_NAME = 'Clean Architecture App';
+export const APP_VERSION = '1.0.0';
+
+export const STORAGE_KEYS = {
+  TOKEN: 'auth_token',
+  USER: 'user_data',
+  THEME: 'app_theme',
+} as const;
+
+export const ROUTES = {
+  HOME: '/',
+  LOGIN: '/login',
+  DASHBOARD: '/dashboard',
+  SETTINGS: '/settings',
+} as const;
+
+export const HTTP_STATUS = {
+  OK: 200,
+  CREATED: 201,
+  BAD_REQUEST: 400,
+  UNAUTHORIZED: 401,
+  FORBIDDEN: 403,
+  NOT_FOUND: 404,
+  INTERNAL_SERVER_ERROR: 500,
+} as const;
+EOF
+
+# ════════════════════════════════════════════════════════════
+# INFRASTRUCTURE - API Client
+# ════════════════════════════════════════════════════════════
+cat > src/infrastructure/api/apiClient.ts << 'EOF'
+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);
+EOF
+
+# ════════════════════════════════════════════════════════════
+# DOMAIN - Entities Example
+# ════════════════════════════════════════════════════════════
+cat > src/domain/entities/User.ts << 'EOF'
+import { BaseEntity } from '@/shared/types';
+
+export interface User extends BaseEntity {
+  email: string;
+  nombre: string;
+  rol: string;
+  activo: boolean;
+}
+EOF
+
+# ════════════════════════════════════════════════════════════
+# DOMAIN - Repository Interface Example
+# ════════════════════════════════════════════════════════════
+cat > src/domain/repositories/UserRepository.ts << 'EOF'
+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>>;
+}
+EOF
+
+# ════════════════════════════════════════════════════════════
+# INFRASTRUCTURE - Repository Implementation Example
+# ════════════════════════════════════════════════════════════
+cat > src/infrastructure/repositories/UserRepositoryImpl.ts << 'EOF'
+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();
+EOF
+
+# ════════════════════════════════════════════════════════════
+# DOMAIN - Use Case Example
+# ════════════════════════════════════════════════════════════
+cat > src/domain/usecases/users/GetAllUsersUseCase.ts << 'EOF'
+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();
+  }
+}
+EOF
+
+cat > src/domain/usecases/users/CreateUserUseCase.ts << 'EOF'
+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);
+  }
+}
+EOF
+
+# ════════════════════════════════════════════════════════════
+# PRESENTATION - Auth Context
+# ════════════════════════════════════════════════════════════
+cat > src/presentation/context/auth/AuthContext.tsx << 'EOF'
+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>
+  );
+};
+EOF
+
+cat > src/presentation/context/auth/useAuthContext.tsx << 'EOF'
+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;
+};
+EOF
+
+# ════════════════════════════════════════════════════════════
+# PRESENTATION - Pages
+# ════════════════════════════════════════════════════════════
+cat > src/presentation/pages/Index.tsx << 'EOF'
+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>
+  );
+};
+EOF
+
+cat > src/presentation/pages/auth/LoginPage.tsx << 'EOF'
+import { useAuthContext } from '@/presentation/context/auth/useAuthContext';
+
+export const LoginPage = () => {
+  const { dispatch } = useAuthContext();
+
+  const handleLogin = () => {
+    // Ejemplo de login
+    dispatch({
+      type: 'LOGIN',
+      payload: {
+        user: {
+          id: '1',
+          email: 'demo@example.com',
+          nombre: 'Usuario Demo',
+          rol: 'admin',
+        },
+        token: 'demo-token-123',
+      },
+    });
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-background">
+      <div className="w-full max-w-md p-8 space-y-6 border rounded-lg bg-card">
+        <div className="text-center">
+          <h1 className="text-3xl font-bold">Iniciar Sesión</h1>
+          <p className="text-muted-foreground mt-2">Template de autenticación</p>
+        </div>
+        
+        <button
+          onClick={handleLogin}
+          className="w-full p-3 bg-primary text-primary-foreground rounded-md hover:bg-primary/90"
+        >
+          Login Demo
+        </button>
+      </div>
+    </div>
+  );
+};
+EOF
+
+# ════════════════════════════════════════════════════════════
+# APP
+# ════════════════════════════════════════════════════════════
+cat > src/app/App.tsx << 'EOF'
+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;
+EOF
+
+# ════════════════════════════════════════════════════════════
+# MAIN
+# ════════════════════════════════════════════════════════════
+cat > src/main.tsx << 'EOF'
+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>,
+)
+EOF
+
+# ════════════════════════════════════════════════════════════
+# VITE ENV
+# ════════════════════════════════════════════════════════════
+cat > src/vite-env.d.ts << 'EOF'
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_API_URL: string
+  // Agrega más variables aquí
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}
+EOF
+
+# ════════════════════════════════════════════════════════════
+# .gitkeep files
+# ════════════════════════════════════════════════════════════
+touch src/domain/types/.gitkeep
+touch src/infrastructure/config/.gitkeep
+touch src/infrastructure/data/.gitkeep
+touch src/infrastructure/services/.gitkeep
+touch src/presentation/components/layouts/.gitkeep
+touch src/presentation/components/shared/.gitkeep
+touch src/presentation/components/tables/.gitkeep
+touch src/presentation/routes/config/.gitkeep
+touch src/presentation/routes/guards/.gitkeep
+touch src/presentation/viewmodels/hooks/.gitkeep
+touch src/presentation/assets/logos/.gitkeep
+touch src/presentation/utils/.gitkeep
+touch src/shared/hooks/.gitkeep
+touch src/shared/lib/.gitkeep
+
+echo ""
+echo "✅ ¡Todos los archivos src/ creados exitosamente!"
+echo ""
+echo "📁 Estructura creada:"
+echo "   ✅ src/app/ (App.tsx)"
+echo "   ✅ src/domain/ (entities, repositories, usecases)"
+echo "   ✅ src/infrastructure/ (api, repositories)"
+echo "   ✅ src/presentation/ (context, pages)"
+echo "   ✅ src/shared/ (types, utils, config, constants)"
+echo "   ✅ src/lib/ (utils.ts)"
+echo "   ✅ src/styles/ (index.css)"
+echo "   ✅ src/main.tsx"
+echo ""
+