hiuhu-table-generator 1.0.0

package/bin/gen-datatable.js

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+import "../src/commands/gen-datatable.js";

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "hiuhu-table-generator",
+  "version": "1.0.0",
+  "description": "CLI generator for table feature in Next.js",
+  "type": "module",
+  "bin": {
+    "gen-datatable": "./bin/gen-datatable.js"
+  },
+  "files": [
+    "bin",
+    "src"
+  ],
+  "keywords": [
+    "hiuhu",
+    "generator",
+    "table",
+    "cli"
+  ],
+  "author": "HiuHu",
+  "license": "MIT"
+}

package/src/commands/gen-datatable.js

@@ -0,0 +1,222 @@
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+
+import { injectAfter } from "../utils/injectAfter.js";
+import { loadGeneratorConfig } from "../utils/loadGeneratorConfig.js";
+import {
+  toCamelCase,
+  toPascalCase,
+  toSnakeCase,
+  removeExtension,
+} from "../utils/formatter.js";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+/* =======================
+    LOAD & VALIDATE CONFIG
+======================= */
+let config;
+try {
+  config = loadGeneratorConfig();
+} catch (err) {
+  console.error(err.message);
+  process.exit(1);
+}
+
+const {
+  sharedTypes,
+  sharedTypesAlias,
+  features,
+  featuresAlias,
+  redux,
+  reduxAlias,
+  reduxStore,
+  reduxHook,
+} = config.paths;
+const {
+  components: { table, columnHeader },
+  types: { state, redux: typesRedux },
+} = config.datatable;
+
+const datatableImports = {
+  table: buildImport(table),
+  columnHeader: buildImport(columnHeader),
+  state: buildImport(state),
+  redux: buildImport(typesRedux),
+};
+
+const REDUX_STORE_FILE_PATH = path.resolve(process.cwd(), redux, reduxStore);
+const REDUX_HOOK_FILE_ALIAS = `${reduxAlias}/${reduxHook}`;
+
+const rawFeature = process.argv[2];
+const rawTableKey = process.argv[3];
+const tableKeyPascal = toPascalCase(rawTableKey);
+const tableKeySnake = toSnakeCase(rawTableKey);
+const feature = toSnakeCase(rawFeature);
+const Feature = toPascalCase(feature + tableKeyPascal);
+const featureVar = toCamelCase(feature + tableKeyPascal);
+const endpoint = process.argv[4];
+const typeName = process.argv[5];
+
+if (!feature || !tableKeySnake || !endpoint || !typeName) {
+  console.error(
+    "Usage: gen:datatable <feature> <tableKey> <endpoint> <typeName>",
+  );
+  process.exit(1);
+}
+
+const TYPE_BASE_PATH = path.resolve(process.cwd(), sharedTypes);
+
+const possibleTypePaths = [
+  path.join(TYPE_BASE_PATH, `${typeName}.ts`),
+  path.join(TYPE_BASE_PATH, `${typeName.toLowerCase()}.ts`),
+];
+
+const typeExists = possibleTypePaths.some(fs.existsSync);
+
+if (!typeExists) {
+  console.error(`❌ Type "${typeName}" not found in ${sharedTypes}`);
+  process.exit(1);
+}
+
+const replace = (tpl) =>
+  tpl
+    .replace(/{{datatableTableImport}}/g, datatableImports.table)
+    .replace(/{{datatableTable}}/g, table.component)
+    .replace(/{{datatableColumnHeaderImport}}/g, datatableImports.columnHeader)
+    .replace(/{{datatableColumnHeader}}/g, columnHeader.component)
+    .replace(/{{datatableStateImport}}/g, datatableImports.state)
+    .replace(/{{datatableState}}/g, state.name)
+    .replace(/{{datatableReduxImport}}/g, datatableImports.redux)
+    .replace(/{{datatableRedux}}/g, typesRedux.name)
+    .replace(/{{feature}}/g, feature)
+    .replace(/{{Feature}}/g, Feature)
+    .replace(/{{tablekey}}/g, tableKeySnake)
+    .replace(/{{featureVar}}/g, featureVar)
+    .replace(/{{Type}}/g, typeName)
+    .replace(/{{sharedTypesAlias}}/g, sharedTypesAlias)
+    .replace(/{{reduxHookFileAlias}}/g, removeExtension(REDUX_HOOK_FILE_ALIAS))
+    .replace(/{{endpoint}}/g, endpoint);
+
+const basePath = `${features}/${feature}`;
+
+const files = {
+  "components/DataFeature.tsx": "DataFeature.tsx.tpl",
+  "components/columnsFeature.tsx": "columnsFeature.tsx.tpl",
+  "hooks/table/useDataTableFeature.ts": "useDataTableFeature.ts.tpl",
+  "hooks/query/useGetFeature.ts": "useGetFeature.ts.tpl",
+  "services/feature.service.ts": "feature.service.ts.tpl",
+  "slices/feature-__tablekey__-datatable.slice.ts":
+    "feature-datatable.slice.ts.tpl",
+  "slices/index.ts": "slice-index.ts.tpl",
+};
+
+const reducerKey = `${featureVar}Datatable`;
+const STORE_PATH = path.resolve(REDUX_STORE_FILE_PATH);
+if (!fs.existsSync(STORE_PATH)) {
+  console.error("❌ Redux store file not found");
+  process.exit(1);
+}
+injectAfter({
+  filePath: STORE_PATH,
+  marker: "// AUTO-GENERATED IMPORTS (DO NOT REMOVE)",
+  content: `import { ${featureVar}DatatableReducer } from "${featuresAlias}/${feature}/slices";`,
+  skipIfExists: `import { ${featureVar}DatatableReducer } from "${featuresAlias}/${feature}/slices";`,
+});
+
+injectAfter({
+  filePath: STORE_PATH,
+  marker: "// AUTO-GENERATED REDUCERS (DO NOT REMOVE)",
+  content: `  ${reducerKey}: ${featureVar}DatatableReducer,`,
+  skipIfExists: `  ${reducerKey}: ${featureVar}DatatableReducer,`,
+});
+
+injectAfter({
+  filePath: STORE_PATH,
+  marker: "// AUTO-GENERATED PERSIST (DO NOT REMOVE)",
+  content: `    "${reducerKey}",`,
+  skipIfExists: `    "${reducerKey}",`,
+});
+
+Object.entries(files).forEach(([target, template]) => {
+  const filePath = path.join(
+    basePath,
+    target
+      .replace("Feature", Feature)
+      .replace("feature", feature)
+      .replace("__tablekey__", tableKeySnake),
+  );
+
+  fs.mkdirSync(path.dirname(filePath), { recursive: true });
+
+  const tpl = fs.readFileSync(
+    path.join(__dirname, "templates", template),
+    "utf-8",
+  );
+
+  /* ======================
+     SERVICE FILE
+  ====================== */
+  if (target === "services/feature.service.ts") {
+    if (!fs.existsSync(filePath)) {
+      fs.writeFileSync(filePath, replace(tpl));
+    } else {
+      injectAfter({
+        filePath,
+        marker: "// AUTO-GENERATED SERVICE FUNCTIONS (DO NOT REMOVE)",
+        content: replace(
+          `export const get{{Feature}} = ({ signal }: QueryFunctionContext) =>
+  apiGet<{{Type}}[]>("{{endpoint}}", { signal });`,
+        ),
+        skipIfExists: `get${Feature}`,
+      });
+
+      injectAfter({
+        filePath,
+        marker: "// AUTO-GENERATED SERVICE IMPORT (DO NOT REMOVE)",
+        content: replace(
+          `import { {{Type}} } from "{{sharedTypesAlias}}/{{Type}}";`,
+        ),
+        skipIfExists: `import { ${typeName} } from "${sharedTypesAlias}/${typeName}`,
+      });
+    }
+    return;
+  }
+
+  /* ======================
+     SLICE INDEX
+  ====================== */
+  if (target === "slices/index.ts") {
+    if (!fs.existsSync(filePath)) {
+      fs.writeFileSync(filePath, replace(tpl));
+    } else {
+      injectAfter({
+        filePath,
+        marker: "// AUTO-GENERATED SLICE EXPORTS (DO NOT REMOVE)",
+        content:
+          replace(`export { default as {{featureVar}}DatatableReducer } from "./{{feature}}-{{tablekey}}-datatable.slice";
+export * from "./{{feature}}-{{tablekey}}-datatable.slice";`),
+        skipIfExists: `export { default as ${featureVar}DatatableReducer } from "./${feature}-${tableKeySnake}-datatable.slice";
+export * from "./${feature}-${tableKeySnake}-datatable.slice";`,
+      });
+    }
+    return;
+  }
+
+  /* ======================
+     DEFAULT (STRICT)
+  ====================== */
+  if (fs.existsSync(filePath)) {
+    console.error(`❌ File already exists: ${filePath}`);
+    process.exit(1);
+  }
+
+  fs.writeFileSync(filePath, replace(tpl));
+});
+
+function buildImport({ component, name, importPath }) {
+  const symbol = component || name;
+  return `import { ${symbol} } from "${importPath}";`;
+}

