@hitachivantara/uikit-cli 6.0.1

package/README.md

@@ -0,0 +1,46 @@
+# Hitachi Vantara UI Kit CLI
+
+The Hitachi Vantara CLI for UI Kit apps.
+
+This CLI provides a way to automate tasks you regularly perform as part of your development workflow.
+
+Whether is quickly start a new application or scaffolding out templates and components, it will help you standardize these tasks in a consistent, and predictable manner.
+
+## Usage
+
+For usage documentation, run the CLI with the `--help` option for any `<command>`. Examples:
+
+```sh
+npx @hitachivantara/uikit-cli@latest --help
+npx @hitachivantara/uikit-cli@latest <command> --help
+```
+
+## Creating an App
+
+You can create a new app using the different baselines provided and our official supported templates.
+
+To get started, use the following command:
+
+```sh
+npx @hitachivantara/uikit-cli@latest create
+```
+
+It launches an interactive experience that guides you through setting up a new app.
+
+You can also directly specify the app name and the template to use. For example:
+
+```sh
+npx @hitachivantara/uikit-cli@latest create MyAppName --templates Form
+```
+
+## How to test
+
+You can run the project locally by executing the following command:
+
+```
+node <path-to-repo>/uikit-cli/src/index.js create
+```
+
+## License
+
+This project is licensed under the terms of the [Apache 2.0 license](/LICENSE.md).

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@hitachivantara/uikit-cli",
+  "version": "6.0.1",
+  "private": false,
+  "type": "module",
+  "author": "Hitachi Vantara UI Kit Team",
+  "description": "The Hitachi Vantara CLI for UI Kit apps.",
+  "homepage": "https://github.com/pentaho/hv-uikit-react",
+  "license": "Apache-2.0",
+  "main": "src/index.js",
+  "bin": {
+    "uikit-cli": "src/index.js"
+  },
+  "keywords": [
+    "hitachivantara",
+    "uikit-cli",
+    "cli"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pentaho/hv-uikit-react.git",
+    "directory": "packages/cli"
+  },
+  "bugs": {
+    "url": "https://github.com/pentaho/hv-uikit-react/issues"
+  },
+  "scripts": {
+    "clean": "npx rimraf package",
+    "prepare": "npx cpy ../../templates src",
+    "pretest": "node src/index.js create uikit-app -t Form,ListView",
+    "test": "cd uikit-app",
+    "posttest": "npx rimraf uikit-app",
+    "prepublishOnly": "npm run clean && npx clean-publish"
+  },
+  "dependencies": {
+    "chalk": "^5.2.0",
+    "colors": "^1.4.0",
+    "commander": "^10.0.0",
+    "fs-extra": "^11.1.0",
+    "inquirer": "^9.1.4",
+    "node-plop": "^0.31.1"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^11.0.1",
+    "cpy-cli": "^5.0.0",
+    "i18next": "^24.2.2",
+    "i18next-browser-languagedetector": "^8.0.3",
+    "i18next-http-backend": "^3.0.2",
+    "react-i18next": "15.7.1",
+    "react-router-dom": "^6.29.0",
+    "vite-tsconfig-paths": "^5.1.0"
+  },
+  "engineStrict": true,
+  "engines": {
+    "node": ">=16"
+  },
+  "files": [
+    "src"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "directory": "package"
+  },
+  "clean-publish": {
+    "withoutPublish": true,
+    "tempDir": "package"
+  }
+}

package/src/app-shell.js

