create-modern-react 1.0.0 → 2.0.0

package/templates/base/src/services/api/api-helpers.ts

@@ -0,0 +1,130 @@
+import { AxiosRequestConfig, CancelToken, AxiosError } from 'axios';
+import axiosInstance from './axios-instance';
+
+type Headers = Record<string, string>;
+
+interface ApiResponse<T> {
+  data: T;
+  status: number;
+  message?: string;
+}
+
+/**
+ * POST request helper
+ */
+export async function postApi<T>(
+  path: string,
+  data?: unknown,
+  headers?: Headers,
+  cancelToken?: CancelToken,
+  config?: AxiosRequestConfig
+): Promise<ApiResponse<T>> {
+  const response = await axiosInstance.post<T>(path, data, {
+    headers,
+    cancelToken,
+    ...config,
+  });
+  return {
+    data: response.data,
+    status: response.status,
+  };
+}
+
+/**
+ * GET request helper
+ */
+export async function getApi<T>(
+  path: string,
+  headers?: Headers,
+  cancelToken?: CancelToken,
+  config?: AxiosRequestConfig
+): Promise<ApiResponse<T>> {
+  const response = await axiosInstance.get<T>(path, {
+    headers,
+    cancelToken,
+    ...config,
+  });
+  return {
+    data: response.data,
+    status: response.status,
+  };
+}
+
+/**
+ * PATCH request helper
+ */
+export async function patchApi<T>(
+  path: string,
+  data?: unknown,
+  headers?: Headers,
+  config?: AxiosRequestConfig
+): Promise<ApiResponse<T>> {
+  const response = await axiosInstance.patch<T>(path, data, {
+    headers,
+    ...config,
+  });
+  return {
+    data: response.data,
+    status: response.status,
+  };
+}
+
+/**
+ * PUT request helper
+ */
+export async function putApi<T>(
+  path: string,
+  data?: unknown,
+  headers?: Headers,
+  config?: AxiosRequestConfig
+): Promise<ApiResponse<T>> {
+  const response = await axiosInstance.put<T>(path, data, {
+    headers,
+    ...config,
+  });
+  return {
+    data: response.data,
+    status: response.status,
+  };
+}
+
+/**
+ * DELETE request helper
+ */
+export async function deleteApi<T>(
+  path: string,
+  data?: unknown,
+  headers?: Headers,
+  cancelToken?: CancelToken,
+  config?: AxiosRequestConfig
+): Promise<ApiResponse<T>> {
+  const response = await axiosInstance.delete<T>(path, {
+    headers,
+    data,
+    cancelToken,
+    ...config,
+  });
+  return {
+    data: response.data,
+    status: response.status,
+  };
+}
+
+/**
+ * Error handler for Redux async thunks
+ * Extracts error message and returns it via rejectWithValue
+ */
+export function handleApiError(
+  error: unknown,
+  rejectWithValue: (value: string) => unknown
+) {
+  if (error instanceof AxiosError) {
+    const message =
+      error.response?.data?.message ||
+      error.response?.data?.error ||
+      error.message ||
+      'An unexpected error occurred';
+    return rejectWithValue(message);
+  }
+  return rejectWithValue('An unexpected error occurred');
+}

package/templates/base/src/services/api/axios-instance.ts

