Feat: Add report table ,edit table and create report

.github/workflows/ci.yml

@@ -7,15 +7,14 @@ on:
       - 'develop'
 
 env:
-  APP_TITLE: ${{ vars.APP_TITLE }}
-  APP_GRAPHQL_CODEGEN_ENDPOINT: ${{ vars.APP_GRAPHQL_CODEGEN_ENDPOINT }}
-  APP_GRAPHQL_ENDPOINT: ${{ vars.APP_GRAPHQL_ENDPOINT }}
+  APP_TITLE: CAPN CMS
+  APP_GRAPHQL_CODEGEN_ENDPOINT: ./backend/schema.graphql
+  APP_GRAPHQL_ENDPOINT: http://localhost:8000/graphql/
   GITHUB_WORKFLOW: true
 
 jobs:
   test:
     name: Run tests
-    environment: 'test'
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
@@ -36,7 +35,6 @@ jobs:
         run: pnpm test
   unused:
     name: Find unused things
-    environment: 'test'
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
@@ -59,7 +57,6 @@ jobs:
         run: pnpm lint:unused
   lint-js:
     name: Lint JS
-    environment: 'test'
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
@@ -82,7 +79,6 @@ jobs:
         run: pnpm lint:js
   css-lint:
     name: Lint CSS
-    environment: 'test'
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
@@ -103,7 +99,6 @@ jobs:
         run: pnpm lint:css
   typecheck:
     name: Typecheck
-    environment: 'test'
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
@@ -126,7 +121,6 @@ jobs:
         run: pnpm typecheck
   build:
     name: Build
-    environment: 'test'
     needs: [lint-js, css-lint, typecheck]
     runs-on: ubuntu-latest
     steps:

src/App/routes/index.tsx

@@ -162,7 +162,6 @@ const events = customWrapRoute({
         visibility: 'is-authenticated',
     },
 });
-
 /*
 const userManagement = customWrapRoute({
     parent: homeLayout,
@@ -301,6 +300,7 @@ const wrappedRoutes = {
     reports,
     podcast,
     youtubeVideos,
+
     // userActivation,
     // editProfile,
     // forgotPassword,

src/components/Chip/index.tsx

@@ -18,6 +18,7 @@ const chipVariantToClassNameMap: Record<ChipVariant, string> = {
     variant?: ChipVariant;
 }
 
+/** @knipignore */
 function Chip(props: Props) {
     const {
         className,

src/components/FileInput/index.tsx

@@ -0,0 +1,209 @@
+import {
+    useCallback,
+    useEffect,
+    useState,
+} from 'react';
+import { IoTrash } from 'react-icons/io5';
+import { _cs } from '@togglecorp/fujs';
+import {
+    Button,
+    InputContainer,
+    type InputContainerProps,
+    useButtonFeatures,
+} from '@togglecorp/toggle-ui';
+
+import RawFileInput, { RawFileInputProps } from '#components/RawFileInput';
+import useDropHandler from '#hooks/useDropHandler';
+import isValidFile, { ErrorType } from '#utils/common';
+
+import styles from './styles.module.css';
+
+type NameType = string | number | undefined;
+
+type InheritedProps<T extends NameType> = (
+    Omit<InputContainerProps, 'input'> &
+    Omit<RawFileInputProps<T>, 'onChange' | 'value' | 'id'>
+);
+
+/** @knipignore */
+// eslint-disable-next-line import/prefer-default-export
+export type Props<T extends NameType> = InheritedProps<T> & {
+    inputElementRef?: React.RefObject<HTMLInputElement>;
+    inputClassName?: string;
+    labelClassName?: string;
+    value: File | undefined | null;
+    onChange: (file: File | null, name: T) => void;
+    status?: string;
+    showFileName?: boolean;
+    placeholder?: string;
+    maxFileSize?: number;
+};
+
+function FileInput<T extends NameType>(props: Props<T>) {
+    const {
+        className,
+        disabled,
+        error,
+        errorContainerClassName,
+        inputSectionClassName,
+        inputContainerClassName,
+        label,
+        readOnly,
+        inputElementRef,
+        containerRef,
+        inputSectionRef,
+        inputClassName,
+        value,
+        onChange,
+        name: nameFromProps,
+        accept,
+        labelClassName,
+        children,
+        showFileName = true,
+        maxFileSize = 10,
+        ...fileInputProps
+    } = props;
+
+    const [internalError, setInternalError] = useState<string>();
+    const [fileName, setFileName] = useState<string | undefined>(value?.name);
+
+    useEffect(() => {
+        setFileName(value?.name);
+    }, [value]);
+
+    const handleFileChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+        const file = e.target.files?.[0] ?? null;
+
+        if (file) {
+            const validity = isValidFile(file, maxFileSize, accept);
+            if (!validity.isValid) {
+                if (validity.errorType === ErrorType.invalidFileType) {
+                    setInternalError('Invalid file type.');
+                } else {
+                    setInternalError(`File exceeds size limit of ${maxFileSize} MB.`);
+                }
+                onChange(null, nameFromProps);
+                return;
+            }
+        }
+        setInternalError(undefined);
+        setFileName(file?.name);
+        onChange(file, nameFromProps);
+    }, [accept, maxFileSize, nameFromProps, onChange]);
+
+    const handleDrop: React.DragEventHandler<HTMLDivElement> = useCallback((e) => {
+        e.preventDefault();
+        const file = e.dataTransfer.files?.[0] ?? null;
+
+        if (file) {
+            const validity = isValidFile(file, maxFileSize, accept);
+            if (!validity.isValid) {
+                if (validity.errorType === ErrorType.invalidFileType) {
+                    setInternalError('Invalid file type.');
+                } else {
+                    setInternalError(`File exceeds size limit of ${maxFileSize} MB.`);
+                }
+                onChange(null, nameFromProps);
+                return;
+            }
+        }
+
+        setInternalError(undefined);
+        setFileName(file?.name);
+        onChange(file, nameFromProps);
+        e.dataTransfer.clearData();
+    }, [accept, maxFileSize, nameFromProps, onChange]);
+
+    const {
+        dropping,
+        onDragOver,
+        onDragEnter,
+        onDragLeave,
+        onDrop,
+    } = useDropHandler(handleDrop);
+
+    const inputId = `file-input-${String(nameFromProps)}`;
+
+    const {
+        className: buttonLabelClassName,
+        children: buttonLabelChildren,
+    } = useButtonFeatures({
+        className: labelClassName,
+        disabled,
+        variant: 'primary',
+        children: (
+            <>
+                {children}
+                <RawFileInput
+                    id={inputId}
+                    className={styles.input}
+                    inputRef={inputElementRef}
+                    readOnly={readOnly}
+                    disabled={disabled}
+                    name={nameFromProps}
+                    accept={accept}
+                    onChange={handleFileChange}
+                    // eslint-disable-next-line react/jsx-props-no-spreading
+                    {...fileInputProps}
+                />
+            </>
+        ),
+    });
+
+    return (
+        <InputContainer
+            className={_cs(styles.inputContainer, className)}
+            containerRef={containerRef}
+            inputContainerClassName={_cs(inputContainerClassName)}
+            inputSectionClassName={_cs(styles.inputSection, inputSectionClassName)}
+            errorContainerClassName={errorContainerClassName}
+            inputSectionRef={inputSectionRef}
+            disabled={disabled}
+            error={error ?? internalError}
+            label={label}
+            readOnly={readOnly}
+            actions={(
+                <Button
+                    name="clear"
+                    type="button"
+                    className={styles.clearButton}
+                    onClick={() => {
+                        setInternalError(undefined);
+                        setFileName(undefined);
+                        onChange(null, nameFromProps);
+                    }}
+                    disabled={disabled}
+                    transparent
+                >
+                    <IoTrash />
+                </Button>
+            )}
+            input={(
+                <div
+                    className={_cs(
+                        inputClassName,
+                        styles.inputChildren,
+                        dropping && styles.draggedOver,
+                    )}
+                    onDrop={onDrop}
+                    onDragOver={onDragOver}
+                    onDragEnter={onDragEnter}
+                    onDragLeave={onDragLeave}
+                >
+                    <div className={styles.browseButton}>
+                        <label className={buttonLabelClassName} htmlFor={inputId}>
+                            {buttonLabelChildren}
+                        </label>
+                    </div>
+                    {showFileName && fileName && (
+                        <div className={styles.fileName}>
+                            {fileName}
+                        </div>
+                    )}
+                </div>
+            )}
+        />
+    );
+}
+
+export default FileInput;

