Skip to content

Commit a9651d4

Browse files
AugusteLefAugusteLef
authored
Merge pull request #24 from OnedocLabs/ffo-77-add-signature-components
Adds signing fields
2 parents 2be4ba3 + 0c102ab commit a9651d4

File tree

8 files changed

+251
-1
lines changed

8 files changed

+251
-1
lines changed

‎docs/components/signature.mdx

+109
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
---
2+
title: Signature
3+
icon: signature
4+
description: "Add signature fields to your document. You can specify various types of fields like signature, initials, date, and more.
5+
6+
<Warning>
7+
Signature and form filling are currently only available to select customers. If you would like to use these features in your project, please reach out at [email protected].
8+
</Warning>
9+
"
10+
---
11+
12+
## Field
13+
14+
Support
15+
16+
<div style={{
17+
display: "grid",
18+
gridTemplateColumns: "repeat(2, 1fr)",
19+
gap: "0.5rem",
20+
}}><div className="flex items-center p-3 border rounded-md border-gray-700" style={{borderColor: '#374151'}}><svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" viewBox="0 0 512 512"><path fill="#22c55e" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg><span>Client-side</span></div><div className="flex items-center p-3 border rounded-md" style={{borderColor: '#374151'}}><svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" viewBox="0 0 512 512"><path fill="#22c55e" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg><span>Server-side</span></div></div>
21+
22+
### Examples
23+
24+
#### Preview
25+
26+
The created fields can be signed as-is in Acrobat Reader or other PDF viewers, using Onedoc's signature API, or through other e-signature services like [DocuSign](https://developers.docusign.com/docs/esign-rest-api/esign101/concepts/tabs/pdf-transform/).
27+
28+
Supported fields:
29+
30+
| Field Type | Description |
31+
|------------|-------------|
32+
| signHere | Signature field |
33+
| signHereOptional | Optional signature field |
34+
| signInitialHere | Initials field |
35+
| signInitialHereOptional | Optional initials field |
36+
| company | Company name field |
37+
| dateSigned | Date signed field |
38+
| title | Title field |
39+
| fullName | Full name field |
40+
| lastName | Last name field |
41+
| firstName | First name field |
42+
| emailAddress | Email address field |
43+
| number | Number field |
44+
| date | Date field |
45+
| ssn | Social Security Number field |
46+
| zip5 | ZIP code field |
47+
| zip5dash4 | ZIP code with 4-digit extension field |
48+
| note | Note field |
49+
| list | List field |
50+
| checkbox | Checkbox field |
51+
| radio | Radio button field |
52+
| approve | Approve button field |
53+
| decline | Decline button field |
54+
| view | View button field |
55+
| signerAttachment | Signer attachment field |
56+
| signerAttachmentOptional | Optional signer attachment field |
57+
58+
<Frame type="glass"><img src="../images/previews/field-81a661f2/document.1.jpg" style={{ maxHeight: '400px', borderRadius: "0.25rem", overflow: "hidden" }} /></Frame>
59+
60+
<div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeGroup>
61+
```jsx template.tsx
62+
import { Field } from "@onedoc/react-print";
63+
64+
<>
65+
<Tailwind>
66+
<h2 className="text-xl font-bold mb-4">Signature</h2>
67+
<div className="p-4 rounded-md border border-gray-200">
68+
By
69+
<br />
70+
<Field
71+
type="fullName"
72+
signee="sender"
73+
defaultValue="John Doe"
74+
className="border-b border-b-gray-300"
75+
/>
76+
<br />
77+
<Field
78+
type="dateSigned"
79+
signee="sender"
80+
defaultValue="04/18/2024"
81+
className="border-b border-b-gray-300"
82+
/>
83+
<br />
84+
<Field
85+
type="signHere"
86+
signee="sender"
87+
className="border border-gray-300 h-48"
88+
/>
89+
</div>
90+
</Tailwind>
91+
</>;
92+
93+
```
94+
```css base.css
95+
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");
96+
97+
html,
98+
body {
99+
font-size: 28px;
100+
font-family: "Inter", sans-serif;
101+
}
102+
103+
@page {
104+
size: A4;
105+
}
106+
107+
```
108+
</CodeGroup></div>
109+

‎docs/images/previews/field-81a661f2/document.1.jpg

59.6 KB
Loading

‎docs/images/previews/field-81a661f2/document.pdf

24.3 KB
Binary file not shown.

‎docs/mint.json

+1
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,7 @@
9595
"components/latex",
9696
"components/markdown",
9797
"components/shell",
98+
"components/signature",
9899
"components/tailwind",
99100
"components/variables"
100101
]

‎docs/snippets/components.mdx

+2
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@
1010
Render Markdown inside your templates.
1111
</Card><Card title="Shell" icon="border-all" href="components/shell">
1212
Display content in other page regions.
13+
</Card><Card title="Signature" icon="signature" href="components/signature">
14+
Add signature fields to your document.
1315
</Card><Card title="Tailwind" icon="wind" href="components/tailwind">
1416
A simple, drop-in way to use Tailwind CSS in your components.
1517
</Card><Card title="Variables" icon="subscript" href="components/variables">

‎src/client.ts

