@ludo.ninja/components 2.0.0 → 2.0.2

package/build/system/Forms/TextArea/TextArea.test.js

@@ -0,0 +1,54 @@
+"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");
+const react_1 = require("@testing-library/react");
+const colors_1 = require("@/styles/colors");
+const index_1 = __importDefault(require("@/system/Forms/TextArea/index"));
+jest.mock('../ErrorLabel', () => ({
+    __esModule: true,
+    default: ({ children }) => ((0, jsx_runtime_1.jsx)("div", { "data-testid": "error-label", children: children })),
+}));
+const mockRegister = {
+    name: 'test-textarea',
+    onBlur: jest.fn(),
+    onChange: jest.fn(),
+    ref: jest.fn(),
+};
+const mockData = {
+    name: 'test-textarea',
+    placeHolder: 'Enter text...',
+    labelText: 'Test TextArea',
+};
+const renderComponent = (error) => {
+    return (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { data: mockData, register: mockRegister, error: error, isNeedBiggerArea: false }));
+};
+describe('TextArea Component', () => {
+    test('renders text area element with correct attributes', () => {
+        renderComponent({ isNeedShowError: false, message: undefined });
+        const textareaElement = react_1.screen.getByPlaceholderText('Enter text...');
+        expect(textareaElement).toBeInTheDocument();
+        expect(textareaElement.name).toBe('test-textarea');
+        expect(textareaElement.id).toBe('test-textarea');
+    });
+    test('applies error styles when there is an error', () => {
+        renderComponent({ isNeedShowError: true, message: 'Error message' });
+        const textareaElement = react_1.screen.getByPlaceholderText('Enter text...');
+        expect(textareaElement).toHaveStyle(`border-color: ${colors_1.ProgressColorMinimum}`);
+        expect(react_1.screen.getByTestId('error-label')).toHaveTextContent('Error message');
+    });
+    test('does not render error label when there is no error', () => {
+        renderComponent({ isNeedShowError: false, message: undefined });
+        const errorLabel = react_1.screen.queryByTestId('error-label');
+        expect(errorLabel).toBeNull();
+    });
+    test('renders error label when there is an error', () => {
+        renderComponent({ isNeedShowError: true, message: 'Error message' });
+        const errorLabel = react_1.screen.getByTestId('error-label');
+        expect(errorLabel).toBeInTheDocument();
+        expect(errorLabel).toHaveTextContent('Error message');
+    });
+});

package/build/system/Forms/TextArea/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { UseFormRegisterReturn } from 'react-hook-form';
+import { inputType } from '../Input/type';
+interface Props {
+    data: inputType;
+    register: UseFormRegisterReturn;
+    isNeedBiggerArea: boolean;
+    error: {
+        isNeedShowError: boolean;
+        message: string | undefined;
+    };
+}
+declare const BasicTextArea: React.FC<Props>;
+export default BasicTextArea;

package/build/system/Forms/TextArea/index.js

@@ -0,0 +1,70 @@
+"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 styled_components_1 = __importDefault(require("styled-components"));
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const ScreenWidth_1 = require("@/styles/ScreenWidth");
+const colors_1 = require("@/styles/colors");
+const typography_1 = require("@/styles/typography");
+const vars_1 = require("@/fonts/vars");
+const ErrorLabel_1 = __importDefault(require("../ErrorLabel"));
+// Styles
+const StyledTextArea = styled_components_1.default.textarea `
+  font-family: ${vars_1.dmsansFontVarCss.css};
+  ${typography_1.MainText};
+  width: 100%;
+  min-height: 92px;
+  border-radius: 6px;
+  border: 1px solid
+    ${(props) => (props.status ? colors_1.ProgressColorMinimum : colors_1.BorderColorLight)};
+  background: ${colors_1.WhiteColor};
+  color: ${colors_1.BlackColor};
+  outline: none;
+  resize: none;
+  padding: 12px;
+
+  ::placeholder {
+    color: ${colors_1.TextGrayColor};
+    opacity: 1;
+  }
+
+  :-ms-input-placeholder {
+    color: ${colors_1.TextGrayColor};
+  }
+
+  ::-ms-input-placeholder {
+    color: ${colors_1.TextGrayColor};
+  }
+
+  // :focus {
+  //   transition: border-color 0.3s ease-in-out;
+  //   border: 2px solid ${(props) => (props.status ? '#F4205F' : '#C1C8DE')};
+  // }
+  // :hover {
+  //   transition: border-color 0.3s ease-in-out;
+  //   border: 2px solid ${(props) => (props.status ? '#F4205F' : '#C1C8DE')};
+  // }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    min-height: ${(0, _4k_1.adaptiveValueCalc)(92)};
+    border-radius: ${(0, _4k_1.adaptiveValueCalc)(6)};
+    border: ${(0, _4k_1.adaptiveValueCalc)(1)} solid
+      ${(props) => (props.status ? colors_1.ProgressColorMinimum : colors_1.BorderColorLight)};
+    padding: ${(0, _4k_1.adaptiveValueCalc)(12)};
+  }
+`;
+// const maxCountLength = 400;
+const BasicTextArea = ({ data, register, isNeedBiggerArea, error,
+// counter,
+ }) => {
+    const renderError = () => {
+        if (error.isNeedShowError) {
+            return (0, jsx_runtime_1.jsx)(ErrorLabel_1.default, { children: error.message });
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(StyledTextArea, { ...register, rows: isNeedBiggerArea ? 8 : 4, status: error.isNeedShowError, id: data.name, name: data.name, autoComplete: 'off', placeholder: data.placeHolder }), renderError()] }));
+};
+exports.default = BasicTextArea;

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

