@ludo.ninja/components 2.1.7 → 2.1.9

package/build/styles/globalStyles.js

@@ -13,6 +13,8 @@ const GlobalStyle = (0, styled_components_1.createGlobalStyle) `
 
   button {
     cursor: pointer;
+    box-sizing: border-box;
+    font-family: inherit;
   }
 
   html {
@@ -47,6 +49,7 @@ const GlobalStyle = (0, styled_components_1.createGlobalStyle) `
 
   a {
     text-decoration: none;
+    color: rgba(13, 110, 253, var(--bs-link-opacity, 1));
   }
 
   .modal-dialog {

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

@@ -5,12 +5,12 @@ export type RemoveToolsType = {
     gallery?: GalleryEntityV2;
     removeFn: (itemType: "asset" | "collection") => void;
 };
-interface ICheckboxState {
+export interface ICheckboxState {
     isShowCheckbox?: boolean;
     isActiveCheckbox?: boolean;
     toggleCreationToGallery?: (creation: TCreationAndCollection) => void;
 }
-interface ICreationCard {
+export interface ICreationCard {
     creationName?: string;
     creation: TCreationAndCollection;
     isNeedHeight: boolean;
@@ -23,6 +23,4 @@ interface ICreationCard {
     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

@@ -26,7 +26,7 @@ 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;
+exports.CreationCard = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importDefault(require("react"));
 const link_1 = __importDefault(require("next/link"));
@@ -47,7 +47,6 @@ const CardHead_1 = require("./CardHead");
 const Head_1 = __importDefault(require("../Styles/Head"));
 const Headicons_1 = __importDefault(require("../Styles/Headicons"));
 const likes_1 = __importDefault(require("../../../hooks/likes"));
-const useToGalleryAsset_1 = require("../../../modules/gallery/useToGalleryAsset");
 const ItemType_1 = require("../../../dto/common/ItemType");
 const ludoDomains_1 = require("@ludo.ninja/core/build/ludoDomains");
 // Styles
@@ -97,15 +96,6 @@ const StyledRegularCard = styled_components_1.default.div `
   }
 `;
 // 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 NEXT_PUBLIC_ENV_VALUE = (0, env_1.useEnvStore)((state) => state.NEXT_PUBLIC_ENV_VALUE);

package/build/system/Forms/DatePicker/DatePicker.test.d.ts

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

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

@@ -0,0 +1,39 @@
+"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 react_hook_form_1 = require("react-hook-form");
+const index_1 = __importDefault(require("./index"));
+jest.mock('../ErrorLabel', () => ({
+    __esModule: true,
+    default: ({ children }) => ((0, jsx_runtime_1.jsx)("div", { "data-testid": "error-label", children: children })),
+}));
+jest.mock('@/public/calendar.svg', () => 'div');
+jest.mock('@/public/close20.svg', () => 'div');
+const mockRegister = {
+    name: 'test-datepicker',
+    onBlur: jest.fn(),
+    onChange: jest.fn(),
+    ref: jest.fn(),
+};
+const renderComponent = (error) => {
+    const { result } = (0, react_1.renderHook)(() => (0, react_hook_form_1.useForm)());
+    return (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { register: mockRegister, error: error, control: result.current.control, name: mockRegister.name }));
+};
+describe('DatePicker Component', () => {
+    test('renders DatePicker with correct attributes', () => {
+        renderComponent({ isNeedShowError: false, message: '' });
+        const datepickerElement = react_1.screen.getByTestId('date-picker');
+        expect(datepickerElement).toBeInTheDocument();
+    });
+    test('renders error label when there is an error', () => {
+        renderComponent({ isNeedShowError: true, message: 'Error message' });
+        const errorLabel = react_1.screen.getByTestId('error-label');
+        expect(errorLabel).toBeInTheDocument();
+        expect(errorLabel).toHaveTextContent('Error message');
+    });
+});

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

@@ -133,6 +133,6 @@ const DatePicker = ({ name, control, error }) => {
             return (0, jsx_runtime_1.jsx)(ErrorLabel_1.default, { children: error.message });
         }
     };
-    return ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: name, control: control, render: ({ field }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(StyledReactDatePicker, { onChange: field.onChange, onBlur: field.onBlur, value: field.value, disableCalendar: field.disabled, name: field.name, status: error.isNeedShowError, dayPlaceholder: 'dd', monthPlaceholder: 'mm', yearPlaceholder: 'yy', format: 'dd.MM.yyyy', locale: 'en', clearIcon: field.value ? (0, jsx_runtime_1.jsx)(close20_svg_1.default, {}) : null, calendarIcon: (0, jsx_runtime_1.jsx)(calendar_svg_1.default, {}) }), renderError()] })) }));
+    return ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: name, control: control, render: ({ field }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(StyledReactDatePicker, { onChange: field.onChange, onBlur: field.onBlur, value: field.value, disableCalendar: field.disabled, name: field.name, status: error.isNeedShowError, dayPlaceholder: 'dd', monthPlaceholder: 'mm', yearPlaceholder: 'yy', format: 'dd.MM.yyyy', locale: 'en', clearIcon: field.value ? (0, jsx_runtime_1.jsx)(close20_svg_1.default, {}) : null, calendarIcon: (0, jsx_runtime_1.jsx)(calendar_svg_1.default, {}), "data-testid": 'date-picker' }), renderError()] })) }));
 };
 exports.default = DatePicker;

