@ludo.ninja/components 2.3.4 → 2.3.6

package/build/system/Cards/CardContent/CardLikes/index.js

@@ -1,29 +0,0 @@
-"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 scale_1 = require("../../../../utils/adaptive/scale");
-const screen_1 = require("../../../../utils/screen");
-const styled_components_1 = __importDefault(require("styled-components"));
-const Likes_1 = __importDefault(require("../../Styles/Likes"));
-const heart_svg_1 = __importDefault(require("../../../../public/showCaseIcons/heart"));
-// Styles
-const StyledCardLikes = styled_components_1.default.div `
-  display: flex;
-  justify-content: space-between;
-  align-items: end;
-`;
-// Component
-const CardLikes = ({ likes, isLiked }) => {
-    const { windowDimensions } = (0, screen_1.useWindowDimensionsWithServerInitial)();
-    if (!likes)
-        return null;
-    return ((0, jsx_runtime_1.jsx)(StyledCardLikes, { children: Boolean(likes) && ((0, jsx_runtime_1.jsxs)(Likes_1.default, { isLiked: isLiked, children: [(0, jsx_runtime_1.jsx)("div", { className: 'icon', children: (0, jsx_runtime_1.jsx)(heart_svg_1.default, { style: (0, scale_1.getAdaptiveScale)({
-                            windowDimensions,
-                            currentSize: 1,
-                        }) }) }), (0, jsx_runtime_1.jsx)("span", { className: 'counter', children: likes })] })) }));
-};
-// Export
-exports.default = CardLikes;

package/build/system/Cards/CardContent/CardShowMore/CardShowMore.test.d.ts

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

package/build/system/Cards/CardContent/CardShowMore/CardShowMore.test.js

@@ -1,46 +0,0 @@
-"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");
-const type_1 = require("@ludo.ninja/ui/build/system/Alert/type");
-const utils_1 = require("@ludo.ninja/utils");
-const ui_1 = require("../../../../store/ui");
-const index_1 = __importDefault(require("./index"));
-jest.mock('@ludo.ninja/utils', () => ({
-    copyToClipboard: jest.fn(),
-}));
-jest.mock('@/store/ui', () => ({
-    useUiStore: jest.fn(),
-}));
-jest.mock('@/public/creation/card/moreBtnVertical.svg', () => function SVG() {
-    return (0, jsx_runtime_1.jsx)("svg", { "data-testid": "more-btn-icon" });
-});
-describe('CardShowMore Component', () => {
-    const mockOpenAlert = jest.fn();
-    beforeEach(() => {
-        jest.clearAllMocks();
-        ui_1.useUiStore.mockReturnValue(mockOpenAlert);
-    });
-    test('renders correctly and shows MoreButtonIcon', () => {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { itemId: "123", href: "/some-path" }));
-        expect(react_1.screen.getByTestId('more-btn-icon')).toBeInTheDocument();
-    });
-    test('copies link to clipboard and opens alert on click', () => {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { itemId: "123", href: "/some-path" }));
-        const dropDownItem = react_1.screen.getByText('Copy link');
-        react_1.fireEvent.click(dropDownItem);
-        expect(utils_1.copyToClipboard).toHaveBeenCalledWith(`${window.location.origin}/some-path`);
-        expect(mockOpenAlert).toHaveBeenCalledWith({ type: type_1.alertVariants.copied });
-    });
-    test('dropdown is displayed on hover', () => {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { itemId: "123", href: "/some-path" }));
-        const moreButton = react_1.screen.getByTestId('more-btn-icon');
-        react_1.fireEvent.mouseOver(moreButton);
-        const dropDownItem = react_1.screen.getByText('Copy link');
-        expect(dropDownItem).toBeVisible();
-    });
-});

package/build/system/Cards/CardContent/CardShowMore/index.d.ts

@@ -1,6 +0,0 @@
-export declare const StyledCardShowMore: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-declare const CardShowMore: ({ itemId, href }: {
-    itemId: string;
-    href: string;
-}) => import("react/jsx-runtime").JSX.Element;
-export default CardShowMore;

package/build/system/Cards/CardContent/CardShowMore/index.js

