@momo-webplatform/mobase 0.0.38 → 0.0.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-webplatform/mobase",
-  "version": "0.0.38",
+  "version": "0.0.39",
   "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",
@@ -80,6 +80,7 @@
     "nextra": "^2.13.2",
     "nextra-theme-docs": "^2.13.2",
     "postcss": "^8.4.33",
+    "qrcode.react": "1.0.1",
     "react": "^18.2.0",
     "react-day-picker": "^8.10.0",
     "react-docgen-typescript": "^2.2.2",

package/publish/cjs/components/Dialog/Dialog.js

@@ -28,7 +28,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const React = __importStar(require("react"));
 const DialogPrimitive = __importStar(require("@radix-ui/react-dialog"));
 const utils_1 = require("../../helpers/utils");
-const solid_1 = require("@heroicons/react/24/solid");
+const solid_1 = require("@heroicons/react/20/solid");
 const Dialog = DialogPrimitive.Root;
 exports.Dialog = Dialog;
 const DialogTrigger = DialogPrimitive.Trigger;
@@ -40,11 +40,37 @@ exports.DialogClose = DialogClose;
 const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(DialogPrimitive.Overlay, { ref: ref, className: (0, utils_1.cn)("fixed inset-0 z-50 bg-black/60 !duration-300 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className), ...props })));
 exports.DialogOverlay = DialogOverlay;
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-const DialogContent = React.forwardRef(({ className, isRightCloseButton, size = "md", position = "center", isFull = false, children, ...props }, ref) => ((0, jsx_runtime_1.jsxs)(DialogPortal, { children: [(0, jsx_runtime_1.jsx)(DialogOverlay, {}), (0, jsx_runtime_1.jsxs)(DialogPrimitive.Content, { ref: ref, className: (0, utils_1.cn)("fixed z-50 flex border bg-background shadow-lg sm:rounded-lg bg-white text-gray-900 max-h-full w-full max-w-full flex-col", size === "sm" && "md:max-w-xs max-h-[432px] md:max-h-[432px]", size === "md" && "md:max-w-lg max-h-[432px] md:max-h-[432px]", size === "lg" && "md:max-w-2xl max-h-[454px] md:max-h-[454px]", size === "xl" && "md:max-w-5xl max-h-[640px] md:max-h-[640px]", position === "center" &&
-                "left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] 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%] max-w-xs rounded-lg", position === "left" &&
-                "!duration-300 max-h-screen md:max-h-screen rounded-r-lg sm:rounded-l-none h-full top-0 data-[state=open]:animate-in data-[state=open]:slide-in-from-left data-[state=closed]:animate-out data-[state=closed]:slide-out-to-left max-w-xs ease-in-out", position === "right" &&
-                "!duration-300 max-h-screen md:max-h-screen rounded-l-lg sm:rounded-r-none h-full top-0 right-0 data-[state=open]:animate-in data-[state=open]:slide-in-from-right data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right max-w-xs ease-in-out", position === "bottom" &&
-                "!duration-300 bottom-0 sm:bottom-1/2 left-1/2 rounded-t-lg sm:translate-y-1/2 data-[state=closed]:animate-out -translate-x-1/2 data-[state=open]:animate-in data-[state=open]:slide-in-from-left-1/2 ease-in-out data-[state=open]:slide-in-from-bottom-2/3 data-[state=closed]:slide-out-to-bottom-2/3 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", isFull && "h-full max-h-screen max-w-full w-full rounded-none", className), ...props, children: [children, (0, jsx_runtime_1.jsxs)(DialogPrimitive.Close, { className: (0, utils_1.cn)("absolute md:top-4 top-2 focus:outline-none focus:ring-0 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground text-gray-900 w-8 h-8 flex justify-center items-center rounded-full hover:bg-gray-50 hover:bg-opacity-20 hover:opacity-70", isRightCloseButton ? "md:right-4 right-3" : "md:left-4 left-3"), title: "\u0110\u00F3ng", children: [(0, jsx_runtime_1.jsx)(solid_1.XMarkIcon, { className: "h-5 w-5 text-gray-900" }), (0, jsx_runtime_1.jsx)("span", { className: "sr-only", children: "Close" })] })] })] })));
+const DialogContent = React.forwardRef(({ className, isRightCloseButton, size = "md", position = "center", height = "auto", isFull = false, children, ...props }, ref) => {
+    const classNames = {
+        base: "fixed z-50 flex border bg-background shadow-lg sm:rounded-lg bg-white text-gray-900 w-full max-w-[calc(-64px_+_100vw)] max-h-[calc(-64px_+_100vh)] flex-col",
+        center: "left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] 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%] rounded-lg",
+        bottom: "!duration-300 bottom-0 sm:bottom-1/2 left-1/2 rounded-t-lg sm:translate-y-1/2 data-[state=closed]:animate-out -translate-x-1/2 data-[state=open]:animate-in data-[state=open]:slide-in-from-left-1/2 ease-in-out data-[state=open]:slide-in-from-bottom-2/3 data-[state=closed]:slide-out-to-bottom-2/3 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 max-w-full max-h-[calc(-32px_+_100vh)] sm:max-h-[calc(-64px_+_100vh)]",
+        left: "!duration-300 max-h-screen !h-full rounded-r-lg sm:rounded-l-none top-0 data-[state=open]:animate-in data-[state=open]:slide-in-from-left data-[state=closed]:animate-out data-[state=closed]:slide-out-to-left ease-in-out",
+        right: "!duration-300 !h-full rounded-l-lg sm:rounded-r-none max-h-screen top-0 right-0 data-[state=open]:animate-in data-[state=open]:slide-in-from-right data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right ease-in-out",
+    };
+    const sizeClassNames = {
+        sm: "w-80 sm:w-80",
+        md: "w-[512px] sm:w-[512px]",
+        lg: "w-[672px] sm:w-[672px]",
+        xl: "w-[1024px] sm:-[1024px]",
+    };
+    const heightClassNames = {
+        auto: "h-auto sm:h-auto",
+        small: "h-[480px] sm:h-[480px]",
+        large: "h-[640px] sm:h-[640px]",
+        full: "h-full",
+    };
+    const classNamesDialogContent = [
+        classNames.base,
+        classNames[position],
+        sizeClassNames[size],
+        heightClassNames[height],
+        isFull &&
+            "h-full max-h-screen max-w-full w-full rounded-none sm:rounded-lg sm:max-h-[calc(-64px_+_100vh)]",
+        className,
+    ];
+    return ((0, jsx_runtime_1.jsxs)(DialogPortal, { children: [(0, jsx_runtime_1.jsx)(DialogOverlay, {}), (0, jsx_runtime_1.jsxs)(DialogPrimitive.Content, { ref: ref, className: (0, utils_1.cn)(...classNamesDialogContent), ...props, children: [children, (0, jsx_runtime_1.jsxs)(DialogPrimitive.Close, { className: (0, utils_1.cn)("absolute md:top-4 top-2 focus:outline-none focus:ring-0 disabled:pointer-events-none data-[state=open]:bg-gray-100 data-[state=open]:text-gray-700 text-gray-900 w-8 h-8   flex justify-center items-center rounded-full before:opacity-0  hover:before:opacity-100 before:transition-opacity before:z-[-1]  before:content-[''] before:absolute before:inset-0 before:rounded-full before:select-none  before:left-0 before:top-0 before:bg-gray-200  left-3 md:left-auto md:right-4", isRightCloseButton && "left-auto right-3 md:right-4"), title: "\u0110\u00F3ng", children: [(0, jsx_runtime_1.jsx)(solid_1.XMarkIcon, { className: "h-5 w-5 text-gray-900" }), (0, jsx_runtime_1.jsx)("span", { className: "sr-only", children: "Close" })] })] })] }));
+});
 exports.DialogContent = DialogContent;
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 const DialogHeader = ({ className, ...props }) => ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("dialog-header py-2 md:py-4 h-12 md:h-16 px-10 md:px-12 items-center justify-center flex border-b border-gray-200 w-full shrink-0", className), ...props }));
@@ -56,9 +82,9 @@ DialogBody.displayName = "DialogBody";
 const DialogFooter = ({ className, isDivider = true, ...props }) => ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("dialog-footer flex sm:flex-row justify-center [&>*]:basis-1/2 [&>*]:sm:basis-auto sm:justify-end space-x-2 px-6 pb-4 shrink-0", isDivider && "border-gray-200 border-t py-4", className), ...props }));
 exports.DialogFooter = DialogFooter;
 DialogFooter.displayName = "DialogFooter";
