create-modern-react 2.1.3 → 2.3.2

package/README.md

@@ -45,6 +45,7 @@
 │   ✗ No toast notifications                    ✓ react-hot-toast         │
 │   ✗ No error boundary                         ✓ Built-in                │
 │   ✗ Basic ESLint                              ✓ 25+ rules configured    │
+│   ✗ No form validation                        ✓ RHF + Zod (optional)    │
 │   ✗ No state management                       ✓ Redux (optional)        │
 │   ✗ ~2 hours setup                            ✓ 15 seconds              │
 │                                                                         │
@@ -106,6 +107,7 @@ Select during project creation:
 
 ```
 [ ] Redux Toolkit + Redux Persist ── State management with persistence
+[ ] React Hook Form + Zod ────────── Type-safe form validation
 [ ] Ant Design v5 ───────────────── Enterprise UI (replaces Shadcn/ui)
 [ ] Husky + lint-staged ─────────── Git hooks for code quality
 ```
@@ -147,6 +149,10 @@ my-app/
 │   │   └── layout/
 │   │       ├── root-layout.tsx
 │   │       └── error-boundary.tsx
+│   ├── forms/                    # (optional) React Hook Form + Zod
+│   │   ├── index.ts              # Barrel export
+│   │   ├── use-zod-form.ts       # Custom hook with onBlur validation
+│   │   └── types.ts              # Form TypeScript types
 │   ├── hooks/
 │   │   ├── use-loader.ts       # Loading state management
 │   │   ├── use-debounce.ts     # Value debouncing
@@ -242,6 +248,31 @@ const debouncedQuery = useDebounce(searchQuery, 300);
 const { cancelToken, cancel } = useCancelToken();
 ```
 
+### Type-Safe Form Validation (Optional)
+
+```tsx
+import { z } from 'zod';
+import { useZodForm } from '~/forms';
+
+const loginSchema = z.object({
+  email: z.string().email(),
+  password: z.string().min(8, 'Password must be 8+ characters'),
+});
+
+function LoginForm() {
+  const form = useZodForm({ schema: loginSchema });
+
+  return (
+    <form onSubmit={form.handleSubmit(onSubmit)}>
+      <input {...form.register('email')} />
+      {form.formState.errors.email?.message}
+    </form>
+  );
+}
+```
+
+*UI-agnostic • Works with Shadcn, Antd, or plain HTML • Validates onBlur*
+
 ### Path Aliases
 
 ```tsx

package/lib/prompts.js

@@ -94,6 +94,11 @@ async function createProject(projectName, options) {
           value: 'redux',
           checked: false
         },
