@axa-fr/design-system-look-and-feel-react 1.0.0-ci.351 → 1.0.3-alpha.144

package/package.json

@@ -1,15 +1,21 @@
 {
   "name": "@axa-fr/design-system-look-and-feel-react",
-  "version": "1.0.0-ci.351",
+  "version": "1.0.3-alpha.144",
   "description": "",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "default": {
+        "import": "./dist/index.js",
+        "types": "./dist/index.d.ts"
+      }
     },
     "./utilities": {
-      "import": "./dist/utilities.js",
-      "types": "./dist/utilities.d.ts"
+      "default": {
+        "import": "./dist/utilities.js",
+        "types": "./dist/utilities.d.ts"
+      }
     }
   },
   "files": [
@@ -19,18 +25,14 @@
     "prebuild": "rimraf dist",
     "build": "tsc -p tsconfig.build.json",
     "postbuild": "copyfiles --up 1 \"src/assets/svg/*.svg\" ./dist/",
-    "start:storybook": "storybook dev -p 6009",
-    "build:storybook": "storybook build",
-    "build-storybook": "storybook build",
     "eslint": "eslint \"src/**/*.{js,jsx,ts,tsx}\"",
     "eslint:fix": "eslint src --ext js,jsx,ts,tsx --fix",
-    "prettier": "prettier \"src/**/*.!(js|jsx|ts|tsx|svg)\" --check",
-    "prettier:fix": "prettier \"src/**/*.!(js|jsx|ts|tsx|svg)\" --write",
-    "tsc": "tsc --noEmit",
+    "prettier": "prettier \"src/**/*.!(js|jsx|ts|tsx|svg)\" --check --ignore-unknow",
+    "prettier:fix": "prettier \"src/**/*.!(js|jsx|ts|tsx|svg)\" --write --ignore-unknow",
+    "check-types": "tsc --noEmit",
     "test": "vitest",
     "test:ui": "vitest --ui",
-    "test:ci": "vitest run --coverage",
-    "chromatic": "npx chromatic"
+    "test:ci": "vitest run --coverage"
   },
   "repository": {
     "type": "git",
@@ -45,7 +47,8 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/design-system-look-and-feel-css": "1.0.0-ci.351",
+    "@axa-fr/design-system-apollo-react": "1.0.3-alpha.144",
+    "@axa-fr/design-system-look-and-feel-css": "1.0.3-alpha.144",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18"
   },
@@ -57,72 +60,36 @@
   "dependencies": {
     "@fontsource/source-sans-pro": "^5.0.8",
     "@tanem/svg-injector": "^10.1.68",
-    "@types/react-dom": "^18.2.24",
     "classnames": "^2.5.1",
-    "dompurify": "^3.1.5",
-    "rc-slider": "^10.5.0",
-    "react-select": "^5.8.0"
+    "dompurify": "^3.1.5"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^1.9.0",
-    "@material-symbols/svg-400": "*",
-    "@storybook/addon-docs": "^8.3.5",
-    "@storybook/addon-essentials": "^8.3.5",
-    "@storybook/addon-interactions": "^8.3.5",
-    "@storybook/addon-links": "^8.3.5",
-    "@storybook/addon-mdx-gfm": "^8.3.5",
-    "@storybook/addon-onboarding": "^8.3.5",
-    "@storybook/blocks": "^8.3.5",
-    "@storybook/manager-api": "^8.3.5",
-    "@storybook/react": "^8.3.5",
-    "@storybook/react-vite": "^8.3.5",
-    "@storybook/test": "^8.3.5",
-    "@storybook/theming": "^8.3.5",
-    "@testing-library/dom": "^10.1.0",
-    "@testing-library/jest-dom": "^6.5.0",
-    "@testing-library/react": "^15.0.7",
-    "@testing-library/user-event": "^14.5.2",
+    "@axa-fr/design-system-look-and-feel-css": "*",
+    "@axa-fr/design-system-apollo-react": "*",
+    "@axa-fr/eslint-config-design-system": "*",
+    "@axa-fr/prettier-config-design-system": "*",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/dompurify": "^3.0.5",
-    "@types/jest": "^29.5.12",
+    "@types/jest": "^29.5.14",
     "@types/jest-axe": "^3.5.9",
-    "@types/node": "^20.14.9",
-    "@types/react": "^18.3.2",
-    "@typescript-eslint/eslint-plugin": "^8.17.0",
-    "@typescript-eslint/parser": "^8.17.0",
-    "@vitejs/plugin-react": "^4.3.1",
-    "@vitest/coverage-v8": "^2.0.5",
-    "@vitest/ui": "^2.1.2",
-    "chromatic": "^11.12.0",
+    "@vitest/coverage-v8": "^3.0.7",
+    "@vitest/ui": "^3.0.7",
     "copyfiles": "^2.4.1",
-    "eslint": "^8.57.0",
-    "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-import-resolver-typescript": "^3.6.1",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.36.1",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.9.0",
-    "jest-axe": "^8.0.0",
+    "jest-axe": "^9.0.0",
     "jsdom": "^25.0.1",
-    "prettier": "^3.3.3",
-    "prop-types": "^15.8.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.2.0",
+    "react": "^19.0.0",
     "rimraf": "^6.0.1",
-    "storybook": "^8.3.5",
-    "tsc-files": "^1.1.4",
-    "typescript": "^5.6.3",
-    "vitest": "^2.0.5"
+    "vitest": "^3.0.7"
   },
   "lint-staged": {
     "*.(js|jsx|ts|tsx)": "eslint --fix",
-    "*.(ts|tsx)": "tsc-files --noEmit",
-    "*.mdx": "prettier --write"
+    "*.(ts|tsx)": "tsc-files --noEmit"
   },