@@ -0,0 +1,77 @@
+import axios, { AxiosError, InternalAxiosRequestConfig } from 'axios';
+
+const BASE_URL = import.meta.env.VITE_API_URL || 'http://localhost:8000/api';
+
+/**
+ * Configured Axios instance with interceptors
+ * - Automatically adds auth token from localStorage
+ * - Handles 401 errors (token refresh/logout)
+ * - Supports request cancellation
+ */
+export const axiosInstance = axios.create({
+  baseURL: BASE_URL,
+  timeout: 30000,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+// Request interceptor - Add auth token
+axiosInstance.interceptors.request.use(
+  (config: InternalAxiosRequestConfig) => {
+    const token = localStorage.getItem('accessToken');
+    if (token && config.headers) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+    return config;
+  },
+  (error: AxiosError) => {
+    return Promise.reject(error);
+  }
+);
+
+// Response interceptor - Handle errors
+axiosInstance.interceptors.response.use(
+  (response) => response,
+  async (error: AxiosError) => {
+    const originalRequest = error.config as InternalAxiosRequestConfig & {
+      _retry?: boolean;
+    };
+
+    // Handle 401 Unauthorized
+    if (error.response?.status === 401 && !originalRequest._retry) {
+      originalRequest._retry = true;
+
+      // Option 1: Try to refresh token
+      const refreshToken = localStorage.getItem('refreshToken');
+      if (refreshToken) {
+        try {
+          const response = await axios.post(`${BASE_URL}/auth/refresh`, {
+            refreshToken,
+          });
+
+          const { accessToken } = response.data;
+          localStorage.setItem('accessToken', accessToken);
+
+          if (originalRequest.headers) {
+            originalRequest.headers.Authorization = `Bearer ${accessToken}`;
+          }
+          return axiosInstance(originalRequest);
+        } catch {
+          // Refresh failed - clear tokens and redirect
+          localStorage.removeItem('accessToken');
+          localStorage.removeItem('refreshToken');
+          window.location.href = '/login';
+        }
+      } else {
+        // No refresh token - redirect to login
+        localStorage.removeItem('accessToken');
+        window.location.href = '/login';
+      }
+    }
+
+    return Promise.reject(error);
+  }
+);
+
+export default axiosInstance;

package/templates/base/src/services/api/index.ts

@@ -0,0 +1,9 @@
+export { axiosInstance, default as axios } from './axios-instance';
+export {
+  getApi,
+  postApi,
+  patchApi,
+  putApi,
+  deleteApi,
+  handleApiError,
+} from './api-helpers';

package/templates/base/src/services/index.ts

@@ -0,0 +1,2 @@
+export * from './api';
+export { Alertify, default as alertify } from './alertify-services';

package/templates/base/src/types/index.ts

@@ -0,0 +1,55 @@
+/**
+ * Common TypeScript type definitions
+ * Add your application-wide types here
+ */
+
+// API Response types
+export interface ApiResponse<T> {
+  data: T;
+  status: number;
+  message?: string;
+}
+
+export interface PaginatedResponse<T> {
+  data: T[];
+  total: number;
+  page: number;
+  pageSize: number;
+  totalPages: number;
+}
+
+// Error types
+export interface ApiError {
+  message: string;
+  code?: string;
+  details?: Record<string, unknown>;
+}
+
+// User types (example)
+export interface User {
+  id: string;
+  email: string;
+  name: string;
+  avatar?: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+// Auth types
+export interface AuthTokens {
+  accessToken: string;
+  refreshToken: string;
+}
+
+// Utility types
+export type Nullable<T> = T | null;
+export type Optional<T> = T | undefined;
+export type ValueOf<T> = T[keyof T];
+
+// Make all properties optional recursively
+export type DeepPartial<T> = {
+  [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
+};
+
+// Make specific keys required
+export type RequireKeys<T, K extends keyof T> = T & Required<Pick<T, K>>;

package/templates/base/src/vite-env.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="vite/client" />
+
+// SVG as React Component
+declare module '*.svg?react' {
+  import * as React from 'react';
+  const ReactComponent: React.FunctionComponent<
+    React.SVGProps<SVGSVGElement> & { title?: string }
+  >;
+  export default ReactComponent;
+}
+
+declare module '*.svg' {
+  import * as React from 'react';
+  export const ReactComponent: React.FunctionComponent<
+    React.SVGProps<SVGSVGElement> & { title?: string }
+  >;
+  const src: string;
+  export default src;
+}
+
+// Environment variables
+interface ImportMetaEnv {
+  readonly VITE_API_URL: string;
+  readonly VITE_APP_NAME: string;
+  readonly VITE_APP_VERSION: string;
+  readonly VITE_ENABLE_DEVTOOLS: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

package/templates/base/tailwind.config.js

@@ -0,0 +1,77 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: ['class'],
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    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)',
+      },
+      fontFamily: {
+        sans: [
+          'Inter',
+          'system-ui',
+          '-apple-system',
+          'BlinkMacSystemFont',
+          'Segoe UI',
+          'Roboto',
+          'Helvetica Neue',
+          'Arial',
+          'sans-serif',
+        ],
+      },
+      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: [],
+};

package/templates/base/tsconfig.json

@@ -9,8 +9,8 @@
     /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
     "isolatedModules": true,
+    "moduleDetection": "force",
     "noEmit": true,
     "jsx": "react-jsx",
 
@@ -19,11 +19,12 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
+    "forceConsistentCasingInFileNames": true,
 
-    /* Path mapping */
+    /* Path aliases */
     "baseUrl": ".",
     "paths": {
-      "~/*": ["src/*"]
+      "~/*": ["./src/*"]
     }
   },
   "include": ["src"],

package/templates/base/tsconfig.node.json

@@ -0,0 +1,22 @@
+{
+  "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"]
+}

package/templates/base/vite.config.ts

@@ -1,12 +1,73 @@
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react-swc';
+import svgr from 'vite-plugin-svgr';
+import compression from 'vite-plugin-compression';
+import path from 'path';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react(),
+    // Import SVGs as React components
+    // Usage: import { ReactComponent as Logo } from './logo.svg'
+    // Or: import Logo from './logo.svg?react'
+    svgr({
+      svgrOptions: {
+        // SVGR options
+        icon: true, // Replace width/height with 1em to make SVG scale with font-size
+        svgo: true, // Optimize SVGs
+        svgoConfig: {
+          plugins: [
+            {
+              name: 'preset-default',
+              params: {
+                overrides: {
+                  removeViewBox: false, // Keep viewBox for proper scaling
+                },
+              },
+            },
+          ],
+        },
+      },
+      include: '**/*.svg',
+    }),
+    // Gzip compression for production builds
+    // Files larger than 1KB will be compressed
+    compression({
+      algorithm: 'gzip',
+      ext: '.gz',
+      threshold: 1024, // Only compress files larger than 1KB
+      deleteOriginFile: false, // Keep original files
+      verbose: true, // Log compression results
+      filter: /\.(js|css|html|json|svg)$/i, // File types to compress
+    }),
+  ],
   resolve: {
     alias: {
-      "~": "/src",
+      '~': path.resolve(__dirname, './src'),
     },
   },
