Add templates for Data table and columns

.gitignore

@@ -1,4 +1,5 @@
 node_modules
 dist
 .DS_Store
-bun.lockb
+tester/
+bun.lockb

README.md

@@ -182,7 +182,7 @@ To run locally:
 
 ```sh
 pnpm i
-pnpm run dev
+pnpm run build
 
 npm install -g . (in a second terminal - this will then make kirimase available across your machine using "kirimase *command*")
 ```

package.json

@@ -9,7 +9,9 @@
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "npx tsc",
+    "build": "npx tsc && rm -rf dist/templates && cp -r src/templates dist/templates",
+    "reinstall": "bun run build && npm i -g .",
+    "createTesterApp": "rm -rf tester/ && bunx create-next-app tester && cd tester/ && kirimase init",
     "dev2": "node dist/index.js",
     "dev": "tsc -w"
   },
@@ -29,6 +31,7 @@
     "chalk": "^5.3.0",
     "commander": "^11.0.0",
     "consola": "^3.2.3",
+    "eta": "^3.2.0",
     "execa": "^8.0.1",
     "figlet": "^1.7.0",
     "ora": "^8.0.1",

src/commands/add/componentLib/shadcn-ui/index.ts

@@ -1,6 +1,7 @@
 import { consola } from "consola";
 // import { execa } from "execa";
 import { existsSync } from "fs";
