@ludo.ninja/components 2.3.6 → 2.3.8

package/build/system/Img/ImageInterceptor/ImageInterceptor.test.d.ts

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

package/build/system/Img/ImageInterceptor/ImageInterceptor.test.js

@@ -0,0 +1,46 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const index_1 = require("./index");
+const constants_1 = require("@ludo.ninja/core/build/constants");
+const react_1 = require("@testing-library/react");
+const styled_components_1 = __importDefault(require("styled-components"));
+jest.mock("react-loading-skeleton", () => function TestSkeleton(props) {
+    return ((0, jsx_runtime_1.jsx)("div", { "data-testid": "skeleton", style: {
+            borderRadius: props.borderRadius,
+        } }));
+});
+const TestImage = styled_components_1.default.img `
+  width: 100px;
+  height: 100px;
+`;
+const validSrc = "/tests/test_1.svg";
+describe("ImageInterceptor Component", () => {
+    test("renders the skeleton while the image is loading", () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.ImageInterceptor, { children: (0, jsx_runtime_1.jsx)(TestImage, { src: validSrc }) }));
+        expect(react_1.screen.getByTestId("skeleton")).toBeInTheDocument();
+    });
+    test("renders the image after it has loaded", () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.ImageInterceptor, { children: (0, jsx_runtime_1.jsx)(TestImage, { src: validSrc }) }));
+        const image = react_1.screen.getByRole("img");
+        react_1.fireEvent.load(image);
+        expect(react_1.screen.queryByTestId("skeleton")).not.toBeInTheDocument();
+        expect(image).toHaveAttribute("src", validSrc);
+    });
+    test("renders the fallback image if an error occurs", () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.ImageInterceptor, { children: (0, jsx_runtime_1.jsx)(TestImage, { src: "invalid-image.jpg" }) }));
+        const image = react_1.screen.getByRole("img");
+        react_1.fireEvent.error(image);
+        expect(react_1.screen.queryByTestId("skeleton")).not.toBeInTheDocument();
+        expect(image).toHaveAttribute("src", `${constants_1.staticLink}/public/noContent/noContent.svg`);
+    });
+    test("applies the correct styles to the skeleton", () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.ImageInterceptor, { borderRadiusSkeleton: 10, children: (0, jsx_runtime_1.jsx)(TestImage, { src: validSrc }) }));
+        expect(react_1.screen.getByTestId("skeleton")).toHaveStyle({
+            borderRadius: "10px",
+        });
+    });
+});

package/build/system/Img/ImageInterceptor/index.d.ts

@@ -0,0 +1,17 @@
+import { DetailedReactHTMLElement, ReactElement } from "react";
+interface IImageInterceptor {
+    fallback?: string;
+    isShowSkeleton?: boolean;
+    children: DetailedReactHTMLElement<{
+        borderRadius?: string | number;
+        width: string | number;
+        height: string | number;
+        onError: () => void;
+        src: string;
+        onLoad: () => void;
+    }, HTMLImageElement> | ReactElement;
+    borderRadiusSkeleton?: string | number | false | undefined;
+    className?: string;
+}
+export declare const ImageInterceptor: ({ children, fallback, isShowSkeleton, borderRadiusSkeleton, className, }: IImageInterceptor) => import("react/jsx-runtime").JSX.Element;
+export {};

package/build/system/Img/ImageInterceptor/index.js

@@ -0,0 +1,61 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageInterceptor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const constants_1 = require("@ludo.ninja/core/build/constants");
+const react_1 = __importStar(require("react"));
+const react_loading_skeleton_1 = __importDefault(require("react-loading-skeleton"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const SImage = styled_components_1.default.div `
+  position: relative;
+
+  & *:not(img) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 10;
+    width: 100%;
+    height: 100%;
+  }
+`;
+const ImageInterceptor = ({ children, fallback = `${constants_1.staticLink}/public/noContent/noContent.svg`, isShowSkeleton = true, borderRadiusSkeleton, className, }) => {
+    const [isLoading, setIsLoading] = (0, react_1.useState)(children.props.src !== fallback);
+    const [isError, setIsError] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsxs)(SImage, { className: className, children: [react_1.default.cloneElement(children, {
+                src: isError ? fallback : children.props.src,
+                onLoad: () => {
+                    setIsLoading(false);
+                },
+                onError: () => {
+                    setIsError(true);
+                    setIsLoading(false);
+                },
+            }), isShowSkeleton && isLoading && ((0, jsx_runtime_1.jsx)(react_loading_skeleton_1.default, { className: "skeleton", width: children.props.width || "100%", height: children.props.height || "100%", borderRadius: borderRadiusSkeleton || children.props.borderRadius || 2 }))] }));
+};
+exports.ImageInterceptor = ImageInterceptor;

