POC / WIP : Migrate to vite & update dependencies

.eslintignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+coverage

.eslintrc.cjs

@@ -0,0 +1,185 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  globals: {
+    React: true,
+    JSX: true,
+    NodeJS: true,
+  },
+  root: true,
+  extends: [
+    'plugin:react/recommended',
+    'plugin:prettier/recommended',
+    'plugin:jsx-a11y/recommended',
+    'plugin:import/recommended',
+    'react-app',
+    'react-app/jest',
+    'airbnb',
+    'eslint:recommended',
+    'prettier',
+  ],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react', 'react-hooks', 'prettier', 'jsx-a11y', 'import'],
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: ['./tsconfig.json'],
+  },
+  ignorePatterns: ['/*.*', 'src/utils/polyfills.js'],
+  rules: {
+    'react/jsx-filename-extension': [1, { extensions: ['.tsx', '.jsx'] }],
+    'prettier/prettier': ['error'],
+    'react/style-prop-object': [
+      'error',
+      {
+        allow: ['FormattedNumber', 'FormattedDateParts', 'FormattedRelativeTime'],
+      },
+    ],
+    'testing-library/no-node-access': 'off',
+    'testing-library/no-container': 'off',
+    'no-restricted-imports': [
+      'error',
+      {
+        patterns: ['.*'],
+      },
+    ],
+    'eol-last': ['error', 'always'],
+    'no-underscore-dangle': [
+      'error',
+      {
+        allowFunctionParams: true,
+        allow: ['_md_env_', '_errors'],
+      },
+    ],
+    'no-param-reassign': [
+      'error',
+      {
+        props: true,
+      },
+    ],
+    '@typescript-eslint/no-floating-promises': 'error',
+    'no-void': [
+      'error',
+      {
+        allowAsStatement: true,
+      },
+    ],
+    '@typescript-eslint/no-explicit-any': 'error',
+    '@typescript-eslint/no-unused-vars': 'error',
+    '@typescript-eslint/no-unused-expressions': [
+      'error',
+      {
+        allowTernary: true,
+      },
+    ],
+    'react/jsx-props-no-spreading': [
+      'error',
+      {
+        exceptions: ['div', 'input', 'svg', 'Modal'],
+      },
+    ],
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/exhaustive-deps': 'warn',
+    'react/jsx-no-useless-fragment': [
+      'error',
+      {
+        allowExpressions: true,
+      },
+    ],
+    'react/prop-types': 'off',
+    'react/require-default-props': 'off',
+    'react/jsx-uses-react': 'off',
+    'react/react-in-jsx-scope': 'off',
+    'react/function-component-definition': 'off',
+    'react/no-unstable-nested-components': [
+      'error',
+      {
+        allowAsProps: true,
+      },
+    ],
+    'import/prefer-default-export': 'off',
+    'prefer-destructuring': 'off',
+    'import/no-cycle': 'error',
+    'import/no-extraneous-dependencies': [
+      'error',
+      {
+        devDependencies: [
+          '**/*.test.tsx',
+          '**/*.test.ts',
+          '**/test/**',
+          '**/__tests__/**',
+          '**/setupTests.ts',
+        ],
+      },
+    ],
+    'import/extensions': [
+      'error',
+      'ignorePackages',
+      {
+        js: 'never',
+        jsx: 'never',
+        ts: 'never',
+        tsx: 'never',
+      },
+    ],
+    'import/order': [
+      'warn',
+      {
+        alphabetize: {
+          order: 'asc',
+          caseInsensitive: true,
+        },
+        'newlines-between': 'always',
+        groups: ['builtin', 'external', 'parent', 'internal', 'sibling', 'index'],
+        pathGroups: [
+          {
+            pattern: 'react',
+            group: 'external',
+            position: 'before',
+          },
+          { pattern: '@/**', group: 'internal' },
+          {
+            pattern: '^@/**/*.module.css',
+            group: 'sibling',
+            position: 'before',
+          },
+        ],
+
+        pathGroupsExcludedImportTypes: ['builtin'],
+      },
+    ],
+    'jsx-a11y/label-has-for': 'off',
+    'jsx-a11y/label-has-associated-control': [
+      'warn',
+      {
+        required: {
+          some: ['nesting', 'id'],
+        },
+      },
+    ],
+    'jsx-a11y/no-static-element-interactions': 'warn',
+    'jsx-a11y/click-events-have-key-events': 'warn',
+    'sort-imports': [
+      'error',
+      {
+        ignoreCase: true,
+        ignoreDeclarationSort: true,
+      },
+    ],
+  },
+  settings: {
+    'import/parsers': {
+      '@typescript-eslint/parser': ['.ts', '.tsx'],
+    },
+    'import/resolver': {
+      typescript: {
+        alwaysTryTypes: true,
+      },
+    },
+  },
+}

