@axa-fr/design-system-apollo-react 1.0.3-alpha.144

package/dist/Button/ButtonApollo.d.ts

@@ -0,0 +1,2 @@
+import "@axa-fr/design-system-apollo-css/dist/Button/ButtonApollo.scss";
+export { Button, buttonVariants, type ButtonVariants } from "./ButtonCommon";

package/dist/Button/ButtonApollo.js

@@ -0,0 +1,2 @@
+import "@axa-fr/design-system-apollo-css/dist/Button/ButtonApollo.scss";
+export { Button, buttonVariants } from "./ButtonCommon";

package/dist/Button/ButtonCommon.d.ts

@@ -0,0 +1,19 @@
+import type { ComponentPropsWithoutRef, PropsWithChildren, ReactNode } from "react";
+export declare const buttonVariants: {
+    readonly primary: "primary";
+    readonly "primary-business": "primary-business";
+    readonly "primary-inverse": "primary-inverse";
+    readonly secondary: "secondary";
+    readonly "secondary-inverse": "secondary-inverse";
+    readonly tertiary: "tertiary";
+    readonly ghost: "ghost";
+};
+export type ButtonVariants = keyof typeof buttonVariants;
+type ButtonProps = {
+    variant?: ButtonVariants;
+    iconLeft?: ReactNode;
+    iconRight?: ReactNode;
+    loading?: boolean;
+} & ComponentPropsWithoutRef<"button">;
+export declare const Button: ({ children, className, variant, iconLeft, iconRight, disabled, loading, ...args }: PropsWithChildren<ButtonProps>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Button/ButtonCommon.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Spinner } from "../Spinner/SpinnerCommon";
+export const buttonVariants = {
+    primary: "primary",
+    "primary-business": "primary-business",
+    "primary-inverse": "primary-inverse",
+    secondary: "secondary",
+    "secondary-inverse": "secondary-inverse",
+    tertiary: "tertiary",
+    ghost: "ghost",
+};
+export const Button = ({ children, className, variant = "primary", iconLeft, iconRight, disabled, loading, ...args }) => (_jsxs("button", { className: ["af-btn-client", `af-btn-client--${variant}`, className]
+        .filter(Boolean)
+        .join(" "), disabled: disabled || loading, type: "button", ...args, children: [iconLeft, children, iconRight, loading && _jsx(Spinner, { size: 24, variant: "gray" })] }));

package/dist/Button/ButtonLF.d.ts

@@ -0,0 +1,2 @@
+import "@axa-fr/design-system-apollo-css/dist/Button/ButtonLF.scss";
+export { Button, buttonVariants, type ButtonVariants } from "./ButtonCommon";

package/dist/Button/ButtonLF.js

@@ -0,0 +1,2 @@
+import "@axa-fr/design-system-apollo-css/dist/Button/ButtonLF.scss";
+export { Button, buttonVariants } from "./ButtonCommon";

package/dist/Form/ItemMessage/ItemMessageApollo.d.ts

@@ -0,0 +1,2 @@
+import "@axa-fr/design-system-apollo-css/dist/Form/ItemMessage/ItemMessageApollo.scss";
+export { ItemMessage } from "./ItemMessageCommon";

package/dist/Form/ItemMessage/ItemMessageApollo.js

@@ -0,0 +1,2 @@
+import "@axa-fr/design-system-apollo-css/dist/Form/ItemMessage/ItemMessageApollo.scss";
+export { ItemMessage } from "./ItemMessageCommon";

package/dist/Form/ItemMessage/ItemMessageCommon.d.ts