+2
Original file line numberDiff line numberDiff line change
@@ -23,3 +23,5 @@ export { compile, CompileOptions } from "./compile/compile";
2323
export { CSS } from "./css/css";
2424
export { Markdown } from "./markdown/markdown";
2525
export { Latex } from "./latex/latex";
26+
export { Tailwind } from "./tailwind/tailwind";
27+
export { Field } from "./signature/signature";

‎src/server.ts

-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
11
export * from "./client";
2-
export { Tailwind } from "./tailwind/tailwind";

‎src/signature/signature.tsx

+137
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
import { Tailwind } from "@onedoc/react-print";
2+
import { DocConfig } from "docgen/types";
3+
import React from "react";
4+
5+
// This provides a loose support for DocuSign fields
6+
const availableFields = {
7+
signHere: "eSignSignHere",
8+
signHereOptional: "eSignSignHereOptional",
9+
signInitialHere: "eSignInitialHere",
10+
signInitialHereOptional: "eSignInitialHereOptional",
11+
company: "eSignCompany",
12+
dateSigned: "eSignDateSigned",
13+
title: "eSignTitle",
14+
fullName: "eSignFullName",
15+
lastName: "eSignLastName",
16+
firstName: "eSignFirstName",
17+
emailAddress: "eSignEmailAddress",
18+
number: "eSignNumber",
19+
date: "eSignDate",
20+
ssn: "eSignSSN",
21+
zip5: "eSignZIP5",
22+
zip5dash4: "eSignZIP5DASH4",
23+
note: "eSignNote",
24+
list: "eSignList",
25+
checkbox: "eSignCheckbox",
26+
radio: "eSignRadio",
27+
approve: "eSignApprove",
28+
decline: "eSignDecline",
29+
view: "eSignView",
30+
signerAttachment: "eSignSignerAttachment",
31+
signerAttachmentOptional: "eSignSignerAttachmentOptional",
32+
};
33+
34+
type fieldTypes = keyof typeof availableFields;
35+
36+
export const Field = ({
37+
type,
38+
signee,
39+
...props
40+
}: {
41+
type: fieldTypes;
42+
signee: string;
43+
} & React.InputHTMLAttributes<HTMLInputElement>) => {
44+
return (
45+
<input
46+
{...props}
47+
name={availableFields[type]}
48+
type={
49+
type === "radio" ? "radio" : type === "checkbox" ? "checkbox" : "text"
50+
}
51+
data-onedoc-sign={type}
52+
className={`--onedoc-signature-field --onedoc-signature-field-${type} ${props.className || ""}`}
53+
/>
54+
);
55+
};
56+
57+
export const __docConfig: DocConfig = {
58+
name: "Signature",
59+
icon: "signature",
60+
description: `Add signature fields to your document. You can specify various types of fields like signature, initials, date, and more.
61+
62+
<Warning>
63+
Signature and form filling are currently only available to select customers. If you would like to use these features in your project, please reach out at [email protected].
64+
</Warning>
65+
`,
66+
components: {
67+
Field: {
68+
client: true,
69+
server: true,
70+
examples: {
71+
default: {
72+
description: `The created fields can be signed as-is in Acrobat Reader or other PDF viewers, using Onedoc's signature API, or through other e-signature services like [DocuSign](https://developers.docusign.com/docs/esign-rest-api/esign101/concepts/tabs/pdf-transform/).
73+
74+
Supported fields:
75+
76+
| Field Type | Description |
77+
|------------|-------------|
78+
| signHere | Signature field |
79+
| signHereOptional | Optional signature field |
80+
| signInitialHere | Initials field |
81+
| signInitialHereOptional | Optional initials field |
82+
| company | Company name field |
83+
| dateSigned | Date signed field |
84+
| title | Title field |
85+
| fullName | Full name field |
86+
| lastName | Last name field |
87+
| firstName | First name field |
88+
| emailAddress | Email address field |
89+
| number | Number field |
90+
| date | Date field |
91+
| ssn | Social Security Number field |
92+
| zip5 | ZIP code field |
93+
| zip5dash4 | ZIP code with 4-digit extension field |
94+
| note | Note field |
95+
| list | List field |
96+
| checkbox | Checkbox field |
97+
| radio | Radio button field |
98+
| approve | Approve button field |
99+
| decline | Decline button field |
100+
| view | View button field |
101+
| signerAttachment | Signer attachment field |
102+
| signerAttachmentOptional | Optional signer attachment field |`,
103+
template: (
104+
<>
105+
<Tailwind>
106+
<h2 className="text-xl font-bold mb-4">Signature</h2>
107+
<div className="p-4 rounded-md border border-gray-200">
108+
By
109+
<br />
110+
<Field
111+
type="fullName"
112+
signee="sender"
113+
defaultValue="John Doe"
114+
className="border-b border-b-gray-300"
115+
/>
116+
<br />
117+
<Field
118+
type="dateSigned"
119+
signee="sender"
120+
defaultValue="04/18/2024"
121+
className="border-b border-b-gray-300"
122+
/>
123+
<br />
124+
<Field
125+
type="signHere"
126+
signee="sender"
127+
className="border border-gray-300 h-48"
128+
/>
129+
</div>
130+
</Tailwind>
131+
</>
132+
),
133+
},
134+
},
135+
},
136+
},
137+
};

0 commit comments

Comments
 (0)