package/build/system/Img/Profilepic/index.d.ts

@@ -0,0 +1,10 @@
+import { SpaceProps } from 'styled-system';
+export interface ProfilePicRawProps extends SpaceProps {
+    userPicSrc: string;
+    size: number;
+}
+export type ProfilePicProps = ProfilePicRawProps;
+export declare const ProfilePic: {
+    ({ userPicSrc, size }: ProfilePicProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/build/system/Img/Profilepic/index.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProfilePic = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const image_1 = __importDefault(require("next/image"));
+const check4k_1 = require("../../../utils/adaptive/check4k");
+const screen_1 = require("../../../utils/screen");
+const styled_components_1 = __importDefault(require("styled-components"));
+const ImageInterceptor_1 = require("../ImageInterceptor");
+const StyledProfilePic = (0, styled_components_1.default)(image_1.default) `
+  border-radius: 50%;
+`;
+const getProfilePicProps = (size) => {
+    return {
+        width: size,
+        height: size,
+    };
+};
+const ProfilePic = ({ userPicSrc, size = 40 }) => {
+    const { windowDimensions } = (0, screen_1.useWindowDimensionsWithServerInitial)();
+    const { width, height } = getProfilePicProps(size);
+    return ((0, jsx_runtime_1.jsx)(ImageInterceptor_1.ImageInterceptor, { borderRadiusSkeleton: '50%', children: (0, jsx_runtime_1.jsx)(StyledProfilePic, { src: userPicSrc, width: (0, check4k_1.getAdaptiveValueWithCheck4k)({
+                windowDimensions,
+                currentSize: width,
+            }), height: (0, check4k_1.getAdaptiveValueWithCheck4k)({
+                windowDimensions,
+                currentSize: height,
+            }), priority: true, alt: 'ProfilePic' }) }));
+};
+exports.ProfilePic = ProfilePic;
+exports.ProfilePic.displayName = 'ProfilePic';

package/build/system/Img/Userpic/UserPic.test.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom/extend-expect';
+import 'jest-styled-components';

package/build/system/Img/Userpic/UserPic.test.js

@@ -0,0 +1,68 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("@testing-library/jest-dom/extend-expect");
+const react_1 = require("@testing-library/react");
+require("jest-styled-components");
+const store_1 = require("../../../modules/user/store");
+const index_1 = __importDefault(require("./index"));
+const useFetchUserPic_1 = __importDefault(require("../../../api/server-medias/queries/useFetchUserPic"));
+const env_1 = require("../../../store/env");
+jest.mock('@/modules/user/store');
+jest.mock('@/api/server-medias/queries/useFetchUserPic');
+jest.mock('@/utils/env', () => ({
+    getMediaENVDomain: jest.fn().mockReturnValue('https://media.ludo.ninja'),
+}));
+jest.mock('@/public/defaultUserpics/defaultUserpic.svg', () => 'div');
+jest.mock('@/store/env');
+describe('UserPic Component', () => {
+    beforeEach(() => {
+        store_1.useUserStore.mockReturnValue({
+            isSignedIn: true,
+            isLoadingProfileData: false,
+            profileData: null,
+        });
+        env_1.useEnvStore.mockReturnValue(jest.fn());
+        useFetchUserPic_1.default.mockReturnValue({
+            load: jest.fn(),
+            userPic: 'fetched-user-pic.svg',
+            loading: false,
+            data: {},
+            refetch: jest.fn(),
+            error: undefined,
+        });
+    });
+    test('renders default user picture when no user picture is available', () => {
+        useFetchUserPic_1.default.mockReturnValue({
+            load: jest.fn(),
+            userPic: null,
+            loading: false,
+            data: {},
+            refetch: jest.fn(),
+            error: undefined,
+        });
+        (0, react_1.render)((0, jsx_runtime_1.jsxs)("div", { children: ["test", (0, jsx_runtime_1.jsx)(index_1.default, { userId: "123", width: 100, height: 100, isNeedBoxTransform: false })] }));
+        const defaultUserPic = react_1.screen
+            .getByText('test')
+            .querySelector('.userPicImage');
+        expect(defaultUserPic).toBeInTheDocument();
+    });
+    test('renders loading skeleton when loading', () => {
+        useFetchUserPic_1.default.mockReturnValueOnce({
+            load: jest.fn(),
+            userPic: null,
+            loading: true,
+            data: {},
+            refetch: jest.fn(),
+            error: undefined,
+        });
+        (0, react_1.render)((0, jsx_runtime_1.jsxs)("div", { children: ["test", (0, jsx_runtime_1.jsx)(index_1.default, { userId: "123", width: 100, height: 100, isNeedBoxTransform: false })] }));
+        const skeleton = react_1.screen
+            .getByText('test')
+            .querySelector('.react-loading-skeleton');
+        expect(skeleton).toBeInTheDocument();
+    });
+});

package/build/system/Img/Userpic/UserPicSpa.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+declare const UserPicSpa: ({ userId, width, height, isNeedBoxTransform, children, Image, Link, }: {
+    userId: string;
+    width: number;
+    height: number;
+    isNeedBoxTransform: boolean;
+    children?: React.ReactNode;
+    Image: any;
+    Link: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export default UserPicSpa;

package/build/system/Img/Userpic/UserPicSpa.js

@@ -0,0 +1,81 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const useFetchUserPic_1 = __importDefault(require("../../../api/server-medias/queries/useFetchUserPic"));
+const store_1 = require("../../../modules/user/store");
+const env_1 = require("../../../store/env");
+const ScreenWidth_1 = require("../../../styles/ScreenWidth");
+const boxTransform_1 = __importDefault(require("../../../styles/mixins/boxTransform"));
+const ImageInterceptor_1 = require("../ImageInterceptor");
+const constants_1 = require("@ludo.ninja/core/build/constants");
+const ludoDomains_1 = require("@ludo.ninja/core/build/ludoDomains");
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const react_1 = require("react");
+const react_loading_skeleton_1 = __importDefault(require("react-loading-skeleton"));
+const styled_components_1 = __importDefault(require("styled-components"));
+// Styles
+const StyledHeaderUserPic = styled_components_1.default.div `
+  ${(props) => (props.isNeedBoxTransform ? boxTransform_1.default : null)}
+  .userPicBlock {
+    display: flex;
+  }
+
+  .userPicImage {
+    border-radius: 50%;
+    width: ${(props) => props.imageWidth};
+    height: ${(props) => props.imageHeight};
+
+    ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+      width: ${(props) => (0, _4k_1.adaptiveValueCalc)(Number(props.imageWidth.replace("px", "")))};
+      height: ${(props) => (0, _4k_1.adaptiveValueCalc)(Number(props.imageHeight.replace("px", "")))};
+    }
+  }
+`;
+// Component
+const UserPicSpa = ({ userId, width, height, isNeedBoxTransform, children, Image, Link, }) => {
+    const getMediaENVDomain = (0, env_1.useEnvStore)((state) => state.getMediaDomain);
+    const { isSignedIn, isLoadingProfileData, profileData } = (0, store_1.useUserStore)((state) => ({
+        isSignedIn: state.isSignedIn,
+        isLoadingProfileData: state.isLoadingProfileData,
+        profileData: state.profileData,
+    }));
+    const { load, userPic, loading } = (0, useFetchUserPic_1.default)();
+    const profileUserPic = profileData
+        ?.getUserPic({
+        mediaDomain: getMediaENVDomain(),
+    })
+        .includes("1.svg")
+        ? null
+        : profileData?.getUserPic({
+            mediaDomain: getMediaENVDomain(),
+        });
+    (0, react_1.useEffect)(() => {
+        if (isSignedIn &&
+            !isLoadingProfileData &&
+            profileData
+                ?.getUserPic({
+                mediaDomain: getMediaENVDomain(),
+            })
+                .includes("1.svg")) {
+            load(userId);
+        }
+    }, [userId, isSignedIn, isLoadingProfileData, profileData]);
+    const renderDefaultUserPic = () => {
+        return ((0, jsx_runtime_1.jsx)("img", { src: `${constants_1.staticLink}/public/defaultUserpics/defaultUserpic.svg`, alt: "user_logo", className: "userPicImage" }));
+    };
+    const renderImage = () => {
+        return ((0, jsx_runtime_1.jsx)(ImageInterceptor_1.ImageInterceptor, { borderRadiusSkeleton: "50%", children: (0, jsx_runtime_1.jsx)(Image, { src: (profileUserPic || userPic), className: "userPicImage", width: width, height: height, priority: true, alt: "ludo ninja userPick" }) }));
+    };
+    const renderImageOrDefaultUserPic = () => {
+        return profileUserPic || userPic ? renderImage() : renderDefaultUserPic();
+    };
+    const renderSkeleton = () => {
+        return (0, jsx_runtime_1.jsx)(react_loading_skeleton_1.default, { className: "userPicImage" });
+    };
+    const NEXT_PUBLIC_ENV_VALUE = (0, env_1.useEnvStore)((state) => state.NEXT_PUBLIC_ENV_VALUE);
+    return ((0, jsx_runtime_1.jsx)(StyledHeaderUserPic, { isNeedBoxTransform: isNeedBoxTransform, imageWidth: `${width}px`, imageHeight: `${height}px`, children: (0, jsx_runtime_1.jsxs)(Link, { href: `${ludoDomains_1.ludoDomains[NEXT_PUBLIC_ENV_VALUE]["profile"]}/${userId}/new-opportunities`, className: "userPicBlock", children: [loading || isLoadingProfileData ? renderSkeleton() : renderImageOrDefaultUserPic(), children] }) }));
+};
+exports.default = UserPicSpa;

package/build/system/Img/Userpic/index.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+declare const UserPic: ({ userId, width, height, isNeedBoxTransform, children, }: {
+    userId: string;
+    width: number;
+    height: number;
+    isNeedBoxTransform: boolean;
+    children?: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export default UserPic;

package/build/system/Img/Userpic/index.js

@@ -0,0 +1,86 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const useFetchUserPic_1 = __importDefault(require("../../../api/server-medias/queries/useFetchUserPic"));
+const store_1 = require("../../../modules/user/store");
+const env_1 = require("../../../store/env");
+const ScreenWidth_1 = require("../../../styles/ScreenWidth");
+const boxTransform_1 = __importDefault(require("../../../styles/mixins/boxTransform"));
+const ImageInterceptor_1 = require("../ImageInterceptor");
+const ludoDomains_1 = require("@ludo.ninja/core/build/ludoDomains");
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const image_1 = __importDefault(require("next/image"));
+const link_1 = __importDefault(require("next/link"));
+const react_1 = require("react");
+const react_loading_skeleton_1 = __importDefault(require("react-loading-skeleton"));
+const styled_components_1 = __importDefault(require("styled-components"));
+// Styles
+const StyledHeaderUserPic = styled_components_1.default.div `
+  ${(props) => (props.isNeedBoxTransform ? boxTransform_1.default : null)}
+  .userPicBlock {
+    display: flex;
+  }
+
+  .userPicImage {
+    border-radius: 50%;
+    width: ${(props) => props.imageWidth};
+    height: ${(props) => props.imageHeight};
+
+    ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+      width: ${(props) => (0, _4k_1.adaptiveValueCalc)(Number(props.imageWidth.replace("px", "")))};
+      height: ${(props) => (0, _4k_1.adaptiveValueCalc)(Number(props.imageHeight.replace("px", "")))};
+    }
+  }
+`;
+// Component
+const UserPic = ({ userId, width, height, isNeedBoxTransform, children, }) => {
+    const getMediaENVDomain = (0, env_1.useEnvStore)((state) => state.getMediaDomain);
+    const { isSignedIn, isLoadingProfileData, profileData } = (0, store_1.useUserStore)((state) => ({
+        isSignedIn: state.isSignedIn,
+        isLoadingProfileData: state.isLoadingProfileData,
+        profileData: state.profileData,
+    }));
+    const { load, userPic, loading } = (0, useFetchUserPic_1.default)();
+    const profileUserPic = profileData
+        ?.getUserPic({
+        mediaDomain: getMediaENVDomain(),
+    })
+        .includes("1.svg")
+        ? null
+        : profileData?.getUserPic({
+            mediaDomain: getMediaENVDomain(),
+        });
+    (0, react_1.useEffect)(() => {
+        if (isSignedIn &&
+            !isLoadingProfileData &&
+            profileData
+                ?.getUserPic({
+                mediaDomain: getMediaENVDomain(),
+            })
+                .includes("1.svg")) {
+            load(userId);
+        }
+    }, [userId, isSignedIn, isLoadingProfileData, profileData]);
+    const renderDefaultUserPic = () => {
+        // return <DefaultUserPicIcon className={"userPicImage"} />;
+        return ((0, jsx_runtime_1.jsxs)("svg", { className: "userPicImage", viewBox: "0 0 120 120", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsxs)("g", { clipPath: "url(#clip0_1631_36821)", children: [(0, jsx_runtime_1.jsx)("mask", { id: "mask0_1631_36821", style: { maskType: "alpha" }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "120", height: "120", children: (0, jsx_runtime_1.jsx)("path", { d: "M0 57.5C0 18.5 18.5 0 57.5 0H62.5C101.5 0 120 18.5 120 57.5V62.5C120 101.5 101.5 120 62.5 120H57.5C18.5 120 0 101.5 0 62.5V57.5Z", fill: "#C4C4C4" }) }), (0, jsx_runtime_1.jsxs)("g", { mask: "url(#mask0_1631_36821)", children: [(0, jsx_runtime_1.jsx)("path", { d: "M0 60C0 10.59 10.59 0 60 0C109.41 0 120 10.59 120 60C120 109.41 109.41 120 60 120C10.59 120 0 109.41 0 60Z", fill: "#6048FF" }), (0, jsx_runtime_1.jsx)("g", { filter: "url(#filter0_f_1631_36821)", children: (0, jsx_runtime_1.jsx)("path", { d: "M122.923 22.164L117.289 24.1018C117.289 24.1018 70.1542 14.04 40.7826 25.6887C11.411 37.3374 -13.0768 73.5812 -13.0768 73.5812L-18.7103 75.519L-19.1418 61.7571L-3.51315 25.4694L19.3845 -0.953981L59.6143 -19.4288L101.911 -12.3395L122.923 22.164Z", fill: "#BB6BD9" }) }), (0, jsx_runtime_1.jsx)("g", { filter: "url(#filter1_f_1631_36821)", children: (0, jsx_runtime_1.jsx)("path", { d: "M-24.8609 52.797L-18.6129 53.7922C-18.6129 53.7922 -0.143277 -5.59894 21.8596 38.1435C43.8624 81.8859 103.432 73.9375 103.432 73.9375L133.707 73.2504L129.729 87.0304L102.492 114.722L71.155 128.949L25.0516 126.409L-14.9265 97.6202L-24.8609 52.797Z", fill: "#4FD4F8", fillOpacity: "0.7" }) })] })] }), (0, jsx_runtime_1.jsxs)("defs", { children: [(0, jsx_runtime_1.jsxs)("filter", { id: "filter0_f_1631_36821", x: "-29.1416", y: "-29.4287", width: "162.064", height: "114.948", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB", children: [(0, jsx_runtime_1.jsx)("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }), (0, jsx_runtime_1.jsx)("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), (0, jsx_runtime_1.jsx)("feGaussianBlur", { stdDeviation: "5", result: "effect1_foregroundBlur_1631_36821" })] }), (0, jsx_runtime_1.jsxs)("filter", { id: "filter1_f_1631_36821", x: "-34.8613", y: "12.0684", width: "178.568", height: "126.88", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB", children: [(0, jsx_runtime_1.jsx)("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }), (0, jsx_runtime_1.jsx)("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }), (0, jsx_runtime_1.jsx)("feGaussianBlur", { stdDeviation: "5", result: "effect1_foregroundBlur_1631_36821" })] }), (0, jsx_runtime_1.jsx)("clipPath", { id: "clip0_1631_36821", children: (0, jsx_runtime_1.jsx)("rect", { width: "120", height: "120", rx: "60", fill: "white" }) })] })] }));
+    };
+    const renderImage = () => {
+        return ((0, jsx_runtime_1.jsx)(ImageInterceptor_1.ImageInterceptor, { borderRadiusSkeleton: "50%", children: (0, jsx_runtime_1.jsx)(image_1.default, { src: (profileUserPic || userPic), className: "userPicImage", width: width, height: height, 
+                // priority={true}
+                alt: "ludo ninja userPick" }) }));
+    };
+    const renderImageOrDefaultUserPic = () => {
+        return profileUserPic || userPic ? renderImage() : renderDefaultUserPic();
+    };
+    const renderSkeleton = () => {
+        return (0, jsx_runtime_1.jsx)(react_loading_skeleton_1.default, { className: "userPicImage" });
+    };
+    const NEXT_PUBLIC_ENV_VALUE = (0, env_1.useEnvStore)((state) => state.NEXT_PUBLIC_ENV_VALUE);
+    return ((0, jsx_runtime_1.jsx)(StyledHeaderUserPic, { isNeedBoxTransform: isNeedBoxTransform, imageWidth: `${width}px`, imageHeight: `${height}px`, children: (0, jsx_runtime_1.jsxs)(link_1.default, { href: `${ludoDomains_1.ludoDomains[NEXT_PUBLIC_ENV_VALUE]["profile"]}/${userId}/new-opportunities`, className: "userPicBlock", children: [loading || isLoadingProfileData ? renderSkeleton() : renderImageOrDefaultUserPic(), children] }) }));
+};
+// Export
+exports.default = UserPic;

package/build/system/Img/index.d.ts

@@ -0,0 +1,3 @@
+export * from './ExternalImage';
+export * from './Userpic';
+export * from './Profilepic';

package/build/system/Img/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ExternalImage"), exports);
+__exportStar(require("./Userpic"), exports);
+__exportStar(require("./Profilepic"), exports);

package/build/system/Labels/ExperienceLabel/ExperienceLabel.test.d.ts

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

package/build/system/Labels/ExperienceLabel/ExperienceLabel.test.js

@@ -0,0 +1,52 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
+const index_1 = __importDefault(require("./index"));
+// Mock the Next.js Image component
+jest.mock('next/image', () => {
+    return function Image() {
+        return (0, jsx_runtime_1.jsx)("img", { alt: "Experience logo", width: 20, height: 20 });
+    };
+});
+describe('ExperienceLabel Component', () => {
+    test('renders with value and link', () => {
+        const props = {
+            value: 100,
+            link: '/profile/123',
+            loading: false,
+        };
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { ...props }));
+        const xpText = react_1.screen.getByText('100 XP');
+        expect(xpText).toBeInTheDocument();
+        const imageAltText = react_1.screen.getByAltText('Experience logo');
+        expect(imageAltText).toBeInTheDocument();
+        const linkElement = react_1.screen.getByRole('link', { name: /100 XP/i });
+        expect(linkElement).toHaveAttribute('href', '/profile/123');
+    });
+    test('renders loading skeleton', () => {
+        const props = {
+            value: 0,
+            link: '/profile/123',
+            loading: true,
+        };
+        (0, react_1.render)((0, jsx_runtime_1.jsx)("div", { "data-testid": 'test_container', children: (0, jsx_runtime_1.jsx)(index_1.default, { ...props }) }));
+        const skeletonElement = react_1.screen
+            .getByTestId('test_container')
+            .querySelector('.react-loading-skeleton');
+        expect(skeletonElement).toBeInTheDocument();
+    });
+    test('does not render when value is falsy', () => {
+        const props = {
+            value: 0,
+            link: '/profile/123',
+            loading: false,
+        };
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { ...props }));
+        const xpText = react_1.screen.queryByText('0 XP');
+        expect(xpText).not.toBeInTheDocument();
+    });
+});

