@hitachivantara/uikit-cli 6.0.1

package/src/create.js

@@ -0,0 +1,172 @@
+import chalk from "chalk";
+import { Command } from "commander";
+import fs from "fs-extra";
+import inquirer from "inquirer";
+
+import { createAppShellBaseline, setupAppShell } from "./app-shell.js";
+import { createAppContents } from "./contents.js";
+import { createNavigationFiles } from "./navigation.js";
+import { updatePackageJson } from "./package.js";
+import { __dirname, toPascalCase, toSentenceCase } from "./utils.js";
+
+/** @type import("inquirer").QuestionCollection */
+const questions = [
+  {
+    type: "input",
+    name: "name",
+    message: "App name",
+    default: "uikit-app",
+    validate(val) {
+      if (typeof val === "string") {
+        return true;
+      }
+
+      return "Please enter a valid name";
+    },
+  },
+  {
+    type: "confirm",
+    name: "useAppShell",
+    message: "Use App Shell?",
+    default: true,
+  },
+  {
+    type: "checkbox",
+    message: "Do you want to enable App Shell features? If so, choose which:",
+    name: "appShellFeatures",
+    choices: ["Help Link", "Color Mode Switcher", "App Switcher"],
+    when(answers) {
+      return answers.useAppShell;
+    },
+    filter(val) {
+      return val.map((v) => toPascalCase(v));
+    },
+  },
+  {
+    type: "confirm",
+    name: "appShellAutoMenu",
+    message: "Use automatic menu generation in App Shell?",
+    default: true,
+    when(answers) {
+      return answers.useAppShell;
+    },
+  },
+  {
+    type: "checkbox",
+    message: "Do you want to use templates? If so, choose which:",
+    name: "templates",
+    choices: fs
+      .readdirSync(`${__dirname}/templates`, { withFileTypes: true })
+      .filter((d) => d.isDirectory())
+      .map((d) => toSentenceCase(d.name)),
+    filter(val) {
+      return val.map((v) => toPascalCase(v));
+    },
+  },
+];
+
+const createAppBaseline = (appPath) => {
+  const basePath = `${__dirname}/baselines/vite`;
+
+  console.log(`\nCreating a new UI Kit app in\n${chalk.green(appPath)}\n`);
+
+  // copy baseline contents
+  fs.copySync(basePath, appPath, { overwrite: true });
+  fs.moveSync(`${appPath}/_gitignore`, `${appPath}/.gitignore`);
+  fs.moveSync(`${appPath}/_package.json`, `${appPath}/package.json`);
+  fs.moveSync(`${appPath}/_oxlintrc.json`, `${appPath}/.oxlintrc.json`);
+};
+
+const create = async ({
+  name = "uikit-app",
+  useAppShell = true,
+  appShellFeatures = [],
+  appShellAutoMenu = true,
+  templates = [],
+}) => {
+  console.log(chalk.cyan("\nUI kit app generator\n"));
+
+  const packageName = name
+    .replace(/([a-z])([A-Z])/g, "$1-$2")
+    .toLowerCase()
+    .replace(/ /g, "-")
+    .replace(/[^a-z0-9-]/g, "");
+  const appPath = `${process.cwd()}/${packageName}`;
+
+  // create app baseline from receipt
+  if (useAppShell) {
+    await createAppShellBaseline(appPath);
+  } else {
+    createAppBaseline(appPath);
+  }
+  // create app contents from recipe templates selection
+  const dependencies = await createAppContents(
+    appPath,
+    name,
+    templates,
+    useAppShell,
+  );
+
+  if (useAppShell) {
+    await setupAppShell(
+      appPath,
+      name,
+      appShellFeatures,
+      appShellAutoMenu,
+      packageName,
+    );
+    console.log(
+      `App Shell documentation: ${chalk.cyan(
+        "https://pentaho.github.io/uikit-docs/master/app-shell",
+      )}`,
+    );
+  } else {
+    await createNavigationFiles(appPath);
+  }
+
+  updatePackageJson(appPath, packageName, dependencies);
+
+  console.log(`\nDone! Now run:\n`);
+  console.log(` cd ${chalk.green(packageName)}`);
+  console.log(` npm install`);
+  console.log(` npm run dev`);
+};
+
+export const createCommand = new Command()
+  .command("create [name]")
+  .description(
+    "Create new UI Kit app using the provided baselines and templates",
+  )
+  .option("-w --without-app-shell", "Whether to not include AppShell.")
+  .option(
+    "--app-shell-features <appShellFeatures>",
+    "AppShell features to enable (comma separated).",
+  )
+  .option(
+    "--disable-file-based-routing",
+    "Disable AppShell options for file based routing and automatic menu generation.",
+  )
+  .option("-t --templates <templates>", "Templates to use (comma separated).")
+  .action(async (name, options) => {
+    const isInteractive = !name;
+
+    if (isInteractive) {
+      const results = await inquirer.prompt(questions);
+      create(results);
+    } else {
+      const {
+        withoutAppShell,
+        appShellFeatures,
+        disableFileBasedRouting,
+        templates,
+      } = options;
+
+      create({
+        name,
+        useAppShell: !withoutAppShell,
+        appShellFeatures: appShellFeatures?.split(",").map(toPascalCase),
+        appShellAutoMenu: !disableFileBasedRouting,
+        templates: templates?.split(",").map(toPascalCase),
+      });
+    }
+  });

