@momo-webplatform/mobase 0.2.93 → 0.2.94

package/README.md

@@ -36,7 +36,7 @@ import { mobaseTW } from "@momo-webplatform/mobase";
 const config = {
   content: [
     // ...
-   "node_modules/@momo-webplatform/mobase/dist/esm/**/*.js",
+    "node_modules/@momo-webplatform/mobase/dist/esm/**/*.js",
   ],
   darkMode: ["class"],
   plugins: [mobaseTW()],
@@ -63,6 +63,7 @@ const nextConfig = {
 }
 export default nextConfig;
 ```
+
 ### Install Mobase React
 
 1. Run the following command to install `@momo-webplatform/mobase`:
@@ -107,3 +108,66 @@ export default function MyPage() {
 If you need the Figma files for the components you can check out our website for more information:
 
 🎨 [Get access to the Figma design files](https://dev1.momo.vn:3000/figma/)
+
+## Dependencies
+
+### `peerDependencies`
+
+`peerDependencies` are dependencies which must be installed and have their versions controlled by the user of `mobase` in order for them to work correctly.
+
+There are three types of `peerDependencies` in `mobase`:
+
+#### 1. Framework
+
+These dependencies are the environment in which `mobase` runs. The list of dependencies of this type are:
+
+- `react`
+- `next`
+
+#### 2. User-Configurable Libraries
+
+These dependencies require configuration or data directly from the user.
+To prevent issues from breaking changes, it is essential that the versions used by `mobase` and the user are identical.
+This is particularly important for internal changes not covered by official documentation (e.g., `react-hook-form`).
+
+- `embla-carousel`: the base package for `embla-carousel-react`.
+
+- `embla-carousel-react`:
+
+  Check the implementation of [`Carousel` component](./src/components/Carousel/Carousel.tsx). The user may pass their `opts` or `plugins` into this component for customizing.
+
+- `react-hook-form`:
+
+  Check the implementation of [form-related components](./src/components/Form/Form.tsx). The user need to pass properties created by `useForm` on their side to make use of these components (`Form` component of `mobase` is `FormProvider` of `react-hook-form`).
+
+- `react-day-picker`:
+
+  Check the implementation of [`Calendar` component](./src/components/Calendar/Calendar.tsx). The user can customize this component by passing props of `DayPicker` component from `react-day-picker`.
+
+#### 3. Related Libraries
+
+These dependencies are required by the user-configurable libraries listed above.
+
+- `@hookform/resolvers`: A dependency of `react-hook-form`.
+
+- `zod`: A dependency of `@hookform/resolvers`.
+
+- `embla-carousel-autoplay`: A dependency of `embla-carousel`.
+
+Please refer to this [JIRA ticket](https://atlassiansuite.mservice.com.vn:8443/browse/WP-1303) for additional context.
+
+### `overrides` (`npm`, `pnpm`)/`resolutions` (`yarn`)
+
+> **Important:** Use the following instructions with caution.
+> Installing package versions not specified in `mobase`'s `package.json` may lead to unexpected errors, crashes, or other malfunctions.
+> The `mobase` development team cannot guarantee support for issues resulting from such modifications.
+
+To override a package version, you can utilize the `overrides`/`resolutions` feature of your package manager. This is useful in situations where the `mobase` team may have missed a peer dependency that conflicts with your project's version of the same package.
+
+Consult the official documentation for more information:
+
+- **`npm`/`pnpm`**: [doc](https://docs.npmjs.com/cli/v11/configuring-npm/package-json#overrides).
+
+- **`yarn` (legacy)**: [doc](https://classic.yarnpkg.com/lang/en/docs/selective-version-resolutions/).
+
+- **`yarn` (modern)**: [doc](https://yarnpkg.com/configuration/manifest#resolutions).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-webplatform/mobase",
-  "version": "0.2.93",
+  "version": "0.2.94",
   "description": "Mobase is the UI framework upon we build product experiences at MoMo.vn, base on Radix primitives, and Tailwind CSS.",
   "author": "MoMo - Front-end dev",
   "license": "MIT",
@@ -29,49 +29,56 @@
   },
   "sideEffects": false,
   "devDependencies": {
+    "@hookform/resolvers": "^3.9.0",
     "@swc/core": "^1.4.0",
     "@turbo/gen": "^1.12.4",
     "@types/color": "^3.0.6",
     "@types/eslint": "^8.56.5",
-    "@types/lodash.omit": "^4.5.9",
     "@types/node": "^20.11.24",
     "@types/react": "^18.2.61",
     "@types/react-dom": "^18.2.19",
     "concurrently": "^8.2.2",
-    "eslint": "^8.57.0",
-    "prettier-plugin-tailwindcss": "^0.5.11",
+    "embla-carousel": "^8.3.0",
+    "embla-carousel-autoplay": "^8.3.0",
+    "embla-carousel-react": "^8.3.0",
+    "eslint": "^8.57.1",
+    "next": "^13.0.0",
     "react": "^18.2.0",
+    "react-day-picker": "^8.10.1",
+    "react-hook-form": "^7.53.1",
     "tsup": "^8.0.2",
     "typescript": "^5.3.3",
+    "zod": "^3.23.8",
     "@repo/eslint-config": "0.0.0",
     "@repo/typescript-config": "0.0.0"
   },
+  "peerDependencies": {
+    "@hookform/resolvers": "^3.9.0",
+    "embla-carousel": "^8.3.0",
+    "embla-carousel-autoplay": "^8.3.0",
+    "embla-carousel-react": "^8.3.0",
+    "next": "^13.0.0",
+    "react": "^18.2.0",
+    "react-day-picker": "^8.10.1",
+    "react-hook-form": "^7.53.1",
+    "zod": "^3.23.8"
+  },
   "dependencies": {
     "@artsy/fresnel": "^8.0.1",
     "@heroicons/react": "^2.1.1",
-    "@hookform/resolvers": "^3.9.0",
-    "@radix-ui/primitive": "^1.0.1",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-aspect-ratio": "^1.0.3",
-    "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-checkbox": "^1.0.4",
-    "@radix-ui/react-collapsible": "^1.0.3",
-    "@radix-ui/react-compose-refs": "^1.0.1",
-    "@radix-ui/react-context": "^1.0.1",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
-    "@radix-ui/react-hover-card": "^1.0.7",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
-    "@radix-ui/react-menubar": "^1.0.4",
     "@radix-ui/react-navigation-menu": "^1.1.4",
     "@radix-ui/react-popover": "^1.0.7",
-    "@radix-ui/react-presence": "^1.0.1",
     "@radix-ui/react-primitive": "^1.0.3",
     "@radix-ui/react-progress": "^1.0.3",
     "@radix-ui/react-radio-group": "^1.1.3",
-    "@radix-ui/react-roving-focus": "^1.0.4",
     "@radix-ui/react-select": "~2.1.0",
     "@radix-ui/react-slider": "^1.1.2",
     "@radix-ui/react-slot": "^1.1.0",
@@ -79,42 +86,26 @@
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toast": "^1.1.5",
     "@radix-ui/react-tooltip": "^1.0.7",
-    "@radix-ui/react-use-previous": "^1.0.1",
-    "@radix-ui/react-use-size": "^1.0.1",
-    "add": "^2.0.6",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "cmdk": "^0.2.1",
     "color": "^4.2.3",
-    "color2k": "^2.0.3",
-    "cva": "1.0.0-beta.1",
     "date-fns": "^3.6.0",
-    "deepmerge": "^4.3.1",
-    "embla-carousel-autoplay": "^8.3.0",
-    "embla-carousel-react": "^8.3.0",
     "flat": "6.0.1",
     "html-react-parser": "^5.1.10",
     "html-to-image": "^1.11.13",
     "input-otp": "^1.4.2",
     "lodash": "^4.17.21",
-    "lodash-es": "^4.17.21",
-    "lodash.foreach": "^4.5.0",
-    "lodash.omit": "^4.5.0",
     "lucide-react": "^0.307.0",
     "lunisolar": "^2.5.0",
     "motion": "^12.6.3",
-    "next": "^13.0.0",
     "qrcode.react": "4.2.0",
-    "react-day-picker": "8.10.1",
-    "react-hook-form": "^7.53.1",
     "react-use": "^17.5.0",
     "react-use-measure": "^2.1.7",
-    "swiper": "^8.4.4",
     "tailwind-merge": "2.4.0",
     "tailwindcss": "*",
     "ua-parser-js": "^1.0.38",
-    "vaul": "^1.1.2",
-    "zod": "^3.23.8"
+    "vaul": "^1.1.2"
   },
   "scripts": {
     "build:cjs": "tsup --format cjs --external react",