package/build/system/Labels/ExperienceLabel/index.d.ts

@@ -0,0 +1,6 @@
+declare const ExperienceLabel: ({ value, link, loading }: {
+    value: number;
+    link?: string;
+    loading?: boolean;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export default ExperienceLabel;

package/build/system/Labels/ExperienceLabel/index.js

@@ -0,0 +1,98 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const vars_1 = require("../../../fonts/vars");
+const ScreenWidth_1 = require("../../../styles/ScreenWidth");
+const boxShadow_1 = __importDefault(require("../../../styles/mixins/boxShadow"));
+const boxTransform_1 = __importDefault(require("../../../styles/mixins/boxTransform"));
+const SkeletonLabel_1 = __importDefault(require("../SkeletonLabel"));
+const constants_1 = require("@ludo.ninja/core/build/constants");
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const image_1 = __importDefault(require("next/image"));
+const link_1 = __importDefault(require("next/link"));
+const styled_components_1 = __importStar(require("styled-components"));
+// Styles
+const ExperienceLabelStyles = () => (0, styled_components_1.css) `
+  ${boxShadow_1.default};
+  display: flex;
+  gap: 8px;
+  user-select: none;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 5px 8px 5px 6px;
+  max-width: max-content;
+  min-width: 116px;
+  min-height: 32px;
+  border-radius: 24px;
+  background: ${({ theme }) => theme.colors?.experienceGradientLabel?.gradient};
+
+  .value {
+    font-family: ${vars_1.poppinsFontVarCss.css};
+    font-size: 1.6em;
+    font-weight: 600;
+    line-height: 1.3;
+    color: ${({ theme }) => theme.colors?.experienceGradientLabel?.color};
+  }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    gap: ${(0, _4k_1.adaptiveValueCalc)(8)};
+    padding: ${(0, _4k_1.adaptiveValueCalc)(5)} ${(0, _4k_1.adaptiveValueCalc)(8)} ${(0, _4k_1.adaptiveValueCalc)(5)} ${(0, _4k_1.adaptiveValueCalc)(6)};
+    min-width: ${(0, _4k_1.adaptiveValueCalc)(116)};
+    min-height: ${(0, _4k_1.adaptiveValueCalc)(32)};
+    border-radius: ${(0, _4k_1.adaptiveValueCalc)(24)};
+
+    img {
+      width: ${(0, _4k_1.adaptiveValueCalc)(20)};
+      height: ${(0, _4k_1.adaptiveValueCalc)(20)};
+    }
+
+    .value {
+      font-size: ${(0, _4k_1.adaptiveValueCalc)(16)};
+    }
+  }
+`;
+const StyledExpLink = (0, styled_components_1.default)(link_1.default) `
+  ${boxTransform_1.default};
+  ${ExperienceLabelStyles};
+`;
+const StyledExpTab = styled_components_1.default.div `
+  ${ExperienceLabelStyles};
+`;
+//Component
+const ExperienceLabel = ({ value = 0, link, loading }) => {
+    if (loading)
+        return (0, jsx_runtime_1.jsx)(SkeletonLabel_1.default, {});
+    if (!value)
+        return null;
+    return link ? ((0, jsx_runtime_1.jsx)(StyledExpLink, { href: link, children: (0, jsx_runtime_1.jsx)(LabelContent, { value: value }) })) : ((0, jsx_runtime_1.jsx)(StyledExpTab, { children: (0, jsx_runtime_1.jsx)(LabelContent, { value: value }) }));
+};
+const LabelContent = ({ value }) => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(image_1.default, { src: `${constants_1.staticLink}/public/rewardsPage/XP_logo.svg`, alt: "Experience logo", width: 20, height: 20 }), (0, jsx_runtime_1.jsxs)("p", { className: `value`, children: [value, " XP"] })] }));
+};
+exports.default = ExperienceLabel;

package/build/system/Labels/InviteLabel/InviteLabel.test.d.ts

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