@momo-webplatform/mobase 0.0.11 → 0.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-webplatform/mobase",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "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",
@@ -29,7 +29,7 @@
   "dependencies": {
     "@floating-ui/core": "^1.6.0",
     "@floating-ui/react": "^0.26.2",
-    "@heroicons/react": "1.0.6",
+    "@heroicons/react": "^2.1.1",
     "@momo-webplatform/mobase": "^0.0.7",
     "@radix-ui/primitive": "^1.0.1",
     "@radix-ui/react-accordion": "^1.1.2",
@@ -89,6 +89,7 @@
     "vaul": "^0.8.0"
   },
   "devDependencies": {
+    "@next/eslint-plugin-next": "^14.1.4",
     "@storybook/addon-essentials": "^7.6.7",
     "@storybook/addon-interactions": "^7.6.7",
     "@storybook/addon-links": "^7.6.7",
@@ -106,21 +107,24 @@
     "@types/react": "^18.2.37",
     "@types/react-dom": "^18.2.15",
     "@types/react-syntax-highlighter": "^15.5.10",
-    "@typescript-eslint/eslint-plugin": "^6.10.0",
-    "@typescript-eslint/parser": "^6.10.0",
+    "@typescript-eslint/eslint-plugin": "^7.3.1",
+    "@typescript-eslint/parser": "^7.3.1",
     "@vitejs/plugin-react": "^4.1.1",
     "@vitest/coverage-v8": "^0.34.6",
     "@vitest/ui": "^0.34.6",
     "autoprefixer": "^10.4.16",
-    "eslint": "^8.53.0",
-    "eslint-config-next": "^14.0.1",
-    "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.15",
+    "eslint": "^8.57.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-config-next": "^14.1.4",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-import-resolver-alias": "^1.1.2",
+    "eslint-plugin-etc": "^2.0.3",
+    "eslint-plugin-json-schema-validator": "^4.9.0",
+    "eslint-plugin-mdx": "^3.1.5",
+    "eslint-plugin-prettier": "^5.1.3",
     "jsdom": "^22.1.0",
     "markdown-toc": "^1.2.0",
-    "postcss": "^8.4.31",
     "prettier": "^3.0.3",
     "prettier-plugin-organize-imports": "^3.2.3",
     "prettier-plugin-tailwindcss": "^0.5.6",

package/publish/cjs/components/AlertDialog/AlertDialog.js

@@ -57,6 +57,6 @@ AlertDialogDescription.displayName =
 const AlertDialogAction = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(AlertDialogPrimitive.Action, { ref: ref, className: (0, utils_1.cn)((0, Button_1.buttonVariants)(), "", className), ...props })));
 exports.AlertDialogAction = AlertDialogAction;
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-const AlertDialogCancel = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(AlertDialogPrimitive.Cancel, { ref: ref, className: (0, utils_1.cn)((0, Button_1.buttonVariants)({ variant: "outline" }), "mt-2 sm:mt-0", className), ...props })));
+const AlertDialogCancel = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(AlertDialogPrimitive.Cancel, { ref: ref, className: (0, utils_1.cn)((0, Button_1.buttonVariants)({ variant: "secondary" }), "mt-2 sm:mt-0", className), ...props })));
 exports.AlertDialogCancel = AlertDialogCancel;
 AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;

package/publish/cjs/components/Select/Select.js