.github/.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx --no -- commitlint --edit ""

.github/.husky/pre-commit

@@ -0,0 +1,5 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged
+task test

.github/workflows/ci.yml

@@ -14,10 +14,10 @@ jobs:
         with:
           # Fetch the latest commit, only
           fetch-depth: 1
-      - name: Use Node.js 16
+      - name: Use Node.js 22
         uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: 22
           cache: 'npm'
       - run: npm ci
       - run: npm run lint
@@ -29,10 +29,10 @@ jobs:
         with:
           # Fetch the latest commit, only
           fetch-depth: 1
-      - name: Use Node.js 16
+      - name: Use Node.js 22
         uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: 22
           cache: 'npm'
       - run: npm ci
       - run: npm run test
@@ -44,10 +44,10 @@ jobs:
         with:
           # Fetch the latest commit, only
           fetch-depth: 1
-      - name: Use Node.js 16
+      - name: Use Node.js 22
         uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: 22
           cache: 'npm'
       - run: npm ci
       - run: npm run build

.github/workflows/release.yml

@@ -11,10 +11,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - name: Use Node.js 16
+      - name: Use Node.js 22
         uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: 22
       - run: npm ci
         # We do not create a commit with the update package version
         # Therefore the package.*.json in the repository will always have out-of-sync versions

.husky/pre-commit

@@ -0,0 +1 @@
+npm test && npx lint-staged

.nvmrc

@@ -1 +1 @@
-16.13.2
+22.11.0

README.md

@@ -7,7 +7,7 @@ View all [Changelog](https://github.com/alma/widgets/releases)
 ## Setup
 
 ### Add the widget to your page
-
+TODO: remove => Changes to test precommit
 ##### CSS
 
 ```html

jest.config.js

@@ -2,7 +2,29 @@ const path = require('path')
 
 module.exports = {
   moduleDirectories: ['node_modules', path.join(__dirname, 'src')],
-  setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
-  collectCoverageFrom: ['src/**/*.tsx', 'src/**/*.ts', '!src/*/polyfills.js'],
+  setupFilesAfterEnv: ['<rootDir>/setupTests.ts'],
   testPathIgnorePatterns: ['<rootDir>/dist/'],
+  testEnvironment: 'jsdom',
+  rootDir: 'src',
+  moduleNameMapper: {
+    '^.+\\.css$': 'identity-obj-proxy',
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+      '<rootDir>/__mocks__/fileMock.js',
+    '^@/(.*)$': ['<rootDir>/$1'],
+    '^test/(.*)$': ['<rootDir>/test/$1'],
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js'],
+  coveragePathIgnorePatterns: ['/node_modules/', '/test/'],
+  collectCoverageFrom: ['<rootDir>/**/*.tsx', '<rootDir>/**/*.ts', '!<rootDir>/*/polyfills.js'],
+  coverageThreshold: {
+    global: {
+      branches: 88,
+      functions: 95,
+      lines: 95,
+      statements: 95,
+    },
+  },
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest',
+  },
 }