@ludo.ninja/components 2.1.12 → 2.1.14

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

@@ -4,65 +4,57 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
 const styled_components_1 = __importDefault(require("styled-components"));
 const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
 const ScreenWidth_1 = require("../../../styles/ScreenWidth");
 const colors_1 = require("../../../styles/colors");
 // Styles
-const StyledCardCheckBox = styled_components_1.default.div `
+const StyledCardCheckBox = styled_components_1.default.button `
+  display: flex;
+  padding: 0;
+  margin: 0;
+  border: unset;
+  background: unset;
   position: absolute;
   top: 16px;
   right: 16px;
   z-index: 10;
 
-  .cardCheckboxLabel {
+  .cardCustomCheckbox {
     cursor: pointer;
-    -webkit-tap-highlight-color: transparent;
+    width: 32px;
+    height: 32px;
+    border: 2px solid ${colors_1.WhiteColor};
+    background-color: #12183a33;
+    border-radius: 50%;
+    display: inline-block;
 
-    .cardCheckboxInput {
-      margin: 0;
-      visibility: hidden;
-
-      &:checked + span {
-        border: none;
-      }
-
-      &:checked + span:after {
-        opacity: 1;
-      }
+    &.active::after {
+      opacity: 1;
     }
 
-    .cardCustomCheckbox {
-      cursor: pointer;
+    &::after {
+      content: '';
+      display: block;
+      background-image: url('/forms/checkbox/checked.svg');
+      background-size: cover;
+      background-repeat: no-repeat;
       width: 32px;
       height: 32px;
-      border: 2px solid ${colors_1.WhiteColor};
-      background-color: #12183a33;
-      border-radius: 50%;
-      display: inline-block;
-      position: relative;
+      opacity: 0;
+      transition: opacity 0.2s;
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
 
-      &::after {
-        content: '';
-        display: block;
-        background-image: url('/forms/checkbox/checked.svg');
-        background-size: cover;
-        background-repeat: no-repeat;
-        width: 32px;
-        height: 32px;
-        opacity: 0;
-        transition: opacity 0.2s;
-      }
+    @media (max-width: 767px) {
+      width: 24px;
+      height: 24px;
 
-      @media (max-width: 767px) {
+      &::after {
         width: 24px;
         height: 24px;
-
-        &::after {
-          width: 24px;
-          height: 24px;
-        }
       }
     }
   }
@@ -70,27 +62,27 @@ const StyledCardCheckBox = styled_components_1.default.div `
   ${ScreenWidth_1.mediaQuery.minWidthFourK} {
     top: ${(0, _4k_1.adaptiveValueCalc)(16)};
     right: ${(0, _4k_1.adaptiveValueCalc)(16)};
-    .cardCheckboxLabel {
-      .cardCustomCheckbox {
+
+    .cardCustomCheckbox {
+      width: ${(0, _4k_1.adaptiveValueCalc)(32)};
+      height: ${(0, _4k_1.adaptiveValueCalc)(32)};
+      border-width: ${(0, _4k_1.adaptiveValueCalc)(2)};
+
+      &::after {
         width: ${(0, _4k_1.adaptiveValueCalc)(32)};
         height: ${(0, _4k_1.adaptiveValueCalc)(32)};
-        border-width: ${(0, _4k_1.adaptiveValueCalc)(2)};
-        &::after {
-          width: ${(0, _4k_1.adaptiveValueCalc)(32)};
-          height: ${(0, _4k_1.adaptiveValueCalc)(32)};
-        }
       }
     }
   }
 `;
 // Component
 const CardCheckBox = ({ isActiveCheckbox, onChange, }) => {
-    const id = (0, react_1.useId)();
     return ((0, jsx_runtime_1.jsx)(StyledCardCheckBox, { onClick: (e) => {
-            console.log("StyledCardCheckBox click");
+            console.log('StyledCardCheckBox click');
             e.preventDefault();
             e.stopPropagation();
-        }, children: (0, jsx_runtime_1.jsxs)("label", { htmlFor: id, className: "cardCheckboxLabel", children: [(0, jsx_runtime_1.jsx)("input", { className: "cardCheckboxInput", type: "checkbox", name: 'checkbox', id: id, onChange: onChange, checked: isActiveCheckbox }), (0, jsx_runtime_1.jsx)("span", { className: "cardCustomCheckbox" })] }) }));
+            onChange();
+        }, children: (0, jsx_runtime_1.jsx)("span", { className: `cardCustomCheckbox ${isActiveCheckbox ? 'active' : ''}` }) }));
 };
 // Export
 exports.default = CardCheckBox;

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

@@ -39,7 +39,6 @@ const colors_1 = require("../../../styles/colors");
 const boxShadow_1 = __importDefault(require("../../../styles/mixins/boxShadow"));
 const boxTransform_1 = __importDefault(require("../../../styles/mixins/boxTransform"));
 const index_1 = require("../../index");
-// import CardCheckBox from "@/system/Cards/CardCheckbox";
 const CardContent_1 = __importDefault(require("../CardContent"));
 const CardCategory_1 = __importDefault(require("../CardContent/CardCategory"));
 const CardLikes_1 = __importDefault(require("../CardContent/CardLikes"));

package/build/system/Cards/Styles/Headicons.js

@@ -13,6 +13,7 @@ const StyledHeadIcons = styled_components_1.default.div `
   opacity: 0;
 
   &:before {
+    pointer-events: none;
     content: '';
     position: absolute;
     top: 0;

package/build/system/Img/Userpic/UserPic.test.js

@@ -10,12 +10,14 @@ require("jest-styled-components");
 const store_1 = require("../../../modules/user/store");
 const index_1 = __importDefault(require("./index"));
 const useFetchUserPic_1 = __importDefault(require("../../../api/server-medias/queries/useFetchUserPic"));
+const env_1 = require("../../../store/env");
 jest.mock('@/modules/user/store');
 jest.mock('@/api/server-medias/queries/useFetchUserPic');
 jest.mock('@/utils/env', () => ({
     getMediaENVDomain: jest.fn().mockReturnValue('https://media.ludo.ninja'),
 }));
 jest.mock('@/public/defaultUserpics/defaultUserpic.svg', () => 'div');
+jest.mock('@/store/env');
 describe('UserPic Component', () => {
     beforeEach(() => {
         store_1.useUserStore.mockReturnValue({
@@ -23,6 +25,7 @@ describe('UserPic Component', () => {
             isLoadingProfileData: false,
             profileData: null,
         });
+        env_1.useEnvStore.mockReturnValue(jest.fn());
         useFetchUserPic_1.default.mockReturnValue({
             load: jest.fn(),
             userPic: 'fetched-user-pic.svg',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ludo.ninja/components",
-  "version": "2.1.12",
+  "version": "2.1.14",
   "private": false,
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -17,6 +17,8 @@
     "check-format": "prettier --check .",
     "check-lint": "eslint . --ext ts --ext tsx --ext js",
     "lint": "npm run check-format && npm run check-lint && npm run check-types && npm run test && npm run build",
+    "test": "jest",
+    "test:watch": "jest --watch",
     "build": "npm run check-types && npm run build:tsc && npm run svgPublic && npm run replaceImports",
     "publish": "npm publish --access public -workspace @ludo.ninja/components"
   },

package/build/system/Cards/CardCheckbox/CardCheckbox.test.d.ts

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

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

@@ -1,35 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-require("@testing-library/jest-dom/extend-expect");
-const react_1 = require("@testing-library/react");
-const index_1 = __importDefault(require("./index"));
-const getCheckbox = () => react_1.screen.getByTestId('container')?.children[0].querySelector('input');
-describe('CardCheckBox Component', () => {
-    const handleChange = jest.fn();
-    const renderComponent = (isActiveCheckbox = false) => {
-        return (0, react_1.render)((0, jsx_runtime_1.jsx)("div", { "data-testid": 'container', children: (0, jsx_runtime_1.jsx)(index_1.default, { isActiveCheckbox: isActiveCheckbox, onChange: handleChange }) }));
-    };
-    test('renders the checkbox correctly', () => {
-        renderComponent(false);
-        const checkbox = getCheckbox();
-        expect(checkbox).toBeInTheDocument();
-        expect(checkbox).not.toBeChecked();
-    });
-    test('checkbox toggles state on click', () => {
-        const { rerender } = renderComponent(false);
-        const checkbox = getCheckbox();
-        expect(checkbox).not.toBeChecked();
-        rerender((0, jsx_runtime_1.jsx)("div", { "data-testid": 'container', children: (0, jsx_runtime_1.jsx)(index_1.default, { isActiveCheckbox: true, onChange: handleChange }) }));
-        expect(checkbox).toBeChecked();
-    });
-    test('calls onChange callback when clicked', () => {
-        renderComponent(false);
-        const checkbox = getCheckbox();
-        react_1.fireEvent.click(checkbox);
-        expect(handleChange).toHaveBeenCalledTimes(1);
-    });
-});