@@ -1,121 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledCardShowMore = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const styled_components_1 = __importDefault(require("styled-components"));
-const type_1 = require("@ludo.ninja/ui/build/system/Alert/type");
-const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
-const utils_1 = require("@ludo.ninja/utils");
-const ui_1 = require("../../../../store/ui");
-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 moreBtnVertical_svg_1 = __importDefault(require("../../../../public/creation/card/moreBtnVertical"));
-// Styles
-exports.StyledCardShowMore = styled_components_1.default.div `
-  .cardShowMore {
-    position: relative;
-    cursor: pointer;
-    z-index: 100;
-
-    &:before {
-      content: '';
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      width: 40px;
-      height: 40px;
-      z-index: -1;
-    }
-
-    @media (max-width: 1200px) {
-      display: none;
-    }
-
-    &DropDown {
-      font-family: ${vars_1.dmsansFontVarCss.css};
-      display: none;
-      position: absolute;
-      background-color: white;
-      top: 20px;
-      left: -170px;
-      width: 184px;
-      box-shadow: 0px 0px 10px 5px rgba(33, 21, 95, 0.1);
-      border-radius: 6px;
-      padding: 8px;;
-
-      &:before {
-        content: '';
-        display: block;
-        position: absolute;
-        top: -15px;
-        height: 15px;
-        width: 100%;
-      }
-
-      &Item {
-        ${typography_1.TextSmall};
-        display: block;
-        padding: 6px 0 6px 8px;
-        color: #696f91;
-
-        &:hover {
-          border-radius: 4px;
-          color: ${colors_1.BlackColor};
-          background-color: ${colors_1.BackgroundColorLight};
-        }
-      }
-    }
-
-    &:hover > div {
-      display: block;
-      z-index: 100000;
-    }
-    ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-      &:before {
-        width: ${(0, _4k_1.adaptiveValueCalc)(40)};
-        height:  ${(0, _4k_1.adaptiveValueCalc)(40)};
-      }
-      &DropDown {
-        top: ${(0, _4k_1.adaptiveValueCalc)(20)};
-        left:${(0, _4k_1.adaptiveValueCalc)(-170)};
-        width: ${(0, _4k_1.adaptiveValueCalc)(184)};
-        box-shadow: 0px 0px ${(0, _4k_1.adaptiveValueCalc)(10)} ${(0, _4k_1.adaptiveValueCalc)(5)} rgba(33, 21, 95, 0.1);
-        border-radius: ${(0, _4k_1.adaptiveValueCalc)(6)};
-        padding: ${(0, _4k_1.adaptiveValueCalc)(8)};
-
-        &:before {
-          top: ${(0, _4k_1.adaptiveValueCalc)(-15)};
-          height: ${(0, _4k_1.adaptiveValueCalc)(15)};
-        }
-
-        &Item {
-          padding: ${(0, _4k_1.adaptiveValueCalc)(6)} 0 ${(0, _4k_1.adaptiveValueCalc)(6)} ${(0, _4k_1.adaptiveValueCalc)(8)};
-          &:hover {
-            border-radius: ${(0, _4k_1.adaptiveValueCalc)(4)};
-          }
-        }
-      }
-    }
-  }
-}
-`;
-// Component
-const CardShowMore = ({ itemId, href }) => {
-    const openAlert = (0, ui_1.useUiStore)((state) => state.openAlert);
-    const copyAssetLinkToClipboard = (e) => {
-        e.preventDefault();
-        (0, utils_1.copyToClipboard)(href);
-        openAlert({
-            type: type_1.alertVariants.copied,
-        });
-    };
-    return ((0, jsx_runtime_1.jsx)(exports.StyledCardShowMore, { children: (0, jsx_runtime_1.jsxs)("div", { className: "cardShowMore", children: [(0, jsx_runtime_1.jsx)(moreBtnVertical_svg_1.default, {}), (0, jsx_runtime_1.jsx)("div", { className: `cardShowMoreDropDown`, id: itemId, onClick: copyAssetLinkToClipboard, children: (0, jsx_runtime_1.jsx)("span", { className: 'cardShowMoreDropDownItem', children: "Copy link" }) })] }) }));
-};
-// Export
-exports.default = CardShowMore;