package/src/index.js

@@ -0,0 +1,22 @@
+#!/usr/bin/env node
+import chalk from "chalk";
+import { Command } from "commander";
+import fs from "fs-extra";
+
+import { createCommand as create } from "./create.js";
+import { __rootPath } from "./utils.js";
+
+const pkg = JSON.parse(fs.readFileSync(`${__rootPath}/package.json`, "utf-8"));
+
+const program = new Command(pkg.name)
+  // metadata
+  .description(pkg.description)
+  .version(pkg.version)
+  // commands
+  .addCommand(create);
+
+try {
+  program.parse(process.argv);
+} catch (error) {
+  if (error) console.log(chalk.red(error));
+}

package/src/navigation.js

@@ -0,0 +1,21 @@
+import { join } from "node:path";
+import fs from "fs-extra";
+import nodePlop from "node-plop";
+
+import { __dirname } from "./utils.js";
+
+const plop = await nodePlop(`${__dirname}/plopfile.js`);
+
+const createRoute = plop.getGenerator("createRoute");
+
+export const createNavigationFiles = async (path) => {
+  const pages = fs.readdirSync(join(path, "src/pages"));
+
+  /* eslint-disable no-await-in-loop */
+  for (const page of pages) {
+    if (page === "NotFound") break;
+
+    // create routes file from plop template
+    await createRoute.runActions({ path, name: page });
+  }
+};

package/src/package.js

@@ -0,0 +1,37 @@
+import fs from "fs-extra";
+
+// utility function to order alphabetically an object's keys
+const sortObjectKeys = (obj) => {
+  return Object.keys(obj)
+    .sort()
+    .reduce((result, key) => {
+      result[key] = obj[key];
+      return result;
+    }, {});
+};
+
+export const updatePackageJson = async (appPath, packageName, dependencies) => {
+  // replace package name
+  const pckgFile = `${appPath}/package.json`;
+  const pckgData = fs.readFileSync(pckgFile, { encoding: "utf-8" });
+  const pckgUpdated = pckgData.replace("uikit-app", packageName);
+  fs.writeFileSync(pckgFile, pckgUpdated);
+
+  // if there are any dependencies.dependencies or dependencies.devDependencies, append them to the package.json file
+  if (Object.keys(dependencies).length) {
+    const packageJsonPath = `${appPath}/package.json`;
+    const packageJson = fs.readJsonSync(packageJsonPath);
+
+    if (dependencies.dependencies != null) {
+      Object.assign(packageJson.dependencies, dependencies.dependencies);
+      packageJson.dependencies = sortObjectKeys(packageJson.dependencies);
+    }
+
+    if (dependencies.devDependencies != null) {
+      Object.assign(packageJson.devDependencies, dependencies.devDependencies);
+      packageJson.devDependencies = sortObjectKeys(packageJson.devDependencies);
+    }
+
+    fs.writeJsonSync(packageJsonPath, packageJson, { spaces: 2 });
+  }
+};

