create-modern-react 1.0.0 → 2.0.0

package/templates/base/package.json

@@ -4,25 +4,44 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
+    "dev": "vite --open --port 3000",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "lint:fix": "eslint . --ext ts,tsx --fix",
+    "format": "prettier --write \"src/**/*.{ts,tsx,css,json}\"",
+    "format:check": "prettier --check \"src/**/*.{ts,tsx,css,json}\""
   },
   "dependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "wouter": "^3.3.0",
+    "axios": "^1.7.0",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^2.5.0",
+    "class-variance-authority": "^0.7.0",
+    "lucide-react": "^0.400.0",
+    "react-hot-toast": "^2.4.1",
+    "@radix-ui/react-slot": "^1.1.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.66",
-    "@types/react-dom": "^18.2.22",
-    "@typescript-eslint/eslint-plugin": "^7.2.0",
-    "@typescript-eslint/parser": "^7.2.0",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^7.15.0",
+    "@typescript-eslint/parser": "^7.15.0",
+    "@vitejs/plugin-react-swc": "^3.7.0",
+    "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.6",
-    "typescript": "^5.2.2",
-    "vite": "^5.2.0"
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.7",
+    "eslint-plugin-unused-imports": "^3.2.0",
+    "postcss": "^8.4.39",
+    "prettier": "^3.3.0",
+    "prettier-plugin-tailwindcss": "^0.6.5",
+    "tailwindcss": "^3.4.4",
+    "typescript": "^5.5.0",
+    "vite": "^5.4.0",
+    "vite-plugin-svgr": "^4.2.0",
+    "vite-plugin-compression": "^0.5.1"
   }
 }

package/templates/base/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/templates/base/src/App.tsx

@@ -1,24 +1,11 @@
-import { useState } from "react";
-import "./App.css";
+import { Providers } from '~/providers';
+import { AppRouter } from '~/routes';
 
 function App() {
-  const [count, setCount] = useState(0);
-
   return (
-    <div className="App">
-      <div>
-        <h1>Modern React App</h1>
-        <div className="card">
-          <button onClick={() => setCount((count) => count + 1)}>
-            count is {count}
-          </button>
-          <p>
-            Edit <code>src/App.tsx</code> and save to test HMR
-          </p>
-        </div>
-        <p className="read-the-docs">Click on the React logo to learn more</p>
-      </div>
-    </div>
+    <Providers>
+      <AppRouter />
+    </Providers>
   );
 }
 

package/templates/base/src/components/layout/error-boundary.tsx

@@ -0,0 +1,60 @@
+import { Component, type ErrorInfo, type ReactNode } from 'react';
+import { AlertTriangle, RefreshCw } from 'lucide-react';
+import { Button } from '~/components/ui';
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  public state: State = {
+    hasError: false,
+    error: null,
+  };
+
+  public static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error('ErrorBoundary caught an error:', error, errorInfo);
+  }
+
+  private handleRetry = () => {
+    this.setState({ hasError: false, error: null });
+  };
+
+  public render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      return (
+        <div className="flex min-h-[400px] flex-col items-center justify-center gap-4 p-8">
+          <div className="flex h-16 w-16 items-center justify-center rounded-full bg-destructive/10">
+            <AlertTriangle className="h-8 w-8 text-destructive" />
+          </div>
+          <div className="text-center">
+            <h2 className="text-xl font-semibold">Something went wrong</h2>
+            <p className="mt-2 text-sm text-muted-foreground">
+              {this.state.error?.message || 'An unexpected error occurred'}
+            </p>
+          </div>
+          <Button onClick={this.handleRetry} variant="outline" className="mt-4">
+            <RefreshCw className="mr-2 h-4 w-4" />
+            Try again
+          </Button>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

package/templates/base/src/components/layout/index.ts

@@ -0,0 +1,2 @@
+export { RootLayout } from './root-layout';
+export { ErrorBoundary } from './error-boundary';

package/templates/base/src/components/layout/root-layout.tsx

@@ -0,0 +1,36 @@
+import { Toaster } from 'react-hot-toast';
+
+interface RootLayoutProps {
+  children: React.ReactNode;
+}
+
+export function RootLayout({ children }: RootLayoutProps) {
+  return (
+    <div className="relative min-h-screen bg-background font-sans antialiased">
+      <main className="relative flex min-h-screen flex-col">{children}</main>
+      <Toaster
+        position="bottom-right"
+        toastOptions={{
+          duration: 4000,
+          style: {
+            background: 'hsl(var(--background))',
+            color: 'hsl(var(--foreground))',
+            border: '1px solid hsl(var(--border))',
+          },
+          success: {
+            iconTheme: {
+              primary: 'hsl(142.1 76.2% 36.3%)',
+              secondary: 'white',
+            },
+          },
+          error: {
+            iconTheme: {
+              primary: 'hsl(var(--destructive))',
+              secondary: 'white',
+            },
+          },
+        }}
+      />
+    </div>
+  );
+}

package/templates/base/src/components/ui/button.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '~/lib/utils';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };

package/templates/base/src/components/ui/card.tsx

@@ -0,0 +1,85 @@
+import * as React from 'react';
+import { cn } from '~/lib/utils';
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      'rounded-lg border bg-card text-card-foreground shadow-sm',
+      className
+    )}
+    {...props}
+  />
+));
+Card.displayName = 'Card';
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('flex flex-col space-y-1.5 p-6', className)}
+    {...props}
+  />
+));
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      'text-2xl font-semibold leading-none tracking-tight',
+      className
+    )}
+    {...props}
+  />
+));
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+));
+CardContent.displayName = 'CardContent';
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('flex items-center p-6 pt-0', className)}
+    {...props}
+  />
+));
+CardFooter.displayName = 'CardFooter';
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};

