@momo-webplatform/mobase 0.0.16 → 0.0.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-webplatform/mobase",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "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",
@@ -71,11 +71,12 @@
     "date-fns": "^3.2.0",
     "deepmerge": "^4.3.1",
     "dlv": "^1.1.3",
-    "flat": "^6.0.1",
+    "flat": "^3.0.1",
     "flowbite-react": "^0.7.2",
     "framer-motion": "^11.0.3",
     "fs": "0.0.1-security",
     "lodash": "^4.17.21",
+    "lodash.foreach": "^4.5.0",
     "lodash.omit": "^4.5.0",
     "lucide-react": "^0.307.0",
     "next": "^13.0.0",

package/publish/cjs/components/TextArea/TextArea.js

@@ -9,11 +9,11 @@ const utils_1 = require("../../helpers/utils");
 exports.TextArea = (0, react_1.forwardRef)(({ disabled, isError, message, label, className, inputClassName, rows = 3, ...restProps }, ref) => {
     return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("relative", className, isError && "mobase-text-area-error"), children: [label && ((0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)("mobase-text-area-label absolute bg-white -top-2.5 px-1.5 left-2 text-sm", disabled ? "text-gray-400" : "text-gray-500"), children: label })), (0, jsx_runtime_1.jsx)("textarea", { disabled: disabled, ref: ref, className: (0, utils_1.cn)("mobase-text-area-box bg-white w-full transition-all rounded border border-gray-400 placeholder:text-base placeholder:text-gray-500 p-3 text-gray-900 focus:border-pink-500 disabled:bg-gray-50 disabled:border-gray-300 outline-none block", inputClassName), rows: rows, ...restProps }), message && ((0, jsx_runtime_1.jsxs)("div", { className: "mobase-text-area-message flex space-x-1 items-center mt-0.5", children: [isError ? ((0, jsx_runtime_1.jsx)(solid_1.XCircleIcon, { width: 16, height: 16, className: "text-red-500" })) : ((0, jsx_runtime_1.jsx)(outline_1.QuestionMarkCircleIcon, { width: 16, height: 16, className: "text-gray-500" })), (0, jsx_runtime_1.jsx)("span", { className: "text-gray-500 text-sm", children: message })] })), (0, jsx_runtime_1.jsx)("style", { children: `
             .mobase-text-area-box:hover {
-              box-shadow: 0px 0px 0px 1px hsl(var(--gray-400) / 1) inset;
+              box-shadow: 0px 0px 0px 1px rgb(var(--gray-400) / 1) inset;
             }
 
             .mobase-text-area-box:focus {
-              box-shadow: 0px 0px 0px 1px hsl(var(--pink-500) / 1) inset;
+              box-shadow: 0px 0px 0px 1px rgb(var(--pink-500) / 1) inset;
             }
 
             .mobase-text-area-box:disabled {
@@ -22,16 +22,16 @@ exports.TextArea = (0, react_1.forwardRef)(({ disabled, isError, message, label,
 
             .mobase-text-area-error {
               .mobase-text-area-label {
-                color: hsl(var(--red-500) / 1);
+                color: rgb(var(--red-500) / 1);
               }
 
               .mobase-text-area-box {
                 box-shadow: 0px 0px 0px 1px hsl(var(--red-500) / 1) inset;
-                border-color: hsl(var(--red-500) / 1);
+                border-color: rgb(var(--red-500) / 1);
               }
 
               .mobase-text-area-message span {
-                color: hsl(var(--red-500) / 1);
+                color: rgb(var(--red-500) / 1);
               }
             }
           ` })] }));

package/publish/cjs/components/TextInput/TextInput.js