package/build/system/Cards/CardContent/index.d.ts

@@ -1,17 +0,0 @@
-import React from 'react';
-import { IWallet } from '@ludo.ninja/api/build/graphql_tools/__generated__/galleriesHost/schema';
-declare const CardContent: ({ firstName, creationName, cuttedSecondName: cuttedShowcaseName, children, isNeedShowMoreButton, itemId, wallets, creatorName, href, }: {
-    href?: string;
-    creationName?: string | undefined;
-    firstName?: string | null;
-    secondName?: string | null;
-    cuttedSecondName?: string | null;
-    children: React.ReactNode;
-    userCreationAddresses?: string;
-    wallets?: IWallet[];
-    isNeedShowMoreButton: boolean;
-    actionIsNeedRenderCheckbox?: (isNeedToShow: boolean, itemId?: string) => void;
-    itemId: string;
-    creatorName?: string;
-}) => import("react/jsx-runtime").JSX.Element;
-export default CardContent;

package/build/system/Cards/CardContent/index.js

@@ -1,97 +0,0 @@
-"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 router_1 = require("next/router");
-const styled_components_1 = __importDefault(require("styled-components"));
-const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
-const utils_1 = require("@ludo.ninja/utils");
-const ScreenWidth_1 = require("../../../styles/ScreenWidth");
-const colors_1 = require("../../../styles/colors");
-const typography_1 = require("../../../styles/typography");
-const CardShowMore_1 = __importDefault(require("./CardShowMore"));
-const vars_1 = require("../../../fonts/vars");
-// Styles
-const StyledCardContent = styled_components_1.default.div `
-  display: flex;
-  flex-direction: column;
-  padding: 12px 16px;
-  min-height: 94px;
-  flex-grow: 1;
-  justify-content: end;
-
-  .cardContent {
-    display: flex;
-    justify-content: space-between;
-
-    .cardContentWrapper {
-      .mainName {
-        font-family: ${vars_1.dmsansFontVarCss.css};
-        ${typography_1.TextSmall};
-        color: ${colors_1.TextGrayColor};
-        font-size: 13px;
-        margin-bottom: 0;
-      }
-
-      .secondName {
-        font-family: ${vars_1.poppinsFontVarCss.css};
-        ${typography_1.FH5};
-        color: ${colors_1.BlackColor};
-        font-size: 15px;
-      }
-    }
-  }
-
-  .creatorName {
-    ${typography_1.TextSmall};
-    color: ${colors_1.TextGrayColor};
-    line-height: 1.39em;
-  }
-
-  @media (max-width: 1040px) {
-    height: auto;
-    padding: 12px;
-  }
-  @media (max-width: 767px) {
-    min-height: 84px;
-  }
-
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    padding: ${(0, _4k_1.adaptiveValueCalc)(12)} ${(0, _4k_1.adaptiveValueCalc)(16)};
-    min-height: ${(0, _4k_1.adaptiveValueCalc)(94)};
-
-    .cardContent {
-      .cardContentWrapper {
-        .mainName {
-          font-size: ${(0, _4k_1.adaptiveValueCalc)(13)};
-        }
-
-        .secondName {
-          font-size: ${(0, _4k_1.adaptiveValueCalc)(15)};
-        }
-      }
-    }
-  }
-`;
-// Component
-const CardContent = ({ firstName, creationName, cuttedSecondName: cuttedShowcaseName, children, isNeedShowMoreButton, itemId, wallets, creatorName, href, }) => {
-    const router = (0, router_1.useRouter)();
-    const isGalleryAndFavPage = router.pathname.includes('galleries') ||
-        router.pathname.includes('favorite-lists');
-    const wallet = wallets && wallets[0]?.address;
-    return ((0, jsx_runtime_1.jsxs)(StyledCardContent, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "cardContent", children: [(0, jsx_runtime_1.jsx)("div", { className: "cardContentWrapper", children: isGalleryAndFavPage ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [firstName && ((0, jsx_runtime_1.jsx)("p", { className: `secondName`, children: firstName.length > 20 ? (0, utils_1.shortenedText)(firstName) : firstName })), (0, jsx_runtime_1.jsx)("h3", { className: `mainName`, children: cuttedShowcaseName
-                                        ? cuttedShowcaseName.length > 20
-                                            ? (0, utils_1.shortenedText)(cuttedShowcaseName)
-                                            : cuttedShowcaseName
-                                        : (0, utils_1.shortenedText)(wallet) })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [creatorName ? ((0, jsx_runtime_1.jsx)("p", { className: "creatorName", children: creatorName })) : (firstName && ((0, jsx_runtime_1.jsx)("p", { className: `mainName`, children: creationName
-                                        ? creationName
-                                        : firstName.length > 20
-                                            ? (0, utils_1.shortenedText)(firstName)
-                                            : firstName }))), (0, jsx_runtime_1.jsx)("h3", { className: `secondName`, children: cuttedShowcaseName && (0, utils_1.isContainChinese)(cuttedShowcaseName)
-                                        ? cuttedShowcaseName.substring(0, 9)
-                                        : cuttedShowcaseName })] })) }), isNeedShowMoreButton && ((0, jsx_runtime_1.jsx)(CardShowMore_1.default, { href: href, itemId: itemId }))] }), children] }));
-};
-// Export
-exports.default = CardContent;