@@ -0,0 +1,5 @@
+import CheckboxInput from './Checkbox';
+import BasicErrorLabel from './ErrorLabel';
+import Input from './Input';
+import BasicTextArea from './TextArea';
+export { Input, BasicTextArea, BasicErrorLabel, CheckboxInput };

package/build/system/Forms/index.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckboxInput = exports.BasicErrorLabel = exports.BasicTextArea = exports.Input = void 0;
+const Checkbox_1 = __importDefault(require("./Checkbox"));
+exports.CheckboxInput = Checkbox_1.default;
+const ErrorLabel_1 = __importDefault(require("./ErrorLabel"));
+exports.BasicErrorLabel = ErrorLabel_1.default;
+const Input_1 = __importDefault(require("./Input"));
+exports.Input = Input_1.default;
+const TextArea_1 = __importDefault(require("./TextArea"));
+exports.BasicTextArea = TextArea_1.default;

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

@@ -0,0 +1,6 @@
+import React, { ComponentPropsWithRef } from 'react';
+import { BorderProps, LayoutProps, SpaceProps } from 'styled-system';
+export interface ExternalImageRawProps extends SpaceProps, LayoutProps, BorderProps {
+}
+export type ExternalImageProps = ComponentPropsWithRef<'img'> & ExternalImageRawProps;
+export declare const ExternalImage: React.ForwardRefExoticComponent<Omit<ExternalImageProps, "ref"> & React.RefAttributes<HTMLImageElement>>;

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

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExternalImage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const styled_components_1 = __importDefault(require("styled-components"));
+const styled_system_1 = require("styled-system");
+const StyledImage = styled_components_1.default.img `
+  display: block;
+  max-width: 100%;
+  height: ${(props) => (props.height ? props.height : 'auto')};
+  ${styled_system_1.space}
+  ${styled_system_1.layout}
+  ${styled_system_1.border}
+`;
+exports.ExternalImage = (0, react_1.forwardRef)((props, ref) => {
+    return (0, jsx_runtime_1.jsx)(StyledImage, { ref: ref, ...props });
+});
+exports.ExternalImage.displayName = 'ExternalImage';

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

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

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

@@ -0,0 +1,45 @@
+"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 styled_components_1 = __importDefault(require("styled-components"));
+const index_1 = require("./index");
+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', '/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,60 @@
+"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 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 = '/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("@/system/Img/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,65 @@
+"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("@/system/Img/Userpic/index"));
+const useFetchUserPic_1 = __importDefault(require("@/api/server-medias/queries/useFetchUserPic"));
+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');
+describe('UserPic Component', () => {
+    beforeEach(() => {
+        store_1.useUserStore.mockReturnValue({
+            isSignedIn: true,
+            isLoadingProfileData: false,
+            profileData: null,
+        });
+        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/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,84 @@
+"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("react");
+const image_1 = __importDefault(require("next/image"));
+const link_1 = __importDefault(require("next/link"));
+const react_loading_skeleton_1 = __importDefault(require("react-loading-skeleton"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+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("@/system/Img/ImageInterceptor");
+const useFetchUserPic_1 = __importDefault(require("@/api/server-medias/queries/useFetchUserPic"));
+const defaultUserpic_svg_1 = __importDefault(require("@/public/defaultUserpics/defaultUserpic.svg"));
+// 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 (0, jsx_runtime_1.jsx)(defaultUserpic_svg_1.default, { className: 'userPicImage' });
+    };
+    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' });
+    };
+    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: `/profile/${userId}/nfts`, 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 '@/system/Img/ExternalImage';
+export * from '@/system/Img/Userpic';
+export * from '@/system/Img/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("@/system/Img/ExternalImage"), exports);
+__exportStar(require("@/system/Img/Userpic"), exports);
+__exportStar(require("@/system/Img/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;