@ludo.ninja/components 2.3.36 → 2.3.37

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

@@ -0,0 +1,103 @@
+"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");
+require("@testing-library/jest-dom/extend-expect");
+const react_1 = require("@testing-library/react");
+const utils_1 = require("@ludo.ninja/utils");
+const index_1 = __importDefault(require("./index"));
+jest.mock('next/router', () => ({
+    useRouter: jest.fn(),
+}));
+jest.mock('@/system/Cards/CardContent/CardShowMore', () => {
+    return function ShowMore() {
+        return (0, jsx_runtime_1.jsx)("div", { "data-testid": "card-show-more", children: "Show More" });
+    };
+});
+describe('CardContent Component', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+    test('renders correctly with all props', () => {
+        const props = {
+            href: '/test-link',
+            creationName: 'Creation Name',
+            firstName: 'First Name',
+            secondName: 'Second Name',
+            cuttedSecondName: 'Cutted Second Name',
+            children: (0, jsx_runtime_1.jsx)("div", { children: "Child Component" }),
+            isNeedShowMoreButton: true,
+            itemId: '123',
+            // wallets: [{ address: 'wallet-address' }],
+            creatorName: 'Creator Name',
+        };
+        router_1.useRouter.mockReturnValue({
+            pathname: '/some-path',
+        });
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { ...props }));
+        expect(react_1.screen.getByText(props.creatorName)).toBeInTheDocument();
+        expect(react_1.screen.getByText(props.cuttedSecondName)).toBeInTheDocument();
+        expect(react_1.screen.getByText('Child Component')).toBeInTheDocument();
+        expect(react_1.screen.getByTestId('card-show-more')).toBeInTheDocument();
+    });
+    test('renders shortened firstName and cuttedSecondName if they exceed length', () => {
+        const props = {
+            firstName: 'A very long first name that exceeds twenty characters',
+            cuttedSecondName: 'A very long second name that exceeds twenty characters',
+            isNeedShowMoreButton: false,
+            itemId: '123',
+            children: (0, jsx_runtime_1.jsx)("div", { children: "Child Component" }),
+        };
+        router_1.useRouter.mockReturnValue({
+            pathname: '/some-path',
+        });
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { ...props, children: props.children }));
+        expect(react_1.screen.getByText((0, utils_1.shortenedText)(props.firstName))).toBeInTheDocument();
+        expect(react_1.screen.getByText(props.cuttedSecondName)).toBeInTheDocument();
+    });
+    test('shows creatorName if provided', () => {
+        const props = {
+            creatorName: 'Creator Name',
+            isNeedShowMoreButton: false,
+            itemId: '123',
+            children: (0, jsx_runtime_1.jsx)("div", { children: "Child Component" }),
+        };
+        router_1.useRouter.mockReturnValue({
+            pathname: '/some-path',
+        });
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { ...props }));
+        expect(react_1.screen.getByText('Creator Name')).toBeInTheDocument();
+    });
+    test('renders correctly when isGalleryAndFavPage is true', () => {
+        const props = {
+            firstName: 'First Name',
+            cuttedSecondName: 'Cutted Second Name',
+            // wallets: [{ address: 'wallet-address' }],
+            isNeedShowMoreButton: false,
+            itemId: '123',
+            children: (0, jsx_runtime_1.jsx)("div", { children: "Child Component" }),
+        };
+        router_1.useRouter.mockReturnValue({
+            pathname: '/galleries',
+        });
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { ...props }));
+        expect(react_1.screen.getByText('First Name')).toBeInTheDocument();
+    });
+    test('does not render "Show More" button if isNeedShowMoreButton is false', () => {
+        const props = {
+            firstName: 'First Name',
+            cuttedSecondName: 'Cutted Second Name',
+            children: (0, jsx_runtime_1.jsx)("div", { children: "Child Component" }),
+            isNeedShowMoreButton: false,
+            itemId: '123',
+        };
+        router_1.useRouter.mockReturnValue({
+            pathname: '/some-path',
+        });
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { ...props }));
+        expect(react_1.screen.queryByTestId('card-show-more')).not.toBeInTheDocument();
+    });
+});

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

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

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

@@ -0,0 +1,37 @@
+"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('@/utils/screen', () => ({
+    useWindowDimensionsWithServerInitial: () => ({
+        windowDimensions: { width: 800, height: 600 },
+    }),
+}));
+// Mock the HeartIcon
+jest.mock('@/public/showCaseIcons/heart.svg', () => function SVG() {
+    return (0, jsx_runtime_1.jsx)("svg", { "data-testid": "heart-icon" });
+});
+// Mock the StyledLikes component
+jest.mock('@/system/Cards/Styles/Likes', () => function Like({ children, isLiked }) {
+    return ((0, jsx_runtime_1.jsx)("div", { "data-testid": `likes-${isLiked ? 'liked' : 'not-liked'}`, children: children }));
+});
+describe('CardLikes Component', () => {
+    test('renders correctly with likes and liked status', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { likes: 10, isLiked: true }));
+        const likesElement = react_1.screen.getByTestId('likes-liked');
+        const heartIcon = react_1.screen.getByTestId('heart-icon');
+        const counter = react_1.screen.getByText('10');
+        expect(likesElement).toBeInTheDocument();
+        expect(heartIcon).toBeInTheDocument();
+        expect(counter).toBeInTheDocument();
+    });
+    test('does not render when likes is 0', () => {
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { likes: 0, isLiked: false }));
+        expect(container.firstChild).toBeNull();
+    });
+});

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

@@ -0,0 +1,5 @@
+declare const CardLikes: ({ likes, isLiked }: {
+    likes: number;
+    isLiked: boolean;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export default CardLikes;

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

@@ -0,0 +1,29 @@
+"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

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

package/build/system/Cards/CardContent/CardShowMore/CardShowMore.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");
+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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,121 @@
+"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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,97 @@
+"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

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

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

@@ -0,0 +1,92 @@
+"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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,66 @@
+"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

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