Add patches

package.json

@@ -14,7 +14,8 @@
         "lint": "yarn lint:js && yarn lint:css && yarn lint:unused",
         "test": "vitest",
         "test:coverage": "vitest run --coverage",
-        "typecheck": "tsc"
+        "typecheck": "tsc",
+        "postinstall": "patch-package"
     },
     "dependencies": {
         "@apollo/client": "^3.9.9",
@@ -28,8 +29,12 @@
         "@sentry/react": "^7.81.1",
         "@togglecorp/fujs": "^2.1.1",
         "@togglecorp/re-map": "^0.2.0-beta-6",
+        "@togglecorp/toggle-form": "^2.0.4",
+        "@turf/bbox": "^6.5.0",
+        "@turf/buffer": "^6.5.0",
         "graphql": "^16.8.1",
         "mapbox-gl": "^1.13.0",
+        "patch-package": "^8.0.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.22.3"

patches/@turf+bbox+6.5.0.patch

@@ -0,0 +1,17 @@
+diff --git a/node_modules/@turf/bbox/package.json b/node_modules/@turf/bbox/package.json
+index 667487d..609ad20 100644
+--- a/node_modules/@turf/bbox/package.json
++++ b/node_modules/@turf/bbox/package.json
+@@ -29,11 +29,11 @@
+   "exports": {
+     "./package.json": "./package.json",
+     ".": {
++      "types": "./dist/js/index.d.ts",
+       "import": "./dist/es/index.js",
+       "require": "./dist/js/index.js"
+     }
+   },
+-  "types": "dist/js/index.d.ts",
+   "sideEffects": false,
+   "files": [
+     "dist"

patches/@turf+buffer+6.5.0.patch

@@ -0,0 +1,17 @@
+diff --git a/node_modules/@turf/buffer/package.json b/node_modules/@turf/buffer/package.json
+index f350d3e..8fe4032 100644
+--- a/node_modules/@turf/buffer/package.json
++++ b/node_modules/@turf/buffer/package.json
+@@ -35,11 +35,11 @@
+   "exports": {
+     "./package.json": "./package.json",
+     ".": {
++      "types": "./index.d.ts",
+       "import": "./dist/es/index.js",
+       "require": "./dist/js/index.js"
+     }
+   },
+-  "types": "index.d.ts",
+   "sideEffects": false,
+   "files": [
+     "dist",

src/hooks/useInputState.ts

@@ -0,0 +1,43 @@
+import React, {
+    useEffect,
+    useRef,
+} from 'react';
+
+type ValueOrSetterFn<T> = T | ((value: T) => T);
+function isSetterFn<T>(value: ValueOrSetterFn<T>): value is ((value: T) => T) {
+    return typeof value === 'function';
+}
+
+function useInputState<T>(
+    initialValue: T,
+    sideEffect?: (newValue: T, oldValue: T) => T,
+) {
+    const [value, setValue] = React.useState<T>(initialValue);
+    const sideEffectRef = useRef(sideEffect);
+
+    useEffect(
+        () => {
+            sideEffectRef.current = sideEffect;
+        },
+        [sideEffect],
+    );
+
+    type SetValue = React.Dispatch<React.SetStateAction<T>>;
+    const setValueSafe: SetValue = React.useCallback((newValueOrSetter) => {
+        setValue((oldValue) => {
+            const newValue = isSetterFn(newValueOrSetter)
+                ? newValueOrSetter(oldValue)
+                : newValueOrSetter;
+
+            if (sideEffectRef.current) {
+                return sideEffectRef.current(newValue, oldValue);
+            }
+
+            return newValue;
+        });
+    }, []);
+
+    return [value, setValueSafe] as const;
+}
+
+export default useInputState;

src/views/AlertMap/AlertDetails/index.tsx

@@ -0,0 +1,7 @@
+function AlertDetails() {
+    return (
+        <>Alert Details</>
+    );
+}
+
+export default AlertDetails;

src/views/AlertMap/AlertDetail/index.tsx → src/views/AlertMap/AlertListItem/index.tsx

@@ -17,7 +17,7 @@ export interface Props {
     onExpandClick: (alertId: string | undefined) => void;
 }
 
-function AlertDetail(props: Props) {
+function AlertListItem(props: Props) {
     const {
         data,
         onExpandClick,
@@ -47,4 +47,4 @@ function AlertDetail(props: Props) {
     );
 }
 
-export default AlertDetail;
+export default AlertListItem;

src/views/AlertMap/CountryListItem/i18n.json

@@ -0,0 +1,6 @@
+{
+    "namespace": "countryDetails",
+    "strings": {
+        "countryViewDetails": "View Details"
+    }
+}

src/views/AlertMap/CountryListItem/index.tsx

@@ -0,0 +1,49 @@
+import { ChevronRightLineIcon } from '@ifrc-go/icons';
+import {
+    Button,
+    Container,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+
+import { CountryListQuery } from '#generated/types';
+
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+
+type CountryType = NonNullable<NonNullable<NonNullable<CountryListQuery['public']>['countries']>['items']>[number];
+
+export interface Props {
+    data: CountryType;
+    onExpandClick: (alertId: string | undefined) => void;
+}
+
+function CountryListItem(props: Props) {
+    const {
+        data,
+        onExpandClick,
+    } = props;
+
+    const strings = useTranslation(i18n);
+
+    return (
+        <Container
+            className={styles.countryInfo}
+            heading={data.name ?? '--'}
+            headerClassName={styles.CountryListItem}
+            headingLevel={5}
+            key={data.name}
+            actions={(
+                <Button
+                    name={data.id}
+                    onClick={onExpandClick}
+                    variant="tertiary"
+                    title={strings.countryViewDetails}
+                >
+                    <ChevronRightLineIcon className={styles.icon} />
+                </Button>
+            )}
+        />
+    );
+}
+
+export default CountryListItem;

src/views/AlertMap/CountryListItem/styles.module.css

@@ -0,0 +1,32 @@
+.country-info {
+    .country-list-item {
+        gap: 0;
+
+        .icon {
+            align-self: flex-end;
+            font-size: var(--go-ui-height-icon-multiplier);
+        }:hover {
+            .icon {
+                animation: wiggle var(--go-ui-duration-transition-slow) ease-in-out;
+            }
+        }
+    }
+
+    @keyframes wiggle {
+        0% {
+            transform: translateX(0);
+        }
+
+        25% {
+            transform: translateX(-0.1rem);
+        }
+
+        50% {
+            transform: translateX(0.1rem);
+        }
+
+        100% {
+            transform: translateX(0);
+        }
+    }
+}

src/views/AlertMap/Filters/i18n.json

@@ -0,0 +1,10 @@
+{
+    "namespace": "common",
+    "strings": {
+        "riskAllCountries": "All countries",
+        "riskSelectHazardTypes": "Select Hazard types",
+        "riskSelectMonths": "Select months",
+        "riskNormalize": "Normalize by population",
+        "riskCopingCapacity": "Include coping capacity"
+    }
+}

src/views/AlertMap/Filters/index.tsx

@@ -0,0 +1,66 @@
+import { useCallback, useMemo } from 'react';
+import {
+    MultiSelectInput,
+} from '@ifrc-go/ui';
+import { gql } from '@apollo/client';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import {
+    stringNameSelector,
+} from '@ifrc-go/ui/utils';
+import { listToGroupList } from '@togglecorp/fujs';
+import { EntriesAsList } from '@togglecorp/toggle-form';
+
+import { CountryListQuery } from '#generated/types';
+
+import i18n from './i18n.json';
+
+type CountryType = NonNullable<NonNullable<NonNullable<CountryListQuery['public']>['countries']>['items']>[number];
+
+const countryKeySelector = (country: CountryType) => country?.id;
+
+export interface FilterValue {
+    countries: string[];
+    regions: string[];
+}
+
+interface Props {
+    value: FilterValue;
+    onChange: React.Dispatch<React.SetStateAction<FilterValue>>;
+    countries?: NonNullable<CountryListQuery['public']['countries']['items']>;
+}
+
+function Filters(props: Props) {
+    const {
+        value,
+        onChange,
+        countries,
+    } = props;
+
+    const strings = useTranslation(i18n);
+
+    const handleChange = useCallback(
+        (...args: EntriesAsList<FilterValue>) => {
+            const [val, key] = args;
+            onChange((prevValue): FilterValue => ({
+                ...prevValue,
+                [key]: val,
+            }));
+        },
+        [onChange],
+    );
+
+    return (
+        <MultiSelectInput
+            placeholder={strings.riskAllCountries}
+            name="countries"
+            options={countries}
+            keySelector={countryKeySelector}
+            labelSelector={stringNameSelector}
+            value={value.countries}
+            onChange={handleChange}
+            withSelectAll
+        />
+    );
+}
+
+export default Filters;

src/views/AlertMap/Filters/styles.module.css

@@ -0,0 +1,5 @@
+.filters {
+    display: grid;
+    grid-gap: var(--go-ui-spacing-md);
+    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
+}