+        {
+          name: 'React Hook Form + Zod (form validation)',
+          value: 'forms',
+          checked: false
+        },
         {
           name: 'Ant Design v5 (replaces Shadcn/ui)',
           value: 'antd',
@@ -153,6 +158,7 @@ async function createProject(projectName, options) {
     packageManager,
     // Optional features
     useRedux: optionalFeatures.includes('redux'),
+    useForms: optionalFeatures.includes('forms'),
     useAntd: optionalFeatures.includes('antd'),
     useHusky: optionalFeatures.includes('husky'),
     // Flags
@@ -176,6 +182,7 @@ async function createProject(projectName, options) {
   console.log(chalk.cyan('├─────────────────────────────────────────────┤'));
   console.log(chalk.cyan('│') + chalk.white(' Optional Features:                         ') + chalk.cyan('│'));
   console.log(chalk.cyan('│') + `   Redux Toolkit:  ${config.useRedux ? chalk.green('✓') : chalk.gray('✗')}                        ` + chalk.cyan('│'));
+  console.log(chalk.cyan('│') + `   RHF + Zod:      ${config.useForms ? chalk.green('✓') : chalk.gray('✗')}                        ` + chalk.cyan('│'));
   console.log(chalk.cyan('│') + `   Ant Design v5:  ${config.useAntd ? chalk.green('✓') : chalk.gray('✗')}                        ` + chalk.cyan('│'));
   console.log(chalk.cyan('│') + `   Husky hooks:    ${config.useHusky ? chalk.green('✓') : chalk.gray('✗')}                        ` + chalk.cyan('│'));
   console.log(chalk.cyan('└─────────────────────────────────────────────┘\n'));

package/lib/setup.js

@@ -38,6 +38,11 @@ async function setupProject(config) {
     await updateProvidersForRedux(projectPath, config.useAntd);
   }
 
+  if (config.useForms) {
+    console.log(chalk.gray('  Adding React Hook Form + Zod...'));
+    await copyOptionalTemplate('forms', projectPath);
+  }
+
   if (config.useHusky) {
     console.log(chalk.gray('  Adding Husky + lint-staged...'));
     await copyOptionalTemplate('husky', projectPath);
@@ -81,6 +86,13 @@ async function updatePackageJson(config) {
     dependencies['redux-persist'] = '^6.0.0';
   }
 
+  // React Hook Form + Zod dependencies
+  if (config.useForms) {
+    dependencies['react-hook-form'] = '^7.54.0';
+    dependencies['zod'] = '^3.24.0';
+    dependencies['@hookform/resolvers'] = '^3.9.0';
+  }
+
   // Ant Design dependencies (replaces Shadcn)
   if (config.useAntd) {
     dependencies['antd'] = '^5.20.0';
@@ -116,9 +128,11 @@ async function copyOptionalTemplate(templateName, projectPath) {
   );
 
   if (await fs.pathExists(optionalTemplatePath)) {
-    // For redux and antd, copy to src directory
+    // For redux, antd, and forms, copy to src directory
     if (templateName === 'redux') {
       await fs.copy(optionalTemplatePath, path.join(projectPath, 'src/redux'));
+    } else if (templateName === 'forms') {
+      await fs.copy(optionalTemplatePath, path.join(projectPath, 'src/forms'));
     } else if (templateName === 'antd') {
       await fs.copy(optionalTemplatePath, path.join(projectPath, 'src/antd'));
       // Also copy the styles file to src/styles

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-modern-react",
-  "version": "2.1.3",
+  "version": "2.3.2",
   "description": "Create production-ready React + TypeScript + Tailwind applications in seconds",
   "main": "bin/index.js",
   "bin": {

package/templates/base/.eslintrc.cjs

@@ -1,37 +1,59 @@
 module.exports = {
   root: true,
-  env: { browser: true, es2020: true },
+  env: {
+    browser: true,
+    node: true,
+    es6: true,
+  },
   extends: [
     'eslint:recommended',
     'plugin:@typescript-eslint/recommended',
-    'plugin:react-hooks/recommended',
+    'eslint-config-prettier',
   ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  ignorePatterns: ['dist', '.eslintrc.cjs', 'node_modules'],
   parser: '@typescript-eslint/parser',
-  plugins: ['react-refresh', 'unused-imports'],
+  plugins: ['@typescript-eslint', 'import'],
   rules: {
-    'react-refresh/only-export-components': [
-      'warn',
-      { allowConstantExport: true },
-    ],
-    // Unused imports
-    'unused-imports/no-unused-imports': 'error',
-    'unused-imports/no-unused-vars': [
-      'warn',
-      {
-        vars: 'all',
-        varsIgnorePattern: '^_',
-        args: 'after-used',
-        argsIgnorePattern: '^_',
-      },
-    ],
     // TypeScript
-    '@typescript-eslint/no-unused-vars': 'off', // Handled by unused-imports
-    '@typescript-eslint/no-explicit-any': 'warn',
-    '@typescript-eslint/prefer-as-const': 'error',
-    // General
-    'no-console': ['warn', { allow: ['warn', 'error'] }],
-    'prefer-const': 'error',
-    'no-var': 'error',
+    'no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': ['warn'],
+
+    // Import validation
+    'import/no-unresolved': 'error',
+    'import/named': 'error',
+
+    // Core JavaScript
+    'no-undef': ['error'],
+    'no-var': ['error'],
+    'no-await-in-loop': 'error',
+    'no-constant-binary-expression': 'error',
+    'no-duplicate-imports': 'error',
+    'no-new-native-nonconstructor': 'error',
+    'no-promise-executor-return': 'error',
+    'no-self-compare': 'error',
+    'no-template-curly-in-string': 'error',
+    'no-unmodified-loop-condition': 'error',
+    'no-unreachable-loop': 'error',
+    'no-unused-private-class-members': 'error',
+    'no-use-before-define': 'error',
+
+    // React
+    'react/prop-types': 'off',
+    'react/react-in-jsx-scope': 'off',
+
+    // Disabled
+    'no-extra-boolean-cast': 'off',
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+    'import/resolver': {
+      typescript: {},
+      node: {
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+        moduleDirectory: ['node_modules', 'src/'],
+      },
+    },
   },
 };

package/templates/base/package.json

@@ -1,7 +1,7 @@
 {
   "name": "modern-react-app",
   "private": true,
-  "version": "0.0.0",
+  "version": "1.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite --open --port 3000",
@@ -32,9 +32,10 @@
     "@vitejs/plugin-react-swc": "^3.7.0",
     "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-import-resolver-typescript": "^3.6.1",
     "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",

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

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Moon, Sun, Github, Zap, Bot } from 'lucide-react';
+import { Moon, Sun, Github, Zap, Bot, ExternalLink } from 'lucide-react';
 import { Button, Card, CardContent, CardHeader, CardTitle } from '~/components/ui';
 import { useTheme } from '~/providers';
 
@@ -16,17 +16,33 @@ export default function Home() {
       <div className="w-full max-w-2xl space-y-8">
         {/* Header */}
         <div className="text-center">
-          <div className="mb-4 flex justify-center">
+          <div className="mb-4 flex items-center justify-between">
+            <div className="w-40" />
             <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>
+            <Button variant="outline" asChild>
+              <a
+                href="https://github.com/abhay-rana/create-modern-react"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <Github className="mr-2 h-4 w-4" />
+                View CLI on GitHub
+              </a>
+            </Button>
           </div>
           <h1 className="text-4xl font-bold tracking-tight">
             create-modern-react
           </h1>
           <p className="mt-2 text-muted-foreground">
-            AI-first React + TypeScript + Tailwind in seconds
+            Production-ready React + TypeScript + Tailwind in seconds
           </p>
+          <div className="mt-4">
+            <code className="rounded-md bg-muted px-3 py-1.5 font-mono text-sm">
+              npx create-modern-react my-app
+            </code>
+          </div>
         </div>
 
         {/* Counter Card */}
@@ -107,18 +123,29 @@ export default function Home() {
           </div>
         </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>
+        {/* Projects Showcase */}
+        <div className="space-y-4">
+          <h2 className="text-center text-2xl font-bold">
+            Production Projects created using this boilerplate
+          </h2>
+          <div className="grid gap-6 sm:grid-cols-2">
+            <ProjectCard
+              category="AI/Career"
+              title="ResumeFreePro"
+              description="AI-Powered Resume Builder"
+              designStyle="Modern + Glassmorphism"
+              url="https://resumefreepro.com?utm_source=starter-template&utm_medium=landing-page&utm_campaign=create-modern-react-demo"
+              previewUrl="/screenshots/resumefreepro.png"
+            />
+            <ProjectCard
+              category="E-Pharmacy"
+              title="HealthMug"
+              description="Online Pharmacy Platform"
+              designStyle="Clean + Professional"
+              url="https://healthmug.com?utm_source=starter-template&utm_medium=landing-page&utm_campaign=create-modern-react-demo"
+              previewUrl="/screenshots/healthmug.png"
+            />
+          </div>
         </div>
 
         <p className="text-center text-xs text-muted-foreground">
@@ -143,3 +170,62 @@ function FeatureCard({
     </div>
   );
 }
+
+function ProjectCard({
+  category,
+  title,
+  description,
+  designStyle,
+  url,
+  previewUrl,
+}: {
+  category: string;
+  title: string;
+  description: string;
+  designStyle: string;
+  url: string;
+  previewUrl: string;
+}) {
+  return (
+    <a
+      href={url}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="group block"
+    >
+      <Card className="overflow-hidden transition-all hover:-translate-y-1 hover:shadow-lg">
+        {/* Preview Area */}
+        <div className="relative h-48 overflow-hidden bg-muted">
+          <img
+            src={previewUrl}
+            alt={`${title} preview`}
+            className="h-full w-full object-cover object-top transition-transform duration-300 group-hover:scale-105"
+          />
+          {/* Overlay on hover */}
+          <div className="absolute inset-0 flex items-center justify-center bg-black/60 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+            <div className="text-center text-white">
+              <ExternalLink className="mx-auto h-8 w-8" />
+              <p className="mt-2 text-sm font-medium">View Demo</p>
+            </div>
+          </div>
+        </div>
+
+        <CardContent className="space-y-3 p-4">
+          {/* Category Badge */}
+          <span className="inline-block rounded-md bg-primary/10 px-2 py-1 text-xs font-medium text-primary">
+            {category}
+          </span>
+
+          {/* Title & Description */}
+          <div>
+            <h3 className="font-bold">{title}</h3>
+            <p className="mt-1 text-sm text-muted-foreground">{description}</p>
+          </div>
+
+          {/* Design Style */}
+          <p className="text-xs text-muted-foreground">{designStyle}</p>
+        </CardContent>
+      </Card>
+    </a>
+  );
+}

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

@@ -79,38 +79,6 @@ export const Alertify = {
     };
   },
 
-  /**
-   * 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
    */

package/templates/base/tsconfig.node.json

@@ -10,7 +10,10 @@
     "allowImportingTsExtensions": true,
     "isolatedModules": true,
     "moduleDetection": "force",
-    "noEmit": true,
+    "emitDeclarationOnly": true,
+
+    /* Composite project (required for project references) */
+    "composite": true,
 
     /* Linting */
     "strict": true,

package/templates/optional/forms/index.ts

@@ -0,0 +1,2 @@
+export { useZodForm, getFieldError } from './use-zod-form';
+export type { UseZodFormProps, UseZodFormReturn, FormFieldProps } from './types';

package/templates/optional/forms/types.ts

@@ -0,0 +1,39 @@
+import {
+  type UseFormReturn,
+  type FieldValues,
+  type UseFormProps,
+} from 'react-hook-form';
+import { type ZodType } from 'zod';
+
+export interface UseZodFormProps<T extends FieldValues>
+  extends Omit<UseFormProps<T>, 'resolver'> {
+  schema: ZodType<T>;
+}
+
+export type UseZodFormReturn<T extends FieldValues> = UseFormReturn<T>;
+
+/**
+ * Common form field props for building reusable form components
+ *
+ * @example
+ * interface TextFieldProps extends FormFieldProps {
+ *   type?: 'text' | 'email' | 'password';
+ * }
+ *
+ * function TextField({ label, error, required, ...props }: TextFieldProps) {
+ *   return (
+ *     <div>
+ *       {label && <label>{label}{required && '*'}</label>}
+ *       <input {...props} />
+ *       {error && <span className="text-red-500">{error}</span>}
+ *     </div>
+ *   );
+ * }
+ */
+export interface FormFieldProps {
+  label?: string;
+  error?: string;
+  required?: boolean;
+  disabled?: boolean;
+  className?: string;
+}

package/templates/optional/forms/use-zod-form.ts

@@ -0,0 +1,59 @@
+import {
+  useForm,
+  type UseFormProps,
+  type FieldValues,
+  type Path,
+  type FieldErrors,
+} from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { type ZodType } from 'zod';
+
+interface UseZodFormProps<T extends FieldValues>
+  extends Omit<UseFormProps<T>, 'resolver'> {
+  schema: ZodType<T>;
+}
+
+/**
+ * Custom hook that wraps React Hook Form with Zod validation
+ *
+ * @example
+ * const schema = z.object({
+ *   email: z.string().email(),
+ *   password: z.string().min(8),
+ * });
+ *
+ * const form = useZodForm({ schema });
+ *
+ * <form onSubmit={form.handleSubmit(onSubmit)}>
+ *   <input {...form.register('email')} />
+ *   {form.formState.errors.email && <span>{form.formState.errors.email.message}</span>}
+ * </form>
+ */
+export function useZodForm<T extends FieldValues>({
+  schema,
+  mode = 'onBlur',
+  ...formProps
+}: UseZodFormProps<T>) {
+  return useForm<T>({
+    resolver: zodResolver(schema),
+    mode,
+    ...formProps,
+  });
+}
+
+/**
+ * Helper to get error message for a field
+ *
+ * @example
+ * const error = getFieldError(form.formState.errors, 'email');
+ * if (error) {
+ *   console.log(error); // "Invalid email address"
+ * }
+ */
+export function getFieldError<T extends FieldValues>(
+  errors: FieldErrors<T>,
+  name: Path<T>
+): string | undefined {
+  const error = errors[name];
+  return error?.message as string | undefined;
+}