fix: type related issues

IFRCGo · Mar 27, 2024 · 0cf4d23 · 0cf4d23
1 parent 4ea29d1
commit 0cf4d23
Show file tree

Hide file tree

Showing 12 changed files with 513 additions and 2,348 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -71,24 +71,23 @@ jobs:
 
       - name: Css Lint
         run: yarn lint:css
-  # typecheck:
-  #   name: Typecheck
-  #   runs-on: ubuntu-latest
-  #   steps:
-  #     - uses: actions/checkout@v4
-  #     - uses: actions/setup-node@v4
-  #       with:
-  #         node-version: 20
-  #         cache: 'yarn'
+  typecheck:
+    name: Typecheck
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'yarn'
 
-  #     - name: Install dependencies
-  #       run: yarn install
+      - name: Install dependencies
+        run: yarn install
 
-  #     - name: Typecheck
-  #       run: yarn typecheck
+      - name: Typecheck
+        run: yarn typecheck
   build:
     name: Build
-    # needs: [lint, css-lint, typecheck, test]
     needs: [lint, css-lint, typecheck, test]
     runs-on: ubuntu-latest
     steps:

diff --git a/env.ts b/env.ts
@@ -1,6 +1,7 @@
 import { defineConfig, Schema } from '@julr/vite-plugin-validate-env';
 
+// TODO: Integrate .env for CI and remove optional() call on required fields
 export default defineConfig({
     APP_TITLE: Schema.string.optional(),
-    APP_MAPBOX_ACCESS_TOKEN: Schema.string(),
+    APP_MAPBOX_ACCESS_TOKEN: Schema.string.optional(),
 })