+  server: {
+    port: 3000,
+    open: true,
+    host: true,
+  },
+  build: {
+    minify: 'esbuild',
+    target: 'esnext',
+    sourcemap: false,
+    // Chunk splitting for better caching
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          vendor: ['react', 'react-dom'],
+          router: ['wouter'],
+        },
+      },
+    },
+  },
+  esbuild: {
+    // Remove console.log and debugger in production
+    drop: process.env.NODE_ENV === 'production' ? ['console', 'debugger'] : [],
+  },
 });

package/templates/optional/antd/config-provider.tsx

@@ -0,0 +1,33 @@
+import { ConfigProvider, App as AntdApp, theme as antdThemeAlgorithm } from 'antd';
+import { useTheme } from '~/providers/theme-provider';
+import { antdTheme, antdDarkTheme } from './theme';
+
+interface AntdConfigProviderProps {
+  children: React.ReactNode;
+}
+
+/**
+ * Ant Design ConfigProvider wrapper
+ * Provides theme configuration and integrates with the app's theme system
+ *
+ * Uses the AntdApp wrapper which provides:
+ * - Static methods for message, notification, modal
+ * - Consistent styling context
+ */
+export function AntdConfigProvider({ children }: AntdConfigProviderProps) {
+  const { resolvedTheme } = useTheme();
+  const isDark = resolvedTheme === 'dark';
+
+  return (
+    <ConfigProvider
+      theme={{
+        ...(isDark ? antdDarkTheme : antdTheme),
+        algorithm: isDark
+          ? antdThemeAlgorithm.darkAlgorithm
+          : antdThemeAlgorithm.defaultAlgorithm,
+      }}
+    >
+      <AntdApp>{children}</AntdApp>
+    </ConfigProvider>
+  );
+}

package/templates/optional/antd/index.ts

@@ -0,0 +1,2 @@
+export { AntdConfigProvider } from './config-provider';
+export { antdTheme, antdDarkTheme } from './theme';

package/templates/optional/antd/styles/antd-overrides.css

@@ -0,0 +1,104 @@
+/**
+ * Ant Design style overrides
+ * Use this file to customize Ant Design components with CSS
+ * Prefer using the theme config when possible
+ */
+
+/* Make Ant Design work better with Tailwind's reset */
+.ant-btn {
+  font-weight: 500;
+}
+
+/* Improve form spacing */
+.ant-form-item {
+  margin-bottom: 16px;
+}
+
+.ant-form-item:last-child {
+  margin-bottom: 0;
+}
+
+/* Better table styling */
+.ant-table {
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.ant-table-thead > tr > th {
+  font-weight: 600;
+}
+
+/* Card improvements */
+.ant-card {
+  border-radius: 8px;
+}
+
+.ant-card-head {
+  min-height: 48px;
+}
+
+/* Modal improvements */
+.ant-modal-content {
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.ant-modal-header {
+  border-bottom: 1px solid var(--ant-color-border-secondary);
+}
+
+.ant-modal-footer {
+  border-top: 1px solid var(--ant-color-border-secondary);
+}
+
+/* Dropdown improvements */
+.ant-dropdown-menu {
+  border-radius: 8px;
+  padding: 4px;
+}
+
+.ant-dropdown-menu-item {
+  border-radius: 4px;
+}
+
+/* Select improvements */
+.ant-select-dropdown {
+  border-radius: 8px;
+  padding: 4px;
+}
+
+.ant-select-item {
+  border-radius: 4px;
+}
+
+/* Date picker improvements */
+.ant-picker-dropdown {
+  border-radius: 8px;
+}
+
+/* Message improvements */
+.ant-message .ant-message-notice-content {
+  border-radius: 8px;
+}
+
+/* Notification improvements */
+.ant-notification-notice {
+  border-radius: 8px;
+}
+
+/* Tag improvements */
+.ant-tag {
+  border-radius: 4px;
+}
+
+/* Skeleton improvements for dark mode */
+.dark .ant-skeleton-content .ant-skeleton-title,
+.dark .ant-skeleton-content .ant-skeleton-paragraph > li {
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0.06) 25%,
+    rgba(255, 255, 255, 0.12) 37%,
+    rgba(255, 255, 255, 0.06) 63%
+  );
+  background-size: 400% 100%;
+}