feat(authentication): Added login, routes and navigation

.github/workflows/ci.yml

@@ -33,6 +33,9 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
+      - name: Generate Type
+        run: pnpm generate:type
+
       - name: Lint
         run: pnpm lint
   build:
@@ -58,5 +61,8 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
+      - name: Generate Type
+        run: pnpm generate:type
+
       - name: Build
         run: pnpm build

app/components/Navbar/index.tsx

@@ -0,0 +1,77 @@
+import React, {
+    use,
+    useCallback,
+} from 'react';
+import { useNavigate } from 'react-router';
+import {
+    Button,
+    DropdownMenu,
+    Heading,
+} from '@ifrc-go/ui';
+import { gql } from 'urql';
+
+import UserContext from '#contexts/UserContext';
+import { useLogoutMutation } from '#generated/types/graphql';
+import useAlert from '#hooks/useAlert';
+
+import styles from './styles.module.css';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const LOGOUT = gql`
+    mutation Logout {
+        logout
+    }
+`;
+
+function Navbar() {
+    const { user, setUser } = use(UserContext);
+    const alert = useAlert();
+    const navigate = useNavigate();
+
+    const [{ fetching: pendingLogout }, triggerLogout] = useLogoutMutation();
+
+    const handleLogout = useCallback(async () => {
+        const res = await triggerLogout({});
+        const logoutResponse = res.data?.logout;
+        if (logoutResponse) {
+            setUser(undefined);
+            navigate('/login');
+            alert.show('Logout Successful', { variant: 'success' });
+        }
+    }, [navigate, triggerLogout, setUser, alert]);
+
+    return (
+        <nav className={styles.navbar}>
+            <Heading className={styles.title}>NRCS</Heading>
+            <DropdownMenu
+                variant="tertiary"
+                label={(
+                    <div className={styles.userInfo}>
+                        <Heading level={5}>
+                            {user?.firstName}
+                            {' '}
+                            {user?.lastName}
+                        </Heading>
+                        <Heading level={6}>
+                            Admin
+                        </Heading>
+                    </div>
+                )}
+            >
+                <React.Fragment key=".0">
+                    <Button
+                        name="logout"
+                        variant="tertiary"
+                        className={styles.dropdownOption}
+                        onClick={handleLogout}
+                        disabled={pendingLogout}
+                    >
+                        {pendingLogout ? 'Logging out' : 'Logout'}
+                    </Button>
+                </React.Fragment>
+            </DropdownMenu>
+        </nav>
+    );
+}
+
+export default Navbar;

app/components/Navbar/styles.module.css