@@ -26,7 +26,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectScrollDownButton = exports.SelectScrollUpButton = exports.SelectSeparator = exports.SelectItem = exports.SelectLabel = exports.SelectContent = exports.SelectTrigger = exports.SelectValue = exports.SelectGroup = exports.Select = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = __importStar(require("react"));
-const solid_1 = require("@heroicons/react/solid");
+const solid_1 = require("@heroicons/react/16/solid");
 const SelectPrimitive = __importStar(require("@radix-ui/react-select"));
 const utils_1 = require("../../helpers/utils");
 const Select = SelectPrimitive.Root;

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

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextArea = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const outline_1 = require("@heroicons/react/24/outline");
+const solid_1 = require("@heroicons/react/24/solid");
+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 var(--gray-500) inset;
+            }
+
+            .mobase-text-area-box:focus {
+              box-shadow: 0px 0px 0px 1px rgb(235, 47, 150) inset;
+            }
+
+            .mobase-text-area-box:disabled {
+              box-shadow: none;
+            }
+
+            .mobase-text-area-error {
+              .mobase-text-area-label {
+                color: #f74e57;
+              }
+
+              .mobase-text-area-box {
+                box-shadow: 0px 0px 0px 1px #f74e57 inset;
+                border-color: #f74e57;
+              }
+
+              .mobase-text-area-message span {
+                color: #f74e57;
+              }
+            }
+          ` })] }));
+});

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

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

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

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextInput = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const outline_1 = require("@heroicons/react/24/outline");
+const solid_1 = require("@heroicons/react/24/solid");
+const utils_1 = require("../../helpers/utils");
+exports.TextInput = (0, react_1.forwardRef)(({ disabled, isError, message, label, className, inputClassName, withClearButton, onChange, onFocus, onClickClear, value, defaultValue, type = "text", ...restProps }, ref) => {
+    const [clearable, setClearable] = (0, react_1.useState)(false);
+    const rootRef = (0, react_1.useRef)(null);
+    const handleShowClearButton = (inputValue) => {
+        if (inputValue && !clearable) {
+            setClearable(true);
+        }
+        if (!inputValue && clearable) {
+            setClearable(false);
+        }
+    };
+    const onChangeFactory = (event) => {
+        if (withClearButton)
+            handleShowClearButton(event.target.value);
+        onChange?.(event);
+    };
+    const onFocusFactory = (event) => {
+        if (withClearButton)
+            handleShowClearButton(event.target.value);
+        onFocus?.(event);
+    };
+    const handleClear = () => {
+        const inputTarget = rootRef.current?.querySelector("input");
+        if (!inputTarget)
+            return;
+        onClickClear?.(inputTarget.value);
+        inputTarget.value = "";
+        inputTarget.focus();
+        setClearable(false);
+    };
+    (0, react_1.useEffect)(() => {
+        handleShowClearButton(defaultValue || value);
+    }, [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 var(--gray-500) inset;
+            }
+
+            .mobase-text-input-box:focus {
+                box-shadow: 0px 0px 0px 1px rgb(235, 47, 150) inset;
+            }
+
+            .mobase-text-input-error {
+              .mobase-text-input-label {
+                color: #f74e57;
+              }
+
+              .mobase-text-input-box {
+                box-shadow: 0px 0px 0px 1px #f74e57 inset;
+                border-color: #f74e57;
+              }
+
+              .mobase-text-input-message span {
+                color: #f74e57;
+              }
+            }
+          ` })] }));
+});

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

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

package/publish/cjs/index.js

@@ -18,33 +18,10 @@ __exportStar(require("./components/Accordion"), exports);
 __exportStar(require("./components/Breadcrumb"), exports);
 __exportStar(require("./components/Button"), exports);
 __exportStar(require("./components/Checkbox"), exports);
-__exportStar(require("./components/RadioGroup"), exports);
 __exportStar(require("./components/AlertDialog"), exports);
-__exportStar(require("./components/Avatar"), exports);
-__exportStar(require("./components/Alert"), exports);
-__exportStar(require("./components/Badge"), exports);
-__exportStar(require("./components/Calendar"), exports);
-__exportStar(require("./components/Card"), exports);
-__exportStar(require("./components/Collapsible"), exports);
-__exportStar(require("./components/Command"), exports);
-__exportStar(require("./components/Dialog"), exports);
-__exportStar(require("./components/Drawer"), exports);
-__exportStar(require("./components/DropdownMenu"), exports);
-__exportStar(require("./components/HoverCard"), exports);
 __exportStar(require("./components/IconButton"), exports);
-__exportStar(require("./components/Input"), exports);
-__exportStar(require("./components/Label"), exports);
-__exportStar(require("./components/Menubar"), exports);
-__exportStar(require("./components/NavigationMenu"), exports);
 __exportStar(require("./components/Popover"), exports);
-__exportStar(require("./components/Progress"), exports);
-__exportStar(require("./components/Select"), exports);
-__exportStar(require("./components/Sheet"), exports);
-__exportStar(require("./components/Skeleton"), exports);
-__exportStar(require("./components/Switch"), exports);
-__exportStar(require("./components/Table"), exports);
 __exportStar(require("./components/Tabs"), exports);
-__exportStar(require("./components/Textarea"), exports);
-__exportStar(require("./components/Toast"), exports);
+__exportStar(require("./components/TextArea"), exports);
 __exportStar(require("./components/Tooltip"), exports);
-__exportStar(require("./components/Slider"), exports);
+__exportStar(require("./components/TextInput"), exports);