# Regula React UI components

This package contains React UI components for Regula products
and [TypeScript definitions](#document-reader-typings) for Regula Document Reader SDK.

## Document-reader processing result tabs

Here is an example of using components to display the results of document-reader processing.

```typescript jsx
import { FC } from 'react'
import { createRoot } from 'react-dom/client'
import {
  DocReaderContainer,
  Details,
  Info,
  Graphics,
  Rfid,
  ResponseViewer,
  RequestViewer,
  Logs,
  PortraitsComparison,
  Tabs,
} from '@regulaforensics/ui-components'


interface ProcessingResultsProps {
  response: unknown
  request: any
  language: string
}

const ResultsTab = () => (
  <>
    <Details />
    <Info />
    <Graphics />
    <Rfid />
    <PortraitsComparison />
  </>
)

const ProcessingResultTabs: FC<ProcessingResultsProps> = ({ response, request, language }) => (
  <DocReaderContainer response={ response } request={ request } language={ language }>
    <Tabs
      type={ 'card' }
      items={[
        { id: 'Results', label: 'Results', children: <ResultsTab /> },
        { id: 'Request', label: 'Request', children: <RequestViewer /> },
        { id: 'Response', label: 'Response', children: <ResponseViewer /> },
        { id: 'Logs', label: 'Logs', children: <Logs /> }
      ]}
    />
  </DocReaderContainer>
)

const RESPONSE = YOUR_RESPONSE_DATA
const REQUEST = YOUR_REQUEST_DATA

const Results = () => (
  <ProcessingResultTabs 
    response={ RESPONSE } 
    request={ REQUEST } 
    language={ 'en' } 
  />
)

const root = createRoot(document.getElementById('root'));
root.render(<Results />);
```

## Importing a package

By default, styles are automatically imported into the package build and there is no need to make additional style imports: 

```typescript
import { Collapse } from '@regulaforensics/ui-components'
```

But there are times when you need to control the style import process yourself:

```typescript
import '@regulaforensics/ui-components/styles' // connect styles where you need to

import { Collapse } from '@regulaforensics/ui-components/core' // use the components
```

## Document reader typings

The package also contains TypeScript definitions for Regula Document Reader SDK.
These definitions are constructed using class transformers and class validators. With their help, you can 
transform the raw response from the Regula Document Reader SDK into a typed one:

```typescript
import { ProcessResponse } from '@regulaforensics/ui-components/typings'

const typedResponse = ProcessResponse.fromPlain(rawResponse)
```