@@ -41,25 +41,25 @@ exports.TextInput = (0, react_1.forwardRef)(({ disabled, isError, message, label
     }, [value, defaultValue]);
     return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)(className, isError && "mobase-text-input-error"), ref: rootRef, children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [label && ((0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)("mobase-text-input-label absolute bg-white -top-2.5 px-1.5 left-2 text-sm", disabled ? "text-gray-400" : "text-gray-500"), children: label })), (0, jsx_runtime_1.jsx)("input", { disabled: disabled, type: type, ref: ref, className: (0, utils_1.cn)("mobase-text-input-box bg-white w-full transition-all rounded border border-gray-400 placeholder:text-base placeholder:text-gray-500 p-3 text-gray-900 h-12 focus:border-pink-500 disabled:bg-gray-50 disabled:border-gray-300 disabled:pointer-events-none block", inputClassName), onChange: onChangeFactory, onFocus: onFocusFactory, value: value, defaultValue: defaultValue, ...restProps }), withClearButton && clearable && ((0, jsx_runtime_1.jsx)("button", { "aria-label": "button", type: "button", className: "absolute right-3 top-1/2 -translate-y-1/2 shrink-0 cursor-pointer text-gray-500 duration-200 hover:opacity-70 disabled:pointer-events-none", disabled: disabled, onClick: handleClear, children: (0, jsx_runtime_1.jsx)(outline_1.XCircleIcon, { strokeWidth: 2, width: 20, height: 20 }) }))] }), message && ((0, jsx_runtime_1.jsxs)("div", { className: "mobase-text-input-message flex space-x-1 items-center mt-0.5", children: [isError ? ((0, jsx_runtime_1.jsx)(solid_1.XCircleIcon, { width: 16, height: 16, className: "text-red-500" })) : ((0, jsx_runtime_1.jsx)(outline_1.QuestionMarkCircleIcon, { width: 16, height: 16, className: "text-gray-500" })), (0, jsx_runtime_1.jsx)("span", { className: "text-gray-500 text-sm", children: message })] })), (0, jsx_runtime_1.jsx)("style", { children: `
             .mobase-text-input-box:hover {
-                box-shadow: 0px 0px 0px 1px hsl(var(--gray-400) / 1) inset;
+                box-shadow: 0px 0px 0px 1px rgb(var(--gray-400) / 1) inset;
             }
 
             .mobase-text-input-box:focus {
-                box-shadow: 0px 0px 0px 1px hsl(var(--pink-500) / 1) inset;
+                box-shadow: 0px 0px 0px 1px rgb(var(--pink-500) / 1) inset;
             }
 
             .mobase-text-input-error {
               .mobase-text-input-label {
-                color: hsl(var(--red-500) / 1);
+                color: rgb(var(--red-500) / 1);
               }
 
               .mobase-text-input-box {
-                box-shadow: 0px 0px 0px 1px hsl(var(--red-500) / 1) inset;
-                border-color: hsl(var(--red-500) / 1);
+                box-shadow: 0px 0px 0px 1px rgb(var(--red-500) / 1) inset;
+                border-color: rgb(var(--red-500) / 1);
               }
 
               .mobase-text-input-message span {
-                color: hsl(var(--red-500) / 1);
+                color: rgb(var(--red-500) / 1);
               }
             }
           ` })] }));

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

@@ -0,0 +1,20 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./colors"), exports);
+__exportStar(require("./font-sizes"), exports);
+__exportStar(require("./shadows"), exports);
+__exportStar(require("./animations"), exports);

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

@@ -17,58 +17,35 @@ const color_1 = __importDefault(require("color"));
 const plugin_js_1 = __importDefault(require("tailwindcss/plugin.js"));
 const utilities_1 = require("./utilities");
 const utils_1 = require("./utils");