@@ -0,0 +1,7 @@
+type ItemMessageProps = {
+    message: string;
+    id?: string;
+    type?: "error" | "success";
+};
+export declare const ItemMessage: ({ message, id, type, }: ItemMessageProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Form/ItemMessage/ItemMessageCommon.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import errorIcon from "@material-symbols/svg-400/outlined/error-fill.svg";
+import successIcon from "@material-symbols/svg-400/outlined/check_circle-fill.svg";
+import { Svg } from "../../Svg/Svg";
+export const ItemMessage = ({ message, id, type = "error", }) => (_jsxs("div", { className: `af-item-message af-item-message--${type}`, children: [_jsx(Svg, { src: type === "error" ? errorIcon : successIcon, className: "af-item-message__icon" }), _jsx("span", { id: id, "aria-live": "assertive", className: "af-item-message__message", children: message })] }));

package/dist/Form/ItemMessage/ItemMessageLF.d.ts

@@ -0,0 +1,2 @@
+import "@axa-fr/design-system-apollo-css/dist/Form/ItemMessage/ItemMessageLF.scss";
+export { ItemMessage } from "./ItemMessageCommon";

package/dist/Form/ItemMessage/ItemMessageLF.js

@@ -0,0 +1,2 @@
+import "@axa-fr/design-system-apollo-css/dist/Form/ItemMessage/ItemMessageLF.scss";
+export { ItemMessage } from "./ItemMessageCommon";

package/dist/Grid/DebugGrid.d.ts

@@ -0,0 +1,5 @@
+import "@axa-fr/design-system-apollo-css/dist/Grid/DebugGrid.scss";
+export declare const DebugGrid: ({ cols, isCheckedByDefault, }: {
+    cols?: number;
+    isCheckedByDefault?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/Grid/DebugGrid.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import "@axa-fr/design-system-apollo-css/dist/Grid/DebugGrid.scss";
+import { useState } from "react";
+export const DebugGrid = ({ cols = 12, isCheckedByDefault = false, }) => {
+    const [checked, setChecked] = useState(isCheckedByDefault);
+    const handleChecked = () => setChecked(!checked);
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "af-checkbox af-checkbox-select af-checkbox-select--debuggrid", children: _jsxs("label", { htmlFor: "debuggrid", children: [_jsx("input", { type: "checkbox", className: "af-checkbox af-checkbox-select af-checkbox-select--debuggrid", name: "debuggrid", checked: checked, onClick: handleChecked, id: "debuggrid" }), "Grid"] }) }), _jsx("div", { className: "debug-grid", children: _jsx("div", { className: "grid", children: [...Array(cols).keys()].map((col) => (_jsx("div", { className: "cols" }, col))) }) })] }));
+};

package/dist/Spinner/SpinnerApollo.d.ts

@@ -0,0 +1,2 @@
+import "@axa-fr/design-system-apollo-css/dist/Spinner/SpinnerApollo.scss";
+export { Spinner, spinnerVariants, type SpinnerVariants, } from "./SpinnerCommon";

package/dist/Spinner/SpinnerApollo.js

@@ -0,0 +1,2 @@
+import "@axa-fr/design-system-apollo-css/dist/Spinner/SpinnerApollo.scss";
+export { Spinner, spinnerVariants, } from "./SpinnerCommon";

package/dist/Spinner/SpinnerCommon.d.ts

