@ludo.ninja/components 2.3.6 → 2.3.8

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

@@ -0,0 +1,44 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
+const index_1 = __importDefault(require("./index"));
+describe('InviteLabel Component', () => {
+    test('renders with value and link', () => {
+        const props = {
+            value: 50,
+            link: '/invite/123',
+            loading: false,
+        };
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { ...props }));
+        const inviteText = react_1.screen.getByText('50 invites');
+        expect(inviteText).toBeInTheDocument();
+        const linkElement = react_1.screen.getByRole('link', { name: /50 invites/i });
+        expect(linkElement).toHaveAttribute('href', '/invite/123');
+    });
+    test('renders loading skeleton', () => {
+        const props = {
+            value: 0,
+            link: '/invite/123',
+            loading: true,
+        };
+        (0, react_1.render)((0, jsx_runtime_1.jsx)("div", { "data-testid": 'test_container', children: (0, jsx_runtime_1.jsx)(index_1.default, { ...props }) }));
+        const skeletonElement = react_1.screen
+            .getByTestId('test_container')
+            .querySelector('.react-loading-skeleton');
+        expect(skeletonElement).toBeInTheDocument();
+    });
+    test('does not render when value is falsy', () => {
+        const props = {
+            value: 0,
+            link: '/invite/123',
+            loading: false,
+        };
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { ...props }));
+        const inviteText = react_1.screen.queryByText('0 invites');
+        expect(inviteText).not.toBeInTheDocument();
+    });
+});

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

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

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

@@ -0,0 +1,44 @@
+"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 link_1 = __importDefault(require("next/link"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const boxShadow_1 = __importDefault(require("../../../styles/mixins/boxShadow"));
+const boxTransform_1 = __importDefault(require("../../../styles/mixins/boxTransform"));
+const SkeletonLabel_1 = __importDefault(require("../SkeletonLabel"));
+const vars_1 = require("../../../fonts/vars");
+// Styles
+const StyledExpTab = (0, styled_components_1.default)(link_1.default) `
+  ${boxShadow_1.default};
+  ${boxTransform_1.default};
+  display: flex;
+  user-select: none;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 5px 16px;
+  max-width: max-content;
+  min-width: 99px;
+  min-height: 32px;
+  border-radius: 24px;
+  background: ${({ theme }) => theme.colors?.inviteCodesGradientLabel?.gradient};
+
+  .value {
+    font-family: ${vars_1.poppinsFontVarCss.css};
+    font-size: 1.6em;
+    font-weight: 600;
+    line-height: 1.3;
+    color: ${({ theme }) => theme.colors?.inviteCodesGradientLabel?.color};
+  }
+`;
+//Component
+const InviteLabel = ({ value, link, loading, }) => {
+    if (loading)
+        return (0, jsx_runtime_1.jsx)(SkeletonLabel_1.default, {});
+    if (!value)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(StyledExpTab, { href: link, children: (0, jsx_runtime_1.jsx)("p", { className: `value `, children: `${value} invites` }) }));
+};
+exports.default = InviteLabel;

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

@@ -0,0 +1,2 @@
+import SkeletonLabel from '@ludo.ninja/ui/build/system/Labels/SkeletonLabel';
+export default SkeletonLabel;

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

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const SkeletonLabel_1 = __importDefault(require("@ludo.ninja/ui/build/system/Labels/SkeletonLabel"));
+exports.default = SkeletonLabel_1.default;

package/build/system/Modals/Modal/Modal.test.d.ts

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

package/build/system/Modals/Modal/Modal.test.js

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("@testing-library/jest-dom");
+const react_1 = require("@testing-library/react");
+const ui_1 = require("../../../store/ui");
+const index_1 = __importDefault(require("./index"));
+jest.mock('@/store/ui');
+describe('Modal Component', () => {
+    afterEach(react_1.cleanup);
+    test('open modal', () => {
+        const closeModalMock = jest.fn();
+        // Mock the useUiStore hook
+        ui_1.useUiStore.mockReturnValue({
+            contentModals: (0, jsx_runtime_1.jsx)("div", { children: "test open" }),
+            stylesModals: {},
+            isModalOpen: true,
+            closeModal: closeModalMock,
+        });
+        // Render the Modal component
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, {}));
+        // Check if the modal content is in the document
+        const labelElement = react_1.screen.getByText('test open');
+        expect(labelElement).toBeInTheDocument();
+        // Check if the close icon is in the document
+        const closeIcon = react_1.screen.getByAltText('close');
+        expect(closeIcon).toBeInTheDocument();
+        // Simulate click on the close icon
+        closeIcon.click();
+        // Verify that the closeModal function was called
+        expect(closeModalMock).toHaveBeenCalledTimes(1);
+    });
+});

