@momo-webplatform/mobase 0.0.41 → 0.0.43

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@momo-webplatform/mobase",
-  "version": "0.0.41",
+  "version": "0.0.43",
   "description": "Mobase is the UI framework upon we build product experiences at MoMo.vn, base on Radix primitives, and Tailwind CSS.",
   "scripts": {
-    "dev": "next dev",
-    "build": "next build",
+    "dev": "rm -rf .next && next dev",
+    "build": "rm -rf .next && next build",
     "start": "next start",
     "build:lib": "rm -rf ./publish/ && yarn build:lib:esm && yarn build:lib:cjs",
     "build:lib:cjs": "tsc -p tsconfig.lib.json",
@@ -69,6 +69,7 @@
     "date-fns": "^3.2.0",
     "deepmerge": "^4.3.1",
     "dlv": "^1.1.3",
+    "embla-carousel-react": "^8.0.4",
     "flat": "^3.0.1",
     "framer-motion": "^11.0.24",
     "html-react-parser": "^5.1.10",
@@ -88,6 +89,7 @@
     "react-icons": "^4.11.0",
     "react-indiana-drag-scroll": "^2.2.0",
     "react-use": "^17.5.0",
+    "swiper": "^8.4.4",
     "tailwind-merge": "^2.2.0",
     "tailwindcss": "^3.4.3",
     "tailwindcss-animate": "^1.0.7",

package/publish/cjs/components/Accordion/Accordion.js

@@ -36,7 +36,7 @@ Accordion.displayName = "AccordionRoot";
 const AccordionItem = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(AccordionPrimitive.Item, { ref: ref, className: (0, utils_1.cn)("border-b border-gray-200", className), ...props })));
 exports.AccordionItem = AccordionItem;
 AccordionItem.displayName = "AccordionItem";
-const AccordionTrigger = React.forwardRef(({ className, children, ...props }, ref) => ((0, jsx_runtime_1.jsx)(AccordionPrimitive.Header, { className: "flex", children: (0, jsx_runtime_1.jsxs)(AccordionPrimitive.Trigger, { ref: ref, className: (0, utils_1.cn)("flex flex-1 items-center text-left justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180 text-gray-900", className), ...props, children: [children, (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "h-4 w-4 shrink-0 transition-transform duration-200 ml-1" })] }) })));
+const AccordionTrigger = React.forwardRef(({ className, children, ...props }, ref) => ((0, jsx_runtime_1.jsx)(AccordionPrimitive.Header, { className: "flex", children: (0, jsx_runtime_1.jsxs)(AccordionPrimitive.Trigger, { ref: ref, className: (0, utils_1.cn)("flex flex-1 items-center text-left justify-between py-4 font-medium transition-all hover:underline hover:text-pink-600 [&[data-state=open]]:text-pink-600 [&[data-state=open]>svg]:rotate-180 text-gray-900", className), ...props, children: [children, (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "h-4 w-4 shrink-0 transition-transform duration-200 ml-1" })] }) })));
 exports.AccordionTrigger = AccordionTrigger;
 AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
 const AccordionContent = React.forwardRef(({ className, children, ...props }, ref) => ((0, jsx_runtime_1.jsx)(AccordionPrimitive.Content, { ref: ref, className: "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down text-left ", ...props, children: (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("pb-4 pt-0 text-gray-900 prose-sm", className), children: children }) })));

package/publish/cjs/components/LightboxGallery/LightboxGallery.js

