feat: switch to ESM module types

apps/docs/package.json

@@ -14,20 +14,20 @@
   "dependencies": {
     "@vercel/analytics": "1.0.1",
     "@wayofdev/ui": "workspace:*",
-    "next": "13.4.6",
-    "nextra": "2.7.1",
-    "nextra-theme-docs": "2.7.1",
+    "next": "13.4.10",
+    "nextra": "2.10.0",
+    "nextra-theme-docs": "2.10.0",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@types/node": "18.16.18",
-    "@types/react": "18.2.12",
-    "@types/react-dom": "18.2.5",
-    "@wayofdev/eslint-config-bases": "2.0.7",
+    "@types/node": "20.4.2",
+    "@types/react": "18.2.15",
+    "@types/react-dom": "18.2.7",
+    "@wayofdev/eslint-config-bases": "3.0.1",
     "es-check": "7.1.1",
-    "eslint": "8.36.0",
-    "sharp": "0.32.1",
-    "typescript": "5.0.2"
+    "eslint": "8.45.0",
+    "sharp": "0.32.3",
+    "typescript": "5.1.6"
   }
 }

apps/storybook/package.json

@@ -28,24 +28,24 @@
     "@storybook/react-vite": "7.0.21",
     "@storybook/testing-library": "0.1.0",
     "@tailwindcss/aspect-ratio": "^0.4.2",
-    "@tailwindcss/forms": "^0.5.3",
-    "@types/react": "18.2.12",
-    "@types/react-dom": "18.2.5",
+    "@tailwindcss/forms": "^0.5.4",
+    "@types/react": "18.2.15",
+    "@types/react-dom": "18.2.7",
     "@vitejs/plugin-react-swc": "3.3.2",
-    "@wayofdev/eslint-config-bases": "2.0.7",
-    "@wayofdev/postcss-config": "2.0.8",
+    "@wayofdev/eslint-config-bases": "3.0.1",
+    "@wayofdev/postcss-config": "3.0.1",
     "autoprefixer": "^10.4.14",
-    "eslint": "8.36.0",
-    "postcss": "8.4.24",
+    "eslint": "8.45.0",
+    "postcss": "8.4.26",
     "postcss-100vh-fix": "1.0.2",
     "postcss-cli": "10.1.0",
     "postcss-flexbugs-fixes": "5.0.2",
     "postcss-normalize": "10.0.1",
-    "postcss-preset-env": "8.5.0",
+    "postcss-preset-env": "9.0.0",
     "postcss-reporter": "7.0.5",
-    "storybook": "7.0.21",
-    "tailwindcss": "3.2.7",
-    "typescript": "5.0.2",
-    "vite": "4.3.9"
+    "storybook": "7.0.27",
+    "tailwindcss": "3.3.3",
+    "typescript": "5.1.6",
+    "vite": "4.4.4"
   }
 }

apps/web/.eslintrc.js → apps/web/.eslintrc.cjs

@@ -7,7 +7,9 @@
 // Workaround for https://github.com/eslint/eslint/issues/3458 (re-export of @rushstack/eslint-patch)
 require('@wayofdev/eslint-config-bases/patch/modern-module-resolution')
 
-const { getDefaultIgnorePatterns } = require('@wayofdev/eslint-config-bases/helpers')
+const {
+  getDefaultIgnorePatterns,
+} = require('@wayofdev/eslint-config-bases/helpers')
 
 module.exports = {
   root: true,
@@ -32,6 +34,8 @@ module.exports = {
     '@wayofdev/eslint-config-bases/prettier-plugin',
   ],
   rules: {
+    // https://medium.com/@steven-lemon182/are-typescript-barrel-files-an-anti-pattern-72a713004250
+    'import/no-cycle': 2,
     // https://github.com/vercel/next.js/discussions/16832
     '@next/next/no-img-element': 'off',
     // For the sake of example
@@ -41,16 +45,23 @@ module.exports = {
   },
   overrides: [
     {
-      files: ['src/pages/\\_*.{ts,tsx}'],
+      files: ['next.config.mjs'],
       rules: {
-        'react/display-name': 'off',
+        'import/order': 'off',
+        '@typescript-eslint/ban-ts-comment': 'off',
       },
     },
     {
-      files: ['src/stories/*.ts'],
+      files: ['tailwind.config.ts'],
       rules: {
         '@typescript-eslint/naming-convention': 'off',
       },
     },
+    {
+      files: ['src/pages/\\_*.{ts,tsx}'],
+      rules: {
+        'react/display-name': 'off',
+      },
+    },
   ],
 }

apps/web/.size-limit.js → apps/web/.size-limit.cjs

@@ -5,7 +5,9 @@ let manifest
 try {
   manifest = require('./.next/build-manifest.json')
 } catch (e) {
-  throw new Error('Cannot find a NextJs build folder, did you forget to build ?')
+  throw new Error(
+    'Cannot find a NextJs build folder, did you forget to build ?'
+  )
 }
 const pages = manifest.pages
 
@@ -16,10 +18,11 @@ const limitCfg = {
     '/404': '150kb',
     '/_app': '180kb',
     '/_error': '140kb',
-    '/_monitor/sentry/csr-page': '85kb',
-    '/_monitor/sentry/ssr-page': '85kb',
+    '/_monitor/sentry/csr-page': '105kb',
+    '/_monitor/sentry/ssr-page': '105kb',
+    '/_monitor/preview/error-page': '105kb',
     '/auth/login': '160kb',
-    '/home': '105kb',
+    '/home': '120kb',
   },
 }
 
