# Aisera UI Component

This is a [storybook](https://storybook.js.org/) project.

## Getting Started

First, run the development server:

```bash
npm run dev
```

## Story book development

To get started with [component development](https://www.componentdriven.org/), run the following command:

```bash
npm run storybook
```

We use [storybook](https://storybook.js.org/) to document our components which are based on [mui](https://mui.com/core/) and [react](https://react.dev/)

## Build and Deploy

```sh
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