src/components/FileInput/styles.module.css

@@ -0,0 +1,15 @@
+.input-container {
+    .input-section {
+        background-color: var(--cms-ui-color-gray-20);
+
+        .input-children {
+            display: flex;
+            align-items: start;
+            gap: var(--cms-ui-spacing-lg);
+        }
+
+        .input {
+            visibility: hidden;
+        }
+    }
+}

src/components/RawFileInput/index.tsx

@@ -0,0 +1,52 @@
+import { _cs } from '@togglecorp/fujs';
+
+import styles from './styles.module.css';
+
+export type RawFileInputProps<NAME extends number | string | undefined> = {
+    id: string;
+    accept?: string;
+    disabled?: boolean;
+    inputProps?: React.ComponentPropsWithoutRef<'input'>;
+    inputRef?: React.RefObject<HTMLInputElement>;
+    name: NAME;
+    readOnly?: boolean;
+    className?: string;
+    children?: React.ReactNode;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+};
+
+function RawFileInput<NAME extends number | string | undefined>(props: RawFileInputProps<NAME>) {
+    const {
+        id,
+        accept,
+        disabled,
+        inputProps,
+        inputRef,
+        name,
+        onChange,
+        readOnly,
+        className,
+        children,
+    } = props;
+
+    return (
+        <label htmlFor={id} className={_cs(styles.fileInput, className)}>
+            {children}
+            <input
+                id={id}
+                className={styles.input}
+                type="file"
+                accept={accept}
+                onChange={onChange}
+                name={name !== undefined ? String(name) : undefined}
+                ref={inputRef}
+                disabled={disabled}
+                readOnly={readOnly}
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...inputProps}
+            />
+        </label>
+    );
+}
+
+export default RawFileInput;

src/components/RawFileInput/styles.module.css

@@ -0,0 +1,7 @@
+.file-input {
+    .input {
+        visibility: hidden;
+        width: 0;
+        height: 0;
+    }
+}