@momo-webplatform/mobase 0.0.22 → 0.0.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-webplatform/mobase",
-  "version": "0.0.22",
+  "version": "0.0.23",
   "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",
@@ -65,12 +65,12 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "cmdk": "^0.2.0",
+    "color": "^4.2.3",
     "date-fns": "^3.2.0",
     "deepmerge": "^4.3.1",
     "dlv": "^1.1.3",
     "flat": "^3.0.1",
     "framer-motion": "^11.0.3",
-    "fs": "0.0.1-security",
     "lodash": "^4.17.21",
     "lodash.foreach": "^4.5.0",
     "lodash.omit": "^4.5.0",

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

@@ -0,0 +1,98 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fontSizes = void 0;
+function fontSizes(prefix) {
+    const fontSizes = {
+        xxs: [
+            `var(--${prefix}-font-size-xxs)`,
+            {
+                lineHeight: "1rem",
+            },
+        ],
+        xs: [
+            `var(--${prefix}-font-size-xs)`,
+            {
+                lineHeight: "1rem",
+            },
+        ],
+        sm: [
+            `var(--${prefix}-font-size-sm)`,
+            {
+                lineHeight: "1.25rem",
+            },
+        ],
+        base: [
+            `var(--${prefix}-font-size-base)`,
+            {
+                lineHeight: "1.5rem",
+            },
+        ],
+        lg: [
+            `var(--${prefix}-font-size-lg)`,
+            {
+                lineHeight: "1.75rem",
+            },
+        ],
+        xl: [
+            `var(--${prefix}-font-size-xl)`,
+            {
+                lineHeight: "1.75rem",
+            },
+        ],
+        "2xl": [
+            `var(--${prefix}-font-size-2xl)`,
+            {
+                lineHeight: "2rem",
+            },
+        ],
+        "3xl": [
+            `var(--${prefix}-font-size-3xl)`,
+            {
+                lineHeight: "2.25rem",
+            },
+        ],
+        "4xl": [
+            `var(--${prefix}-font-size-4xl)`,
+            {
+                lineHeight: "2.5rem",
+            },
+        ],
+        "5xl": [
+            `var(--${prefix}-font-size-5xl)`,
+            {
+                lineHeight: "3.5rem",
+                letterSpacing: "-0.075rem",
+            },
+        ],
+        "6xl": [
+            `var(--${prefix}-font-size-6xl)`,
+            {
+                lineHeight: "4.5rem",
+                letterSpacing: "-0.09375rem",
+            },
+        ],
+        "7xl": [
+            `var(--${prefix}-font-size-7xl)`,
+            {
+                lineHeight: "5rem",
+                letterSpacing: "-0.1125rem",
+            },
+        ],
+        "8xl": [
+            `var(--${prefix}-font-size-8xl)`,
+            {
+                lineHeight: "6.5rem",
+                letterSpacing: "-0.15rem",
+            },
+        ],
+        "9xl": [
+            `var(--${prefix}-font-size-9xl)`,
+            {
+                lineHeight: "8rem",
+                letterSpacing: "-0.2rem",
+            },
+        ],
+    };
+    return fontSizes;
+}
+exports.fontSizes = fontSizes;

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

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.layout = void 0;
+exports.layout = {
+    "spacing-unit": 4,
+    "disabled-opacity": 0.5, // Numeric values don't need quotes
+    "font-size": {
+        xxs: "0.625rem",
+        xs: "0.75rem",
+        sm: "0.875rem",
+        base: "1rem",
+        lg: "1.125rem",
+        xl: "1.25rem",
+        "2xl": "1.5rem",
+        "3xl": "1.875rem",
+        "4xl": "2.25rem",
+        "5xl": "3rem",
+        "6xl": "3.75rem",
+        "7xl": "4.5rem",
+        "8xl": "6rem",
+        "9xl": "8rem",
+    },
+    radius: {
+        sm: "0.125rem",
+        base: "0.25rem",
+        md: "0.375rem",
+        lg: "0.5rem",
+        xl: "0.75rem",
+        "2xl": "1rem",
+        "3xl": "1.5rem",
+    },
+    "box-shadow": {
+        small: "0px 0px 5px 0px rgb(0 0 0 / 0.02), 0px 2px 10px 0px rgb(0 0 0 / 0.06), 0px 0px 1px 0px rgb(0 0 0 / 0.3)",
+        medium: "0px 0px 15px 0px rgb(0 0 0 / 0.03), 0px 2px 30px 0px rgb(0 0 0 / 0.08), 0px 0px 1px 0px rgb(0 0 0 / 0.3)",
+        large: "0px 0px 30px 0px rgb(0 0 0 / 0.04), 0px 30px 60px 0px rgb(0 0 0 / 0.12), 0px 0px 1px 0px rgb(0 0 0 / 0.3)",
+    },
+};

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

