npm package: @revenera/swm-dm-ui
Description: Dynamic Monetization UI Component Library
Latest version: 1.0.2

# Dynamic Monetization UI

Dynamic Monetization UI is a component library built with React and Typescript with Vite. Other projects can use these components and inject them in their own UI projects.

This project contains various components, varying from basic components like button, dropdown, checkbox, form, table etc to some of composite components like view rate tables, view instances, rate table form, filters etc.

## Tech stack

1. React with Typescript and Vite
   Components are built in React and Typescript.
2. Storybook
   storybook is added to test/view the components in isolation.
3. Jest and React Testing Library
   For component test cases, react testing library with jest is used.
4. Material UI for design.
5. Vite for building the project.

## Getting Started

To setup this project locally,

1. Clone the repo.
2. Do npm install in the root folder.
   ```bash
      npm install
   ```
3. To view the components, please run storybook to view them in browser
   ```bash
      npm run storybook
   ```

## Components

to create a new component in the project, for example button component, create a folder name button inside components. Then below files can be created based on the component.

DMButton.tsx for component
DMButton.styles.ts for styles
DMbutton.test.tsx for unit test cases
DMbutton.stories.tsx for storybook implementation

## Testing

1. Testing of components
   ```bash
      npm run test
   ```
   Testing and coverage can be checked by running this command.
2. Storybook testing
   ```bash
      npm run storybook
   ```
   Componnets can be viewed/tested in isolation on the UI, by running this command.

## How to use this in your app?

### 1. Install the package and peer dependencies

#### Supported versions

| Package             | Supported Versions |
| ------------------- | ------------------ |
| react               | ^18.0.0 or ^19.0.0 |
| react-dom           | ^18.0.0 or ^19.0.0 |
| @mui/material       | ^6.4.0             |
| @mui/icons-material | ^6.4.0             |
| @mui/x-date-pickers | ^7.23.0            |
| @emotion/react      | ^11.0.0            |
| @emotion/styled     | ^11.0.0            |
| dayjs               | ^1.11.0            |
| axios               | ^1.12.2            |
| yup                 | ^1.7.1             |
| formik              | 2.4.6              |
| i18next             | ^25.6.0            |

#### Installation

If you do **not** already have compatible versions of the peer dependencies (such as React or MUI v6) installed in your project, install them along with the library:

```
npm install @revenera/swm-dm-ui react react-dom @mui/material @mui/icons-material @mui/x-date-pickers @emotion/react @emotion/styled dayjs axios yup formik i18next
```

If you already have compatible versions of some dependencies (for example, if your app already uses MUI v6), you can omit them from the install command:

```
npm install @revenera/swm-dm-ui
```

> **Note:** Having multiple versions of React or MUI in your app may cause issues. Always ensure your app's versions match the supported versions above.

### 2. Import and use a component

For example, to use the full Rate Table App:

```tsx
import { DMRateTableApp } from '@revenera/swm-dm-ui';

function App() {
  // Please make sure to pass the bearer token and api base url while loading your app component.
  return (
    <DMRateTableApp
      baseApiUrl="https://example.com/dynamicmonetization/v1"
      bearerToken="tokenString"
      apiUrl="/rate-tables"
      isProducer={true}
      locale="en"
    />
  );
}
```

Or to use the provider and a root component:

```tsx
import { DMProvider, DMRateTableRoot, useBearerToken } from '@revenera/swm-dm-ui';

function App() {
  // Please make sure to set the bearer token and api base url once while loading your app.
  const { setBearerToken } = useBearerToken();
  const { setBaseApiUrl } = useApiConfig();
  setBearerToken('Enter Your token hereeee');
  setBaseApiUrl('https://example.com/dynamicmonetization/v1');
  return (
    <DMProvider locale="en">
      <DMRateTableRoot apiUrl="/rate-tables" isProducer={true} />
    </DMProvider>
  );
}
```

### 3. How to set base api url and pass apiUrl in components?

To handle api url effectively, base api url can be set once while loading your app (see example above), and then in individual components, only relative path can be passed (in apiUrl prop).
Please check the above example demonstrating the same.

> **Note:** If an absolute url is passed in any individual component in apiUrl prop (example: apiUrl="https://example.com/dynamicmonetization/v1/api/rate-tables"), then the absolute url will be picked entirely for that component.

### 4. Peer dependencies

Make sure your app has compatible versions of React, MUI, Emotion, and dayjs. See `peerDependencies` in this package for required versions.