Merge pull request #24 from OnedocLabs/ffo-77-add-signature-components

Adds signing fields

docs/components/signature.mdx

@@ -0,0 +1,109 @@
+---
+title: Signature
+icon: signature
+description: "Add signature fields to your document. You can specify various types of fields like signature, initials, date, and more.
+
+<Warning>
+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 contact@onedoclabs.com.
+</Warning>
+"
+---
+
+## Field
+
+Support
+
+<div style={{
+    display: "grid",
+    gridTemplateColumns: "repeat(2, 1fr)",
+    gap: "0.5rem",
+  }}><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>
+
+### Examples
+
+#### Preview
+
+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/).
+
+Supported fields:
+
+| Field Type | Description |
+|------------|-------------|
+| signHere | Signature field |
+| signHereOptional | Optional signature field |
+| signInitialHere | Initials field |
+| signInitialHereOptional | Optional initials field |
+| company | Company name field |
+| dateSigned | Date signed field |
+| title | Title field |
+| fullName | Full name field |
+| lastName | Last name field |
+| firstName | First name field |
+| emailAddress | Email address field |
+| number | Number field |
+| date | Date field |
+| ssn | Social Security Number field |
+| zip5 | ZIP code field |
+| zip5dash4 | ZIP code with 4-digit extension field |
+| note | Note field |
+| list | List field |
+| checkbox | Checkbox field |
+| radio | Radio button field |
+| approve | Approve button field |
+| decline | Decline button field |
+| view | View button field |
+| signerAttachment | Signer attachment field |
+| signerAttachmentOptional | Optional signer attachment field |
+
+<Frame type="glass"><img src="../images/previews/field-81a661f2/document.1.jpg" style={{ maxHeight: '400px', borderRadius: "0.25rem", overflow: "hidden" }} /></Frame>
+
+<div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeGroup>
+```jsx template.tsx
+import { Field } from "@onedoc/react-print";
+
+<>
+  <Tailwind>
+    <h2 className="text-xl font-bold mb-4">Signature</h2>
+    <div className="p-4 rounded-md border border-gray-200">
+      By
+      <br />
+      <Field
+        type="fullName"
+        signee="sender"
+        defaultValue="John Doe"
+        className="border-b border-b-gray-300"
+      />
+      <br />
+      <Field
+        type="dateSigned"
+        signee="sender"
+        defaultValue="04/18/2024"
+        className="border-b border-b-gray-300"
+      />
+      <br />
+      <Field
+        type="signHere"
+        signee="sender"
+        className="border border-gray-300 h-48"
+      />
+    </div>
+  </Tailwind>
+</>;
+
+```
+```css base.css
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");
+
+html,
+body {
+  font-size: 28px;
+  font-family: "Inter", sans-serif;
+}
+
+@page {
+  size: A4;
+}
+
+```
+</CodeGroup></div>
+

docs/mint.json

@@ -95,6 +95,7 @@
         "components/latex",
         "components/markdown",
         "components/shell",
+        "components/signature",
         "components/tailwind",
         "components/variables"
       ]

docs/snippets/components.mdx

@@ -10,6 +10,8 @@
     Render Markdown inside your templates.
   </Card><Card title="Shell" icon="border-all" href="components/shell">
     Display content in other page regions.
+  </Card><Card title="Signature" icon="signature" href="components/signature">
+    Add signature fields to your document.
   </Card><Card title="Tailwind" icon="wind" href="components/tailwind">
     A simple, drop-in way to use Tailwind CSS in your components.
   </Card><Card title="Variables" icon="subscript" href="components/variables">

src/client.ts

@@ -23,3 +23,5 @@ export { compile, CompileOptions } from "./compile/compile";
 export { CSS } from "./css/css";
 export { Markdown } from "./markdown/markdown";
 export { Latex } from "./latex/latex";
+export { Tailwind } from "./tailwind/tailwind";
+export { Field } from "./signature/signature";

src/server.ts

@@ -1,2 +1 @@
 export * from "./client";
-export { Tailwind } from "./tailwind/tailwind";

src/signature/signature.tsx