diff --git a/package.json b/package.json
@@ -1,85 +1,84 @@
 {
-    "name": "ifrc-alert-hub",
-    "version": "0.0.0",
-    "type": "module",
-    "private": true,
-    "scripts": {
-        "start": "vite",
-        "build": "vite build",
-        "preview": "vite preview",
-        "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",
-        "test:coverage": "vitest run --coverage",
-        "typecheck": "tsc"
-    },
-    "dependencies": {
-        "@apollo/client": "^3.9.9",
-        "@graphql-codegen/introspection": "^4.0.3",
-        "@graphql-codegen/typescript-operations": "^4.2.0",
-        "@ifrc-go/icons": "^1.3.3",
-        "@ifrc-go/ui": "^1.0.0",
-        "@mapbox/mapbox-gl-draw": "^1.4.3",
-        "@sentry/react": "^7.81.1",
-        "@togglecorp/fujs": "^2.1.1",
-        "@togglecorp/re-map": "^0.1.4",
-        "@turf/bbox": "^6.5.0",
-        "graphql": "^16.8.1",
-        "mapbox-gl": "^3.2.0",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
-        "react-router-dom": "^6.22.3"
-    },
-    "devDependencies": {
-        "@eslint/eslintrc": "^3.0.2",
-        "@julr/vite-plugin-validate-env": "^1.0.1",
-        "@types/mapbox-gl": "^3.1.0",
-        "@types/node": "^20.1.3",
-        "@types/react": "^18.0.28",
-        "@types/react-dom": "^18.2.22",
-        "@types/react-router-dom": "^5.3.3",
-        "@typescript-eslint/eslint-plugin": "^7.4.0",
-        "@typescript-eslint/parser": "^7.4.0",
-        "@vitejs/plugin-react-swc": "^3.5.0",
-        "autoprefixer": "^10.4.19",
-        "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.6",
-        "eslint-plugin-simple-import-sort": "^12.0.0",
-        "fast-glob": "^3.3.0",
-        "happy-dom": "^14.3.8",
-        "postcss": "^8.4.38",
-        "postcss-nested": "^6.0.1",
-        "postcss-normalize": "^10.0.1",
-        "postcss-preset-env": "^9.5.2",
-        "postinstall-postinstall": "^2.1.0",
-        "rollup-plugin-visualizer": "^5.9.0",
-        "stylelint": "^15.11.0",
-        "stylelint-config-concentric-order": "^5.2.0",
-        "stylelint-config-recommended": "^14.0.0",
-        "stylelint-no-unused-selectors": "git+https://github.com/toggle-corp/stylelint-no-unused-selectors#e0831e1",
-        "stylelint-value-no-unknown-custom-properties": "^5.0.0",
-        "surge": "^0.23.1",
-        "typescript": "^5.4.3",
-        "unimported": "1.31.1",
-        "vite": "^5.2.6",
-        "vite-plugin-checker": "^0.6.2",
-        "vite-plugin-compression2": "^1.0.0",
-        "vite-plugin-svgr": "^4.2.0",
-        "vite-plugin-webfont-dl": "^3.9.1",
-        "vite-tsconfig-paths": "^4.2.2",
-        "vitest": "^1.1.0"
-    }
+  "name": "ifrc-alert-hub",
+  "version": "0.0.0",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "start": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "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",
+    "test:coverage": "vitest run --coverage",
+    "typecheck": "tsc"
+  },
+  "dependencies": {
+    "@apollo/client": "^3.9.9",
+    "@graphql-codegen/introspection": "^4.0.3",
+    "@graphql-codegen/typescript-operations": "^4.2.0",
+    "@ifrc-go/icons": "^1.3.3",
+    "@ifrc-go/ui": "^1.0.0",
+    "@mapbox/mapbox-gl-draw": "^1.4.3",
+    "@sentry/react": "^7.81.1",
+    "@togglecorp/fujs": "^2.1.1",
+    "@togglecorp/re-map": "^0.1.4",
+    "graphql": "^16.8.1",
+    "mapbox-gl": "^1.13.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.3"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3.0.2",
+    "@julr/vite-plugin-validate-env": "^1.0.1",
+    "@types/mapbox-gl": "^3.1.0",
+    "@types/node": "^20.1.3",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.2.22",
+    "@types/react-router-dom": "^5.3.3",
+    "@typescript-eslint/eslint-plugin": "^7.4.0",
+    "@typescript-eslint/parser": "^7.4.0",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "autoprefixer": "^10.4.19",
+    "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.6",
+    "eslint-plugin-simple-import-sort": "^12.0.0",
+    "fast-glob": "^3.3.0",
+    "happy-dom": "^14.3.8",
+    "postcss": "^8.4.38",
+    "postcss-nested": "^6.0.1",
+    "postcss-normalize": "^10.0.1",
+    "postcss-preset-env": "^9.5.2",
+    "postinstall-postinstall": "^2.1.0",
+    "rollup-plugin-visualizer": "^5.9.0",
+    "stylelint": "^15.11.0",
+    "stylelint-config-concentric-order": "^5.2.0",
+    "stylelint-config-recommended": "^14.0.0",
+    "stylelint-no-unused-selectors": "git+https://github.com/toggle-corp/stylelint-no-unused-selectors#e0831e1",
+    "stylelint-value-no-unknown-custom-properties": "^5.0.0",
+    "surge": "^0.23.1",
+    "typescript": "^5.4.3",
+    "unimported": "1.31.1",
+    "vite": "^5.2.6",
+    "vite-plugin-checker": "^0.6.2",
+    "vite-plugin-compression2": "^1.0.0",
+    "vite-plugin-svgr": "^4.2.0",
+    "vite-plugin-webfont-dl": "^3.9.1",
+    "vite-tsconfig-paths": "^4.2.2",
+    "vitest": "^1.1.0"
+  }
 }