@@ -0,0 +1,44 @@
+.navbar {
+    display: flex;
+    flex-shrink: 0;
+    justify-content: space-between;
+    border-bottom: var(--go-ui-width-separator-thin) solid
+        var(--go-ui-color-primary-red);
+    background-color: var(--go-ui-color-white);
+    padding: var(--go-ui-spacing-md) var(--go-ui-spacing-lg);
+    animation: slide-down var(--go-ui-duration-animation-medium) ease-in
+        forwards;
+    .title {
+        color: var(--go-ui-color-red);
+        font-size: var(--go-ui-font-size-3xl);
+    }
+    .userInfo {
+        display: flex;
+        align-items: start;
+        flex-direction: column;
+    }
+}
+.dropdown-option {
+    cursor: pointer;
+    padding: var(--go-ui-spacing-xs);
+    padding-left: var(--go-ui-spacing-md);
+    width: 100%;
+    overflow: hidden;
+    &:hover {
+        color: var(--go-ui-color-primary-red);
+    }
+}
+.test {
+    width: 150px;
+}
+
+@keyframes slide-down {
+    0% {
+        transform: translateY(-0.25rem);
+        opacity: 0;
+    }
+    100% {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}

app/components/Navigation/index.tsx

@@ -0,0 +1,102 @@
+import {
+    ReactNode,
+    useCallback,
+    useState,
+} from 'react';
+import {
+    IoChevronDownOutline,
+    IoChevronUpOutline,
+} from 'react-icons/io5';
+import { NavLink } from 'react-router';
+import { Button } from '@ifrc-go/ui';
+import { _cs } from '@togglecorp/fujs';
+
+import styles from './styles.module.css';
+
+export interface NavigationItem {
+    title: string;
+    to?: string;
+    icon?: ReactNode;
+    variant: 'root' | 'group' | 'leaf';
+    children?: NavigationItem[];
+
+}
+interface NavigationProps {
+    navigationItem: NavigationItem[];
+}
+function Navigation({ navigationItem }: NavigationProps) {
+    const [openAccordion, setOpenAccordion] = useState(
+        navigationItem.map((_, i) => i),
+    );
+
+    const toggleAccordion = useCallback((index: number) => {
+        setOpenAccordion((prev) => (prev.includes(index)
+            ? prev.filter((i) => i !== index)
+            : [...prev, index]));
+    }, []);
+
+    return (
+        <nav className={styles.nav}>
+            {navigationItem.map((item, index) => {
+                const isOpen = openAccordion.includes(index);
+                return (
+                    <div
+                        key={item.title}
+                        className={_cs(
+                            styles[item.variant ?? 'leaf'],
+                        )}
+                    >
+                        <Button
+                            name={index}
+                            type="button"
+                            className={styles.navHeaderContainer}
+                            childrenContainerClassName={styles.navHeader}
+                            onClick={toggleAccordion}
+                            variant="tertiary"
+                            icons={item.icon}
+                        >
+                            {item.title}
+                            {isOpen ? <IoChevronUpOutline /> : <IoChevronDownOutline />}
+                        </Button>
+                        {isOpen && (
+                            <div
+                                className={_cs(
+                                    styles.navContent,
+                                    styles[item.variant ?? 'leaf'],
+                                )}
+                            >
+                                {item.children && item.children.map((child) => {
+                                    if (!child.to && child.children) {
+                                        return (
+                                            <Navigation
+                                                key={child.title}
+                                                navigationItem={[child]}
+                                            />
+                                        );
+                                    }
+                                    return (
+                                        <NavLink
+                                            key={child.to}
+                                            to={child.to ?? ''}
+                                            className={({ isActive }) => _cs(
+                                                styles.routeLink,
+                                                isActive && styles.activeRoute,
+                                                styles[child.variant ?? 'leaf'],
+
+                                            )}
+                                        >
+                                            {child.title}
+                                        </NavLink>
+                                    );
+                                })}
+
+                            </div>
+                        )}
+                    </div>
+                );
+            })}
+        </nav>
+    );
+}
+
+export default Navigation;

app/components/Navigation/styles.module.css

@@ -0,0 +1,42 @@
+.nav {
+    border-right: 2px solid var(--go-ui-color-gray-20);
+    height: 100%;
+    .nav {
+        border: none;
+    }
+    .navHeaderContainer {
+        border-bottom: 2px solid var(--go-ui-color-gray-20);
+        background-color: var(--go-ui-color-gray-10);
+        padding: var(--go-ui-spacing-lg) var(--go-ui-spacing-2xl);
+        width: 100%;
+        .navHeader {
+            display: flex;
+            justify-content: space-between;
+        }
+    }
+    .navContent {
+        display: flex;
+        flex-direction: column;
+        .routeLink {
+            border-bottom: 2px solid var(--go-ui-color-gray-20);
+            &:hover {
+                color: var(--go-ui-color-primary-red);
+            }
+            padding: var(--go-ui-spacing-lg) var(--go-ui-spacing-2xl);
+        }
+
+        .activeRoute {
+            text-decoration: underline;
+            color: var(--go-ui-color-primary-red);
+        }
+    }
+    .group {
+        .navHeaderContainer {
+            background: none;
+            font-weight: var(--go-ui-font-weight-normal);
+        }
+        .leaf {
+            padding-left: var(--go-ui-spacing-3xl);
+        }
+    }
+}

app/components/Page/index.tsx

@@ -0,0 +1,34 @@
+import { RefObject } from 'react';
+import { _cs } from '@togglecorp/fujs';
+
+import styles from './styles.module.css';
+
+interface Props {
+    className?: string;
+    children?: React.ReactNode;
+    elementRef?: RefObject<HTMLDivElement>
+    leftPaneContent?: React.ReactNode;
+    leftPaneContainerClassName?: string;
+}
+function Page(props: Props) {
+    const {
+        className,
+        children,
+        elementRef,
+        leftPaneContent,
+        leftPaneContainerClassName,
+    } = props;
+
+    return (
+        <div className={_cs(className, styles.page)} ref={elementRef}>
+            {leftPaneContent && (
+                <div className={_cs(leftPaneContainerClassName, styles.leftPane)}>
+                    {leftPaneContent}
+                </div>
+            )}
+            {children}
+        </div>
+    );
+}
+
+export default Page;

app/components/Page/styles.module.css

@@ -0,0 +1,13 @@
+.page {
+    display: flex;
+    flex-direction: row;
+    flex-grow: 1;
+    overflow: hidden;
+
+    .leftPane {
+        display: flex;
+        flex-direction: column;
+        background-color: var(--go-ui-color-white);
+        gap: var(--go-ui-spacing-md);
+    }
+}

app/components/PreloadMessage/index.tsx

@@ -0,0 +1,17 @@
+import styles from './styles.module.css';
+
+interface Props {
+    children?: React.ReactNode;
+}
+
+function PreloadMessage(props: Props) {
+    const { children } = props;
+
+    return (
+        <div className={styles.preloadMessage}>
+            {children}
+        </div>
+    );
+}
+
+export default PreloadMessage;

app/components/PreloadMessage/styles.module.css

@@ -0,0 +1,11 @@
+.preload-message {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    flex-grow: 1;
+    justify-content: center;
+    background-color: var(--go-ui-color-background);
+    height: 100vh;
+    text-align: center;
+    font-size: var(--go-ui-font-size-lg);
+}