@superdoc-dev/esign 1.0.0-next.3 → 1.0.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 +84 -399
- package/dist/defaults/SignatureInput.d.ts.map +1 -1
- package/dist/index.d.ts +1 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +4 -4
- package/dist/index.mjs +311 -323
- package/dist/types.d.ts +11 -11
- package/dist/types.d.ts.map +1 -1
- package/package.json +5 -3
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @superdoc-dev/esign
|
|
2
2
|
|
|
3
|
-
React
|
|
3
|
+
React component that wraps SuperDoc for document signing workflows with audit trails and compliance tracking.
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
@@ -11,445 +11,130 @@ npm install @superdoc-dev/esign superdoc
|
|
|
11
11
|
## Quick Start
|
|
12
12
|
|
|
13
13
|
```jsx
|
|
14
|
+
import React from 'react';
|
|
14
15
|
import SuperDocESign from '@superdoc-dev/esign';
|
|
15
16
|
import 'superdoc/dist/style.css';
|
|
16
17
|
|
|
17
18
|
function App() {
|
|
19
|
+
const handleSubmit = async (data) => {
|
|
20
|
+
// Send to your backend
|
|
21
|
+
await fetch('/api/sign', {
|
|
22
|
+
method: 'POST',
|
|
23
|
+
headers: { 'Content-Type': 'application/json' },
|
|
24
|
+
body: JSON.stringify(data)
|
|
25
|
+
});
|
|
26
|
+
alert('Document signed!');
|
|
27
|
+
};
|
|
28
|
+
|
|
18
29
|
return (
|
|
19
30
|
<SuperDocESign
|
|
20
|
-
eventId=
|
|
31
|
+
eventId={`session-${Date.now()}`}
|
|
21
32
|
|
|
22
33
|
document={{
|
|
23
|
-
source: "
|
|
24
|
-
|
|
25
|
-
displayOptions: {
|
|
26
|
-
scrollRequired: true
|
|
27
|
-
}
|
|
34
|
+
source: "https://storage.googleapis.com/public_static_hosting/public_demo_docs/employment_agreement.docx",
|
|
35
|
+
validation: { scroll: { required: true } }
|
|
28
36
|
}}
|
|
29
37
|
|
|
30
38
|
fields={{
|
|
31
39
|
document: [
|
|
32
|
-
{
|
|
40
|
+
{ id: 'employee_name', value: 'Jane Smith' },
|
|
41
|
+
{ id: 'position', value: 'Senior Engineer' },
|
|
42
|
+
{ id: 'salary', value: '$120,000' }
|
|
33
43
|
],
|
|
34
44
|
signer: [
|
|
35
45
|
{
|
|
36
46
|
id: 'signature',
|
|
37
47
|
type: 'signature',
|
|
38
48
|
validation: { required: true },
|
|
39
|
-
label: '
|
|
49
|
+
label: 'Type your full name'
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
id: 'accept_terms',
|
|
53
|
+
type: 'consent',
|
|
54
|
+
validation: { required: true },
|
|
55
|
+
label: 'I accept the terms'
|
|
40
56
|
}
|
|
41
57
|
]
|
|
42
58
|
}}
|
|
43
59
|
|
|
44
|
-
onSubmit={
|
|
45
|
-
await api.saveSignature(data);
|
|
46
|
-
}}
|
|
60
|
+
onSubmit={handleSubmit}
|
|
47
61
|
/>
|
|
48
62
|
);
|
|
49
63
|
}
|
|
50
64
|
```
|
|
51
65
|
|
|
52
|
-
##
|
|
53
|
-
|
|
54
|
-
### Props
|
|
55
|
-
|
|
56
|
-
| Prop | Type | Required | Description |
|
|
57
|
-
|------|------|----------|-------------|
|
|
58
|
-
| `eventId` | string | ✓ | Unique identifier for signing session |
|
|
59
|
-
| `document` | object | ✓ | Document configuration |
|
|
60
|
-
| `fields` | object | | Field definitions |
|
|
61
|
-
| `download` | object | | Download button config |
|
|
62
|
-
| `submit` | object | | Submit button config |
|
|
63
|
-
| `onSubmit` | function | ✓ | Submit handler |
|
|
64
|
-
| `onDownload` | function | | Download handler |
|
|
65
|
-
| `onStateChange` | function | | State change handler |
|
|
66
|
-
| `onFieldChange` | function | | Field change handler |
|
|
67
|
-
| `isDisabled` | boolean | | Disable all interactions |
|
|
68
|
-
|
|
69
|
-
### Document Configuration
|
|
70
|
-
|
|
71
|
-
```jsx
|
|
72
|
-
document={{
|
|
73
|
-
source: File | Blob | string, // Required
|
|
74
|
-
mode: 'full' | 'download_only' | 'preview',
|
|
75
|
-
displayOptions: {
|
|
76
|
-
scrollRequired: boolean,
|
|
77
|
-
watermark: boolean
|
|
78
|
-
}
|
|
79
|
-
}}
|
|
80
|
-
```
|
|
66
|
+
## Backend - Create Signed PDF
|
|
81
67
|
|
|
82
|
-
|
|
68
|
+
Use the SuperDoc API to create the final signed document:
|
|
83
69
|
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
This allows the same value to appear multiple places in a document:
|
|
90
|
-
|
|
91
|
-
```jsx
|
|
92
|
-
// Document template might have:
|
|
93
|
-
// "Dear {{customer_name}},"
|
|
94
|
-
// "Agreement between {{company}} and {{customer_name}}"
|
|
95
|
-
// "Signed by: {{customer_name}}"
|
|
96
|
-
|
|
97
|
-
fields={{
|
|
98
|
-
document: [
|
|
99
|
-
{
|
|
100
|
-
alias: 'customer_name', // Used in document {{customer_name}}
|
|
101
|
-
value: 'John Doe'
|
|
102
|
-
},
|
|
103
|
-
{
|
|
104
|
-
alias: 'company',
|
|
105
|
-
value: 'Acme Corp'
|
|
106
|
-
},
|
|
107
|
-
{
|
|
108
|
-
id: 'date_field',
|
|
109
|
-
alias: 'sign_date', // Can have both id and alias
|
|
110
|
-
value: '2024-01-15'
|
|
111
|
-
}
|
|
112
|
-
],
|
|
70
|
+
```javascript
|
|
71
|
+
// Node.js/Express
|
|
72
|
+
app.post('/api/sign', async (req, res) => {
|
|
73
|
+
const { eventId, auditTrail, documentFields, signerFields } = req.body;
|
|
113
74
|
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
75
|
+
// 1. Fill document fields
|
|
76
|
+
const annotated = await fetch('https://api.superdoc.dev/v1/annotate', {
|
|
77
|
+
method: 'POST',
|
|
78
|
+
headers: {
|
|
79
|
+
'Authorization': `Bearer ${API_KEY}`,
|
|
80
|
+
'Content-Type': 'application/json'
|
|
120
81
|
},
|
|
121
|
-
{
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
}
|
|
127
|
-
]
|
|
128
|
-
}}
|
|
129
|
-
```
|
|
130
|
-
|
|
131
|
-
**How it works:**
|
|
132
|
-
1. Document fields are injected on load using their id/alias
|
|
133
|
-
2. Signer fields are collected and can replace placeholders using their alias
|
|
134
|
-
3. The same alias can appear multiple times in the document
|
|
135
|
-
4. All instances get the same value
|
|
136
|
-
|
|
137
|
-
### Field Configuration
|
|
138
|
-
|
|
139
|
-
```jsx
|
|
140
|
-
fields={{
|
|
141
|
-
// Values to inject into document
|
|
142
|
-
document: [
|
|
143
|
-
{
|
|
144
|
-
id: 'field_id', // Optional
|
|
145
|
-
alias: 'field_name', // Optional (at least one of id or alias required)
|
|
146
|
-
value: 'any value'
|
|
147
|
-
}
|
|
148
|
-
],
|
|
82
|
+
body: JSON.stringify({
|
|
83
|
+
document: 'template.docx',
|
|
84
|
+
fields: [...documentFields, ...signerFields]
|
|
85
|
+
})
|
|
86
|
+
});
|
|
149
87
|
|
|
150
|
-
//
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
component: CustomComponent // Optional - consistent with download/submit!
|
|
163
|
-
}
|
|
164
|
-
]
|
|
165
|
-
}}
|
|
166
|
-
```
|
|
167
|
-
|
|
168
|
-
### UI Customization
|
|
169
|
-
|
|
170
|
-
Simple customization:
|
|
171
|
-
```jsx
|
|
172
|
-
download={{
|
|
173
|
-
fileName: "contract.pdf",
|
|
174
|
-
label: "Download Contract",
|
|
175
|
-
variant: "secondary"
|
|
176
|
-
}}
|
|
177
|
-
|
|
178
|
-
submit={{
|
|
179
|
-
label: "Sign Document",
|
|
180
|
-
loadingLabel: "Processing...",
|
|
181
|
-
variant: "primary"
|
|
182
|
-
}}
|
|
183
|
-
```
|
|
184
|
-
|
|
185
|
-
Full custom components:
|
|
186
|
-
```jsx
|
|
187
|
-
download={{
|
|
188
|
-
component: ({ onClick, fileName, isDisabled }) => (
|
|
189
|
-
<CustomButton onClick={onClick} disabled={isDisabled}>
|
|
190
|
-
Download {fileName}
|
|
191
|
-
</CustomButton>
|
|
192
|
-
)
|
|
193
|
-
}}
|
|
194
|
-
|
|
195
|
-
submit={{
|
|
196
|
-
component: ({ onClick, isValid, isDisabled, isSubmitting }) => (
|
|
197
|
-
<CustomButton
|
|
198
|
-
onClick={onClick}
|
|
199
|
-
disabled={!isValid || isDisabled}
|
|
200
|
-
>
|
|
201
|
-
{isSubmitting ? 'Processing...' : 'Sign & Submit'}
|
|
202
|
-
</CustomButton>
|
|
203
|
-
)
|
|
204
|
-
}}
|
|
205
|
-
```
|
|
206
|
-
|
|
207
|
-
### Custom Field Components
|
|
208
|
-
|
|
209
|
-
```jsx
|
|
210
|
-
// Custom signature pad component
|
|
211
|
-
const CustomSignaturePad = ({ value, onChange, isDisabled, label }) => (
|
|
212
|
-
<div className="custom-signature">
|
|
213
|
-
<label>{label}</label>
|
|
214
|
-
<canvas
|
|
215
|
-
// ... canvas signature implementation
|
|
216
|
-
onMouseUp={(e) => onChange(canvasDataURL)}
|
|
217
|
-
style={{ border: '1px solid #000', cursor: 'crosshair' }}
|
|
218
|
-
/>
|
|
219
|
-
</div>
|
|
220
|
-
);
|
|
221
|
-
|
|
222
|
-
// Use it in fields
|
|
223
|
-
fields={{
|
|
224
|
-
signer: [
|
|
225
|
-
{
|
|
226
|
-
id: 'signature',
|
|
227
|
-
type: 'signature',
|
|
228
|
-
validation: { required: true },
|
|
229
|
-
component: CustomSignaturePad // Consistent with download/submit!
|
|
230
|
-
}
|
|
231
|
-
]
|
|
232
|
-
}}
|
|
233
|
-
```
|
|
234
|
-
|
|
235
|
-
## Examples
|
|
236
|
-
|
|
237
|
-
### Basic Agreement
|
|
238
|
-
|
|
239
|
-
```jsx
|
|
240
|
-
<SuperDocESign
|
|
241
|
-
eventId="session-123"
|
|
242
|
-
document={{ source: "terms.pdf" }}
|
|
243
|
-
fields={{
|
|
244
|
-
signer: [
|
|
245
|
-
{
|
|
246
|
-
id: 'accept',
|
|
247
|
-
type: 'consent',
|
|
248
|
-
validation: { required: true },
|
|
249
|
-
label: 'I accept the terms'
|
|
250
|
-
}
|
|
251
|
-
]
|
|
252
|
-
}}
|
|
253
|
-
onSubmit={handleSubmit}
|
|
254
|
-
/>
|
|
255
|
-
```
|
|
256
|
-
|
|
257
|
-
### Employment Offer with Repeated Fields
|
|
258
|
-
|
|
259
|
-
```jsx
|
|
260
|
-
// Example: Employment offer with repeated fields
|
|
261
|
-
<SuperDocESign
|
|
262
|
-
eventId="offer-123"
|
|
263
|
-
|
|
264
|
-
document={{
|
|
265
|
-
source: offerLetter, // Contains {{employee_name}}, {{salary}}, etc.
|
|
266
|
-
mode: "full",
|
|
267
|
-
displayOptions: {
|
|
268
|
-
scrollRequired: true
|
|
269
|
-
}
|
|
270
|
-
}}
|
|
271
|
-
|
|
272
|
-
fields={{
|
|
273
|
-
document: [
|
|
274
|
-
{
|
|
275
|
-
alias: 'employee_name', // Appears 5 times in document
|
|
276
|
-
value: 'Jane Smith'
|
|
277
|
-
},
|
|
278
|
-
{
|
|
279
|
-
alias: 'position', // Appears 3 times
|
|
280
|
-
value: 'Senior Engineer'
|
|
281
|
-
},
|
|
282
|
-
{
|
|
283
|
-
alias: 'salary', // Appears 2 times
|
|
284
|
-
value: '$120,000'
|
|
285
|
-
},
|
|
286
|
-
{
|
|
287
|
-
alias: 'start_date',
|
|
288
|
-
value: 'February 1, 2024'
|
|
289
|
-
}
|
|
290
|
-
],
|
|
291
|
-
|
|
292
|
-
signer: [
|
|
293
|
-
{
|
|
294
|
-
id: 'employee_signature',
|
|
295
|
-
alias: 'employee_sig', // {{employee_sig}} in document
|
|
296
|
-
type: 'signature',
|
|
297
|
-
validation: { required: true },
|
|
298
|
-
label: 'Your Signature'
|
|
299
|
-
},
|
|
300
|
-
{
|
|
301
|
-
id: 'accept_offer',
|
|
302
|
-
alias: 'offer_accepted',
|
|
303
|
-
type: 'consent',
|
|
304
|
-
validation: { required: true },
|
|
305
|
-
label: 'I accept this offer'
|
|
306
|
-
}
|
|
307
|
-
]
|
|
308
|
-
}}
|
|
309
|
-
|
|
310
|
-
submit={{
|
|
311
|
-
label: 'Accept Offer'
|
|
312
|
-
}}
|
|
313
|
-
|
|
314
|
-
onSubmit={handleAcceptOffer}
|
|
315
|
-
/>
|
|
316
|
-
```
|
|
317
|
-
|
|
318
|
-
### Full Contract with All Features
|
|
319
|
-
|
|
320
|
-
```jsx
|
|
321
|
-
<SuperDocESign
|
|
322
|
-
eventId="contract-456"
|
|
323
|
-
|
|
324
|
-
document={{
|
|
325
|
-
source: serviceAgreement,
|
|
326
|
-
mode: "full",
|
|
327
|
-
displayOptions: {
|
|
328
|
-
scrollRequired: true,
|
|
329
|
-
watermark: true
|
|
330
|
-
}
|
|
331
|
-
}}
|
|
332
|
-
|
|
333
|
-
fields={{
|
|
334
|
-
document: [
|
|
335
|
-
{ alias: 'client_name', value: 'John Doe' },
|
|
336
|
-
{ alias: 'company', value: 'Acme Corp' },
|
|
337
|
-
{ alias: 'service_type', value: 'Premium Support' },
|
|
338
|
-
{ alias: 'contract_date', value: new Date().toLocaleDateString() }
|
|
339
|
-
],
|
|
340
|
-
signer: [
|
|
341
|
-
{
|
|
342
|
-
id: 'client_signature',
|
|
343
|
-
alias: 'signature',
|
|
344
|
-
type: 'signature',
|
|
345
|
-
validation: { required: true },
|
|
346
|
-
label: 'Your Signature'
|
|
347
|
-
},
|
|
348
|
-
{
|
|
349
|
-
id: 'consent_terms',
|
|
350
|
-
type: 'consent',
|
|
351
|
-
validation: { required: true },
|
|
352
|
-
label: 'I agree to the terms and conditions'
|
|
353
|
-
},
|
|
354
|
-
{
|
|
355
|
-
id: 'consent_privacy',
|
|
356
|
-
type: 'consent',
|
|
357
|
-
validation: { required: true },
|
|
358
|
-
label: 'I acknowledge the privacy policy'
|
|
359
|
-
},
|
|
360
|
-
{
|
|
361
|
-
id: 'email_updates',
|
|
362
|
-
type: 'checkbox',
|
|
363
|
-
validation: { required: false },
|
|
364
|
-
label: 'Send me email updates'
|
|
365
|
-
}
|
|
366
|
-
]
|
|
367
|
-
}}
|
|
368
|
-
|
|
369
|
-
download={{
|
|
370
|
-
fileName: 'service_agreement_signed.pdf',
|
|
371
|
-
label: 'Download Agreement',
|
|
372
|
-
variant: 'secondary'
|
|
373
|
-
}}
|
|
374
|
-
|
|
375
|
-
submit={{
|
|
376
|
-
label: 'Sign Agreement',
|
|
377
|
-
loadingLabel: 'Processing...',
|
|
378
|
-
invalidLabel: 'Please complete all required fields',
|
|
379
|
-
variant: 'success'
|
|
380
|
-
}}
|
|
381
|
-
|
|
382
|
-
onSubmit={async (data) => {
|
|
383
|
-
await api.saveSignedContract(data);
|
|
384
|
-
console.log('Signed by:', data.signerFields);
|
|
385
|
-
}}
|
|
386
|
-
|
|
387
|
-
onDownload={(blob, fileName) => {
|
|
388
|
-
console.log('Downloaded:', fileName);
|
|
389
|
-
}}
|
|
88
|
+
// 2. Add digital signature
|
|
89
|
+
const signed = await fetch('https://api.superdoc.dev/v1/sign', {
|
|
90
|
+
method: 'POST',
|
|
91
|
+
headers: {
|
|
92
|
+
'Authorization': `Bearer ${API_KEY}`,
|
|
93
|
+
'Content-Type': 'application/json'
|
|
94
|
+
},
|
|
95
|
+
body: JSON.stringify({
|
|
96
|
+
document: await annotated.blob(),
|
|
97
|
+
auditTrail: auditTrail
|
|
98
|
+
})
|
|
99
|
+
});
|
|
390
100
|
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
}}
|
|
101
|
+
// 3. Save PDF
|
|
102
|
+
await saveToStorage(await signed.blob(), `signed_${eventId}.pdf`);
|
|
394
103
|
|
|
395
|
-
|
|
396
|
-
|
|
104
|
+
res.json({ success: true });
|
|
105
|
+
});
|
|
397
106
|
```
|
|
398
107
|
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
The component supports three levels of customization:
|
|
108
|
+
See [Python, Ruby, and more examples](https://docs.superdoc.dev/solutions/esign/backend).
|
|
402
109
|
|
|
403
|
-
|
|
404
|
-
// Level 1: Use all defaults
|
|
405
|
-
<SuperDocESign
|
|
406
|
-
eventId="session-1"
|
|
407
|
-
document={{ source: "doc.pdf" }}
|
|
408
|
-
onSubmit={handleSubmit}
|
|
409
|
-
/>
|
|
410
|
-
|
|
411
|
-
// Level 2: Simple customization
|
|
412
|
-
<SuperDocESign
|
|
413
|
-
eventId="session-2"
|
|
414
|
-
document={{ source: "doc.pdf" }}
|
|
415
|
-
submit={{ label: "I Agree", variant: "success" }}
|
|
416
|
-
download={{ label: "Get Copy" }}
|
|
417
|
-
onSubmit={handleSubmit}
|
|
418
|
-
/>
|
|
110
|
+
## What You Receive
|
|
419
111
|
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
eventId
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
112
|
+
```javascript
|
|
113
|
+
{
|
|
114
|
+
eventId: "session-123",
|
|
115
|
+
timestamp: "2024-01-15T10:30:00Z",
|
|
116
|
+
duration: 45000,
|
|
117
|
+
documentFields: [
|
|
118
|
+
{ id: "employee_name", value: "Jane Smith" }
|
|
119
|
+
],
|
|
120
|
+
signerFields: [
|
|
121
|
+
{ id: "signature", value: "Jane Smith" },
|
|
122
|
+
{ id: "accept_terms", value: true }
|
|
123
|
+
],
|
|
124
|
+
auditTrail: [
|
|
125
|
+
{ type: "ready", timestamp: "..." },
|
|
126
|
+
{ type: "scroll", timestamp: "..." },
|
|
127
|
+
{ type: "field_change", timestamp: "..." },
|
|
128
|
+
{ type: "submit", timestamp: "..." }
|
|
129
|
+
],
|
|
130
|
+
isFullyCompleted: true
|
|
131
|
+
}
|
|
435
132
|
```
|
|
436
133
|
|
|
437
|
-
##
|
|
438
|
-
|
|
439
|
-
Full TypeScript support with exported types:
|
|
134
|
+
## Documentation
|
|
440
135
|
|
|
441
|
-
|
|
442
|
-
import SuperDocESign from '@superdoc-dev/esign';
|
|
443
|
-
import type {
|
|
444
|
-
SuperDocESignProps,
|
|
445
|
-
SubmitData,
|
|
446
|
-
SigningState,
|
|
447
|
-
DocumentField,
|
|
448
|
-
SignerField,
|
|
449
|
-
FieldComponentProps
|
|
450
|
-
} from '@superdoc-dev/esign';
|
|
451
|
-
```
|
|
136
|
+
Full docs at [docs.superdoc.dev/solutions/esign](https://docs.superdoc.dev/solutions/esign)
|
|
452
137
|
|
|
453
138
|
## License
|
|
454
139
|
|
|
455
|
-
|
|
140
|
+
AGPLv3
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SignatureInput.d.ts","sourceRoot":"","sources":["../../src/defaults/SignatureInput.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"SignatureInput.d.ts","sourceRoot":"","sources":["../../src/defaults/SignatureInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAEpD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAsBxD,CAAC"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
import { default as React } from 'react';
|
|
2
1
|
import { SignatureInput, ConsentCheckbox } from './defaults';
|
|
3
2
|
import type * as Types from "./types";
|
|
4
3
|
export * from './types';
|
|
5
4
|
export { SignatureInput, ConsentCheckbox };
|
|
6
|
-
declare const SuperDocESign:
|
|
5
|
+
declare const SuperDocESign: import('react').ForwardRefExoticComponent<Types.SuperDocESignProps & import('react').RefAttributes<any>>;
|
|
7
6
|
export default SuperDocESign;
|
|
8
7
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,KAAK,KAAK,MAAM,SAAS,CAAC;AACtC,OAAO,EACL,cAAc,EACd,eAAe,EAGhB,MAAM,YAAY,CAAC;AAEpB,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,CAAC;AAI3C,QAAA,MAAM,aAAa,0GA2alB,CAAC;AAIF,eAAe,aAAa,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var ue=Object.create;var ee=Object.defineProperty;var de=Object.getOwnPropertyDescriptor;var fe=Object.getOwnPropertyNames;var me=Object.getPrototypeOf,pe=Object.prototype.hasOwnProperty;var ge=(l,f,u,s)=>{if(f&&typeof f=="object"||typeof f=="function")for(let n of fe(f))!pe.call(l,n)&&n!==u&&ee(l,n,{get:()=>f[n],enumerable:!(s=de(f,n))||s.enumerable});return l};var ve=(l,f,u)=>(u=l!=null?ue(me(l)):{},ge(f||!l||!l.__esModule?ee(u,"default",{value:l,enumerable:!0}):u,l));Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("react");var X={exports:{}},$={};/**
|
|
2
2
|
* @license React
|
|
3
3
|
* react-jsx-runtime.production.js
|
|
4
4
|
*
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*
|
|
7
7
|
* This source code is licensed under the MIT license found in the
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
|
9
|
-
*/var
|
|
9
|
+
*/var te;function be(){if(te)return $;te=1;var l=Symbol.for("react.transitional.element"),f=Symbol.for("react.fragment");function u(s,n,m){var b=null;if(m!==void 0&&(b=""+m),n.key!==void 0&&(b=""+n.key),"key"in n){m={};for(var _ in n)_!=="key"&&(m[_]=n[_])}else m=n;return n=m.ref,{$$typeof:l,type:s,key:b,ref:n!==void 0?n:null,props:m}}return $.Fragment=f,$.jsx=u,$.jsxs=u,$}var L={};/**
|
|
10
10
|
* @license React
|
|
11
11
|
* react-jsx-runtime.development.js
|
|
12
12
|
*
|
|
@@ -14,9 +14,9 @@
|
|
|
14
14
|
*
|
|
15
15
|
* This source code is licensed under the MIT license found in the
|
|
16
16
|
* LICENSE file in the root directory of this source tree.
|
|
17
|
-
*/var
|
|
17
|
+
*/var re;function he(){return re||(re=1,process.env.NODE_ENV!=="production"&&(function(){function l(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===Q?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case y:return"Fragment";case E:return"Profiler";case W:return"StrictMode";case T:return"Suspense";case B:return"SuspenseList";case J:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case Z:return"Portal";case w:return e.displayName||"Context";case V:return(e._context.displayName||"Context")+".Consumer";case z:var a=e.render;return e=e.displayName,e||(e=a.displayName||a.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case I:return a=e.displayName||null,a!==null?a:l(e.type)||"Memo";case O:a=e._payload,e=e._init;try{return l(e(a))}catch{}}return null}function f(e){return""+e}function u(e){try{f(e);var a=!1}catch{a=!0}if(a){a=console;var i=a.error,p=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return i.call(a,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",p),f(e)}}function s(e){if(e===y)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===O)return"<...>";try{var a=l(e);return a?"<"+a+">":"<...>"}catch{return"<...>"}}function n(){var e=k.A;return e===null?null:e.getOwner()}function m(){return Error("react-stack-top-frame")}function b(e){if(x.call(e,"key")){var a=Object.getOwnPropertyDescriptor(e,"key").get;if(a&&a.isReactWarning)return!1}return e.key!==void 0}function _(e,a){function i(){j||(j=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",a))}i.isReactWarning=!0,Object.defineProperty(e,"key",{get:i,configurable:!0})}function P(){var e=l(this.type);return H[e]||(H[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function U(e,a,i,p,N,Y){var t=i.ref;return e={$$typeof:q,type:e,key:a,props:i,_owner:p},(t!==void 0?t:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:P}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:N}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:Y}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function D(e,a,i,p,N,Y){var t=a.children;if(t!==void 0)if(p)if(K(t)){for(p=0;p<t.length;p++)F(t[p]);Object.freeze&&Object.freeze(t)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else F(t);if(x.call(a,"key")){t=l(e);var r=Object.keys(a).filter(function(g){return g!=="key"});p=0<r.length?"{key: someKey, "+r.join(": ..., ")+": ...}":"{key: someKey}",G[t+p]||(r=0<r.length?"{"+r.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
|
|
18
18
|
let props = %s;
|
|
19
19
|
<%s {...props} />
|
|
20
20
|
React keys must be passed directly to JSX without using spread:
|
|
21
21
|
let props = %s;
|
|
22
|
-
<%s key={someKey} {...props} />`,
|
|
22
|
+
<%s key={someKey} {...props} />`,p,t,r,t),G[t+p]=!0)}if(t=null,i!==void 0&&(u(i),t=""+i),b(a)&&(u(a.key),t=""+a.key),"key"in a){i={};for(var o in a)o!=="key"&&(i[o]=a[o])}else i=a;return t&&_(i,typeof e=="function"?e.displayName||e.name||"Unknown":e),U(e,t,i,n(),N,Y)}function F(e){h(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===O&&(e._payload.status==="fulfilled"?h(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function h(e){return typeof e=="object"&&e!==null&&e.$$typeof===q}var A=d,q=Symbol.for("react.transitional.element"),Z=Symbol.for("react.portal"),y=Symbol.for("react.fragment"),W=Symbol.for("react.strict_mode"),E=Symbol.for("react.profiler"),V=Symbol.for("react.consumer"),w=Symbol.for("react.context"),z=Symbol.for("react.forward_ref"),T=Symbol.for("react.suspense"),B=Symbol.for("react.suspense_list"),I=Symbol.for("react.memo"),O=Symbol.for("react.lazy"),J=Symbol.for("react.activity"),Q=Symbol.for("react.client.reference"),k=A.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,x=Object.prototype.hasOwnProperty,K=Array.isArray,R=console.createTask?console.createTask:function(){return null};A={react_stack_bottom_frame:function(e){return e()}};var j,H={},M=A.react_stack_bottom_frame.bind(A,m)(),C=R(s(m)),G={};L.Fragment=y,L.jsx=function(e,a,i){var p=1e4>k.recentlyCreatedOwnerStacks++;return D(e,a,i,!1,p?Error("react-stack-top-frame"):M,p?R(s(e)):C)},L.jsxs=function(e,a,i){var p=1e4>k.recentlyCreatedOwnerStacks++;return D(e,a,i,!0,p?Error("react-stack-top-frame"):M,p?R(s(e)):C)}})()),L}var ne;function Ee(){return ne||(ne=1,process.env.NODE_ENV==="production"?X.exports=be():X.exports=he()),X.exports}var v=Ee();const ae=({value:l,onChange:f,isDisabled:u,label:s})=>v.jsxs("div",{className:"superdoc-esign-signature-input",style:{display:"flex",flexDirection:"column",gap:"8px"},children:[s&&v.jsx("label",{children:s}),v.jsx("input",{type:"text",value:String(l||""),onChange:n=>f(n.target.value),disabled:u,placeholder:"Type your full name",style:{fontFamily:"cursive",fontSize:"18px"}})]}),oe=({value:l,onChange:f,isDisabled:u,label:s})=>v.jsxs("label",{className:"superdoc-esign-consent-checkbox",style:{display:"flex",gap:"8px"},children:[v.jsx("input",{type:"checkbox",checked:!!l,onChange:n=>f(n.target.checked),disabled:u}),v.jsx("span",{children:s})]}),xe=l=>({onClick:u,fileName:s,isDisabled:n})=>{const m=l?.label||"Download";return v.jsxs("button",{onClick:u,disabled:n,className:"superdoc-esign-btn",style:{padding:"10px 20px",borderRadius:"6px",border:"none",background:"#fff",color:"#333",cursor:n?"not-allowed":"pointer",opacity:n?.5:1,fontSize:"16px",fontWeight:"bold"},children:[m," ",s&&`(${s})`]})},Re=l=>({onClick:u,isValid:s,isDisabled:n,isSubmitting:m})=>{const b=()=>l?.label||"Submit";return v.jsx("button",{onClick:u,disabled:!s||n||m,className:"superdoc-esign-btn",style:{padding:"12px 24px",borderRadius:"6px",border:"none",background:"#007bff",color:"#fff",cursor:!s||n?"not-allowed":"pointer",opacity:!s||n?.5:1,fontSize:"16px",fontWeight:"bold"},children:b()})},se=d.forwardRef((l,f)=>{const{eventId:u,document:s,fields:n={},download:m,submit:b,onSubmit:_,onDownload:P,onStateChange:U,onFieldChange:D,onFieldsDiscovered:F,isDisabled:h=!1,className:A,style:q,documentHeight:Z="600px"}=l,[y,W]=d.useState(!s.validation?.scroll?.required),[E,V]=d.useState(new Map),[w,z]=d.useState(!1),[T,B]=d.useState(!1),[I,O]=d.useState([]),[J,Q]=d.useState(!1),k=d.useRef(null),x=d.useRef(null),K=d.useRef(Date.now()),R=d.useRef(n);R.current=n;const j=d.useCallback(t=>{if(!x.current?.activeEditor)return;const r=x.current.activeEditor,o=R.current.signer?.find(c=>c.id===t.id);let g;o?.type==="signature"&&t.value?g={json:{type:"image",attrs:{src:typeof t.value=="string"&&t.value.startsWith("data:image/")?t.value:H(String(t.value)),alt:"Signature"}}}:g={text:String(t.value??"")},t.id&&r.commands.updateStructuredContentById(t.id,g)},[]);function H(t){const r=globalThis.document.createElement("canvas"),o=r.getContext("2d"),g=30;o.font=`italic ${g}px cursive`;const S=o.measureText(t).width,le=g*1.3,ce=4,ie=6;return r.width=Math.ceil(S+ce*2)+20,r.height=Math.ceil(le+ie*2),o.font=`italic ${g}px cursive`,o.fillStyle="black",o.textAlign="center",o.textBaseline="middle",o.fillText(t,r.width/2,r.height/2),r.toDataURL("image/png")}const M=d.useCallback(t=>{if(!t)return;const r=t.helpers.structuredContentCommands.getStructuredContentTags(t.state),o=new Map;R.current.document?.forEach(c=>{c.id&&o.set(c.id,c.value)}),R.current.signer?.forEach(c=>{c.value!==void 0&&o.set(c.id,c.value)});const g=r.map(({node:c})=>({id:c.attrs.id,label:c.attrs.label,value:o.get(c.attrs.id)??c.textContent??""})).filter(c=>c.id);g.length>0&&(F?.(g),[...R.current.document||[],...R.current.signer||[]].filter(S=>S.value!==void 0).forEach(S=>j({id:S.id,value:S.value})))},[F,j]),C=t=>{const r={...t,timestamp:new Date().toISOString()};O(o=>[...o,r])};d.useEffect(()=>k.current?((async()=>{const{SuperDoc:r}=await import("superdoc"),o=new r({selector:k.current,document:s.source,documentMode:"viewing",onReady:()=>{o.activeEditor&&M(o.activeEditor),C({type:"ready"}),Q(!0)}});x.current=o})(),()=>{x.current&&(x.current.destroy(),x.current=null)}):void 0,[s.source,s.mode,M]),d.useEffect(()=>{if(!s.validation?.scroll?.required||!J)return;const t=k.current;if(!t)return;const r=()=>{const{scrollTop:o,scrollHeight:g,clientHeight:c}=t,S=o/(g-c);(S>=.95||g<=c)&&(W(!0),C({type:"scroll",data:{percent:Math.round(S*100)}}))};return t.addEventListener("scroll",r),r(),()=>t.removeEventListener("scroll",r)},[s.validation?.scroll?.required,J]);const G=d.useCallback((t,r)=>{V(o=>{const g=o.get(t),c=new Map(o);return c.set(t,r),j({id:t,value:r}),C({type:"field_change",data:{fieldId:t,value:r,previousValue:g}}),D?.({id:t,value:r,previousValue:g}),c})},[D,j]),e=d.useCallback(()=>s.validation?.scroll?.required&&!y?!1:(n.signer||[]).every(t=>{if(!t.validation?.required)return!0;const r=E.get(t.id);return r&&(typeof r!="string"||r.trim())}),[y,n.signer,E,s.validation?.scroll?.required]);d.useEffect(()=>{const t=e();z(t),U?.({scrolled:y,fields:E,isValid:t,isSubmitting:T})},[y,E,T,e,U]);const a=d.useCallback(async()=>{if(h)return;const t=await x.current?.export({exportType:["pdf"],isFinalDoc:!0,triggerDownload:!1});if(t&&P)P(t,m?.fileName||"document.pdf");else if(t){const r=URL.createObjectURL(t),o=globalThis.document.createElement("a");o.href=r,o.download=m?.fileName||"document.pdf",o.click(),URL.revokeObjectURL(r)}},[h,m,P]),i=d.useCallback(async()=>{if(!w||h||T)return;B(!0),C({type:"submit"});const t={eventId:u,timestamp:new Date().toISOString(),duration:Math.floor((Date.now()-K.current)/1e3),auditTrail:I,documentFields:n.document||[],signerFields:(n.signer||[]).map(r=>({id:r.id,value:E.get(r.id)??null})),isFullyCompleted:w};try{await _(t)}finally{B(!1)}},[w,h,T,u,I,n,E,_]),p=t=>{const r=t.component||N(t.type);return v.jsx(r,{value:E.get(t.id)??null,onChange:o=>G(t.id,o),isDisabled:h,label:t.label},t.id)},N=t=>{switch(t){case"signature":case"text":return ae;case"consent":case"checkbox":return oe}},Y=()=>{const t=m?.component||xe(m),r=b?.component||Re(b);return v.jsxs("div",{className:"superdoc-esign-actions",style:{display:"flex",gap:"10px"},children:[s.mode!=="download"&&v.jsx(r,{onClick:i,isValid:w,isDisabled:h,isSubmitting:T}),v.jsx(t,{onClick:a,fileName:m?.fileName,isDisabled:h})]})};return d.useImperativeHandle(f,()=>({getState:()=>({scrolled:y,fields:E,isValid:w,isSubmitting:T}),getAuditTrail:()=>I,reset:()=>{W(!s.validation?.scroll?.required),V(new Map),z(!1),O([])}})),v.jsxs("div",{className:`superdoc-esign-container ${A||""}`,style:q,children:[v.jsx("div",{className:"superdoc-esign-document",children:v.jsx("div",{ref:k,style:{height:Z,overflow:"auto"}})}),v.jsxs("div",{className:"superdoc-esign-controls",style:{marginTop:"20px"},children:[n.signer&&n.signer.length>0&&v.jsx("div",{className:"superdoc-esign-fields",style:{marginBottom:"20px"},children:n.signer.map(p)}),Y()]})]})});se.displayName="SuperDocESign";exports.ConsentCheckbox=oe;exports.SignatureInput=ae;exports.default=se;
|