-const DialogTitle = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(DialogPrimitive.Title, { ref: ref, className: (0, utils_1.cn)("text-base font-bold line-clamp-1 max-w-full", className), ...props })));
+const DialogTitle = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(DialogPrimitive.Title, { ref: ref, className: (0, utils_1.cn)("text-base font-semibold line-clamp-1 max-w-full", className), ...props })));
 exports.DialogTitle = DialogTitle;
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
-const DialogDescription = React.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 })));
+const DialogDescription = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(DialogPrimitive.Description, { ref: ref, className: (0, utils_1.cn)("text-sm text-gray-700", className), ...props })));
 exports.DialogDescription = DialogDescription;
 DialogDescription.displayName = DialogPrimitive.Description.displayName;

package/publish/cjs/components/DialogQr/DialogQr.js

@@ -0,0 +1,98 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogQr = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Dialog_1 = require("../Dialog");
+const qrcode_react_1 = __importDefault(require("qrcode.react"));
+const utils_1 = require("../../helpers/utils");
+const QRCodeScan = ({ img = "", children, isQrForAll }) => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "qrcode__scan__container", children: (0, jsx_runtime_1.jsxs)("div", { className: "qrcode__scan", children: [(0, jsx_runtime_1.jsx)("div", { className: "qrcode__gradient", children: (0, jsx_runtime_1.jsx)("img", { alt: "step 1", className: "img-fluid", src: "https://homepage.momocdn.net/jk/momo2020/img/qrcode/qrcode-gradient.png" }) }), (0, jsx_runtime_1.jsx)("div", { className: "qrcode__border", children: (0, jsx_runtime_1.jsx)("img", { alt: "step 2", className: "img-fluid", src: "https://homepage.momocdn.net/jk/momo2020/img/qrcode/border-qrcode.svg" }) }), (0, jsx_runtime_1.jsx)("div", { className: "qrcode__image p-4", children: img ? ((0, jsx_runtime_1.jsx)("img", { alt: "step 3", className: "img-fluid d-block mx-auto", src: img, loading: "lazy" })) : (children) })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "mt-4 text-sm text-white", children: isQrForAll ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("img", { src: "https://homepage.momocdn.net/img/momo-upload-api-231211171009-638379114093056419.png", width: 255, height: 32, className: "mx-auto", alt: "QR all" }), (0, jsx_runtime_1.jsx)("div", { className: "mt-3", children: "Nh\u1EADn ti\u1EC1n t\u1EEB m\u1ECDi V\u00ED \u0110i\u1EC7n T\u1EED v\u00E0 Ng\u00E2n H\u00E0ng" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", className: "mr-1 inline h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z" }) }), "S\u1EED d\u1EE5ng App MoMo ho\u1EB7c", (0, jsx_runtime_1.jsx)("br", {}), "\u1EE9ng d\u1EE5ng Camera h\u1ED7 tr\u1EE3 QR code \u0111\u1EC3 qu\u00E9t m\u00E3."] })) }), (0, jsx_runtime_1.jsx)("style", { children: `
+            .qrcode__scan__container {
+              padding: 15px;
+              background-color: white;
+              width: 280px;
+              height: 280px;
+              border-radius: 20px;
+              border-radius: 15px;
+              margin: 0 auto;
+            }
+    
+            .qrcode__image {
+              width: 100%;
+            }
+    
+            .qrcode__image img {
+              width: 100%;
+            }
+    
+            .qrcode__scan {
+              width: 245px;
+              height: 245px;
+              margin: 0 auto;
+              overflow: hidden;
+              background-color: white;
+              position: relative;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+            }
+    
+            .qrcode__border {
+              position: absolute;
+              width: 100%;
+              height: 100%;
+              top: 0;
+              left: 0;
+              z-index: 5;
+              opacity: 0.9;
+              pointer-events: none;
+            }
+    
+            .qrcode__gradient {
+              position: absolute;
+              opacity: 0.6;
+              width: 98%;
+              height: 98%;
+              top: 1%;
+              left: 1%;
+              z-index: 6;
+              // pointer-events: none;
+              transform: translate3d(0, -110%, 0);
+              animation: QRCodeScan 3s infinite cubic-bezier(0.45, 0.03, 0.81, 0.63);
+    
+              backface-visibility: hidden;
+            }
+    
+            @keyframes QRCodeScan {
+              0% {
+                transform: translate3d(0, -110%, 0);
+              }
+    
+              90% {
+                transform: translate3d(0, 30%, 0);
+              }
+              100% {
+                transform: translate3d(0, 30%, 0);
+              }
+            }
+          ` })] }));
+};
+const DialogQr = ({ className, children, title, shortTitle, qrImage, qrLink, logoQr, isQrForAll = false, ...props }) => {
+    return ((0, jsx_runtime_1.jsx)(Dialog_1.Dialog, { ...props, children: (0, jsx_runtime_1.jsx)(Dialog_1.DialogContent, { className: (0, utils_1.cn)("md:max-w-2xl lg:max-w-3xl h-auto md:max-h-screen max-h-screen overflow-hidden [&>button>svg]:text-white border-0", className), size: "xl", isRightCloseButton: true, children: (0, jsx_runtime_1.jsx)(Dialog_1.DialogBody, { className: "p-0", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-row flex-wrap", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-full flex-none md:w-5/12 hidden sm:block", children: children || ((0, jsx_runtime_1.jsxs)("div", { className: "px-5 text-sm py-8 grid grid-cols-1 gap-y-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-nowrap items-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-none", children: (0, jsx_runtime_1.jsx)("img", { className: "w-20", loading: "lazy", src: "https://homepage.momocdn.net/images/s/momo-upload-api-200917091602-637359309621891617.png", alt: "Step 1" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 pl-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "step font-semibold text-gray-800 ", children: "B\u01B0\u1EDBc 1 :" }), (0, jsx_runtime_1.jsx)("div", { className: "mt-1 text-gray-500 ", children: isQrForAll
+                                                            ? "Mở app MoMo hoặc ứng dụng ngân hàng/ví điện tử chấp nhận mã vạch từ QR Đa Năng"
+                                                            : "Mở ứng dụng camera mặc định hoặc ứng dụng hỗ trợ QR code của bạn" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-nowrap items-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-none", children: (0, jsx_runtime_1.jsx)("img", { className: "w-20 ", loading: "lazy", src: "https://homepage.momocdn.net/images/s/momo-upload-api-200917091443-637359308837905996.png", alt: "Step 2" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 pl-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "step font-semibold text-gray-800 ", children: "B\u01B0\u1EDBc 2 :" }), (0, jsx_runtime_1.jsx)("div", { className: "mt-1 text-gray-500 ", children: "Qu\u00E9t m\u00E3 QR Code theo h\u00ECnh b\u00EAn ph\u1EA3i" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-nowrap items-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-none", children: (0, jsx_runtime_1.jsx)("img", { className: "w-20 ", loading: "lazy", src: "https://homepage.momocdn.net/images/s/momo-upload-api-200917090146-637359301062519803.png", alt: "Step 3" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 pl-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "step font-semibold text-gray-800 ", children: "B\u01B0\u1EDBc 3 :" }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-1 text-gray-500 ", children: ["B\u1EA5m v\u00E0o th\u00F4ng b\u00E1o hi\u1EC3n th\u1ECB \u0111\u1EC3 t\u1EA3i \u1EE9ng d\u1EE5ng ho\u1EB7c", " ", shortTitle || "Truy cập ngay"] })] })] })] })) }), (0, jsx_runtime_1.jsx)("div", { className: "flex w-full items-center justify-center md:w-7/12 h-auto", style: {
+                                background: "url(https://homepage.momocdn.net/jk/momo2020/img/intro/qrcode-pattern.png) 10px 10px no-repeat,linear-gradient(to top,#c1177c,#e11b90)",
+                            }, children: (0, jsx_runtime_1.jsxs)("div", { className: "px-5 py-10 text-center", children: [title && ((0, jsx_runtime_1.jsx)("h4", { className: "mb-5 text-base font-semibold text-white", children: title })), (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [isQrForAll && ((0, jsx_runtime_1.jsx)("div", { className: "absolute -top-2 left-1/2 z-[5] -translate-x-1/2", children: (0, jsx_runtime_1.jsx)("img", { src: "https://homepage.momocdn.net/fileuploads/svg/momo-file-231211170324.svg", alt: "Title QR all" }) })), (0, jsx_runtime_1.jsx)(QRCodeScan, { img: qrImage, isQrForAll: isQrForAll, children: qrLink && ((0, jsx_runtime_1.jsx)(qrcode_react_1.default, { value: qrLink, size: 215, renderAs: "svg", imageSettings: {
+                                                        src: `${logoQr ||
+                                                            "https://homepage.momocdn.net/pwa/images/logoMomox50.png"}`,
+                                                        x: null,
+                                                        y: null,
+                                                        height: 50,
+                                                        width: 50,
+                                                        excavate: true,
+                                                    }, level: "H" })) })] })] }) })] }) }) }) }));
+};
+exports.DialogQr = DialogQr;

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

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

package/publish/cjs/index.js

@@ -19,6 +19,7 @@ __exportStar(require("./components/Breadcrumb"), exports);
 __exportStar(require("./components/Button"), exports);
 __exportStar(require("./components/Checkbox"), exports);
 __exportStar(require("./components/Dialog"), exports);
+__exportStar(require("./components/DialogQr"), exports);
 __exportStar(require("./components/AlertDialog"), exports);
 __exportStar(require("./components/IconButton"), exports);
 __exportStar(require("./components/Pagination"), exports);