@axa-fr/design-system-slash-react 0.2.0-beta.323 → 0.2.0-beta.325

package/dist/Form/File/File.d.ts

@@ -0,0 +1,23 @@
+import { DropzoneInputProps, DropzoneOptions, FileRejection } from "react-dropzone";
+type Dropzone = DropzoneInputProps & DropzoneOptions;
+type Props = Omit<Dropzone, "onDrop" | "onChange"> & {
+    classModifier?: string;
+    label?: string;
+    icon?: string;
+    onChange: (data: onChangeProps) => void;
+};
+export type FilePreview = File & {
+    preview: string;
+};
+export type CustomFile<T = FilePreview> = {
+    id: string;
+    file: T;
+};
+type onChangeProps = {
+    id?: string;
+    name?: string;
+    values: CustomFile[];
+    errors?: CustomFile<FileRejection>[];
+};
+declare const File: ({ className, classModifier, id, name, disabled, onChange, multiple, maxSize, minSize, accept, readOnly, placeholder, label, icon, ...otherProps }: Props) => import("react/jsx-runtime").JSX.Element;
+export { File };

package/dist/Form/File/File.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDropzone, } from "react-dropzone";
+import { useId } from "react";
+import { getComponentClassName } from "../../utilities";
+import { Button } from "../../Button/Button";
+const File = ({ className, classModifier, id, name, disabled, onChange, multiple = true, maxSize = 20000000, minSize = 0, accept, readOnly, placeholder = "Glissez/déposez vos fichiers", label = "Parcourir", icon = "open", ...otherProps }) => {
+    const valueId = useId();
+    const errorsId = useId();
+    const handleOnChange = (acceptedFiles, rejectedFiles) => {
+        if (!onChange)
+            return;
+        const values = acceptedFiles.map((file) => ({
+            id: valueId,
+            file: {
+                ...file,
+                lastModified: file.lastModified,
+                name: file.name,
+                type: file.type,
+                size: file.size,
+                stream: file.stream,
+                arrayBuffer: file.arrayBuffer,
+                slice: file.slice,
+                text: file.text,
+                preview: URL.createObjectURL(file),
+            },
+        }));
+        const errors = rejectedFiles.map((error) => ({
+            id: errorsId,
+            file: {
+                errors: error.errors,
+                file: {
+                    ...error.file,
+                    lastModified: error.file.lastModified,
+                    name: error.file.name,
+                    type: error.file.type,
+                    size: error.file.size,
+                },
+            },
+        }));
+        const onChangeProps = {
+            values,
+            errors,
+            name,
+            id,
+        };
+        onChange(onChangeProps);
+    };
+    const { getRootProps, getInputProps, open } = useDropzone({
+        onDrop: handleOnChange,
+        minSize,
+        maxSize,
+        multiple,
+        accept,
+        disabled,
+    });
+    const componentClassName = getComponentClassName(className, classModifier, "af-form__file-input");
+    return (_jsxs("div", { className: componentClassName, children: [_jsxs("div", { ...getRootProps({ className: "drop-box" }), children: [_jsx("input", { ...getInputProps({ id, name, readOnly, ...otherProps }) }), _jsx("div", { children: placeholder })] }), _jsxs(Button, { type: "button", className: "af-btn", classModifier: "file hasIconLeft", onClick: open, disabled: disabled, children: [_jsx("i", { className: `glyphicon glyphicon-${icon}` }), " ", label] })] }));
+};
+export { File };

package/dist/Form/File/FileErrors.d.ts

@@ -0,0 +1,6 @@
+import { FileRejection } from "react-dropzone";
+type Props = {
+    errors?: FileRejection[];
+};
+declare const FileErrors: ({ errors }: Props) => import("react/jsx-runtime").JSX.Element;
+export { FileErrors };

package/dist/Form/File/FileErrors.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const FileErrors = ({ errors }) => (_jsxs("div", { className: "af-form__file-errors", children: [_jsx("span", { children: "Le chargement de certains fichiers a \u00E9chou\u00E9 : " }), _jsx("ul", { className: "af-form__file-errors-list", children: errors &&
+                errors.map((err) => (_jsxs("li", { children: [err.file.name, " (", err.file.size, ")"] }, err.file.name))) })] }));
+export { FileErrors };