package/build/system/Modals/Modal/index.d.ts

@@ -0,0 +1,2 @@
+declare const Modal: () => import("react/jsx-runtime").JSX.Element | null;
+export default Modal;

package/build/system/Modals/Modal/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 ui_1 = require("../../../store/ui");
+const ScreenWidth_1 = require("../../../styles/ScreenWidth");
+const colors_1 = require("../../../styles/colors");
+const z_indexes_1 = require("../../../styles/mixins/z-indexes");
+const constants_1 = require("@ludo.ninja/core/build/constants");
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const styled_components_1 = __importDefault(require("styled-components"));
+const StyledModal = styled_components_1.default.div `
+  min-height: 250px;
+  min-width: 300px;
+  width: auto;
+  z-index: ${z_indexes_1.zIndexModal.toString()};
+  padding: 16px;
+  background-color: ${colors_1.WhiteColor};
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 8px;
+
+  @media (max-width: 767px) {
+    //top: 20%;
+    //left: 0;
+    //right: 0;
+    //transform: none;
+    //margin: auto;
+    max-width: 320px;
+    max-height: calc(var(--app-height) - 20px);
+    overflow: hidden;
+    .modalContent {
+      max-height: calc(var(--app-height) - 20px - 16px - 16px - 24px);
+      overflow-y: auto;
+    }
+  }
+
+  .modalCloseIcon {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    cursor: pointer;
+  }
+
+  .modalContent {
+    margin-top: 24px;
+  }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    min-height: ${(0, _4k_1.adaptiveValueCalc)(250)};
+    min-width: ${(0, _4k_1.adaptiveValueCalc)(300)};
+    padding: ${(0, _4k_1.adaptiveValueCalc)(16)};
+    border-radius: ${(0, _4k_1.adaptiveValueCalc)(8)};
+
+    .modalCloseIcon {
+      width: ${(0, _4k_1.adaptiveValueCalc)(24)};
+      height: ${(0, _4k_1.adaptiveValueCalc)(24)};
+      top: ${(0, _4k_1.adaptiveValueCalc)(16)};
+      right: ${(0, _4k_1.adaptiveValueCalc)(16)};
+    }
+
+    .modalContent {
+      margin-top: ${(0, _4k_1.adaptiveValueCalc)(24)};
+    }
+  }
+`;
+const Modal = () => {
+    const { contentModals, isModalOpen, closeModal, stylesModals } = (0, ui_1.useUiStore)((state) => ({
+        contentModals: state.contentModals,
+        stylesModals: state.stylesModals,
+        isModalOpen: state.isModalOpen,
+        closeModal: state.closeModal,
+    }));
+    if (!isModalOpen)
+        return null;
+    return ((0, jsx_runtime_1.jsxs)(StyledModal, { style: stylesModals ? stylesModals : undefined, children: [(0, jsx_runtime_1.jsx)("img", { src: `${constants_1.staticLink}/public/modal/close.svg`, alt: "close", width: 24, height: 24, className: "modalCloseIcon", onClick: closeModal }), (0, jsx_runtime_1.jsx)("div", { className: "modalContent", children: contentModals })] }));
+};
+exports.default = Modal;

package/build/system/Modals/ModalSidebar/CreatorModalSidebarPortal.d.ts

@@ -0,0 +1 @@
+export declare const CreatorModalSidebarPortal: () => import("react/jsx-runtime").JSX.Element | null;

package/build/system/Modals/ModalSidebar/CreatorModalSidebarPortal.js

@@ -0,0 +1,47 @@
+"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.CreatorModalSidebarPortal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const dynamic_1 = __importDefault(require("next/dynamic"));
+const ui_1 = require("../../../store/ui");
+// add first load chunk when component needed
+const ModalSidebarPortal = (0, dynamic_1.default)(() => Promise.resolve().then(() => __importStar(require('./ModalSidebarPortal'))).then((_) => _.ModalSidebarPortal));
+// minimize dom tree for optimize virtualization
+const CreatorModalSidebarPortal = () => {
+    const { isOpenModalSidebarPortal, closeModalSidebarPortal, contentModals } = (0, ui_1.useUiStore)((state) => ({
+        isOpenModalSidebarPortal: state.isOpenModalSidebarPortal,
+        closeModalSidebarPortal: state.closeModalSidebarPortal,
+        contentModals: state.contentModals,
+    }));
+    if (!isOpenModalSidebarPortal) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(ModalSidebarPortal, { closeModal: closeModalSidebarPortal, component: contentModals }));
+};
+exports.CreatorModalSidebarPortal = CreatorModalSidebarPortal;

