@regulaforensics/ui-components 0.0.25 → 1.0.0

package/README.md

@@ -1,3 +1,73 @@
 # Regula React UI components
 
 This package contains React UI components for Regula products.
+
+## 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 { ProcessResponse } from '@regulaforensics/document-reader-typings'
+import {
+  DocReaderContainer,
+  Status,
+  Info,
+  Graphics,
+  Rfid,
+  ResponseViewer,
+  RequestViewer,
+  Logs,
+  PortraitsComparison,
+  Tabs,
+} from '@regulaforensics/ui-components'
+
+
+interface ProcessingResultsProps {
+  response: ProcessResponse
+  request: any
+  language: string
+}
+
+const ResultsTab = () => (
+  <>
+    <Status />
+    <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 = ProcessResponse.fromPlain(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 />);
+```
+
+
+