package/src/templates/DataFeature.tsx.tpl

@@ -0,0 +1,25 @@
+"use client";
+import { useMemo } from "react";
+{{datatableTableImport}}
+import { create{{Feature}}Columns } from "./columns{{Feature}}";
+import { useGet{{Feature}} } from "../hooks/query/useGet{{Feature}}";
+import { useDataTable{{Feature}} } from "../hooks/table/useDataTable{{Feature}}";
+
+const Data{{Feature}} = () => {
+  const { data, isLoading } = useGet{{Feature}}();
+
+  const tabel = useDataTable{{Feature}}();
+
+  const columns = useMemo(() => create{{Feature}}Columns(), []);
+
+  return (
+      <{{datatableTable}}
+        {...tabel}
+        columns={columns}
+        data={data}
+        isLoading={isLoading}
+      />
+  );
+};
+
+export default Data{{Feature}};

package/src/templates/columnsFeature.tsx.tpl

@@ -0,0 +1,29 @@
+"use client";
+
+{{datatableColumnHeaderImport}}
+import { ColumnDef } from "@tanstack/react-table";
+import { {{Type}} } from "{{sharedTypesAlias}}/{{Type}}";
+
+export const create{{Feature}}Columns = (): ColumnDef<{{Type}}>[] => [
+  {
+    accessorKey: "rowNumber",
+    id: "nomor_urut",
+    header: ({ column }) => <{{datatableColumnHeader}} column={column} title="#" />,
+    cell: ({ row, table }) => {
+      const filteredRows = table.getRowModel().rows;
+      const rowIndex = filteredRows.findIndex((r) => r.id === row.id);
+      const { pageIndex, pageSize } = table.getState().pagination;
+      const rowNumber = pageIndex * pageSize + rowIndex + 1;
+      return <div>{rowNumber}</div>;
+    },
+    size: 50,
+    enableHiding: true,
+    enableColumnFilter: false,
+    enableGlobalFilter: false,
+    enablePinning: false,
+    enableSorting: false,
+    enableGrouping: false,
+    enableMultiSort: false,
+    enableResizing: false,
+  },
+];