package/build/system/Modals/ModalSidebar/ModalSidebar.test.d.ts

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

package/build/system/Modals/ModalSidebar/ModalSidebar.test.js

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("@testing-library/jest-dom");
+const react_1 = require("@testing-library/react");
+const ui_1 = require("../../../store/ui");
+const index_1 = __importDefault(require("./index"));
+jest.mock('@/store/ui');
+describe('Modal Component', () => {
+    afterEach(react_1.cleanup);
+    test('open modal', () => {
+        const closeModalMock = jest.fn();
+        // Mock the useUiStore hook
+        ui_1.useUiStore.mockReturnValue({
+            contentModals: (0, jsx_runtime_1.jsx)("div", { children: "test open" }),
+            isModalSidebarOpen: true,
+            closeModalSidebar: closeModalMock,
+        });
+        // Render the Modal component
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, {}));
+        // Check if the modal content is in the document
+        const labelElement = react_1.screen.getByText('test open');
+        expect(labelElement).toBeInTheDocument();
+        // Check if the close icon is in the document
+        const closeIcon = react_1.screen.getByAltText('close');
+        expect(closeIcon).toBeInTheDocument();
+        // Simulate click on the close icon
+        closeIcon.click();
+        // Verify that the closeModal function was called
+        expect(closeModalMock).toHaveBeenCalledTimes(1);
+    });
+});

package/build/system/Modals/ModalSidebar/ModalSidebarPortal.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from "react";
+export declare const ModalSidebarPortal: ({ component, closeModal }: {
+    component: ReactNode;
+    closeModal: () => void;
+}) => import("react/jsx-runtime").JSX.Element;

package/build/system/Modals/ModalSidebar/ModalSidebarPortal.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalSidebarPortal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const index_1 = require("./index");
+const constants_1 = require("@ludo.ninja/core/build/constants");
+const utils_1 = require("@ludo.ninja/utils");
+// minimize dom tree for optimize virtualization
+const ModalSidebarPortal = ({ component, closeModal }) => ((0, jsx_runtime_1.jsx)(utils_1.PortalCreator, { children: (0, jsx_runtime_1.jsxs)(index_1.StyledModalSidebar, { children: [(0, jsx_runtime_1.jsx)("img", { src: `${constants_1.staticLink}/public/modal/close.svg`, alt: "close", width: 24, height: 24, className: "modalCloseIcon", onClick: closeModal }), (0, jsx_runtime_1.jsx)("div", { className: "modalContent", children: component })] }) }));
+exports.ModalSidebarPortal = ModalSidebarPortal;

package/build/system/Modals/ModalSidebar/index.d.ts

@@ -0,0 +1,3 @@
+export declare const StyledModalSidebar: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+declare const ModalSidebar: () => import("react/jsx-runtime").JSX.Element | null;
+export default ModalSidebar;

package/build/system/Modals/ModalSidebar/index.js