@@ -0,0 +1,137 @@
+import { Tailwind } from "@onedoc/react-print";
+import { DocConfig } from "docgen/types";
+import React from "react";
+
+// This provides a loose support for DocuSign fields
+const availableFields = {
+  signHere: "eSignSignHere",
+  signHereOptional: "eSignSignHereOptional",
+  signInitialHere: "eSignInitialHere",
+  signInitialHereOptional: "eSignInitialHereOptional",
+  company: "eSignCompany",
+  dateSigned: "eSignDateSigned",
+  title: "eSignTitle",
+  fullName: "eSignFullName",
+  lastName: "eSignLastName",
+  firstName: "eSignFirstName",
+  emailAddress: "eSignEmailAddress",
+  number: "eSignNumber",
+  date: "eSignDate",
+  ssn: "eSignSSN",
+  zip5: "eSignZIP5",
+  zip5dash4: "eSignZIP5DASH4",
+  note: "eSignNote",
+  list: "eSignList",
+  checkbox: "eSignCheckbox",
+  radio: "eSignRadio",
+  approve: "eSignApprove",
+  decline: "eSignDecline",
+  view: "eSignView",
+  signerAttachment: "eSignSignerAttachment",
+  signerAttachmentOptional: "eSignSignerAttachmentOptional",
+};
+
+type fieldTypes = keyof typeof availableFields;
+
+export const Field = ({
+  type,
+  signee,
+  ...props
+}: {
+  type: fieldTypes;
+  signee: string;
+} & React.InputHTMLAttributes<HTMLInputElement>) => {
+  return (
+    <input
+      {...props}
+      name={availableFields[type]}
+      type={
+        type === "radio" ? "radio" : type === "checkbox" ? "checkbox" : "text"
+      }
+      data-onedoc-sign={type}
+      className={`--onedoc-signature-field --onedoc-signature-field-${type} ${props.className || ""}`}
+    />
+  );
+};
+
+export const __docConfig: DocConfig = {
+  name: "Signature",
+  icon: "signature",
+  description: `Add signature fields to your document. You can specify various types of fields like signature, initials, date, and more.
+
+<Warning>
+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 contact@onedoclabs.com.
+</Warning>
+`,
+  components: {
+    Field: {
+      client: true,
+      server: true,
+      examples: {
+        default: {
+          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/).
+
+Supported fields:
+
+| Field Type | Description |
+|------------|-------------|
+| signHere | Signature field |
+| signHereOptional | Optional signature field |
+| signInitialHere | Initials field |
+| signInitialHereOptional | Optional initials field |
+| company | Company name field |
+| dateSigned | Date signed field |
+| title | Title field |
+| fullName | Full name field |
+| lastName | Last name field |
+| firstName | First name field |
+| emailAddress | Email address field |
+| number | Number field |
+| date | Date field |
+| ssn | Social Security Number field |
+| zip5 | ZIP code field |
+| zip5dash4 | ZIP code with 4-digit extension field |
+| note | Note field |
+| list | List field |
+| checkbox | Checkbox field |
+| radio | Radio button field |
+| approve | Approve button field |
+| decline | Decline button field |
+| view | View button field |
+| signerAttachment | Signer attachment field |
+| signerAttachmentOptional | Optional signer attachment field |`,
+          template: (
+            <>
+              <Tailwind>
+                <h2 className="text-xl font-bold mb-4">Signature</h2>
+                <div className="p-4 rounded-md border border-gray-200">
+                  By
+                  <br />
+                  <Field
+                    type="fullName"
+                    signee="sender"
+                    defaultValue="John Doe"
+                    className="border-b border-b-gray-300"
+                  />
+                  <br />
+                  <Field
+                    type="dateSigned"
+                    signee="sender"
+                    defaultValue="04/18/2024"
+                    className="border-b border-b-gray-300"
+                  />
+                  <br />
+                  <Field
+                    type="signHere"
+                    signee="sender"
+                    className="border border-gray-300 h-48"
+                  />
+                </div>
+              </Tailwind>
+            </>
+          ),
+        },
+      },
+    },
+  },
+};