chore: node.js 18, storybook 7 and other dev dependencies upgrade (#665)

* fix: support 1.x if >2.x global installed

* fix: fixate node version

* chore: upgrade most dev dependencies

* chore: upgrade yarn

* chore: migrate yarn.lock

* chore: upgrade storybook

* fix: remove unneccessary script

* chore: update yarn.lock

* chore: upgrade tsconfig

* fix: revert parameters

* fix: graphql generation

* fix: storybook build

* fix: uncomment required code

* fix: try to fix workflow

* fix: locale in storybook

* fix: line endingins

* fix: import resolver ts config path for eslint

* fix: revert back ci

* fix: remove comment

* fix: run yarn

* fix: storybook preview setup

* fix: attempt to fix CI

* fix: ci

* refactor: register ui kit from single place

* fix: remove end of line from editorconfig

* fix: remove irrelevant code

* docs: add comments to codegen script

* chore: revert back postcss

* fix: move postcss to dev dependencies

* fix: linting backward compatibility

* fix: backward compatible module resolution

* fix: workflow

* fix: remove temporary rule

* fix: review issues

* fix: file names

* chore: update readme

Author: asvishnyakov

.editorconfig

@@ -3,7 +3,6 @@ root = true
 
 [*]
 charset = utf-8
-end_of_line = lf
 indent_style = space
 indent_size = 2
 insert_final_newline = true

.eslintrc.js

@@ -1,3 +1,5 @@
+require('@rushstack/eslint-patch/modern-module-resolution')
+
 module.exports = {
   root: true,
   env: {
@@ -119,6 +121,7 @@ module.exports = {
     "vue/no-multiple-objects-in-class": "warn",
     "vue/no-required-prop-with-default": "warn",
     "vue/no-static-inline-styles": "warn",
+    "vue/no-setup-props-destructure": "warn", // TODO: Remove (switch to error) after refactoring
     "vue/no-useless-v-bind": "warn",
     "vue/padding-line-between-blocks": "warn",
     // TODO: enable "vue/padding-line-between-tags": "warn",
@@ -160,11 +163,12 @@ module.exports = {
   },
   settings: {
     "import/parsers": {
-      "@typescript-eslint/parser": [".ts", ".tsx"],
+      "@typescript-eslint/parser": [".ts"],
     },
     "import/resolver": {
       typescript: {
         alwaysTryTypes: true,
+        project: "./tsconfig.app.json",
       },
       node: true,
     },

.gitattributes

@@ -0,0 +1 @@
+* text=auto

.github/workflows/main.yml

@@ -51,10 +51,10 @@ jobs:
         with:
           fetch-depth: 0
 
-      - name: Install Node.js 16
-        uses: actions/setup-node@v1
+      - name: Install Node.js 18
+        uses: actions/setup-node@v3
         with:
-          node-version: '16.x'
+          node-version: '18'
 
       - name: Get Image Version
         uses: VirtoCommerce/vc-github-actions/get-image-version@master
@@ -83,6 +83,8 @@ jobs:
         uses: VirtoCommerce/vc-github-actions/build-vue-theme@master
         with:
           versionSuffix:  ${{ env.VERSION_SUFFIX }}
+        env:
+          YARN_ENABLE_IMMUTABLE_INSTALLS: false
 
       - name: Publish
         if: ${{ github.ref == 'refs/heads/demo' || github.ref == 'refs/heads/dev' || github.event_name == 'pull_request' || (github.event_name == 'workflow_dispatch' && github.ref != 'refs/heads/master')}}

.gitignore

@@ -55,3 +55,12 @@ config/routes.json
 
 dist-ssr
 *.local
+
+# yarn
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

.npmrc

@@ -1 +1,2 @@
+engine-strict=true
 package-lock=false

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "endOfLine": "auto"
+}

.prettierrc.json

@@ -1,57 +1,54 @@
 import { resolve } from "path";
-import graphql from "@rollup/plugin-graphql";
 import { loadConfigFromFile, mergeConfig, splitVendorChunkPlugin } from "vite";
-import type { StorybookViteConfig } from "@storybook/builder-vite";
-import type { PropItem } from "react-docgen-typescript";
+import type { StorybookConfig } from "@storybook/vue3-vite";
 
-const storybookConfig: StorybookViteConfig = {
-  stories: ["../client-app/**/*.stories.@(ts|tsx|mdx)"],
+const storybookConfig: StorybookConfig = {
+  stories: ["../client-app/**/*.stories.ts"],
   staticDirs: ["../client-app/public"],
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-a11y",
     "@storybook/addon-interactions",
   ],
+  framework: {
+    name: "@storybook/vue3-vite",
+    options: {},
+  },
   typescript: {
     check: false,
-    checkOptions: {},
-    reactDocgen: "react-docgen-typescript",
-    reactDocgenTypescriptOptions: {
-      shouldExtractLiteralValuesFromEnum: true,
-      propFilter: (prop: PropItem) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
-    },
   },
-  framework: "@storybook/vue3",
   core: {
-    builder: "@storybook/builder-vite",
     disableTelemetry: true,
   },
-  features: {
-    // storyStoreV7: true, // NOTE: When enabled, `viewMode: "docs"` does not work.
-  },
   async viteFinal(storybookViteConfig, options) {
     const isDevelopment = options.configType === "DEVELOPMENT";
     const { config } = (await loadConfigFromFile(
-      isDevelopment ? { command: "serve", mode: "development" } : { command: "build", mode: "production" },
-      resolve(__dirname, "../vite.config.ts")
+      isDevelopment
+        ? {
+            command: "serve",
+            mode: "development",
+          }
+        : {
+            command: "build",
+            mode: "production",
+          },
+      resolve(__dirname, "../vite.config.ts"),
     ))!;
-
     return mergeConfig(storybookViteConfig, {
-      plugins: [graphql(), splitVendorChunkPlugin()],
+      envPrefix: config.envPrefix,
+      plugins: [splitVendorChunkPlugin()],
+      resolve: config.resolve,
+      define: config.define,
       build: {
         cssCodeSplit: false,
         reportCompressedSize: false,
-        rollupOptions: {
-          external: [/\/static\/.*/],
-        },
       },
-      envPrefix: config.envPrefix,
-      resolve: config.resolve,
-      define: config.define,
       optimizeDeps: config.optimizeDeps,
     });
   },
+  docs: {
+    autodocs: true,
+  },
 };
-
 export default storybookConfig;

.storybook/main.ts

@@ -1,59 +1,59 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { app } from "@storybook/vue3";
-import vueRouter from "storybook-vue3-router";
-import { createI18n } from "vue-i18n";
+import { setup } from "@storybook/vue3";
+import { vueRouter } from "storybook-vue3-router";
+import { useLanguages } from "../client-app/core/composables";
 import { setGlobals } from "../client-app/core/globals";
-import * as UIKitComponents from "../client-app/ui-kit/components";
-import SettingsData from "../config/settings_data.json";
-import en from "../locales/en.json";
+import { configPlugin } from "../client-app/core/plugins";
+import { createI18n } from "../client-app/i18n";
+import { uiKit } from "../client-app/ui-kit";
+import type { IThemeConfig } from "../client-app/core/types";
 import type { I18n } from "../client-app/i18n";
-
-/* Project Styles */
+import type { Preview } from "@storybook/vue3";
+import type { App } from "vue";
 import "../client-app/assets/styles/main.scss";
 
-const i18n: I18n = createI18n({
-  legacy: false,
-  locale: "en",
-  messages: {
-    en,
-  },
-});
+const i18n: I18n = createI18n("en", "USD");
 
 setGlobals({ i18n });
 
-app.use(i18n);
-
-/* Setting project CSS variables */
-const settings =
-  typeof SettingsData.current === "string"
-    ? (<Record<string, any>>SettingsData).presets[SettingsData.current]
-    : SettingsData.current;
-
-Object.entries(settings)
-  .filter(([key]) => /^color/.test(key))
-  .forEach(([key, value]) => {
-    document.documentElement.style.setProperty(`--${key.replace(/_/g, "-")}`, `${value}`);
-  });
-
-// Register UI Kit components
-Object.entries(UIKitComponents).forEach(([name, component]) => app.component(name, component));
-
-export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
+async function configureThemeSettings(app: App) {
+  const settings: IThemeConfig = await import("../config/settings_data.json");
+  const themeSettings = settings.presets[settings.current as string];
+
+  app.use(configPlugin, themeSettings);
+}
+
+async function configureI18N() {
+  const { setLocale } = useLanguages();
+
+  await setLocale(i18n, "en");
+}
+
+setup((app) => {
+  configureThemeSettings(app);
+
+  configureI18N();
+  app.use(i18n);
+
+  app.use(uiKit);
+});
+
+const preview: Preview = {
+  decorators: [vueRouter()],
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+      expanded: true,
     },
-    expanded: true,
-  },
-  options: {
-    storySort: {
-      order: ["*", "Components", ["Atoms", "Molecules", "Organisms", "Templates", "Pages"]],
+    options: {
+      storySort: {
+        order: ["*", "Components", ["Atoms", "Molecules", "Organisms", "Templates", "Pages"]],
+      },
     },
   },
-  previewTabs: { "storybook/docs/panel": { index: -1 } },
-  viewMode: "docs",
 };
 
-export const decorators = [vueRouter()];
+export default preview;

.storybook/preview.ts

@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-3.6.1.cjs

.yarn/releases/yarn-3.6.1.cjs

@@ -112,26 +112,35 @@ This theme is designed to be used as-is within actual **VC Storefront**. You can
 ├── templates                     // Liquid templates, used in SSR and MPA. Each MPA page needs to have a liquid template here if you want SSR.
 |   └──index.liquid               // Entry point for SPA, providing container with necessary scripts and styles.
 |
-├── .browserslistrc               // Browserslist config file to support actual versions of browsers.
-├── .commitlintrc.json            // Config for Conventional commit hook.
-├── .editorconfig                 // Common editor settings to sync codestyle.
-├── .env                          // Envfile to define different Environment Variables.
-├── .eslintignore                 // Ignore some files from ESlint.
-├── .eslintrc                     // ESlint configuration file.
-├── .gitignore                    // Ignore some files from GIT.
-├── .graphqlconfig                // Config file for JS GraphQL IntelliJ Plugin (https://plugins.jetbrains.com/plugin/8097-graphql).
-├── .prettierignore               // Ignore some files from Prettier.
-├── .prettierrc                   // Config for Prettier.
-├── codegen.schema.ts             // GraphQL configuration file to generate schema from your Virto Backoffice url.
-├── codegen.types.ts              // GraphQL configuration file to generate types from your Virto Backoffice url.
-├── gulpfile.js                   // Artifact build script to product zip-file installable by VC Storefront.
-├── index.html                    // Vite Development entry point.
-├── package.json                  // NPM Package description.
-├── postcss.config.js             // PostCSS configuration for Tailwind.
-├── README.md                     // This file.
-├── tailwind.config.js            // TailwindCSS configuration file.
-├── tsconfig.json                 // TypeScript configuration file.
-└── vite.config.ts                // Vite configuration file.
+├── .babelrc                         // Babel configuration for storybook
+├── .browserslistrc                  // Browserslist config file to support actual versions of browsers.
+├── .commitlintrc.json               // Config for Conventional commit hook.
+├── .editorconfig                    // Common editor settings to sync codestyle.
+├── .env                             // Envfile to define different Environment Variables.
+├── .env.local                       // Local envfile to override Environment Variables.
+├── .eslintignore                    // Ignore some files from ESlint.
+├── .eslintrc.js                     // ESlint configuration file.
+├── .gitattributes                   // Set attributes to specified path in Git.
+├── .gitignore                       // Ignore some files from Git.
+├── .graphqlconfig                   // Config file for JS GraphQL IntelliJ Plugin (https://plugins.jetbrains.com/plugin/8097-graphql).
+├── .npmrc                           // Node.js package manager settings and Node.js restrictions
+├── .prettierignore                  // Ignore some files from Prettier.
+├── .prettierrc                      // Config for Prettier.
+├── .yarnrc                          // Yarn package manager configuration
+├── builder-preview.html             // Page Builder entry point
+├── graphql-codegen.schema.config.ts // GraphQL configuration file to generate schema from your VirtoCommerce Storefront url.
+├── graphql-codegen.types.types.ts   // GraphQL configuration file to generate types from your VirtoCommerce Storefront url.
+├── gulpfile.js                      // Artifact build script to product zip-file installable by VirtoCommerce Storefront.
+├── index.html                       // Vite Development entry point.
+├── package.json                     // NPM Package description.
+├── postcss.config.js                // PostCSS configuration for Tailwind.
+├── README.md                        // This file.
+├── tailwind.config.js               // TailwindCSS configuration file.
+├── tsconfig.app.json                // Typescript configuration for application.
+├── tsconfig.json                    // Main TypeScript configuration file.
+├── tsconfig.node.json               // Typescript configuration for Node.js.
+├── vite.config.ts                   // Vite configuration file.
+└── yarn.lock                        // Yarn dependencies lock file.
 ```
 
 ## Getting started

.yarnrc.yml

@@ -1,8 +1,5 @@
-import { vOnClickOutside } from "@vueuse/components";
 import { createHead } from "@vueuse/head";
-import { maska } from "maska";
 import { createApp } from "vue";
-import { setLocale as setLocaleForYup } from "yup";
 import { useCurrency, useLanguages, useThemeContext } from "@/core/composables";
 import { setGlobals } from "@/core/globals";
 import { configPlugin, contextPlugin, permissionsPlugin } from "@/core/plugins";
@@ -12,11 +9,12 @@ import { createRouter } from "@/router";
 import { useUser } from "@/shared/account";
 import ProductBlocks from "@/shared/catalog/components/product";
 import { templateBlocks } from "@/shared/static-content";
-import * as UIKitComponents from "@/ui-kit/components";
+import { uiKit } from "@/ui-kit";
 import App from "./App.vue";
 import type { Plugin } from "vue";
+import type { Router } from "vue-router";
 
-export default async (getPlugins: (options: any) => { plugin: Plugin; options: any }[] = () => []) => {
+export default async (getPlugins: (options: { router: Router }) => { plugin: Plugin; options: any }[] = () => []) => {
   const appSelector = "#app";
   const appElement = document.querySelector<HTMLElement | SVGElement>(appSelector);
 
@@ -59,16 +57,6 @@ export default async (getPlugins: (options: any) => { plugin: Plugin; options: a
    */
   await setLocale(i18n, currentLocale.value);
 
-  setLocaleForYup({
-    mixed: {
-      required: i18n.global.t("common.messages.required_field"),
-    },
-    string: {
-      email: i18n.global.t("common.messages.email_is_not_correct"),
-      max: ({ max }) => i18n.global.t("common.messages.max_length", { max }),
-    },
-  });
-
   /**
    * Create and mount application
    */
@@ -86,17 +74,9 @@ export default async (getPlugins: (options: any) => { plugin: Plugin; options: a
   app.use(permissionsPlugin);
   app.use(contextPlugin, themeContext.value);
   app.use(configPlugin, themeContext.value!.settings);
+  app.use(uiKit);
 
-  const plugins = getPlugins({ router });
-  plugins.forEach(({ plugin, options }) => app.use(plugin, options));
-
-  // Directives
-  app.directive("mask", maska);
-  app.directive("onClickOutside", vOnClickOutside);
-
-  // Components
-  // Register UI Kit components globally
-  Object.entries(UIKitComponents).forEach(([name, component]) => app.component(name, component));
+  getPlugins({ router }).forEach(({ plugin, options }) => app.use(plugin, options));
 
   // Register Page builder components globally
   Object.entries(templateBlocks).forEach(([name, component]) => app.component(name, component));