@@ -0,0 +1,78 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledModalSidebar = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ui_1 = require("../../../store/ui");
+const ScreenWidth_1 = require("../../../styles/ScreenWidth");
+const colors_1 = require("../../../styles/colors");
+const z_indexes_1 = require("../../../styles/mixins/z-indexes");
+const constants_1 = require("@ludo.ninja/core/build/constants");
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.StyledModalSidebar = styled_components_1.default.div `
+  min-height: 300px;
+  //max-width: 536px;
+  z-index: ${z_indexes_1.zIndexModal.toString()};
+  padding: 24px;
+  background-color: ${colors_1.WhiteColor};
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 8px;
+
+  @media (max-width: 767px) {
+    padding: 32px;
+    border-radius: 0;
+    max-width: none;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    transform: none;
+  }
+
+  .modalCloseIcon {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    cursor: pointer;
+  }
+
+  .modalContent {
+    margin-top: 24px;
+  }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    min-height: ${(0, _4k_1.adaptiveValueCalc)(300)};
+    padding: ${(0, _4k_1.adaptiveValueCalc)(24)};
+    border-radius: ${(0, _4k_1.adaptiveValueCalc)(8)};
+
+    .modalCloseIcon {
+      width: ${(0, _4k_1.adaptiveValueCalc)(24)};
+      height: ${(0, _4k_1.adaptiveValueCalc)(24)};
+      top: ${(0, _4k_1.adaptiveValueCalc)(16)};
+      right: ${(0, _4k_1.adaptiveValueCalc)(16)};
+    }
+
+    .modalContent {
+      margin-top: ${(0, _4k_1.adaptiveValueCalc)(24)};
+    }
+  }
+`;
+const ModalSidebar = () => {
+    const { contentModals, isModalSidebarOpen, closeModalSidebar } = (0, ui_1.useUiStore)((state) => ({
+        contentModals: state.contentModals,
+        isModalSidebarOpen: state.isModalSidebarOpen,
+        closeModalSidebar: state.closeModalSidebar,
+    }));
+    if (!isModalSidebarOpen)
+        return null;
+    return ((0, jsx_runtime_1.jsxs)(exports.StyledModalSidebar, { children: [(0, jsx_runtime_1.jsx)("img", { src: `${constants_1.staticLink}/public/modal/close.svg`, alt: "close", width: 24, height: 24, className: "modalCloseIcon", onClick: closeModalSidebar }), (0, jsx_runtime_1.jsx)("div", { className: "modalContent", children: contentModals })] }));
+};
+exports.default = ModalSidebar;

package/build/system/Overlay/Overlay.test.d.ts

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

package/build/system/Overlay/Overlay.test.js

@@ -0,0 +1,44 @@
+"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 ui_1 = require("../../store/ui");
+const index_1 = __importDefault(require("./index"));
+// Mocking dependencies
+jest.mock('@/store/ui');
+describe('Overlay Component', () => {
+    const mockCloseOverlay = jest.fn();
+    const mockUseUiStore = {
+        closeOverlay: mockCloseOverlay,
+        isOverlayActive: false,
+    };
+    const renderComponent = () => (0, react_1.render)((0, jsx_runtime_1.jsx)("div", { "data-testid": 'dialog', children: (0, jsx_runtime_1.jsx)(index_1.default, {}) }));
+    beforeEach(() => {
+        ui_1.useUiStore.mockReturnValue(mockUseUiStore);
+    });
+    test('renders overlay with hidden visibility by default', () => {
+        renderComponent();
+        const overlay = react_1.screen.getByTestId('dialog').children[0];
+        expect(overlay).toHaveStyle('visibility: hidden');
+        const blurDiv = overlay.querySelector('.blur');
+        expect(blurDiv).toHaveStyle('visibility: hidden');
+    });
+    test('renders overlay with visible visibility when active', () => {
+        mockUseUiStore.isOverlayActive = true;
+        renderComponent();
+        const overlay = react_1.screen.getByTestId('dialog').children[0];
+        expect(overlay).toHaveStyle('visibility: visible');
+        const blurDiv = overlay.querySelector('.blur');
+        expect(blurDiv).toHaveStyle('visibility: visible');
+    });
+    test('calls closeOverlay when clicked', () => {
+        renderComponent();
+        const overlay = react_1.screen.getByTestId('dialog').children[0];
+        react_1.fireEvent.click(overlay);
+        expect(mockCloseOverlay).toHaveBeenCalled();
+    });
+});

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

@@ -0,0 +1,2 @@
+declare const Overlay: () => import("react/jsx-runtime").JSX.Element;
+export default Overlay;

package/build/system/Overlay/index.js

@@ -0,0 +1,41 @@
+"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 ui_1 = require("../../store/ui");
+const colors_1 = require("../../styles/colors");
+const z_indexes_1 = require("../../styles/mixins/z-indexes");
+// Styles
+const StyledOverlay = styled_components_1.default.div `
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: ${z_indexes_1.zIndexOverlay.toString()};
+  backdrop-filter: blur(10px);
+  height: var(--app-height);
+  width: 100%;
+  cursor: pointer;
+  visibility: ${(props) => (props.isActive ? 'visible' : 'hidden')};
+
+  .blur {
+    height: 100%;
+    width: 100%;
+    background-color: ${colors_1.BlackColor};
+    opacity: ${(props) => (props.isActive ? 0.6 : 0)};
+    visibility: ${(props) => (props.isActive ? 'visible' : 'hidden')};
+    transition: 0.2s all;
+  }
+`;
+// Component
+const Overlay = () => {
+    const { closeOverlay, isOverlayActive } = (0, ui_1.useUiStore)((state) => ({
+        closeOverlay: state.closeOverlay,
+        isOverlayActive: state.isOverlayActive,
+    }));
+    return ((0, jsx_runtime_1.jsx)(StyledOverlay, { isActive: isOverlayActive, onClick: closeOverlay, children: (0, jsx_runtime_1.jsx)("div", { className: 'blur' }) }));
+};
+// Export
+exports.default = Overlay;

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

