@kaushalparajuli/react-crud-ui 1.1.14 → 1.2.1

package/bin/cli.js

@@ -1,10 +1,10 @@
 #!/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
@@ -12,15 +12,15 @@
  * - src/stores/use<Module>Store.js
  */
 
-import fs from 'fs';
-import path from 'path';
+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') {
+if (!command || command === "--help" || command === "-h") {
   console.log(`
 @kaushalparajuli/react-crud-ui CLI
 
@@ -44,37 +44,42 @@ Examples:
 }
 
 // Show version
-if (command === '--version' || command === '-v') {
+if (command === "--version" || command === "-v") {
   try {
-    const packageJson = JSON.parse(fs.readFileSync(new URL('../package.json', import.meta.url), 'utf-8'));
+    const packageJson = JSON.parse(
+      fs.readFileSync(new URL("../package.json", import.meta.url), "utf-8"),
+    );
     console.log(packageJson.version);
   } catch {
-    console.log('Unknown version');
+    console.log("Unknown version");
   }
   process.exit(0);
 }
 
 // Handle generate command
-if (command === 'generate' || command === 'g') {
+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');
+    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');
+  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 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);
@@ -86,18 +91,19 @@ function generateModule(name) {
   const moduleNameKebab = kebabCase(name);
 
   const cwd = process.cwd();
-  const srcPath = path.join(cwd, 'src');
+  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.');
+    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, CrudList } from '@kaushalparajuli/react-crud-ui';
+  const listPageTemplate = `import { Badge, CrudList,TimeStampFormat } from '@kaushalparajuli/react-crud-ui';
 import use${moduleNamePascal}Store from '@/stores/use${moduleNamePascal}Store';
-import { formatDate } from '@kaushalparajuli/react-crud-ui';
 
 // Column definitions (actions column is auto-added by DataTable)
 const columns = [
@@ -109,7 +115,7 @@ const columns = [
   {
     key: 'created_at',
     label: 'Created',
-    render: (value) => formatDate(value),
+    render: (value) => TimeStampFormat(value),
   },
   {
     key: 'is_active',
@@ -155,6 +161,7 @@ export default function ${moduleNamePascal}FormPage() {
       listPath="/${moduleNameLower}s"
       useStore={use${moduleNamePascal}Store}
     >
+    <div className="flex flex-col gap-4">
       <QInput
         name="name"
         label="Name"
@@ -180,15 +187,16 @@ export default function ${moduleNamePascal}FormPage() {
         checked={form.values.is_active ?? true}
         onChange={(val) => setFormField('is_active', val)}
       />
+    </div>
     </CrudForm>
   );
 }
 `;
 
-  const detailPageTemplate = `import { Box } from 'lucide-react';
-import { CrudDetail, Badge } from '@kaushalparajuli/react-crud-ui';
+  const detailPageTemplate = `import { CheckCircle2, FileText, XCircle, Activity, Box, ListOrdered } from 'lucide-react';
+import { CrudDetail } from '@kaushalparajuli/react-crud-ui';
 import use${moduleNamePascal}Store from '@/stores/use${moduleNamePascal}Store';
-import { formatDate } from '@kaushalparajuli/react-crud-ui';
+import DetailView from '@/components/features/DetailView';
 
 export default function ${moduleNamePascal}DetailPage() {
   return (
@@ -200,35 +208,73 @@ export default function ${moduleNamePascal}DetailPage() {
       editPath="/${moduleNameLower}s"
       useStore={use${moduleNamePascal}Store}
       getItemName={(item) => item?.name}
+      getBreadcrumbName={(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>
-      )}
+      {(data) => {
+        if (!data) return null;
+
+        const mainSection = {
+          title: '${moduleNamePascal}',
+          description: '${moduleNamePascal} details',
+          icon: FileText,
+          columns: 2,
+          fields: [
+            {
+              label: 'Name',
+              value: data.name,
+              icon: FileText,
+            },
+            {
+              label: 'Description',
+              value: data.description || '-',
+              icon: Box,
+            },
+            {
+              label: 'Status',
+              value: data.is_active ? 'Active' : 'Inactive',
+              type: 'badge',
+              variant: data.is_active ? 'success' : 'destructive',
+              icon: data.is_active ? CheckCircle2 : XCircle,
+            },
+          ],
+        };
+
+        const timelineConfig = {
+          show: true,
+          data: data,
+          title: 'Timeline',
+          description: 'Creation and modification history',
+          showUserInfo: true,
+        };
+
+        const sidebarConfig = {
+          statsTitle: 'Quick Info',
+          statsIcon: Activity,
+          stats: [
+            {
+              label: 'Status',
+              value: data.is_active ? 'Active' : 'Inactive',
+              type: 'badge',
+              variant: data.is_active ? 'success' : 'secondary',
+              icon: data.is_active ? CheckCircle2 : XCircle,
+            },
+            {
+              label: 'ID',
+              value: data.id ?? '-',
+              icon: ListOrdered,
+            },
+          ],
+        };
+
+        return (
+          <DetailView
+            data={data}
+            sections={[mainSection]}
+            timeline={timelineConfig}
+            sidebar={sidebarConfig}
+          />
+        );
+      }}
     </CrudDetail>
   );
 }
@@ -264,9 +310,9 @@ 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');
+  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 });
@@ -278,11 +324,26 @@ export default use${moduleNamePascal}Store;
 
   // 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.jsx`), content: routesTemplate },
-    { path: path.join(storesDir, `use${moduleNamePascal}Store.jsx`), content: storeTemplate },
+    {
+      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.jsx`),
+      content: routesTemplate,
+    },
+    {
+      path: path.join(storesDir, `use${moduleNamePascal}Store.jsx`),
+      content: storeTemplate,
+    },
   ];
 
   console.log(`\n🚀 Generating ${moduleNamePascal} module...\n`);