package/src/templates/feature-datatable.slice.ts.tpl

@@ -0,0 +1,63 @@
+{{datatableStateImport}}
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+import {
+  ColumnFiltersState,
+  SortingState,
+  RowSelectionState,
+  VisibilityState,
+  PaginationState,
+  ColumnPinningState,
+} from "@tanstack/react-table";
+
+const initialState: {{datatableState}} = {
+  pagination: { pageIndex: 0, pageSize: 10 },
+  sorting: [],
+  columnFilters: [],
+  globalFilter: "",
+  columnVisibility: {},
+  rowSelection: {},
+  columnPinning: {
+    left: ["select", "nomor_urut"],
+    right: ["actions"],
+  },
+};
+
+const {{featureVar}}DataTableSlice = createSlice({
+  name: "{{featureVar}}Datatable",
+  initialState,
+  reducers: {
+    setPagination{{Feature}}(state, action: PayloadAction<PaginationState>) {
+      state.pagination = action.payload;
+    },
+    setSorting{{Feature}}(state, action: PayloadAction<SortingState>) {
+      state.sorting = action.payload;
+    },
+    setColumnFilters{{Feature}}(state, action: PayloadAction<ColumnFiltersState>) {
+      state.columnFilters = action.payload;
+    },
+    setGlobalFilter{{Feature}}(state, action: PayloadAction<string>) {
+      state.globalFilter = action.payload;
+    },
+    setColumnVisibility{{Feature}}(state, action: PayloadAction<VisibilityState>) {
+      state.columnVisibility = action.payload;
+    },
+    setRowSelection{{Feature}}(state, action: PayloadAction<RowSelectionState>) {
+      state.rowSelection = action.payload;
+    },
+    setColumnPinning{{Feature}}(state, action: PayloadAction<ColumnPinningState>) {
+      state.columnPinning = action.payload;
+    },
+  },
+});
+
+export const {
+  setPagination{{Feature}},
+  setSorting{{Feature}},
+  setColumnFilters{{Feature}},
+  setGlobalFilter{{Feature}},
+  setColumnVisibility{{Feature}},
+  setRowSelection{{Feature}},
+  setColumnPinning{{Feature}},
+} = {{featureVar}}DataTableSlice.actions;
+
+export default {{featureVar}}DataTableSlice.reducer;