@@ -0,0 +1,106 @@
+import chalk from "chalk";
+import fs from "fs-extra";
+import nodePlop from "node-plop";
+
+import { __dirname } from "./utils.js";
+
+const plop = await nodePlop(`${__dirname}/plopfile.js`);
+
+const createAppShellIndexHtml = plop.getGenerator("createAppShellIndexHtml");
+const createAppShellConfig = plop.getGenerator("createAppShellConfig");
+const createAppShellAutoMenu = plop.getGenerator("createAppShellAutoMenu");
+
+const createAppShellIndexHtmlFile = async (path, name) => {
+  await createAppShellIndexHtml.runActions({
+    path,
+    appName: name.replace(/([a-z])([A-Z])/g, "$1 $2"),
+  });
+};
+
+const createAppShellConfigFile = async (
+  path,
+  name,
+  appShellFeatures = [],
+  appShellAutoMenu = true,
+) => {
+  const pagesPath = `${path}/src/pages`;
+  const pages = fs.readdirSync(pagesPath);
+
+  const templatePages = pages.map((page) => ({
+    path,
+    pagesPath: "pages",
+    name: page,
+    pageName: page.replace(/([a-z])([A-Z])/g, "$1 $2"),
+  }));
+
+  const appShellFeatMap = {
+    AppSwitcher: {
+      bundle: "@hv/app-switcher-client/toggle.js",
+      config:
+        '{ title: "Apps",\n\t\t\t\t\t\t\t\t\tapps: [\n\t\t\t\t\t\t\t\t\t\t{ label: "App 1", description: "Application 1", url: "#", target: "NEW" },\n\t\t\t\t\t\t\t\t\t\t{ label: "App 2", description: "Application 2", url: "#", target: "SELF", icon: { iconType: "uikit", name: "Warehouse" } }\n\t\t\t\t\t\t\t\t\t]}',
+    },
+    ColorModeSwitcher: {
+      bundle: "@hv/theming-client/colorModeSwitcher.js",
+    },
+    HelpLink: {
+      bundle: "@hv/help-client/button.js",
+      config:
+        '{ url: "https://www.hitachivantara.com/", description: "Hitachi Vantara Help Link" }',
+    },
+  };
+
+  const appShellFeats = appShellFeatures
+    .map((feat) => appShellFeatMap[feat])
+    .filter(Boolean);
+
+  await createAppShellConfig.runActions({
+    path,
+    appName: name.replace(/([a-z])([A-Z])/g, "$1 $2"),
+    pages: templatePages,
+    feats: appShellFeats,
+    appShellAutoMenu,
+  });
+};
+
+export const createAppShellBaseline = async (appPath) => {
+  const basePath = `${__dirname}/baselines/app-shell/vite`;
+
+  console.log(`\nCreating a new App Shell 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`);
+};
+
+export const setupAppShell = async (
+  appPath,
+  name,
+  appShellFeatures = [],
+  appShellAutoMenu = true,
+  packageName,
+) => {
+  console.log(`\nConfiguring App Shell environment\n`);
+
+  // use our index.html (without favicon and similar stuff)
+  await createAppShellIndexHtmlFile(appPath, name);
+
+  // generate app shell config file
+  await createAppShellConfigFile(
+    appPath,
+    name,
+    appShellFeatures,
+    appShellAutoMenu,
+  );
+
+  if (appShellAutoMenu) {
+    await createAppShellAutoMenu.runActions({ path: appPath });
+  }
+
+  // replace package name in i18n.ts file
+  const i18nFile = `${appPath}/src/lib/i18n.ts`;
+  const i18nData = fs.readFileSync(i18nFile, { encoding: "utf-8" });
+  const i18nUpdated = i18nData.replace("uikit-app", packageName);
+  fs.writeFileSync(i18nFile, i18nUpdated);
+};

package/src/baselines/app-shell/vite/_gitignore

@@ -0,0 +1,30 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+build
+dist
+dist-ssr
+*.local
+.env
+.npm
+.eslintcache
+*.tgz
+coverage
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

package/src/baselines/app-shell/vite/_oxlintrc.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "extends": ["./node_modules/@hitachivantara/uikit-config/oxlint/strict.json"],
+  "rules": {}
+}