package/build/system/Cards/CardMedia/CardAudio/CardAudio.test.d.ts

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

package/build/system/Cards/CardMedia/CardAudio/CardAudio.test.js

@@ -1,92 +0,0 @@
-"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");
-const media_1 = require("../../../../store/media");
-const index_1 = __importDefault(require("./index"));
-jest.mock('@/store/media', () => ({
-    useMediaStore: jest.fn(),
-}));
-jest.mock('@/utils/screen', () => ({
-    getWindowDimensions: jest.fn().mockReturnValue({ windowWidth: 1024 }),
-}));
-jest.mock('@/public/video/pause.svg', () => function Pause() {
-    return (0, jsx_runtime_1.jsx)("div", { "data-testid": "pause-icon" });
-});
-jest.mock('@/public/video/play.svg', () => function Play() {
-    return (0, jsx_runtime_1.jsx)("div", { "data-testid": "play-icon" });
-});
-jest.mock('react-loading-skeleton', () => function Skeleton() {
-    return (0, jsx_runtime_1.jsx)("div", { "data-testid": "skeleton" });
-});
-describe('CardAudio Component', () => {
-    beforeEach(() => {
-        jest.clearAllMocks();
-    });
-    const mockUseMediaStore = {
-        playAudioTrack: jest.fn(),
-        pauseAudioTrack: jest.fn(),
-        tracks: [],
-    };
-    const testImageSrc = '/tests/test_1.svg';
-    const testAudioSrc = '/tests/audio.mp3';
-    test('renders skeleton loader initially', () => {
-        media_1.useMediaStore.mockReturnValue(mockUseMediaStore);
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { audioSrc: "test-audio.mp3", imgSrc: "test-image.jpg", errorImg: "error-image.jpg", alt: "Test Image" }));
-        expect(react_1.screen.getByTestId('skeleton')).toBeInTheDocument();
-    });
-    test('renders image correctly after loading', async () => {
-        media_1.useMediaStore.mockReturnValue(mockUseMediaStore);
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { audioSrc: testAudioSrc, imgSrc: testImageSrc, errorImg: "error-image.jpg", alt: "Test Image" }));
-        // Mock image onload event
-        const image = new Image();
-        image.src = testImageSrc;
-        react_1.fireEvent.load(image);
-        (0, react_1.waitFor)(() => {
-            expect(react_1.screen.getByAltText('Test Image')).toHaveAttribute('src', '/tests/test_1.svg?d=252x252');
-        });
-    });
-    test('renders audio correctly and handles play/pause', async () => {
-        mockUseMediaStore.tracks = [
-            { audioSrc: testAudioSrc, playing: false },
-        ];
-        media_1.useMediaStore.mockReturnValue(mockUseMediaStore);
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { audioSrc: testAudioSrc, imgSrc: testImageSrc, errorImg: "error-image.jpg", alt: "Test Image" }));
-        // Mock image and audio onload events
-        const audio = new Audio(testAudioSrc);
-        react_1.fireEvent.canPlay(audio);
-        const image = new Image();
-        image.src = testImageSrc;
-        react_1.fireEvent.load(image);
-        (0, react_1.waitFor)(() => {
-            expect(react_1.screen.getByTestId('play-icon')).toBeInTheDocument();
-            react_1.fireEvent.click(react_1.screen.getByTestId('play-icon'));
-            expect(mockUseMediaStore.playAudioTrack).toHaveBeenCalledWith(testAudioSrc);
-            expect(react_1.screen.getByTestId('pause-icon')).toBeInTheDocument();
-            react_1.fireEvent.click(react_1.screen.getByTestId('pause-icon'));
-            expect(mockUseMediaStore.pauseAudioTrack).toHaveBeenCalledWith(testAudioSrc);
-            expect(react_1.screen.getByTestId('play-icon')).toBeInTheDocument();
-        });
-    });
-    test('displays correct play/pause icon based on state', async () => {
-        media_1.useMediaStore.mockReturnValue(mockUseMediaStore);
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { audioSrc: testAudioSrc, imgSrc: testImageSrc, errorImg: "error-image.jpg", alt: "Test Image" }));
-        // Mock image onload event
-        const image = new Image();
-        image.src = testImageSrc;
-        react_1.fireEvent.load(image);
-        // Initially, the play icon should be displayed
-        (0, react_1.waitFor)(() => {
-            expect(react_1.screen.getByTestId('play-icon')).toBeInTheDocument();
-            react_1.fireEvent.click(react_1.screen.getByTestId('play-icon'));
-            expect(react_1.screen.getByTestId('pause-icon')).toBeInTheDocument();
-            // After clicking pause, the play icon should be displayed again
-            react_1.fireEvent.click(react_1.screen.getByTestId('pause-icon'));
-            expect(react_1.screen.getByTestId('play-icon')).toBeInTheDocument();
-        });
-    });
-});

