Feature/fix country page feedbacks

.github/workflows/ci.yml

@@ -22,83 +22,161 @@ env:
   GITHUB_WORKFLOW: true
 
 jobs:
+  ui:
+    name: UI library
+    environment: 'test'
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: packages/ui
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '18.x'
+          cache: 'yarn'
+
+      - name: Install dependencies on UI library
+        run: yarn install --frozen-lockfile
+
+      - name: Typecheck
+        run: yarn typecheck
+
+      - name: Lint CSS
+        run: yarn lint:css
+
+      - name: Lint JS
+        run: yarn lint:js
+
+      - name: build  UI library
+        run: yarn build
+
+      - uses: actions/upload-artifact@v4
+        with:
+          name: ui-build
+          path: packages/ui/dist
+
   test:
     name: Run tests
     environment: 'test'
     runs-on: ubuntu-latest
+    needs: [ui]
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
           node-version: '18.x'
           cache: 'yarn'
 
+      - uses: actions/download-artifact@v4
+        with:
+          name: ui-build
+          path: packages/ui/dist
+
       - name: Install dependencies
-        run: yarn install --prefer-offline --frozen-lockfile
+        run: yarn install --frozen-lockfile
+        working-directory: app
 
       - name: Run test
-
         run: yarn test
+        working-directory: app
+
   translation:
     name: Identify error with translation files
     runs-on: ubuntu-latest
+    needs: [ui]
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
           node-version: '18.x'
           cache: 'yarn'
 
+      - uses: actions/download-artifact@v4
+        with:
+          name: ui-build
+          path: packages/ui/dist
+
       - name: Install dependencies
-        run: yarn install --prefer-offline --frozen-lockfile
+        run: yarn install --frozen-lockfile
+        working-directory: app
 
       - name: Identify error with translation files
         run: yarn lint:translation
+        working-directory: app
+
   unimported:
     name: Identify unused files
     runs-on: ubuntu-latest
+    needs: [ui]
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
           node-version: '18.x'
           cache: 'yarn'
 
+      - uses: actions/download-artifact@v4
+        with:
+          name: ui-build
+          path: packages/ui/dist
+
       - name: Install dependencies
-        run: yarn install --prefer-offline --frozen-lockfile
+        run: yarn install --frozen-lockfile
+        working-directory: app
 
       - name: Identify unused files
         run: yarn lint:unused
+        working-directory: app
+
   lint:
     name: Lint JS
     runs-on: ubuntu-latest
+    needs: [ui]
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
           node-version: '18.x'
           cache: 'yarn'
 
+      - uses: actions/download-artifact@v4
+        with:
+          name: ui-build
+          path: packages/ui/dist
+
       - name: Install dependencies
-        run: yarn install --prefer-offline --frozen-lockfile
+        run: yarn install --frozen-lockfile
+        working-directory: app
 
       - name: Lint JS
         run: yarn lint:js
+        working-directory: app
+
   lint-css:
     name: Lint CSS
     runs-on: ubuntu-latest
+    needs: [ui]
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
           node-version: '18.x'
           cache: 'yarn'
 
+      - uses: actions/download-artifact@v4
+        with:
+          name: ui-build
+          path: packages/ui/dist
+
       - name: Install dependencies
-        run: yarn install --prefer-offline --frozen-lockfile
+        run: yarn install --frozen-lockfile
+        working-directory: app
 
       - name: Lint CSS
         run: yarn lint:css
+        working-directory: app
+
   # FIXME: Identify a way to generate schema before we run typecheck
   # typecheck:
   #   name: Typecheck
@@ -111,14 +189,14 @@ jobs:
   #         cache: 'yarn'
 
   #     - name: Install dependencies
-  #       run: yarn install --prefer-offline --frozen-lockfile
+  #       run: yarn install --frozen-lockfile
 
   #     - name: Typecheck
   #       run: yarn typecheck
   build:
     name: Build
     environment: 'test'
-    needs: [lint, lint-css, test]
+    needs: [lint, lint-css, test, ui]
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
@@ -127,8 +205,15 @@ jobs:
           node-version: '18.x'
           cache: 'yarn'
 
+      - uses: actions/download-artifact@v4
+        with:
+          name: ui-build
+          path: packages/ui/dist
+
       - name: Install dependencies
-        run: yarn install --prefer-offline --frozen-lockfile
+        run: yarn install --frozen-lockfile
+        working-directory: app
 
       - name: Build
         run: yarn build
+        working-directory: app

.unimportedrc.json → app/.unimportedrc.json

