Feat/query mutation

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:20-bookworm AS dev
+FROM node:22-bookworm AS dev
 
 RUN apt-get update -y \
     && apt-get install -y --no-install-recommends \
@@ -51,4 +51,4 @@ COPY --from=nginx-build /code/build /code/build
 # NOTE: Used by apply-config.sh
 ENV APPLY_CONFIG__SOURCE_DIRECTORY=/code/build/
 ENV APPLY_CONFIG__DESTINATION_DIRECTORY=/usr/share/nginx/html/
-ENV APPLY_CONFIG__OVERWRITE_DESTINATION=true
+ENV APPLY_CONFIG__OVERWRITE_DESTINATION=true

app/components/EditDeleteActions/index.tsx

@@ -0,0 +1,58 @@
+import { useCallback } from 'react';
+import {
+    DeleteBinLineIcon,
+    EditTwoLineIcon,
+} from '@ifrc-go/icons';
+import {
+    Button,
+    ConfirmButton,
+    TableActions,
+} from '@ifrc-go/ui';
+
+import useRouting, { RoutesMap } from '#hooks/useRouting';
+
+export interface EditDeleteActionsProps {
+    id: string ;
+    onDelete: (id: string) => void;
+    itemTitle: string;
+    to: keyof RoutesMap ;
+}
+
+function EditDeleteActions(props: EditDeleteActionsProps) {
+    const {
+        id,
+        onDelete,
+        itemTitle,
+        to,
+    } = props;
+
+    const navigate = useRouting();
+
+    const handleEditClick = useCallback(() => {
+        navigate(to, { id });
+    }, [navigate, to, id]);
+
+    return (
+        <TableActions>
+            <Button
+                name={undefined}
+                styleVariant="action"
+                colorVariant="secondary"
+                onClick={handleEditClick}
+            >
+                <EditTwoLineIcon />
+            </Button>
+            <ConfirmButton
+                name={id}
+                styleVariant="action"
+                colorVariant="secondary"
+                onConfirm={onDelete}
+                confirmMessage={`Are you sure you want to delete ${`"${itemTitle}"` || 'this item'}? This action cannot be undone.`}
+            >
+                <DeleteBinLineIcon />
+            </ConfirmButton>
+        </TableActions>
+    );
+}
+
+export default EditDeleteActions;

app/components/EditDeleteActions/styles.module.css

@@ -0,0 +1,4 @@
+.tableAction {
+    display: flex;
+    gap: var(--go-ui-spacing-md);
+}

app/components/FileUpload/index.tsx

@@ -0,0 +1,91 @@
+import {
+    Activity,
+    useCallback,
+} from 'react';
+import {
+    DeleteBinLineIcon,
+    UploadFillIcon,
+} from '@ifrc-go/icons';
+import {
+    IconButton,
+    InputError,
+    ListView,
+    RawFileInput,
+    SingleRawFileInputProps,
+} from '@ifrc-go/ui';
+import {
+    isDefined,
+    isNotDefined,
+} from '@togglecorp/fujs';
+
+interface Props<NAME> {
+    name: NAME;
+    label?: string;
+    value?: File;
+    accept?: string;
+    error?: string;
+    onChange: (value: File | undefined, name: NAME) => void;
+}
+
+function FileUpload<const NAME>(props: Props<NAME>) {
+    const {
+        value,
+        onChange,
+        name,
+        accept,
+        error,
+        label = 'Upload',
+    } = props;
+
+    const handleClearButtonClick = useCallback(() => {
+        onChange(undefined, name);
+    }, [onChange, name]);
+
+    const handleChange = useCallback<SingleRawFileInputProps<NAME>['onChange']>((file) => {
+        if (isNotDefined(file)) {
+            return;
+        }
+        onChange(file, name);
+    }, [onChange, name]);
+
+    return (
+        <>
+            <ListView withWrap spacing="sm" spacingOffset={-2}>
+                <RawFileInput
+                    name={name}
+                    onChange={handleChange}
+                    accept={accept}
+                    allowFullScreen
+                    colorVariant="primary"
+                    styleVariant="outline"
+                    before={<UploadFillIcon />}
+                >
+                    {label}
+                </RawFileInput>
+                <p>
+                    {value?.name ? (
+                        value.name
+                    ) : 'No document selected'}
+                </p>
+                <Activity mode={isDefined(value) ? 'visible' : 'hidden'}>
+                    <IconButton
+                        name={undefined}
+                        onClick={handleClearButtonClick}
+                        title="Clear"
+                        ariaLabel="clear"
+                        spacing="none"
+                    >
+                        <DeleteBinLineIcon />
+                    </IconButton>
+                </Activity>
+            </ListView>
+            <Activity mode={error ? 'visible' : 'hidden'}>
+                <InputError>
+                    {error}
+                </InputError>
+            </Activity>
+        </>
+    );
+}
+
+export default FileUpload;