package/dist/Form/File/FileInput.d.ts

@@ -0,0 +1,14 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { Field } from "../core";
+import { FileTable } from "./FileTable";
+import { File } from "./File";
+import "@axa-fr/design-system-slash-css/dist/Form/File/File.scss";
+type FieldProps = ComponentPropsWithoutRef<typeof Field>;
+type FileProps = ComponentPropsWithoutRef<typeof File>;
+type FileTableProps = ComponentPropsWithoutRef<typeof FileTable>;
+type Props = FieldProps & FileProps & Pick<FileTableProps, "values" | "errors"> & {
+    fileLabel?: string;
+    helpMessage?: ReactNode;
+};
+declare const FileInput: ({ values, name, onChange, classModifier, message, children, helpMessage, id, forceDisplayMessage, messageType, classNameContainerLabel, classNameContainerInput, label, isVisible, className, errors, fileLabel, disabled, ...otherFileProps }: Props) => import("react/jsx-runtime").JSX.Element;
+export { FileInput };

package/dist/Form/File/FileInput.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { Field, FieldInput, HelpMessage, useInputClassModifier } from "../core";
+import { FileTable } from "./FileTable";
+import { File } from "./File";
+import "@axa-fr/design-system-slash-css/dist/Form/File/File.scss";
+const FileInput = ({ values = [], name = "", onChange, classModifier = "", message, children, helpMessage, id = "", forceDisplayMessage, messageType, classNameContainerLabel, classNameContainerInput, label, isVisible, className, errors, fileLabel, disabled = false, ...otherFileProps }) => {
+    const onDeleteClick = (selectedId, selectInputId) => {
+        const newValues = values.filter((element) => element.id !== selectedId);
+        onChange({
+            values: newValues,
+            name,
+            id: selectInputId,
+        });
+    };
+    const rowModifier = `${classModifier} label-top`;
+    const inputUseId = useId();
+    const inputId = id ?? inputUseId;
+    const { inputClassModifier, inputFieldClassModifier } = useInputClassModifier(classModifier, disabled, Boolean(children));
+    return (_jsxs(Field, { label: label, id: inputId, message: message, messageType: messageType, isVisible: isVisible, forceDisplayMessage: forceDisplayMessage, className: className, classModifier: rowModifier, classNameContainerLabel: classNameContainerLabel, classNameContainerInput: classNameContainerInput, children: [_jsxs(FieldInput, { className: "af-form__file", classModifier: inputFieldClassModifier, children: [_jsx(File, { id: inputId, name: name, onChange: onChange, disabled: disabled, classModifier: inputClassModifier, label: fileLabel, required: classModifier?.includes("required"), ...otherFileProps }), children] }), _jsx(HelpMessage, { message: helpMessage, isVisible: !message }), _jsx(FileTable, { errors: errors, values: values, onClick: (selectedId) => onDeleteClick(selectedId, inputId), classModifier: classModifier })] }));
+};
+export { FileInput };

package/dist/Form/File/FileInput.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { FileInput } from "./FileInput";
+declare const meta: Meta<typeof FileInput>;
+export default meta;
+type Story = StoryObj<typeof FileInput>;
+export declare const FileInputStory: Story;
+export declare const FileStory: Story;
+export declare const FileWithValuesStory: Story;
+export declare const FileWithErrorsStory: Story;