@@ -6,7 +6,7 @@
         "#assets/content/operational_timeline_title.svg?react",
         "#assets/content/operational_timeline_body.svg?react"
     ],
-    "ignoreUnused": ["@tinymce/tinymce-react"],
+    "ignoreUnused": ["@tinymce/tinymce-react", "@mapbox/mapbox-gl-draw"],
     "extensions": [".ts", ".js", ".tsx", ".jsx"],
     "aliases": {
         "#generated/*": ["./generated/*"],

app/eslint.config.js

@@ -0,0 +1,134 @@
+import { FlatCompat } from '@eslint/eslintrc';
+import js from '@eslint/js';
+import process from 'process';
+
+const dirname = process.cwd();
+
+const compat = new FlatCompat({
+    baseDirectory: dirname,
+    resolvePluginsRelativeTo: dirname,
+});
+
+const appConfigs = compat.config({
+    env: {
+        node: true,
+        browser: true,
+        es2020: true,
+    },
+    root: true,
+    extends: [
+        'airbnb',
+        'airbnb/hooks',
+        'plugin:@typescript-eslint/recommended',
+        'plugin:react-hooks/recommended',
+    ],
+    parser: '@typescript-eslint/parser',
+    parserOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+    },
+    plugins: [
+        '@typescript-eslint',
+        'react-refresh',
+        'simple-import-sort',
+        'import-newlines'
+    ],
+    settings: {
+        'import/parsers': {
+            '@typescript-eslint/parser': ['.ts', '.tsx']
+        },
+        'import/resolver': {
+            typescript: {
+                project: [
+                    './tsconfig.json',
+                ],
+            },
+        },
+    },
+    rules: {
+        'react-refresh/only-export-components': 'warn',
+
+        'no-unused-vars': 0,
+        '@typescript-eslint/no-unused-vars': 1,
+
+        'no-use-before-define': 0,
+        '@typescript-eslint/no-use-before-define': 1,
+
+        'no-shadow': 0,
+        '@typescript-eslint/no-shadow': ['error'],
+
+        'import/no-extraneous-dependencies': [
+            'error',
+            {
+                devDependencies: [
+                    '**/*.test.{ts,tsx}',
+                    'eslint.config.js',
+                    'postcss.config.cjs',
+                    'stylelint.config.cjs',
+                    'vite.config.ts',
+                ],
+                optionalDependencies: false,
+            },
+        ],
+
+        indent: ['error', 4, { SwitchCase: 1 }],
+
+        'import/no-cycle': ['error', { allowUnsafeDynamicCyclicDependency: true }],
+
+        'react/react-in-jsx-scope': 'off',
+        'camelcase': 'off',
+
+        'react/jsx-indent': ['error', 4],
+        'react/jsx-indent-props': ['error', 4],
+        'react/jsx-filename-extension': ['error', { extensions: ['.js', '.jsx', '.ts', '.tsx'] }],
+
+        'import/extensions': ['off', 'never'],
+
+        'react-hooks/rules-of-hooks': 'error',
+        'react-hooks/exhaustive-deps': 'warn',
+
+        'react/require-default-props': ['warn', { ignoreFunctionalComponents: true }],
+        'simple-import-sort/imports': 'warn',
+        'simple-import-sort/exports': 'warn',
+        'import-newlines/enforce': ['warn', 1]
+    },
+    overrides: [
+        {
+            files: ['*.js', '*.jsx', '*.ts', '*.tsx'],
+            rules: {
+                'simple-import-sort/imports': [
+                    'error',
+                    {
+                        'groups': [
+                            // side effect imports
+                            ['^\\u0000'],
+                            // packages `react` related packages come first
+                            ['^react', '^@?\\w'],
+                            // internal packages
+                            ['^#.+$'],
+                            // parent imports. Put `..` last
+                            // other relative imports. Put same-folder imports and `.` last
+                            ['^\\.\\.(?!/?$)', '^\\.\\./?$', '^\\./(?=.*/)(?!/?$)', '^\\.(?!/?$)', '^\\./?$'],
+                            // style imports
+                            ['^.+\\.json$', '^.+\\.module.css$'],
+                        ]
+                    }
+                ]
+            }
+        }
+    ]
+}).map((conf) => ({
+    ...conf,
+    files: ['src/**/*.tsx', 'src/**/*.jsx', 'src/**/*.ts', 'src/**/*.js'],
+    ignores: ['src/generated/types.ts'],
+}));
+
+const otherConfig = {
+    files: ['*.js', '*.ts', '*.cjs'],
+    ...js.configs.recommended,
+};
+
+export default [
+    ...appConfigs,
+    otherConfig,
+];