create-react-zr-architecture 1.0.0

package/template/src/presentation/pages/auth/LoginPage.tsx

@@ -0,0 +1,39 @@
+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>
+  );
+};

package/template/src/shared/config/env.ts

@@ -0,0 +1,9 @@
+// ════════════════════════════════════════════════════════════
+// 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;

package/template/src/shared/constants/index.ts

@@ -0,0 +1,29 @@
+// ════════════════════════════════════════════════════════════
+// 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;

package/template/src/shared/types/index.ts

@@ -0,0 +1,42 @@
+// ════════════════════════════════════════════════════════════
+// 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;
+}

package/template/src/shared/utils/format.ts

@@ -0,0 +1,30 @@
+// ════════════════════════════════════════════════════════════
+// 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) + '...';
+};

package/template/src/shared/utils/validation.ts

@@ -0,0 +1,22 @@
+// ════════════════════════════════════════════════════════════
+// 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;
+  }
+};

package/template/src/styles/index.css

@@ -0,0 +1,59 @@
+@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;
+  }
+}

package/template/src/vite-env.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_API_URL: string
+  // Agrega más variables aquí
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}