package/build/system/Cards/CardMedia/CardAudio/index.d.ts

@@ -1,7 +0,0 @@
-declare const CardAudio: ({ audioSrc, imgSrc, errorImg, alt, }: {
-    audioSrc: string;
-    imgSrc: string;
-    errorImg: string;
-    alt: string;
-}) => import("react/jsx-runtime").JSX.Element;
-export default CardAudio;

package/build/system/Cards/CardMedia/CardAudio/index.js

@@ -1,66 +0,0 @@
-"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 screen_1 = require("../../../../utils/screen");
-const react_loading_skeleton_1 = __importDefault(require("react-loading-skeleton"));
-const media_1 = require("../../../../store/media");
-const Image_1 = __importDefault(require("../../Styles/Image"));
-const pause_svg_1 = __importDefault(require("../../../../public/video/pause"));
-const play_svg_1 = __importDefault(require("../../../../public/video/play"));
-// Component
-const CardAudio = ({ audioSrc, imgSrc, errorImg, alt, }) => {
-    const [lImgSrc, setLImgSrc] = (0, react_1.useState)('');
-    const { windowWidth } = (0, screen_1.getWindowDimensions)();
-    const isMobile = windowWidth <= 768;
-    const imageDimensions = isMobile ? '?d=164x164' : '?d=252x252';
-    const [isPauseIcon, setPauseIcon] = (0, react_1.useState)(false);
-    const [lAudioSrc, setLAudioSrc] = (0, react_1.useState)(null);
-    const { playAudioTrack, pauseAudioTrack, tracks } = (0, media_1.useMediaStore)((state) => ({
-        playAudioTrack: state.playAudioTrack,
-        pauseAudioTrack: state.pauseAudioTrack,
-        tracks: state.audioTracks,
-    }));
-    (0, react_1.useEffect)(() => {
-        const audioElement = new Audio(audioSrc);
-        audioElement.addEventListener('canplay', () => {
-            setLAudioSrc(audioSrc);
-        });
-        const image = new Image();
-        image.src = imgSrc;
-        image.onload = () => setLImgSrc(`${image.src}${imageDimensions}`);
-        image.onerror = () => setLImgSrc(`${errorImg}${imageDimensions}`);
-        return () => audioElement.removeEventListener('canplay', () => {
-            setLAudioSrc(null);
-        });
-    }, []);
-    (0, react_1.useEffect)(() => {
-        const isNeedSetPlayBtn = tracks.some((track) => {
-            return track.audioSrc === lAudioSrc && !track.playing;
-        });
-        if (isNeedSetPlayBtn) {
-            setPauseIcon(false);
-        }
-    }, [tracks]);
-    const handlePause = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        setPauseIcon(false);
-        pauseAudioTrack(lAudioSrc);
-    };
-    const handlePlay = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        setPauseIcon(true);
-        playAudioTrack(lAudioSrc);
-    };
-    const renderPlayPauseIcon = () => {
-        return isPauseIcon ? ((0, jsx_runtime_1.jsx)(pause_svg_1.default, { className: 'pauseIcon', onClick: (e) => handlePause(e) })) : ((0, jsx_runtime_1.jsx)(play_svg_1.default, { className: 'playIcon', onClick: (e) => handlePlay(e) }));
-    };
-    return lImgSrc.length ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Image_1.default, { src: imgSrc, alt: alt, isLoading: lAudioSrc }), lAudioSrc?.length && renderPlayPauseIcon()] })) : ((0, jsx_runtime_1.jsx)(react_loading_skeleton_1.default, { height: '100%', width: '100%', style: { lineHeight: 'normal' } }));
-};
-// Export
-exports.default = CardAudio;

