@kaushalparajuli/react-crud-ui 1.0.11 → 1.0.13

package/bin/cli.js

@@ -0,0 +1,327 @@
+#!/usr/bin/env node
+/**
+ * CRUD Module Generator CLI
+ * 
+ * Usage: npx @kaushalparajuli/react-crud-ui generate <module-name>
+ * Example: npx @kaushalparajuli/react-crud-ui generate blog
+ * 
+ * This will create:
+ * - src/pages/<module>/ModuleListPage.jsx
+ * - src/pages/<module>/ModuleFormPage.jsx
+ * - src/routes/modules/<module>Routes.js
+ * - src/stores/use<Module>Store.js
+ */
+
+import fs from 'fs';
+import path from 'path';
+
+const args = process.argv.slice(2);
+const command = args[0];
+const moduleName = args[1];
+
+// Show help if no command
+if (!command || command === '--help' || command === '-h') {
+  console.log(`
+@kaushalparajuli/react-crud-ui CLI
+
+Usage:
+  npx @kaushalparajuli/react-crud-ui generate <module-name>
+  npx @kaushalparajuli/react-crud-ui g <module-name>
+
+Commands:
+  generate, g    Generate a new CRUD module
+
+Options:
+  --help, -h     Show this help message
+  --version, -v  Show version number
+
+Examples:
+  npx @kaushalparajuli/react-crud-ui generate blog
+  npx @kaushalparajuli/react-crud-ui g product
+  npx @kaushalparajuli/react-crud-ui g user-profile
+`);
+  process.exit(0);
+}
+
+// Show version
+if (command === '--version' || command === '-v') {
+  try {
+    const packageJson = JSON.parse(fs.readFileSync(new URL('../package.json', import.meta.url), 'utf-8'));
+    console.log(packageJson.version);
+  } catch {
+    console.log('Unknown version');
+  }
+  process.exit(0);
+}
+
+// Handle generate command
+if (command === 'generate' || command === 'g') {
+  if (!moduleName) {
+    console.error('❌ Please provide a module name');
+    console.log('Usage: npx @kaushalparajuli/react-crud-ui generate <module-name>');
+    console.log('Example: npx @kaushalparajuli/react-crud-ui generate blog');
+    process.exit(1);
+  }
+
+  generateModule(moduleName);
+} else {
+  console.error(`❌ Unknown command: ${command}`);
+  console.log('Run with --help to see available commands');
+  process.exit(1);
+}
+
+function generateModule(name) {
+  // Helper functions
+  const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
+  const kebabCase = (str) => str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+  const pascalCase = (str) => str.split(/[-_]/).map(capitalize).join('');
+  const camelCase = (str) => {
+    const pascal = pascalCase(str);
+    return pascal.charAt(0).toLowerCase() + pascal.slice(1);
+  };
+
+  const moduleNameLower = name.toLowerCase();
+  const moduleNamePascal = pascalCase(name);
+  const moduleNameCamel = camelCase(name);
+  const moduleNameKebab = kebabCase(name);
+
+  const cwd = process.cwd();
+  const srcPath = path.join(cwd, 'src');
+
+  // Check if src folder exists
+  if (!fs.existsSync(srcPath)) {
+    console.error('❌ Could not find src folder. Make sure you are in the root of your React project.');
+    process.exit(1);
+  }
+
+  // Templates
+  const listPageTemplate = `import { Badge } from '@kaushalparajuli/react-crud-ui';
+import { CrudList } from '@/components/common';
+import use${moduleNamePascal}Store from '@/stores/use${moduleNamePascal}Store';
+import { formatDate } from '@/lib/utils';
+
+// Column definitions (actions column is auto-added by DataTable)
+const columns = [
+  {
+    key: 'name',
+    label: 'Name',
+    sortable: true,
+  },
+  {
+    key: 'created_at',
+    label: 'Created',
+    render: (value) => formatDate(value),
+  },
+  {
+    key: 'is_active',
+    label: 'Status',
+    render: (value) => (
+      <Badge variant={value ? 'success' : 'secondary'}>
+        {value ? 'Active' : 'Inactive'}
+      </Badge>
+    ),
+  },
+];
+
+export default function ${moduleNamePascal}ListPage() {
+  const store = use${moduleNamePascal}Store();
+
+  return (
+    <CrudList
+      title="${moduleNamePascal}s"
+      description="Manage ${moduleNameLower}s"
+      createPath="/${moduleNameLower}s/create"
+      editPath="/${moduleNameLower}s"
+      store={store}
+      columns={columns}
+      searchPlaceholder="Search ${moduleNameLower}s..."
+      getDeleteItemName={(item) => item?.name}
+    />
+  );
+}
+`;
+
+  const formPageTemplate = `import { Box } from 'lucide-react';
+import { CrudForm, QInput, QTextarea, QSwitch } from '@kaushalparajuli/react-crud-ui';
+import use${moduleNamePascal}Store from '@/stores/use${moduleNamePascal}Store';
+
+export default function ${moduleNamePascal}FormPage() {
+  const { form, setFormField } = use${moduleNamePascal}Store();
+
+  return (
+    <CrudForm
+      title="${moduleNamePascal}"
+      description="Enter the ${moduleNameLower} information below"
+      icon={Box}
+      listPath="/${moduleNameLower}s"
+      useStore={use${moduleNamePascal}Store}
+    >
+      <QInput
+        name="name"
+        label="Name"
+        value={form.values.name || ''}
+        onChange={(val) => setFormField('name', val)}
+        error={form.errors.name}
+        placeholder="Enter name"
+        required
+      />
+
+      <QTextarea
+        name="description"
+        label="Description"
+        value={form.values.description || ''}
+        onChange={(val) => setFormField('description', val)}
+        error={form.errors.description}
+        placeholder="Enter description"
+        rows={4}
+      />
+
+      <QSwitch
+        label="Active"
+        checked={form.values.is_active ?? true}
+        onChange={(val) => setFormField('is_active', val)}
+      />
+    </CrudForm>
+  );
+}
+`;
+
+  const detailPageTemplate = `import { Box } from 'lucide-react';
+import { CrudDetail, Badge } from '@kaushalparajuli/react-crud-ui';
+import use${moduleNamePascal}Store from '@/stores/use${moduleNamePascal}Store';
+import { formatDate } from '@/lib/utils';
+
+export default function ${moduleNamePascal}DetailPage() {
+  return (
+    <CrudDetail
+      title="${moduleNamePascal} Details"
+      description="View ${moduleNameLower} information"
+      icon={Box}
+      listPath="/${moduleNameLower}s"
+      editPath="/${moduleNameLower}s"
+      useStore={use${moduleNamePascal}Store}
+      getItemName={(item) => item?.name}
+    >
+      {(data) => (
+        <div className="grid gap-4 md:grid-cols-2">
+          <div className="space-y-2">
+            <p className="text-sm font-medium text-muted-foreground">Name</p>
+            <p className="text-sm">{data.name}</p>
+          </div>
+          <div className="space-y-2">
+            <p className="text-sm font-medium text-muted-foreground">Status</p>
+            <Badge variant={data.is_active ? 'success' : 'secondary'}>
+              {data.is_active ? 'Active' : 'Inactive'}
+            </Badge>
+          </div>
+          {data.description && (
+            <div className="space-y-2 md:col-span-2">
+              <p className="text-sm font-medium text-muted-foreground">Description</p>
+              <p className="text-sm">{data.description}</p>
+            </div>
+          )}
+          <div className="space-y-2">
+            <p className="text-sm font-medium text-muted-foreground">Created</p>
+            <p className="text-sm">{formatDate(data.created_at)}</p>
+          </div>
+          <div className="space-y-2">
+            <p className="text-sm font-medium text-muted-foreground">Updated</p>
+            <p className="text-sm">{formatDate(data.updated_at)}</p>
+          </div>
+        </div>
+      )}
+    </CrudDetail>
+  );
+}
+`;
+
+  const routesTemplate = `import ${moduleNamePascal}ListPage from '@/pages/${moduleNameLower}s/${moduleNamePascal}ListPage';
+import ${moduleNamePascal}FormPage from '@/pages/${moduleNameLower}s/${moduleNamePascal}FormPage';
+import ${moduleNamePascal}DetailPage from '@/pages/${moduleNameLower}s/${moduleNamePascal}DetailPage';
+
+const ${moduleNameCamel}Routes = [
+  { path: '/${moduleNameLower}s', element: <${moduleNamePascal}ListPage /> },
+  { path: '/${moduleNameLower}s/create', element: <${moduleNamePascal}FormPage /> },
+  { path: '/${moduleNameLower}s/:id', element: <${moduleNamePascal}DetailPage /> },
+  { path: '/${moduleNameLower}s/:id/edit', element: <${moduleNamePascal}FormPage /> },
+];
+
+export default ${moduleNameCamel}Routes;
+`;
+
+  const storeTemplate = `import { createCrudStore } from './createCrudStore';
+
+// Default form values for ${moduleNameLower}s
+const defaultFormValues = {
+  name: '',
+  description: '',
+  is_active: true,
+};
+
+// Create CRUD store for ${moduleNameLower}s
+const use${moduleNamePascal}Store = createCrudStore('${moduleNameLower}', '/${moduleNameLower}s/', defaultFormValues);
+
+export default use${moduleNamePascal}Store;
+`;
+
+  // Create directories
+  const pagesDir = path.join(srcPath, 'pages', `${moduleNameLower}s`);
+  const routesDir = path.join(srcPath, 'routes', 'modules');
+  const storesDir = path.join(srcPath, 'stores');
+
+  if (!fs.existsSync(pagesDir)) {
+    fs.mkdirSync(pagesDir, { recursive: true });
+  }
+
+  if (!fs.existsSync(routesDir)) {
+    fs.mkdirSync(routesDir, { recursive: true });
+  }
+
+  // Write files
+  const files = [
+    { path: path.join(pagesDir, `${moduleNamePascal}ListPage.jsx`), content: listPageTemplate },
+    { path: path.join(pagesDir, `${moduleNamePascal}FormPage.jsx`), content: formPageTemplate },
+    { path: path.join(pagesDir, `${moduleNamePascal}DetailPage.jsx`), content: detailPageTemplate },
+    { path: path.join(routesDir, `${moduleNameCamel}Routes.js`), content: routesTemplate },
+    { path: path.join(storesDir, `use${moduleNamePascal}Store.js`), content: storeTemplate },
+  ];
+
+  console.log(`\n🚀 Generating ${moduleNamePascal} module...\n`);
+
+  files.forEach(({ path: filePath, content }) => {
+    if (fs.existsSync(filePath)) {
+      console.log(`⚠️  File already exists: ${path.relative(cwd, filePath)}`);
+    } else {
+      fs.writeFileSync(filePath, content);
+      console.log(`✅ Created: ${path.relative(cwd, filePath)}`);
+    }
+  });
+
+  console.log(`
+📝 Next steps:
+
+1. Add route to src/routes/modules/index.js:
+   export { default as ${moduleNameCamel}Routes } from './${moduleNameCamel}Routes';
+
+2. Import in src/routes/index.jsx:
+   import { ..., ${moduleNameCamel}Routes } from './modules';
+
+3. Add to protected routes children:
+   ...${moduleNameCamel}Routes,
+
+4. Add sidebar menu item:
+   {
+     label: '${moduleNamePascal}s',
+     path: '/${moduleNameLower}s',
+     icon: Box,
+   },
+
+5. Customize the form fields in ${moduleNamePascal}FormPage.jsx
+
+6. Customize the table columns in ${moduleNamePascal}ListPage.jsx
+
+7. Update store default values in use${moduleNamePascal}Store.js
+
+8. Update detail view fields in ${moduleNamePascal}DetailPage.jsx
+`);
+}