package/src/templates/feature.service.ts.tpl

@@ -0,0 +1,9 @@
+import { apiGet } from "@/frontend/lib/apiClient";
+import { QueryFunctionContext } from "@tanstack/react-query";
+// AUTO-GENERATED SERVICE IMPORT (DO NOT REMOVE)
+import { {{Type}} } from "{{sharedTypesAlias}}/{{Type}}";
+
+export const get{{Feature}} = ({ signal }: QueryFunctionContext) =>
+  apiGet<{{Type}}[]>("{{endpoint}}", { signal });
+
+// AUTO-GENERATED SERVICE FUNCTIONS (DO NOT REMOVE)

package/src/templates/slice-index.ts.tpl

@@ -0,0 +1,3 @@
+// AUTO-GENERATED SLICE EXPORTS (DO NOT REMOVE)
+export { default as {{featureVar}}DatatableReducer } from "./{{feature}}-{{tablekey}}-datatable.slice";
+export * from "./{{feature}}-{{tablekey}}-datatable.slice";

package/src/templates/useDataTableFeature.ts.tpl

@@ -0,0 +1,72 @@
+import {
+  ColumnFiltersState,
+  functionalUpdate,
+  SortingState,
+  Updater,
+  RowSelectionState,
+  VisibilityState,
+  PaginationState,
+  ColumnPinningState,
+} from "@tanstack/react-table";
+import {
+  setColumnFilters{{Feature}},
+  setColumnPinning{{Feature}},
+  setColumnVisibility{{Feature}},
+  setGlobalFilter{{Feature}},
+  setPagination{{Feature}},
+  setRowSelection{{Feature}},
+  setSorting{{Feature}},
+} from "../../slices";
+{{datatableReduxImport}}
+import { useAppDispatch, useAppSelector } from "{{reduxHookFileAlias}}";
+
+export function useDataTable{{Feature}}(): {{datatableRedux}} {
+  const dispatch = useAppDispatch();
+  const {
+    pagination,
+    sorting,
+    columnFilters,
+    globalFilter,
+    columnVisibility,
+    rowSelection,
+    columnPinning,
+  } = useAppSelector((state) => state.{{featureVar}}Datatable);
+
+  return {
+    pagination,
+    sorting,
+    columnFilters,
+    globalFilter,
+    columnVisibility,
+    rowSelection,
+    columnPinning,
+
+    onPaginationChange: (updater: Updater<PaginationState>) => {
+      const nextPagination = functionalUpdate(updater, pagination);
+      dispatch(setPagination{{Feature}}(nextPagination));
+    },
+    onSortingChange: (updater: Updater<SortingState>) => {
+      const nextSorting = functionalUpdate(updater, sorting);
+      dispatch(setSorting{{Feature}}(nextSorting));
+    },
+    onColumnFiltersChange: (updater: Updater<ColumnFiltersState>) => {
+      const nextFilters = functionalUpdate(updater, columnFilters);
+      dispatch(setColumnFilters{{Feature}}(nextFilters));
+    },
+    onGlobalFilterChange: (value: string) => {
+      dispatch(setGlobalFilter{{Feature}}(value));
+    },
+    onColumnVisibilityChange: (updater: Updater<VisibilityState>) => {
+      const nextVisibility = functionalUpdate(updater, columnVisibility);
+      dispatch(setColumnVisibility{{Feature}}(nextVisibility));
+    },
+    onRowSelectionChange: (updater: Updater<RowSelectionState>) => {
+      const nextSelection = functionalUpdate(updater, rowSelection);
+      dispatch(setRowSelection{{Feature}}(nextSelection));
+    },
+    onColumnPinningChange: (updater: Updater<ColumnPinningState>) => {
+      const nextPinning = functionalUpdate(updater, columnPinning);
+      dispatch(setColumnPinning{{Feature}}(nextPinning));
+    },
+  };
+}

