@unifylib/ui-lib 1.1.64 → 1.1.67

package/cli/generators/table-screen.js

@@ -0,0 +1,181 @@
+"use strict";
+
+/**
+ * @param {{
+ *  kebab: string,
+ *  pascal: string,
+ *  labelsSection: string,
+ *  apiUri: string,
+ *  importPath: string,
+ * }} ctx
+ */
+function generate(ctx) {
+  const fileBase = ctx.kebab;
+
+  const settings = `import { Validators } from "@angular/forms";
+import {
+  ButtonActionSettings,
+  FieldInfo,
+  FilterRequest,
+  PageInfo,
+  ReportRequest,
+  TableColumn,
+} from "${ctx.importPath}";
+
+export const PAGE_INFO: PageInfo = {
+  id: "${ctx.kebab}",
+  labelsSection: "${ctx.labelsSection}",
+  hasAddButton: true,
+  apiUri: "${ctx.apiUri}",
+  selfRouting: true,
+  listRoutePath: "/${ctx.kebab}",
+  draftSupported: true,
+  pageSize: 10,
+};
+
+export const COLUMNS: TableColumn<Record<string, unknown>>[] = [
+  { property: "id", type: "text", enableSorting: true, visible: true, label: "id" },
+  { property: "name", type: "text", enableSorting: true, visible: true, label: "name" },
+];
+
+export const FILTER_FIELDS: FieldInfo[] = [
+  new FieldInfo({
+    property: "name",
+    row: 1,
+    type: "text",
+    label: "name",
+    advancedFilter: true,
+    filterOperator: "LIKE",
+    validators: [Validators.maxLength(30)],
+    maxLength: 30,
+  } as FieldInfo),
+];
+
+function buildReportRequest(): ReportRequest {
+  const filterRequest = new FilterRequest(PAGE_INFO.pageSize ?? 10);
+  filterRequest.columns = COLUMNS.filter((c) => c.visible !== false).map((c) => c.property);
+  return new ReportRequest({ filterRequest });
+}
+
+export const REPORT_REQUEST: ReportRequest = buildReportRequest();
+
+export const LIST_ACTIONS: ButtonActionSettings[] = [
+  new ButtonActionSettings({
+    key: 1,
+    id: "view",
+    label: "VIEW",
+    linkHref: (row: unknown) => {
+      const id = (row as { id?: number }).id;
+      return id != null ? \`/${ctx.kebab}/view/\${id}\` : undefined;
+    },
+  } as ButtonActionSettings),
+];
+
+export const TOOLBAR_ACTIONS: ButtonActionSettings[] = [
+  new ButtonActionSettings({
+    key: 1,
+    id: "create",
+    label: "ADD_NEW",
+    linkHref: "/${ctx.kebab}/new",
+  } as ButtonActionSettings),
+];
+`;
+
+  const componentTs = `import { ChangeDetectionStrategy, Component, inject } from "@angular/core";
+import { Router } from "@angular/router";
+import { TranslateModule } from "@ngx-translate/core";
+import {
+  BaseTableComponent,
+  ButtonActionSettings,
+  Filter,
+} from "${ctx.importPath}";
+import {
+  COLUMNS,
+  FILTER_FIELDS,
+  LIST_ACTIONS,
+  PAGE_INFO,
+  REPORT_REQUEST,
+  TOOLBAR_ACTIONS,
+} from "./${fileBase}.settings";
+
+@Component({
+  selector: "app-${fileBase}",
+  standalone: true,
+  imports: [BaseTableComponent, TranslateModule],
+  templateUrl: "./${fileBase}.component.html",
+  styleUrls: ["./${fileBase}.component.scss"],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ${ctx.pascal}Component {
+  private readonly router = inject(Router);
+
+  readonly pageInfo = PAGE_INFO;
+  readonly columnsDefinition = COLUMNS;
+  readonly filterFieldDefinitions = FILTER_FIELDS;
+  readonly reportRequest = REPORT_REQUEST;
+  readonly filters: Filter[] = [];
+  readonly listActions = LIST_ACTIONS;
+  readonly toolbarActions = TOOLBAR_ACTIONS;
+  readonly isPending = false;
+
+  onListActionClicked(event: {
+    action: ButtonActionSettings;
+    row: unknown;
+    isPending: boolean;
+  }): void {
+    const href =
+      typeof event.action.linkHref === "function"
+        ? event.action.linkHref(event.row)
+        : event.action.linkHref;
+    if (href) {
+      void this.router.navigateByUrl(href);
+    }
+  }
+
+  onToolbarButton(action: ButtonActionSettings): void {
+    if (typeof action.linkHref === "string") {
+      void this.router.navigateByUrl(action.linkHref);
+    }
+  }
+}
+`;
+
+  const componentHtml = `<app-base-table
+  [pageInfo]="pageInfo"
+  [columns]="columnsDefinition"
+  [reportRequest]="reportRequest"
+  [filterFields]="filterFieldDefinitions"
+  [isPending]="isPending"
+  [filters]="filters"
+  [listAction]="listActions"
+  [extraActions]="toolbarActions"
+  [buttonsDisplayMode]="'list'"
+  (listActionClicked)="onListActionClicked($event)"
+  (buttonClicked)="onToolbarButton($event)">
+</app-base-table>
+`;
+
+  const componentScss = `:host {
+  display: block;
+}
+`;
+
+  return [
+    { relative: `${fileBase}.settings.ts`, content: settings },
+    { relative: `${fileBase}.component.ts`, content: componentTs },
+    { relative: `${fileBase}.component.html`, content: componentHtml },
+    { relative: `${fileBase}.component.scss`, content: componentScss },
+  ];
+}
+
+function getTranslations(ctx) {
+  return {
+    [`${ctx.labelsSection}.list_title`]: `${ctx.pascal} List`,
+    [`${ctx.labelsSection}.id`]: "ID",
+    [`${ctx.labelsSection}.name`]: "Name",
+    VIEW: "View",
+    ADD_NEW: "Add new",
+  };
+}
+
+module.exports = { generate, getTranslations };