package/src/baselines/app-shell/vite/_package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@hv-apps/uikit-app",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "npm run check:format && npm run check:types && npm run check:lint",
+    "check:types": "tsc --noEmit",
+    "check:lint": "oxlint",
+    "check:format": "prettier --check .",
+    "lint": "oxlint --fix",
+    "format": "prettier --write .",
+    "test": "vitest"
+  },
+  "prettier": "@hitachivantara/uikit-config/prettier",
+  "dependencies": {
+    "@emotion/css": "^11.10.6",
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "@hitachivantara/uikit-react-core": "^6.0.0-next.0",
+    "@hitachivantara/uikit-react-icons": "^6.0.0-next.0",
+    "@mui/material": "^7.0.2",
+    "i18next": "^23.7.8",
+    "i18next-browser-languagedetector": "^7.0.1",
+    "i18next-http-backend": "^2.1.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-i18next": "^14.0.0",
+    "react-router-dom": "^6.14.2",
+    "swr": "^2.2.0"
+  },
+  "devDependencies": {
+    "@hitachivantara/app-shell-vite-plugin": "^2.0.0-next.0",
+    "@hitachivantara/uikit-config": "^0.5.1",
+    "@hitachivantara/uikit-uno-preset": "^1.0.0-next.0",
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "@vitejs/plugin-react": "^5.0.0",
+    "@vitest/coverage-v8": "^3.2.4",
+    "happy-dom": "^15.11.7",
+    "oxlint": "^1.9.0",
+    "prettier": "^3.1.1",
+    "typescript": "^5.5.4",
+    "unocss": "^66.4.2",
+    "vite": "^7.1.1",
+    "vite-plugin-css-injected-by-js": "^3.3.1",
+    "vite-tsconfig-paths": "^5.1.4",
+    "vitest": "^3.2.4"
+  }
+}

package/src/baselines/app-shell/vite/public/locales/en/example.json

@@ -0,0 +1,8 @@
+{
+  "page": {
+    "title": "Example Page"
+  },
+  "section": {
+    "title": "Example section"
+  }
+}

package/src/baselines/app-shell/vite/src/lib/data/config.ts

@@ -0,0 +1,15 @@
+import baseUseSWR, { Key, SWRConfiguration } from "swr";
+
+const fetcher = (url: RequestInfo | URL) =>
+  fetch(url).then((res) => res.json());
+
+// overload the useSWR function to set the fetcher and add suspense by default
+export default function useSWR<Data, Error = unknown>(
+  key: Key,
+  options?: SWRConfiguration<Data, Error>,
+) {
+  return baseUseSWR<Data, Error>(key, fetcher, {
+    suspense: true,
+    ...options,
+  });
+}

package/src/baselines/app-shell/vite/src/lib/i18n.ts

@@ -0,0 +1,44 @@
+import { useMemo } from "react";
+import { initReactI18next } from "react-i18next";
+import { createInstance, type i18n } from "i18next";
+import LanguageDetector from "i18next-browser-languagedetector";
+import Backend, { type HttpBackendOptions } from "i18next-http-backend";
+
+const initAppI18n = (baseUrl: string) => {
+  const i18nInstance: i18n = createInstance();
+
+  const loadPath = `${baseUrl}locales/{{lng}}/{{ns}}.json`;
+
+  i18nInstance
+    // load translation using xhr -> see /public/locales
+    // learn more: https://github.com/i18next/i18next-xhr-backend
+    .use(Backend)
+    // detect user language
+    // learn more: https://github.com/i18next/i18next-browser-languageDetector
+    .use(LanguageDetector)
+    // pass the i18n instance to react-i18next.
+    .use(initReactI18next)
+    // init i18next
+    // for all options read: https://www.i18next.com/overview/configuration-options
+    .init<HttpBackendOptions>({
+      fallbackLng: "en",
+      supportedLngs: ["en"],
+      backend: {
+        loadPath,
+      },
+      interpolation: {
+        escapeValue: false, // not needed for react as it escapes by default
+      },
+      load: "languageOnly",
+    });
+
+  return i18nInstance;
+};
+
+export const useI18nInstance = () => {
+  const moduleId = "@hv-apps/uikit-app";
+  return useMemo(
+    () => initAppI18n(import.meta.resolve?.(`${moduleId}/`) || ""),
+    [moduleId],
+  );
+};