@@ -0,0 +1,203 @@
+"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.LightboxGallery = exports.LightBoxContent = exports.DialogContent = exports.LightboxThumbnail = exports.LightboxGalleryDialog = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("swiper/react");
+const swiper_1 = require("swiper");
+const DialogPrimitive = __importStar(require("@radix-ui/react-dialog"));
+const react_2 = __importStar(require("react"));
+const IconButton_1 = require("../IconButton");
+const utils_1 = require("../../helpers/utils");
+const lucide_react_1 = require("lucide-react");
+const outline_1 = require("@heroicons/react/24/outline");
+const lodash_1 = __importDefault(require("lodash"));
+exports.LightboxGalleryDialog = DialogPrimitive.Root;
+const DialogPortal = DialogPrimitive.Portal;
+const DialogOverlay = react_2.default.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(DialogPrimitive.Overlay, { ref: ref, className: (0, utils_1.cn)("fixed inset-0  bg-black/80 z-50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className), ...props })));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+const CloseDialog = ({ clearActiveIndex }) => {
+    return ((0, jsx_runtime_1.jsxs)(DialogPrimitive.Close, { onClick: () => clearActiveIndex?.(), className: "flex transition-all z-10 text-sm items-center space-x-1 absolute left-3 top-6 md:left-6 hover:bg-white/20 text-white rounded-md px-4 py-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-4 w-4 mt-0.5" }), (0, jsx_runtime_1.jsx)("div", { className: "", children: "\u0110\u00F3ng c\u1EEDa s\u1ED5" })] }));
+};
+const LightboxThumbnail = ({ children, src, alt, className, classNameImage, onClick, }) => {
+    const handleOnClickThumbnail = () => {
+        onClick?.();
+    };
+    return ((0, jsx_runtime_1.jsxs)(DialogPrimitive.Trigger, { className: (0, utils_1.cn)("aspect-[2/3] relative overflow-hidden rounded-lg", className), onClick: handleOnClickThumbnail, children: [children, (0, jsx_runtime_1.jsx)("img", { src: src, alt: alt, className: (0, utils_1.cn)("w-full h-full object-cover rounded-lg", classNameImage) })] }));
+};
+exports.LightboxThumbnail = LightboxThumbnail;
+exports.DialogContent = react_2.default.forwardRef(({ className, children, ...props }, ref) => ((0, jsx_runtime_1.jsxs)(DialogPortal, { children: [(0, jsx_runtime_1.jsx)(DialogOverlay, { className: "bg-black" }), (0, jsx_runtime_1.jsxs)(DialogPrimitive.Content, { ref: ref, className: (0, utils_1.cn)("h-full min-w-full border-none rounded-none z-[999] fixed bg-black left-[50%] top-[50%]  grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] ", className), ...props, children: [children, (0, jsx_runtime_1.jsx)(CloseDialog, {})] })] })));
+exports.DialogContent.displayName = DialogPrimitive.Content.displayName;
+const DialogHeader = ({ className, ...props }) => ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props }));
+DialogHeader.displayName = "DialogHeader";
+const DialogFooter = ({ className, ...props }) => ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className), ...props }));
+DialogFooter.displayName = "DialogFooter";
+const DialogTitle = react_2.default.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(DialogPrimitive.Title, { ref: ref, className: (0, utils_1.cn)("text-lg font-semibold leading-none tracking-tight", className), ...props })));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+const DialogDescription = react_2.default.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(DialogPrimitive.Description, { ref: ref, className: (0, utils_1.cn)("text-sm text-muted-foreground", className), ...props })));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+const LightBoxContent = ({ images, activeSlideIndex = 0, withSideBar, subHtmlSideBar, classNameSubHtmSideBar, className, isPagination = false, }) => {
+    const [activeSlide, setActiveSlide] = (0, react_2.useState)(activeSlideIndex);
+    const [titleImage, setTitleImg] = (0, react_2.useState)("");
+    const onGetTitleImage = () => {
+        const result = lodash_1.default.filter(images, (_, idx) => idx === activeSlideIndex);
+        const titleImgDraf = result.length > 0 ? result[0]?.titleImage : "";
+        setTitleImg(titleImgDraf);
+    };
+    (0, react_2.useEffect)(() => {
+        setActiveSlide(activeSlideIndex);
+        onGetTitleImage();
+    }, [activeSlideIndex]);
+    const pagination = {
+        clickable: true,
+        renderBullet(index, className) {
+            const classNameParent = (0, utils_1.cn)("aspect-[1/1] min-w-[96px] mt-40 min-h-[76px] !rounded-lg overflow-hidden", className);
+            const classNameImage = (0, utils_1.cn)("w-full h-full object-cover rounded-lg");
+            if (!images[index]?.url) {
+                return "<div></div>";
+            }
+            return `
+        <div class="${classNameParent} ">
+          <img class="${classNameImage} " src="${images[index]?.url}" alt="Slide ${index + 1}" />
+        </div>
+      `;
+        },
+    };
+    const arrayModule = isPagination
+        ? [swiper_1.Navigation, swiper_1.Lazy, swiper_1.Pagination]
+        : [swiper_1.Navigation, swiper_1.Lazy];
+    return ((0, jsx_runtime_1.jsxs)(exports.DialogContent, { className: (0, utils_1.cn)("flex py-0", className), children: [(0, jsx_runtime_1.jsxs)("div", { className: "lightbox flex-1 py-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-end md:justify-center mt-2 w-full", children: (0, jsx_runtime_1.jsxs)("div", { children: [activeSlide ? activeSlide + 1 : 1, " / ", images?.length] }) }), (0, jsx_runtime_1.jsxs)(react_1.Swiper, { initialSlide: activeSlideIndex, onSlideChange: ({ realIndex }) => {
+                            setActiveSlide(realIndex);
+                            onGetTitleImage();
+                            const activeBullet = document.querySelector(".swiper-pagination-bullet-active");
+                            if (activeBullet) {
+                                activeBullet.scrollIntoView({
+                                    behavior: "smooth",
+                                    block: "nearest",
+                                });
+                            }
+                        }, onDestroy: () => {
+                            setActiveSlide(activeSlideIndex);
+                            onGetTitleImage();
+                        }, slidesPerView: "auto", className: "swiper lightboxSwiper", navigation: {
+                            nextEl: ".lightbox .next-lightbox",
+                            prevEl: ".lightbox .prev-lightbox",
+                        }, pagination: pagination, modules: arrayModule, lazy: {
+                            loadPrevNext: true,
+                        }, children: [images.map((img, index) => ((0, jsx_runtime_1.jsxs)(react_1.SwiperSlide, { children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute top-28 bottom-28 left-0 right-0 min-h-0 sm:left-20 sm:right-20", children: (0, jsx_runtime_1.jsx)("img", { src: img.url, alt: "", className: "absolute h-full w-full object-contain", loading: "lazy" }) }), (0, jsx_runtime_1.jsx)("div", { className: "swiper-lazy-preloader swiper-lazy-preloader-white" }), (0, jsx_runtime_1.jsx)("div", { className: "text-sm px-20 text-center text-white/80 absolute bottom-10 my-4 flex items-center justify-center w-full z-[999]", children: titleImage })] }, index))), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { className: "disabled:bg-white/60 prev-lightbox button-swiper translate swiper-cate-merchant absolute inset-y-1/2 left-6 z-10 hidden h-12 w-12 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full border border-gray-300 bg-white text-white shadow-md duration-200 ease-in-out hover:bg-white/80 hover:shadow-md md:flex", children: (0, jsx_runtime_1.jsx)(outline_1.ChevronLeftIcon, { className: "w-7 text-slate-900" }) }), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { className: "disabled:bg-white/60 next-lightbox translate swiper-cate-merchant button-swiper absolute inset-y-1/2 right-6 z-10 hidden h-12 w-12 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full border border-gray-300 bg-white text-white shadow-md duration-300 ease-in-out hover:bg-white/80 hover:shadow-md md:flex", children: (0, jsx_runtime_1.jsx)(outline_1.ChevronRightIcon, { className: "w-7 text-slate-900" }) })] }), (0, jsx_runtime_1.jsx)("style", { children: `
+          .lightbox {
+            --lightbox-topnav: 112px;
+            --lightbox-botnav: 80px;
+          }
+
+          @media (max-width: 639px) {
+            .lightbox {
+              --lightbox-topnav: 60px;
+              --lightbox-botnav: 80px;
+            }
+            .lightbox .swiper-button-prev {
+              display: none;
+            }
+
+            .lightbox .swiper-button-next {
+              display: none;
+            }
+            .swiper-pagination{
+              justify-content: start !important;
+            }
+          }
+
+          .lightbox-content {
+            top: var(--lightbox-topnav) !important;
+            height: calc(100% - var(--lightbox-topnav)) !important;
+            width: 100% !important;
+          }
+          .lightboxSwiper {
+            width: 100%;
+            height: 100%;
+            padding: 0;
+          }
+
+          .lightboxSwiper .swiper-slide {
+            text-align: center;
+            display: -webkit-box;
+            display: -ms-flexbox;
+            display: -webkit-flex;
+            display: flex;
+            -webkit-box-pack: center;
+            -ms-flex-pack: center;
+            -webkit-justify-content: center;
+            justify-content: center;
+            -webkit-box-align: center;
+            -ms-flex-align: center;
+            -webkit-align-items: center;
+            align-items: center;
+          }
+
+          .lightboxSwiper.swiper-slide img {
+            display: block;
+            width: 100%;
+            height: 100%;
+          }
+          .swiper-wrapper{
+            bottom: 0px;
+          }
+          .swiper-pagination{
+            max-width: 100%;
+            width: 100%;
+            overflow-x: auto;
+            display: flex;
+            justify-content: center;
+          }
+
+          .swiper-pagination-bullet{
+            background: unset;
+            opacity: 1;
+          }
+          .swiper-pagination-bullet-active{
+            border: 2px solid white;
+          }
+        ` })] }), withSideBar && ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("hidden md:flex overflow-y-auto bg-white text-gray-900  px-6 pb-4 pt-2 w-full  max-w-sm lg:max-w-md", classNameSubHtmSideBar), children: subHtmlSideBar }))] }));
+};
+exports.LightBoxContent = LightBoxContent;
+const LightboxGallery = ({ children, className, open, onOpenChange, }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("lightbox-gallery ", className), children: (0, jsx_runtime_1.jsx)(exports.LightboxGalleryDialog, { open: open, onOpenChange: onOpenChange, children: react_2.default.Children?.map(children, (child) => {
+                if (react_2.default.isValidElement(child)) {
+                    const updatedProps = {};
+                    const knownProps = Object.keys(updatedProps).reduce((acc, key) => {
+                        if (updatedProps[key] !== undefined) {
+                            acc[key] = updatedProps[key];
+                        }
+                        return acc;
+                    }, {});
+                    return react_2.default.cloneElement(child, knownProps);
+                }
+                return null;
+            }) }) }));
+};
+exports.LightboxGallery = LightboxGallery;

package/publish/cjs/components/LightboxGallery/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LightBoxContent = exports.LightboxThumbnail = exports.LightboxGallery = void 0;
+var LightboxGallery_1 = require("./LightboxGallery");
+Object.defineProperty(exports, "LightboxGallery", { enumerable: true, get: function () { return LightboxGallery_1.LightboxGallery; } });
+Object.defineProperty(exports, "LightboxThumbnail", { enumerable: true, get: function () { return LightboxGallery_1.LightboxThumbnail; } });
+Object.defineProperty(exports, "LightBoxContent", { enumerable: true, get: function () { return LightboxGallery_1.LightBoxContent; } });

package/publish/cjs/components/TextButton/index.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextButton = void 0;
+exports.textButtonVariants = exports.TextButton = void 0;
 var TextButton_1 = require("./TextButton");
 Object.defineProperty(exports, "TextButton", { enumerable: true, get: function () { return TextButton_1.TextButton; } });
+Object.defineProperty(exports, "textButtonVariants", { enumerable: true, get: function () { return TextButton_1.textButtonVariants; } });

package/publish/cjs/index.js

@@ -42,6 +42,7 @@ __exportStar(require("./components/Command"), exports);
 __exportStar(require("./components/Combobox"), exports);
 __exportStar(require("./components/Callout"), exports);
 __exportStar(require("./components/SearchBar"), exports);
+__exportStar(require("./components/LightboxGallery"), exports);
 __exportStar(require("./components/Choicebox"), exports);
 __exportStar(require("./mobase-tw-plugin"), exports);
 __exportStar(require("./site"), exports);

package/publish/cjs/mobase-tw-plugin/plugin.js

@@ -189,10 +189,10 @@ const mobaseTW = () => {
                 fontSize: {
                     ...(0, font_sizes_1.fontSizes)(prefix),
                 },
-                spacing: {
-                    unit: `var(--${prefix}-spacing-unit)`,
-                    ...(0, theme_1.createSpacingUnits)(prefix),
-                },
+                // spacing: {
+                //   unit: `var(--${prefix}-spacing-unit)`,
+                //   ...createSpacingUnits(prefix),
+                // },
                 ...animations_1.animations,
             },
         },