@@ -0,0 +1,2 @@
+import PageLoader from '@ludo.ninja/ui/build/system/PageLoader';
+export default PageLoader;

package/build/system/PageLoader/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const PageLoader_1 = __importDefault(require("@ludo.ninja/ui/build/system/PageLoader"));
+exports.default = PageLoader_1.default;

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

@@ -0,0 +1,2 @@
+import Palete from '@ludo.ninja/ui/build/system/Palete';
+export default Palete;

package/build/system/Palete/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const Palete_1 = __importDefault(require("@ludo.ninja/ui/build/system/Palete"));
+exports.default = Palete_1.default;

package/build/system/ShareIconResize.d.ts

@@ -0,0 +1 @@
+export declare const ShareIconResize: () => import("react/jsx-runtime").JSX.Element;

package/build/system/ShareIconResize.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ShareIconResize = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ScreenWidth_1 = require("../styles/ScreenWidth");
+const constants_1 = require("@ludo.ninja/core/build/constants");
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const styled_components_1 = __importDefault(require("styled-components"));
+const SIcon = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-image: url("${constants_1.staticLink}/iconButton/share.svg");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+  width: 19px;
+  height: 20px;
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    width: ${(0, _4k_1.adaptiveValueCalc)(19)};
+    height: ${(0, _4k_1.adaptiveValueCalc)(20)};
+  }
+`;
+const ShareIconResize = () => {
+    return (0, jsx_runtime_1.jsx)(SIcon, {});
+};
+exports.ShareIconResize = ShareIconResize;

package/build/system/Tabs/TabNavLink/TabNavLink.test.d.ts

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

package/build/system/Tabs/TabNavLink/TabNavLink.test.js

@@ -0,0 +1,40 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("@testing-library/jest-dom/extend-expect");
+const react_1 = require("@testing-library/react");
+require("jest-styled-components");
+const colors_1 = require("../../../styles/colors");
+const index_1 = __importDefault(require("./index"));
+// Mock data
+const tabNavLink = { label: 'Tab 1', value: 'tab1', id: 1 };
+const setActiveTab = jest.fn();
+describe('TabsNavLink Component', () => {
+    test('renders tab link with correct label', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { tabNavLink: tabNavLink, activeNavLink: false }));
+        const tabLink = react_1.screen.getByText('Tab 1');
+        expect(tabLink).toBeInTheDocument();
+        expect(tabLink).toHaveStyleRule('color', colors_1.TextDarkGrayColor);
+        expect(tabLink).toHaveStyleRule('transform', 'scaleX(0)', {
+            modifier: '&:before',
+        });
+    });
+    test('renders tab link with active style', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { tabNavLink: tabNavLink, activeNavLink: true }));
+        const tabLink = react_1.screen.getByText('Tab 1');
+        expect(tabLink).toBeInTheDocument();
+        expect(tabLink).toHaveStyleRule('color', colors_1.BlackColor);
+        expect(tabLink).toHaveStyleRule('transform', 'scaleX(1)', {
+            modifier: '&:before',
+        });
+    });
+    test('calls setActiveTab when clicked', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { tabNavLink: tabNavLink, activeNavLink: false, setActiveTab: setActiveTab }));
+        const tabLink = react_1.screen.getByText('Tab 1');
+        react_1.fireEvent.click(tabLink);
+        expect(setActiveTab).toHaveBeenCalledWith(tabNavLink);
+    });
+});

package/build/system/Tabs/TabNavLink/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { TabsNavType } from '../TabsNav/type';
+export declare const StyledTabsNavLink: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    isActive: boolean;
+}, never>;
+interface Props {
+    tabNavLink: TabsNavType;
+    activeNavLink: boolean;
+    setActiveTab?: (tab: TabsNavType) => void;
+}
+declare const TabsNavLink: React.FC<Props>;
+export default TabsNavLink;