package/cli/index.js

@@ -0,0 +1,185 @@
+#!/usr/bin/env node
+"use strict";
+
+const path = require("path");
+const {
+  kebabCase,
+  pascalCase,
+  upperSnakeFromKebab,
+  lastPathSegment,
+  writeFiles,
+  upsertI18nEntries,
+} = require("./utils");
+
+const GENERATORS = {
+  "form-screen": require("./generators/form-screen.js"),
+  "table-screen": require("./generators/table-screen.js"),
+  "section-form": require("./generators/section-form.js"),
+  "line-editor": require("./generators/line-editor.js"),
+  dashboard: require("./generators/dashboard.js"),
+  "permission-matrix": require("./generators/permission-matrix.js"),
+};
+
+function printHelp() {
+  console.log(`
+iq-ui — scaffold Angular screens that use @unifylib/ui-lib
+
+Usage:
+  iq-ui -g <type> <destination> [options]
+
+Types:
+  form-screen        app-base-form-canvas + settings
+  table-screen       app-base-table + settings
+  section-form       lib-section-form-canvas + settings
+  line-editor        app-item-line-editor + settings
+  dashboard          lib-action-card grid (no settings file)
+  permission-matrix  lib-permission-matrix + settings
+
+Options:
+  --name <n>              File/class base name (default: last segment of destination)
+  --labels-section <s>   i18n labelsSection (default: UPPER_SNAKE from name)
+  --api-uri <u>          API path for PageInfo.apiUri (default: /<name>)
+  --fields-count <n>     Placeholder fields (default: 6; form-screen, section-form, line-editor)
+  --import-path <p>      Library import (default: @iq/ui-lib)
+  --i18n-path <p>        Optional translation file/folder (example: src/assets/en.json or src/assets)
+  --dry-run              Print files that would be written
+  -h, --help             Show this help
+
+Examples (after npm install @unifylib/ui-lib, use the package binary; do not run \`npx iq-ui\`, which looks up a wrong package on npm):
+  npx -p @unifylib/ui-lib iq-ui -g form-screen src/app/registration --i18n-path src/assets/en.json
+  npx -p @unifylib/ui-lib iq-ui -g table-screen src/app/devices --labels-section DEVICE --api-uri /devices/list
+  npx -p @unifylib/ui-lib iq-ui -g dashboard src/app/home --import-path @unifylib/ui-lib
+
+  Local dev / linked build:
+  node node_modules/@unifylib/ui-lib/cli/index.js -g form-screen src/app/registration
+`);
+}
+
+/**
+ * @returns {{
+ *   type?: string,
+ *   destination?: string,
+ *   name?: string,
+ *   labelsSection?: string,
+ *   apiUri?: string,
+ *   fieldsCount: number,
+ *   importPath: string,
+ *   i18nPath?: string,
+ *   dryRun: boolean,
+ *   help: boolean,
+ * }}
+ */
+function parseArgs(argv) {
+  const out = {
+    fieldsCount: 6,
+    importPath: "@iq/ui-lib",
+    dryRun: false,
+    help: false,
+  };
+
+  for (let i = 2; i < argv.length; i++) {
+    const a = argv[i];
+    if (a === "-h" || a === "--help") {
+      out.help = true;
+      continue;
+    }
+    if (a === "--dry-run") {
+      out.dryRun = true;
+      continue;
+    }
+    if (a === "-g" || a === "--generate") {
+      out.type = argv[++i];
+      continue;
+    }
+    if (a === "--name") {
+      out.name = argv[++i];
+      continue;
+    }
+    if (a === "--labels-section") {
+      out.labelsSection = argv[++i];
+      continue;
+    }
+    if (a === "--api-uri") {
+      out.apiUri = argv[++i];
+      continue;
+    }
+    if (a === "--fields-count") {
+      out.fieldsCount = parseInt(argv[++i], 10) || 6;
+      continue;
+    }
+    if (a === "--import-path") {
+      out.importPath = argv[++i];
+      continue;
+    }
+    if (a === "--i18n-path") {
+      out.i18nPath = argv[++i];
+      continue;
+    }
+    if (a.startsWith("-")) {
+      console.error("Unknown option:", a);
+      process.exitCode = 1;
+      out.help = true;
+      return out;
+    }
+    if (!out.destination) {
+      out.destination = a;
+    } else {
+      console.error("Unexpected argument:", a);
+      process.exitCode = 1;
+      out.help = true;
+      return out;
+    }
+  }
+  return out;
+}
+
+function main() {
+  const args = parseArgs(process.argv);
+  if (args.help) {
+    printHelp();
+    process.exit(process.exitCode || 0);
+  }
+  if (!args.type || !args.destination) {
+    console.error("Missing required: -g <type> and <destination>\n");
+    printHelp();
+    process.exit(1);
+  }
+
+  const gen = GENERATORS[args.type];
+  if (!gen || typeof gen.generate !== "function") {
+    console.error("Unknown generator type:", args.type);
+    printHelp();
+    process.exit(1);
+  }
+
+  const rawName = args.name || lastPathSegment(args.destination);
+  const kebab = kebabCase(rawName);
+  const pascal = pascalCase(rawName);
+  const labelsSection = args.labelsSection || upperSnakeFromKebab(kebab);
+  const apiUri = args.apiUri != null ? args.apiUri : `/${kebab}`;
+
+  const destDir = path.isAbsolute(args.destination)
+    ? args.destination
+    : path.join(process.cwd(), args.destination);
+
+  const ctx = {
+    kebab,
+    pascal,
+    labelsSection,
+    apiUri,
+    importPath: args.importPath,
+    fieldsCount: args.fieldsCount,
+  };
+
+  const files = gen.generate(ctx);
+  writeFiles({ destDir, dryRun: args.dryRun }, files);
+
+  if (args.i18nPath && typeof gen.getTranslations === "function") {
+    const translations = gen.getTranslations(ctx);
+    if (translations && Object.keys(translations).length > 0) {
+      upsertI18nEntries(args.i18nPath, translations, args.dryRun);
+    }
+  }
+}
+
+main();

