create-modern-react 1.0.0 → 2.0.0

package/templates/base/src/index.css

@@ -1,70 +1,83 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
+@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;
+  }
 
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
+  .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%;
+  }
 }
 
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  color: inherit;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings:
+      'rlig' 1,
+      'calt' 1;
+  }
 }
 
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
+/* Custom scrollbar */
+@layer utilities {
+  .scrollbar-thin {
+    scrollbar-width: thin;
+  }
+  .scrollbar-thin::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  .scrollbar-thin::-webkit-scrollbar-track {
+    background: transparent;
   }
-  a:hover {
-    color: #747bff;
+  .scrollbar-thin::-webkit-scrollbar-thumb {
+    background-color: hsl(var(--muted-foreground) / 0.3);
+    border-radius: 3px;
   }
-  button {
-    background-color: #f9f9f9;
+  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
+    background-color: hsl(var(--muted-foreground) / 0.5);
   }
 }

package/templates/base/src/lib/utils.ts

@@ -0,0 +1,14 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+/**
+ * Combines class names using clsx and tailwind-merge
+ * This ensures Tailwind classes are properly merged without conflicts
+ *
+ * @example
+ * cn('px-2 py-1', condition && 'bg-blue-500', 'px-4')
+ * // Returns 'py-1 bg-blue-500 px-4' (px-4 overrides px-2)
+ */
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/templates/base/src/main.tsx

@@ -1,10 +1,10 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import App from "./App.tsx";
-import "./index.css";
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './index.css';
 
-ReactDOM.createRoot(document.getElementById("root")!).render(
+ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
+  </React.StrictMode>
 );

package/templates/base/src/providers/index.tsx

@@ -0,0 +1,27 @@
+import { type ReactNode } from 'react';
+import { ThemeProvider } from './theme-provider';
+import { RootLayout } from '~/components/layout';
+import { ErrorBoundary } from '~/components/layout';
+
+interface ProvidersProps {
+  children: ReactNode;
+}
+
+/**
+ * Application providers composition
+ * Wraps the app with all necessary context providers
+ *
+ * Order matters! Providers at the top are available to all children.
+ * Add new providers here when needed (e.g., Redux, Auth, etc.)
+ */
+export function Providers({ children }: ProvidersProps) {
+  return (
+    <ErrorBoundary>
+      <ThemeProvider defaultTheme="system" storageKey="app-theme">
+        <RootLayout>{children}</RootLayout>
+      </ThemeProvider>
+    </ErrorBoundary>
+  );
+}
+
+export { ThemeProvider, useTheme } from './theme-provider';

package/templates/base/src/providers/theme-provider.tsx

@@ -0,0 +1,92 @@
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  type ReactNode,
+} from 'react';
+
+type Theme = 'dark' | 'light' | 'system';
+
+interface ThemeContextType {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+  resolvedTheme: 'dark' | 'light';
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+interface ThemeProviderProps {
+  children: ReactNode;
+  defaultTheme?: Theme;
+  storageKey?: string;
+}
+
+export function ThemeProvider({
+  children,
+  defaultTheme = 'system',
+  storageKey = 'app-theme',
+}: ThemeProviderProps) {
+  const [theme, setThemeState] = useState<Theme>(() => {
+    if (typeof window !== 'undefined') {
+      return (localStorage.getItem(storageKey) as Theme) || defaultTheme;
+    }
+    return defaultTheme;
+  });
+
+  const [resolvedTheme, setResolvedTheme] = useState<'dark' | 'light'>('light');
+
+  useEffect(() => {
+    const root = window.document.documentElement;
+    root.classList.remove('light', 'dark');
+
+    let effectiveTheme: 'dark' | 'light';
+
+    if (theme === 'system') {
+      effectiveTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
+        ? 'dark'
+        : 'light';
+    } else {
+      effectiveTheme = theme;
+    }
+
+    root.classList.add(effectiveTheme);
+    setResolvedTheme(effectiveTheme);
+  }, [theme]);
+
+  // Listen for system theme changes
+  useEffect(() => {
+    if (theme !== 'system') return;
+
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const handleChange = (e: MediaQueryListEvent) => {
+      const root = window.document.documentElement;
+      root.classList.remove('light', 'dark');
+      const newTheme = e.matches ? 'dark' : 'light';
+      root.classList.add(newTheme);
+      setResolvedTheme(newTheme);
+    };
+
+    mediaQuery.addEventListener('change', handleChange);
+    return () => mediaQuery.removeEventListener('change', handleChange);
+  }, [theme]);
+
+  const setTheme = (newTheme: Theme) => {
+    localStorage.setItem(storageKey, newTheme);
+    setThemeState(newTheme);
+  };
+
+  return (
+    <ThemeContext.Provider value={{ theme, setTheme, resolvedTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme() {
+  const context = useContext(ThemeContext);
+  if (context === undefined) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+}

package/templates/base/src/routes/index.tsx

@@ -0,0 +1,40 @@
+import { Suspense } from 'react';
+import { Route, Switch } from 'wouter';
+import { routes } from './routes';
+import { Skeleton } from '~/components/ui';
+
+/**
+ * Loading fallback component
+ */
+function RouteLoading() {
+  return (
+    <div className="flex min-h-screen items-center justify-center">
+      <div className="flex flex-col items-center gap-4">
+        <Skeleton className="h-12 w-12 rounded-full" />
+        <Skeleton className="h-4 w-32" />
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Application router using Wouter
+ * - Lightweight (2KB) alternative to React Router
+ * - Supports lazy loading with React.Suspense
+ * - Simple API with <Route> and <Switch>
+ */
+export function AppRouter() {
+  return (
+    <Suspense fallback={<RouteLoading />}>
+      <Switch>
+        {routes.map(({ path, component: Component }) => (
+          <Route key={path} path={path}>
+            <Component />
+          </Route>
+        ))}
+      </Switch>
+    </Suspense>
+  );
+}
+
+export { routes } from './routes';

package/templates/base/src/routes/routes.ts

@@ -0,0 +1,36 @@
+import { lazy } from 'react';
+
+// Lazy-loaded screens
+const Home = lazy(() => import('~/screens/home'));
+const NotFound = lazy(() => import('~/screens/not-found'));
+
+export interface RouteConfig {
+  path: string;
+  component: React.LazyExoticComponent<React.ComponentType>;
+  title: string;
+  isPrivate?: boolean;
+}
+
+/**
+ * Application routes configuration
+ * Add new routes here - they'll automatically be registered in the router
+ */
+export const routes: RouteConfig[] = [
+  {
+    path: '/',
+    component: Home,
+    title: 'Home',
+  },
+  {
+    path: '*',
+    component: NotFound,
+    title: 'Not Found',
+  },
+];
+
+/**
+ * Get route by path
+ */
+export function getRouteByPath(path: string): RouteConfig | undefined {
+  return routes.find((route) => route.path === path);
+}

package/templates/base/src/screens/home/index.tsx

@@ -0,0 +1,132 @@
+import { useState } from 'react';
+import { Moon, Sun, Github, Zap } from 'lucide-react';
+import { Button, Card, CardContent, CardHeader, CardTitle } from '~/components/ui';
+import { useTheme } from '~/providers';
+
+export default function Home() {
+  const { theme, setTheme, resolvedTheme } = useTheme();
+  const [count, setCount] = useState(0);
+
+  const toggleTheme = () => {
+    setTheme(resolvedTheme === 'dark' ? 'light' : 'dark');
+  };
+
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center p-8">
+      <div className="w-full max-w-2xl space-y-8">
+        {/* Header */}
+        <div className="text-center">
+          <div className="mb-4 flex justify-center">
+            <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-primary text-primary-foreground">
+              <Zap className="h-8 w-8" />
+            </div>
+          </div>
+          <h1 className="text-4xl font-bold tracking-tight">
+            create-modern-react
+          </h1>
+          <p className="mt-2 text-muted-foreground">
+            Production-ready React + TypeScript + Tailwind in seconds
+          </p>
+        </div>
+
+        {/* Counter Card */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center justify-between">
+              <span>Interactive Counter</span>
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={toggleTheme}
+                aria-label="Toggle theme"
+              >
+                {resolvedTheme === 'dark' ? (
+                  <Sun className="h-5 w-5" />
+                ) : (
+                  <Moon className="h-5 w-5" />
+                )}
+              </Button>
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="flex items-center justify-center gap-4">
+              <Button
+                variant="outline"
+                size="lg"
+                onClick={() => setCount((c) => c - 1)}
+              >
+                -
+              </Button>
+              <span className="min-w-[4rem] text-center text-4xl font-bold tabular-nums">
+                {count}
+              </span>
+              <Button
+                variant="outline"
+                size="lg"
+                onClick={() => setCount((c) => c + 1)}
+              >
+                +
+              </Button>
+            </div>
+            <p className="text-center text-sm text-muted-foreground">
+              Click the buttons to update the count
+            </p>
+          </CardContent>
+        </Card>
+
+        {/* Features */}
+        <div className="grid gap-4 sm:grid-cols-2">
+          <FeatureCard
+            title="Vite + SWC"
+            description="Lightning fast builds with Hot Module Replacement"
+          />
+          <FeatureCard
+            title="TypeScript"
+            description="Full type safety with strict mode enabled"
+          />
+          <FeatureCard
+            title="Tailwind CSS"
+            description="Utility-first CSS with dark mode support"
+          />
+          <FeatureCard
+            title="Shadcn/ui"
+            description="Beautiful, accessible components"
+          />
+        </div>
+
+        {/* Footer */}
+        <div className="flex justify-center">
+          <Button variant="outline" asChild>
+            <a
+              href="https://github.com"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <Github className="mr-2 h-4 w-4" />
+              View on GitHub
+            </a>
+          </Button>
+        </div>
+
+        <p className="text-center text-xs text-muted-foreground">
+          Current theme: {theme} (resolved: {resolvedTheme})
+        </p>
+      </div>
+    </div>
+  );
+}
+
+function FeatureCard({
+  title,
+  description,
+}: {
+  title: string;
+  description: string;
+}) {
+  return (
+    <div className="rounded-lg border bg-card p-4 text-card-foreground">
+      <h3 className="font-semibold">{title}</h3>
+      <p className="mt-1 text-sm text-muted-foreground">{description}</p>
+    </div>
+  );
+}

package/templates/base/src/screens/not-found/index.tsx

@@ -0,0 +1,29 @@
+import { Link } from 'wouter';
+import { Home, ArrowLeft } from 'lucide-react';
+import { Button } from '~/components/ui';
+
+export default function NotFound() {
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center p-8">
+      <div className="text-center">
+        <h1 className="text-9xl font-bold text-muted-foreground/20">404</h1>
+        <h2 className="mt-4 text-2xl font-semibold">Page not found</h2>
+        <p className="mt-2 text-muted-foreground">
+          Sorry, we couldn't find the page you're looking for.
+        </p>
+        <div className="mt-8 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
+          <Button asChild>
+            <Link href="/">
+              <Home className="mr-2 h-4 w-4" />
+              Go home
+            </Link>
+          </Button>
+          <Button variant="outline" onClick={() => window.history.back()}>
+            <ArrowLeft className="mr-2 h-4 w-4" />
+            Go back
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/base/src/services/alertify-services.ts

@@ -0,0 +1,133 @@
+import toast from 'react-hot-toast';
+
+type ToastPosition =
+  | 'top-left'
+  | 'top-center'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-center'
+  | 'bottom-right';
+
+// Track the current toast ID to dismiss before showing new one
+let currentToastId: string | undefined;
+
+/**
+ * Alertify Service - Wrapper around react-hot-toast
+ * Auto-dismisses previous toast before showing new one
+ *
+ * @example
+ * Alertify.success('User created successfully');
+ * Alertify.error('Failed to save changes');
+ * Alertify.info('Please wait...');
+ */
+export const Alertify = {
+  /**
+   * Show a success toast
+   */
+  success(message: string, position: ToastPosition = 'bottom-right') {
+    if (currentToastId) {
+      toast.dismiss(currentToastId);
+    }
+    currentToastId = toast.success(message, { position });
+    return currentToastId;
+  },
+
+  /**
+   * Show an error toast
+   */
+  error(message: string, position: ToastPosition = 'bottom-right') {
+    if (currentToastId) {
+      toast.dismiss(currentToastId);
+    }
+    currentToastId = toast.error(message, { position });
+    return currentToastId;
+  },
+
+  /**
+   * Show an info toast (default style)
+   */
+  info(message: string, position: ToastPosition = 'bottom-right') {
+    if (currentToastId) {
+      toast.dismiss(currentToastId);
+    }
+    currentToastId = toast(message, {
+      position,
+      icon: 'ℹ️',
+    });
+    return currentToastId;
+  },
+
+  /**
+   * Show a loading toast (returns a function to update/dismiss it)
+   */
+  loading(message: string, position: ToastPosition = 'bottom-right') {
+    if (currentToastId) {
+      toast.dismiss(currentToastId);
+    }
+    currentToastId = toast.loading(message, { position });
+    return {
+      id: currentToastId,
+      success: (successMessage: string) => {
+        toast.success(successMessage, { id: currentToastId });
+      },
+      error: (errorMessage: string) => {
+        toast.error(errorMessage, { id: currentToastId });
+      },
+      dismiss: () => {
+        toast.dismiss(currentToastId);
+      },
+    };
+  },
+
+  /**
+   * Show a custom toast with action button
+   */
+  withAction(
+    message: string,
+    actionText: string,
+    onAction: () => void,
+    position: ToastPosition = 'bottom-right'
+  ) {
+    if (currentToastId) {
+      toast.dismiss(currentToastId);
+    }
+    currentToastId = toast(
+      (t) => (
+        <div className="flex items-center gap-2">
+          <span>{message}</span>
+          <button
+            onClick={() => {
+              onAction();
+              toast.dismiss(t.id);
+            }}
+            className="rounded bg-primary px-2 py-1 text-xs font-medium text-primary-foreground hover:bg-primary/90"
+          >
+            {actionText}
+          </button>
+        </div>
+      ),
+      { position, duration: 5000 }
+    );
+    return currentToastId;
+  },
+
+  /**
+   * Dismiss all toasts
+   */
+  dismissAll() {
+    toast.dismiss();
+    currentToastId = undefined;
+  },
+
+  /**
+   * Dismiss a specific toast
+   */
+  dismiss(toastId?: string) {
+    toast.dismiss(toastId || currentToastId);
+    if (!toastId || toastId === currentToastId) {
+      currentToastId = undefined;
+    }
+  },
+};
+
+export default Alertify;