package/src/baselines/app-shell/vite/src/pages/Example/index.tsx

@@ -0,0 +1,25 @@
+import { useTranslation } from "react-i18next";
+import {
+  HvGlobalActions,
+  HvGrid,
+  HvTypography,
+} from "@hitachivantara/uikit-react-core";
+
+import { withProvider } from "../../providers/Provider";
+
+const Example = () => {
+  const { t } = useTranslation("example");
+
+  return (
+    <HvGrid container>
+      <HvGrid item xs={12}>
+        <HvTypography variant="title2">{t("page.title")}</HvTypography>
+      </HvGrid>
+      <HvGrid item xs={12}>
+        <HvGlobalActions title={t("section.title")} variant="section" />
+      </HvGrid>
+    </HvGrid>
+  );
+};
+
+export default withProvider(Example);

package/src/baselines/app-shell/vite/src/providers/Provider.tsx

@@ -0,0 +1,31 @@
+import { Suspense } from "react";
+import { I18nextProvider } from "react-i18next";
+
+import { useI18nInstance } from "../lib/i18n";
+
+const Provider = ({ children }: { children: React.ReactNode }) => {
+  const i18n = useI18nInstance();
+
+  return <I18nextProvider i18n={i18n}>{children}</I18nextProvider>;
+};
+
+export function withProvider<
+  P extends Record<string, unknown> = Record<string, unknown>,
+>(WrappedComponent: React.ComponentType<P>) {
+  const ComponentWithProvider: React.FC<P> = (props) => {
+    return (
+      <Provider>
+        <Suspense fallback={null}>
+          <WrappedComponent {...props} />
+        </Suspense>
+      </Provider>
+    );
+  };
+
+  const displayName = WrappedComponent.displayName || WrappedComponent.name;
+  ComponentWithProvider.displayName = `withProvider(${displayName})`;
+
+  return ComponentWithProvider;
+}
+
+export default Provider;

package/src/baselines/app-shell/vite/src/tests/mocks.ts

@@ -0,0 +1 @@
+export const SUSPENSE_LABEL = "LOADING";

package/src/baselines/app-shell/vite/src/tests/providers.tsx

@@ -0,0 +1,13 @@
+import { FC, ReactNode, Suspense } from "react";
+import { HvProvider } from "@hitachivantara/uikit-react-core";
+
+import { SUSPENSE_LABEL } from "./mocks";
+
+/** Base Test Provider */
+export const TestProvider: FC<{ children: ReactNode }> = ({ children }) => {
+  return (
+    <Suspense fallback={SUSPENSE_LABEL}>
+      <HvProvider>{children}</HvProvider>
+    </Suspense>
+  );
+};

package/src/baselines/app-shell/vite/src/tests/setupTests.ts

@@ -0,0 +1,24 @@
+import type { TransProps } from "react-i18next";
+import type { ThirdPartyModule, TOptionsBase } from "i18next";
+import { vi } from "vitest";
+
+import "@testing-library/jest-dom";
+
+vi.mock("react-i18next", async () => {
+  const { initReactI18next } = await vi.importActual<{
+    initReactI18next: ThirdPartyModule;
+  }>("react-i18next");
+
+  const t = (str: string, options?: TOptionsBase) =>
+    options?.returnObjects ? undefined : str;
+
+  return {
+    initReactI18next,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    Trans: ({ i18nKey }: TransProps<any>) => i18nKey,
+    useTranslation: () => ({
+      t,
+      i18n: { changeLanguage: async () => t },
+    }),
+  };
+});

package/src/baselines/app-shell/vite/src/types/theme.d.ts

@@ -0,0 +1,8 @@
+import type { Theme } from "@mui/material/styles";
+
+// makeStyles is now exported from @mui/styles package which does not know about Theme
+// we need to augment the DefaultTheme (empty object) in @mui/styles with Theme from the core.
+declare module "@mui/private-theming" {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  interface DefaultTheme extends Theme {}
+}

