create-modern-react 1.0.1 → 2.1.0

package/lib/setup.js

@@ -3,32 +3,63 @@ 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
+  // 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 packageJson = await fs.readJson(packageJsonPath);
@@ -36,180 +67,270 @@ async function updatePackageJson(config) {
   // 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';
+  // Redux dependencies
+  if (config.useRedux) {
+    dependencies['@reduxjs/toolkit'] = '^2.2.0';
+    dependencies['react-redux'] = '^9.1.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';
+  // 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'];
   }
 
-  // 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';
-  }
+  // Husky dependencies
+  if (config.useHusky) {
+    devDependencies['husky'] = '^9.1.0';
+    devDependencies['lint-staged'] = '^15.2.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';
+    // Add prepare script for husky
+    packageJson.scripts = packageJson.scripts || {};
+    packageJson.scripts.prepare = 'husky';
   }
 
-  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';
-  }
+  packageJson.dependencies = sortObjectKeys(dependencies);
+  packageJson.devDependencies = sortObjectKeys(devDependencies);
 
-  if (config.devTools.includes('husky')) {
-    devDependencies['husky'] = '^9.0.0';
-    devDependencies['lint-staged'] = '^15.0.0';
-  }
+  await fs.writeJson(packageJsonPath, packageJson, { spaces: 2 });
+}
 
-  // PWA dependencies
-  if (config.pwa) {
-    devDependencies['vite-plugin-pwa'] = '^0.20.0';
+/**
+ * Copy an optional template to the project
+ */
+async function copyOptionalTemplate(templateName, projectPath) {
+  const optionalTemplatePath = path.join(
+    __dirname,
+    '../templates/optional',
+    templateName
+  );
+
+  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')
+      );
+    }
   }
+}
 
-  packageJson.dependencies = dependencies;
-  packageJson.devDependencies = devDependencies;
+/**
+ * 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;
+}
 
-  await fs.writeJson(packageJsonPath, packageJson, { spaces: 2 });
+/**
+ * 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 configureLibraries(config) {
-  const { projectPath } = config;
+export { ThemeProvider, useTheme } from './theme-provider';
+`;
 
-  // Configure Tailwind if selected
-  if (config.cssFramework === 'tailwind') {
-    await configureTailwind(projectPath);
-  }
+  await fs.writeFile(
+    path.join(projectPath, 'src/providers/index.tsx'),
+    providersContent
+  );
 
-  // Configure Vite plugins based on selections
-  await configureVite(config);
+  // Create styles directory if it doesn't exist
+  await fs.ensureDir(path.join(projectPath, 'src/styles'));
+}
 
-  // Add configuration files for selected libraries
-  await addConfigFiles(config);
+/**
+ * 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;
 }
 
-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: {},
-  },
-}`;
-
-  await fs.writeFile(path.join(projectPath, 'tailwind.config.js'), tailwindConfig);
-  await fs.writeFile(path.join(projectPath, 'postcss.config.js'), postcssConfig);
-
-  // Add Tailwind directives to CSS
-  const cssPath = path.join(projectPath, 'src/index.css');
-  const tailwindDirectives = `@tailwind base;
-@tailwind components;
-@tailwind utilities;
+/**
+ * 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';
 `;
-
-  if (await fs.pathExists(cssPath)) {
-    const existingCss = await fs.readFile(cssPath, 'utf8');
-    await fs.writeFile(cssPath, tailwindDirectives + existingCss);
   } 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;
+}
+
+/**
+ * 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 configureVite(config) {
-  // This would configure vite.config.ts based on selected options
-  // For now, we'll use the existing base template configuration
+export { ThemeProvider, useTheme } from './theme-provider';
+`;
+  }
+
+  await fs.writeFile(
+    path.join(projectPath, 'src/providers/index.tsx'),
+    providersContent
+  );
 }
 
-async function addConfigFiles(config) {
-  // Add configuration files for selected tools
-  // This would add ESLint, Prettier, Jest configs, etc.
+/**
+ * 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', ['commit', '-m', 'Initial commit from create-modern-react'], projectPath);
+    await runCommand(
+      'git',
+      ['commit', '-m', 'Initial commit from create-modern-react'],
+      projectPath
+    );
 
-    console.log(chalk.green('✅ Git repository initialized!'));
+    console.log(chalk.green('  ✅ Git repository initialized!'));
   } catch (error) {
-    console.warn(chalk.yellow('⚠️  Could not initialize Git repository:'), error.message);
+    console.warn(
+      chalk.yellow('  ⚠️  Could not initialize Git repository:'),
+      error.message
+    );
   }
 }
 
-module.exports = { setupProject };
+/**
+ * Setup Husky hooks after git init
+ */
+async function setupHusky(projectPath) {
+  try {
+    console.log(chalk.gray('  Setting up Husky git hooks...'));
+
+    // 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 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.1",
-  "description": "Create a modern React application with Vite, TypeScript, and your choice of modern libraries",
+  "version": "2.1.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,13 +1,14 @@
 <!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>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
-</html>
+</html>