package/dist/Form/File/FileInput.stories.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { HelpMessage, MessageTypes } from "../core";
+import { FileInput } from "./FileInput";
+import { File } from "./File";
+import { FileTable } from "./FileTable";
+const meta = {
+    component: FileInput,
+    title: "Components/Form/Input/File",
+    argTypes: {
+        onChange: { action: "onChange" },
+    },
+};
+export default meta;
+export const FileInputStory = {
+    name: "FileInput",
+    render: ({ onChange, ...args }) => (_jsx(FileInput, { onChange: onChange, ...args })),
+    args: {
+        classModifier: "required",
+        label: "Image",
+        fileLabel: "Browse",
+        name: "placeImage",
+        id: "inputuniqueid",
+        accept: "image/jpeg, image/png, application/*",
+        helpMessage: "Take a photo af a place",
+        messageType: MessageTypes.error,
+        multiple: true,
+        isVisible: true,
+        classNameContainerLabel: "col-md-2",
+        classNameContainerInput: "col-md-10",
+    },
+};
+export const FileStory = {
+    name: "File",
+    render: ({ onChange, ...args }) => _jsx(File, { onChange: onChange, ...args }),
+    args: {
+        label: "Image",
+        name: "placeImage",
+        id: "inputuniqueid",
+        accept: "image/jpeg, image/png, application/*",
+        multiple: true,
+        isVisible: true,
+        icon: "open",
+    },
+};
+const errors = [
+    {
+        file: {
+            name: "refused-extension-file.svg",
+            preview: "",
+            size: 100,
+        },
+    },
+    {
+        file: {
+            name: "too-big-file.jpg",
+            size: 100,
+        },
+        errors: {},
+    },
+    {
+        file: {
+            name: "error-file.jpg",
+            preview: "",
+            size: 100,
+        },
+    },
+];
+const values = [
+    {
+        id: "000003",
+        file: {
+            name: "error-file.jpg",
+            size: 100,
+            preview: "https://via.placeholder.com/150Cx50",
+            type: "image",
+        },
+    },
+    {
+        id: "000004",
+        file: {
+            name: "fichier.png",
+            size: 100,
+            preview: "https://via.placeholder.com/150Cx50",
+            type: "image",
+        },
+    },
+    {
+        id: "000005",
+        file: {
+            name: "fichier.csv",
+            preview: "https://via.placeholder.com/150Cx50",
+            size: 100,
+        },
+    },
+];
+export const FileWithValuesStory = {
+    name: "File with values",
+    render: ({ onChange, ...args }) => (_jsxs(_Fragment, { children: [_jsx(File, { onChange: onChange, ...args }), _jsx(HelpMessage, { message: "Enter the place name, ex : Webcenter" }), _jsx(FileTable, { errors: [], values: values, onClick: () => { }, classModifier: "" })] })),
+};
+export const FileWithErrorsStory = {
+    name: "File with errors",
+    render: ({ onChange, ...args }) => (_jsxs(_Fragment, { children: [_jsx(File, { onChange: onChange, ...args }), _jsx(HelpMessage, { message: "Enter the place name, ex : Webcenter" }), _jsx(FileTable, { errors: errors, values: values, onClick: () => { }, classModifier: "" })] })),
+};

package/dist/Form/File/FileLine.d.ts

@@ -0,0 +1,9 @@
+import { CustomFile } from "./File";
+type Props = CustomFile & {
+    onClick: (id: string) => void;
+    className?: string;
+    classModifier?: string;
+    disabled?: boolean;
+};
+declare const FileLine: ({ className, classModifier, file, disabled, id, onClick, }: Props) => import("react/jsx-runtime").JSX.Element;
+export { FileLine };

package/dist/Form/File/FileLine.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getComponentClassName } from "../../utilities";
+const FileLine = ({ className, classModifier, file, disabled, id, onClick, }) => {
+    const componentClassName = getComponentClassName(className, classModifier, "af-form__file-line");
+    return (_jsxs("li", { className: componentClassName, children: [file && file.type && file.type.startsWith("image") ? (_jsx("i", { className: "glyphicon glyphicon-picture" })) : (_jsx("i", { className: "glyphicon glyphicon-file" })), _jsx("span", { children: file.name }), _jsx("span", { children: file.size }), _jsx("button", { disabled: disabled, type: "button", className: "af-link af-link--delete-file", onClick: () => onClick(id), children: _jsx("span", { className: "af-link__text", children: "Supprimer" }) })] }));
+};
+export { FileLine };

package/dist/Form/File/FileTable.d.ts