package/cli/utils.js

@@ -0,0 +1,228 @@
+"use strict";
+
+const fs = require("fs");
+const path = require("path");
+
+/**
+ * @param {string} destPath
+ * @returns {string}
+ */
+function lastPathSegment(destPath) {
+  const normalized = destPath.replace(/\\/g, "/").replace(/\/+$/, "");
+  const parts = normalized.split("/").filter(Boolean);
+  return parts[parts.length - 1] || "feature";
+}
+
+/**
+ * @param {string} str
+ * @returns {string}
+ */
+function kebabCase(str) {
+  return String(str)
+    .replace(/([a-z])([A-Z])/g, "$1-$2")
+    .replace(/[\s_]+/g, "-")
+    .toLowerCase()
+    .replace(/[^a-z0-9-]/g, "")
+    .replace(/-+/g, "-")
+    .replace(/^-|-$/g, "") || "feature";
+}
+
+/**
+ * @param {string} str
+ * @returns {string}
+ */
+function pascalCase(str) {
+  return kebabCase(str)
+    .split("-")
+    .filter(Boolean)
+    .map((s) => s[0].toUpperCase() + s.slice(1))
+    .join("");
+}
+
+/**
+ * @param {string} kebab
+ * @returns {string}
+ */
+function upperSnakeFromKebab(kebab) {
+  return kebabCase(kebab)
+    .split("-")
+    .filter(Boolean)
+    .map((s) => s.toUpperCase())
+    .join("_");
+}
+
+/**
+ * @param {string} destDir
+ * @param {boolean} dryRun
+ */
+function ensureDir(destDir, dryRun) {
+  if (dryRun) return;
+  fs.mkdirSync(destDir, { recursive: true });
+}
+
+/**
+ * @param {string} filePath
+ * @param {string} content
+ * @param {boolean} dryRun
+ */
+function writeFile(filePath, content, dryRun) {
+  if (dryRun) {
+    console.log(`[dry-run] would write ${filePath} (${content.length} bytes)`);
+    return;
+  }
+  fs.writeFileSync(filePath, content, "utf8");
+  console.log(`Wrote ${filePath}`);
+}
+
+/**
+ * @param {{ destDir: string, dryRun: boolean }} opts
+ * @param {Array<{ relative: string, content: string }>} files
+ */
+function writeFiles(opts, files) {
+  ensureDir(opts.destDir, opts.dryRun);
+  for (const f of files) {
+    const filePath = path.join(opts.destDir, f.relative);
+    writeFile(filePath, f.content, opts.dryRun);
+  }
+}
+
+/**
+ * @param {Record<string, unknown>} target
+ * @param {string[]} pathParts
+ * @param {string} value
+ */
+function setNested(target, pathParts, value) {
+  let cursor = target;
+  for (let i = 0; i < pathParts.length; i++) {
+    const part = pathParts[i];
+    const isLeaf = i === pathParts.length - 1;
+    if (isLeaf) {
+      cursor[part] = value;
+      return;
+    }
+    if (typeof cursor[part] !== "object" || cursor[part] === null || Array.isArray(cursor[part])) {
+      cursor[part] = {};
+    }
+    cursor = /** @type {Record<string, unknown>} */ (cursor[part]);
+  }
+}
+
+/**
+ * @param {string} targetPath
+ * @returns {string[]}
+ */
+function resolveJsonTargets(targetPath) {
+  const fullPath = path.isAbsolute(targetPath) ? targetPath : path.join(process.cwd(), targetPath);
+  if (!fs.existsSync(fullPath)) {
+    return [fullPath];
+  }
+
+  const stat = fs.statSync(fullPath);
+  if (stat.isFile()) {
+    return [fullPath];
+  }
+
+  if (!stat.isDirectory()) {
+    return [fullPath];
+  }
+
+  /** @type {string[]} */
+  const out = [];
+  /** @param {string} fileName */
+  function isTranslationFileName(fileName) {
+    const lower = fileName.toLowerCase();
+    // Common translation file patterns
+    // - en.json / ar.json
+    // - en-us.json / ar-QA.json
+    // - messages.en.json / messages-ar.json
+    return (
+      /^(en|ar)([-_][a-z0-9]+)*\.json$/i.test(lower) ||
+      /\.((en|ar)([-_][a-z0-9]+)*)\.json$/i.test(lower) ||
+      lower.includes("i18n")
+    );
+  }
+  /** @param {string} dir */
+  function walk(dir) {
+    const entries = fs.readdirSync(dir, { withFileTypes: true });
+    for (const entry of entries) {
+      const entryPath = path.join(dir, entry.name);
+      if (entry.isDirectory()) {
+        walk(entryPath);
+      } else if (entry.isFile() && isTranslationFileName(entry.name)) {
+        out.push(entryPath);
+      }
+    }
+  }
+
+  walk(fullPath);
+  return out;
+}
+
+/**
+ * @param {string} i18nPath
+ * @param {Record<string, string>} entries
+ * @param {boolean} dryRun
+ */
+function upsertI18nEntries(i18nPath, entries, dryRun) {
+  const targets = resolveJsonTargets(i18nPath);
+  if (targets.length === 0) {
+    console.log(`No JSON files found in i18n target: ${i18nPath}`);
+    return;
+  }
+
+  for (const fullPath of targets) {
+  if (dryRun) {
+    console.log(`[dry-run] would update i18n file ${fullPath} with ${Object.keys(entries).length} keys`);
+    continue;
+  }
+
+  let data = {};
+  if (fs.existsSync(fullPath)) {
+    const raw = fs.readFileSync(fullPath, "utf8").trim();
+    data = raw ? JSON.parse(raw) : {};
+  } else {
+    const parent = path.dirname(fullPath);
+    fs.mkdirSync(parent, { recursive: true });
+  }
+
+  for (const [key, value] of Object.entries(entries)) {
+    const parts = key.split(".").filter(Boolean);
+    if (parts.length === 0) continue;
+    setNested(data, parts, value);
+  }
+
+  fs.writeFileSync(fullPath, `${JSON.stringify(data, null, 2)}\n`, "utf8");
+  console.log(`Updated i18n ${fullPath}`);
+  }
+}
+
+/**
+ * Generate placeholder FieldInfo rows (2 per row by default).
+ * @param {number} count
+ * @param {number} perRow
+ * @param {string} indent
+ * @returns {string}
+ */
+function buildFieldInfoLines(count, perRow, indent) {
+  const lines = [];
+  for (let i = 1; i <= count; i++) {
+    const row = Math.ceil(i / perRow);
+    lines.push(
+      `${indent}new FieldInfo({ row: ${row}, property: "field${i}", label: "field${i}", required: false, type: "text", validators: [Validators.maxLength(100)], validationMessages: { maxlength: "VALIDATION_MAX_100" } })`
+    );
+  }
+  return lines.join(",\n");
+}
+
+module.exports = {
+  lastPathSegment,
+  kebabCase,
+  pascalCase,
+  upperSnakeFromKebab,
+  ensureDir,
+  writeFile,
+  writeFiles,
+  buildFieldInfoLines,
+  resolveJsonTargets,
+  upsertI18nEntries,
+};