Project set up

.github/workflows/ci.yml

@@ -69,7 +69,7 @@ jobs:
         run: yarn install
 
       - name: Css Lint
-        run: yarn css-lint
+        run: yarn lint:css
   typecheck:
     name: Typecheck
     runs-on: ubuntu-latest

.unimportedrc.json

@@ -1,11 +1,17 @@
 {
-    "entry": ["./src/main.tsx"],
+    "entry": ["./src/index.tsx"],
     "ignorePatterns": ["**/node_modules/**", "build/**"],
-    "ignoreUnimported": ["**/*.d.ts"],
-    "ignoreUnused": [],
+    "ignoreUnimported": ["**/*.d.ts", "**/*.test.*"],
+    "ignoreUnused": [
+        "@apollo/client",
+        "@graphql-codegen/introspection",
+        "@graphql-codegen/typescript-operations",
+        "@togglecorp/re-map",
+        "@sentry/react"
+    ],
     "extensions": [".ts", ".js", ".tsx", ".jsx"],
     "aliases": {
-        "#views/*": ["./src/views/*"],
-        "#utils/*": ["./src/utils/*"]
+        "#utils/*": ["./src/utils/*"],
+        "#views/*": ["./src/views/*"]
     }
 }

docker-compose.yml

@@ -2,9 +2,7 @@ version: '3.8'
 services:
   react:
     build: .
-    command: sh -c 'yarn install && yarn dev --host'
-    environment:
-      APP_TITLE: ${APP_TITLE:-React Base App}
+    command: sh -c 'yarn install && yarn start --host'
     volumes:
       - .:/code
     ports:

eslint.config.js

@@ -1,10 +1,8 @@
 import { FlatCompat } from '@eslint/eslintrc';
 import js from '@eslint/js';
-import path from 'path';
-import { fileURLToPath } from 'url';
+import process from 'process';
 
