Infra update 2024 (#35)

* Fixed mutation issues

* Updated infrastructure to latest versions

* Added prettier check to husky precommit check

* Updated spec tests

* Updated precommit and changed dependencies

* Added storybook for shared blocks

* Updated github build pipeline

* Added separate stages to the workflow file

* Updated package-lock and removed hack

* Updated package json dependencies

* Fixed aliases for storybook, added storybook to components

* Moved favicons to tailwind.css

.github/workflows/webpack.yml

@@ -7,21 +7,54 @@ on:
     branches: [ "main" ]
 
 jobs:
+  lint:
+    runs-on: ubuntu-latest
+    name: Lint code
+    steps:
+    - uses: actions/checkout@v3
+
+    - name: Install Node.js
+      uses: actions/setup-node@v3
+      with:
+        node-version: 23
+
+    - name: Lint
+      run: |
+        npm install
+        npm run ci:lint
+
+  test:
+    runs-on: ubuntu-latest
+    name: Run tests
+    steps:
+    - uses: actions/checkout@v3
+
+    - name: Install Node.js
+      uses: actions/setup-node@v3
+      with:
+        node-version: 23
+
+    - name: Test
+      run: |
+        npm install
+        npm run ci:test
+
   build:
     runs-on: ubuntu-latest
     name: Build production
+    needs: [lint, test]
     steps:
     - uses: actions/checkout@v3
 
     - name: Install Node.js
       uses: actions/setup-node@v3
       with:
-        node-version: 16
+        node-version: 23
 
     - name: Build
       run: |
         npm install
-        npx webpack --mode=production
+        npm run ci:build
 
     - name: Archive production artifacts
       uses: actions/upload-artifact@v3

.gitignore

@@ -103,4 +103,5 @@ dist
 # TernJS port file
 .tern-port
 
-.vscode
+.vscode
+*storybook.log

.husky/pre-commit

@@ -1,4 +1,20 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
+FILES=$(git diff --cached --name-only --diff-filter=ACMR | sed 's| |\\ |g')
+[ -z "$FILES" ] && exit 0
+
+# Prettify all selected files
+echo "$FILES" | npm run prettier:write
+
+# Add back the modified/prettified files to staging
+echo "$FILES" | xargs git add
+
+if npm run prettier:check; then
+  echo "Prettier passed"
+else
+  echo "Prettier failed"
+  exit 1
+fi
+
 npm run lint

.nvmrc

@@ -1 +1 @@
-v16.13.2
+v23.1.0

.storybook/main.ts

@@ -0,0 +1,44 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.@(ts|tsx)'],
+  addons: [
+    '@storybook/addon-webpack5-compiler-swc',
+    '@storybook/addon-essentials',
+    '@storybook/addon-styling-webpack',
+  ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+  webpackFinal: async (config) => {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const path = require('path');
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const tsConfig = require('../tsconfig.json');
+    const __dirname = path.resolve();
+
+    function createWebpackAliasFromTsConfigPaths() {
+      return Object.fromEntries(
+        Object.entries<[string, string[]]>(
+          tsConfig.compilerOptions.paths || {},
+        ).map(([key, [value]]) => [
+          key.replace('/*', ''),
+          path.resolve(__dirname, value.replace('/*', '')),
+        ]),
+      );
+    }
+
+    return {
+      ...config,
+      resolve: {
+        ...config.resolve,
+        alias: {
+          ...config.resolve?.alias,
+          ...createWebpackAliasFromTsConfigPaths(),
+        },
+      },
+    };
+  },
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,16 @@
+import type { Preview } from '@storybook/react';
+
+import '!style-loader!css-loader!postcss-loader!../src/tailwind.css';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

eslint.config.mjs

@@ -0,0 +1,72 @@
+import { fixupConfigRules, fixupPluginRules } from '@eslint/compat';
+import { FlatCompat } from '@eslint/eslintrc';
+import js from '@eslint/js';
+import typescriptEslint from '@typescript-eslint/eslint-plugin';
+import tsParser from '@typescript-eslint/parser';
+import react from 'eslint-plugin-react';
+import globals from 'globals';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+});
+
+export default [
+  {
+    ignores: ['dist/*', 'tools/*', 'node_modules/*', 'static/*'],
+  },
+  ...fixupConfigRules(
+    compat.extends(
+      'eslint:recommended',
+      'plugin:react/recommended',
+      'plugin:react-hooks/recommended',
+      'plugin:@typescript-eslint/recommended',
+    ),
+  ),
+  {
+    settings: {
+      react: {
+        pragma: 'React',
+        version: 'detect',
+      },
+    },
+
+    plugins: {
+      react: fixupPluginRules(react),
+      '@typescript-eslint': fixupPluginRules(typescriptEslint),
+    },
+
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+      },
+
+      parser: tsParser,
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+    },
+
+    rules: {
+      'react/prop-types': 'off',
+      'react/display-name': 'off',
+      'no-unused-vars': 'off',
+      '@typescript-eslint/no-explicit-any': 'off',
+
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        {
+          argsIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+          caughtErrorsIgnorePattern: '^_',
+        },
+      ],
+
+      'react-hooks/exhaustive-deps': 'error',
+    },
+  },
+];

jest.config.ts

@@ -0,0 +1,13 @@
+import { pathsToModuleNameMapper } from 'ts-jest';
+import type { JestConfigWithTsJest } from 'ts-jest';
+
+// eslint-disable-next-line @typescript-eslint/no-require-imports
+const { compilerOptions } = require('./tsconfig.json');
+
+export default {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+  roots: ['<rootDir>'],
+  modulePaths: [compilerOptions.baseUrl],
+  moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths),
+} satisfies JestConfigWithTsJest;