+import { eta } from "../../../../eta.js";
 import {
   addPackageToConfig,
   createFile,
@@ -47,6 +48,7 @@ const manualInstallShadCn = async (
 
   addToInstallList({
     regular: [
+      "@tanstack/react-table",
       "tailwindcss-animate",
       "class-variance-authority",
       "clsx",
@@ -85,6 +87,16 @@ const manualInstallShadCn = async (
     rootPath.concat("components/ui/ThemeToggle.tsx"),
     generateThemeToggler()
   );
+
+  // generate base Data Table
+  createFile(
+    rootPath.concat("components/ui/DataTable/index.tsx"),
+    eta.render("DataTable/index.eta", {})
+  );
+  createFile(
+    rootPath.concat("components/ui/DataTable/pagination.tsx"),
+    eta.render("DataTable/pagination.eta", {})
+  );
   // add context provider to layout
   addContextProviderToRootLayout("ThemeProvider");
 };
@@ -131,6 +143,8 @@ export const installShadcnUI = async (
   //   "label",
   // ]);
   addToShadcnComponentList([
+    "table",
+    "pagination",
     "button",
     "sonner",
     "avatar",

src/commands/add/orm/drizzle/generators.ts

@@ -540,7 +540,7 @@ export const addScriptsToPackageJson = (
     "db:migrate": `tsx ${libPath}/db/migrate.ts`,
     "db:drop": "drizzle-kit drop",
     "db:pull": `drizzle-kit introspect:${driver}`,
-    ...(driver !== "pg" ? { "db:push": `drizzle-kit push:${driver}` } : {}),
+    "db:push": `drizzle-kit push:${driver}`,
     "db:studio": "drizzle-kit studio",
     "db:check": `drizzle-kit check:${driver}`,
   };

src/commands/add/orm/drizzle/utils.ts

@@ -69,7 +69,6 @@ ${nanoidContent.split("\n")[1].trim()}
     replaceFile(utilsPath, newContent);
   }
 };
-
 export const checkTimestampsInUtils = () => {
   const timestampsContent = `export const timestamps: { createdAt: true; updatedAt: true } = {
   createdAt: true,

src/commands/generate/generators/views-with-server-actions.ts

@@ -36,6 +36,7 @@ import { formatTableName, toCamelCase } from "../utils.js";
 import { existsSync, readFileSync } from "fs";
 import { consola } from "consola";
 import { addToShadcnComponentList } from "../../add/utils.js";
+import eta from "../../../eta.js";
 
 export const scaffoldViewsAndComponentsWithServerActions = async (
   schema: ExtendedSchema
@@ -80,6 +81,15 @@ export const scaffoldViewsAndComponentsWithServerActions = async (
       createListComponent(schema)
     );
 
+    // create columns
+    createFile(
+      formatFilePath(
+        `app/(app)/${tableNameKebabCase}/columns.tsx`,
+        { prefix: "rootPath", removeExtension: false }
+      ),
+      eta.render('DataTable/columns.eta', { fields: schema.fields, tableNameKebabCase })
+    );
+
     // create components/tableName/TableNameForm.tsx
     createFile(
       formatFilePath(
@@ -251,7 +261,8 @@ const generateView = (schema: Schema) => {
   const relationsFormatted = formatRelations(relations);
 
   return `import { Suspense } from "react";
-
+import { DataTable } from "${formatFilePath(`components/ui/DataTable`, {prefix: "alias", removeExtension: false})}";
+import { columns } from "./columns";
 import Loading from "${formatFilePath("app/loading", {
     prefix: "alias",
     removeExtension: false,
@@ -313,6 +324,7 @@ const ${tableNameCapitalised} = async () => {
               .join(" ")
           : ""
       } />
+      <DataTable data={${tableNameCamelCase}} columns={columns} />
     </Suspense>
   );
 };
@@ -469,19 +481,6 @@ export default function ${tableNameSingularCapitalised}List({
           +
         </Button>
       </div>
-      {optimistic${tableNamePluralCapitalised}.length === 0 ? (
-        <EmptyState openModal={openModal} />
-      ) : (
-        <ul>
-          {optimistic${tableNamePluralCapitalised}.map((${tableNameSingular}) => (
-            <${tableNameSingularCapitalised}
-              ${tableNameSingular}={${tableNameSingular}}
-              key={${entityName}.id}
-              openModal={openModal}
-            />
-          ))}
-        </ul>
-      )}
     </div>
   );
 }

src/commands/generate/generators/views.ts

@@ -15,13 +15,16 @@ import {
   toCamelCase,
   toNormalEnglish,
 } from "../utils.js";
+import fs from 'fs';
 import { addToShadcnComponentList } from "../../add/utils.js";
+import eta from "../../../eta.js";
 
 export const scaffoldViewsAndComponents = async (schema: Schema) => {
   const { hasSrc, packages } = readConfigFile();
   const {
     tableNameCamelCase,
     tableNameSingularCapitalised,
+    tableNameSingular,
     tableNameKebabCase,
   } = formatTableName(schema.tableName);
   // require trpc for these views
@@ -32,20 +35,34 @@ export const scaffoldViewsAndComponents = async (schema: Schema) => {
       rootPath.concat(`app/(app)/${tableNameKebabCase}/page.tsx`),
       generateView(schema)
     );
+
+    // create tableName/[id]/page.tsx
+    createFile(
+      formatFilePath(
+        `app/(app)/${tableNameKebabCase}/[${tableNameSingular}Id]/page.tsx`,
+        { removeExtension: false, prefix: "rootPath" }
+      ),
+      createShowPage(schema)
+    );
     // create components/tableName/TableNameList.tsx
     createFile(
       rootPath.concat(
         `components/${tableNameCamelCase}/${tableNameSingularCapitalised}List.tsx`
-      ),
+        ),
       createListComponent(schema)
-    );
+      );
     // create components/tableName/TableNameForm.tsx
     createFile(
       rootPath.concat(
         `components/${tableNameCamelCase}/${tableNameSingularCapitalised}Form.tsx`
       ),
       createFormComponent(schema)
     );
+    // create components/tableName/columns.tsx
+    createFile(
+      rootPath.concat(`components/${tableNameCamelCase}/columns.tsx`),
+      eta.render('DataTable/columns.eta', { fields: schema.fields, tableNameKebabCase })
+    );
     // create components/tableName/TableNameModal.tsx
     createFile(
       rootPath.concat(
@@ -101,6 +118,8 @@ import { api } from "${formatFilePath(trpc.trpcApiTs, {
         })}";`
       : ""
   }
+import { DataTable } from "${alias}/components/ui/DataTable";
+import { columns } from "${alias}/components/${tableNameCamelCase}/columns";
 
 export default async function ${tableNameCapitalised}() {
   ${
@@ -113,13 +132,49 @@ export default async function ${tableNameCapitalised}() {
         <h1 className="font-semibold text-2xl my-2">${tableNameNormalEnglishCapitalised}</h1>
         <New${tableNameSingularCapitalised}Modal />
       </div>
-      <${tableNameSingularCapitalised}List ${tableNameCamelCase}={${tableNameCamelCase}} />
+      <DataTable data={${tableNameCamelCase}} columns={columns} />
     </main>
   );
 }
 `;
 };
 
+const createShowPage = (schema: Schema) => {
+  const {
+    tableNameCamelCase,
+    tableNameSingularCapitalised,
+    tableNameKebabCase,
+    tableNameSingular,
+    tableNameNormalEnglishCapitalised,
+  } = formatTableName(schema.tableName);
+  const { trpc } = getFilePaths();
+  const { alias } = readConfigFile();
+  const trpcRoute = formatFilePath(trpc.trpcApiTs, {
+    prefix: "alias",
+    removeExtension: true,
+  })
+  const { fields } = schema;
+  if (!fs.existsSync(`src/compononents/ui/breadcrumbs.tsx`)) {
+    createFile(
+      `src/components/ui/breadcrumbs.tsx`,
+      eta.render('components/ui/breadcrumbs.eta', {})
+    )
+  }
+
+  return eta.render(
+    'resources/show.eta', { 
+      fields, 
+      tableNameSingular, 
+      tableNameSingularCapitalised,
+      tableNameCamelCase,
+      tableNameKebabCase,
+      tableNameNormalEnglishCapitalised,
+      alias,
+      trpcRoute
+    }
+  )
+}
+
 const queryHasJoins = (tableName: string) => {
   // const { hasSrc } = readConfigFile();
   const { shared } = getFilePaths();

src/commands/init/utils.ts

@@ -268,4 +268,4 @@ export const toggleAnalytics = (input: { toggle?: boolean }) => {
       `Anonymous analytics are currently ${analytics ? "on" : "off"}`
     );
   }
-};
+};

src/eta.ts

@@ -0,0 +1,9 @@
+import { Eta } from "eta"
+import path from 'path';
+import { fileURLToPath } from 'url';
+import fs from 'fs';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+export const eta = new Eta({ views: path.join(__dirname, "templates") });
+export default eta;

src/index.ts

@@ -20,6 +20,7 @@ addCommonOptions(program.command("init"))
 
 program
   .command("generate")
+  .alias("g")
   .description("Generate a new resource")
   .action(buildSchema);
 

src/templates/DataTable/columns.eta

@@ -0,0 +1,54 @@
+"use client"
+import { MoreHorizontal } from "lucide-react"
+import {
+  ColumnDef,
+} from "@tanstack/react-table"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Button } from "@/components/ui/button"
+import Link from 'next/link'
+
+export const columns: ColumnDef<TData, TValue>[] = [
+  <% it.fields.map(function (field) { %>
+  {
+    accessorKey: "<%_ = field.name _%>",
+    header: "<%_ = field.name _%>",
+    enableHiding: false,
+    cell: ({ row }) => {
+      const resource = row.original
+      return (
+        <Link href={`/<%= it.tableNameKebabCase %>/${resource.id}`}>
+          {resource.<%_ = field.name _%>}
+        </Link>
+      )
+    },
+  },
+  <% }) %>
+  {
+    id: "actions",
+    enableHiding: false,
+    cell: ({ row }) => {
+      const resource = row.original
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" className="square-8 p-0">
+              <span className="sr-only">Open menu</span>
+              <MoreHorizontal className="square-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuLabel>Actions</DropdownMenuLabel>
+            <DropdownMenuItem>Edit</DropdownMenuItem>
+            <DropdownMenuItem>Delete</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )
+    },
+  },
+]