create-modern-react 1.0.0 → 2.0.0

package/lib/setup.js

@@ -1,228 +1,336 @@
-const fs = require("fs-extra");
-const path = require("path");
-const chalk = require("chalk");
-const { runCommand } = require("./install");
-
+const fs = require('fs-extra');
+const path = require('path');
+const chalk = require('chalk');
+const { runCommand } = require('./install');
+
+/**
+ * Main setup function - orchestrates the entire project generation
+ */
 async function setupProject(config) {
   const { projectPath, projectName } = config;
 
-  console.log(chalk.blue("\n🏗️  Setting up project structure..."));
+  console.log(chalk.blue('\n🏗️  Setting up project structure...\n'));
 
-  // Create project directory
+  // Step 1: Create project directory
   await fs.ensureDir(projectPath);
 
-  // Copy base template
-  const templatePath = path.join(__dirname, "../templates/base");
+  // Step 2: Copy base template
+  console.log(chalk.gray('  Copying base template...'));
+  const templatePath = path.join(__dirname, '../templates/base');
   await fs.copy(templatePath, projectPath);
 
-  // Update package.json with project name and selected dependencies
-  await updatePackageJson(config);
+  // Step 3: Handle Antd vs Shadcn/ui
+  if (config.useAntd) {
+    console.log(chalk.gray('  Configuring Ant Design (removing Shadcn/ui)...'));
+    await removeDirectory(path.join(projectPath, 'src/components/ui'));
+    await fs.remove(path.join(projectPath, 'components.json'));
+    await copyOptionalTemplate('antd', projectPath);
+    await updateProvidersForAntd(projectPath);
+  }
+
+  // Step 4: Copy optional feature templates
+  if (config.useRedux) {
+    console.log(chalk.gray('  Adding Redux Toolkit + Redux Persist...'));
+    await copyOptionalTemplate('redux', projectPath);
+    await updateProvidersForRedux(projectPath, config.useAntd);
+  }
+
+  if (config.useHusky) {
+    console.log(chalk.gray('  Adding Husky + lint-staged...'));
+    await copyOptionalTemplate('husky', projectPath);
+  }
 
-  // Configure selected libraries
-  await configureLibraries(config);
+  // Step 5: Update package.json
+  console.log(chalk.gray('  Configuring package.json...'));
+  await updatePackageJson(config);
 
-  // Initialize git if requested
-  if (config.git && !config.skipGit) {
+  // Step 6: Initialize git if requested
+  if (config.initGit) {
     await initializeGit(config);
   }
 
-  console.log(chalk.green("✅ Project structure created successfully!"));
+  // Step 7: Setup Husky if selected
+  if (config.useHusky && config.initGit) {
+    await setupHusky(projectPath);
+  }
+
+  console.log(chalk.green('\n✅ Project structure created successfully!\n'));
 }
 
+/**
+ * Update package.json with project name and selected dependencies
+ */
 async function updatePackageJson(config) {
-  const packageJsonPath = path.join(config.projectPath, "package.json");
+  const packageJsonPath = path.join(config.projectPath, 'package.json');
   const packageJson = await fs.readJson(packageJsonPath);
 
   // Update name
   packageJson.name = config.projectName;
 
-  // Add dependencies based on configuration
+  // Add optional dependencies
   const dependencies = { ...packageJson.dependencies };
   const devDependencies = { ...packageJson.devDependencies };
 
-  // UI Library dependencies
-  if (config.uiLibrary === "antd") {
-    dependencies["antd"] = "^5.0.0";
-  } else if (config.uiLibrary === "mui") {
-    dependencies["@mui/material"] = "^5.0.0";
-    dependencies["@emotion/react"] = "^11.0.0";
-    dependencies["@emotion/styled"] = "^11.0.0";
-  } else if (config.uiLibrary === "chakra") {
-    dependencies["@chakra-ui/react"] = "^2.0.0";
-    dependencies["@emotion/react"] = "^11.0.0";
-    dependencies["@emotion/styled"] = "^11.0.0";
-    dependencies["framer-motion"] = "^6.0.0";
-  }
-
-  // CSS Framework dependencies
-  if (config.cssFramework === "tailwind") {
-    devDependencies["tailwindcss"] = "^3.0.0";
-    devDependencies["postcss"] = "^8.0.0";
-    devDependencies["autoprefixer"] = "^10.0.0";
-  } else if (config.cssFramework === "styled-components") {
-    dependencies["styled-components"] = "^6.0.0";
-    devDependencies["@types/styled-components"] = "^5.1.0";
-  }
-
-  // State Management dependencies
-  if (config.stateManagement === "redux-toolkit") {
-    dependencies["@reduxjs/toolkit"] = "^2.0.0";
-    dependencies["react-redux"] = "^9.0.0";
-    dependencies["redux-persist"] = "^6.0.0";
-  } else if (config.stateManagement === "zustand") {
-    dependencies["zustand"] = "^4.0.0";
-  } else if (config.stateManagement === "jotai") {
-    dependencies["jotai"] = "^2.0.0";
-  }
-
-  // Data Fetching dependencies
-  if (config.dataFetching === "react-query") {
-    dependencies["@tanstack/react-query"] = "^5.0.0";
-    dependencies["@tanstack/react-query-devtools"] = "^5.0.0";
-  } else if (config.dataFetching === "swr") {
-    dependencies["swr"] = "^2.0.0";
-  } else if (config.dataFetching === "apollo") {
-    dependencies["@apollo/client"] = "^3.0.0";
-    dependencies["graphql"] = "^16.0.0";
-  }
-
-  // Routing dependencies
-  if (config.routing === "react-router") {
-    dependencies["react-router-dom"] = "^6.0.0";
-  } else if (config.routing === "wouter") {
-    dependencies["wouter"] = "^3.0.0";
-  }
-
-  // Icon dependencies
-  if (config.icons === "lucide") {
-    dependencies["lucide-react"] = "^0.400.0";
-  } else if (config.icons === "react-icons") {
-    dependencies["react-icons"] = "^5.0.0";
-  } else if (config.icons === "heroicons") {
-    dependencies["@heroicons/react"] = "^2.0.0";
-  }
-
-  // Development Tools dependencies
-  if (config.devTools.includes("storybook")) {
-    devDependencies["@storybook/react-vite"] = "^8.0.0";
-    devDependencies["@storybook/addon-essentials"] = "^8.0.0";
-    devDependencies["storybook"] = "^8.0.0";
+  // Redux dependencies
+  if (config.useRedux) {
+    dependencies['@reduxjs/toolkit'] = '^2.2.0';
+    dependencies['react-redux'] = '^9.1.0';
+    dependencies['redux-persist'] = '^6.0.0';
   }
 
-  if (config.devTools.includes("testing")) {
-    devDependencies["jest"] = "^29.0.0";
-    devDependencies["@testing-library/react"] = "^14.0.0";
-    devDependencies["@testing-library/jest-dom"] = "^6.0.0";
-    devDependencies["@testing-library/user-event"] = "^14.0.0";
+  // Ant Design dependencies (replaces Shadcn)
+  if (config.useAntd) {
+    dependencies['antd'] = '^5.20.0';
+    dependencies['@ant-design/icons'] = '^5.4.0';
+    // Remove Radix dependency when using Antd
+    delete dependencies['@radix-ui/react-slot'];
   }
 
-  if (config.devTools.includes("husky")) {
-    devDependencies["husky"] = "^9.0.0";
-    devDependencies["lint-staged"] = "^15.0.0";
-  }
+  // Husky dependencies
+  if (config.useHusky) {
+    devDependencies['husky'] = '^9.1.0';
+    devDependencies['lint-staged'] = '^15.2.0';
 
-  // PWA dependencies
-  if (config.pwa) {
-    devDependencies["vite-plugin-pwa"] = "^0.20.0";
+    // Add prepare script for husky
+    packageJson.scripts = packageJson.scripts || {};
+    packageJson.scripts.prepare = 'husky';
   }
 
-  packageJson.dependencies = dependencies;
-  packageJson.devDependencies = devDependencies;
+  packageJson.dependencies = sortObjectKeys(dependencies);
+  packageJson.devDependencies = sortObjectKeys(devDependencies);
 
   await fs.writeJson(packageJsonPath, packageJson, { spaces: 2 });
 }
 
-async function configureLibraries(config) {
-  const { projectPath } = config;
+/**
+ * Copy an optional template to the project
+ */
+async function copyOptionalTemplate(templateName, projectPath) {
+  const optionalTemplatePath = path.join(
+    __dirname,
+    '../templates/optional',
+    templateName
+  );
 
-  // Configure Tailwind if selected
-  if (config.cssFramework === "tailwind") {
-    await configureTailwind(projectPath);
+  if (await fs.pathExists(optionalTemplatePath)) {
+    // For redux and antd, copy to src directory
+    if (templateName === 'redux') {
+      await fs.copy(optionalTemplatePath, path.join(projectPath, 'src/redux'));
+    } else if (templateName === 'antd') {
+      await fs.copy(optionalTemplatePath, path.join(projectPath, 'src/antd'));
+      // Also copy the styles file to src/styles
+      const stylesFile = path.join(optionalTemplatePath, 'styles/antd-overrides.css');
+      if (await fs.pathExists(stylesFile)) {
+        await fs.ensureDir(path.join(projectPath, 'src/styles'));
+        await fs.copy(
+          stylesFile,
+          path.join(projectPath, 'src/styles/antd-overrides.css')
+        );
+      }
+    } else if (templateName === 'husky') {
+      // Copy husky files to root
+      await fs.copy(
+        path.join(optionalTemplatePath, '.husky'),
+        path.join(projectPath, '.husky')
+      );
+      await fs.copy(
+        path.join(optionalTemplatePath, '.lintstagedrc.json'),
+        path.join(projectPath, '.lintstagedrc.json')
+      );
+    }
   }
+}
 
-  // Configure Vite plugins based on selections
-  await configureVite(config);
+/**
+ * Update providers/index.tsx to include Antd ConfigProvider
+ */
+async function updateProvidersForAntd(projectPath) {
+  const providersContent = `import { type ReactNode } from 'react';
+import { ThemeProvider } from './theme-provider';
+import { RootLayout } from '~/components/layout';
+import { ErrorBoundary } from '~/components/layout';
+import { AntdConfigProvider } from '~/antd';
+import '~/styles/antd-overrides.css';
+
+interface ProvidersProps {
+  children: ReactNode;
+}
 
-  // Add configuration files for selected libraries
-  await addConfigFiles(config);
+/**
+ * Application providers composition
+ * Wraps the app with all necessary context providers
+ */
+export function Providers({ children }: ProvidersProps) {
+  return (
+    <ErrorBoundary>
+      <ThemeProvider defaultTheme="system" storageKey="app-theme">
+        <AntdConfigProvider>
+          <RootLayout>{children}</RootLayout>
+        </AntdConfigProvider>
+      </ThemeProvider>
+    </ErrorBoundary>
+  );
 }
 
-async function configureTailwind(projectPath) {
-  const tailwindConfig = `/** @type {import('tailwindcss').Config} */
-export default {
-  content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-  ],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-}`;
-
-  const postcssConfig = `export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}`;
+export { ThemeProvider, useTheme } from './theme-provider';
+`;
 
   await fs.writeFile(
-    path.join(projectPath, "tailwind.config.js"),
-    tailwindConfig,
-  );
-  await fs.writeFile(
-    path.join(projectPath, "postcss.config.js"),
-    postcssConfig,
+    path.join(projectPath, 'src/providers/index.tsx'),
+    providersContent
   );
 
-  // Add Tailwind directives to CSS
-  const cssPath = path.join(projectPath, "src/index.css");
-  const tailwindDirectives = `@tailwind base;
-@tailwind components;
-@tailwind utilities;
+  // Create styles directory if it doesn't exist
+  await fs.ensureDir(path.join(projectPath, 'src/styles'));
+}
 
-`;
+/**
+ * Update providers/index.tsx to include Redux Provider
+ */
+async function updateProvidersForRedux(projectPath, hasAntd) {
+  let providersContent;
+
+  if (hasAntd) {
+    providersContent = `import { type ReactNode } from 'react';
+import { ThemeProvider } from './theme-provider';
+import { RootLayout } from '~/components/layout';
+import { ErrorBoundary } from '~/components/layout';
+import { AntdConfigProvider } from '~/antd';
+import { ReduxProvider } from '~/redux';
+import '~/styles/antd-overrides.css';
+
+interface ProvidersProps {
+  children: ReactNode;
+}
 
-  if (await fs.pathExists(cssPath)) {
-    const existingCss = await fs.readFile(cssPath, "utf8");
-    await fs.writeFile(cssPath, tailwindDirectives + existingCss);
+/**
+ * Application providers composition
+ * Wraps the app with all necessary context providers
+ *
+ * Order: ErrorBoundary > Redux > Theme > Antd > Layout
+ */
+export function Providers({ children }: ProvidersProps) {
+  return (
+    <ErrorBoundary>
+      <ReduxProvider>
+        <ThemeProvider defaultTheme="system" storageKey="app-theme">
+          <AntdConfigProvider>
+            <RootLayout>{children}</RootLayout>
+          </AntdConfigProvider>
+        </ThemeProvider>
+      </ReduxProvider>
+    </ErrorBoundary>
+  );
+}
+
+export { ThemeProvider, useTheme } from './theme-provider';
+`;
   } else {
-    await fs.writeFile(cssPath, tailwindDirectives);
-  }
+    providersContent = `import { type ReactNode } from 'react';
+import { ThemeProvider } from './theme-provider';
+import { RootLayout } from '~/components/layout';
+import { ErrorBoundary } from '~/components/layout';
+import { ReduxProvider } from '~/redux';
+
+interface ProvidersProps {
+  children: ReactNode;
 }
 
-async function configureVite(config) {
-  // This would configure vite.config.ts based on selected options
-  // For now, we'll use the existing base template configuration
+/**
+ * Application providers composition
+ * Wraps the app with all necessary context providers
+ *
+ * Order: ErrorBoundary > Redux > Theme > Layout
+ */
+export function Providers({ children }: ProvidersProps) {
+  return (
+    <ErrorBoundary>
+      <ReduxProvider>
+        <ThemeProvider defaultTheme="system" storageKey="app-theme">
+          <RootLayout>{children}</RootLayout>
+        </ThemeProvider>
+      </ReduxProvider>
+    </ErrorBoundary>
+  );
 }
 
-async function addConfigFiles(config) {
-  // Add configuration files for selected tools
-  // This would add ESLint, Prettier, Jest configs, etc.
+export { ThemeProvider, useTheme } from './theme-provider';
+`;
+  }
+
+  await fs.writeFile(
+    path.join(projectPath, 'src/providers/index.tsx'),
+    providersContent
+  );
 }
 
+/**
+ * Remove a directory and all its contents
+ */
+async function removeDirectory(dirPath) {
+  if (await fs.pathExists(dirPath)) {
+    await fs.remove(dirPath);
+  }
+}
+
+/**
+ * Initialize git repository
+ */
 async function initializeGit(config) {
   const { projectPath } = config;
 
   try {
-    console.log(chalk.blue("🔧 Initializing Git repository..."));
+    console.log(chalk.gray('  Initializing Git repository...'));
 
-    await runCommand("git", ["init"], projectPath);
-    await runCommand("git", ["add", "."], projectPath);
+    await runCommand('git', ['init'], projectPath);
+    await runCommand('git', ['add', '.'], projectPath);
     await runCommand(
-      "git",
-      ["commit", "-m", "Initial commit from create-modern-react"],
-      projectPath,
+      'git',
+      ['commit', '-m', 'Initial commit from create-modern-react'],
+      projectPath
+    );
+
+    console.log(chalk.green('  ✅ Git repository initialized!'));
+  } catch (error) {
+    console.warn(
+      chalk.yellow('  ⚠️  Could not initialize Git repository:'),
+      error.message
     );
+  }
+}
+
+/**
+ * Setup Husky hooks after git init
+ */
+async function setupHusky(projectPath) {
+  try {
+    console.log(chalk.gray('  Setting up Husky git hooks...'));
 
-    console.log(chalk.green("✅ Git repository initialized!"));
+    // Make pre-commit hook executable
+    const preCommitPath = path.join(projectPath, '.husky/pre-commit');
+    if (await fs.pathExists(preCommitPath)) {
+      await fs.chmod(preCommitPath, '755');
+    }
+
+    console.log(chalk.green('  ✅ Husky configured!'));
   } catch (error) {
     console.warn(
-      chalk.yellow("⚠️  Could not initialize Git repository:"),
-      error.message,
+      chalk.yellow('  ⚠️  Could not setup Husky:'),
+      error.message
     );
   }
 }
 
+/**
+ * Sort object keys alphabetically
+ */
+function sortObjectKeys(obj) {
+  return Object.keys(obj)
+    .sort()
+    .reduce((sorted, key) => {
+      sorted[key] = obj[key];
+      return sorted;
+    }, {});
+}
+
 module.exports = { setupProject };

package/package.json

@@ -1,29 +1,38 @@
 {
   "name": "create-modern-react",
-  "version": "1.0.0",
-  "description": "Create a modern React application with Vite, TypeScript, and your choice of modern libraries",
+  "version": "2.0.0",
+  "description": "Create production-ready React + TypeScript + Tailwind applications in seconds",
   "main": "bin/index.js",
   "bin": {
     "create-modern-react": "./bin/index.js"
   },
   "engines": {
-    "node": ">=16.0.0"
+    "node": ">=18.0.0"
   },
   "keywords": [
     "react",
-    "vite",
     "typescript",
+    "vite",
+    "tailwindcss",
     "cli",
+    "scaffold",
     "boilerplate",
-    "template",
-    "modern",
-    "scaffold"
+    "create-react-app",
+    "starter-kit",
+    "shadcn-ui",
+    "react-starter",
+    "vite-template",
+    "react-boilerplate",
+    "npx",
+    "frontend",
+    "antd",
+    "redux"
   ],
   "author": "Abhay Rana",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/abhay-rana/create-modern-react.git"
+    "url": "git+https://github.com/abhay-rana/create-modern-react.git"
   },
   "bugs": {
     "url": "https://github.com/abhay-rana/create-modern-react/issues"

package/templates/base/.env.example

@@ -0,0 +1,9 @@
+# API Configuration
+VITE_API_URL=http://localhost:8000/api
+
+# App Configuration
+VITE_APP_NAME=Modern React App
+VITE_APP_VERSION=1.0.0
+
+# Feature Flags
+VITE_ENABLE_DEVTOOLS=true

package/templates/base/.eslintrc.cjs

@@ -0,0 +1,37 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh', 'unused-imports'],
+  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',
+  },
+};

package/templates/base/.prettierrc

@@ -0,0 +1,11 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 80,
+  "bracketSpacing": true,
+  "arrowParens": "always",
+  "endOfLine": "lf",
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

package/templates/base/components.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/index.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "~/components",
+    "utils": "~/lib/utils"
+  }
+}

package/templates/base/index.html

@@ -1,9 +1,10 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" class="light">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Modern React application built with create-modern-react" />
     <title>Modern React App</title>
   </head>
   <body>