@@ -0,0 +1,14 @@
+import { ComponentPropsWithoutRef } from "react";
+import { FileRejection } from "react-dropzone";
+import { FileLine } from "./FileLine";
+import { CustomFile } from "./File";
+type FileLineProps = ComponentPropsWithoutRef<typeof FileLine>;
+type Props = Pick<FileLineProps, "onClick"> & {
+    errors?: FileRejection[];
+    values?: CustomFile[];
+    className?: string;
+    classModifier?: string;
+    disabled?: boolean;
+};
+declare const FileTable: ({ errors, values, className, classModifier, disabled, onClick, }: Props) => import("react/jsx-runtime").JSX.Element;
+export { FileTable };

package/dist/Form/File/FileTable.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FileLine } from "./FileLine";
+import { FileErrors } from "./FileErrors";
+import { getComponentClassName } from "../../utilities";
+const FileTable = ({ errors, values, className, classModifier, disabled, onClick, }) => {
+    const componentClassName = getComponentClassName(className, classModifier, "custom-table-file af-file-table");
+    return (_jsxs("div", { className: componentClassName, children: [errors && errors.length > 0 && _jsx(FileErrors, { errors: errors }), values && values.length > 0 && (_jsx("ul", { className: "af-form__file-list", children: values.map(({ file, id }) => (_jsx(FileLine, { disabled: disabled, file: file, onClick: onClick, id: id }, id))) }))] }));
+};
+export { FileTable };

package/dist/Form/File/__tests__/File.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Form/File/__tests__/File.spec.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from "@testing-library/react";
+import { File } from "../File";
+describe("<File.File>", () => {
+    it("renders File.File correctly", () => {
+        const { asFragment } = render(_jsx(File, { label: "File *", id: "id", name: "file", onChange: () => { }, accept: "image/jpeg, image/png, application/*", multiple: true }));
+        expect(asFragment()).toMatchSnapshot();
+    });
+});

package/dist/Form/File/__tests__/FileInput.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Form/File/__tests__/FileInput.spec.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from "@testing-library/react";
+import { FileInput } from "../FileInput";
+import { MessageTypes } from "../../core";
+describe("<FileInput>", () => {
+    it("renders FileInput correctly", () => {
+        const { asFragment } = render(_jsx(FileInput, { label: "File *", id: "id", name: "file", onChange: () => { }, accept: "image/jpeg, image/png, application/*", messageType: MessageTypes.error, message: null }));
+        expect(asFragment()).toMatchSnapshot();
+    });
+});

package/dist/Form/File/__tests__/FileLine.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Form/File/__tests__/FileLine.spec.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fireEvent, render } from "@testing-library/react";
+import { FileLine } from "../FileLine";
+describe("<File.FileInput>", () => {
+    it("renders File.FileInput correctly", () => {
+        const { asFragment } = render(_jsx(FileLine, { file: {
+                ...new File([], "name"),
+                name: "name",
+                size: 1,
+                preview: "#",
+            }, id: "id", onClick: () => { } }));
+        expect(asFragment()).toMatchSnapshot();
+    });
+    it("Should called onClick function when button have been clicked", () => {
+        const onClickMock = vi.fn();
+        const { getByRole } = render(_jsx(FileLine, { file: {
+                ...new File([], "name"),
+                name: "name",
+                size: 1,
+                preview: "#",
+            }, id: "id", onClick: onClickMock }));
+        fireEvent.click(getByRole("button"));
+        expect(onClickMock).toHaveBeenCalled();
+    });
+});