@@ -16,27 +16,32 @@ exports.mobaseTW = void 0;
 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 foundation_1 = require("./foundation");
-const lodash_foreach_1 = __importDefault(require("lodash.foreach"));
-const parsedColorsCache = {};
-const resolveConfig = () => {
+const object_1 = require("./utils/object");
+const theme_1 = require("./utils/theme");
+const colors_1 = require("./colors");
+const layout_1 = require("./layout");
+const animations_1 = require("./animations");
+const font_sizes_1 = require("./font-sizes");
+const radius_1 = require("./radius");
+// import { animations } from "./animations";
+// import { fontSizes } from "./font-sizes";
+// import { radius } from "./radius";
+const resolveConfig = (prefix) => {
     const resolved = {
         utilities: {},
         colors: {},
     };
-    const flatColors = (0, utils_1.flattenThemeObject)(foundation_1.colors);
+    const flatColors = (0, object_1.flattenThemeObject)(colors_1.colors);
+    const flatLayout = layout_1.layout;
     const cssSelector = ":root";
     resolved.utilities[cssSelector] = {};
-    (0, lodash_foreach_1.default)(flatColors, (colorValue, colorName) => {
+    // Color
+    Object.entries(flatColors).forEach(([colorName, colorValue]) => {
         if (!colorValue)
             return;
         try {
-            const parsedColor = parsedColorsCache[colorValue] ||
-                (0, color_1.default)(colorValue).rgb().round().array();
-            parsedColorsCache[colorValue] = parsedColor;
-            const [r, g, b] = parsedColor;
-            const colorVar = `--${colorName}`;
+            const [r, g, b] = (0, color_1.default)(colorValue).rgb().array();
+            const colorVar = `--${prefix}-${colorName}`;
             // Set the css variable in "@layer utilities"
             resolved.utilities[cssSelector][colorVar] = `${r} ${g} ${b}`;
             resolved.colors[colorName] = `rgb(var(${colorVar}) / <alpha-value>)`;
@@ -46,10 +51,37 @@ const resolveConfig = () => {
             console.log("error", error?.message);
         }
     });
+    // Layout
+    Object.entries(flatLayout).forEach(([key, value]) => {
+        if (!value)
+            return;
+        const layoutVariablePrefix = `--${prefix}-${key}`;
+        if (typeof value === "object") {
+            Object.entries(value).forEach(([nestedKey, nestedValue]) => {
+                const nestedLayoutVariable = `${layoutVariablePrefix}-${nestedKey}`;
+                resolved.utilities[cssSelector][nestedLayoutVariable] = nestedValue;
+            });
+        }
+        else if (key === "spacing-unit") {
+            resolved.utilities[cssSelector][layoutVariablePrefix] = value;
+            const spacingScale = (0, theme_1.generateSpacingScale)(Number(value));
+            Object.entries(spacingScale).forEach(([scaleKey, scaleValue]) => {
+                const spacingVariable = `${layoutVariablePrefix}-${scaleKey}`;
+                resolved.utilities[cssSelector][spacingVariable] = scaleValue;
+            });
+        }
+        else {
+            const formattedValue = layoutVariablePrefix.includes("opacity") && typeof value === "number"
+                ? value.toString().replace(/^0\./, ".")
+                : value;
+            resolved.utilities[cssSelector][layoutVariablePrefix] = formattedValue;
+        }
+    });
     return resolved;
 };
 const mobaseTW = () => {
-    const resolved = resolveConfig();
+    const prefix = "mobase";
+    const resolved = resolveConfig(prefix);
     return (0, plugin_js_1.default)(({ addBase, addUtilities }) => {
         addBase({
             ":root": {
@@ -67,16 +99,28 @@ const mobaseTW = () => {
         theme: {
             extend: {
                 colors: {
-                    ...foundation_1.colors,
+                    ...colors_1.colors,
                     ...resolved?.colors,
                 },
                 boxShadow: {
-                    ...foundation_1.boxShadows,
+                    small: `var(--${prefix}-box-shadow-small)`,
+                    medium: `var(--${prefix}-box-shadow-medium)`,
+                    large: `var(--${prefix}-box-shadow-large)`,
+                },
+                // fontSize: {
+                //   ...fontSizes,
+                // },
+                borderRadius: {
+                    ...(0, radius_1.radius)(prefix),
                 },
                 fontSize: {
-                    ...foundation_1.fontSizes,
+                    ...(0, font_sizes_1.fontSizes)(prefix),
+                },
+                spacing: {
+                    unit: `var(--${prefix}-spacing-unit)`,
+                    ...(0, theme_1.createSpacingUnits)(prefix),
                 },
-                ...foundation_1.animations,
+                ...animations_1.animations,
             },
         },
     });

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.radius = void 0;
+function radius(prefix) {
+    const radius = {
+        sm: `var(--${prefix}-radius-sm)`,
+        DEFAULT: `var(--${prefix}-radius-base)`,
+        md: `var(--${prefix}-radius-md)`,
+        lg: `var(--${prefix}-radius-lg)`,
+        xl: `var(--${prefix}-radius-xl)`,
+        "2xl": `var(--${prefix}-radius-2xl)`,
+        "3xl": `var(--${prefix}-radius-3xl)`,
+    };
+    return radius;
+}
+exports.radius = radius;

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

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mappedSpacingScaleKeys = exports.spacingScaleKeys = void 0;
+exports.spacingScaleKeys = [
+    "0",
+    "xs",
+    "sm",
+    "md",
+    "lg",
+    "xl",
+    "2xl",
+    "3xl",
+    "4xl",
+    "5xl",
+    "6xl",
+    "7xl",
+    "8xl",
+    "9xl",
+    "1",
+    "2",
+    "3",
+    "3.5",
+    "4",
+    "5",
+    "6",
+    "7",
+    "8",
+    "9",
+    "10",
+    "11",
+    "12",
+    "13",
+    "14",
+    "15",
+    "16",
+    "17",
+    "18",
+    "20",
+    "24",
+    "28",
+    "32",
+    "36",
+    "40",
+    "44",
+    "48",
+    "52",
+    "56",
+    "60",
+    "64",
+    "72",
+    "80",
+    "96",
+];
+exports.mappedSpacingScaleKeys = exports.spacingScaleKeys.map((key) => `unit-${key}`);

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

@@ -1,23 +1,44 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.flattenThemeObject = exports.isBaseTheme = void 0;
-const flat_1 = require("flat");
-/**
- * Determines if the theme is a base theme
- *
- * @param theme string
- * @returns "light" | "dark
- */
-const isBaseTheme = (theme) => theme === "light" || theme === "dark";
-exports.isBaseTheme = isBaseTheme;
-const removeDefaultKeys = (obj) => {
+exports.flattenThemeObject = exports.removeDefaultKeys = exports.swapColorValues = void 0;
+const flat_1 = __importDefault(require("flat"));
+function swapColorValues(colors) {
+    const swappedColors = {};
+    const keys = Object.keys(colors);
+    const length = keys.length;
+    for (let i = 0; i < length / 2; i++) {
+        const key1 = keys[i];
+        const key2 = keys[length - 1 - i];
+        // @ts-ignore
+        swappedColors[key1] = colors[key2];
+        // @ts-ignore
+        swappedColors[key2] = colors[key1];
+    }
+    if (length % 2 !== 0) {
+        const middleKey = keys[Math.floor(length / 2)];
+        // @ts-ignore
+        swappedColors[middleKey] = colors[middleKey];
+    }
+    return swappedColors;
+}
+exports.swapColorValues = swapColorValues;
+function removeDefaultKeys(obj) {
     const newObj = {};
     for (const key in obj) {
-        const newKey = key.endsWith("-DEFAULT") ? key.replace("-DEFAULT", "") : key;
-        newObj[newKey] = obj[key];
+        if (key.endsWith("-DEFAULT")) {
+            // @ts-ignore
+            newObj[key.replace("-DEFAULT", "")] = obj[key];
+            continue;
+        }
+        // @ts-ignore
+        newObj[key] = obj[key];
     }
     return newObj;
-};
+}
+exports.removeDefaultKeys = removeDefaultKeys;
 /**
  *
  * Flatten theme object and remove default keys
@@ -25,9 +46,7 @@ const removeDefaultKeys = (obj) => {
  * @param obj theme object
  * @returns object with flattened keys
  */
-const flattenThemeObject = (obj) => removeDefaultKeys(
-// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
-(0, flat_1.flatten)(obj, {
+const flattenThemeObject = (obj) => removeDefaultKeys((0, flat_1.default)(obj, {
     safe: true,
     delimiter: "-",
 }));

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

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createSpacingUnits = exports.generateSpacingScale = void 0;
+const types_1 = require("../types");
+/**
+ * Determines if the theme is a base theme
+ *
+ * @param theme string
+ * @returns "light" | "dark
+ */
+const ROOT_FONT_SIZE = 16;
+const baseScale = [
+    0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 18,
+];
+const extendedScale = [
+    20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 72, 80, 96,
+];
+const generateSpacingScale = (spacingUnit) => {
+    const scaleLabels = {
+        xs: 2,
+        sm: 3,
+        md: 4,
+        lg: 5.5,
+        xl: 9,
+        "2xl": 12,
+        "3xl": 20,
+        "4xl": 30,
+        "5xl": 56,
+        "6xl": 72,
+        "7xl": 96,
+        "8xl": 128,
+        "9xl": 160,
+    };
+    const scale = { 0: "0px" };
+    Object.entries(scaleLabels).forEach(([label, multiplier]) => {
+        scale[label] = multiplier
+            ? `${(spacingUnit * multiplier) / ROOT_FONT_SIZE}rem`
+            : `${spacingUnit / ROOT_FONT_SIZE}rem`;
+    });
+    baseScale.forEach((i) => {
+        let key = `${i}`;
+        // if the key has decimal e.g 3.5 change it to "3-5" format
+        if (key.includes(".")) {
+            const [first, second] = key.split(".");
+            key = `${first}_${second}`;
+        }
+        scale[key] = `${(spacingUnit * i) / ROOT_FONT_SIZE}rem`;
+    });
+    extendedScale.forEach((i) => {
+        const key = `${i}`;
+        scale[key] = `${(spacingUnit * i) / ROOT_FONT_SIZE}rem`;
+    });
+    return scale;
+};
+exports.generateSpacingScale = generateSpacingScale;
+function createSpacingUnits(prefix) {
+    const result = types_1.spacingScaleKeys.reduce((acc, key) => {
+        let value = `var(--${prefix}-spacing-unit-${key})`;
+        if (key.includes(".")) {
+            const [first, second] = key.split(".");
+            value = `var(--${prefix}-spacing-unit-${first}_${second})`;
+        }
+        return {
+            ...acc,
+            [`${key}`]: value,
+        };
+    }, {});
+    return result;
+}
+exports.createSpacingUnits = createSpacingUnits;