@momo-webplatform/mobase 0.2.92 → 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).