Add NavBar

.gitignore

@@ -6,7 +6,7 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
-
+ui
 node_modules
 dist
 dist-ssr

package.json

@@ -21,9 +21,12 @@
         "@graphql-codegen/introspection": "^4.0.3",
         "@graphql-codegen/typescript-operations": "^4.2.0",
         "@ifrc-go/icons": "^1.3.3",
-        "@sentry/react": "^7.108.0",
+        "@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.2.0-beta-6",
+        "@togglecorp/re-map": "^0.1.4",
+        "@turf/bbox": "^6.5.0",
         "graphql": "^16.8.1",
         "mapbox-gl": "^1.13.0",
         "react": "^18.2.0",

src/App/routes.tsx

@@ -1,12 +1,10 @@
-import type {
+import {
     MyInputIndexRouteObject,
     MyInputNonIndexRouteObject,
     MyInputRouteObject,
     MyOutputIndexRouteObject,
     MyOutputNonIndexRouteObject,
     MyOutputRouteObject,
-} from '#utils/routes';
-import {
     unwrapRoute,
     wrapRoute,
 } from '#utils/routes';
@@ -31,7 +29,7 @@ const myWrapRoute: MyWrapRoute = wrapRoute;
 const root = myWrapRoute({
     title: '',
     path: '/',
-    component: () => import('#views/Root'),
+    component: () => import('#views/RootLayout'),
     componentProps: {},
     errorElement: <PageError />,
 });

src/components/DropdownMenuItem/index.tsx

@@ -0,0 +1,94 @@
+import {
+    useCallback,
+    useContext,
+} from 'react';
+import { LinkProps } from 'react-router-dom';
+import {
+    Button,
+    ButtonProps,
+    ConfirmButton,
+    ConfirmButtonProps,
+} from '@ifrc-go/ui';
+import { DropdownMenuContext } from '@ifrc-go/ui/contexts';
+import { isDefined } from '@togglecorp/fujs';
+
+type CommonProp = {
+    persist?: boolean;
+}
+
+type ButtonTypeProps<NAME> = Omit<ButtonProps<NAME>, 'type'> & {
+    type: 'button';
+}
+
+type LinkTypeProps = LinkProps & {
+    type: 'link';
+}
+
+type ConfirmButtonTypeProps<NAME> = Omit<ConfirmButtonProps<NAME>, 'type'> & {
+    type: 'confirm-button',
+}
+
+type Props<N> = CommonProp & (ButtonTypeProps<N> | LinkTypeProps | ConfirmButtonTypeProps<N>);
+
+function DropdownMenuItem<NAME>(props: Props<NAME>) {
+    const {
+        type,
+        onClick,
+        persist = false,
+    } = props;
+    const { setShowDropdown } = useContext(DropdownMenuContext);
+
+    const handleButtonClick = useCallback(
+        (name: NAME, e: React.MouseEvent<HTMLButtonElement>) => {
+            if (!persist) {
+                setShowDropdown(false);
+            }
+            if (isDefined(onClick) && type !== 'link') {
+                onClick(name, e);
+            }
+        },
+        [setShowDropdown, type, onClick, persist],
+    );
+
+    if (type === 'button') {
+        const {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            type: _,
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            persist: __,
+            variant = 'dropdown-item',
+            ...otherProps
+        } = props;
+
+        return (
+            <Button
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...otherProps}
+                variant={variant}
+                onClick={handleButtonClick}
+            />
+        );
+    }
+
+    if (type === 'confirm-button') {
+        const {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            type: _,
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            persist: __,
+            variant = 'dropdown-item',
+            ...otherProps
+        } = props;
+
+        return (
+            <ConfirmButton
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...otherProps}
+                variant={variant}
+                onClick={handleButtonClick}
+            />
+        );
+    }
+}
+
+export default DropdownMenuItem;

src/components/Navbar/LanguageDropdown/index.tsx

@@ -0,0 +1,93 @@
+import {
+    useCallback,
+    useContext,
+    useEffect,
+} from 'react';
+import { CheckFillIcon } from '@ifrc-go/icons';
+import { DropdownMenu } from '@ifrc-go/ui';
+import {
+    type Language,
+    LanguageContext,
+} from '@ifrc-go/ui/contexts';
+import { languageNameMapEn } from '@ifrc-go/ui/utils';
+import {
+    _cs,
+    mapToList,
+} from '@togglecorp/fujs';
+
+import DropdownMenuItem from '#components/DropdownMenuItem';
+
+import styles from './styles.module.css';
+
+// NOTE: these doesn't need to be translated
+const languageNameMap: Record<Language, string> = {
+    en: 'English',
+    fr: 'Français',
+    es: 'Español',
+    ar: 'عربي',
+};
+
+const languageList = mapToList(
+    languageNameMap,
+    (value, key) => ({ key: key as Language, value }),
+);
+
+function LangaugeDropdown() {
+    const {
+        currentLanguage,
+        setCurrentLanguage,
+    } = useContext(LanguageContext);
+
+    useEffect(
+        () => {
+            if (currentLanguage === 'ar') {
+                document.body.style.direction = 'rtl';
+                document.body.setAttribute('dir', 'rtl');
+            } else {
+                document.body.style.direction = 'ltr';
+                document.body.setAttribute('dir', 'ltr');
+            }
+        },
+        [currentLanguage],
+    );
+
+    const handleLanguageConfirm = useCallback(
+        (newLanguage: Language) => {
+            setCurrentLanguage(newLanguage);
+            window.location.reload();
+        },
+        [setCurrentLanguage],
+    );
+
+    return (
+        <DropdownMenu
+            label={languageNameMapEn[currentLanguage]}
+            variant="tertiary"
+            persistent
+        >
+            {languageList.map(
+                (language) => (
+                    <DropdownMenuItem
+                        type="confirm-button"
+                        key={language.key}
+                        name={language.key}
+                        persist
+                        onConfirm={handleLanguageConfirm}
+                        icons={(
+                            <CheckFillIcon
+                                className={_cs(
+                                    styles.icon,
+                                    language.key === currentLanguage && styles.active,
+                                )}
+                            />
+                        )}
+                    >
+                        {language.value}
+                    </DropdownMenuItem>
+                ),
+            )}
+        </DropdownMenu>
+    );
+}
+
+export default LangaugeDropdown;

src/components/Navbar/LanguageDropdown/styles.module.css

@@ -0,0 +1,8 @@
+.icon {
+    color: transparent;
+    font-size: var(--go-ui-height-icon-multiplier);
+
+    &.active {
+        color: var(--go-ui-color-primary-red)
+    }
+}

src/components/Navbar/i18n.json

@@ -0,0 +1,10 @@
+{
+    "namespace": "common",
+    "strings": {
+        "headerAppName": "Alert Hub",
+        "headerLogoAltText": "Alert Hub logo",
+        "appLogin": "Login",
+        "appAbout": "About",
+        "appResources": "Resources"
+    }
+}