@document-verification/docver-widget 0.4.30-rc1

package/README.md

@@ -0,0 +1,164 @@
+# DocVer-widget
+
+### Install
+
+``` 
+yarn install @document-verification/docver-widget
+ ```
+or
+ ``` 
+npm i @document-verification/docver-widget
+ ```
+
+Actual version you can find in https://www.npmjs.com/package/@document-verification/docver-widget
+
+How to use:
+
+``` 
+import { DocsVerificationWidget } from @document-verification/docver-widget;
+....
+DocsVerificationWidgetProps(props);
+ ```
+
+Available props:
+
+<table>
+    <tr>
+        <th>Prop name</th>
+        <th>Type</th>
+        <th>Description</th>
+    </tr>
+    <tr>
+        <td>id</td>
+        <td>string</td>
+        <td>
+        </td>
+    </tr>
+    <tr>
+        <td>apiUrl</td>
+        <td>string</td>
+        <td></td>
+    </tr>
+    <tr>
+        <td>elementId</td>
+        <td>string</td>
+        <td>Id of element when widget will be rendered</td>
+    </tr>
+    <tr>
+        <td>onFinish</td>
+        <td>() => Promise&lt;void&gt;</td>
+        <td>Callback raised when user finish verification</td>
+    </tr>
+    <tr>
+        <td>onInit</td>
+        <td>(verificationStatus: 'completed' | 'expired' | 'active' | 'error', error?: unknown) => Promise&lt;void&gt;</td>
+        <td>Callback raised before verification started</td>
+    </tr>
+    <tr>
+        <td>theme</td>
+        <td>Check theme section</td>
+        <td>Custom styles</td>
+    </tr>
+</table>
+
+### Example:
+ ```
+import { DocsVerificationWidget } from '@dataspike/docver-widget';
+
+export const renderWidget = async () => {
+    if (container) {
+        DocsVerificationWidget({
+            id: 'VF57124F182867E0'
+            elementId: 'root',
+            apiUrl: 'https:/docs.com',
+        });
+    }
+};
+
+renderWidget()
+ ```
+
+### Theme:
+In comment described default value:
+```typescript
+export type Theme = {
+    palette?: Partial<{
+        textMain: string; // #000000
+        textLight: string; // #737390
+        primaryA1: string; // #6664E8
+        primaryA2: string; // #5A58DF
+        primaryA3: string; // #D0D0FC
+        primaryA4: string; // #E8E8FC
+        primaryA5: string; // #E0E0FA
+        primaryA6: string; // #E6EDFB
+        primaryA7: string; // #FFFFFF
+        secondaryA1: string; // #F6CDD9
+        secondaryA2: string; // #F6F0C0
+        secondaryA3: string; // #52C27F
+        secondaryA4: string; // #FF5050
+        secondaryA5: string; // #FFFCFD
+        secondaryA6: string; // #FABC46
+        secondaryA7: string; // #B25DF5
+        secondaryA8: string; // #EDECFC
+        secondaryA9: string; // #DEE1F2
+        secondaryA10: string; // #F6F8FE
+        secondaryA11: string; // #EDECFC
+        secondaryA12: string; // #FAFAFC
+    }>;
+    typography?: Partial<{
+        fontFamily: string; // 'Funnel Display', Roboto, sans-serif
+        body1: {
+            fontFamily: string; // 'Funnel Display', Roboto, sans-serif
+        };
+        body2: {
+            fontFamily: string; // 'Funnel Display', Roboto, sans-serif
+        };
+        caption: {
+            fontFamily: string; // 'Funnel Display', Roboto, sans-serif
+        };
+        h1: Partial<{
+            fontFamily: string; // 'Funnel Display', Roboto, sans-serif
+            fontSize: string; // 50px
+            fontWeight: string; // 500
+            lineHeight: string; // 70px
+            letterSpacing: string; // -0.01em
+        }>;
+        h2: Partial<{
+            fontFamily: string; // 'Funnel Display', Roboto, sans-serif
+            fontSize: string; // 28px
+            fontWeight: string; // 500
+            lineHeight: string; // 40px
+            letterSpacing: string; // -0.01em
+        }>;
+        h3: Partial<{
+            fontFamily: string; // 'Funnel Display', Roboto, sans-serif
+            fontSize: string; // 20px
+            fontWeight: string; // 500
+            lineHeight: string; // 30px
+            letterSpacing: string; // -0.01em
+        }>;
+        text: Partial<{
+            fontSize: string; // 14px
+            lineHeight: string; // 22px
+            letterSpacing: string; // 0.002em
+        }>;
+        textBold: Partial<{
+            fontSize: string; // 14px
+            fontWeight: string; // 500
+            lineHeight: string; // 22px
+            letterSpacing: string; // 0.002em
+        }>;
+        smallText: Partial<{
+            fontSize: string; // 12px
+            lineHeight: string; // 18px
+            letterSpacing: string; // 0.002em
+        }>;
+        smallTextBold: Partial<{
+            fontSize: string; // 12px
+            fontWeight: string; // 500
+            lineHeight: string; // 18px
+            letterSpacing: string; // 0.002em
+        }>;
+    }>;
+};
+```

package/index-wl.d.ts

@@ -0,0 +1,21 @@
+import type { Theme } from './theme';
+
+export type Props = {
+    id: string;
+    apiUrl: string;
+    elementId: string;
+    onFinish?: () => void | Promise<void>;
+    onInit?: (
+        verificationStatus: 'completed' | 'expired' | 'active' | 'error',
+        error?: unknown,
+    ) => void | Promise<void>;
+    settings?: unknown;
+    redirectUrl?: string;
+    logsUrl?: string;
+    theme?: Theme;
+};
+
+declare module '@document-verification/docver-widget' {
+    export type DocsVerificationWidgetProps = Props;
+    export const DocsVerificationWidget: (props: DocsVerificationWidgetProps) => void;
+}