app/components/MarkdownEditor/index.tsx

@@ -0,0 +1,115 @@
+import '@mdxeditor/editor/style.css';
+
+import {
+    Activity,
+    memo,
+    useEffect,
+    useMemo,
+    useRef,
+} from 'react';
+import {
+    InputError,
+    ListView,
+} from '@ifrc-go/ui';
+import {
+    BlockTypeSelect,
+    BoldItalicUnderlineToggles,
+    CreateLink,
+    headingsPlugin,
+    imagePlugin,
+    InsertImage,
+    linkDialogPlugin,
+    linkPlugin,
+    listsPlugin,
+    ListsToggle,
+    markdownShortcutPlugin,
+    MDXEditor,
+    MDXEditorMethods,
+    quotePlugin,
+    thematicBreakPlugin,
+    toolbarPlugin,
+    UndoRedo,
+} from '@mdxeditor/editor';
+
+import useDebounce from '#hooks/useDebounce';
+
+import styles from './styles.module.css';
+
+interface Props{
+    value?: string;
+    onChange: (
+        value: string | undefined,
+    ) => void;
+    error?: string;
+    placeholder?:string
+}
+
+function ToolbarContents() {
+    return (
+        <>
+            <UndoRedo />
+            <BoldItalicUnderlineToggles />
+            <BlockTypeSelect />
+            <ListsToggle />
+            <CreateLink />
+            <InsertImage />
+        </>
+    );
+}
+
+function MarkdownEditor(props: Props) {
+    const {
+        value = '',
+        onChange,
+        placeholder = 'Start writing here...',
+        error,
+    } = props;
+
+    const ref = useRef<MDXEditorMethods>(null);
+    const prevValueRef = useRef(value);
+
+    const debouncedSearch = useDebounce(onChange, 300);
+
+    useEffect(() => {
+        if (ref.current && !prevValueRef.current) {
+            ref.current.setMarkdown(value);
+            prevValueRef.current = value;
+        }
+    }, [value]);
+
+    const plugins = useMemo(() => [
+        headingsPlugin(),
+        listsPlugin({ enableOrdered: true, enableUnordered: true }),
+        imagePlugin(),
+        linkPlugin(),
+        linkDialogPlugin(),
+        quotePlugin(),
+        thematicBreakPlugin(),
+        markdownShortcutPlugin(),
+        toolbarPlugin({
+            toolbarClassName: 'my-classname',
+            toolbarContents: ToolbarContents,
+        }),
+    ], []);
+
+    return (
+        <ListView layout="block" withCenteredContents withBackground>
+            <div className={styles.editor}>
+                <MDXEditor
+                    markdown={value}
+                    ref={ref}
+                    onChange={debouncedSearch}
+                    placeholder={placeholder}
+                    plugins={plugins}
+                />
+            </div>
+            <Activity mode={error ? 'visible' : 'hidden'}>
+                <InputError>
+                    {error}
+                </InputError>
+            </Activity>
+        </ListView>
+    );
+}
+
+export default memo(MarkdownEditor);

app/components/MarkdownEditor/styles.module.css

@@ -0,0 +1,37 @@
+.editor {
+    z-index: 0;
+    width: 100%;
+    min-height: var(--go-ui-width-min-modal);
+
+    >* {
+        flex: 1;
+    }
+}
+
+.editor p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    margin: var(--go-ui-spacing-md) 0;
+}
+
+.editor ul,
+.editor ol {
+    padding-left: var(--go-ui-spacing-xl);
+}
+
+.editor li {
+    margin: 4px 0;
+}
+
+.editor a {
+    text-decoration: underline;
+    color: var(--go-ui-color-dark-blue-20);
+
+    &:hover {
+        color: var(--go-ui-color-dark-blue-30);
+    }
+}