+  "prettier": "@axa-fr/prettier-config-design-system",
   "volta": {
-    "node": "20.10.0",
-    "npm": "10.2.5"
+    "extends": "../../../package.json"
   }
-}
+}

package/dist/Form/Select/CustomOption.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-import { OptionProps } from "react-select";
-declare const CustomOption: React.FC<OptionProps>;
-export { CustomOption };

package/dist/Form/Select/CustomOption.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
-import { components } from "react-select";
-const CustomOption = ({ getValue, ...otherProps }) => {
-    const value = useMemo(() => getValue(), [getValue]);
-    return (_jsx(components.Option, { ...otherProps, getValue: getValue, "data-value": value }));
-};
-export { CustomOption };

package/dist/Form/Select/DropdownIndicator.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-import { DropdownIndicatorProps } from "react-select";
-declare const DropdownIndicator: React.FC<DropdownIndicatorProps>;
-export { DropdownIndicator };

package/dist/Form/Select/DropdownIndicator.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import arrowDropDown from "@material-symbols/svg-400/outlined/arrow_drop_down.svg";
-import arrowDropUp from "@material-symbols/svg-400/outlined/arrow_drop_up.svg";
-import { components } from "react-select";
-import classNames from "classnames";
-import { Svg } from "../../Svg";
-const DropdownIndicator = (props) => {
-    const { selectProps: { menuIsOpen, isDisabled }, } = props;
-    return (_jsx(components.DropdownIndicator, { ...props, children: _jsx(Svg, { src: menuIsOpen ? arrowDropUp : arrowDropDown, className: classNames(isDisabled && "af-form__input-select-container-icon-disabled") }) }));
-};
-export { DropdownIndicator };

package/dist/Loader/Loader.d.ts