package/build/system/Cards/CardMedia/CardImage/CardImage.test.d.ts

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

package/build/system/Cards/CardMedia/CardImage/CardImage.test.js

@@ -1,34 +0,0 @@
-"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");
-const index_1 = __importDefault(require("./index"));
-jest.mock('react-loading-skeleton', () => function Skeleton() {
-    return (0, jsx_runtime_1.jsx)("div", { "data-testid": "skeleton-loader" });
-});
-describe('CardImage Component', () => {
-    const imgSrc = '/tests/test_1.svg';
-    const errorImg = 'error-image.jpg';
-    const alt = 'Test Image';
-    test('renders skeleton loader initially', () => {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { imgSrc: imgSrc, errorImg: errorImg, alt: alt }));
-        expect(react_1.screen.getByTestId('skeleton-loader')).toBeInTheDocument();
-    });
-    test('renders image correctly after loading', async () => {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { imgSrc: imgSrc, errorImg: errorImg, alt: alt }));
-        const image = react_1.screen.getByAltText(alt);
-        react_1.fireEvent.load(image);
-        expect(image).toHaveAttribute('src', imgSrc);
-        expect(react_1.screen.queryByTestId('skeleton-loader')).not.toBeInTheDocument();
-    });
-    test('renders error image on load failure', () => {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { imgSrc: imgSrc, errorImg: errorImg, alt: alt }));
-        const image = react_1.screen.getByAltText(alt);
-        react_1.fireEvent.error(image);
-        expect(image).toHaveAttribute('src', errorImg);
-    });
-});

package/build/system/Cards/CardMedia/CardImage/index.d.ts

@@ -1,9 +0,0 @@
-import { CSSProperties } from "react";
-declare const CardImage: ({ imgSrc, errorImg, alt, className, style }: {
-    imgSrc: string;
-    errorImg: string;
-    alt: string;
-    className?: string;
-    style?: CSSProperties;
-}) => import("react/jsx-runtime").JSX.Element;
-export default CardImage;

package/build/system/Cards/CardMedia/CardImage/index.js

