feat: added Form Annotation support

packages/examples/src/form/index.jsx

@@ -0,0 +1,124 @@
+import React from 'react';
+import {
+  Document,
+  Page,
+  View,
+  Text,
+  Checkbox,
+  FormField,
+  TextInput,
+  Picker,
+  FormList,
+} from '@react-pdf/renderer';
+
+const FormPdf = () => (
+  <Document>
+    <Page>
+      <View
+        style={{
+          backgroundColor: 'rgba(182,28,28,0.62)',
+          width: '30%',
+          height: '100%',
+        }}
+      >
+        <FormField name="user-info" style={{ flexDirection: 'column' }}>
+          <Text>TextInput</Text>
+          <TextInput
+            name="username"
+            value="foo"
+            align="center"
+            style={{ height: '50px' }}
+          />
+
+          {/* Nested works as well */}
+          <View>
+            <Text>TextInput</Text>
+            <TextInput
+              name="password"
+              value="bar"
+              align="center"
+              style={{ height: '50px' }}
+              password
+            />
+          </View>
+
+          <Text>Checkbox (not checked)</Text>
+          <Checkbox name="checkbox-default" style={{ height: '20px' }} />
+
+          <Text>Checkbox (checked)</Text>
+          <Checkbox
+            name="checkbox-checked"
+            checked
+            style={{ height: '20px' }}
+          />
+
+          <Text>Picker</Text>
+          <Picker
+            name="combo"
+            select={['', 'option 1', 'option 2']}
+            value=""
+            defaultValue=""
+            style={{ height: '20px' }}
+          />
+
+          <Text>FormList</Text>
+          <FormList
+            name="list"
+            select={['', 'option 1', 'option 2']}
+            value=""
+            defaultValue=""
+            style={{ height: '50px' }}
+          />
+        </FormField>
+      </View>
+    </Page>
+
+    <Page>
+      <View
+        style={{
+          backgroundColor: 'rgba(182,28,28,0.62)',
+          width: '30%',
+          height: '100%',
+        }}
+      >
+        <FormField name="user-details" style={{ flexDirection: 'column' }}>
+          <Text>TextInput (multiline)</Text>
+          <TextInput
+            name="details"
+            value="hello"
+            align="center"
+            multiline
+            style={{ fontSize: 8, height: '100px' }}
+          />
+        </FormField>
+      </View>
+    </Page>
+
+    <Page>
+      <View
+        style={{
+          backgroundColor: 'rgba(182,28,28,0.62)',
+          width: '30%',
+          height: '100%',
+        }}
+      >
+        <Text>TextInput (no FormField)</Text>
+        <TextInput
+          name="textinput-no-formfield"
+          value="no formfield"
+          align="center"
+          style={{ height: '50px' }}
+        />
+
+        <Text>Checkbox (checked, no FormField)</Text>
+        <Checkbox
+          name="checkbox-no-formfield"
+          checked
+          style={{ height: '20px' }}
+        />
+      </View>
+    </Page>
+  </Document>
+);
+
+export default FormPdf;

packages/primitives/src/index.js

@@ -8,6 +8,11 @@ export const Note = 'NOTE';
 export const Path = 'PATH';
 export const Rect = 'RECT';
 export const Line = 'LINE';
+export const FormField = 'FORM_FIELD';
+export const TextInput = 'TEXT_INPUT';
+export const Picker = 'PICKER';
+export const Checkbox = 'CHECKBOX';
+export const FormList = 'FORM_LIST';
 export const Stop = 'STOP';
 export const Defs = 'DEFS';
 export const Image = 'IMAGE';

packages/primitives/tests/index.test.js

@@ -39,6 +39,22 @@ describe('primitives', () => {
     expect(primitives.Line).toBeTruthy();
   });
 
+  test('should export form field', () => {
+    expect(primitives.FormField).toBeTruthy();
+  });
+
+  test('should export text input', () => {
+    expect(primitives.TextInput).toBeTruthy();
+  });
+
+  test('should export form list', () => {
+    expect(primitives.FormList).toBeTruthy();
+  });
+
+  test('should export picker', () => {
+    expect(primitives.Picker).toBeTruthy();
+  });
+
   test('should export stop', () => {
     expect(primitives.Stop).toBeTruthy();
   });

packages/render/src/primitives/form/renderCheckbox.js

@@ -0,0 +1,24 @@
+import { parseCheckboxOptions } from '../../utils/parseFormOptions';
+
+const renderCheckbox = (ctx, node, options) => {
+  const { top, left, width, height } = node.box || {};
+
+  // Element's name
+  const name = node.props?.name || '';
+  const formFieldOptions = options.formFields?.at(0);
+
+  if (!ctx._root.data.AcroForm) {
+    ctx.initForm();
+  }
+
+  ctx.formCheckbox(
+    name,
+    left,
+    top,
+    width,
+    height,
+    parseCheckboxOptions(ctx, node, formFieldOptions),
+  );
+};
+
+export default renderCheckbox;

