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.

      npm install

3. To view the components, please run storybook to view them in browser

      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

      npm run test

   Testing and coverage can be checked by running this command.
2. Storybook testing

      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:

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:

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.