@frankhe/ui-component NPM

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

create react component from svg code

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

add icon to stories

render newly created component in AiseraIcons

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