package/src/baselines/app-shell/vite/src/types/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/src/baselines/app-shell/vite/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "@hitachivantara/uikit-config/tsconfig",
+  "compilerOptions": {},
+  "include": ["src"],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}

package/src/baselines/app-shell/vite/tsconfig.node.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/src/baselines/app-shell/vite/uno.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from "unocss";
+import { presetHv } from "@hitachivantara/uikit-uno-preset";
+
+export default defineConfig({
+  presets: [presetHv()],
+});

package/src/baselines/app-shell/vite/vite.config.ts

@@ -0,0 +1,45 @@
+/// <reference types="vite/client" />
+/// <reference types="vitest" />
+
+import react from "@vitejs/plugin-react";
+import unoCSS from "unocss/vite";
+import { defineConfig } from "vite";
+import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";
+import tsconfigPaths from "vite-tsconfig-paths";
+import { HvAppShellVitePlugin } from "@hitachivantara/app-shell-vite-plugin";
+
+export default defineConfig(({ mode }) => ({
+  plugins: [
+    react(),
+    tsconfigPaths(),
+    unoCSS({ mode: "per-module" }),
+    cssInjectedByJsPlugin({
+      relativeCSSInjection: true,
+    }),
+    HvAppShellVitePlugin({
+      mode,
+      autoViewsAndRoutes: true,
+    }),
+  ],
+
+  test: {
+    globals: true,
+    environment: "happy-dom",
+    setupFiles: ["src/tests/setupTests.ts"],
+    reporters: "default",
+    coverage: {
+      enabled: false, // disabled by default. run vitest with --coverage
+      provider: "v8",
+      reporter: "lcov",
+      include: ["src/**/*.ts?(x)"],
+      exclude: [
+        "src/**/mocks/*",
+        "src/**/tests/*",
+        "src/**/*.test.ts?(x)",
+        "src/**/styles.[jt]s?(x)",
+        "src/**/*.d.ts",
+        "src/*.tsx",
+      ],
+    },
+  },
+}));

package/src/baselines/vite/_gitignore

@@ -0,0 +1,30 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+build
+dist
+dist-ssr
+*.local
+.env
+.npm
+.eslintcache
+*.tgz
+coverage
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

package/src/baselines/vite/_oxlintrc.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "extends": ["./node_modules/@hitachivantara/uikit-config/oxlint/strict.json"],
+  "rules": {}
+}

package/src/baselines/vite/_package.json

@@ -0,0 +1,53 @@
+{
+  "name": "uikit-app",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "npm run check:format && npm run check:types && npm run check:lint",
+    "check:types": "tsc --noEmit",
+    "check:lint": "oxlint",
+    "check:format": "prettier --check .",
+    "lint": "oxlint --fix",
+    "format": "prettier --write .",
+    "test": "vitest"
+  },
+  "prettier": "@hitachivantara/uikit-config/prettier",
+  "dependencies": {
+    "@emotion/css": "^11.10.6",
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "@hitachivantara/uikit-react-core": "^6.0.0-next.0",
+    "@hitachivantara/uikit-react-icons": "^6.0.0-next.0",
+    "@mui/material": "^7.0.2",
+    "i18next": "^22.4.10",
+    "i18next-browser-languagedetector": "^7.0.1",
+    "i18next-http-backend": "^2.1.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-i18next": "^12.2.0",
+    "react-router-dom": "^6.8.2",
+    "tiny-cookie": "^2.4.1"
+  },
+  "devDependencies": {
+    "@hitachivantara/uikit-config": "^0.5.1",
+    "@hitachivantara/uikit-uno-preset": "^1.0.0-next.0",
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "@vitejs/plugin-react": "^5.0.0",
+    "@vitest/coverage-v8": "^3.2.4",
+    "happy-dom": "^15.11.7",
+    "oxlint": "^1.9.0",
+    "prettier": "^3.1.1",
+    "typescript": "^5.5.4",
+    "unocss": "^66.4.2",
+    "vite": "^7.1.1",
+    "vite-tsconfig-paths": "^5.1.4",
+    "vitest": "^3.2.4"
+  }
+}