stackloom-cli 1.0.0

package/src/templates/resource/hooks.js.ejs

@@ -0,0 +1,46 @@
+import { useState, useEffect, useCallback } from 'react';
+import api from '../api/<%= resource.kebabName %>.api';
+
+/**
+ * use<%= resource.pascalName %> hook
+ * Handles data fetching and state for <%= resource.name %> resource
+ */
+export const use<%= resource.pascalName %> = (id = null) => {
+  const [data, setData] = useState(id ? null : []);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  const fetchAll = useCallback(async (params) => {
+    setLoading(true);
+    try {
+      const res = await api.getAll(params);
+      setData(res.data);
+    } catch (err) {
+      setError(err);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  const fetchOne = useCallback(async (uid) => {
+    setLoading(true);
+    try {
+      const res = await api.getById(uid);
+      setData(res.data);
+    } catch (err) {
+      setError(err);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (id) {
+      fetchOne(id);
+    } else {
+      fetchAll();
+    }
+  }, [id, fetchOne, fetchAll]);
+
+  return { data, loading, error, refresh: id ? () => fetchOne(id) : fetchAll };
+};

package/src/templates/resource/model.js.ejs

@@ -0,0 +1,64 @@
+const mongoose = require('mongoose');
+
+// ── Mongoose Field Definitions ──────────────────────────────────────────────
+<% const fields = resource.fields; %>
+const <%= resource.pascalName %>Schema = new mongoose.Schema(
+  {
+<% fields.forEach(function(field) { -%>
+    <%- field.name %>: { <%- field.mongooseDef %> },
+<% }); -%>
+  },
+  {
+    timestamps: true,
+    toJSON: {
+      virtuals: true,
+      transform: (doc, ret) => {
+        delete ret._id;
+        delete ret.__v;
+        return ret;
+      },
+    },
+    toObject: { virtuals: true },
+  }
+);
+
+// ── Indexes ── (text fields indexed for search; unique fields are indexed inline)
+<% fields.forEach(function(field) { -%>
+<% if (field.type === 'text' || field.type === 'richtext') { -%>
+<%= resource.pascalName %>Schema.index({ <%- field.name %>: 'text' });
+<% } -%>
+<% }); -%>
+
+<% if (resource.features.softDelete) { %>
+// Soft delete plugin (adds deletedAt, isDeleted virtual)
+<%= resource.pascalName %>Schema.plugin(require('mongoose-delete'), { deletedAt: true });
+<% } %>
+
+ <% if (resource.relations && resource.relations.hasMany && resource.relations.hasMany.length > 0) { %>
+ // Virtual populate for hasMany relations
+ <% resource.relations.hasMany.forEach(function(rel) { %>
+ <%= resource.pascalName %>Schema.virtual('<%- rel.field %>', {
+   ref: '<%- rel.model %>',
+   localField: '_id',
+   foreignField: '<%- rel.foreignKey || (rel.field + 'Id') %>',
+   justOne: false
+ });
+ <% }); %>
+ <% } %>
+
+// ═══════════════════════════════════════════════════════════════════════════
+// ✎ CUSTOM CODE ZONE — YOUR CODE HERE
+// Add virtuals, methods, statics, plugins below:
+//
+//   <%= resource.pascalName %>Schema.virtual('fullName').get(function() { ... });
+//   <%= resource.pascalName %>Schema.methods.comparePassword = function(candidate) { ... };
+//   <%= resource.pascalName %>Schema.statics.findActive = function() { ... };
+//   <%= resource.pascalName %>Schema.pre('save', function(next) { ... });
+//
+// ────────────────────────────────────────────────────────────────────────────
+
+module.exports = mongoose.model('<%= resource.pascalName %>', <%= resource.pascalName %>Schema);
+
+// ═══════════════════════════════════════════════════════════════════════════
+// END AUTO-GENERATED
+// ═══════════════════════════════════════════════════════════════════════════

package/src/templates/resource/page-detail.jsx.ejs

@@ -0,0 +1,55 @@
+import React from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { use<%= resource.pascalName %> } from "@/hooks/use<%= resource.pascalName %>";
+import { Button } from "@/components/ui/button";
+import { ArrowLeft, Edit } from "lucide-react";
+import { PageWrapper } from "@/components/layout/PageWrapper";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+export default function <%= resource.pascalName %>DetailPage() {
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const { data: item, loading, error } = use<%= resource.pascalName %>(id);
+
+  if (loading) return <div>Loading...</div>;
+  if (error) return <div>Error loading <%= resource.name.toLowerCase() %></div>;
+  if (!item) return <div><%= resource.name %> not found</div>;
+
+  return (
+    <PageWrapper 
+      title={`<%= resource.name %> Details`}
+      actions={
+        <div className="flex gap-2">
+          <Button variant="outline" onClick={() => navigate(-1)}>
+            <ArrowLeft className="mr-2 h-4 w-4" /> Back
+          </Button>
+          <Button onClick={() => navigate(`/admin/<%= resource.kebabName %>/edit/${id}`)}>
+            <Edit className="mr-2 h-4 w-4" /> Edit
+          </Button>
+        </div>
+      }
+    >
+      <div className="grid gap-4 md:grid-cols-2">
+        <Card>
+          <CardHeader>
+            <CardTitle>Information</CardTitle>
+          </CardHeader>
+           <CardContent className="space-y-2">
+             <% resource.fields.forEach(function(field) { %>
+             <div className="flex justify-between border-b pb-2">
+               <span className="font-medium text-muted-foreground"><%- field.name.charAt(0).toUpperCase() + field.name.slice(1) %></span>
+               <span>{<% if (field.type === 'boolean') { %>
+                 item.<%- field.name %> ? 'Yes' : 'No'
+               <% } else if (field.type === 'date' || field.type === 'datetime') { %>
+                 new Date(item.<%- field.name %>).toLocaleString()
+               <% } else { %>
+                 item.<%- field.name %>
+               <% } %>}</span>
+             </div>
+             <% }); %>
+          </CardContent>
+        </Card>
+      </div>
+    </PageWrapper>
+  );
+}

package/src/templates/resource/page-form.jsx.ejs

@@ -0,0 +1,30 @@
+import React from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { <%= resource.pascalName %>Form } from "@/components/forms/<%= resource.pascalName %>Form";
+
+export const FormModal = ({ open, onOpenChange, initialData, onSubmit, isLoading }) => {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>{initialData ? 'Edit' : 'Create'} <%= resource.name %></DialogTitle>
+          <DialogDescription>
+            {initialData ? 'Update the details below.' : 'Fill in the details for the new <%= resource.name.toLowerCase() %>.'}
+          </DialogDescription>
+        </DialogHeader>
+        <<%= resource.pascalName %>Form 
+          initialData={initialData} 
+          onSubmit={onSubmit} 
+          onCancel={() => onOpenChange(false)}
+          isLoading={isLoading}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+};

package/src/templates/resource/page-inline.jsx.ejs

@@ -0,0 +1,74 @@
+import React, { useState } from 'react';
+import { use<%= resource.pascalName %> } from "@/hooks/use<%= resource.pascalName %>";
+import { <%= resource.pascalName %>Table } from "@/components/tables/<%= resource.pascalName %>Table";
+import { <%= resource.pascalName %>Form } from "@/components/forms/<%= resource.pascalName %>Form";
+import { Button } from "@/components/ui/button";
+import { RefreshCcw } from "lucide-react";
+import { PageWrapper } from "@/components/layout/PageWrapper";
+import api from "@/api/<%= resource.kebabName %>.api";
+import { toast } from "sonner";
+
+// form-mode: inline — the create/edit form is always visible above the table.
+export default function <%= resource.pascalName %>ListPage() {
+  const { data, loading, refresh } = use<%= resource.pascalName %>();
+  const [editingItem, setEditingItem] = useState(null);
+
+  const handleEdit = (item) => setEditingItem(item);
+
+  const handleDelete = async (item) => {
+    if (!confirm("Are you sure you want to delete this <%= resource.name.toLowerCase() %>?")) return;
+    try {
+      await api.delete(item._id);
+      toast.success("<%= resource.name %> deleted successfully");
+      refresh();
+    } catch (err) {
+      toast.error("Failed to delete <%= resource.name.toLowerCase() %>");
+    }
+  };
+
+  const handleSubmit = async (formData) => {
+    try {
+      if (editingItem) {
+        await api.update(editingItem._id, formData);
+        toast.success("<%= resource.name %> updated successfully");
+      } else {
+        await api.create(formData);
+        toast.success("<%= resource.name %> created successfully");
+      }
+      setEditingItem(null);
+      refresh();
+    } catch (err) {
+      toast.error(editingItem ? "Failed to update <%= resource.name.toLowerCase() %>" : "Failed to create <%= resource.name.toLowerCase() %>");
+    }
+  };
+
+  return (
+    <PageWrapper
+      title="<%= resource.pluralPascal %>"
+      subtitle="Manage your <%= resource.pluralPascal.toLowerCase() %>"
+      actions={
+        <Button variant="outline" size="icon" onClick={() => refresh()} disabled={loading}>
+          <RefreshCcw className={`h-4 w-4 ${loading ? 'animate-spin' : ''}`} />
+        </Button>
+      }
+    >
+      <div className="space-y-6">
+        <section className="rounded-lg border bg-card p-6">
+          <h2 className="mb-4 text-lg font-medium">
+            {editingItem ? "Edit <%= resource.name %>" : "Create <%= resource.name %>"}
+          </h2>
+          <<%= resource.pascalName %>Form
+            initialData={editingItem}
+            onSubmit={handleSubmit}
+            onCancel={editingItem ? () => setEditingItem(null) : undefined}
+            isLoading={loading}
+          />
+        </section>
+
+        <section>
+          <<%= resource.pascalName %>Table data={data} onEdit={handleEdit} onDelete={handleDelete} />
+        </section>
+      </div>
+    </PageWrapper>
+  );
+}

package/src/templates/resource/page-modal.jsx.ejs

@@ -0,0 +1,98 @@
+import React, { useState } from 'react';
+import { use<%= resource.pascalName %> } from "@/hooks/use<%= resource.pascalName %>";
+import { <%= resource.pascalName %>Table } from "@/components/tables/<%= resource.pascalName %>Table";
+import { <%= resource.pascalName %>Form } from "@/components/forms/<%= resource.pascalName %>Form";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import { Plus, RefreshCcw } from "lucide-react";
+import { PageWrapper } from "@/components/layout/PageWrapper";
+import api from "@/api/<%= resource.kebabName %>.api";
+import { toast } from "sonner";
+
+// form-mode: modal — create/edit form is mounted inside a Dialog.
+export default function <%= resource.pascalName %>ListPage() {
+  const { data, loading, refresh } = use<%= resource.pascalName %>();
+  const [formOpen, setFormOpen] = useState(false);
+  const [editingItem, setEditingItem] = useState(null);
+
+  const handleCreate = () => {
+    setEditingItem(null);
+    setFormOpen(true);
+  };
+
+  const handleEdit = (item) => {
+    setEditingItem(item);
+    setFormOpen(true);
+  };
+
+  const handleDelete = async (item) => {
+    if (!confirm("Are you sure you want to delete this <%= resource.name.toLowerCase() %>?")) return;
+    try {
+      await api.delete(item._id);
+      toast.success("<%= resource.name %> deleted successfully");
+      refresh();
+    } catch (err) {
+      toast.error("Failed to delete <%= resource.name.toLowerCase() %>");
+    }
+  };
+
+  const handleSubmit = async (formData) => {
+    try {
+      if (editingItem) {
+        await api.update(editingItem._id, formData);
+        toast.success("<%= resource.name %> updated successfully");
+      } else {
+        await api.create(formData);
+        toast.success("<%= resource.name %> created successfully");
+      }
+      setFormOpen(false);
+      refresh();
+    } catch (err) {
+      toast.error(editingItem ? "Failed to update <%= resource.name.toLowerCase() %>" : "Failed to create <%= resource.name.toLowerCase() %>");
+    }
+  };
+
+  return (
+    <PageWrapper
+      title="<%= resource.pluralPascal %>"
+      subtitle="Manage your <%= resource.pluralPascal.toLowerCase() %>"
+      actions={
+        <div className="flex gap-2">
+          <Button variant="outline" size="icon" onClick={() => refresh()} disabled={loading}>
+            <RefreshCcw className={`h-4 w-4 ${loading ? 'animate-spin' : ''}`} />
+          </Button>
+          <Button onClick={handleCreate}>
+            <Plus className="mr-2 h-4 w-4" /> Add <%= resource.name %>
+          </Button>
+        </div>
+      }
+    >
+      <div className="space-y-4">
+        <<%= resource.pascalName %>Table data={data} onEdit={handleEdit} onDelete={handleDelete} />
+      </div>
+
+      <Dialog open={formOpen} onOpenChange={setFormOpen}>
+        <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>{editingItem ? "Edit <%= resource.name %>" : "Create <%= resource.name %>"}</DialogTitle>
+            <DialogDescription>
+              {editingItem ? "Update the details below." : "Fill in the details to create a new <%= resource.name.toLowerCase() %>."}
+            </DialogDescription>
+          </DialogHeader>
+          <<%= resource.pascalName %>Form
+            initialData={editingItem}
+            onSubmit={handleSubmit}
+            onCancel={() => setFormOpen(false)}
+            isLoading={loading}
+          />
+        </DialogContent>
+      </Dialog>
+    </PageWrapper>
+  );
+}

package/src/templates/resource/page-page.jsx.ejs

@@ -0,0 +1,99 @@
+import React, { useState } from 'react';
+import { use<%= resource.pascalName %> } from "@/hooks/use<%= resource.pascalName %>";
+import { <%= resource.pascalName %>Table } from "@/components/tables/<%= resource.pascalName %>Table";
+import { <%= resource.pascalName %>Form } from "@/components/forms/<%= resource.pascalName %>Form";
+import { Button } from "@/components/ui/button";
+import { Plus, RefreshCcw } from "lucide-react";
+import { PageWrapper } from "@/components/layout/PageWrapper";
+import api from "@/api/<%= resource.kebabName %>.api";
+import { toast } from "sonner";
+
+// form-mode: page — the create/edit form takes over the page as a dedicated
+// section. A matching FormPage.jsx is also generated for routed create/edit.
+export default function <%= resource.pascalName %>ListPage() {
+  const { data, loading, refresh } = use<%= resource.pascalName %>();
+  const [formOpen, setFormOpen] = useState(false);
+  const [editingItem, setEditingItem] = useState(null);
+
+  const handleCreate = () => {
+    setEditingItem(null);
+    setFormOpen(true);
+  };
+
+  const handleEdit = (item) => {
+    setEditingItem(item);
+    setFormOpen(true);
+  };
+
+  const handleClose = () => {
+    setFormOpen(false);
+    setEditingItem(null);
+  };
+
+  const handleDelete = async (item) => {
+    if (!confirm("Are you sure you want to delete this <%= resource.name.toLowerCase() %>?")) return;
+    try {
+      await api.delete(item._id);
+      toast.success("<%= resource.name %> deleted successfully");
+      refresh();
+    } catch (err) {
+      toast.error("Failed to delete <%= resource.name.toLowerCase() %>");
+    }
+  };
+
+  const handleSubmit = async (formData) => {
+    try {
+      if (editingItem) {
+        await api.update(editingItem._id, formData);
+        toast.success("<%= resource.name %> updated successfully");
+      } else {
+        await api.create(formData);
+        toast.success("<%= resource.name %> created successfully");
+      }
+      handleClose();
+      refresh();
+    } catch (err) {
+      toast.error(editingItem ? "Failed to update <%= resource.name.toLowerCase() %>" : "Failed to create <%= resource.name.toLowerCase() %>");
+    }
+  };
+
+  if (formOpen) {
+    return (
+      <PageWrapper
+        title={editingItem ? "Edit <%= resource.name %>" : "Create <%= resource.name %>"}
+        subtitle="Fill in the details below"
+        actions={<Button variant="outline" onClick={handleClose}>Back to list</Button>}
+      >
+        <section className="max-w-2xl rounded-lg border bg-card p-6">
+          <<%= resource.pascalName %>Form
+            initialData={editingItem}
+            onSubmit={handleSubmit}
+            onCancel={handleClose}
+            isLoading={loading}
+          />
+        </section>
+      </PageWrapper>
+    );
+  }
+
+  return (
+    <PageWrapper
+      title="<%= resource.pluralPascal %>"
+      subtitle="Manage your <%= resource.pluralPascal.toLowerCase() %>"
+      actions={
+        <div className="flex gap-2">
+          <Button variant="outline" size="icon" onClick={() => refresh()} disabled={loading}>
+            <RefreshCcw className={`h-4 w-4 ${loading ? 'animate-spin' : ''}`} />
+          </Button>
+          <Button onClick={handleCreate}>
+            <Plus className="mr-2 h-4 w-4" /> Add <%= resource.name %>
+          </Button>
+        </div>
+      }
+    >
+      <div className="space-y-4">
+        <<%= resource.pascalName %>Table data={data} onEdit={handleEdit} onDelete={handleDelete} />
+      </div>
+    </PageWrapper>
+  );
+}

package/src/templates/resource/page-sidepanel.jsx.ejs

@@ -0,0 +1,100 @@
+import React, { useState } from 'react';
+import { use<%= resource.pascalName %> } from "@/hooks/use<%= resource.pascalName %>";
+import { <%= resource.pascalName %>Table } from "@/components/tables/<%= resource.pascalName %>Table";
+import { <%= resource.pascalName %>Form } from "@/components/forms/<%= resource.pascalName %>Form";
+import { Button } from "@/components/ui/button";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+} from "@/components/ui/sheet";
+import { Plus, RefreshCcw } from "lucide-react";
+import { PageWrapper } from "@/components/layout/PageWrapper";
+import api from "@/api/<%= resource.kebabName %>.api";
+import { toast } from "sonner";
+
+// form-mode: sidepanel — create/edit form is mounted inside a slide-over Sheet.
+export default function <%= resource.pascalName %>ListPage() {
+  const { data, loading, refresh } = use<%= resource.pascalName %>();
+  const [formOpen, setFormOpen] = useState(false);
+  const [editingItem, setEditingItem] = useState(null);
+
+  const handleCreate = () => {
+    setEditingItem(null);
+    setFormOpen(true);
+  };
+
+  const handleEdit = (item) => {
+    setEditingItem(item);
+    setFormOpen(true);
+  };
+
+  const handleDelete = async (item) => {
+    if (!confirm("Are you sure you want to delete this <%= resource.name.toLowerCase() %>?")) return;
+    try {
+      await api.delete(item._id);
+      toast.success("<%= resource.name %> deleted successfully");
+      refresh();
+    } catch (err) {
+      toast.error("Failed to delete <%= resource.name.toLowerCase() %>");
+    }
+  };
+
+  const handleSubmit = async (formData) => {
+    try {
+      if (editingItem) {
+        await api.update(editingItem._id, formData);
+        toast.success("<%= resource.name %> updated successfully");
+      } else {
+        await api.create(formData);
+        toast.success("<%= resource.name %> created successfully");
+      }
+      setFormOpen(false);
+      refresh();
+    } catch (err) {
+      toast.error(editingItem ? "Failed to update <%= resource.name.toLowerCase() %>" : "Failed to create <%= resource.name.toLowerCase() %>");
+    }
+  };
+
+  return (
+    <PageWrapper
+      title="<%= resource.pluralPascal %>"
+      subtitle="Manage your <%= resource.pluralPascal.toLowerCase() %>"
+      actions={
+        <div className="flex gap-2">
+          <Button variant="outline" size="icon" onClick={() => refresh()} disabled={loading}>
+            <RefreshCcw className={`h-4 w-4 ${loading ? 'animate-spin' : ''}`} />
+          </Button>
+          <Button onClick={handleCreate}>
+            <Plus className="mr-2 h-4 w-4" /> Add <%= resource.name %>
+          </Button>
+        </div>
+      }
+    >
+      <div className="space-y-4">
+        <<%= resource.pascalName %>Table data={data} onEdit={handleEdit} onDelete={handleDelete} />
+      </div>
+
+      <Sheet open={formOpen} onOpenChange={setFormOpen}>
+        <SheetContent className="overflow-y-auto sm:max-w-lg">
+          <SheetHeader>
+            <SheetTitle>{editingItem ? "Edit <%= resource.name %>" : "Create <%= resource.name %>"}</SheetTitle>
+            <SheetDescription>
+              {editingItem ? "Update the details below." : "Fill in the details to create a new <%= resource.name.toLowerCase() %>."}
+            </SheetDescription>
+          </SheetHeader>
+          <div className="mt-4">
+            <<%= resource.pascalName %>Form
+              initialData={editingItem}
+              onSubmit={handleSubmit}
+              onCancel={() => setFormOpen(false)}
+              isLoading={loading}
+            />
+          </div>
+        </SheetContent>
+      </Sheet>
+    </PageWrapper>
+  );
+}

package/src/templates/resource/routes.js.ejs

@@ -0,0 +1,35 @@
+const express = require('express');
+const controller = require('../controllers/<%= resource.name %>.controller');
+const validate = require('../../../middlewares/validate');
+const { authenticateSession } = require('../../../middlewares/auth.middleware');
+const validator = require('../../../utils/validators/<%= resource.name %>.validator');
+
+const router = express.Router();
+
+// All routes require authentication by default — opt out per-route if needed.
+router.use(authenticateSession);
+
+// ── Create ───────────────────────────────────────────────────────────────────
+router.post(
+  '/', 
+  validate(validator.create<%= resource.pascalName %>Schema), 
+  controller.create
+);
+
+// ── List (query params handled in controller/service) ─────────────────────────
+router.get('/', controller.list);
+
+// ── Get One ──────────────────────────────────────────────────────────────────
+router.get('/:id', controller.getOne);
+
+// ── Update ───────────────────────────────────────────────────────────────────
+router.put(
+  '/:id', 
+  validate(validator.update<%= resource.pascalName %>Schema), 
+  controller.update
+);
+
+// ── Delete ───────────────────────────────────────────────────────────────────
+router.delete('/:id', controller.remove);
+
+module.exports = router;