feat(eap): add export for simplified EAP

Author: frozenhelium

app/src/App/routes/index.tsx

@@ -1226,6 +1226,21 @@ const eapDevelopmentRegistrationForm = customWrapRoute({
     },
 });
 
+const simplifiedEapExport = customWrapRoute({
+    parent: rootLayout,
+    path: 'eap/:eapId/export',
+    component: {
+        render: () => import('#views/SimplifiedEapExport'),
+        props: {},
+    },
+    wrapperComponent: Auth,
+    context: {
+        title: 'Simplified EAP Export',
+        visibility: 'is-authenticated',
+    },
+});
+
+
 type DefaultPerProcessChild = 'new';
 const perProcessLayout = customWrapRoute({
     parent: rootLayout,
@@ -1504,6 +1519,7 @@ const wrappedRoutes = {
     drefProcessLayout,
     eapRegistrationLayout,
     eapDevelopmentRegistrationForm,
+    simplifiedEapExport,
 };
 
 export const unwrappedRoutes = unwrapRoute(Object.values(wrappedRoutes));

app/src/components/printable/PrintableContainer/index.tsx

@@ -0,0 +1,43 @@
+import {
+    Heading,
+    type HeadingProps,
+} from '@ifrc-go/ui/printable';
+import { getSpacingValue } from '@ifrc-go/ui/utils';
+
+import styles from './styles.module.css';
+
+interface Props {
+    heading?: React.ReactNode;
+    headingLevel?: HeadingProps['level'];
+    breakBefore?: boolean;
+    breakAfter?: boolean;
+    children?: React.ReactNode;
+}
+
+function PrintableContainer(props: Props) {
+    const {
+        heading,
+        headingLevel = 3,
+        breakAfter,
+        breakBefore,
+        children,
+    } = props;
+
+    const spacing = getSpacingValue('3xl', -headingLevel);
+
+    return (
+        <>
+            {breakBefore && <div className={styles.pageBreak} />}
+            {heading && (
+                <Heading level={headingLevel}>
+                    {heading}
+                </Heading>
+            )}
+            {children}
+            <div style={{ marginBlockEnd: spacing }} />
+            {breakAfter && <div className={styles.pageBreak} />}
+        </>
+    );
+}
+
+export default PrintableContainer;

app/src/components/printable/PrintableContainer/styles.module.css

@@ -0,0 +1,3 @@
+.page-break {
+    break-before: page;
+}

app/src/components/printable/PrintableDataDisplay/index.tsx

@@ -0,0 +1,164 @@
+import { useMemo } from 'react';
+import {
+    BooleanOutput,
+    type BooleanOutputProps,
+    DateOutput,
+    type DateOutputProps,
+    NumberOutput,
+    type NumberOutputProps,
+} from '@ifrc-go/ui';
+import { useSpacingToken } from '@ifrc-go/ui/hooks';
+import {
+    DEFAULT_INVALID_TEXT,
+    DEFAULT_PRINT_DATE_FORMAT,
+    fullSpacings,
+    gapSpacings,
+    paddingSpacings,
+    type SpacingType,
+} from '@ifrc-go/ui/utils';
+import { _cs } from '@togglecorp/fujs';
+
+import styles from './styles.module.css';
+
+interface BaseProps {
+    className?: string;
+    label?: React.ReactNode;
+    strongValue?: boolean;
+    strongLabel?: boolean;
+    withoutLabelColon?: boolean;
+    invalidText?: React.ReactNode;
+    variant?: 'block' | 'inline' | 'contents';
+    withPadding?: boolean;
+    withBackground?: boolean;
+    spacing?: SpacingType;
+}
+
+interface BooleanProps extends BooleanOutputProps {
+    valueType: 'boolean',
+}
+
+interface NumberProps extends NumberOutputProps {
+    valueType: 'number',
+}
+
+interface DateProps extends DateOutputProps {
+    valueType: 'date',
+}
+
+interface TextProps {
+    valueType: 'text',
+    value: string | null | undefined;
+}
+
+interface NodeProps {
+    valueType?: never;
+    value?: React.ReactNode;
+}
+
+export type Props = BaseProps & (
+    NodeProps | TextProps | DateProps | NumberProps | BooleanProps
+);
+
+function PrintableDataDisplay(props: Props) {
+    const {
+        className,
+        label,
+        strongLabel,
+        strongValue,
+        withoutLabelColon,
+        invalidText = DEFAULT_INVALID_TEXT,
+        variant = 'inline',
+        withPadding,
+        withBackground,
+        spacing,
+        ...otherProps
+    } = props;
+
+    const valueComponent = useMemo(() => {
+        if (otherProps.valueType === 'number') {
+            return (
+                <NumberOutput
+                    // eslint-disable-next-line react/jsx-props-no-spreading
+                    {...otherProps}
+                    invalidText={invalidText}
+                />
+            );
+        }
+
+        if (otherProps.valueType === 'date') {
+            return (
+                <DateOutput
+                    // eslint-disable-next-line react/jsx-props-no-spreading
+                    {...otherProps}
+                    invalidText={invalidText}
+                    format={DEFAULT_PRINT_DATE_FORMAT}
+                />
+            );
+        }
+
+        if (otherProps.valueType === 'boolean') {
+            return (
+                <BooleanOutput
+                    // eslint-disable-next-line react/jsx-props-no-spreading
+                    {...otherProps}
+                    invalidText={invalidText}
+                />
+            );
+        }
+
+        if (!(otherProps.value instanceof Date)) {
+            return otherProps.value || invalidText;
+        }
+
+        return invalidText;
+    }, [otherProps, invalidText]);
+
+    const spacingClassName = useSpacingToken({
+        spacing,
+        offset: -3,
+        modes: withPadding ? fullSpacings : gapSpacings,
+    });
+
+    const innerPaddingClassName = useSpacingToken({
+        spacing,
+        offset: -3,
+        modes: paddingSpacings,
+    });
+
+    return (
+        <div
+            className={_cs(
+                styles.printableDataDisplay,
+                variant === 'inline' && styles.inlineVariant,
+                variant === 'block' && styles.blockVariant,
+                variant === 'contents' && styles.contentsVariant,
+                withBackground && styles.withBackground,
+                spacingClassName,
+                className,
+            )}
+        >
+            <div
+                className={_cs(
+                    styles.label,
+                    strongLabel && styles.strong,
+                    variant === 'contents' && withPadding && innerPaddingClassName,
+                    !withoutLabelColon && styles.withColon,
+                )}
+            >
+                {label}
+            </div>
+            <div
+                className={_cs(
+                    styles.value,
+                    strongValue && styles.strong,
+                    variant === 'contents' && withPadding && innerPaddingClassName,
+                    otherProps.valueType === 'text' && styles.textType,
+                )}
+            >
+                {valueComponent}
+            </div>
+        </div>
+    );
+}
+
+export default PrintableDataDisplay;

app/src/components/printable/PrintableDataDisplay/styles.module.css

@@ -0,0 +1,44 @@
+.printable-data-display {
+    &.inline-variant {
+        display: flex;
+        flex-direction: row;
+    }
+
+    &.block-variant {
+        display: flex;
+        flex-direction: column;
+    }
+
+    &.contents-variant {
+        display: contents;
+    }
+
+    &.with-background {
+        background-color: var(--go-ui-color-background);
+
+        &.contents-variant {
+            .value,
+            .label {
+                background-color: var(--go-ui-color-background);
+            }
+        }
+    }
+
+    .label {
+        &.with-colon::after {
+            content: ':';
+        }
+    }
+
+    .value {
+        &.text-type {
+            text-align: justify;
+            white-space: pre-wrap;
+        }
+    }
+
+    .strong {
+        color: var(--go-ui-color-black);
+        font-weight: var(--go-ui-font-weight-semibold);
+    }
+}

app/src/components/printable/PrintableDescription/index.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Heading } from '@ifrc-go/ui/printable';
+import { _cs } from '@togglecorp/fujs';
+
+import ifrcLogo from '#assets/icons/ifrc-square.png';
+
+import styles from './styles.module.css';
+
+interface Props {
+    className?: string;
+    children: React.ReactNode;
+    heading: React.ReactNode;
+    description: React.ReactNode;
+}
+
+function PrintablePage(props: Props) {
+    const {
+        className,
+        children,
+        heading,
+        description,
+    } = props;
+
+    return (
+        <main className={_cs(styles.printablePage, className)}>
+            <div className={styles.headerSection}>
+                <img
+                    className={styles.ifrcLogo}
+                    src={ifrcLogo}
+                    alt="IFRC"
+                />
+                <Heading
+                    level={1}
+                    className={styles.heading}
+                >
+                    {heading}
+                </Heading>
+                <div className={styles.description}>
+                    {description}
+                </div>
+            </div>
+            {children}
+        </main>
+    );
+}
+
+export default PrintablePage;