-const colors_1 = require("./colors");
-const animations_1 = require("./animations");
-const shadows_1 = require("./shadows");
-const font_sizes_1 = require("./font-sizes");
+const foundation_1 = require("./foundation");
+const lodash_foreach_1 = __importDefault(require("lodash.foreach"));
 const parsedColorsCache = {};
 const resolveConfig = () => {
     const resolved = {
         utilities: {},
         colors: {},
     };
-    const flatColors = (0, utils_1.flattenThemeObject)(colors_1.colors);
-    const cssSelector = `:root`;
+    const flatColors = (0, utils_1.flattenThemeObject)(foundation_1.colors);
+    const cssSelector = ":root";
     resolved.utilities[cssSelector] = {};
-    for (const [colorName, colorValue] of Object.entries(flatColors)) {
+    (0, lodash_foreach_1.default)(flatColors, (colorValue, colorName) => {
         if (!colorValue)
             return;
         try {
             const parsedColor = parsedColorsCache[colorValue] ||
-                (0, color_1.default)(colorValue).hsl().round().array();
+                (0, color_1.default)(colorValue).rgb().round().array();
             parsedColorsCache[colorValue] = parsedColor;
-            const [h, s, l, defaultAlphaValue] = parsedColor;
+            const [r, g, b] = parsedColor;
             const colorVar = `--${colorName}`;
-            const opacityVar = `--${colorName}-opacity`;
             // Set the css variable in "@layer utilities"
-            resolved.utilities[cssSelector][colorVar] = `${h} ${s}% ${l}%`;
-            // If an alpha value was provided in the color definition, store it in a css variable
-            if (typeof defaultAlphaValue === "number") {
-                resolved.utilities[cssSelector][opacityVar] =
-                    defaultAlphaValue.toFixed(2);
-            }
-            // set the dynamic color in tailwind config theme.colors
-            // opacityVariable va opacityValue ở đâu ra, đm nó
-            resolved.colors[colorName] = ({ opacityVariable, opacityValue }) => {
-                // if the opacity is set  with a slash (e.g. bg-primary/90), use the provided value
-                if (!isNaN(+opacityValue)) {
-                    return `hsl(var(${colorVar}) / ${opacityValue})`;
-                }
-                // if no opacityValue was provided (=it is not parsable to a number)
-                // the nextuiOpacityVariable (opacity defined in the color definition rgb(0, 0, 0, 0.5)) should have the priority
-                // over the tw class based opacity(e.g. "bg-opacity-90")
-                // This is how tailwind behaves as for v3.2.4
-                if (opacityVariable) {
-                    return `hsl(var(${colorVar}) / var(${opacityVar}, var(${opacityVariable})))`;
-                }
-                return `hsl(var(${colorVar}) / var(${opacityVar}, 1))`;
-            };
+            resolved.utilities[cssSelector][colorVar] = `${r} ${g} ${b}`;
+            resolved.colors[colorName] = `rgb(var(${colorVar}) / <alpha-value>)`;
         }
         catch (error) {
             // eslint-disable-next-line no-console
             console.log("error", error?.message);
         }
-    }
+    });
     return resolved;
 };
 const mobaseTW = () => {
@@ -78,7 +55,7 @@ const mobaseTW = () => {
             ":root": {
                 "font-smooth--webkit": "antialiased",
             },
-            ...resolved?.utilities, //Xem lai cho nay, addBase
+            ...resolved?.utilities, // Xem lai cho nay, addBase
         });
         addUtilities({
             // ...resolved?.utilities, //Xem lai cho nay, addBase
@@ -90,34 +67,16 @@ const mobaseTW = () => {
         theme: {
             extend: {
                 colors: {
-                    ...colors_1.colors,
+                    ...foundation_1.colors,
                     ...resolved?.colors,
                 },
-                screens: {
-                    xs: "480px",
-                },
-                padding: {
-                    "2px": "calc(2px - var(--wg-border-width, 0px))",
-                    "4px": "calc(4px - var(--wg-border-width, 0px))",
-                    "6px": "calc(6px - var(--wg-border-width, 0px))",
-                    "8px": "calc(8px - var(--wg-border-width, 0px))",
-                    "12px": "calc(12px - var(--wg-border-width, 0px))",
-                    "14px": "14px",
-                    "16px": "calc(16px - var(--wg-border-width, 0px))",
-                },
-                outlineOffset: {
-                    3: "3px",
-                },
-                textUnderlineOffset: {
-                    3: "3px",
-                },
                 boxShadow: {
-                    ...shadows_1.boxShadows,
+                    ...foundation_1.boxShadows,
                 },
                 fontSize: {
-                    ...font_sizes_1.fontSizes,
+                    ...foundation_1.fontSizes,
                 },
-                ...animations_1.animations
+                ...foundation_1.animations,
             },
         },
     });