package/src/templates/useGetFeature.ts.tpl

@@ -0,0 +1,9 @@
+import { useQuery } from "@tanstack/react-query";
+import { get{{Feature}} } from "../../services/{{feature}}.service";
+
+export function useGet{{Feature}}() {
+  return useQuery({
+    queryKey: ["{{feature}}_{{tablekey}}"],
+    queryFn: get{{Feature}},
+  });
+}

package/src/utils/formatter.js

@@ -0,0 +1,22 @@
+export function toSnakeCase(str) {
+  return str
+    .replace(/([a-z0-9])([A-Z])/g, "$1_$2")
+    .replace(/[\s-]+/g, "_")
+    .toLowerCase();
+}
+
+export function toPascalCase(str) {
+  return str
+    .replace(/[_\-\s]+(.)?/g, (_, c) => (c ? c.toUpperCase() : ""))
+    .replace(/^(.)/, (m) => m.toUpperCase());
+}
+
+export function toCamelCase(str) {
+  const pascal = toPascalCase(str);
+  return pascal.charAt(0).toLowerCase() + pascal.slice(1);
+}
+
+export function removeExtension(filename) {
+  const lastDot = filename.lastIndexOf(".");
+  return lastDot === -1 ? filename : filename.substring(0, lastDot);
+}

package/src/utils/injectAfter.js

@@ -0,0 +1,17 @@
+import fs from "fs";
+
+export function injectAfter({ filePath, marker, content, skipIfExists }) {
+  const source = fs.readFileSync(filePath, "utf-8");
+
+  if (skipIfExists && source.includes(skipIfExists)) {
+    return; // aman, idempotent
+  }
+
+  if (!source.includes(marker)) {
+    throw new Error(`Marker not found in ${filePath}`);
+  }
+
+  const updated = source.replace(marker, `${marker}\n${content}`);
+
+  fs.writeFileSync(filePath, updated);
+}

package/src/utils/loadGeneratorConfig.js