packages/render/src/primitives/form/renderFormField.js

@@ -0,0 +1,18 @@
+const renderFormField = (ctx, node, options) => {
+  const name = node.props?.name || '';
+
+  if (!ctx._root.data.AcroForm) {
+    ctx.initForm();
+  }
+
+  const formField = ctx.formField(name);
+  const option = options;
+  if (!option.formFields) option.formFields = [formField];
+  else option.formFields.push(formField);
+};
+
+export const cleanUpFormField = (_ctx, _node, options) => {
+  options.formFields.pop();
+};
+
+export default renderFormField;

packages/render/src/primitives/form/renderFormList.js

@@ -0,0 +1,23 @@
+import { parsePickerAndListFieldOptions } from '../../utils/parseFormOptions';
+
+const renderFormList = (ctx, node) => {
+  const { top, left, width, height } = node.box || {};
+
+  // Element's name
+  const name = node.props?.name || '';
+
+  if (!ctx._root.data.AcroForm) {
+    ctx.initForm();
+  }
+
+  ctx.formList(
+    name,
+    left,
+    top,
+    width,
+    height,
+    parsePickerAndListFieldOptions(node),
+  );
+};
+
+export default renderFormList;

packages/render/src/primitives/form/renderPicker.js

@@ -0,0 +1,23 @@
+import { parsePickerAndListFieldOptions } from '../../utils/parseFormOptions';
+
+const renderPicker = (ctx, node) => {
+  const { top, left, width, height } = node.box || {};
+
+  // Element's name
+  const name = node.props?.name || '';
+
+  if (!ctx._root.data.AcroForm) {
+    ctx.initForm();
+  }
+
+  ctx.formCombo(
+    name,
+    left,
+    top,
+    width,
+    height,
+    parsePickerAndListFieldOptions(node),
+  );
+};
+
+export default renderPicker;

packages/render/src/primitives/form/renderTextInput.js

@@ -0,0 +1,24 @@
+import { parseTextFieldOptions } from '../../utils/parseFormOptions';
+
+const renderTextInput = (ctx, node, options) => {
+  const { top, left, width, height } = node.box || {};
+
+  // Element's name
+  const name = node.props?.name || '';
+  const formFieldOptions = options.formFields?.at(0);
+
+  if (!ctx._root.data.AcroForm) {
+    ctx.initForm();
+  }
+
+  ctx.formText(
+    name,
+    left,
+    top,
+    width,
+    height,
+    parseTextFieldOptions(node, formFieldOptions),
+  );
+};
+
+export default renderTextInput;

packages/render/src/primitives/renderNode.js

@@ -12,6 +12,11 @@ import setLink from '../operations/setLink';
 import clipNode from '../operations/clipNode';
 import transform from '../operations/transform';
 import setDestination from '../operations/setDestination';
+import renderTextInput from './form/renderTextInput';
+import renderPicker from './form/renderPicker';
+import renderFormField, { cleanUpFormField } from './form/renderFormField';
+import renderFormList from './form/renderFormList';
+import renderCheckbox from './form/renderCheckbox';
 
 const isRecursiveNode = (node) => node.type !== P.Text && node.type !== P.Svg;
 
@@ -23,6 +28,7 @@ const renderChildren = (ctx, node, options) => {
   }
 
   const children = node.children || [];
+  // eslint-disable-next-line no-use-before-define
   const renderChild = (child) => renderNode(ctx, child, options);
 
   children.forEach(renderChild);
@@ -34,11 +40,20 @@ const renderFns = {
   [P.Text]: renderText,
   [P.Note]: renderNote,
   [P.Image]: renderImage,
+  [P.FormField]: renderFormField,
+  [P.TextInput]: renderTextInput,
+  [P.Picker]: renderPicker,
+  [P.Checkbox]: renderCheckbox,
+  [P.FormList]: renderFormList,
   [P.Canvas]: renderCanvas,
   [P.Svg]: renderSvg,
   [P.Link]: setLink,
 };
 
+const cleanUpFns = {
+  [P.FormField]: cleanUpFormField,
+};
+
 const renderNode = (ctx, node, options) => {
   const overflowHidden = node.style?.overflow === 'hidden';
   const shouldRenderChildren = isRecursiveNode(node);
@@ -59,6 +74,10 @@ const renderNode = (ctx, node, options) => {
 
   if (shouldRenderChildren) renderChildren(ctx, node, options);
 
+  const cleanUpFn = cleanUpFns[node.type];
+
+  if (cleanUpFn) cleanUpFn(ctx, node, options);
+
   setDestination(ctx, node);
   renderDebug(ctx, node);