package/build/system/Forms/RadioInput/RadioInput.test.d.ts

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

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

@@ -0,0 +1,62 @@
+"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 index_1 = __importDefault(require("./index"));
+const mockData = {
+    value: 'test-radio-input',
+    label: 'Test RadioInput',
+    onChange: jest.fn(),
+    setFocus: jest.fn(),
+    className: 'test-radio-input-class',
+};
+const renderComponent = (options) => {
+    return (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { radioLabel: mockData.label, radioValue: mockData.value, handleChange: mockData.onChange, radioChecked: options?.checked ?? true, className: mockData.className, innerTextInputRef: options?.innerTextInputRef, withInput: options?.withInput, setFocus: mockData.setFocus }));
+};
+describe('RadioInput Component', () => {
+    test('renders radio input element with correct attributes', () => {
+        renderComponent();
+        const inputElement = react_1.screen.getByLabelText(mockData.label);
+        expect(inputElement).toBeInTheDocument();
+        expect(inputElement.value).toBe('test-radio-input');
+        expect(inputElement.parentNode).toHaveClass(mockData.className);
+    });
+    test('calls onChange when radio input is changed', () => {
+        renderComponent({ checked: false });
+        const radioInput = react_1.screen.getByRole('radio');
+        react_1.fireEvent.click(radioInput);
+        expect(mockData.onChange).toHaveBeenCalledTimes(1);
+        expect(mockData.onChange).toHaveBeenCalledWith(mockData.value);
+    });
+    test('renders radio input with input field', () => {
+        const innerTextInputRef = {
+            name: 'test-input',
+            onBlur: jest.fn(),
+            onChange: jest.fn(),
+            ref: jest.fn(),
+        };
+        renderComponent({ innerTextInputRef, withInput: true });
+        const textInput = react_1.screen.getByRole('textbox');
+        expect(textInput).toBeInTheDocument();
+    });
+    test('sets focus on input field when radio input is changed and withInput is true', () => {
+        const innerTextInputRef = {
+            name: 'test-input',
+            onBlur: jest.fn(),
+            onChange: jest.fn(),
+            ref: jest.fn(),
+        };
+        renderComponent({ innerTextInputRef, withInput: true });
+        const radioInput = react_1.screen.getByRole('radio');
+        react_1.fireEvent.click(radioInput);
+        (0, react_1.waitFor)(() => {
+            expect(innerTextInputRef.onBlur).toHaveBeenCalledTimes(1);
+            expect(mockData.setFocus).toHaveBeenCalledTimes(1);
+            expect(mockData.setFocus).toHaveBeenCalledWith(innerTextInputRef.name);
+        });
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ludo.ninja/components",
-  "version": "2.1.7",
+  "version": "2.1.9",
   "private": false,
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -24,7 +24,6 @@
     "@marker.io/browser": "^0.19.0",
     "@react-three/drei": "^9.68.3",
     "@react-three/fiber": "^8.13.0",
-    "bootstrap": "^5.2.3",
     "chart.js": "^4.4.3",
     "framer-motion": "^10.16.16",
     "glob": "^11.0.0",
@@ -40,7 +39,6 @@
     "prettier": "^2.7.1",
     "qs": "^6.12.1",
     "react": "^18.3.1",
-    "react-bootstrap": "^2.7.0",
     "react-cropper": "^2.1.8",
     "react-date-picker": "^11.0.0",
     "react-device-detect": "^2.2.3",