@@ -0,0 +1,97 @@
+import fs from "fs";
+import path from "path";
+import { validateDatatable } from "./validateDatatable.js";
+
+function assert(condition, message) {
+  if (!condition) {
+    throw new Error(message);
+  }
+}
+
+function hasExtension(filename) {
+  return path.extname(filename).length > 0;
+}
+
+export function loadGeneratorConfig() {
+  const CONFIG_PATH = path.resolve(process.cwd(), "generator.config.json");
+
+  assert(fs.existsSync(CONFIG_PATH), "❌ generator.config.json not found");
+
+  const config = JSON.parse(fs.readFileSync(CONFIG_PATH, "utf-8"));
+  const paths = config.paths;
+
+  assert(paths, "❌ paths is missing in generator.config.json");
+
+  const {
+    sharedTypes,
+    sharedTypesAlias,
+    features,
+    featuresAlias,
+    redux,
+    reduxAlias,
+    reduxStore,
+    reduxHook,
+  } = paths;
+
+  // 1️⃣ Required paths (HARUS ADA SEMUA)
+  const required = {
+    sharedTypes,
+    sharedTypesAlias,
+    features,
+    featuresAlias,
+    redux,
+    reduxAlias,
+    reduxStore,
+    reduxHook,
+  };
+
+  for (const [key, value] of Object.entries(required)) {
+    assert(
+      typeof value === "string" && value.trim().length > 0,
+      `❌ paths.${key} must be defined`
+    );
+  }
+
+  // 2️⃣ File name HARUS ada extension
+  assert(
+    hasExtension(reduxStore),
+    "❌ paths.reduxStore must include file extension (e.g. store.ts)"
+  );
+
+  assert(
+    hasExtension(reduxHook),
+    "❌ paths.reduxHook must include file extension (e.g. hooks.ts)"
+  );
+
+  const datatable = config.datatable;
+
+  validateDatatable(datatable);
+
+  // 3️⃣ File HARUS exist
+  const reduxStorePath = path.resolve(process.cwd(), redux, reduxStore);
+  const reduxHookPath = path.resolve(process.cwd(), redux, reduxHook);
+
+  assert(
+    fs.existsSync(reduxStorePath),
+    `❌ Redux store file not found: ${reduxStorePath}`
+  );
+
+  assert(
+    fs.existsSync(reduxHookPath),
+    `❌ Redux hook file not found: ${reduxHookPath}`
+  );
+
+  return {
+    paths: {
+      sharedTypes,
+      sharedTypesAlias,
+      features,
+      featuresAlias,
+      redux,
+      reduxAlias,
+      reduxStore,
+      reduxHook,
+    },
+    datatable,
+  };
+}

package/src/utils/validateDatatable.js

@@ -0,0 +1,71 @@
+import fs from "fs";
+import path from "path";
+
+function validateEntry(entry, label, requiredKeys) {
+  if (!entry) {
+    throw new Error(`❌ datatable.${label} is required`);
+  }
+
+  for (const key of requiredKeys) {
+    if (!entry[key]) {
+      throw new Error(`❌ datatable.${label}.${key} is required`);
+    }
+  }
+
+  const absPath = path.resolve(process.cwd(), entry.filePath);
+
+  if (!fs.existsSync(absPath)) {
+    throw new Error(`❌ File not found: ${entry.filePath}`);
+  }
+
+  const content = fs.readFileSync(absPath, "utf-8");
+
+  const exportName = entry.component || entry.name;
+  if (exportName && !content.includes(exportName)) {
+    throw new Error(`❌ "${exportName}" is not exported in ${entry.filePath}`);
+  }
+}
+
+export function validateDatatable(datatable) {
+  if (!datatable) {
+    throw new Error("❌ datatable config is required");
+  }
+
+  /* =======================
+      COMPONENTS
+  ======================= */
+  if (!datatable.components) {
+    throw new Error("❌ datatable.components is required");
+  }
+
+  validateEntry(datatable.components.table, "components.table", [
+    "component",
+    "importPath",
+    "filePath",
+  ]);
+
+  validateEntry(datatable.components.columnHeader, "components.columnHeader", [
+    "component",
+    "importPath",
+    "filePath",
+  ]);
+
+  /* =======================
+      TYPES
+  ======================= */
+  if (!datatable.types) {
+    throw new Error("❌ datatable.types is required");
+  }
+
+  validateEntry(datatable.types.state, "types.state", [
+    "name",
+    "importPath",
+    "filePath",
+  ]);
+
+  validateEntry(datatable.types.redux, "types.redux", [
+    "name",
+    "importPath",
+    "filePath",
+  ]);
+}