package/src/plop-templates/README.md.hbs

@@ -0,0 +1,10 @@
+# {{appName}}
+
+## How to use
+
+Install it and run:
+
+```sh
+npm install
+npm run dev
+```

package/src/plop-templates/app-shell/app-shell.config.ts.hbs

@@ -0,0 +1,54 @@
+import type { HvAppShellConfig } from "@hitachivantara/app-shell-vite-plugin";
+
+export default (): HvAppShellConfig => ({
+  name: "{{appName}}",
+
+  baseUrl: "/",
+
+  logo: {
+    name: "PENTAHO",
+  },
+  theming: {
+    theme: "pentaho",
+    colorMode: "light",
+  },
+
+  {{#if feats}}
+  header: {
+    actions: [
+    {{#each feats}}
+      { bundle: "{{bundle}}"{{#if config}},
+        config: {{{config}}}
+      {{/if}}
+      }{{#unless @last}},{{/unless}}
+    {{/each}}
+    ]
+  },
+  {{/if}}
+
+  mainPanel: {
+    maxWidth: "xl"{{#unless appShellAutoMenu}},
+    views: [
+    {{#each pages}}
+        { bundle: "@self/{{pagesPath}}/{{name}}.js", route: "/{{kebabCase name}}" }{{#unless @last}},{{/unless}}
+    {{/each}}
+    ]
+    {{/unless}}
+  },
+
+  {{#unless appShellAutoMenu}}
+  menu: [
+  {{#each pages}}
+    { label: "key_{{name}}", target: "/{{kebabCase name}}" }{{#unless @last}},{{/unless}}
+  {{/each}}
+  ],
+
+  translations: {
+    en: {
+    {{#each pages}}
+      key_{{name}}: "{{pageName}}"{{#unless @last}},{{/unless}}
+    {{/each}}
+    }
+  }
+  {{/unless}}
+});

package/src/plop-templates/app-shell/index.html.hbs

@@ -0,0 +1,15 @@
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{appName}}</title>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&family=Open+Sans:wght@400;600&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <div id="hv-root"></div>
+    <script type="module" src="/virtual/main.tsx"></script>
+  </body>
+</html>

package/src/plopfile.js

@@ -0,0 +1,61 @@
+const createRoute = {
+  actions: [
+    {
+      type: "append",
+      path: "{{path}}/src/routes.tsx",
+      pattern: "// APP ROUTES",
+      template: `  { path: "{{kebabCase name}}", lazy: () => import("./pages/{{name}}") },`,
+    },
+  ],
+};
+
+const createReadMe = {
+  actions: [
+    {
+      type: "add",
+      path: "{{path}}/README.md",
+      templateFile: "plop-templates/README.md.hbs",
+    },
+  ],
+};
+
+const createAppShellIndexHtml = {
+  actions: [
+    {
+      type: "add",
+      path: "{{path}}/index.html",
+      templateFile: "plop-templates/app-shell/index.html.hbs",
+      force: true,
+    },
+  ],
+};
+
+const createAppShellConfig = {
+  actions: [
+    {
+      type: "add",
+      path: "{{path}}/app-shell.config.ts",
+      templateFile: "plop-templates/app-shell/app-shell.config.ts.hbs",
+    },
+  ],
+};
+
+const createAppShellAutoMenu = {
+  actions: [
+    {
+      type: "append",
+      path: "{{path}}/vite.config.ts",
+      pattern: "autoViewsAndRoutes: true,",
+      template: `      autoMenu: true,`,
+    },
+  ],
+};
+
+export default (plop) => {
+  plop.setHelper("precurly", (t) => `${t}`);
+  plop.setGenerator("createRoute", createRoute);
+  plop.setGenerator("createReadMe", createReadMe);
+  plop.setGenerator("createAppShellIndexHtml", createAppShellIndexHtml);
+  plop.setGenerator("createAppShellConfig", createAppShellConfig);
+  plop.setGenerator("createAppShellAutoMenu", createAppShellAutoMenu);
+};

package/src/templates/AssetInventory/CardView.tsx

@@ -0,0 +1,167 @@
+import {
+  HvActionBar,
+  HvButton,
+  HvCard,
+  HvCardContent,
+  HvCardHeader,
+  HvCardMedia,
+  HvCheckBox,
+  HvSimpleGrid,
+  HvSkeleton,
+  HvTableInstance,
+  HvTypography,
+} from "@hitachivantara/uikit-react-core";
+
+import { AssetInventoryEntry, getStatusIcon } from "./data";
+
+interface CardViewProps {
+  id?: string;
+  instance: HvTableInstance<AssetInventoryEntry, string>;
+  loading?: boolean;
+}
+
+export const CardView = ({ id, instance, loading }: CardViewProps) => {
+  const selectedCardsIds = instance.selectedFlatRows.map((r) => r.id);
+  const mode = "wave";
+
+  const items = loading
+    ? Array.from({ length: 6 }).map((_, i) => ({
+        id: String(i),
+        name: "",
+        eventType: "",
+        severity: "",
+        status: "",
+        priority: "",
+        image: "",
+        statusColor: "",
+      }))
+    : instance.page.map((p) => ({ ...p.original, id: p.id }));
+
+  return (
+    <HvSimpleGrid
+      id={id}
+      breakpoints={[
+        { minWidth: 1919, cols: 4, spacing: "md" },
+        { minWidth: 960, cols: 3, spacing: "md" },
+        { minWidth: 600, cols: 2, spacing: "sm" },
+        { minWidth: 0, cols: 1, spacing: "sm" },
+      ]}
+    >
+      {items.map((item) => {
+        const rowId = item?.id;
+        const statusColor = item?.statusColor;
+
+        return (
+          <HvCard
+            selectable
+            selected={rowId ? selectedCardsIds.includes(rowId) : undefined}
+            bgcolor="bgContainer"
+            key={item.id}
+            style={{ width: "100%" }}
+            statusColor={statusColor}
+            icon={
+              !loading ? (
+                getStatusIcon(statusColor)
+              ) : (
+                <HvSkeleton
+                  hidden={!loading}
+                  variant="circle"
+                  animation="wave"
+                  width={32}
+                  height={32}
+                />
+              )
+            }
+          >
+            <HvCardHeader
+              title={
+                loading ? (
+                  <HvSkeleton animation="wave" width="50%" />
+                ) : (
+                  item.name
+                )
+              }
+            />
+            <div
+              style={{
+                display: "grid",
+                gridTemplateColumns: "1fr 1fr",
+              }}
+            >
+              <div>
+                <HvCardContent>
+                  <HvTypography variant="label">Event</HvTypography>
+                  <HvTypography noWrap component="div">
+                    <HvSkeleton hidden={!loading} animation={mode}>
+                      {item.eventType}
+                    </HvSkeleton>
+                  </HvTypography>
+                </HvCardContent>
+                <HvCardContent>
+                  <HvTypography variant="label">Severity</HvTypography>
+                  <HvTypography noWrap component="div">
+                    <HvSkeleton hidden={!loading} animation={mode}>
+                      {item.severity}
+                    </HvSkeleton>
+                  </HvTypography>
+                </HvCardContent>
+              </div>
+              <div>
+                <HvCardContent>
+                  <HvTypography variant="label">Status</HvTypography>
+                  <HvTypography noWrap component="div">
+                    <HvSkeleton hidden={!loading} animation={mode}>
+                      {item.status}{" "}
+                    </HvSkeleton>
+                  </HvTypography>
+                </HvCardContent>
+                <HvCardContent>
+                  <HvTypography variant="label">Priority</HvTypography>
+                  <HvTypography noWrap component="div">
+                    <HvSkeleton hidden={!loading} animation={mode}>
+                      {item.priority}{" "}
+                    </HvSkeleton>
+                  </HvTypography>
+                </HvCardContent>
+              </div>
+            </div>
+            <HvSkeleton
+              hidden={!loading}
+              width="auto"
+              variant="square"
+              animation={mode}
+              backgroundImage="https://storage.googleapis.com/proudcity/mebanenc/uploads/2021/03/placeholder-image.png"
+            >
+              <HvCardMedia
+                component="img"
+                alt={item.name}
+                height={140}
+                image={item.image}
+              />
+            </HvSkeleton>
+            <HvActionBar>
+              <HvSkeleton hidden={!loading} variant="square" animation={mode}>
+                <HvCheckBox
+                  onChange={
+                    rowId
+                      ? () => instance.toggleRowSelected?.(rowId)
+                      : undefined
+                  }
+                  checked={instance.selectedFlatRows.some(
+                    (r) => r.id === rowId,
+                  )}
+                  value="value"
+                  inputProps={{ "aria-label": "Tick to select the card" }}
+                />
+              </HvSkeleton>
+              <div aria-hidden style={{ flex: 1 }} />
+              <HvSkeleton hidden={!loading} variant="square" animation={mode}>
+                <HvButton variant="secondaryGhost">View</HvButton>
+              </HvSkeleton>
+            </HvActionBar>
+          </HvCard>
+        );
+      })}
+    </HvSimpleGrid>
+  );
+};

package/src/templates/AssetInventory/ListView.tsx

@@ -0,0 +1,56 @@
+import {
+  HvTable,
+  HvTableBody,
+  HvTableCell,
+  HvTableColumnConfig,
+  HvTableContainer,
+  HvTableHead,
+  HvTableHeader,
+  HvTableInstance,
+  HvTableRow,
+} from "@hitachivantara/uikit-react-core";
+
+import { AssetInventoryEntry } from "./data";
+
+interface ListViewProps {
+  id?: string;
+  columns: HvTableColumnConfig<AssetInventoryEntry, string>[];
+  instance: HvTableInstance<AssetInventoryEntry, string>;
+}
+
+export const ListView = ({ id, instance, columns }: ListViewProps) => {
+  return (
+    <HvTableContainer style={{ padding: "2px" }} id={id}>
+      <HvTable variant="listrow" {...instance.getTableProps()}>
+        <HvTableHead>
+          <HvTableRow>
+            <HvTableCell variant="listcheckbox" />
+            {columns.map((col) => (
+              <HvTableHeader key={col.Header}>{col.Header}</HvTableHeader>
+            ))}
+          </HvTableRow>
+        </HvTableHead>
+        <HvTableBody withNavigation {...instance.getTableBodyProps()}>
+          {instance.page.map((row) => {
+            instance.prepareRow(row);
+            const { key, ...rowProps } = row.getRowProps();
+            return (
+              <HvTableRow key={key} {...rowProps}>
+                {row.cells.map((cell) => {
+                  const { key: cellKey, ...cellProps } = cell.getCellProps();
+                  return (
+                    <HvTableCell key={cellKey} {...cellProps}>
+                      {cell.render("Cell")}
+                    </HvTableCell>
+                  );
+                })}
+              </HvTableRow>
+            );
+          })}
+        </HvTableBody>
+      </HvTable>
+    </HvTableContainer>
+  );
+};
+
+export default ListView;