@vc-shell/create-vc-app 1.0.127 → 1.0.129

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+## [1.0.129](https://github.com/VirtoCommerce/vc-shell/compare/v1.0.128...v1.0.129) (2023-12-27)
+
+
+### Bug Fixes
+
+* **sample:** update dependencies in package.json ([5c3e4a0](https://github.com/VirtoCommerce/vc-shell/commit/5c3e4a0ada021acc60480f1f57a0f599fa11a2db))
+
+
+### Features
+
+* **create-vc-app:** build as es6 module ([0452713](https://github.com/VirtoCommerce/vc-shell/commit/04527133e1e6351f1d5f6440b50e57b2b6fa1966))
+
+
+
+## [1.0.128](https://github.com/VirtoCommerce/vc-shell/compare/v1.0.127...v1.0.128) (2023-12-14)
+
+
+
 ## [1.0.127](https://github.com/VirtoCommerce/vc-shell/compare/v1.0.126...v1.0.127) (2023-12-13)
 
 

package/dist/index.js

@@ -1,182 +1,147 @@
 #!/usr/bin/env node
-import prompts from "prompts";
-import mri from "mri";
-import { default as chalk } from "chalk";
-import path from "path";
-import fs from "fs";
-import { fileURLToPath } from "node:url";
-const renameFiles = {
-    _gitignore: ".gitignore",
-    "_yarnrc.yml": ".yarnrc.yml",
-    _browserslistrc: ".browserslistrc",
-    "_commitlintrc.json": ".commitlintrc.json",
-    _editorconfig: ".editorconfig",
-    _env: ".env",
-    _eslintignore: ".eslintignore",
-    _prettierignore: ".prettierignore",
-    _prettierrc: ".prettierrc",
-    "_eslintrc.js": ".eslintrc.js",
-    _github: "github",
-    _husky: ".husky",
-    _vscode: ".vscode",
-    _yarn: ".yarn",
+import k from "prompts";
+import N from "mri";
+import o from "chalk";
+import i from "node:path";
+import r from "node:fs";
+import { fileURLToPath as $ } from "node:url";
+import { cwd as x, argv as C, exit as F } from "node:process";
+const P = {
+  _gitignore: ".gitignore",
+  "_yarnrc.yml": ".yarnrc.yml",
+  _browserslistrc: ".browserslistrc",
+  "_commitlintrc.json": ".commitlintrc.json",
+  _editorconfig: ".editorconfig",
+  _env: ".env",
+  _eslintignore: ".eslintignore",
+  _prettierignore: ".prettierignore",
+  _prettierrc: ".prettierrc",
+  "_eslintrc.js": ".eslintrc.js",
+  _github: "github",
+  _husky: ".husky",
+  _vscode: ".vscode",
+  _yarn: ".yarn"
 };
-function isValidName(appName) {
-    return /^(?:@[a-z0-9-*~][a-z0-9-*._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/.test(appName);
+function h(t) {
+  return /^(?:@[a-z0-9-*~][a-z0-9-*._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/.test(t);
 }
-function toValidName(appName) {
-    return appName
-        .trim()
-        .toLowerCase()
-        .replace(/\s+/g, "-")
-        .replace(/^[._]/, "")
-        .replace(/[^a-z0-9-~]+/g, "-");
+function d(t) {
+  return t.trim().toLowerCase().replace(/\s+/g, "-").replace(/^[._]/, "").replace(/[^a-z0-9-~]+/g, "-");
 }
-function emptyDir(dir) {
-    if (!fs.existsSync(dir)) {
-        return;
-    }
+function z(t) {
+  r.existsSync(t);
 }
-function isEmpty(path) {
-    const files = fs.readdirSync(path);
-    return files.length === 0 || (files.length === 1 && files[0] === ".git");
+function D(t) {
+  const a = r.readdirSync(t);
+  return a.length === 0 || a.length === 1 && a[0] === ".git";
 }
-function copy(src, dest) {
-    const stat = fs.statSync(src);
-    if (stat.isDirectory()) {
-        copyDir(src, dest);
-    }
-    else {
-        fs.copyFileSync(src, dest);
-    }
+function _(t, a) {
+  r.statSync(t).isDirectory() ? E(t, a) : r.copyFileSync(t, a);
 }
-function copyDir(srcDir, destDir) {
-    fs.mkdirSync(destDir, { recursive: true });
-    for (const file of fs.readdirSync(srcDir)) {
-        const srcFile = path.resolve(srcDir, file);
-        const destFile = path.resolve(destDir, file);
-        copy(srcFile, destFile);
-    }
+function E(t, a) {
+  r.mkdirSync(a, { recursive: !0 });
+  for (const n of r.readdirSync(t)) {
+    const m = i.resolve(t, n), c = i.resolve(a, n);
+    _(m, c);
+  }
 }
-const AppVariants = [
-    {
-        name: "classic",
-        display: "Classic modules boilerplate",
-    },
-    {
-        name: "dynamic",
-        display: "Dynamic modules boilerplate",
-    },
-    {
-        name: "both",
-        display: "Classic modules + Dynamic modules boilerplate",
-    },
-];
-const variantMap = {
-    both: "variants/both",
-    classic: "variants/classic",
-    dynamic: "variants/dynamic",
+const O = [
+  {
+    name: "classic",
+    display: "Classic modules boilerplate"
+  },
+  {
+    name: "dynamic",
+    display: "Dynamic modules boilerplate"
+  },
+  {
+    name: "both",
+    display: "Classic modules + Dynamic modules boilerplate"
+  }
+], R = {
+  both: "variants/both",
+  classic: "variants/classic",
+  dynamic: "variants/dynamic"
 };
-async function create() {
-    const cwd = process.cwd();
-    const args = mri(process.argv.slice(2));
-    let dir = args._[0];
-    const defaultAppName = !dir ? "vc-app" : dir;
-    const getProjectName = () => (dir === "." ? path.basename(path.resolve()) : dir);
-    let config;
-    try {
-        config = await prompts([
-            {
-                name: "appName",
-                type: dir ? null : "text",
-                message: chalk.reset("Project name:"),
-                initial: defaultAppName,
-                onState: (state) => (dir = toValidName(String(state.value).trim()) || defaultAppName),
-                format: (value) => toValidName(String(value).trim()),
-            },
-            {
-                type: () => (!fs.existsSync(dir) || isEmpty(dir) ? null : "confirm"),
-                name: "overwrite",
-                message: () => (dir === "." ? "Current directory" : `Target directory "${dir}"`) +
-                    ` is not empty. Remove existing files and continue?`,
-            },
-            {
-                type: (_, { overwrite }) => {
-                    if (overwrite === false) {
-                        throw new Error(chalk.red("✖") + " Operation cancelled");
-                    }
-                    return null;
-                },
-                name: "overwriteChecker",
-            },
-            {
-                name: "packageName",
-                type: () => (isValidName(getProjectName()) ? null : "text"),
-                message: chalk.reset("Package name:"),
-                initial: () => toValidName(getProjectName()),
-                validate: (dir) => isValidName(dir) || "Invalid package.json name",
-            },
-            {
-                type: "select",
-                name: "variant",
-                message: chalk.reset("Select module variant:"),
-                choices: AppVariants.map((variant) => {
-                    return {
-                        title: variant.display,
-                        value: variant.name,
-                    };
-                }),
-            },
-        ], {
-            onCancel: () => {
-                throw new Error(chalk.red("✖") + " Creation cancelled");
-            },
-        });
-    }
-    catch (e) {
-        console.log(e.message);
-        process.exit(1);
-    }
-    const { packageName, variant } = config;
-    const root = path.join(cwd, dir);
-    if (fs.existsSync(root)) {
-        emptyDir(root);
-    }
-    else if (!fs.existsSync(root)) {
-        fs.mkdirSync(root);
-    }
-    console.log(`\nScaffolding app in ${root}...`);
-    const templateRoot = path.resolve(fileURLToPath(import.meta.url), "..", "templates");
-    const write = (file, templateName, content) => {
-        const targetPath = path.join(root, renameFiles[file] ?? file);
-        if (content) {
-            fs.writeFileSync(targetPath, content);
+async function V() {
+  const t = x();
+  let n = N(C.slice(2))._[0];
+  const m = n || "vc-app", c = () => n === "." ? i.basename(i.resolve()) : n;
+  let f;
+  try {
+    f = await k(
+      [
+        {
+          name: "appName",
+          type: n ? null : "text",
+          message: o.reset("Project name:"),
+          initial: m,
+          onState: (e) => n = d(String(e.value).trim()) || m,
+          format: (e) => d(String(e).trim())
+        },
+        {
+          type: () => !r.existsSync(n) || D(n) ? null : "confirm",
+          name: "overwrite",
+          message: () => (n === "." ? "Current directory" : `Target directory "${n}"`) + " is not empty. Remove existing files and continue?"
+        },
+        {
+          type: (e, { overwrite: l }) => {
+            if (l === !1)
+              throw new Error(o.red("✖") + " Operation cancelled");
+            return null;
+          },
+          name: "overwriteChecker"
+        },
+        {
+          name: "packageName",
+          type: () => h(c()) ? null : "text",
+          message: o.reset("Package name:"),
+          initial: () => d(c()),
+          validate: (e) => h(e) || "Invalid package.json name"
+        },
+        {
+          type: "select",
+          name: "variant",
+          message: o.reset("Select module variant:"),
+          choices: O.map((e) => ({
+            title: e.display,
+            value: e.name
+          }))
         }
-        else {
-            copy(path.join(templateRoot, templateName, file), targetPath);
+      ],
+      {
+        onCancel: () => {
+          throw new Error(o.red("✖") + " Creation cancelled");
         }
-    };
-    const render = (templateName) => {
-        const templateDir = path.resolve(templateRoot, templateName);
-        const files = fs.readdirSync(templateDir);
-        for (const file of files.filter((f) => f !== "package.json")) {
-            write(file, templateName);
-        }
-    };
-    render("base");
-    render(variantMap[variant]);
-    const pkg = JSON.parse(fs.readFileSync(path.join(templateRoot, `./base/package.json`), "utf-8"));
-    pkg.name = packageName || getProjectName();
-    write("package.json", "", JSON.stringify(pkg, null, 2) + "\n");
-    console.log(`\nDone. You can now run application:\n`);
-    if (root !== cwd) {
-        const cdProjectName = path.relative(cwd, root);
-        console.log(`  ${chalk.bold(chalk.green(`cd ${cdProjectName.includes(" ") ? `"${cdProjectName}"` : cdProjectName}`))}`);
-    }
-    console.log(`  ${chalk.bold(chalk.green("yarn"))}`);
-    console.log(`  ${chalk.bold(chalk.green("yarn serve"))}`);
+      }
+    );
+  } catch (e) {
+    console.log(e.message), F(1);
+  }
+  const { packageName: b, variant: j } = f, s = i.join(t, n);
+  r.existsSync(s) ? z(s) : r.existsSync(s) || r.mkdirSync(s), console.log(`
+Scaffolding app in ${s}...`);
+  const y = i.resolve($(import.meta.url), "..", "templates"), u = (e, l, p) => {
+    const g = i.join(s, P[e] ?? e);
+    p ? r.writeFileSync(g, p) : _(i.join(y, l, e), g);
+  }, v = (e) => {
+    const l = i.resolve(y, e), p = r.readdirSync(l);
+    for (const g of p.filter((w) => w !== "package.json"))
+      u(g, e);
+  };
+  v("base"), v(R[j]);
+  const S = JSON.parse(r.readFileSync(i.join(y, "./base/package.json"), "utf-8"));
+  if (S.name = b || c(), u("package.json", "", JSON.stringify(S, null, 2) + `
+`), console.log(`
+Done. You can now run application:
+`), s !== t) {
+    const e = i.relative(t, s);
+    console.log(
+      `  ${o.bold(o.green(`cd ${e.includes(" ") ? `"${e}"` : e}`))}`
+    );
+  }
+  console.log(`  ${o.bold(o.green("yarn"))}`), console.log(`  ${o.bold(o.green("yarn serve"))}`);
 }
-create().catch((e) => {
-    console.error(e);
+V().catch((t) => {
+  console.error(t);
 });
-//# sourceMappingURL=index.js.map

package/dist/templates/base/_env

@@ -1,4 +1,2 @@
-APP_LOG_ENABLED=true
-APP_LOG_LEVEL=debug
-APP_PLATFORM_URL=https://vcmp-dev.paas.govirto.com/
+#APP_PLATFORM_URL=add_platform_url_here
 APP_BASE_PATH=/apps/application/

package/dist/templates/base/package.json

@@ -17,51 +17,52 @@
   "devDependencies": {
     "@commitlint/cli": "^17.6.3",
     "@commitlint/config-conventional": "^17.6.3",
-    "@rollup/plugin-typescript": "^11.1.1",
+    "@laynezh/vite-plugin-lib-assets": "^0.5.6",
+    "@rollup/plugin-typescript": "^11.1.5",
     "@types/lodash-es": "^4.17.7",
-    "@typescript-eslint/eslint-plugin": "^5.59.7",
-    "@typescript-eslint/parser": "^5.59.7",
-    "@vc-shell/api-client-generator": "^1.0.127",
-    "@vc-shell/ts-config": "^1.0.127",
-    "@vitejs/plugin-vue": "^4.2.3",
-    "@vue/eslint-config-prettier": "^7.1.0",
-    "@vue/eslint-config-typescript": "^11.0.3",
+    "@typescript-eslint/eslint-plugin": "^6.13.2",
+    "@typescript-eslint/parser": "^6.13.2",
+    "@vc-shell/api-client-generator": "^1.0.129",
+    "@vc-shell/release-config": "^1.0.128",
+    "@vc-shell/ts-config": "^1.0.129",
+    "@vitejs/plugin-vue": "^4.5.1",
+    "@vue/eslint-config-prettier": "^8.0.0",
+    "@vue/eslint-config-typescript": "^12.0.0",
     "autoprefixer": "^10.4.14",
-    "buffer-esm": "^1.2.0",
     "conventional-changelog-cli": "^2.2.2",
     "cross-env": "^7.0.3",
     "eslint": "^8.41.0",
-    "eslint-import-resolver-typescript": "^3.5.5",
-    "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-vue": "^9.14.1",
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-vue": "^9.19.2",
     "husky": "^8.0.3",
     "lint-staged": "^13.2.2",
     "lodash-es": "^4.17.21",
-    "postcss": "^8.4.23",
-    "prettier": "^2.8.8",
+    "postcss": "^8.4.32",
+    "prettier": "^3.1.0",
     "querystring-es3": "^0.2.1",
-    "sass": "^1.62.1",
+    "sass": "^1.69.5",
     "tailwindcss": "^3.3.2",
     "tsx": "^3.13.0",
-    "typescript": "~5.0.4",
-    "vite": "^4.3.9",
+    "typescript": "5.3.3",
+    "vite": "4.5.0",
     "vite-plugin-checker": "^0.6.0",
     "vite-plugin-mkcert": "^1.15.0",
-    "vite-plugin-pwa": "^0.16.5",
-    "vue-eslint-parser": "^9.3.0",
-    "vue-tsc": "^1.8.20"
+    "vite-plugin-pwa": "^0.17.3",
+    "vue-eslint-parser": "^9.3.2",
+    "vue-tsc": "^1.8.25"
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.15.3",
-    "@vc-shell/config-generator": "^1.0.127",
-    "@vc-shell/framework": "^1.0.127",
-    "@vueuse/core": "^10.1.2",
-    "@vueuse/integrations": "^10.1.2",
+    "@vc-shell/config-generator": "^1.0.129",
+    "@vc-shell/framework": "^1.0.129",
+    "@vueuse/core": "^10.7.0",
+    "@vueuse/integrations": "^10.7.0",
     "moment": "^2.29.4",
     "roboto-fontface": "^0.10.0",
-    "vee-validate": "^4.9.4",
-    "vue": "^3.3.7",
+    "vee-validate": "^4.11.8",
+    "vue": "3.3.13",
     "vue-router": "^4.2.5"
   },
   "lint-staged": {

package/dist/templates/base/src/pages/App.vue

@@ -0,0 +1,116 @@
+<template>
+  <VcApp
+    :is-ready="isReady"
+    :logo="uiSettings.logo"
+    :title="uiSettings.title"
+    :version="version"
+  >
+  </VcApp>
+</template>
+
+<script lang="ts" setup>
+import { useSettings, useUser } from "@vc-shell/framework";
+import { onMounted, ref, watch } from "vue";
+// eslint-disable-next-line import/no-unresolved
+import logoImage from "/assets/logo.svg";
+
+const { uiSettings, applySettings } = useSettings();
+const isReady = ref(false);
+const version = import.meta.env.PACKAGE_VERSION;
+
+const { isAuthenticated } = useUser();
+
+onMounted(async () => {
+  try {
+    if (isAuthenticated.value) {
+      await customizationHandler();
+
+      isReady.value = true;
+    }
+  } catch (e) {
+    console.log(e);
+    throw e;
+  }
+});
+
+console.debug(`Initializing App`);
+
+async function customizationHandler() {
+  applySettings({
+    title: uiSettings.value?.title || undefined,
+    logo: uiSettings.value?.logo || logoImage,
+  });
+}
+</script>
+
+<style lang="scss">
+:root {
+  --background-color: #f5f6f9;
+  --top-bar-color: #161d25;
+  --basic-black-color: #333333;
+  --tooltips-color: #a5a5a5;
+
+  --primary-color: #43b0e6;
+  --primary-color-hover: #319ed4;
+  --primary-color-disabled: #a9ddf6;
+
+  --special-color: #f89406;
+  --special-color-hover: #eb8b03;
+  --special-color-disabled: #fed498;
+
+  /* Layout variables */
+  --app-bar-background-color: var(--top-bar-color);
+  --app-bar-toolbar-icon-background-hover: #2e3d4e;
+  --app-bar-toolbar-item-width: 50px;
+  --app-bar-toolbar-icon-color: #7e8e9d;
+  --app-bar-account-info-role-color: #838d9a;
+
+  --background-color: #f2f2f2;
+  --top-bar-color: #ffffff;
+  --app-background: linear-gradient(180deg, #e4f5fb 5.06%, #e8f3f2 100%), linear-gradient(0deg, #e8f2f3, #e8f2f3),
+    #eef2f8;
+  --app-bar-background-color: #ffffff;
+  --app-bar-divider-color: #ffffff;
+  --app-bar-toolbar-item-width: 50px;
+  --app-bar-toolbar-icon-color: #7e8e9d;
+  --app-bar-toolbar-icon-color-hover: #465769;
+  --app-bar-toolbar-icon-background-hover: #ffffff;
+  --app-bar-account-info-name-color: #161d25;
+  --app-bar-account-info-role-color: #7e8e9d;
+}
+
+html,
+body,
+#app {
+  @apply tw-font-roboto tw-h-full tw-w-full tw-m-0 tw-fixed tw-overflow-hidden tw-overscroll-y-none;
+}
+
+body {
+  @apply tw-text-base;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+button,
+input,
+select,
+textarea {
+  @apply tw-font-roboto;
+}
+::-webkit-input-placeholder {
+  @apply tw-font-roboto;
+}
+:-moz-placeholder {
+  @apply tw-font-roboto;
+}
+::-moz-placeholder {
+  @apply tw-font-roboto;
+}
+:-ms-input-placeholder {
+  @apply tw-font-roboto;
+}
+</style>

package/dist/templates/base/src/router/index.ts

@@ -1,118 +1,10 @@
-import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
-import { inject } from "vue";
-import { useLogin } from "../composables";
-import {
-  usePermissions,
-  useUser,
-  BladePageComponent,
-  notification,
-  useBladeNavigation,
-  Login,
-  ResetPassword,
-  Invite,
-} from "@vc-shell/framework";
+import { createRouter, createWebHashHistory } from "vue-router";
 
-/**
- * Pages
- */
-import Dashboard from "../pages/Dashboard.vue";
-// eslint-disable-next-line import/no-unresolved
-import App from "./../pages/App.vue";
-
-// eslint-disable-next-line import/no-unresolved
-import whiteLogoImage from "/assets/logo-white.svg";
-// eslint-disable-next-line import/no-unresolved
-import bgImage from "/assets/background.jpg";
-
-const routes: RouteRecordRaw[] = [
-  {
-    path: "/",
-    component: App,
-    name: "App",
-    meta: {
-      root: true,
-    },
-    children: [
-      {
-        name: "Dashboard",
-        path: "",
-        alias: "/",
-        component: Dashboard,
-      },
-    ],
-  },
-  {
-    path: "/login",
-    name: "Login",
-    component: Login,
-    props: () => ({
-      composable: useLogin,
-      logo: whiteLogoImage,
-      background: bgImage,
-      title: "application",
-    }),
-  },
-  {
-    name: "invite",
-    path: "/invite",
-    component: Invite,
-    props: (route) => ({
-      userId: route.query.userId,
-      token: route.query.token,
-      userName: route.query.userName,
-    }),
-  },
-  {
-    name: "resetpassword",
-    path: "/resetpassword",
-    component: ResetPassword,
-    props: (route) => ({
-      userId: route.query.userId,
-      token: route.query.token,
-      userName: route.query.userName,
-    }),
-  },
-  {
-    path: "/:pathMatch(.*)*",
-    component: App,
-    beforeEnter: (to) => {
-      const { resolveUnknownRoutes } = useBladeNavigation();
-
-      return resolveUnknownRoutes(to);
-    },
-  },
-];
+import { routes } from "./routes";
 
 export const router = createRouter({
-  history: createWebHashHistory(import.meta.env.APP_BASE_PATH as string),
-  routes,
+  history: createWebHashHistory(import.meta.env.APP_BASE_PATH),
+  routes: [],
 });
 
-router.beforeEach(async (to, from) => {
-  const { hasAccess } = usePermissions();
-  const { resolveBlades } = useBladeNavigation();
-  const { isAuthenticated } = useUser();
-  const pages = inject<BladePageComponent[]>("pages");
-
-  if (to.name !== "Login" && to.name !== "ResetPassword" && to.name !== "Invite") {
-    try {
-      const component = pages.find((blade) => blade?.url === to.path);
-
-      const _hasAccess = hasAccess(component?.permissions);
-
-      if (!(await isAuthenticated()) && to.name !== "Login") {
-        return { name: "Login" };
-      } else if (_hasAccess && to.name !== "Login") {
-        const resolvedBladeUrl = resolveBlades(to);
-        return resolvedBladeUrl ? resolvedBladeUrl : true;
-      } else if (!_hasAccess) {
-        notification.error("Access restricted", {
-          timeout: 3000,
-        });
-        return from.path;
-      }
-    } catch (e) {
-      return { name: "Login" };
-    }
-  } else return true;
-});
+routes.forEach((route) => router.addRoute(route));