@@ -0,0 +1,16 @@
+export declare const spinnerVariants: {
+    readonly blue: "blue";
+    readonly gray: "gray";
+    readonly white: "white";
+};
+export type SpinnerVariants = keyof typeof spinnerVariants;
+type SpinnerProps = {
+    size?: 24 | 32 | 40;
+    variant?: SpinnerVariants;
+    text?: string;
+};
+declare const Spinner: {
+    ({ size, variant, text, }: SpinnerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Spinner };

package/dist/Spinner/SpinnerCommon.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const spinnerVariants = {
+    blue: "blue",
+    gray: "gray",
+    white: "white",
+};
+const DEFAULT_CLASSNAME = "af-spinner";
+const Spinner = ({ size = 40, variant = "blue", text = "Chargement en cours", }) => (_jsx("div", { role: "alert", "aria-busy": true, "aria-label": text, "aria-live": "assertive", className: [
+        DEFAULT_CLASSNAME,
+        `${DEFAULT_CLASSNAME}--${variant}`,
+        `${DEFAULT_CLASSNAME}--${size}`,
+    ]
+        .filter(Boolean)
+        .join(" "), style: {
+        "--spinner-size": size,
+    } }));
+Spinner.displayName = "Spinner";
+export { Spinner };

package/dist/Spinner/SpinnerLF.d.ts

@@ -0,0 +1,2 @@
+import "@axa-fr/design-system-apollo-css/dist/Spinner/SpinnerLF.scss";
+export { Spinner, spinnerVariants, type SpinnerVariants, } from "./SpinnerCommon";

package/dist/Spinner/SpinnerLF.js

@@ -0,0 +1,2 @@
+import "@axa-fr/design-system-apollo-css/dist/Spinner/SpinnerLF.scss";
+export { Spinner, spinnerVariants, } from "./SpinnerCommon";

package/dist/Svg/Svg.d.ts

@@ -0,0 +1,7 @@
+import { type SVGAttributes } from "react";
+type SvgProps = SVGAttributes<SVGSVGElement> & {
+    src: string;
+    alt?: string;
+};
+export declare const Svg: ({ src, alt, width, height, ...props }: SvgProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/Svg/Svg.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { svgInjector } from "./svgInjector";
+const cloneAttributes = (from, to) => {
+    const attributes = from.getAttributeNames();
+    attributes.forEach((attribute) => {
+        to.setAttribute(attribute, from.getAttribute(attribute));
+    });
+};
+export const Svg = ({ src, alt, width = 24, height = 24, ...props }) => {
+    const rootRef = React.useRef(null);
+    const [hasError, setHasError] = React.useState(false);
+    React.useLayoutEffect(() => {
+        if (hasError) {
+            setHasError(false);
+        }
+    }, [src]);
+    React.useLayoutEffect(() => {
+        if (hasError) {
+            return;
+        }
+        const root = rootRef.current;
+        if (root) {
+            const parent = document.createElement("div");
+            const svg = document.createElement("svg");
+            parent.appendChild(svg);
+            cloneAttributes(root, svg);
+            svg.setAttribute("width", width.toString());
+            svg.setAttribute("height", height.toString());
+            svgInjector(svg, {
+                afterEach: (error, svgInject) => {
+                    if (error) {
+                        setHasError(true);
+                    }
+                    if (svgInject) {
+                        root.innerHTML = svgInject.innerHTML;
+                        cloneAttributes(svgInject, root);
+                    }
+                },
+            });
+        }
+    }, [src, width, height, hasError]);
+    if (hasError) {
+        return alt ? (_jsx("span", { ...props, children: alt })) : null;
+    }
+    return (_jsx("svg", { ref: rootRef, "data-src": src, width: width, height: height, ...props }));
+};

package/dist/Svg/svgInjector.d.ts

@@ -0,0 +1,12 @@
+import { type AfterAll, type BeforeEach, type Errback, type EvalScripts } from "@tanem/svg-injector";
+type Options = {
+    afterAll?: AfterAll;
+    afterEach?: Errback;
+    beforeEach?: BeforeEach;
+    cacheRequests?: boolean;
+    evalScripts?: EvalScripts;
+    httpRequestWithCredentials?: boolean;
+    renumerateIRIElements?: boolean;
+};
+export declare const svgInjector: (element: HTMLElement | SVGSVGElement | null, { beforeEach, ...options }?: Options) => void;
+export {};

package/dist/Svg/svgInjector.js

@@ -0,0 +1,31 @@
+import { SVGInjector, } from "@tanem/svg-injector";
+import DOMPurify from "dompurify";
+const attributesToRestore = ["fill", "stroke"];
+const restoreAttributes = (element, svg) => {
+    const attributes = {};
+    element?.getAttributeNames().forEach((attribute) => {
+        if (attribute.startsWith("aria-") ||
+            attributesToRestore.includes(attribute)) {
+            attributes[attribute] = element.getAttribute(attribute);
+        }
+    });
+    Object.keys(attributes).forEach((attribute) => {
+        svg.setAttribute(attribute, attributes[attribute]);
+    });
+};
+export const svgInjector = (element, { beforeEach = () => { }, ...options } = {}) => {
+    if (!element) {
+        return;
+    }
+    SVGInjector(element, {
+        ...options,
+        beforeEach: (svg) => {
+            DOMPurify.sanitize(svg, {
+                USE_PROFILES: { svg: true, svgFilters: true },
+                IN_PLACE: true,
+            });
+            restoreAttributes(element, svg);
+            beforeEach(svg);
+        },
+    });
+};

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+import "@axa-fr/design-system-apollo-css/dist/common/tokens.scss";
+import "@axa-fr/design-system-apollo-css/dist/Grid/Grid.scss";
+import "@fontsource/source-sans-pro";
+export { Button, buttonVariants, type ButtonVariants, } from "./Button/ButtonApollo";
+export { Svg } from "./Svg/Svg";
+export { Spinner, spinnerVariants, type SpinnerVariants, } from "./Spinner/SpinnerApollo";
+export { DebugGrid } from "./Grid/DebugGrid";
+export { ItemMessage } from "./Form/ItemMessage/ItemMessageApollo";

package/dist/index.js

@@ -0,0 +1,8 @@
+import "@axa-fr/design-system-apollo-css/dist/common/tokens.scss";
+import "@axa-fr/design-system-apollo-css/dist/Grid/Grid.scss";
+import "@fontsource/source-sans-pro";
+export { Button, buttonVariants, } from "./Button/ButtonApollo";
+export { Svg } from "./Svg/Svg";
+export { Spinner, spinnerVariants, } from "./Spinner/SpinnerApollo";
+export { DebugGrid } from "./Grid/DebugGrid";
+export { ItemMessage } from "./Form/ItemMessage/ItemMessageApollo";

package/dist/indexLF.d.ts

@@ -0,0 +1,8 @@
+import "@axa-fr/design-system-look-and-feel-css/dist/common/tokens.scss";
+import "@axa-fr/design-system-apollo-css/dist/Grid/Grid.scss";
+import "@fontsource/source-sans-pro";
+export { Button, buttonVariants, type ButtonVariants } from "./Button/ButtonLF";
+export { Svg } from "./Svg/Svg";
+export { Spinner, spinnerVariants, type SpinnerVariants, } from "./Spinner/SpinnerLF";
+export { DebugGrid } from "./Grid/DebugGrid";
+export { ItemMessage } from "./Form/ItemMessage/ItemMessageLF";

package/dist/indexLF.js

@@ -0,0 +1,8 @@
+import "@axa-fr/design-system-look-and-feel-css/dist/common/tokens.scss";
+import "@axa-fr/design-system-apollo-css/dist/Grid/Grid.scss";
+import "@fontsource/source-sans-pro";
+export { Button, buttonVariants } from "./Button/ButtonLF";
+export { Svg } from "./Svg/Svg";
+export { Spinner, spinnerVariants, } from "./Spinner/SpinnerLF";
+export { DebugGrid } from "./Grid/DebugGrid";
+export { ItemMessage } from "./Form/ItemMessage/ItemMessageLF";

package/package.json

@@ -0,0 +1,94 @@
+{
+  "name": "@axa-fr/design-system-apollo-react",
+  "version": "1.0.3-alpha.144",
+  "description": "",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "default": {
+        "import": "./dist/index.js",
+        "types": "./dist/index.d.ts"
+      }
+    },
+    "./lf": {
+      "default": {
+        "import": "./dist/indexLF.js",
+        "types": "./dist/indexLF.d.ts"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "prebuild": "rimraf dist",
+    "build": "tsc -p tsconfig.build.json",
+    "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 --ignore-unknown",
+    "prettier:fix": "prettier \"src/**/*.!(js|jsx|ts|tsx|svg)\" --write --ignore-unknown",
+    "check-types": "tsc --noEmit",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:ci": "vitest run --coverage"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/AxaFrance/design-system.git"
+  },
+  "author": {
+    "name": "AxaFrance"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/AxaFrance/design-system/issues"
+  },
+  "homepage": "https://github.com/AxaFrance/design-system#readme",
+  "peerDependencies": {
+    "@axa-fr/design-system-apollo-css": "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"
+  },
+  "peerDependenciesMeta": {
+    "@material-symbols/svg-400": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@fontsource/source-sans-pro": "^5.0.8",
+    "@tanem/svg-injector": "^10.1.68",
+    "classnames": "^2.5.1",
+    "dompurify": "^3.1.5"
+  },
+  "devDependencies": {
+    "@axa-fr/design-system-apollo-css": "*",
+    "@axa-fr/design-system-look-and-feel-css": "*",
+    "@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.14",
+    "@types/jest-axe": "^3.5.9",
+    "@vitest/coverage-v8": "^3.0.7",
+    "@vitest/ui": "^3.0.7",
+    "copyfiles": "^2.4.1",
+    "jest-axe": "^9.0.0",
+    "jsdom": "^25.0.1",
+    "react": "^19.0.0",
+    "rimraf": "^6.0.1",
+    "vitest": "^3.0.7"
+  },
+  "lint-staged": {
+    "*.(js|jsx|ts|tsx)": "eslint --fix",
+    "*.(ts|tsx)": "tsc-files --noEmit"
+  },
+  "prettier": "@axa-fr/prettier-config-design-system",
+  "volta": {
+    "extends": "../../../package.json"
+  }
+}