-const filename = fileURLToPath(import.meta.url);
-const dirname = path.dirname(filename);
+const dirname = process.cwd();
 
 const compat = new FlatCompat({
     baseDirectory: dirname,
@@ -13,9 +11,11 @@ const compat = new FlatCompat({
 
 const appConfigs = compat.config({
     env: {
+        node: true,
         browser: true,
         es2020: true,
     },
+    root: true,
     extends: [
         'airbnb',
         'airbnb/hooks',
@@ -30,14 +30,18 @@ const appConfigs = compat.config({
     plugins: [
         '@typescript-eslint',
         'react-refresh',
+        'simple-import-sort',
+        'import-newlines'
     ],
     settings: {
         'import/parsers': {
-          '@typescript-eslint/parser': ['.ts', '.tsx']
+            '@typescript-eslint/parser': ['.ts', '.tsx']
         },
         'import/resolver': {
-          typescript: {
-            project: './tsconfig.json',
+            typescript: {
+                project: [
+                    './tsconfig.json',
+                ],
             },
         },
     },
@@ -72,6 +76,7 @@ const appConfigs = compat.config({
         '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],
@@ -83,7 +88,35 @@ const appConfigs = compat.config({
         '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'],

index.html

@@ -8,26 +8,57 @@
         <link
             rel="icon"
             type="image/svg+xml"
-            href="/pineapple.svg"
+            href="#"
         />
         <meta
             name="viewport"
             content="width=device-width, initial-scale=1.0"
         />
         <meta
             name="description"
-            content="React base app with sane some oompf"
+            content=""
         />
         <title>
             %APP_TITLE%
         </title>
-        <link href="https://api.fontshare.com/v2/css?f[]=nunito@300,700,400&f[]=bebas-neue@400&display=swap" rel="stylesheet">
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+
+        <style>
+            html, body {
+                margin: 0;
+                padding: 0;
+            }
+
+            body {
+                font-family: Poppins, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+            }
+
+            @media screen {
+                body {
+                    background-color: #f7f7f7;
+                }
+            }
+
+            #webapp-preload {
+                width: 100vw;
+                height: 100vh;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+        </style>
     </head>
     <body>
         <noscript>
             %APP_TITLE% needs JS.
         </noscript>
-        <div id="webapp-root" />
+        <div id="webapp-root">
+            <div id="webapp-preload">
+                %APP_TITLE% loading...
+            </div>
+        </div>
         <script
             type="module"
             src="/src/index.tsx"

package.json

@@ -1,63 +1,82 @@
 {
-    "name": "react-base-app",
-    "private": true,
+    "name": "alert-hub",
     "version": "0.0.0",
     "type": "module",
+    "private": true,
     "scripts": {
         "start": "vite",
-        "dev": "vite",
         "build": "vite build",
-        "preview": "vite preview",
-        "check-unused": "unimported",
+        "generate": "graphql-codegen --config codegen.yml && eslint --fix src/generated/types.ts",
+        "lint:js": "eslint src",
+        "lint:css": "stylelint \"./src/**/*.css\"",
+        "lint:unused": "unimported",
+        "lint": "yarn lint:js && yarn lint:css && yarn lint:unused",
         "test": "vitest",
-        "coverage": "vitest run --coverage",
-        "typecheck": "tsc",
-        "lint": "eslint src",
-        "css-lint": "stylelint ./src/**/*.css"
+        "test:coverage": "vitest run --coverage",        
+        "typecheck": "tsc"
     },
     "dependencies": {
-        "@togglecorp/fujs": "^2.0.0",
+        "@apollo/client": "^3.9.7",
+        "@graphql-codegen/introspection": "^4.0.3",
+        "@graphql-codegen/typescript-operations": "^4.2.0",
+        "@ifrc-go/icons": "^1.3.3",
+        "@sentry/react": "^7.81.1",
+        "@togglecorp/fujs": "^2.1.1",
+        "@togglecorp/re-map": "^0.2.0-beta-6",
+        "graphql": "^16.8.1",
+        "mapbox-gl": "^1.13.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-router-dom": "^6.11.1"
+        "react-router-dom": "^6.22.3"
     },
     "devDependencies": {
-        "@eslint/eslintrc": "^3.0.2",
-        "@julr/vite-plugin-validate-env": "^1.1.1",
+        "@eslint/eslintrc": "^2.0.3",
+        "@julr/vite-plugin-validate-env": "^1.0.1",
+        "@types/mapbox-gl": "^1.13.0",
         "@types/node": "^20.1.3",
         "@types/react": "^18.0.28",
-        "@types/react-dom": "^18.0.11",
-        "@typescript-eslint/eslint-plugin": "^7.1.1",
-        "@typescript-eslint/parser": "^7.1.1",
-        "@vitejs/plugin-react-swc": "^3.0.0",
+        "@types/react-dom": "^18.2.22",
+        "@types/react-router-dom": "^5.3.3",
+        "@typescript-eslint/eslint-plugin": "^5.59.5",
+        "@typescript-eslint/parser": "^5.59.5",
+        "@vitejs/plugin-react-swc": "^3.5.0",
         "autoprefixer": "^10.4.14",
+        "cross-var": "^1.1.0",
+        "dotenv-cli": "^7.2.1",
         "eslint": "^8.40.0",
         "eslint-config-airbnb": "^19.0.4",
         "eslint-import-resolver-typescript": "^3.5.5",
         "eslint-plugin-import": "^2.27.5",
+        "eslint-plugin-import-exports-imports-resolver": "^1.0.1",
+        "eslint-plugin-import-newlines": "^1.3.4",
         "eslint-plugin-jsx-a11y": "^6.7.1",
         "eslint-plugin-react": "^7.32.2",
         "eslint-plugin-react-hooks": "^4.6.0",
-        "eslint-plugin-react-refresh": "^0.4.5",
-        "happy-dom": "^13.6.2",
-        "patch-package": "^8.0.0",
+        "eslint-plugin-react-refresh": "^0.3.4",
+        "eslint-plugin-simple-import-sort": "^10.0.0",
+        "fast-glob": "^3.3.0",
+        "happy-dom": "^9.18.3",
         "postcss": "^8.3.0",
         "postcss-nested": "^6.0.1",
         "postcss-normalize": "^10.0.1",
-        "postcss-preset-env": "^9.4.0",
+        "postcss-preset-env": "^8.3.2",
         "postinstall-postinstall": "^2.1.0",
-        "stylelint": "^16.2.1",
+        "rollup-plugin-visualizer": "^5.9.0",
+        "stylelint": "^15.6.1",
         "stylelint-config-concentric": "^2.0.2",
-        "stylelint-config-recommended": "^14.0.0",
+        "stylelint-config-recommended": "^12.0.0",
         "stylelint-no-unused-selectors": "git+https://github.com/toggle-corp/stylelint-no-unused-selectors#e0831e1",
-        "stylelint-value-no-unknown-custom-properties": "^6.0.1",
+        "stylelint-value-no-unknown-custom-properties": "^4.0.0",
+        "surge": "^0.23.1",
         "typescript": "^5.0.4",
-        "unimported": "^1.28.0",
-        "vite": "^5.1.5",
-        "vite-plugin-checker": "^0.6.0",
-        "vite-plugin-compression2": "^1.0.0",
-        "vite-plugin-webfont-dl": "^3.7.4",
-        "vite-tsconfig-paths": "^4.2.0",
-        "vitest": "^1.3.1"
+        "unimported": "1.28.0",
+        "vite": "^5.0.10",
+        "vite-plugin-checker": "^0.6.2",
+        "vite-plugin-compression2": "^0.11.0",
+        "vite-plugin-radar": "^0.9.2",
+        "vite-plugin-svgr": "^4.2.0",
+        "vite-plugin-webfont-dl": "^3.9.1",
+        "vite-tsconfig-paths": "^4.2.2",
+        "vitest": "^1.1.0"
     }
 }