chore: node.js 18, storybook 7 and other dev dependencies upgrade

[asvishnyakov]

Description:

Task

https://virtocommerce.atlassian.net/browse/ST-4720

Summary

• node.js was upgraded to node.js 18 LTS
• storybook was upgraded to storybook 7 (using automatic migration) as storybook 6 isn't compatible with node.js 18
• yarn was upgraded to support automatic upgrade of storybook
• devDependencies was upgraded to latest versions or versions corresponding to create-vue if necessary
• only incompatible dependencies was upgraded
• tsconfig.json was upgraded to correspond the one from create-vue
• GraphQL generation command had issues with local deploy of vc-storefront so was updated too
• Line endings settings was updated to eliminate issues on Windows and with eslint and prerrier

Line endings

To eliminate a lot of warnings about line ending fixing by eslint/prettier on Windows, the following changes was made:

.gitattributes: * text=auto is default strategy in VirtoCommerce and means:

• on check-in (i.e. push, how stored in git): git will automatically convert to lf
• on checkout (i.e. how stored on your computer): follow your local settings (by default - checkout as system, i.e. crlf in Windows, lf in Linux & MacOS)

.editorconfig: removed end_of_line = lf
.prettierrc.json:

{
  "endOfLine": "auto"
}

This means line endings will automatically converted to lf when uploading to GitHub and to your system specific when checking out.

node.js 18

node.js is upgraded to node.js 18 LTS:

.github/workflows/main.yml

- name: Install Node.js 18
  uses: actions/setup-node@v3
  with:
    node-version: '18'

.npmrc: engine-strict=true

package.json

{
  "engines": {
    "node": ">=18.0.0 <19.0.0"
  }
}

yarn berry (yarn > 2.0)

To have ability automatically upgrade storybook in this PR and in feature, yarn was upgraded to latest version. The following important changes are related:

.github/workflows/main.yml

env:
  YARN_ENABLE_IMMUTABLE_INSTALLS: false

Because of bug (it closed by bot, not resolved yet).

.gitignore:

# yarn
.pnp.*
.yarn/*
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions

Configuration above is specific for avoiding zero-installs.

.yarnrc

nodeLinker: node-modules

yarnPath: .yarn/releases/yarn-3.6.1.cjs

nodeLinker is specified to avoid zero-installs.

.yarn/releases/yarn-3.6.1.cjs
As per documentation:

Commit the changes so far (yarn-X.Y.Z.js, .yarnrc.yml, ...)

package.json:

{
  "packageManager": "yarn@3.6.1"
}

Specified automatically.

Packages

The following packages wasn't used and was removed:

• babel-loader: webpack loader
• optionator: JavaScript/Node.js option parsing and help generation library
• vue-loader: webpack loader

The following packages referenced by other packages and shouldn't be referenced directly:

• eslint-plugin-prettier by @vue/eslint-config-prettier
• @typescript-eslint/eslint-plugin by @vue/eslint-config-typescript
• @typescript-eslint/parser by @vue/eslint-config-typescript
• vue-eslint-parser by @vue/eslint-config-typescript

The following packages wasn't compatible with upgraded typescript and was upgraded too:

• @vee-validate/rules
• @vee-validate/yup
• vee-validate
• vue-router
• yup

The following packages required by new tsconfig.json

• @tsconfig/node18
• @vue/tsconfig

The following packages required by upgraded eslint configs:

• @rushstack/eslint-patch

The following packages required by storybook 7:

• react
• react-dom
• @storybook/*: upgraded automatically

Typescript

Typescript was upgraded to the version used by create-vue

tsconfig.json

• tsconfig.json settings replaced with tsconfig.node.json and tsconfig.app.json, both referenced in first one. They inherit settings from packages @tsconfig/node18 and @vue/tsconfig. This is default approach used by create-vue. Removed all settings which duplicated settings from these packages or default settings, all necessary settings moved to corresponding files,
• due to Typescript migration to 5.0 guide

moduleResolution changed from node to bundler

Most notably, it implies "resolvePackageJsonExports": true by default, so it prefers the exports field of package.json files when resolving a third party module.

While vue-i18n intlify/vue-i18n#1327 (comment), and vuetify will solve the issue in v3.3, other packages may not be so quick to fix. In that case, you can override the compilerOptions.resolvePackageJsonExports option to false in your tsconfig.json to temporarily work around the issue.

so resolvePackageJsonExports set to false temporarily until upgrade to vue-i18n 9.3.

Eslint

Eslint and related configs was upgraded to the version used by create-vue

@rushstack/eslint-patch/modern-module-resolution package is required now for correct work of vue eslint rules and used by create-vue

.eslintrc.js

module.exports = {
  rules: {
    "vue/no-setup-props-destructure": "warn"
  },
};

ST-4765

.eslintrc.js

module.exports = {
  settings: {
    "import/resolver": {
      typescript: {
        project: "./tsconfig.app.json",
      },
    },
  },
};

The changes above was made to fix issue when @typescript-eslint/parser doesn't understand paths from references in tsconfig.json, i.e. doesn't resolve import "@/**"

GraphQL schema and types generation

Previous configuration had two issues:

• didn't took into account .env.local file, so you was need to change APP_BACKEND_URL environment variable to https://vcst-dev-storefront.paas.govirto.com/ or https://localhost:port and back every time
  • .env.local is reading by vite, but graphql-codegen is running outside of it (and can't be run inside) and to fix that -r dotenv/config was used, but it take into account only .env file
• didn't supported self-signed certificates used to run vc-storefront on local machine

Corresponding changes was introduced in package.json and scripts/codegen.js.

graphql-codegen and related dependencies wasn't upgraded because they share graphql package with apollo=client and it's better to avoid resolution in yarn and keep them in sync.

Storybook

Storybook generation and preview was significantly remade. The following changes was made because of that:

.storybook/main.ts

• For unknown reason import of *.graphql files by @rollup/plugin-graphql fails. Because they are unnecessary for storybook, plugin was removed.
• reactDocgen is now supported only for React projects, so corresponding configuration was removed.
• vite config in viteFinal was updated to correspond settings in vite.config.ts
• autodocs: true: docs are not generates by default in storybook 7, but they was configured to automatically generation by automatic migration in order to follow previous behavior.

.storybook/preview.ts

• previewTabs and viewMode no more supported, so was simply removed. Doesn't seems to affect anything.
• Now app provided and should be configured within sync setup function, so plugins and component registration was moved to it and all async code (theme settings and i18n loading) was moved outside. setup(async () => {}) or plugins and component registration in async functions doesn't work.
• theme settings (i.e. colors) can't be imported as json directly to preview.ts due to limitations of storybook build, so now they are loaded asynchronously
• i18n loading was refactored to share the same code and settings as main app, but with hardcoded en locale and USD currency.
  • As we already removed support of legacy mode for i18n, code was clean up.
• ui-kit was refactored as plugin to share the same code as main app to avoid issues with missed directives or components.

---

QA-test:

Demo-test:

Download artifact URL: https://vc3prerelease.blob.core.windows.net/packages/vc-theme-b2b-vue-1.36.0-pr-665-5a1d-5a1dd0f0.zip

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication