@ludo.ninja/components 2.0.0 → 2.0.2

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("@/system/Cards/Styles/Image"));
+const pause_svg_1 = __importDefault(require("@/public/video/pause.svg"));
+const play_svg_1 = __importDefault(require("@/public/video/play.svg"));
+// 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';

package/build/system/Cards/CardMedia/CardImage/CardImage.test.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 });
+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

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

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

@@ -0,0 +1,19 @@
+"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("@/system/Cards/Styles/Image"));
+// Component
+const CardImage = ({ imgSrc, errorImg, alt, }) => {
+    const [loading, setLoading] = (0, react_1.useState)(true);
+    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, { 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

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

package/build/system/Cards/CardMedia/CardVideo/index.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");
+const react_1 = require("react");
+const react_loading_skeleton_1 = __importDefault(require("react-loading-skeleton"));
+const Image_1 = __importDefault(require("@/system/Cards/Styles/Image"));
+const Video_1 = __importDefault(require("@/system/Cards/Styles/Video"));
+const pause_svg_1 = __importDefault(require("@/public/video/pause.svg"));
+const play_svg_1 = __importDefault(require("@/public/video/play.svg"));
+// Component
+const CardVideo = ({ videoSrc, errorImg, alt, }) => {
+    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', children: [(0, jsx_runtime_1.jsx)("source", { type: "video/mp4", src: lVideoSrc }), (0, jsx_runtime_1.jsx)("p", { children: alt })] }), lVideoSrc.length &&
+                (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

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

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

@@ -0,0 +1,82 @@
+"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 utils_1 = require("@ludo.ninja/utils");
+const ScreenWidth_1 = require("@/styles/ScreenWidth");
+const colors_1 = require("@/styles/colors");
+const system_1 = require("@/system");
+// Styles
+const StyledCardRank = styled_components_1.default.div `
+  width: 64px;
+  height: 24px;
+  background-color: ${colors_1.WhiteColor};
+  border-radius: 4px;
+  padding: 5px;
+
+  .rankText {
+    color: ${colors_1.BlackColor};
+    margin-right: 4px;
+    font-size: 1.3em;
+    font-weight: 600;
+  }
+
+  .smallText {
+    font-size: 1.2em;
+    letter-spacing: -0.5px;
+  }
+
+  ${ScreenWidth_1.mediaQuery.phone} {
+    width: 43px;
+    height: 18px;
+  }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    width: ${(0, _4k_1.adaptiveValueCalc)(64)};
+    height: ${(0, _4k_1.adaptiveValueCalc)(24)};
+    border-radius: ${(0, _4k_1.adaptiveValueCalc)(4)};
+    padding: ${(0, _4k_1.adaptiveValueCalc)(5)};
+
+    .rankText {
+      font-size: ${(0, _4k_1.adaptiveValueCalc)(13)};
+      margin-right: ${(0, _4k_1.adaptiveValueCalc)(4)};
+    }
+
+    .smallText {
+      font-size: ${(0, _4k_1.adaptiveValueCalc)(12)};
+      letter-spacing: ${(0, _4k_1.adaptiveValueCalc)(-0.5)};
+    }
+  }
+`;
+const SBox = (0, styled_components_1.default)(system_1.Box) `
+  height: 10px;
+  width: 32px;
+  background: ${colors_1.InactiveButtonColor};
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    height: ${(0, _4k_1.adaptiveValueCalc)(10)};
+    width: ${(0, _4k_1.adaptiveValueCalc)(32)};
+  }
+`;
+const RangeValue = styled_components_1.default.div `
+  display: block;
+  background: ${(props) => props.rankValue && (0, utils_1.getRankColor)(props.rankValue)};
+  height: 10px;
+  width: ${(props) => `${props.rankValue}%`};
+  border-radius: 2px 0 0 2px;
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    height: ${(0, _4k_1.adaptiveValueCalc)(10)};
+    border-radius: ${(0, _4k_1.adaptiveValueCalc)(2)} 0 0 ${(0, _4k_1.adaptiveValueCalc)(2)};
+  }
+`;
+// Component
+const CardRank = ({ rank }) => {
+    return ((0, jsx_runtime_1.jsx)(StyledCardRank, { children: (0, jsx_runtime_1.jsxs)(system_1.Flex, { alignItems: 'center', height: '100%', children: [(0, jsx_runtime_1.jsx)(system_1.Box, { children: (0, jsx_runtime_1.jsx)("p", { className: `rankText ${!Boolean(rank) && 'smallText'}`, children: rank ? rank : 'unknown' }) }), Boolean(rank) && ((0, jsx_runtime_1.jsx)(SBox, { children: (0, jsx_runtime_1.jsx)(RangeValue, { rankValue: rank }) }))] }) }));
+};
+// Export
+exports.default = CardRank;

package/build/system/Cards/CreationCard/CardHead.d.ts

@@ -0,0 +1,13 @@
+import CollectionCreationEntity from '@/dto/Collection/CollectionCreationEntity';
+import CreationEntity from '@/dto/CreationEntity';
+export declare const CardHead: ({ creation, isRegularCard, isIconLiked, addLikeToCard, deleteLikeFromCard, isUserProfile, isDisabled, isShowCheckbox, currentMyGalleryId, }: {
+    creation: CreationEntity | CollectionCreationEntity;
+    isRegularCard: boolean;
+    isIconLiked: boolean;
+    addLikeToCard: (id: string) => void;
+    deleteLikeFromCard: (id: string) => void;
+    isUserProfile: boolean;
+    isDisabled?: boolean | undefined;
+    isShowCheckbox?: boolean | undefined;
+    currentMyGalleryId?: false | string | undefined;
+}) => import("react/jsx-runtime").JSX.Element;

package/build/system/Cards/CreationCard/CardHead.js

@@ -0,0 +1,76 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardHead = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const router_1 = require("next/router");
+const addCreationToFavoriteList_1 = __importDefault(require("@/components/favoriteList/add/addCreationToFavoriteList"));
+const CollectionCreationEntity_1 = __importDefault(require("@/dto/Collection/CollectionCreationEntity"));
+const ItemType_1 = require("@/dto/common/ItemType");
+const store_1 = require("@/modules/user/store");
+const env_1 = require("@/store/env");
+const ui_1 = require("@/store/ui");
+const ScreenWidth_1 = require("@/styles/ScreenWidth");
+const CardRank_1 = __importDefault(require("@/system/Cards/CardRank"));
+const Headicons_1 = __importDefault(require("@/system/Cards/Styles/Headicons"));
+const auth_1 = require("@/utils/auth");
+const screen_1 = require("@/utils/screen");
+const addToFavListIcon_svg_1 = __importDefault(require("@/public/cards/addToFavListIcon.svg"));
+const addToGalleryIcon_svg_1 = __importDefault(require("@/public/cards/addToGalleryIcon.svg"));
+const heart_svg_1 = __importDefault(require("@/public/cards/heart.svg"));
+// Component
+const CardHead = ({ creation, isRegularCard, isIconLiked, addLikeToCard, deleteLikeFromCard, isUserProfile, isDisabled, isShowCheckbox, currentMyGalleryId, }) => {
+    const redirectToLoginWindow = (0, auth_1.useRedirectToLoginWindow)();
+    const isProd = (0, env_1.useEnvStore)((state) => state.isProd);
+    const openModalSidebarPortal = (0, ui_1.useUiStore)((state) => state.openModalSidebarPortal);
+    const isSignedIn = (0, store_1.useUserStore)((state) => state.isSignedIn);
+    const isLicked = isIconLiked && isSignedIn;
+    const { windowDimensions } = (0, screen_1.useWindowDimensionsWithServerInitial)();
+    const isMobile = !!(windowDimensions?.windowWidth &&
+        windowDimensions.windowWidth <= ScreenWidth_1.ScreenWidth.DESKTOP);
+    const router = (0, router_1.useRouter)();
+    const isGallery = router.pathname.includes('gallery');
+    const handleClick = async (e, type) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!isSignedIn) {
+            redirectToLoginWindow();
+        }
+        else if (type === 'fav-list') {
+            openModalSidebarPortal((0, jsx_runtime_1.jsx)(addCreationToFavoriteList_1.default, { ids: [
+                    creation instanceof CollectionCreationEntity_1.default
+                        ? `${creation.getItemType() + '.' + creation.getCreationId()}`
+                        : creation.getCreationId(),
+                ], currentMyGalleryId: currentMyGalleryId }));
+        }
+        else if (type === 'likes') {
+            if (!isLicked) {
+                await addLikeToCard(creation instanceof CollectionCreationEntity_1.default &&
+                    creation.getItemType() !== ItemType_1.LabelKeys.collection
+                    ? creation.getCollectionCreationId()
+                    : creation.getItemId());
+            }
+            else {
+                await deleteLikeFromCard(creation instanceof CollectionCreationEntity_1.default &&
+                    creation.getItemType() !== ItemType_1.LabelKeys.collection
+                    ? creation.getCollectionCreationId()
+                    : creation.getItemId());
+            }
+        }
+    };
+    const renderLikeButton = () => {
+        if ([ItemType_1.LabelKeys.asset, ItemType_1.LabelKeys.collection].includes(creation.getItemType())) {
+            return ((0, jsx_runtime_1.jsx)("div", { className: `icon like ${isLicked ? 'liked' : ''}`, onClick: (e) => handleClick(e, 'likes'), children: (0, jsx_runtime_1.jsx)(heart_svg_1.default, {}) }));
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(Headicons_1.default, { isMobile: isMobile, style: isDisabled
+            ? {
+                pointerEvents: 'none',
+            }
+            : {}, children: [(0, jsx_runtime_1.jsx)("div", { className: 'rank', children: (0, jsx_runtime_1.jsx)(CardRank_1.default, { rank: creation.getRank() }) }), !isProd() && !isShowCheckbox && ((0, jsx_runtime_1.jsxs)("div", { className: "icons", children: [(0, jsx_runtime_1.jsx)("div", { className: "icon", onClick: (e) => handleClick(e, isRegularCard || !isUserProfile || isGallery
+                            ? 'fav-list'
+                            : 'gallery'), children: isRegularCard || !isUserProfile || isGallery ? ((0, jsx_runtime_1.jsx)(addToFavListIcon_svg_1.default, {})) : ((0, jsx_runtime_1.jsx)(addToGalleryIcon_svg_1.default, {})) }), renderLikeButton()] }))] }));
+};
+exports.CardHead = CardHead;

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

@@ -0,0 +1,28 @@
+import { searchSchema as schema } from '@ludo.ninja/api';
+import GalleryEntityV2 from '@/dto/GalleryEntityV2';
+import { TCreationAndCollection } from '@/modules/virtuoso/types';
+export type RemoveToolsType = {
+    gallery?: GalleryEntityV2;
+    removeFn: (itemType: 'asset' | 'collection') => void;
+};
+interface ICheckboxState {
+    isShowCheckbox?: boolean;
+    isActiveCheckbox?: boolean;
+    toggleCreationToGallery?: (creation: TCreationAndCollection) => void;
+}
+interface ICreationCard {
+    creationName?: string;
+    creation: TCreationAndCollection;
+    isNeedHeight: boolean;
+    likesDynamicInfo?: schema.IDynamicAssetData | schema.IDynamicCollectionData;
+    toolsForRemove?: RemoveToolsType | undefined;
+    isMobile: boolean;
+    isLoadingLikes?: boolean | undefined;
+    isNeedShowMoreButton?: boolean;
+    isUserProfile?: boolean;
+    isRegularCard?: boolean;
+    currentMyGalleryId?: false | string;
+}
+export declare const CreationCardWithCheckboxState: (props: ICreationCard) => import("react/jsx-runtime").JSX.Element;
+export declare const CreationCard: ({ creationName, creation, isNeedHeight, likesDynamicInfo, toolsForRemove, isMobile, isLoadingLikes, isNeedShowMoreButton, isUserProfile, isRegularCard, isShowCheckbox, isActiveCheckbox, toggleCreationToGallery, currentMyGalleryId, }: ICreationCard & ICheckboxState) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,124 @@
+"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.CreationCard = exports.CreationCardWithCheckboxState = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const link_1 = __importDefault(require("next/link"));
+const react_loading_skeleton_1 = __importDefault(require("react-loading-skeleton"));
+const styled_components_1 = __importStar(require("styled-components"));
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const env_1 = require("@/store/env");
+const ScreenWidth_1 = require("@/styles/ScreenWidth");
+const colors_1 = require("@/styles/colors");
+const boxShadow_1 = __importDefault(require("@/styles/mixins/boxShadow"));
+const boxTransform_1 = __importDefault(require("@/styles/mixins/boxTransform"));
+const system_1 = require("@/system");
+const CardCheckbox_1 = __importDefault(require("@/system/Cards/CardCheckbox"));
+const CardContent_1 = __importDefault(require("@/system/Cards/CardContent"));
+const CardCategory_1 = __importDefault(require("@/system/Cards/CardContent/CardCategory"));
+const CardLikes_1 = __importDefault(require("@/system/Cards/CardContent/CardLikes"));
+const CardHead_1 = require("@/system/Cards/CreationCard/CardHead");
+const Head_1 = __importDefault(require("@/system/Cards/Styles/Head"));
+const Headicons_1 = __importDefault(require("@/system/Cards/Styles/Headicons"));
+const likes_1 = __importDefault(require("@/hooks/likes"));
+const useToGalleryAsset_1 = require("@/modules/gallery/useToGalleryAsset");
+// Styles
+const StyledRegularCard = styled_components_1.default.div `
+  position: relative;
+  background-color: ${colors_1.WhiteColor};
+  border-radius: 6px;
+  ${boxShadow_1.default};
+  ${boxTransform_1.default};
+  // ${(props) => (props.isNeedTransform ? null : boxTransform_1.default)}
+
+  min-height: ${(props) => (props.isNeedHeight ? '346px' : '')};
+
+  ${(props) => props.isShowCheckbox
+    ? (0, styled_components_1.css) `
+          ${Headicons_1.default} {
+            transition: 0.2s opacity ease-in;
+            opacity: 1 !important;
+          }
+        `
+    : (0, styled_components_1.css) `
+          &:hover ${Headicons_1.default} {
+            transition: 0.2s opacity ease-in;
+            opacity: 1 !important;
+          }
+        `}
+  .linkRegularCard {
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+  }
+
+  ${ScreenWidth_1.mediaQuery.maxWidthTablet} {
+    width: 164px;
+    min-height: ${(props) => (props.isNeedHeight ? '258px' : '')};
+  }
+
+  ${ScreenWidth_1.mediaQuery.mobile} {
+    width: 154px;
+    min-height: ${(props) => (props.isNeedHeight ? '244px' : '')};
+  }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    border-radius: ${(0, _4k_1.adaptiveValueCalc)(6)};
+
+    min-height: ${(props) => props.isNeedHeight ? (0, _4k_1.adaptiveValueCalc)(346) : ''};
+  }
+`;
+// Component
+const CreationCardWithCheckboxState = (props) => {
+    const { toggleCreationToGallery, isActiveGalleryMode, creationsToGallery } = (0, useToGalleryAsset_1.useToGalleryStore)((state) => ({
+        toggleCreationToGallery: state.toggleCreationToGallery,
+        isActiveGalleryMode: state.isActiveGalleryMode,
+        creationsToGallery: state.creationsToGallery,
+    }));
+    return ((0, jsx_runtime_1.jsx)(exports.CreationCard, { ...props, isShowCheckbox: isActiveGalleryMode, isActiveCheckbox: (0, useToGalleryAsset_1.getIsActiveCreation)(creationsToGallery, props.creation), toggleCreationToGallery: toggleCreationToGallery }));
+};
+exports.CreationCardWithCheckboxState = CreationCardWithCheckboxState;
+const CreationCard = ({ creationName, creation, isNeedHeight, likesDynamicInfo, toolsForRemove, isMobile, isLoadingLikes, isNeedShowMoreButton, isUserProfile, isRegularCard = true, isShowCheckbox, isActiveCheckbox, toggleCreationToGallery, currentMyGalleryId, }) => {
+    const isProd = (0, env_1.useEnvStore)((state) => state.isProd);
+    const { likes, addLike, deleteLike } = (0, likes_1.default)({
+        defaultLikesCount: likesDynamicInfo?.likesNum || creation.getLikes(),
+        defaultIsLiked: likesDynamicInfo?.isLikedByUser || creation.getIsLiked(),
+        itemType: creation.getItemType(),
+        removeOnDislike: toolsForRemove,
+        isLoadingLikes,
+    });
+    // Todo cardLink
+    const isHide = isProd();
+    const HideLink = isHide ? react_1.default.Fragment : link_1.default;
+    return ((0, jsx_runtime_1.jsxs)(StyledRegularCard, { isNeedHeight: isNeedHeight, isNeedTransform: isNeedShowMoreButton, isShowCheckbox: isShowCheckbox, children: [isShowCheckbox && ((0, jsx_runtime_1.jsx)(CardCheckbox_1.default, { isActiveCheckbox: !!isActiveCheckbox, onChange: () => {
+                    toggleCreationToGallery?.(creation);
+                } })), (0, jsx_runtime_1.jsxs)(HideLink, { className: "linkRegularCard", href: creation.getCreationLink(), children: [(0, jsx_runtime_1.jsxs)(Head_1.default, { children: [creation.detectMediaType().displaySingleMedia(), (0, jsx_runtime_1.jsx)(CardHead_1.CardHead, { isRegularCard: !!isRegularCard, isIconLiked: likes.isLiked, creation: creation, addLikeToCard: addLike, deleteLikeFromCard: deleteLike, isUserProfile: isUserProfile || false, isDisabled: !!isLoadingLikes, isShowCheckbox: isShowCheckbox, currentMyGalleryId: currentMyGalleryId })] }), (0, jsx_runtime_1.jsx)(CardContent_1.default, { creationName: creationName, firstName: creation.getCreatorAddress(), secondName: creation.getName(), cuttedSecondName: creation.getCuttedSecondName(!isMobile), itemId: creation.getItemId(), isNeedShowMoreButton: isNeedShowMoreButton || false, href: creation.getCreationLink(), children: (0, jsx_runtime_1.jsxs)(system_1.Flex, { alignItems: "end", justifyContent: 'space-between', children: [(0, jsx_runtime_1.jsx)(CardCategory_1.default, { label: creation.getLabel() }), !isProd() &&
+                                    (isLoadingLikes ? ((0, jsx_runtime_1.jsx)(react_loading_skeleton_1.default, { style: { borderRadius: '3px' }, height: "100%", width: "30px" })) : ((0, jsx_runtime_1.jsx)(CardLikes_1.default, { isLiked: likes.isLiked, likes: likes.likesCount })))] }) })] })] }));
+};
+exports.CreationCard = CreationCard;

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

@@ -0,0 +1,9 @@
+import CollectionCreationEntity from '@/dto/Collection/CollectionCreationEntity';
+import CreationEntity from '@/dto/CreationEntity';
+import GalleryEntityV2 from '@/dto/GalleryEntityV2';
+declare const MultiMediaCard: ({ gallery, assets, collections, }: {
+    gallery: GalleryEntityV2;
+    assets: CreationEntity[] | null;
+    collections: CollectionCreationEntity[] | null;
+}) => import("react/jsx-runtime").JSX.Element;
+export default MultiMediaCard;