@@ -40,6 +43,6 @@ module.exports = [
   {
     name: 'CSS',
     path: ['./.next/static/css/**/*.css'],
-    limit: '10 kB',
+    limit: '15 kB',
   },
 ]

apps/web/jest.config.js

@@ -1,12 +1,14 @@
 // @ts-check
-const { pathsToModuleNameMapper } = require('ts-jest')
 
-const { getTsconfig } = require('get-tsconfig')
-const { getJestCachePath } = require('../../cache.config')
+// const { getJestCachePath } = require('../../cache.config')
+// const packageJson = require('./package.json')
+// const tsConfigFile = './tsconfig.jest.json'
 
-const packageJson = require('./package.json')
+import { getTsconfig } from 'get-tsconfig'
+import { pathsToModuleNameMapper } from 'ts-jest'
 
-const tsConfigFile = './tsconfig.jest.json'
+const tsConfigFile = new URL('./tsconfig.jest.json', import.meta.url).pathname
+const tsConfigPathsFile = new URL('./tsconfig.json', import.meta.url).pathname
 
 /**
  * Transform the tsconfig paths into jest compatible one (support extends)
@@ -20,20 +22,20 @@ const getTsConfigBasePaths = tsConfigFile => {
   const tsPaths = parsedTsConfig.config.compilerOptions?.paths
   return tsPaths
     ? pathsToModuleNameMapper(tsPaths, {
-        prefix: '<rootDir>/src',
+        prefix: '<rootDir>/',
       })
     : {}
 }
 
 /** @type {import('ts-jest').JestConfigWithTsJest} */
 const config = {
-  displayName: `${packageJson.name}:unit`,
-  cacheDirectory: getJestCachePath(packageJson.name),
+  displayName: `web:unit`,
   testEnvironment: 'jsdom',
+  extensionsToTreatAsEsm: ['.ts', '.tsx'],
   verbose: true,
-  rootDir: './',
-  testMatch: ['<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}'],
+  rootDir: './src',
   setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
+  testMatch: ['<rootDir>/**/*.{spec,test}.{js,jsx,ts,tsx}'],
   transform: {
     '^.+\\.m?[tj]sx?$': [
       'ts-jest',
@@ -43,15 +45,19 @@ const config = {
     ],
   },
   moduleNameMapper: {
+    '^.+\\.(svg)$': '<rootDir>/../config/tests/ReactSvgrMock.tsx',
     '.+\\.(css|styl|less|sass|scss)$': 'jest-css-modules-transform',
-    '\\.svg$': '<rootDir>/config/tests/ReactSvgrMock.tsx',
-    ...getTsConfigBasePaths(tsConfigFile),
+    ...getTsConfigBasePaths(tsConfigPathsFile),
   },
   // false by default, overrides in cli, ie: yarn test:unit --collect-coverage=true
   collectCoverage: false,
-  coverageDirectory: '<rootDir>/coverage',
-  collectCoverageFrom: ['<rootDir>/**/*.{ts,tsx,js,jsx}', '!**/*.test.{js,ts}', '!**/__mock__/*'],
+  coverageDirectory: '<rootDir>/../coverage',
+  collectCoverageFrom: [
+    '<rootDir>/**/*.{ts,tsx,js,jsx}',
+    '!**/*.test.{js,ts}',
+    '!**/__mock__/*',
+  ],
   transformIgnorePatterns: ['/node_modules/(?!@vercel/analytics)/'],
 }
 
-module.exports = config
+export default config

apps/web/next-i18next.config.js → apps/web/next-i18next.config.mjs

@@ -1,12 +1,15 @@
-const defaultLocale = 'en'
+import path from 'path'
+
 const debugI18n = ['true', 1].includes(process?.env?.NEXT_DEBUG_I18N ?? 'false')
 
 const localePublicFolder = undefined
 
+export const defaultLocale = 'en'
+
 /**
  * @type {import('next-i18next').UserConfig}
  */
-module.exports = {
+export default {
   i18n: {
     defaultLocale,
     locales: ['en', 'fr'],
@@ -26,6 +29,6 @@ module.exports = {
   */
   localePath:
     typeof window === 'undefined'
-      ? require('path').resolve('../../packages/common-i18n/src/locales')
+      ? path.resolve('../../packages/common-i18n/src/locales')
       : localePublicFolder,
 }