@@ -1,11 +0,0 @@
-import "@axa-fr/design-system-look-and-feel-css/dist/Loader/Loader.scss";
-type LoaderProps = {
-    border?: number;
-    size?: number;
-    text?: string;
-};
-declare const Loader: {
-    ({ border, size, text, }: LoaderProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export { Loader };

package/dist/Loader/Loader.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "@axa-fr/design-system-look-and-feel-css/dist/Loader/Loader.scss";
-const Loader = ({ border = 5, size = 60, text = "Chargement en cours", }) => (_jsx("div", { role: "alert", "aria-busy": true, "aria-label": text, "aria-live": "assertive", className: "af-loader__container", style: {
-        width: `${size}px`,
-        height: `${size}px`,
-        border: `${border}px solid #f3f3f3`,
-        borderTop: `${border}px solid #00008f`,
-    }, children: _jsx("div", { className: "af-loader__container-spin", "aria-hidden": "true" }) }));
-Loader.displayName = "Loader";
-export { Loader };

package/dist/Loader/index.d.ts

@@ -1 +0,0 @@
-export { Loader } from "./Loader";

package/dist/Loader/index.js

@@ -1 +0,0 @@
-export { Loader } from "./Loader";

package/dist/ModalClient/Modal.container.d.ts

@@ -1,4 +0,0 @@
-import "@axa-fr/design-system-look-and-feel-css/dist/Modal/Modal.scss";
-import { PropsWithChildren } from "react";
-import { ModalProps } from "./type";
-export declare const ModalContainer: ({ open, setIsOpen, hasCloseButton, onClose, onClickOutside, children, title, subtitle, iconTitle, actions, fullWidthButtons, }: PropsWithChildren<ModalProps>) => import("react").ReactPortal;

package/dist/ModalClient/Modal.container.js

@@ -1,45 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "@axa-fr/design-system-look-and-feel-css/dist/Modal/Modal.scss";
-import { useEffect, useId, useRef } from "react";
-import { createPortal } from "react-dom";
-import { Modal } from "./Modal";
-import { useModal } from "./Modal.hook";
-export const ModalContainer = ({ open, setIsOpen, hasCloseButton = true, onClose, onClickOutside, children, title, subtitle, iconTitle, actions, fullWidthButtons, }) => {
-    const { handleClickOutside, handleKeyDown, handleCloseModal } = useModal({
-        setIsOpen,
-        onClose,
-        onClickOutside,
-    });
-    const modalRef = useRef(null);
-    const idTitle = useId();
-    const idContent = useId();
-    const actionCallback = (callback) => {
-        callback?.();
-        setIsOpen(false);
-    };
-    useEffect(() => {
-        const modalElement = modalRef.current;
-        if (modalElement) {
-            if (open) {
-                document.body.style.overflow = "hidden";
-                modalElement.showModal?.();
-            }
-            else {
-                document.body.style.overflow = "inherit";
-                modalElement.close?.();
-            }
-        }
-        return () => {
-            document.body.style.overflow = "inherit";
-        };
-    }, [open]);
-    useEffect(() => {
-        document.body.addEventListener("keydown", handleKeyDown);
-        document.body.addEventListener("click", handleClickOutside);
-        return () => {
-            document.body.removeEventListener("keydown", handleKeyDown);
-            document.body.removeEventListener("click", handleClickOutside);
-        };
-    }, [handleClickOutside, handleKeyDown]);
-    return createPortal(_jsx(Modal, { modalRef: modalRef, idTitle: idTitle, idContent: idContent, iconTitle: iconTitle, title: title, subtitle: subtitle, hasCloseButton: hasCloseButton, handleCloseModal: handleCloseModal, actionCallback: actionCallback, actions: actions, fullWidthButtons: fullWidthButtons, children: children }), document.body);
-};

package/dist/ModalClient/Modal.d.ts

@@ -1,4 +0,0 @@
-import { PropsWithChildren } from "react";
-import "@axa-fr/design-system-look-and-feel-css/dist/Modal/Modal.scss";
-import { TModalType } from "./type";
-export declare const Modal: ({ modalRef, idTitle, idContent, iconTitle, title, subtitle, hasCloseButton, handleCloseModal, actionCallback, children, actions, fullWidthButtons, }: PropsWithChildren<TModalType>) => import("react/jsx-runtime").JSX.Element;

package/dist/ModalClient/Modal.hook.d.ts

@@ -1,6 +0,0 @@
-import { TModalHook } from "./type";
-export declare const useModal: ({ setIsOpen, onClose, onClickOutside, }: TModalHook) => {
-    handleClickOutside: (event: MouseEvent) => void;
-    handleKeyDown: (event: KeyboardEvent) => void;
-    handleCloseModal: () => void;
-};

package/dist/ModalClient/Modal.hook.js

@@ -1,25 +0,0 @@
-import { useCallback } from "react";
-export const useModal = ({ setIsOpen, onClose, onClickOutside, }) => {
-    const handleCloseModal = useCallback(() => {
-        onClose?.();
-        setIsOpen(false);
-    }, [onClose, setIsOpen]);
-    const handleClickOutside = useCallback((event) => {
-        if (event.target.tagName !== "DIALOG") {
-            return;
-        }
-        if (onClickOutside) {
-            onClickOutside();
-            setIsOpen(false);
-        }
-        else {
-            handleCloseModal();
-        }
-    }, [handleCloseModal, onClickOutside, setIsOpen]);
-    const handleKeyDown = useCallback((event) => {
-        if (event.key === "Escape") {
-            handleCloseModal();
-        }
-    }, [handleCloseModal]);
-    return { handleClickOutside, handleKeyDown, handleCloseModal };
-};

package/dist/ModalClient/Modal.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import close from "@material-symbols/svg-400/outlined/close.svg";
-import { ButtonClient as Button, Variants, Variants as ButtonVariants, } from "../Button/Button";
-import "@axa-fr/design-system-look-and-feel-css/dist/Modal/Modal.scss";
-import { Svg } from "../Svg";
-export const Modal = ({ modalRef, idTitle, idContent, iconTitle, title, subtitle, hasCloseButton, handleCloseModal, actionCallback, children, actions, fullWidthButtons, }) => (_jsxs("dialog", { ref: modalRef, className: "af-modal", "aria-labelledby": idTitle, "aria-describedby": idContent, children: [_jsxs("div", { id: idTitle, className: "af-modal__top", children: [iconTitle, _jsxs("h2", { className: "af-modal__top-title", children: [_jsxs("div", { children: [_jsx("div", { className: "af-modal__top-title-text", children: title }), subtitle && (_jsx("span", { className: "af-modal__top-title-subtitle", children: subtitle }))] }), hasCloseButton && (_jsx(Button, { className: "af-modal__top-title-close-btn", onClick: handleCloseModal, variant: Variants.ghost, type: "button", "aria-label": "close", children: _jsx(Svg, { src: close, width: 32, height: 32 }) }))] })] }), _jsxs("div", { id: idContent, className: "af-modal__content", children: [children, actions && (_jsxs("div", { className: `af-modal__actions${fullWidthButtons ? " af-modal__actions--fullWidth" : ""} `, children: [actions?.primary && (_jsx(Button, { variant: ButtonVariants.primary, onClick: () => actionCallback(actions?.primary?.callback), disabled: actions?.primary.disabled, children: actions?.primary.text })), actions?.secondary && (_jsx(Button, { variant: ButtonVariants.secondary, onClick: () => actionCallback(actions?.secondary?.callback), disabled: actions?.secondary.disabled, children: actions?.secondary.text })), actions?.tertiary && (_jsx(Button, { variant: ButtonVariants.tertiary, onClick: () => actionCallback(actions?.tertiary?.callback), disabled: actions?.tertiary.disabled, children: actions?.tertiary.text }))] }))] })] }));

package/dist/ModalClient/index.d.ts

@@ -1 +0,0 @@
-export { ModalContainer as Modal } from "./Modal.container";

package/dist/ModalClient/index.js

@@ -1 +0,0 @@
-export { ModalContainer as Modal } from "./Modal.container";

package/dist/ModalClient/type.d.ts

@@ -1,38 +0,0 @@
-import { ReactNode, RefObject } from "react";
-export type ButtonAction = {
-    text: string;
-    disabled?: boolean;
-    callback: () => void;
-};
-export type TActionButton = {
-    primary?: ButtonAction;
-    secondary?: ButtonAction;
-    tertiary?: ButtonAction;
-};
-export type TModalHook = {
-    setIsOpen: (value: boolean) => void;
-    onClose?: () => void;
-    onClickOutside?: () => void;
-};
-export type ModalProps = TModalHook & {
-    open: boolean;
-    hasCloseButton?: boolean;
-    title: string;
-    subtitle?: string;
-    iconTitle?: ReactNode;
-    fullWidthButtons?: boolean;
-    actions?: TActionButton;
-};
-export type TModalType = {
-    modalRef: RefObject<HTMLDialogElement>;
-    idTitle: string;
-    idContent: string;
-    iconTitle: ReactNode;
-    title: string;
-    subtitle?: string;
-    hasCloseButton: boolean;
-    handleCloseModal: () => void;
-    actionCallback: (callback?: () => void) => void;
-    actions?: TActionButton;
-    fullWidthButtons?: boolean;
-};

package/dist/ModalClient/type.js

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