chore: update package versions

.prettierrc

@@ -0,0 +1,10 @@
+{
+  "arrowParens": "avoid",
+  "bracketSpacing": true,
+  "printWidth": 100,
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "endOfLine": "lf"
+}

package.json

@@ -11,10 +11,11 @@
   "version": "3.4.0",
   "main": "src/presentation/web/index.tsx",
   "scripts": {
-    "preview": "platform=web vite --config ./setup/vite/config.ts --port 3030 --mode=dev",
+    "preview": "platform=web vite preview --config ./setup/vite/config.ts --mode=preview",
     "start": "platform=web vite --config ./setup/vite/config.ts --host --mode=dev",
     "start:web:stage": "platform=web vite --config ./setup/vite/config.ts --host --mode=stage",
     "build:web": "platform=web vite --config ./setup/vite/config.ts build --mode=prod",
+    "preview:mobile": "platform=mobile vite preview --config ./setup/vite/config.ts --mode=preview",
     "start:mobile": "platform=mobile vite --config ./setup/vite/config.ts --host --mode=dev",
     "start:mobile:stage": "platform=mobile vite --config ./setup/vite/config.ts --host --mode=stage",
     "build:mobile": "platform=mobile vite --config ./setup/vite/config.ts build --mode=prod",
@@ -36,88 +37,82 @@
     "docker:down": "docker-compose -f ./docker/docker-compose.yml down"
   },
   "dependencies": {
-    "ahooks": "^3.7.4",
-    "axios": "^1.2.2",
+    "ahooks": "^3.7.6",
+    "axios": "^1.3.6",
     "date-fns": "^2.29.3",
-    "i18next": "^22.4.8",
+    "i18next": "^22.4.15",
     "i18next-browser-languagedetector": "^7.0.1",
-    "i18next-resources-to-backend": "^1.1.1",
+    "i18next-http-backend": "^2.2.0",
+    "i18next-resources-to-backend": "^1.1.3",
     "inversify": "^6.0.1",
     "lodash": "^4.17.21",
-    "mobx": "^6.7.0",
+    "mobx": "^6.9.0",
     "mobx-react": "^7.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
-    "react-hook-form": "^7.41.5",
-    "react-router": "^6.6.1",
-    "react-router-dom": "^6.6.1",
+    "react-hook-form": "^7.43.9",
+    "react-i18next": "^12.2.0",
+    "react-router": "^6.10.0",
+    "react-router-dom": "^6.10.0",
     "reflect-metadata": "^0.1.13",
-    "styled-components": "^5.3.6",
-    "yup": "^0.32.11"
+    "styled-components": "^5.3.9",
+    "yup": "^1.1.1"
   },
   "devDependencies": {
-    "@babel/plugin-proposal-decorators": "^7.20.7",
-    "@babel/plugin-transform-react-jsx": "^7.20.7",
-    "@babel/preset-env": "^7.20.2",
-    "@babel/preset-typescript": "^7.18.6",
-    "@babel/register": "^7.18.9",
-    "@commitlint/cli": "^17.4.0",
-    "@commitlint/config-conventional": "^17.4.0",
-    "@svgr/core": "^6.5.1",
-    "@svgr/plugin-jsx": "^6.5.1",
-    "@svgr/plugin-svgo": "^6.5.1",
+    "@babel/plugin-proposal-decorators": "^7.21.0",
+    "@babel/plugin-transform-react-jsx": "^7.21.0",
+    "@babel/preset-env": "^7.21.4",
+    "@babel/preset-typescript": "^7.21.4",
+    "@babel/register": "^7.21.0",
+    "@commitlint/cli": "^17.6.1",
+    "@commitlint/config-conventional": "^17.6.1",
+    "@svgr/core": "^7.0.0",
+    "@svgr/plugin-jsx": "^7.0.0",
+    "@svgr/plugin-svgo": "^7.0.0",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@types/jest": "^29.2.5",
-    "@types/lodash": "^4.14.191",
+    "@testing-library/react": "^14.0.0",
+    "@types/jest": "^29.5.1",
+    "@types/lodash": "^4.14.194",
+    "@types/node": "^18.15.13",
     "@types/styled-components": "^5.1.26",
-    "@typescript-eslint/eslint-plugin": "^5.48.0",
-    "@typescript-eslint/parser": "^5.48.0",
-    "@vitejs/plugin-react": "^3.0.1",
-    "@vitejs/plugin-react-swc": "^3.0.1",
+    "@typescript-eslint/eslint-plugin": "^5.59.0",
+    "@typescript-eslint/parser": "^5.59.0",
+    "@vitejs/plugin-react": "^4.0.0",
+    "@vitejs/plugin-react-swc": "^3.3.0",
     "dotenv": "^16.0.3",
     "esbuild-node-loader": "^0.8.0",
-    "eslint": "^8.31.0",
+    "eslint": "^8.39.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.0.0",
-    "eslint-config-prettier": "^8.6.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-path": "^1.1.3",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.31.11",
+    "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-simple-import-sort": "8.0.0",
+    "eslint-plugin-simple-import-sort": "10.0.0",
     "eslint-plugin-sort-keys-fix": "^1.1.2",
     "eslint-plugin-unused-imports": "^2.0.0",
     "husky": "^8.0.3",
-    "jest": "^29.3.1",
-    "jest-environment-jsdom": "^29.3.1",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
     "jest-styled-components": "^7.1.1",
     "less": "^4.1.3",
-    "lint-staged": "^13.1.0",
-    "plop": "^3.1.1",
-    "prettier": "^2.8.1",
-    "pretty-format": "^29.3.1",
+    "lint-staged": "^13.2.1",
+    "plop": "^3.1.2",
+    "prettier": "^2.8.7",
+    "pretty-format": "^29.5.0",
     "rollup-plugin-delete": "^2.0.0",
-    "ts-jest": "^29.0.3",
+    "ts-jest": "^29.1.0",
     "ts-node": "^10.9.1",
-    "typescript": "^4.9.4",
-    "vite": "^4.0.4",
+    "typescript": "^5.0.4",
+    "vite": "^4.3.1",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-html": "^3.2.0",
-    "vite-tsconfig-paths": "^4.0.3"
-  },
-  "prettier": {
-    "arrowParens": "avoid",
-    "bracketSpacing": true,
-    "printWidth": 100,
-    "semi": true,
-    "singleQuote": true,
-    "tabWidth": 2,
-    "trailingComma": "all",
-    "endOfLine": "lf"
+    "vite-plugin-mkcert": "^1.14.0",
+    "vite-tsconfig-paths": "^4.2.0"
   },
   "commitlint": {
     "extends": [

setup/jest/config.ts

@@ -26,13 +26,10 @@ const config: Config.InitialOptions = {
   globals: {
     APP_PLATFORM: 'web',
     AUTH_TOKEN: '<token>',
-    DEV: false,
+    IS_DEV: false,
     UI_VERSION: '0.0.123',
   },
   moduleDirectories: ['<rootDir>/node_modules', '<rootDir>/node_modules/@types', '<rootDir>/src'],
-  moduleNameMapper: {
-    'assets/(.*)': '<rootDir>/assets/$1',
-  },
   preset: 'ts-jest',
   rootDir: '../../',
   roots: ['<rootDir>/src'],

setup/vite/config.ts

@@ -1,29 +1,17 @@
-import DotEnv from 'dotenv';
 import { defineConfig, UserConfig } from 'vite';
 
 import { getBuildConfig } from './build';
-import { ViteEnvConfig, ViteMode, VitePlatform } from './config.types';
+import { ViteMode, VitePlatform } from './config.types';
 import { getBuildDefines, getDevDefines } from './define';
-import { getBuildPlugins, getDevPlugins } from './plugins';
+import { getEnvConfig } from './env';
+import { getBuildPlugins, getDevPlugins, getPreviewPlugins } from './plugins';
 import { getServerConfig } from './server';
 import styles from './styles';
 
 const defaultConfig: UserConfig = {
   css: styles,
 };
 
-const getEnvConfig = (mode: ViteMode, platform: VitePlatform): ViteEnvConfig => {
-  const fileName = `${platform ? `.${platform}` : ''}.${mode}.env`;
-  const path = `./setup/env/${fileName}`;
-  const result = DotEnv.config({ debug: mode === 'dev', path });
-
-  if (result.error) {
-    throw result.error;
-  }
-
-  return result.parsed as ViteEnvConfig;
-};
-
 // https://vitejs.dev/config/
 export default defineConfig(({ command, mode = 'dev' }) => {
   const envPlatform = (process?.env?.platform || '') as VitePlatform;
@@ -32,20 +20,34 @@ export default defineConfig(({ command, mode = 'dev' }) => {
   const envConfig = getEnvConfig(mode as ViteMode, envPlatform);
 
   if (command === 'build') {
+    envConfig.IS_DEV = false;
+
     return {
       ...defaultConfig,
       build: getBuildConfig(platform),
       define: getBuildDefines(envConfig, platform),
       mode: 'production',
-      plugins: getBuildPlugins(platform),
+      plugins: getBuildPlugins(envConfig, platform),
+    };
+  }
+
+  if (mode === 'preview') {
+    envConfig.IS_DEV = true;
+
+    return {
+      base: './',
+      build: getBuildConfig(platform),
+      plugins: getPreviewPlugins(envConfig, platform),
+      preview: getServerConfig(envConfig),
     };
   }
+  envConfig.IS_DEV = true;
 
   return {
     ...defaultConfig,
     define: getDevDefines(envConfig, platform),
     mode: 'development',
-    plugins: getDevPlugins(platform),
+    plugins: getDevPlugins(envConfig, platform),
     server: getServerConfig(envConfig),
   };
 });

setup/vite/config.types.ts

@@ -1,7 +1,8 @@
-export type ViteMode = 'prod' | 'stage' | 'dev';
+export type ViteMode = 'prod' | 'stage' | 'dev' | 'preview';
 export type VitePlatform = 'mobile' | 'web';
 
 export type ViteEnvConfig = {
+  IS_DEV: boolean;
   AUTH_TOKEN: string;
   DEV_SERVER_HOST: string;
   DEV_SERVER_PORT: string;

setup/vite/define.ts

@@ -4,15 +4,14 @@ const getDefaultDefines = (env: ViteEnvConfig, platform: VitePlatform) => ({
   APP_PLATFORM: JSON.stringify(platform),
   AUTH_TOKEN: JSON.stringify(env.AUTH_TOKEN),
   BACKEND_URL: JSON.stringify(env.BACKEND_URL),
+  IS_DEV: JSON.stringify(process.env.NODE_ENV === 'development'),
   UI_VERSION: JSON.stringify(process.env.npm_package_version),
 });
 
 export const getDevDefines = (env: ViteEnvConfig, platform: VitePlatform) => ({
   ...getDefaultDefines(env, platform),
-  DEV: true,
 });
 
 export const getBuildDefines = (env: ViteEnvConfig, platform: VitePlatform) => ({
   ...getDefaultDefines(env, platform),
-  DEV: false,
 });

setup/vite/env.ts

@@ -0,0 +1,28 @@
+import DotEnv from 'dotenv';
+
+import { ViteEnvConfig, ViteMode, VitePlatform } from './config.types';
+
+export const getEnvConfig = (mode: ViteMode, platform: VitePlatform): ViteEnvConfig => {
+  const envFile = mode === 'preview' ? 'dev' : mode;
+  const fileName = `${platform ? `.${platform}` : ''}.${envFile}.env`;
+  const path = `./setup/env/${fileName}`;
+  const result = DotEnv.config({ debug: true, override: false, path });
+
+  if (result.error) {
+    throw result.error;
+  }
+
+  const config: ViteEnvConfig = {
+    AUTH_TOKEN: process.env.AUTH_TOKEN,
+    BACKEND_PROXIES: process.env.BACKEND_PROXIES,
+    BACKEND_URL: process.env.BACKEND_URL,
+    DEV_SERVER_HOST: process.env.DEV_SERVER_HOST,
+    DEV_SERVER_PORT: process.env.DEV_SERVER_PORT,
+    IS_DEV: false,
+  };
+
+  // eslint-disable-next-line no-console
+  console.log('[ENV_CONFIG]', config);
+
+  return config;
+};

setup/vite/plugins.ts

@@ -2,12 +2,13 @@ import react from '@vitejs/plugin-react-swc';
 import { PluginOption } from 'vite';
 import viteCompression from 'vite-plugin-compression';
 import { createHtmlPlugin } from 'vite-plugin-html';
+import mkcert from 'vite-plugin-mkcert';
 import tsconfigPaths from 'vite-tsconfig-paths';
 
 import reactSvgPlugin from './plugins/react-svg';
-import { VitePlatform } from './config.types';
+import { ViteEnvConfig, VitePlatform } from './config.types';
 
-const getBasePlugins = (platform: VitePlatform): PluginOption[] => [
+const getBasePlugins = (env: ViteEnvConfig, platform: VitePlatform): PluginOption[] => [
   tsconfigPaths(),
   reactSvgPlugin({
     defaultExport: 'component',
@@ -20,8 +21,10 @@ const getBasePlugins = (platform: VitePlatform): PluginOption[] => [
     svgoConfig: {
       plugins: [
         {
-          active: false,
-          name: 'removeViewBox',
+          name: 'removeAttrs',
+          params: {
+            attrs: '',
+          },
         },
       ],
     },
@@ -38,13 +41,19 @@ const getBasePlugins = (platform: VitePlatform): PluginOption[] => [
   }),
 ];
 
-export const getDevPlugins = (platform: VitePlatform): PluginOption[] => [
-  ...getBasePlugins(platform),
-  react(),
+export const getDevPlugins = (env: ViteEnvConfig, platform: VitePlatform): PluginOption[] => [
+  ...getBasePlugins(env, platform),
+  react({ tsDecorators: true }),
+  mkcert(),
 ];
 
-export const getBuildPlugins = (platform: VitePlatform): PluginOption[] => [
-  ...getBasePlugins(platform),
+export const getPreviewPlugins = (env: ViteEnvConfig, platform: VitePlatform): PluginOption[] => [
+  ...getBasePlugins(env, platform),
+  mkcert(),
+];
+
+export const getBuildPlugins = (env: ViteEnvConfig, platform: VitePlatform): PluginOption[] => [
+  ...getBasePlugins(env, platform),
   viteCompression({
     filter: (file: string): boolean => file.includes('.js'),
   }),