WIP feat: ✨ Upload component (#136)

* feat: ✨ Upload component

* fixup

* fixup

* Update src/Upload.tsx

Signed-off-by: Joseph Garrone <joseph.garrone.gj@gmail.com>

---------

Signed-off-by: Joseph Garrone <joseph.garrone.gj@gmail.com>
Co-authored-by: Joseph Garrone <joseph.garrone.gj@gmail.com>

Author: sylvainlg

src/Upload.tsx

@@ -0,0 +1,129 @@
+import React, {
+    DetailedHTMLProps,
+    InputHTMLAttributes,
+    ReactNode,
+    forwardRef,
+    memo,
+    useId
+} from "react";
+import { createComponentI18nApi } from "./i18n";
+import { symToStr } from "tsafe/symToStr";
+import { cx } from "./tools/cx";
+import { fr } from "./fr";
+import { Equals, assert } from "tsafe";
+
+export type UploadProps = {
+    className?: string;
+    /** @default false */
+    disabled?: boolean;
+    hint?: string;
+    /** @default false */
+    multiple?: boolean;
+    /** @default "default" */
+    state?: "success" | "error" | "default";
+    /** The message won't be displayed if state is "default" */
+    stateRelatedMessage?: ReactNode;
+    /** Props forwarded to the underlying <input /> element */
+    nativeInputProps?: DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+};
+
+export const Upload = memo(
+    forwardRef<HTMLDivElement, UploadProps>((props, ref) => {
+        const { t } = useTranslation();
+        const {
+            className,
+            disabled = false,
+            hint = t("hint"),
+            multiple = false,
+            state = "default",
+            stateRelatedMessage,
+            nativeInputProps = {}
+        } = props;
+
+        const inputId = (function useClosure() {
+            const id = useId();
+
+            return nativeInputProps.id ?? `input-${id}`;
+        })();
+
+        const messageId = `${inputId}-desc-error`;
+        return (
+            <div
+                className={cx(
+                    fr.cx(
+                        "fr-upload-group",
+                        disabled && "fr-input-group--disabled",
+                        (() => {
+                            switch (state) {
+                                case "error":
+                                    return "fr-input-group--error";
+                                case "success":
+                                    return "fr-input-group--valid";
+                                case "default":
+                                    return undefined;
+                            }
+                            assert<Equals<typeof state, never>>(false);
+                        })()
+                    ),
+                    className
+                )}
+                ref={ref}
+            >
+                <label className={fr.cx("fr-label")} aria-disabled={disabled} htmlFor={inputId}>
+                    {t("add_files")}
+                    <span className={fr.cx("fr-hint-text")}>{hint}</span>
+                </label>
+                <input
+                    aria-describedby={messageId}
+                    aria-disabled={disabled}
+                    className={cx(fr.cx("fr-upload"))}
+                    disabled={disabled}
+                    id={inputId}
+                    multiple={multiple}
+                    name={inputId}
+                    type="file"
+                />
+                {state !== "default" && (
+                    <p
+                        id={messageId}
+                        className={cx(
+                            fr.cx(
+                                (() => {
+                                    switch (state) {
+                                        case "error":
+                                            return "fr-error-text";
+                                        case "success":
+                                            return "fr-valid-text";
+                                    }
+                                    assert<Equals<typeof state, never>>(false);
+                                })()
+                            )
+                        )}
+                    >
+                        {stateRelatedMessage}
+                    </p>
+                )}
+            </div>
+        );
+    })
+);
+
+Upload.displayName = symToStr({ Upload });
+
+const { useTranslation, addUploadTranslations } = createComponentI18nApi({
+    "componentName": symToStr({ Upload }),
+    "frMessages": {
+        /* spell-checker: disable */
+        "add_files": "Ajouter des fichiers",
+        "hint": "Taille maximale : 500 Mo. Formats supportés : jpg, png, pdf. Plusieurs fichiers possibles."
+        /* spell-checker: enable */
+    }
+});
+
+addUploadTranslations({
+    lang: "en",
+    messages: {
+        "add_files": "Add files",
+        "hint": "Maximum size : 500 Mo. Supported formats : jpg, png, pdf. Many files possible."
+    }
+});

stories/Upload.stories.tsx

@@ -0,0 +1,75 @@
+import { Upload, type UploadProps } from "../dist/Upload";
+import { sectionName } from "./sectionName";
+import { getStoryFactory } from "./getStory";
+import { assert } from "tsafe/assert";
+import type { Equals } from "tsafe";
+
+const { meta, getStory } = getStoryFactory({
+    sectionName,
+    "wrappedComponent": { Upload },
+    "description": `
+- [See DSFR documentation](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/ajout-de-fichier)
+- [See source code](https://github.com/codegouvfr/react-dsfr/blob/main/src/Upload.tsx)`,
+    "argTypes": {
+        "disabled": {
+            "control": { "type": "boolean" }
+        },
+        "state": {
+            "options": (() => {
+                const options = ["default", "success", "error"] as const;
+
+                assert<Equals<typeof options[number] | undefined, UploadProps["state"]>>();
+
+                return options;
+            })(),
+            "control": { "type": "radio" }
+        },
+        "stateRelatedMessage": {
+            "description": `This message is only displayed when \`state\` is \`success\` or \`error\`.  
+                If state is \`success\` or \`error\` this message is mandatory.`
+        },
+        "nativeInputProps": {
+            "description": `An object that is forwarded as props to te underlying native \`<input />\` element.  
+                This is where you pass the \`name\` prop or \`onChange\` for example.`,
+            "control": { "type": null }
+        },
+        "multiple": {
+            "description": "Multiple files",
+            "control": { "type": "boolean" }
+        }
+    },
+    "disabledProps": ["lang"]
+});
+
+export default meta;
+
+export const Default = getStory({
+    "hint": "Texte de description",
+    "state": "default",
+    "stateRelatedMessage": "Text de validation / d'explication de l'erreur",
+    "multiple": false
+});
+
+export const Basic = getStory({});
+
+export const WithErrorMessage = getStory({
+    "state": "error",
+    "stateRelatedMessage": "Texte d’erreur obligatoire"
+});
+
+export const WithSuccessMessage = getStory({
+    "state": "success",
+    "stateRelatedMessage": "Texte de validation"
+});
+
+export const Disabled = getStory({
+    "disabled": true
+});
+
+export const WithHint = getStory({
+    "hint": "Texte de description additionnel"
+});
+
+export const Multiple = getStory({
+    "multiple": true
+});