package/dist/Form/File/__tests__/FileTable.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Form/File/__tests__/FileTable.spec.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from "@testing-library/react";
+import { FileTable } from "../FileTable";
+describe("<File.FileTable>", () => {
+    it("renders File.FileTable correctly", () => {
+        const { asFragment } = render(_jsx(FileTable, { errors: [
+                {
+                    file: {
+                        ...new File([], "youhou.txt"),
+                        name: "youhou.txt",
+                        size: 2,
+                    },
+                    errors: [],
+                },
+            ], values: [
+                {
+                    file: {
+                        ...new File([], "superfile.pdf"),
+                        name: "superfile.pdf",
+                        preview: "",
+                        size: 2,
+                    },
+                    id: "id",
+                },
+            ], onClick: () => { } }));
+        expect(asFragment()).toMatchSnapshot();
+    });
+    it("renders File.FileTable correctly when no have values", () => {
+        const { asFragment, queryByRole } = render(_jsx(FileTable, { errors: [
+                {
+                    file: {
+                        ...new File([], "youhou.txt"),
+                        name: "youhou.txt",
+                        size: 2,
+                    },
+                    errors: [],
+                },
+            ], values: [], onClick: () => { } }));
+        expect(asFragment()).toMatchSnapshot();
+        expect(queryByRole("list")).toHaveClass("af-form__file-errors-list");
+        expect(queryByRole("list")).toBeInTheDocument();
+    });
+    it("renders Errors correctly with empty errors", () => {
+        const { asFragment, queryByRole } = render(_jsx(FileTable, { values: [
+                {
+                    file: {
+                        ...new File([], "youhou.txt"),
+                        name: "youhou.txt",
+                        size: 2,
+                        preview: "",
+                    },
+                    id: "id",
+                },
+            ], onClick: () => { } }));
+        expect(asFragment()).toMatchSnapshot();
+        expect(queryByRole("list")).not.toHaveClass("af-form__file-errors-list");
+    });
+});

package/dist/Form/File/index.d.ts

@@ -0,0 +1,5 @@
+export { FileInput } from "./FileInput";
+export { File } from "./File";
+export { FileTable } from "./FileTable";
+export { FileLine } from "./FileLine";
+export { FileErrors } from "./FileErrors";

package/dist/Form/File/index.js

@@ -0,0 +1,5 @@
+export { FileInput } from "./FileInput";
+export { File } from "./File";
+export { FileTable } from "./FileTable";
+export { FileLine } from "./FileLine";
+export { FileErrors } from "./FileErrors";

package/dist/index.d.ts

@@ -16,6 +16,7 @@ export { Select, SelectBase, SelectInput } from "./Form/Select";
 export { Slider, SliderInput } from "./Form/Slider";
 export { Text, TextInput } from "./Form/Text";
 export { Textarea, TextareaInput } from "./Form/Textarea";
+export { File, FileInput, FileTable } from "./Form/File";
 export { Footer } from "./Layout/Footer";
 export { Header, Infos, Name, NavBar, NavBarBase, NavBarItem, NavBarItemBase, NavBarItemLink, TitleHeader, ToggleButton, User, } from "./Layout/Header";
 export { BooleanModal, Modal, ModalBody, ModalFooter, ModalHeader, ModalHeaderBase, } from "./ModalAgent";

package/dist/index.js

@@ -16,6 +16,7 @@ export { Select, SelectBase, SelectInput } from "./Form/Select";
 export { Slider, SliderInput } from "./Form/Slider";
 export { Text, TextInput } from "./Form/Text";
 export { Textarea, TextareaInput } from "./Form/Textarea";
+export { File, FileInput, FileTable } from "./Form/File";
 export { Footer } from "./Layout/Footer";
 export { Header, Infos, Name, NavBar, NavBarBase, NavBarItem, NavBarItemBase, NavBarItemLink, TitleHeader, ToggleButton, User, } from "./Layout/Header";
 export { BooleanModal, Modal, ModalBody, ModalFooter, ModalHeader, ModalHeaderBase, } from "./ModalAgent";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-slash-react",
-  "version": "0.2.0-beta.323",
+  "version": "0.2.0-beta.325",
   "description": "",
   "exports": {
     ".": {
@@ -41,7 +41,7 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/design-system-slash-css": "0.2.0-beta.323",
+    "@axa-fr/design-system-slash-css": "0.2.0-beta.325",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18"
   },
@@ -56,6 +56,7 @@
     "classnames": "^2.5.1",
     "dompurify": "^3.1.5",
     "rc-slider": "^10.5.0",
+    "react-dropzone": "^11.5.3",
     "react-select": "^5.8.0"
   },
   "devDependencies": {