@axa-fr/design-system-apollo-react 1.0.3-ci.116

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,2 @@
1
+ import "@axa-fr/design-system-apollo-css/dist/Button/ButtonApollo.scss";
2
+ export { Button, buttonVariants, type ButtonVariants } from "./ButtonCommon";
@@ -0,0 +1,2 @@
1
+ import "@axa-fr/design-system-apollo-css/dist/Button/ButtonApollo.scss";
2
+ export { Button, buttonVariants } from "./ButtonCommon";
@@ -0,0 +1,19 @@
1
+ import type { ComponentPropsWithoutRef, PropsWithChildren, ReactNode } from "react";
2
+ export declare const buttonVariants: {
3
+ readonly primary: "primary";
4
+ readonly "primary-business": "primary-business";
5
+ readonly "primary-inverse": "primary-inverse";
6
+ readonly secondary: "secondary";
7
+ readonly "secondary-inverse": "secondary-inverse";
8
+ readonly tertiary: "tertiary";
9
+ readonly ghost: "ghost";
10
+ };
11
+ export type ButtonVariants = keyof typeof buttonVariants;
12
+ type ButtonProps = {
13
+ variant?: ButtonVariants;
14
+ iconLeft?: ReactNode;
15
+ iconRight?: ReactNode;
16
+ loading?: boolean;
17
+ } & ComponentPropsWithoutRef<"button">;
18
+ export declare const Button: ({ children, className, variant, iconLeft, iconRight, disabled, loading, ...args }: PropsWithChildren<ButtonProps>) => import("react/jsx-runtime").JSX.Element;
19
+ export {};
@@ -0,0 +1,14 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { Loader } from "../Loader/Loader";
3
+ export const buttonVariants = {
4
+ primary: "primary",
5
+ "primary-business": "primary-business",
6
+ "primary-inverse": "primary-inverse",
7
+ secondary: "secondary",
8
+ "secondary-inverse": "secondary-inverse",
9
+ tertiary: "tertiary",
10
+ ghost: "ghost",
11
+ };
12
+ export const Button = ({ children, className, variant = "primary", iconLeft, iconRight, disabled, loading, ...args }) => (_jsxs("button", { className: ["af-btn-client", `af-btn-client--${variant}`, className]
13
+ .filter(Boolean)
14
+ .join(" "), disabled: disabled || loading, type: "button", ...args, children: [iconLeft, children, iconRight, loading && _jsx(Loader, { size: 24, border: 3, variant: "gray" })] }));
@@ -0,0 +1,2 @@
1
+ import "@axa-fr/design-system-apollo-css/dist/Button/ButtonLF.scss";
2
+ export { Button, buttonVariants, type ButtonVariants } from "./ButtonCommon";
@@ -0,0 +1,2 @@
1
+ import "@axa-fr/design-system-apollo-css/dist/Button/ButtonLF.scss";
2
+ export { Button, buttonVariants } from "./ButtonCommon";
@@ -0,0 +1,12 @@
1
+ import "@axa-fr/design-system-apollo-css/dist/Loader/Loader.scss";
2
+ type LoaderProps = {
3
+ border?: number;
4
+ size?: number;
5
+ variant?: "blue" | "gray" | "white";
6
+ text?: string;
7
+ };
8
+ declare const Loader: {
9
+ ({ border, size, variant, text, }: LoaderProps): import("react/jsx-runtime").JSX.Element;
10
+ displayName: string;
11
+ };
12
+ export { Loader };
@@ -0,0 +1,11 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import "@axa-fr/design-system-apollo-css/dist/Loader/Loader.scss";
3
+ import classNames from "classnames";
4
+ const Loader = ({ border = 5, size = 60, variant = "blue", text = "Chargement en cours", }) => (_jsx("div", { role: "alert", "aria-busy": true, "aria-label": text, "aria-live": "assertive", className: classNames("af-loader__container", `af-loader__container--${variant}`), style: {
5
+ width: `${size}px`,
6
+ height: `${size}px`,
7
+ borderWidth: `${border}px`,
8
+ borderTopWidth: `${border}px`,
9
+ }, children: _jsx("div", { className: "af-loader__container-spin", "aria-hidden": "true" }) }));
10
+ Loader.displayName = "Loader";
11
+ export { Loader };
@@ -0,0 +1,7 @@
1
+ import { type SVGAttributes } from "react";
2
+ type SvgProps = SVGAttributes<SVGSVGElement> & {
3
+ src: string;
4
+ alt?: string;
5
+ };
6
+ export declare const Svg: ({ src, alt, width, height, ...props }: SvgProps) => import("react/jsx-runtime").JSX.Element | null;
7
+ export {};
@@ -0,0 +1,47 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import React from "react";
3
+ import { svgInjector } from "./svgInjector";
4
+ const cloneAttributes = (from, to) => {
5
+ const attributes = from.getAttributeNames();
6
+ attributes.forEach((attribute) => {
7
+ to.setAttribute(attribute, from.getAttribute(attribute));
8
+ });
9
+ };
10
+ export const Svg = ({ src, alt, width = 24, height = 24, ...props }) => {
11
+ const rootRef = React.useRef(null);
12
+ const [hasError, setHasError] = React.useState(false);
13
+ React.useLayoutEffect(() => {
14
+ if (hasError) {
15
+ setHasError(false);
16
+ }
17
+ }, [src]);
18
+ React.useLayoutEffect(() => {
19
+ if (hasError) {
20
+ return;
21
+ }
22
+ const root = rootRef.current;
23
+ if (root) {
24
+ const parent = document.createElement("div");
25
+ const svg = document.createElement("svg");
26
+ parent.appendChild(svg);
27
+ cloneAttributes(root, svg);
28
+ svg.setAttribute("width", width.toString());
29
+ svg.setAttribute("height", height.toString());
30
+ svgInjector(svg, {
31
+ afterEach: (error, svgInject) => {
32
+ if (error) {
33
+ setHasError(true);
34
+ }
35
+ if (svgInject) {
36
+ root.innerHTML = svgInject.innerHTML;
37
+ cloneAttributes(svgInject, root);
38
+ }
39
+ },
40
+ });
41
+ }
42
+ }, [src, width, height, hasError]);
43
+ if (hasError) {
44
+ return alt ? (_jsx("span", { ...props, children: alt })) : null;
45
+ }
46
+ return (_jsx("svg", { ref: rootRef, "data-src": src, width: width, height: height, ...props }));
47
+ };
@@ -0,0 +1,12 @@
1
+ import { type AfterAll, type BeforeEach, type Errback, type EvalScripts } from "@tanem/svg-injector";
2
+ type Options = {
3
+ afterAll?: AfterAll;
4
+ afterEach?: Errback;
5
+ beforeEach?: BeforeEach;
6
+ cacheRequests?: boolean;
7
+ evalScripts?: EvalScripts;
8
+ httpRequestWithCredentials?: boolean;
9
+ renumerateIRIElements?: boolean;
10
+ };
11
+ export declare const svgInjector: (element: HTMLElement | SVGSVGElement | null, { beforeEach, ...options }?: Options) => void;
12
+ export {};
@@ -0,0 +1,31 @@
1
+ import { SVGInjector, } from "@tanem/svg-injector";
2
+ import DOMPurify from "dompurify";
3
+ const attributesToRestore = ["fill", "stroke"];
4
+ const restoreAttributes = (element, svg) => {
5
+ const attributes = {};
6
+ element?.getAttributeNames().forEach((attribute) => {
7
+ if (attribute.startsWith("aria-") ||
8
+ attributesToRestore.includes(attribute)) {
9
+ attributes[attribute] = element.getAttribute(attribute);
10
+ }
11
+ });
12
+ Object.keys(attributes).forEach((attribute) => {
13
+ svg.setAttribute(attribute, attributes[attribute]);
14
+ });
15
+ };
16
+ export const svgInjector = (element, { beforeEach = () => { }, ...options } = {}) => {
17
+ if (!element) {
18
+ return;
19
+ }
20
+ SVGInjector(element, {
21
+ ...options,
22
+ beforeEach: (svg) => {
23
+ DOMPurify.sanitize(svg, {
24
+ USE_PROFILES: { svg: true, svgFilters: true },
25
+ IN_PLACE: true,
26
+ });
27
+ restoreAttributes(element, svg);
28
+ beforeEach(svg);
29
+ },
30
+ });
31
+ };
@@ -0,0 +1,6 @@
1
+ import "@axa-fr/design-system-apollo-css/dist/common/tokens.scss";
2
+ import "@fontsource/source-sans-pro";
3
+ export { Button } from "./Button/ButtonApollo";
4
+ export { buttonVariants, type ButtonVariants } from "./Button/ButtonCommon";
5
+ export { Svg } from "./Svg/Svg";
6
+ export { Loader } from "./Loader/Loader";
package/dist/index.js ADDED
@@ -0,0 +1,6 @@
1
+ import "@axa-fr/design-system-apollo-css/dist/common/tokens.scss";
2
+ import "@fontsource/source-sans-pro";
3
+ export { Button } from "./Button/ButtonApollo";
4
+ export { buttonVariants } from "./Button/ButtonCommon";
5
+ export { Svg } from "./Svg/Svg";
6
+ export { Loader } from "./Loader/Loader";
@@ -0,0 +1,6 @@
1
+ import "@axa-fr/design-system-look-and-feel-css/dist/common/tokens.scss";
2
+ import "@fontsource/source-sans-pro";
3
+ export { Button } from "./Button/ButtonLF";
4
+ export { buttonVariants, type ButtonVariants } from "./Button/ButtonCommon";
5
+ export { Svg } from "./Svg/Svg";
6
+ export { Loader } from "./Loader/Loader";
@@ -0,0 +1,6 @@
1
+ import "@axa-fr/design-system-look-and-feel-css/dist/common/tokens.scss";
2
+ import "@fontsource/source-sans-pro";
3
+ export { Button } from "./Button/ButtonLF";
4
+ export { buttonVariants } from "./Button/ButtonCommon";
5
+ export { Svg } from "./Svg/Svg";
6
+ export { Loader } from "./Loader/Loader";
package/package.json ADDED
@@ -0,0 +1,82 @@
1
+ {
2
+ "name": "@axa-fr/design-system-apollo-react",
3
+ "version": "1.0.3-ci.116",
4
+ "description": "",
5
+ "main": "./dist/index.js",
6
+ "types": "./dist/index.d.ts",
7
+ "exports": {
8
+ ".": {
9
+ "development": {
10
+ "import": "./src/index.ts"
11
+ },
12
+ "default": {
13
+ "import": "./dist/index.js",
14
+ "types": "./dist/index.d.ts"
15
+ }
16
+ },
17
+ "./lf": {
18
+ "development": {
19
+ "import": "./src/indexLF.ts"
20
+ },
21
+ "default": {
22
+ "import": "./dist/indexLF.js",
23
+ "types": "./dist/indexLF.d.ts"
24
+ }
25
+ }
26
+ },
27
+ "files": [
28
+ "dist"
29
+ ],
30
+ "scripts": {
31
+ "prebuild": "rimraf dist",
32
+ "build": "tsc -p tsconfig.build.json",
33
+ "dev": "tsc -p tsconfig.build.json --watch",
34
+ "eslint": "eslint \"src/**/*.{js,jsx,ts,tsx}\"",
35
+ "eslint:fix": "eslint src --ext js,jsx,ts,tsx --fix",
36
+ "prettier": "prettier \"src/**/*.!(js|jsx|ts|tsx|svg)\" --check",
37
+ "prettier:fix": "prettier \"src/**/*.!(js|jsx|ts|tsx|svg)\" --write",
38
+ "check-types": "tsc --noEmit",
39
+ "test": "vitest",
40
+ "test:ui": "vitest --ui",
41
+ "test:ci": "vitest run --coverage"
42
+ },
43
+ "repository": {
44
+ "type": "git",
45
+ "url": "git+https://github.com/AxaFrance/design-system.git"
46
+ },
47
+ "author": {
48
+ "name": "AxaFrance"
49
+ },
50
+ "license": "MIT",
51
+ "bugs": {
52
+ "url": "https://github.com/AxaFrance/design-system/issues"
53
+ },
54
+ "homepage": "https://github.com/AxaFrance/design-system#readme",
55
+ "peerDependencies": {
56
+ "@material-symbols/svg-400": ">= 0.19.0",
57
+ "react": ">= 18",
58
+ "@axa-fr/design-system-apollo-css": "1.0.3-ci.116"
59
+ },
60
+ "peerDependenciesMeta": {
61
+ "@material-symbols/svg-400": {
62
+ "optional": true
63
+ }
64
+ },
65
+ "dependencies": {
66
+ "@axa-fr/design-system-apollo-css": "*",
67
+ "@axa-fr/design-system-look-and-feel-css": "*",
68
+ "@fontsource/source-sans-pro": "^5.0.8",
69
+ "@tanem/svg-injector": "^10.1.68",
70
+ "classnames": "^2.5.1",
71
+ "dompurify": "^3.1.5",
72
+ "rc-slider": "^11.1.7"
73
+ },
74
+ "lint-staged": {
75
+ "*.(js|jsx|ts|tsx)": "eslint --fix",
76
+ "*.(ts|tsx)": "tsc-files --noEmit",
77
+ "*.mdx": "prettier --write"
78
+ },
79
+ "volta": {
80
+ "extends": "../../../package.json"
81
+ }
82
+ }