@ludo.ninja/components 1.7.4 → 1.7.6

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

@@ -0,0 +1,51 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 });
+var react_1 = __importStar(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+var ScreenWidth_1 = require("@/styles/ScreenWidth");
+var colors_1 = require("@/styles/colors");
+// Styles
+var StyledCardCheckBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  top: 16px;\n  right: 16px;\n  z-index: 1;\n\n  .cardCheckboxLabel {\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n\n    .cardCheckboxInput {\n      margin: 0;\n      visibility: hidden;\n\n      &:checked + span {\n        border: none;\n      }\n\n      &:checked + span:after {\n        opacity: 1;\n      }\n    }\n\n    .cardCustomCheckbox {\n      cursor: pointer;\n      width: 32px;\n      height: 32px;\n      border: 2px solid ", ";\n      background-color: #12183a33;\n      border-radius: 50%;\n      display: inline-block;\n      position: relative;\n\n      &::after {\n        content: '';\n        display: block;\n        background-image: url('/forms/checkbox/checked.svg');\n        background-size: cover;\n        background-repeat: no-repeat;\n        width: 32px;\n        height: 32px;\n        opacity: 0;\n        transition: opacity 0.2s;\n      }\n\n      @media (max-width: 767px) {\n        width: 24px;\n        height: 24px;\n\n        &::after {\n          width: 24px;\n          height: 24px;\n        }\n      }\n    }\n  }\n\n  ", " {\n    top: ", ";\n    right: ", ";\n    .cardCheckboxLabel {\n      .cardCustomCheckbox {\n        width: ", ";\n        height: ", ";\n        border-width: ", ";\n        &::after {\n          width: ", ";\n          height: ", ";\n        }\n      }\n    }\n  }\n"], ["\n  position: absolute;\n  top: 16px;\n  right: 16px;\n  z-index: 1;\n\n  .cardCheckboxLabel {\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n\n    .cardCheckboxInput {\n      margin: 0;\n      visibility: hidden;\n\n      &:checked + span {\n        border: none;\n      }\n\n      &:checked + span:after {\n        opacity: 1;\n      }\n    }\n\n    .cardCustomCheckbox {\n      cursor: pointer;\n      width: 32px;\n      height: 32px;\n      border: 2px solid ", ";\n      background-color: #12183a33;\n      border-radius: 50%;\n      display: inline-block;\n      position: relative;\n\n      &::after {\n        content: '';\n        display: block;\n        background-image: url('/forms/checkbox/checked.svg');\n        background-size: cover;\n        background-repeat: no-repeat;\n        width: 32px;\n        height: 32px;\n        opacity: 0;\n        transition: opacity 0.2s;\n      }\n\n      @media (max-width: 767px) {\n        width: 24px;\n        height: 24px;\n\n        &::after {\n          width: 24px;\n          height: 24px;\n        }\n      }\n    }\n  }\n\n  ", " {\n    top: ", ";\n    right: ", ";\n    .cardCheckboxLabel {\n      .cardCustomCheckbox {\n        width: ", ";\n        height: ", ";\n        border-width: ", ";\n        &::after {\n          width: ", ";\n          height: ", ";\n        }\n      }\n    }\n  }\n"])), colors_1.WhiteColor, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(16), (0, _4k_1.adaptiveValueCalc)(16), (0, _4k_1.adaptiveValueCalc)(32), (0, _4k_1.adaptiveValueCalc)(32), (0, _4k_1.adaptiveValueCalc)(2), (0, _4k_1.adaptiveValueCalc)(32), (0, _4k_1.adaptiveValueCalc)(32));
+// Component
+var CardCheckBox = function (_a) {
+    var isActiveCheckbox = _a.isActiveCheckbox, onChange = _a.onChange;
+    var id = (0, react_1.useId)();
+    return (react_1.default.createElement(StyledCardCheckBox, null,
+        react_1.default.createElement("label", { htmlFor: id, className: "cardCheckboxLabel" },
+            react_1.default.createElement("input", { className: "cardCheckboxInput", type: "checkbox", name: 'checkbox', id: id, onChange: onChange, checked: isActiveCheckbox }),
+            react_1.default.createElement("span", { className: "cardCustomCheckbox" }))));
+};
+// Export
+exports.default = CardCheckBox;
+var templateObject_1;

package/dist/system/Cards/CardContent/CardCategory/index.js

@@ -0,0 +1,28 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+var ScreenWidth_1 = require("@/styles/ScreenWidth");
+var typography_1 = require("@/styles/typography");
+// Styles
+var StyledCardCategory = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-top: 8px;\n\n  .category {\n    .label {\n      ", ";\n      display: inline-block;\n      background: ", ";\n      padding: 1px 5px;\n      line-height: 1.35em;\n      color: ", ";\n      user-select: none;\n      border-radius: 2px;\n      text-transform: uppercase;\n    }\n  }\n\n  @media (max-width: 1040px) {\n    margin-top: 6px;\n  }\n\n  ", " {\n    margin-top: ", ";\n\n    .category {\n      .label {\n        padding: ", " ", ";\n        border-radius: ", ";\n      }\n    }\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-top: 8px;\n\n  .category {\n    .label {\n      ", ";\n      display: inline-block;\n      background: ", ";\n      padding: 1px 5px;\n      line-height: 1.35em;\n      color: ", ";\n      user-select: none;\n      border-radius: 2px;\n      text-transform: uppercase;\n    }\n  }\n\n  @media (max-width: 1040px) {\n    margin-top: 6px;\n  }\n\n  ", " {\n    margin-top: ", ";\n\n    .category {\n      .label {\n        padding: ", " ", ";\n        border-radius: ", ";\n      }\n    }\n  }\n"])), typography_1.FH6, function (props) { return props.background; }, function (props) { return props.color; }, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(1), (0, _4k_1.adaptiveValueCalc)(5), (0, _4k_1.adaptiveValueCalc)(2));
+// Component
+var CardCategory = function (_a) {
+    var label = _a.label;
+    if (!label)
+        return null;
+    return (react_1.default.createElement(StyledCardCategory, { background: label.backgroundColor, color: label.color },
+        react_1.default.createElement("div", { className: 'category' },
+            react_1.default.createElement("span", { className: 'label' }, label.text))));
+};
+// Export
+exports.default = CardCategory;
+var templateObject_1;

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

@@ -0,0 +1,32 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var Likes_1 = __importDefault(require("@/system/Cards/Styles/Likes"));
+var scale_1 = require("@/utils/adaptive/scale");
+var screen_1 = require("@/utils/screen");
+var heart_svg_1 = __importDefault(require("@/public/showCaseIcons/heart.svg"));
+// Styles
+var StyledCardLikes = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: end;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: end;\n"])));
+// Component
+var CardLikes = function (_a) {
+    var likes = _a.likes, isLiked = _a.isLiked;
+    var windowDimensions = (0, screen_1.useWindowDimensionsWithServerInitial)().windowDimensions;
+    return (react_1.default.createElement(StyledCardLikes, null, Boolean(likes) && (react_1.default.createElement(Likes_1.default, { isLiked: isLiked },
+        react_1.default.createElement("div", { className: 'icon' },
+            react_1.default.createElement(heart_svg_1.default, { style: (0, scale_1.getAdaptiveScale)({
+                    windowDimensions: windowDimensions,
+                    currentSize: 1,
+                }) })),
+        react_1.default.createElement("span", { className: 'counter' }, likes)))));
+};
+// Export
+exports.default = CardLikes;
+var templateObject_1;

package/dist/system/Cards/CardContent/CardShowMore/index.js

@@ -0,0 +1,42 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledCardShowMore = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var type_1 = require("@ludo.ninja/ui/build/system/Alert/type");
+var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+var utils_1 = require("@ludo.ninja/utils");
+var ui_1 = require("@/store/ui");
+var ScreenWidth_1 = require("@/styles/ScreenWidth");
+var colors_1 = require("@/styles/colors");
+var typography_1 = require("@/styles/typography");
+var vars_1 = require("@/fonts/vars");
+var moreBtnVertical_svg_1 = __importDefault(require("@/public/creation/card/moreBtnVertical.svg"));
+// Styles
+exports.StyledCardShowMore = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .cardShowMore {\n    position: relative;\n    cursor: pointer;\n    z-index: 100;\n\n    &:before {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      width: 40px;\n      height: 40px;\n      z-index: -1;\n    }\n\n    @media (max-width: 1200px) {\n      display: none;\n    }\n\n    &DropDown {\n      font-family: ", ";\n      display: none;\n      position: absolute;\n      background-color: white;\n      top: 20px;\n      left: -170px;\n      width: 184px;\n      box-shadow: 0px 0px 10px 5px rgba(33, 21, 95, 0.1);\n      border-radius: 6px;\n      padding: 8px;;\n\n      &:before {\n        content: '';\n        display: block;\n        position: absolute;\n        top: -15px;\n        height: 15px;\n        width: 100%;\n      }\n\n      &Item {\n        ", ";\n        display: block;\n        padding: 6px 0 6px 8px;\n        color: #696f91;\n\n        &:hover {\n          border-radius: 4px;\n          color: ", ";\n          background-color: ", ";\n        }\n      }\n    }\n\n    &:hover > div {\n      display: block;\n      z-index: 100000;\n    }\n    ", " {\n      &:before {\n        width: ", ";\n        height:  ", ";\n      }\n      &DropDown {\n        top: ", ";\n        left:", ";\n        width: ", ";\n        box-shadow: 0px 0px ", " ", " rgba(33, 21, 95, 0.1);\n        border-radius: ", ";\n        padding: ", ";\n\n        &:before {\n          top: ", ";\n          height: ", ";\n        }\n\n        &Item {\n          padding: ", " 0 ", " ", ";\n          &:hover {\n            border-radius: ", ";\n          }\n        }\n      }\n    }\n  }\n}\n"], ["\n  .cardShowMore {\n    position: relative;\n    cursor: pointer;\n    z-index: 100;\n\n    &:before {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      width: 40px;\n      height: 40px;\n      z-index: -1;\n    }\n\n    @media (max-width: 1200px) {\n      display: none;\n    }\n\n    &DropDown {\n      font-family: ", ";\n      display: none;\n      position: absolute;\n      background-color: white;\n      top: 20px;\n      left: -170px;\n      width: 184px;\n      box-shadow: 0px 0px 10px 5px rgba(33, 21, 95, 0.1);\n      border-radius: 6px;\n      padding: 8px;;\n\n      &:before {\n        content: '';\n        display: block;\n        position: absolute;\n        top: -15px;\n        height: 15px;\n        width: 100%;\n      }\n\n      &Item {\n        ", ";\n        display: block;\n        padding: 6px 0 6px 8px;\n        color: #696f91;\n\n        &:hover {\n          border-radius: 4px;\n          color: ", ";\n          background-color: ", ";\n        }\n      }\n    }\n\n    &:hover > div {\n      display: block;\n      z-index: 100000;\n    }\n    ", " {\n      &:before {\n        width: ", ";\n        height:  ", ";\n      }\n      &DropDown {\n        top: ", ";\n        left:", ";\n        width: ", ";\n        box-shadow: 0px 0px ", " ", " rgba(33, 21, 95, 0.1);\n        border-radius: ", ";\n        padding: ", ";\n\n        &:before {\n          top: ", ";\n          height: ", ";\n        }\n\n        &Item {\n          padding: ", " 0 ", " ", ";\n          &:hover {\n            border-radius: ", ";\n          }\n        }\n      }\n    }\n  }\n}\n"])), vars_1.dmsansFontVarCss.css, typography_1.TextSmall, colors_1.BlackColor, colors_1.BackgroundColorLight, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(40), (0, _4k_1.adaptiveValueCalc)(40), (0, _4k_1.adaptiveValueCalc)(20), (0, _4k_1.adaptiveValueCalc)(-170), (0, _4k_1.adaptiveValueCalc)(184), (0, _4k_1.adaptiveValueCalc)(10), (0, _4k_1.adaptiveValueCalc)(5), (0, _4k_1.adaptiveValueCalc)(6), (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(-15), (0, _4k_1.adaptiveValueCalc)(15), (0, _4k_1.adaptiveValueCalc)(6), (0, _4k_1.adaptiveValueCalc)(6), (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(4));
+// Component
+var CardShowMore = function (_a) {
+    var itemId = _a.itemId, href = _a.href;
+    var openAlert = (0, ui_1.useUiStore)(function (state) { return state.openAlert; });
+    var copyAssetLinkToClipboard = function (e) {
+        e.preventDefault();
+        (0, utils_1.copyToClipboard)("".concat(window.location.origin).concat(href));
+        openAlert({
+            type: type_1.alertVariants.copied,
+        });
+    };
+    return (React.createElement(exports.StyledCardShowMore, null,
+        React.createElement("div", { className: "cardShowMore" },
+            React.createElement(moreBtnVertical_svg_1.default, null),
+            React.createElement("div", { className: "cardShowMoreDropDown", id: itemId, onClick: copyAssetLinkToClipboard },
+                React.createElement("span", { className: 'cardShowMoreDropDownItem' }, "Copy link")))));
+};
+// Export
+exports.default = CardShowMore;
+var templateObject_1;

package/dist/system/Cards/CardContent/index.js

@@ -0,0 +1,52 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var router_1 = require("next/router");
+var styled_components_1 = __importDefault(require("styled-components"));
+var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+var utils_1 = require("@ludo.ninja/utils");
+var ScreenWidth_1 = require("@/styles/ScreenWidth");
+var colors_1 = require("@/styles/colors");
+var typography_1 = require("@/styles/typography");
+var CardShowMore_1 = __importDefault(require("@/system/Cards/CardContent/CardShowMore"));
+var vars_1 = require("@/fonts/vars");
+// Styles
+var StyledCardContent = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  padding: 12px 16px;\n  min-height: 94px;\n  flex-grow: 1;\n  justify-content: end;\n\n  .cardContent {\n    display: flex;\n    justify-content: space-between;\n\n    .cardContentWrapper {\n      .mainName {\n        font-family: ", ";\n        ", ";\n        color: ", ";\n        font-size: 13px;\n        margin-bottom: 0;\n      }\n\n      .secondName {\n        font-family: ", ";\n        ", ";\n        color: ", ";\n        font-size: 15px;\n      }\n    }\n  }\n\n  .creatorName {\n    ", ";\n    color: ", ";\n    line-height: 1.39em;\n  }\n\n  @media (max-width: 1040px) {\n    height: auto;\n    padding: 12px;\n  }\n  @media (max-width: 767px) {\n    min-height: 84px;\n  }\n\n  ", " {\n    padding: ", " ", ";\n    min-height: ", ";\n\n    .cardContent {\n      .cardContentWrapper {\n        .mainName {\n          font-size: ", ";\n        }\n\n        .secondName {\n          font-size: ", ";\n        }\n      }\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  padding: 12px 16px;\n  min-height: 94px;\n  flex-grow: 1;\n  justify-content: end;\n\n  .cardContent {\n    display: flex;\n    justify-content: space-between;\n\n    .cardContentWrapper {\n      .mainName {\n        font-family: ", ";\n        ", ";\n        color: ", ";\n        font-size: 13px;\n        margin-bottom: 0;\n      }\n\n      .secondName {\n        font-family: ", ";\n        ", ";\n        color: ", ";\n        font-size: 15px;\n      }\n    }\n  }\n\n  .creatorName {\n    ", ";\n    color: ", ";\n    line-height: 1.39em;\n  }\n\n  @media (max-width: 1040px) {\n    height: auto;\n    padding: 12px;\n  }\n  @media (max-width: 767px) {\n    min-height: 84px;\n  }\n\n  ", " {\n    padding: ", " ", ";\n    min-height: ", ";\n\n    .cardContent {\n      .cardContentWrapper {\n        .mainName {\n          font-size: ", ";\n        }\n\n        .secondName {\n          font-size: ", ";\n        }\n      }\n    }\n  }\n"])), vars_1.dmsansFontVarCss.css, typography_1.TextSmall, colors_1.TextGrayColor, vars_1.poppinsFontVarCss.css, typography_1.FH5, colors_1.BlackColor, typography_1.TextSmall, colors_1.TextGrayColor, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(12), (0, _4k_1.adaptiveValueCalc)(16), (0, _4k_1.adaptiveValueCalc)(94), (0, _4k_1.adaptiveValueCalc)(13), (0, _4k_1.adaptiveValueCalc)(15));
+// Component
+var CardContent = function (_a) {
+    var _b;
+    var firstName = _a.firstName, creationName = _a.creationName, cuttedShowcaseName = _a.cuttedSecondName, children = _a.children, isNeedShowMoreButton = _a.isNeedShowMoreButton, itemId = _a.itemId, wallets = _a.wallets, creatorName = _a.creatorName, href = _a.href;
+    var router = (0, router_1.useRouter)();
+    var isGalleryAndFavPage = router.pathname.includes('galleries') ||
+        router.pathname.includes('favorite-lists');
+    var wallet = wallets && ((_b = wallets[0]) === null || _b === void 0 ? void 0 : _b.address);
+    return (react_1.default.createElement(StyledCardContent, null,
+        react_1.default.createElement("div", { className: "cardContent" },
+            react_1.default.createElement("div", { className: "cardContentWrapper" }, isGalleryAndFavPage ? (react_1.default.createElement(react_1.default.Fragment, null,
+                firstName && (react_1.default.createElement("p", { className: "secondName" }, firstName.length > 20 ? (0, utils_1.shortenedText)(firstName) : firstName)),
+                react_1.default.createElement("h3", { className: "mainName" }, cuttedShowcaseName
+                    ? cuttedShowcaseName.length > 20
+                        ? (0, utils_1.shortenedText)(cuttedShowcaseName)
+                        : cuttedShowcaseName
+                    : (0, utils_1.shortenedText)(wallet)))) : (react_1.default.createElement(react_1.default.Fragment, null,
+                creatorName ? (react_1.default.createElement("p", { className: "creatorName" }, creatorName)) : (firstName && (react_1.default.createElement("p", { className: "mainName" }, creationName
+                    ? creationName
+                    : firstName.length > 20
+                        ? (0, utils_1.shortenedText)(firstName)
+                        : firstName))),
+                react_1.default.createElement("h3", { className: "secondName" }, cuttedShowcaseName && (0, utils_1.isContainChinese)(cuttedShowcaseName)
+                    ? cuttedShowcaseName.substring(0, 9)
+                    : cuttedShowcaseName)))),
+            isNeedShowMoreButton && (react_1.default.createElement(CardShowMore_1.default, { href: href, itemId: itemId }))),
+        children));
+};
+// Export
+exports.default = CardContent;
+var templateObject_1;

package/dist/system/Cards/CardHeadIcons/{index.jsx → index.js}

@@ -1,3 +1,4 @@
+"use strict";
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -34,31 +35,35 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
-import React from 'react';
-import { useRouter } from 'next/router';
-import { useUserStore } from '@/modules/user/store';
-import { useUiStore } from '@/store/ui';
-import { ScreenWidth } from '@/styles/ScreenWidth';
-import AddCreationToFavoriteList from '@/components/favoriteList/add/addCreationToFavoriteList';
-import CardRank from '@/system/Cards/CardRank';
-import StyledHeadIcons from '@/system/Cards/Styles/Headicons';
-import { redirectToLoginWindow } from '@/utils/auth';
-import { isProd } from '@/utils/env';
-import { getWindowDimensions } from '@/utils/screen';
-import CollectionCreationEntity from '@/dto/Collection/CollectionCreationEntity';
-import { LabelKeys } from '@/dto/common/ItemType';
-import AddToFavListIcon from '@/public/cards/addToFavListIcon.svg';
-import AddToGalleryIcon from '@/public/cards/addToGalleryIcon.svg';
-import AddToLikesIcon from '@/public/cards/heart.svg';
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var router_1 = require("next/router");
+var store_1 = require("@/modules/user/store");
+var ui_1 = require("@/store/ui");
+var ScreenWidth_1 = require("@/styles/ScreenWidth");
+var addCreationToFavoriteList_1 = __importDefault(require("@/components/favoriteList/add/addCreationToFavoriteList"));
+var CardRank_1 = __importDefault(require("@/system/Cards/CardRank"));
+var Headicons_1 = __importDefault(require("@/system/Cards/Styles/Headicons"));
+var auth_1 = require("@/utils/auth");
+var env_1 = require("@/utils/env");
+var screen_1 = require("@/utils/screen");
+var CollectionCreationEntity_1 = __importDefault(require("@/dto/Collection/CollectionCreationEntity"));
+var ItemType_1 = require("@/dto/common/ItemType");
+var addToFavListIcon_svg_1 = __importDefault(require("@/public/cards/addToFavListIcon.svg"));
+var addToGalleryIcon_svg_1 = __importDefault(require("@/public/cards/addToGalleryIcon.svg"));
+var heart_svg_1 = __importDefault(require("@/public/cards/heart.svg"));
 // Component
 var CardHeadIcons = function (_a) {
     var creation = _a.creation, isRegularCard = _a.isRegularCard, isIconLiked = _a.isIconLiked, addLikeToCard = _a.addLikeToCard, deleteLikeFromCard = _a.deleteLikeFromCard, actionIsNeedRenderCheckbox = _a.actionIsNeedRenderCheckbox, itemId = _a.itemId, isUserProfile = _a.isUserProfile, isDisabled = _a.isDisabled, isProdENV = _a.isProdENV;
-    var openModalSidebarPortal = useUiStore(function (state) { return state.openModalSidebarPortal; });
-    var isSignedIn = useUserStore(function (state) { return state.isSignedIn; });
+    var openModalSidebarPortal = (0, ui_1.useUiStore)(function (state) { return state.openModalSidebarPortal; });
+    var isSignedIn = (0, store_1.useUserStore)(function (state) { return state.isSignedIn; });
     var isLicked = isIconLiked && isSignedIn;
-    var windowWidth = getWindowDimensions().windowWidth;
-    var isMobile = windowWidth <= ScreenWidth.TABLET || windowWidth <= ScreenWidth.DESKTOP;
-    var router = useRouter();
+    var windowWidth = (0, screen_1.getWindowDimensions)().windowWidth;
+    var isMobile = windowWidth <= ScreenWidth_1.ScreenWidth.TABLET || windowWidth <= ScreenWidth_1.ScreenWidth.DESKTOP;
+    var router = (0, router_1.useRouter)();
     var isGallery = router.pathname.includes('gallery');
     var handleClick = function (e, type) { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
@@ -67,28 +72,28 @@ var CardHeadIcons = function (_a) {
                     e.preventDefault();
                     e.stopPropagation();
                     if (!!isSignedIn) return [3 /*break*/, 1];
-                    redirectToLoginWindow();
+                    (0, auth_1.redirectToLoginWindow)();
                     return [3 /*break*/, 8];
                 case 1:
                     if (!(type === 'fav-list')) return [3 /*break*/, 2];
-                    openModalSidebarPortal(<AddCreationToFavoriteList ids={[
-                            creation instanceof CollectionCreationEntity
+                    openModalSidebarPortal(react_1.default.createElement(addCreationToFavoriteList_1.default, { ids: [
+                            creation instanceof CollectionCreationEntity_1.default
                                 ? "".concat(creation.getItemType() + '.' + creation.getCreationId())
                                 : creation.getCreationId(),
-                        ]}/>);
+                        ] }));
                     return [3 /*break*/, 8];
                 case 2:
                     if (!(type === 'likes')) return [3 /*break*/, 7];
                     if (!!isLicked) return [3 /*break*/, 4];
-                    return [4 /*yield*/, addLikeToCard(creation instanceof CollectionCreationEntity &&
-                            creation.getItemType() !== LabelKeys.collection
+                    return [4 /*yield*/, addLikeToCard(creation instanceof CollectionCreationEntity_1.default &&
+                            creation.getItemType() !== ItemType_1.LabelKeys.collection
                             ? creation.getCollectionCreationId()
                             : creation.getItemId())];
                 case 3:
                     _a.sent();
                     return [3 /*break*/, 6];
-                case 4: return [4 /*yield*/, deleteLikeFromCard(creation instanceof CollectionCreationEntity &&
-                        creation.getItemType() !== LabelKeys.collection
+                case 4: return [4 /*yield*/, deleteLikeFromCard(creation instanceof CollectionCreationEntity_1.default &&
+                        creation.getItemType() !== ItemType_1.LabelKeys.collection
                         ? creation.getCollectionCreationId()
                         : creation.getItemId())];
                 case 5:
@@ -105,32 +110,25 @@ var CardHeadIcons = function (_a) {
         });
     }); };
     var renderLikeButton = function () {
-        if (creation.getItemType() === LabelKeys.asset || LabelKeys.collection) {
-            return (<div className={"icon like ".concat(isLicked ? 'liked' : '')} onClick={function (e) { return handleClick(e, 'likes'); }}>
-          <AddToLikesIcon />
-        </div>);
+        if (creation.getItemType() === ItemType_1.LabelKeys.asset || ItemType_1.LabelKeys.collection) {
+            return (react_1.default.createElement("div", { className: "icon like ".concat(isLicked ? 'liked' : ''), onClick: function (e) { return handleClick(e, 'likes'); } },
+                react_1.default.createElement(heart_svg_1.default, null)));
         }
     };
-    return (<StyledHeadIcons isMobile={isMobile} style={isDisabled
+    return (react_1.default.createElement(Headicons_1.default, { isMobile: isMobile, style: isDisabled
             ? {
                 pointerEvents: 'none',
             }
-            : {}}>
-      <div className={'rank'}>
-        <CardRank rank={creation.getRank()}/>
-      </div>
-      {/* // Todo cardHeadIcons */}
-      {!isProd({ ENV: isProdENV }) && (<div className="icons">
-          <div className="icon" onClick={function (e) {
-                return handleClick(e, isRegularCard || !isUserProfile || isGallery
-                    ? 'fav-list'
-                    : 'gallery');
-            }}>
-            {isRegularCard || !isUserProfile || isGallery ? (<AddToFavListIcon />) : (<AddToGalleryIcon />)}
-          </div>
-          {renderLikeButton()}
-        </div>)}
-    </StyledHeadIcons>);
+            : {} },
+        react_1.default.createElement("div", { className: 'rank' },
+            react_1.default.createElement(CardRank_1.default, { rank: creation.getRank() })),
+        !(0, env_1.isProd)({ ENV: isProdENV }) && (react_1.default.createElement("div", { className: "icons" },
+            react_1.default.createElement("div", { className: "icon", onClick: function (e) {
+                    return handleClick(e, isRegularCard || !isUserProfile || isGallery
+                        ? 'fav-list'
+                        : 'gallery');
+                } }, isRegularCard || !isUserProfile || isGallery ? (react_1.default.createElement(addToFavListIcon_svg_1.default, null)) : (react_1.default.createElement(addToGalleryIcon_svg_1.default, null))),
+            renderLikeButton()))));
 };
 // Export
-export default CardHeadIcons;
+exports.default = CardHeadIcons;

package/dist/system/Cards/CardMedia/CardAudio/index.js

@@ -0,0 +1,93 @@
+"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 });
+var react_1 = __importStar(require("react"));
+var react_loading_skeleton_1 = __importDefault(require("react-loading-skeleton"));
+var store_1 = require("@ludo.ninja/components/src/store");
+var Image_1 = __importDefault(require("@/system/Cards/Styles/Image"));
+var screen_1 = require("@/utils/screen");
+var pause_svg_1 = __importDefault(require("@/public/video/pause.svg"));
+var play_svg_1 = __importDefault(require("@/public/video/play.svg"));
+// Component
+var CardAudio = function (_a) {
+    var audioSrc = _a.audioSrc, imgSrc = _a.imgSrc, errorImg = _a.errorImg, alt = _a.alt;
+    var _b = (0, react_1.useState)(''), lImgSrc = _b[0], setLImgSrc = _b[1];
+    var windowWidth = (0, screen_1.getWindowDimensions)().windowWidth;
+    var isMobile = windowWidth <= 768;
+    var imageDimensions = isMobile ? '?d=164x164' : '?d=252x252';
+    var _c = (0, react_1.useState)(false), isPauseIcon = _c[0], setPauseIcon = _c[1];
+    var _d = (0, react_1.useState)(null), lAudioSrc = _d[0], setLAudioSrc = _d[1];
+    var _e = (0, store_1.useMediaStore)(function (state) { return ({
+        playAudioTrack: state.playAudioTrack,
+        pauseAudioTrack: state.pauseAudioTrack,
+        tracks: state.audioTracks,
+    }); }), playAudioTrack = _e.playAudioTrack, pauseAudioTrack = _e.pauseAudioTrack, tracks = _e.tracks;
+    (0, react_1.useEffect)(function () {
+        var audioElement = new Audio(audioSrc);
+        audioElement.addEventListener('canplay', function () {
+            setLAudioSrc(audioSrc);
+        });
+        var image = new Image();
+        image.src = imgSrc;
+        image.onload = function () { return setLImgSrc("".concat(image.src).concat(imageDimensions)); };
+        image.onerror = function () { return setLImgSrc("".concat(errorImg).concat(imageDimensions)); };
+        return function () {
+            return audioElement.removeEventListener('canplay', function () {
+                setLAudioSrc(null);
+            });
+        };
+    }, []);
+    (0, react_1.useEffect)(function () {
+        var isNeedSetPlayBtn = tracks.some(function (track) {
+            return track.audioSrc === lAudioSrc && !track.playing;
+        });
+        if (isNeedSetPlayBtn) {
+            setPauseIcon(false);
+        }
+    }, [tracks]);
+    var handlePause = function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        setPauseIcon(false);
+        pauseAudioTrack(lAudioSrc);
+    };
+    var handlePlay = function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        setPauseIcon(true);
+        playAudioTrack(lAudioSrc);
+    };
+    var renderPlayPauseIcon = function () {
+        return isPauseIcon ? (react_1.default.createElement(pause_svg_1.default, { className: 'pauseIcon', onClick: function (e) { return handlePause(e); } })) : (react_1.default.createElement(play_svg_1.default, { className: 'playIcon', onClick: function (e) { return handlePlay(e); } }));
+    };
+    return lImgSrc.length ? (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Image_1.default, { src: imgSrc, alt: alt, isLoading: lAudioSrc }),
+        (lAudioSrc === null || lAudioSrc === void 0 ? void 0 : lAudioSrc.length) && renderPlayPauseIcon())) : (react_1.default.createElement(react_loading_skeleton_1.default, { height: '100%', width: '100%', style: { lineHeight: 'normal' } }));
+};
+// Export
+exports.default = CardAudio;

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

@@ -0,0 +1,44 @@
+"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 });
+var react_1 = __importStar(require("react"));
+var react_loading_skeleton_1 = __importDefault(require("react-loading-skeleton"));
+var Image_1 = __importDefault(require("@/system/Cards/Styles/Image"));
+// Component
+var CardImage = function (_a) {
+    var imgSrc = _a.imgSrc, errorImg = _a.errorImg, alt = _a.alt;
+    var _b = (0, react_1.useState)(true), loading = _b[0], setLoading = _b[1];
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        loading && (react_1.default.createElement(react_loading_skeleton_1.default, { height: '100%', width: '100%', style: {
+                lineHeight: 'normal',
+                visibility: "".concat(loading ? 'hidden' : 'visible'),
+            } })),
+        react_1.default.createElement(Image_1.default, { isLoading: loading, src: imgSrc, alt: alt, onError: function (e) { return (e.target.src = errorImg); }, onLoad: function () { return setLoading(false); } })));
+};
+// Export
+exports.default = CardImage;

package/dist/system/Cards/CardMedia/CardVideo/index.js

@@ -0,0 +1,83 @@
+"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 });
+var react_1 = __importStar(require("react"));
+var react_loading_skeleton_1 = __importDefault(require("react-loading-skeleton"));
+var Image_1 = __importDefault(require("@/system/Cards/Styles/Image"));
+var Video_1 = __importDefault(require("@/system/Cards/Styles/Video"));
+var pause_svg_1 = __importDefault(require("@/public/video/pause.svg"));
+var play_svg_1 = __importDefault(require("@/public/video/play.svg"));
+// Component
+var CardVideo = function (_a) {
+    var videoSrc = _a.videoSrc, errorImg = _a.errorImg, alt = _a.alt;
+    var _b = (0, react_1.useState)(null), lVideoSrc = _b[0], setLVideoSrc = _b[1];
+    var _c = (0, react_1.useState)(false), isPlayIcon = _c[0], setPlayIcon = _c[1];
+    var video = (0, react_1.useRef)();
+    (0, react_1.useEffect)(function () {
+        var video = document.createElement('video');
+        video.setAttribute('src', "".concat(videoSrc));
+        video.addEventListener('canplay', function () {
+            setLVideoSrc(videoSrc);
+            setPlayIcon(true);
+        }, false);
+        video.addEventListener('error', function () {
+            setLVideoSrc(null);
+            setPlayIcon(false);
+        }, false);
+        return function () { return video.removeEventListener('canplay', function () { return setLVideoSrc(null); }); };
+    }, []);
+    var playVideo = function () {
+        var _a;
+        video.current && ((_a = video.current) === null || _a === void 0 ? void 0 : _a.play());
+        setPlayIcon(false);
+    };
+    var pauseVideo = function () {
+        var _a;
+        video.current && ((_a = video.current) === null || _a === void 0 ? void 0 : _a.pause());
+        setPlayIcon(true);
+    };
+    var renderImage = function () { return (react_1.default.createElement(Image_1.default, { isLoading: false, src: errorImg, alt: alt })); };
+    if (!videoSrc)
+        return renderImage();
+    return lVideoSrc ? (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Video_1.default, { ref: video, muted: true, loop: true, playsInline: true, preload: 'false' },
+            react_1.default.createElement("source", { type: "video/mp4", src: lVideoSrc }),
+            react_1.default.createElement("p", null, alt)),
+        lVideoSrc.length &&
+            (isPlayIcon ? (react_1.default.createElement(play_svg_1.default, { className: 'playIcon', onClick: function (e) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    playVideo();
+                } })) : (react_1.default.createElement(pause_svg_1.default, { className: 'pauseIcon', onClick: function (e) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    pauseVideo();
+                } }))))) : (react_1.default.createElement(react_loading_skeleton_1.default, { height: '100%', width: '100%', style: { lineHeight: 'normal' } }));
+};
+// Export
+exports.default = CardVideo;

package/dist/system/Cards/CardMedia/index.js

@@ -1,3 +1,12 @@
-export { default as CardAudio } from './CardAudio';
-export { default as CardVideo } from './CardVideo';
-export { default as CardImage } from './CardImage';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardImage = exports.CardVideo = exports.CardAudio = void 0;
+var CardAudio_1 = require("./CardAudio");
+Object.defineProperty(exports, "CardAudio", { enumerable: true, get: function () { return __importDefault(CardAudio_1).default; } });
+var CardVideo_1 = require("./CardVideo");
+Object.defineProperty(exports, "CardVideo", { enumerable: true, get: function () { return __importDefault(CardVideo_1).default; } });
+var CardImage_1 = require("./CardImage");
+Object.defineProperty(exports, "CardImage", { enumerable: true, get: function () { return __importDefault(CardImage_1).default; } });