Aisera UI Component

This is a storybook project.

Getting Started

First, run the development server:

npm run dev

Story book development

To get started with component development, run the following command:

npm run storybook

We use storybook to document our components which are based on mui and react

Build and Deploy

docker build -t uicomponent .

docker run -p 8080:80 uicomponent


## Or if you want to use latest from the ECR
docker run --rm -p 8080:80 934101271236.dkr.ecr.us-west-2.amazonaws.com/uicomponent:latest

Expose React components

Webpack

  new ModuleFederationPlugin({
      name: "uicomponent",
      shared: {
      react: {
          requiredVersion: dependencies["react-dom"],
      },
      "react-dom": {
          requiredVersion: dependencies["react-dom"],
      },
      },
      exposes: {
        "./RequestDetailsPage": "./src/pages/request-details/RequestDetailsPage"
      },
      filename: "remoteEntry.js"
  }),

Setup root font-size to 16px

If react page is rendered and visible in Admin UI, make root font size to 16px, so the react pages can manage using rem.

main.css

html:has(div.react-entity-view:not([style*="display: none"])) {
  font-size: var(--font-size-medium);
}

Rendering bridge

To render react page in Admin UI we need to write renderer function (Refer ./src/pages/request-details/RequestDetailsPage.tsx)

Http Service

Currently using HttpCommand from zplex. Passing it as props

function RequestDetailsPage(props: IRequestDetailsPageProps, container: Element) {
  const { HttpCommand, ChatSimulatorView, request } = props;
  HttpService.setHttpCommand(HttpCommand);

  ...
}

Add context for commonly used data on page to avoid prop drilling

Using request: {botId, botDomain, actions: {handler}} set value for context, so can be used anywhere in page

function RequestDetailsPage(props: IRequestDetailsPageProps, container: Element) {
  const { HttpCommand, ChatSimulatorView, request } = props;
  ...

  const root = createRoot(container);
  return root.render(
      <RequestContext.Provider value={request}>
          <RequestDetailsComponent {...{ ChatSimulatorView }} />
      </RequestContext.Provider>
  );
}

Accessed context

const RequestDetailsComponent = () => {
  const {actions} = useContext(RequestContext);
  ...

  const handleBreadCrumbClick = () => {
    ...
    actions.handler(...);
  }

For more details see src/pages/request-details/RequestDetailsComponent.tsx, src/pages/request-details/RequestDetailsPage.tsx

Add new svg icons

1. create react component from svg code

• Refer MSTeamsIcon component for adding new channel icon
• Refer AnnotateIcon component for adding custom icon

2. add icon to stories

• render newly created component in AiseraIcons

• npm run rollup npm login npm publish --access public npm view @frankhe/ui-component