npm package: @momo-webplatform/mobase
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
Latest version: 1.0.7

<p align="center">
  <a href="https://www.momo.vn/">
      <img width="100%" src="https://homepage.momocdn.net/img/momo-upload-api-240509152105-638508648658180278.jpg" alt="Mobase UI library" />
  </a>
</p>

# Mobase

[![](https://img.shields.io/npm/v/@momo-webplatform/mobase?style=plastic)](https://www.npmjs.com/package/@momo-webplatform/mobase)
[![](https://img.shields.io/npm/dw/@momo-webplatform/mobase?style=plastic)](https://www.npmjs.com/package/@momo-webplatform/mobase)

Mobase is MoMo website design system, a collection of guidelines, components and tools for creating intuitive, user-first experiences.

With Mobase, you get a range of pre-built, customizable components that are easy to use and integrate into your React projects. It also comes with full TypeScript support, ensuring type safety and developer-friendly experience.

<a href="https://dev1.momo.vn:3000/"><strong>Get Started with Mobase &rarr;</strong></a>

## Getting Started

Visit <a href="https://dev1.momo.vn:3000/" target="_blank">Mobase Docs</a> to get started.

### Setup Tailwind CSS

Install Tailwind CSS:

```bash
pnpm i autoprefixer postcss tailwindcss
pnpm tailwindcss init -p
```

Point Tailwind CSS to files you have `className=".."` in:

```javascript
import { mobaseTW } from "@momo-webplatform/mobase";

const config = {
  content: [
    // ...
    "node_modules/@momo-webplatform/mobase/dist/esm/**/*.js",
  ],
  darkMode: ["class"],
  plugins: [mobaseTW()],
};

export default config;
```

Add Tailwind CSS to a CSS file:

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

Automatically transpile and bundle dependencies, update your `next.config.js` file to add the necessary configuration for Mobase:

```js filename="next.config.js"
/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ["@momo-webplatform/mobase"],
  ...
}
export default nextConfig;
```

### Install Mobase React

1. Run the following command to install `@momo-webplatform/mobase`:

```bash
npm i @momo-webplatform/mobase
```

2. Add the Mobase plugin to `tailwind.config.js`, and include content from `@momo-webplatform/mobase`:

```js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    // ...
    "node_modules/@momo-webplatform/mobase/lib/esm/**/*.js",
  ],
  plugins: [
    // ...
  ],
};
```

### Try it out

How you use Mobase React depends on your project setup. In general, you can just import the components you want to use from `@momo-webplatform/mobase` and use them in a React `.jsx` file:

```tsx
import { Button } from "@momo-webplatform/mobase";

export default function MyPage() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  );
}
```

## Figma

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).