diff --git a/src/components/GlobalFooter/styles.module.css b/src/components/GlobalFooter/styles.module.css
@@ -4,8 +4,8 @@
 
     .content {
         display: flex;
-        gap: var(--go-ui-spacing-2xl);
         flex-wrap: wrap;
+        gap: var(--go-ui-spacing-2xl);
 
         .section {
             display: flex;

diff --git a/src/components/Navbar/styles.module.css b/src/components/Navbar/styles.module.css
@@ -7,17 +7,17 @@
 
         .top-content {
             display: flex;
-            align-items: center;
-            gap: var(--go-ui-spacing-md) var(--go-ui-spacing-lg);
             flex-wrap: wrap;
+            gap: var(--go-ui-spacing-md) var(--go-ui-spacing-lg);
+            align-items: center;
             padding: var(--go-ui-spacing-md) var(--go-ui-spacing-lg);
 
             .brand {
                 display: flex;
-                align-items: top;
                 flex-grow: 1;
                 flex-wrap: wrap;
                 gap: var(--go-ui-spacing-sm);
+                align-items: top;
 
                 .go-icon {
                     height: var(--go-ui-height-brand-icon);
@@ -32,8 +32,8 @@
 
             .actions {
                 display: flex;
-                align-items: center;
                 flex-wrap: wrap;
+                align-items: center;
 
                 .action-item {
                     text-decoration: none;

diff --git a/src/components/Page/index.tsx b/src/components/Page/index.tsx
@@ -24,7 +24,8 @@ import useCurrentLanguage from '#hooks/domain/useCurrentLanguage';
 import i18n from './i18n.json';
 import styles from './styles.module.css';
 
-type TranslationModuleOriginalLanguageEnum = components<'read'>['schemas']['TranslationModuleOriginalLanguageEnum'];
+// TODO use enum field from alert hub api
+type TranslationModuleOriginalLanguageEnum = 'en' | 'es' | 'ar' | 'fr';
 
 interface Props {
     className?: string;

diff --git a/src/declarations/env.d.ts b/src/declarations/env.d.ts
@@ -0,0 +1,15 @@
+/// <reference types="vite/client" />
+
+type ImportMetaEnvAugmented = import('@julr/vite-plugin-validate-env').ImportMetaEnvAugmented<
+  typeof import('../../env').default
+>
+
+interface ImportMetaEnv extends ImportMetaEnvAugmented {
+    // The custom environment variables that are passed through the vite
+    APP_COMMIT_HASH: string;
+    APP_VERSION: string;
+}
+
+interface ImportMeta {
+    readonly env: ImportMetaEnv
+}
diff --git a/src/env.d.ts b/src/env.d.ts
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
@@ -1,45 +1,9 @@
-export const defaultChartMargin = {
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
-};
-
-export const defaultChartPadding = {
-    top: 10,
-    right: 10,
-    bottom: 10,
-    left: 10,
-};
-
 // Map
 export const DURATION_MAP_ZOOM = 1000;
 export const DEFAULT_MAP_PADDING = 50;
 
-// Storage
-
-export const KEY_USER_STORAGE = 'user';
-export const KEY_LANGUAGE_STORAGE = 'language';
-
-// Search page
-
-export const KEY_URL_SEARCH = 'keyword';
-export const SEARCH_TEXT_LENGTH_MIN = 3;
-
 // Colors
 
 export const COLOR_WHITE = '#ffffff';
 export const COLOR_TEXT = '#313131';
-export const COLOR_TEXT_ON_DARK = COLOR_WHITE;
-export const COLOR_LIGHT_GREY = '#e0e0e0';
-export const COLOR_DARK_GREY = '#a5a5a5';
-export const COLOR_BLACK = '#000000';
-export const COLOR_LIGHT_YELLOW = '#ffd470';
-export const COLOR_YELLOW = '#ff9e00';
-export const COLOR_BLUE = '#4c5d9b';
-export const COLOR_LIGHT_BLUE = '#c7d3e0';
-export const COLOR_ORANGE = '#ff8000';
-export const COLOR_RED = '#f5333f';
-export const COLOR_DARK_RED = '#730413';
-export const COLOR_PRIMARY_BLUE = '#011e41';
 export const COLOR_PRIMARY_RED = '#f5333f';