package/templates/base/src/components/ui/index.ts

@@ -0,0 +1,12 @@
+export { Button, buttonVariants, type ButtonProps } from './button';
+export { Input, type InputProps } from './input';
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+} from './card';
+export { Skeleton } from './skeleton';
+export { Separator } from './separator';

package/templates/base/src/components/ui/input.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { cn } from '~/lib/utils';
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Input.displayName = 'Input';
+
+export { Input };

package/templates/base/src/components/ui/separator.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { cn } from '~/lib/utils';
+
+interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+  orientation?: 'horizontal' | 'vertical';
+  decorative?: boolean;
+}
+
+const Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(
+  (
+    { className, orientation = 'horizontal', decorative = true, ...props },
+    ref
+  ) => (
+    <div
+      ref={ref}
+      role={decorative ? 'none' : 'separator'}
+      aria-orientation={decorative ? undefined : orientation}
+      className={cn(
+        'shrink-0 bg-border',
+        orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+Separator.displayName = 'Separator';
+
+export { Separator };

package/templates/base/src/components/ui/skeleton.tsx

@@ -0,0 +1,15 @@
+import { cn } from '~/lib/utils';
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn('animate-pulse rounded-md bg-muted', className)}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };

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

@@ -0,0 +1,3 @@
+export { useDebounce } from './use-debounce';
+export { useLoader } from './use-loader';
+export { useCancelToken } from './use-cancel-token';

package/templates/base/src/hooks/use-cancel-token.ts

@@ -0,0 +1,63 @@
+import { useRef, useCallback, useEffect } from 'react';
+import axios, { CancelTokenSource } from 'axios';
+
+/**
+ * Hook for managing Axios request cancellation
+ * Automatically cancels pending requests on component unmount
+ *
+ * @example
+ * const { cancelToken, cancel, reset } = useCancelToken();
+ *
+ * useEffect(() => {
+ *   getApi('/users', {}, cancelToken)
+ *     .then(setUsers)
+ *     .catch(err => {
+ *       if (!axios.isCancel(err)) {
+ *         console.error(err);
+ *       }
+ *     });
+ *
+ *   return () => cancel(); // Cancel on unmount
+ * }, []);
+ */
+export function useCancelToken() {
+  const sourceRef = useRef<CancelTokenSource | null>(null);
+
+  // Create a new cancel token
+  const getToken = useCallback(() => {
+    // Cancel previous request if exists
+    if (sourceRef.current) {
+      sourceRef.current.cancel('Operation cancelled due to new request');
+    }
+
+    sourceRef.current = axios.CancelToken.source();
+    return sourceRef.current.token;
+  }, []);
+
+  // Cancel the current request
+  const cancel = useCallback((message?: string) => {
+    if (sourceRef.current) {
+      sourceRef.current.cancel(message || 'Operation cancelled by user');
+      sourceRef.current = null;
+    }
+  }, []);
+
+  // Reset the cancel token
+  const reset = useCallback(() => {
+    sourceRef.current = null;
+  }, []);
+
+  // Cancel on unmount
+  useEffect(() => {
+    return () => {
+      cancel('Component unmounted');
+    };
+  }, [cancel]);
+
+  return {
+    cancelToken: getToken(),
+    cancel,
+    reset,
+    isCancel: axios.isCancel,
+  };
+}

package/templates/base/src/hooks/use-debounce.ts

@@ -0,0 +1,29 @@
+import { useState, useEffect } from 'react';
+
+/**
+ * Debounces a value by the specified delay
+ *
+ * @example
+ * const [searchTerm, setSearchTerm] = useState('');
+ * const debouncedSearch = useDebounce(searchTerm, 500);
+ *
+ * useEffect(() => {
+ *   // This only runs 500ms after user stops typing
+ *   fetchSearchResults(debouncedSearch);
+ * }, [debouncedSearch]);
+ */
+export function useDebounce<T>(value: T, delay: number = 500): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}

package/templates/base/src/hooks/use-loader.ts

@@ -0,0 +1,39 @@
+import { useState } from 'react';
+
+/**
+ * Hook for managing loading states
+ * Returns a tuple of [isLoading, startLoader, endLoader]
+ *
+ * @param initialState - Initial loading state (default: false)
+ *
+ * @example
+ * const [isLoading, startLoader, endLoader] = useLoader(false);
+ *
+ * const fetchData = async () => {
+ *   startLoader();
+ *   try {
+ *     const data = await getApi('/users');
+ *     setUsers(data);
+ *   } finally {
+ *     endLoader();
+ *   }
+ * };
+ *
+ * return (
+ *   <div>
+ *     <button onClick={fetchData} disabled={isLoading}>
+ *       {isLoading ? 'Loading...' : 'Fetch Data'}
+ *     </button>
+ *   </div>
+ * );
+ */
+export const useLoader = (
+  initialState: boolean = false
+): [boolean, () => void, () => void] => {
+  const [loader, setLoader] = useState(initialState);
+
+  const startLoader = () => setLoader(true);
+  const endLoader = () => setLoader(false);
+
+  return [loader, startLoader, endLoader];
+};