@document-verification/docver-widget 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +213 -0
- package/index.d.ts +21 -0
- package/index.js +3 -0
- package/index.js.map +1 -0
- package/package.json +9 -0
- package/theme.ts +78 -0
package/README.md
ADDED
|
@@ -0,0 +1,213 @@
|
|
|
1
|
+
# DocVer-widget
|
|
2
|
+
|
|
3
|
+
### Install
|
|
4
|
+
|
|
5
|
+
```
|
|
6
|
+
yarn install @document-verification/docver-widget
|
|
7
|
+
```
|
|
8
|
+
or
|
|
9
|
+
```
|
|
10
|
+
npm i @document-verification/docver-widget
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
or add static js file
|
|
14
|
+
|
|
15
|
+
```
|
|
16
|
+
https://cdn.n37z.com/scripts/widget-latest.js
|
|
17
|
+
```
|
|
18
|
+
or use specific version
|
|
19
|
+
```
|
|
20
|
+
https://cdn.n37z.com/scripts/widget-{version}.js
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
Actual version you can find in https://www.npmjs.com/package/@document-verification/docver-widget
|
|
24
|
+
|
|
25
|
+
How to use:
|
|
26
|
+
|
|
27
|
+
```
|
|
28
|
+
import { DocsVerificationWidget } from @document-verification/docver-widget;
|
|
29
|
+
....
|
|
30
|
+
DocsVerificationWidgetProps(props);
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
Available props:
|
|
34
|
+
|
|
35
|
+
<table>
|
|
36
|
+
<tr>
|
|
37
|
+
<th>Prop name</th>
|
|
38
|
+
<th>Types</th>
|
|
39
|
+
<th>Description</th>
|
|
40
|
+
</tr>
|
|
41
|
+
<tr>
|
|
42
|
+
<td>id</td>
|
|
43
|
+
<td>string</td>
|
|
44
|
+
<td>
|
|
45
|
+
</td>
|
|
46
|
+
</tr>
|
|
47
|
+
<tr>
|
|
48
|
+
<td>apiUrl</td>
|
|
49
|
+
<td>string</td>
|
|
50
|
+
<td></td>
|
|
51
|
+
</tr>
|
|
52
|
+
<tr>
|
|
53
|
+
<td>elementId</td>
|
|
54
|
+
<td>string</td>
|
|
55
|
+
<td>Id of element when widget will be rendered</td>
|
|
56
|
+
</tr>
|
|
57
|
+
<tr>
|
|
58
|
+
<td>onFinish</td>
|
|
59
|
+
<td>() => Promise<void></td>
|
|
60
|
+
<td>Callback raised when user finish verification</td>
|
|
61
|
+
</tr>
|
|
62
|
+
<tr>
|
|
63
|
+
<td>onInit</td>
|
|
64
|
+
<td>(verificationStatus: 'completed' | 'expired' | 'active' | 'error', error?: unknown) => Promise<void></td>
|
|
65
|
+
<td>Callback raised before verification started</td>
|
|
66
|
+
</tr>
|
|
67
|
+
<tr>
|
|
68
|
+
<td>theme</td>
|
|
69
|
+
<td>Check theme section</td>
|
|
70
|
+
<td>Custom styles</td>
|
|
71
|
+
</tr>
|
|
72
|
+
<tr>
|
|
73
|
+
<td>defaultLanguage</td>
|
|
74
|
+
<td>'en' | 'es' | 'pt' | 'ru' | 'de'</td>
|
|
75
|
+
<td>Default Language</td>
|
|
76
|
+
</tr>
|
|
77
|
+
</table>
|
|
78
|
+
|
|
79
|
+
### Example:
|
|
80
|
+
```
|
|
81
|
+
import { DocsVerificationWidget } from '@document-verification/docver-widget';
|
|
82
|
+
|
|
83
|
+
export const renderWidget = async () => {
|
|
84
|
+
if (container) {
|
|
85
|
+
DocsVerificationWidget({
|
|
86
|
+
id: 'VF57124F182867E0'
|
|
87
|
+
elementId: 'root',
|
|
88
|
+
apiUrl: 'https:/docs.com',
|
|
89
|
+
});
|
|
90
|
+
}
|
|
91
|
+
};
|
|
92
|
+
|
|
93
|
+
renderWidget()
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
Or
|
|
97
|
+
|
|
98
|
+
```
|
|
99
|
+
<script type="module" defer src="https://cdn.n37z.com/scripts/widget-latest.js"></script>
|
|
100
|
+
<script>
|
|
101
|
+
document.addEventListener('DOMContentLoaded', () => {
|
|
102
|
+
const renderWidget = async () => {
|
|
103
|
+
const container = window.document.querySelector('#root');
|
|
104
|
+
if (container) {
|
|
105
|
+
window.DocsVerificationWidget({
|
|
106
|
+
id: 'VF57124F182867E0',
|
|
107
|
+
elementId: 'root',
|
|
108
|
+
apiUrl: 'https:/docs.com',
|
|
109
|
+
});
|
|
110
|
+
}
|
|
111
|
+
};
|
|
112
|
+
|
|
113
|
+
renderWidget()
|
|
114
|
+
});
|
|
115
|
+
</script>
|
|
116
|
+
```
|
|
117
|
+
### Html:
|
|
118
|
+
```html
|
|
119
|
+
<!DOCTYPE html>
|
|
120
|
+
<html lang="en">
|
|
121
|
+
<head>
|
|
122
|
+
<meta charset="utf-8" />
|
|
123
|
+
</head>
|
|
124
|
+
<body>
|
|
125
|
+
<noscript>You need to enable JavaScript to run this app.</noscript>
|
|
126
|
+
<div id="root"></div>
|
|
127
|
+
</body>
|
|
128
|
+
</html>
|
|
129
|
+
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
### Theme:
|
|
133
|
+
In comment described default value:
|
|
134
|
+
```typescript
|
|
135
|
+
export type Theme = {
|
|
136
|
+
palette?: Partial<{
|
|
137
|
+
textMain: string; // #000000
|
|
138
|
+
textLight: string; // #737390
|
|
139
|
+
primaryA1: string; // #6664E8
|
|
140
|
+
primaryA2: string; // #5A58DF
|
|
141
|
+
primaryA3: string; // #D0D0FC
|
|
142
|
+
primaryA4: string; // #E8E8FC
|
|
143
|
+
primaryA5: string; // #E0E0FA
|
|
144
|
+
primaryA6: string; // #E6EDFB
|
|
145
|
+
primaryA7: string; // #FFFFFF
|
|
146
|
+
secondaryA1: string; // #F6CDD9
|
|
147
|
+
secondaryA2: string; // #F6F0C0
|
|
148
|
+
secondaryA3: string; // #52C27F
|
|
149
|
+
secondaryA4: string; // #FF5050
|
|
150
|
+
secondaryA5: string; // #FFFCFD
|
|
151
|
+
secondaryA6: string; // #FABC46
|
|
152
|
+
secondaryA7: string; // #B25DF5
|
|
153
|
+
secondaryA8: string; // #EDECFC
|
|
154
|
+
secondaryA9: string; // #DEE1F2
|
|
155
|
+
secondaryA10: string; // #F6F8FE
|
|
156
|
+
}>;
|
|
157
|
+
typography?: Partial<{
|
|
158
|
+
fontFamily: string; // 'Funnel Display', Roboto, sans-serif
|
|
159
|
+
body1: {
|
|
160
|
+
fontFamily: string; // 'Funnel Display', Roboto, sans-serif
|
|
161
|
+
};
|
|
162
|
+
body2: {
|
|
163
|
+
fontFamily: string; // 'Funnel Display', Roboto, sans-serif
|
|
164
|
+
};
|
|
165
|
+
caption: {
|
|
166
|
+
fontFamily: string; // 'Funnel Display', Roboto, sans-serif
|
|
167
|
+
};
|
|
168
|
+
h1: Partial<{
|
|
169
|
+
fontFamily: string; // 'Funnel Display', Roboto, sans-serif
|
|
170
|
+
fontSize: string; // 50px
|
|
171
|
+
fontWeight: string; // 500
|
|
172
|
+
lineHeight: string; // 70px
|
|
173
|
+
letterSpacing: string; // -0.01em
|
|
174
|
+
}>;
|
|
175
|
+
h2: Partial<{
|
|
176
|
+
fontFamily: string; // 'Funnel Display', Roboto, sans-serif
|
|
177
|
+
fontSize: string; // 28px
|
|
178
|
+
fontWeight: string; // 500
|
|
179
|
+
lineHeight: string; // 40px
|
|
180
|
+
letterSpacing: string; // -0.01em
|
|
181
|
+
}>;
|
|
182
|
+
h3: Partial<{
|
|
183
|
+
fontFamily: string; // 'Funnel Display', Roboto, sans-serif
|
|
184
|
+
fontSize: string; // 20px
|
|
185
|
+
fontWeight: string; // 500
|
|
186
|
+
lineHeight: string; // 30px
|
|
187
|
+
letterSpacing: string; // -0.01em
|
|
188
|
+
}>;
|
|
189
|
+
text: Partial<{
|
|
190
|
+
fontSize: string; // 14px
|
|
191
|
+
lineHeight: string; // 22px
|
|
192
|
+
letterSpacing: string; // 0.002em
|
|
193
|
+
}>;
|
|
194
|
+
textBold: Partial<{
|
|
195
|
+
fontSize: string; // 14px
|
|
196
|
+
fontWeight: string; // 500
|
|
197
|
+
lineHeight: string; // 22px
|
|
198
|
+
letterSpacing: string; // 0.002em
|
|
199
|
+
}>;
|
|
200
|
+
smallText: Partial<{
|
|
201
|
+
fontSize: string; // 12px
|
|
202
|
+
lineHeight: string; // 18px
|
|
203
|
+
letterSpacing: string; // 0.002em
|
|
204
|
+
}>;
|
|
205
|
+
smallTextBold: Partial<{
|
|
206
|
+
fontSize: string; // 12px
|
|
207
|
+
fontWeight: string; // 500
|
|
208
|
+
lineHeight: string; // 18px
|
|
209
|
+
letterSpacing: string; // 0.002em
|
|
210
|
+
}>;
|
|
211
|
+
}>;
|
|
212
|
+
};
|
|
213
|
+
```
|
package/index.d.ts
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import type { Theme } from './theme';
|
|
2
|
+
|
|
3
|
+
export type Props = {
|
|
4
|
+
id: string;
|
|
5
|
+
apiUrl: string;
|
|
6
|
+
elementId: string;
|
|
7
|
+
onFinish?: () => void | Promise<void>;
|
|
8
|
+
onInit?: (
|
|
9
|
+
verificationStatus: 'completed' | 'expired' | 'active' | 'error',
|
|
10
|
+
error?: unknown,
|
|
11
|
+
) => void | Promise<void>;
|
|
12
|
+
settings?: unknown;
|
|
13
|
+
redirectUrl?: string;
|
|
14
|
+
logsUrl?: string;
|
|
15
|
+
theme?: Theme;
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
declare module '@document-verification/docver-widget' {
|
|
19
|
+
export type DocsVerificationWidgetProps = Props;
|
|
20
|
+
export const DocsVerificationWidget: (props: DocsVerificationWidgetProps) => void;
|
|
21
|
+
}
|