@@ -1,24 +0,0 @@
-"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 creation_1 = require("../../../../store/creation");
-const Image_1 = __importDefault(require("../../Styles/Image"));
-const react_1 = require("react");
-const react_loading_skeleton_1 = __importDefault(require("react-loading-skeleton"));
-// Component
-const CardImage = ({ imgSrc, errorImg, alt, className, style }) => {
-    const isFirstLoading = !creation_1.urlsActive[imgSrc];
-    const [loading, setLoading] = (0, react_1.useState)(isFirstLoading);
-    if (isFirstLoading) {
-        (0, creation_1.addUrlsActive)(imgSrc);
-    }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [loading && ((0, jsx_runtime_1.jsx)(react_loading_skeleton_1.default, { height: "100%", width: "100%", style: {
-                    lineHeight: "normal",
-                    visibility: `${loading ? "hidden" : "visible"}`,
-                } })), (0, jsx_runtime_1.jsx)(Image_1.default, { className: className, style: style, isLoading: loading, src: imgSrc, alt: alt, onError: (e) => (e.target.src = errorImg), onLoad: () => setLoading(false) })] }));
-};
-// Export
-exports.default = CardImage;

package/build/system/Cards/CardMedia/CardVideo/index.d.ts

@@ -1,7 +0,0 @@
-declare const CardVideo: ({ videoSrc, errorImg, alt, playOnHover }: {
-    videoSrc: string;
-    errorImg: string;
-    alt: string;
-    playOnHover?: boolean;
-}) => import("react/jsx-runtime").JSX.Element;
-export default CardVideo;

package/build/system/Cards/CardMedia/CardVideo/index.js

@@ -1,57 +0,0 @@
-"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 react_loading_skeleton_1 = __importDefault(require("react-loading-skeleton"));
-const Image_1 = __importDefault(require("../../Styles/Image"));
-const Video_1 = __importDefault(require("../../Styles/Video"));
-const pause_svg_1 = __importDefault(require("../../../../public/video/pause"));
-const play_svg_1 = __importDefault(require("../../../../public/video/play"));
-// Component
-const CardVideo = ({ videoSrc, errorImg, alt, playOnHover }) => {
-    const [lVideoSrc, setLVideoSrc] = (0, react_1.useState)(null);
-    const [isPlayIcon, setPlayIcon] = (0, react_1.useState)(false);
-    const video = (0, react_1.useRef)();
-    (0, react_1.useEffect)(() => {
-        const video = document.createElement('video');
-        video.setAttribute('src', `${videoSrc}`);
-        video.addEventListener('canplay', () => {
-            setLVideoSrc(videoSrc);
-            setPlayIcon(true);
-        }, false);
-        video.addEventListener('error', () => {
-            setLVideoSrc(null);
-            setPlayIcon(false);
-        }, false);
-        return () => video.removeEventListener('canplay', () => setLVideoSrc(null));
-    }, []);
-    const playVideo = () => {
-        video.current && video.current?.play();
-        setPlayIcon(false);
-    };
-    const pauseVideo = () => {
-        video.current && video.current?.pause();
-        setPlayIcon(true);
-    };
-    const renderImage = () => ((0, jsx_runtime_1.jsx)(Image_1.default, { isLoading: false, src: errorImg, alt: alt }));
-    if (!videoSrc)
-        return renderImage();
-    return lVideoSrc ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Video_1.default, { ref: video, muted: true, loop: true, playsInline: true, preload: 'false', ...(playOnHover ? {
-                    onMouseOver: event => event.target.play(),
-                    onMouseOut: event => event.target.pause()
-                } : {}), children: [(0, jsx_runtime_1.jsx)("source", { type: "video/mp4", src: lVideoSrc }), (0, jsx_runtime_1.jsx)("p", { children: alt })] }), lVideoSrc.length && !playOnHover &&
-                (isPlayIcon ? ((0, jsx_runtime_1.jsx)(play_svg_1.default, { className: 'playIcon', onClick: (e) => {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        playVideo();
-                    } })) : ((0, jsx_runtime_1.jsx)(pause_svg_1.default, { className: 'pauseIcon', onClick: (e) => {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        pauseVideo();
-                    } })))] })) : ((0, jsx_runtime_1.jsx)(react_loading_skeleton_1.default, { height: '100%', width: '100%', style: { lineHeight: 'normal' } }));
-};
-// Export
-exports.default = CardVideo;

package/build/system/Cards/CardRank/index.d.ts

@@ -1,4 +0,0 @@
-declare const CardRank: ({ rank }: {
-    rank: number;
-}) => import("react/jsx-runtime").JSX.Element;
-export default CardRank;