From 3cbc01171939cb5ba3099de67f0800f11e6943c7 Mon Sep 17 00:00:00 2001
From: Juan Polanco <jspolancor@gmail.com>
Date: Mon, 26 Sep 2022 10:51:36 -0500
Subject: [PATCH] Add input-specific `propType.source` type

Most of the current sources read HTML values / attributes, but for `input` elements it is sometimes needed to get the actual "current" value from the JS API, since it could have been changed before the component was initialized.

This allows users to fetch user input from a form after it being rendered on the server (and after certain plugins autofill its content), so it's a better representation of the value on the page. It also allows reading a complete form into a single property.
---
 CHANGELOG.md                                  |   1 +
 docs/api/props.md                             |  50 ++-
 docs/guide/props.md                           |   4 +-
 src/lib/props/propDefinitions.types.ts        |  11 +-
 .../createFormPropertySource.test.ts          | 274 ++++++++++++++++
 .../createFormPropertySource.testutils.ts     |  77 +++++
 .../createFormPropertySource.ts               | 111 +++++++
 src/lib/test-utils/propTypes.ts               |  11 +
 src/lib/utils/global.ts                       |   2 +
 .../core/props/FormProps.stories.ts           | 309 ++++++++++++++++++
 10 files changed, 845 insertions(+), 5 deletions(-)
 create mode 100644 src/lib/props/property-sources/createFormPropertySource.test.ts
 create mode 100644 src/lib/props/property-sources/createFormPropertySource.testutils.ts
 create mode 100644 src/lib/props/property-sources/createFormPropertySource.ts
 create mode 100644 src/lib/test-utils/propTypes.ts
 create mode 100644 test-storybook/src/components/core/props/FormProps.stories.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8d3dd0aa..da1c00c6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 - Add `event` binding to refComponents
 - Add the `'custom'` `propType.source` for user-defined extraction functions
+- Add `form` source, allowing you to easily extract initial values from forms or inputs
 
 ### Changed
 
diff --git a/docs/api/props.md b/docs/api/props.md
index b2d760dd..14ca8f23 100644
--- a/docs/api/props.md
+++ b/docs/api/props.md
@@ -33,7 +33,7 @@ export type PropTypeDefinition<T = any> = {
   shapeType?: Function;
   sourceOptions?: {
     target?: string;
-    type?: 'data' | 'json' | 'attr' | 'css' | 'text' | 'html' | 'custom';
+    type?: 'data' | 'json' | 'attr' | 'css' | 'text' | 'html' | 'form' | 'custom';
     name?: string;
     options?: {
       cssPredicate?: Array<string>;
@@ -265,7 +265,7 @@ HTML besides the default behaviour.
 ```ts
 declare function source(options: {
   target?: string;
-  type?: 'data' | 'json' | 'attr' | 'css' | 'text' | 'html', | 'custom';
+  type?: 'data' | 'json' | 'attr' | 'css' | 'text' | 'html' | 'form' | 'custom';
   name?: string;
   options?: { 
     cssPredicate?: Array<string>;
@@ -276,7 +276,8 @@ declare function source(options: {
 * `target?: string` – The refName (those you configure as part of the component options)
   from which you want to extract this property.
   Defaults to the data-component element.
-* `type?: 'data' | 'json' | 'attr' | 'css' | 'text' | 'html' | 'custom'` - The type source you want to extract.
+* `type?: 'data' | 'json' | 'attr' | 'css' | 'text' | 'html' | 'form' | 'custom'` - The type source 
+  you want to extract.
   Defaults to the `data + json + css` source (`css` only for boolean props).
   * `data` – Reads the `data-attribute` from your target element.
   * `json` – Reads the object key from a `<script type="application/json">` JSON block that is 
@@ -290,6 +291,7 @@ declare function source(options: {
     to all values.
   * `text` – Reads the `textContents` from the target element.
   * `html` – Reads the `innerHTML` from the target element.
+  * `form` – Reads the `value` from the target element when targeting a form input and `FormData` when targeting a form element 
 * `name?: string` – For the `data`, `json`, `attr` and `css` source types, by default it will use 
   the 
   propName for the name of the (data) attribute or class name. For situations where the name
@@ -530,6 +532,48 @@ defineComponent({
   <span data-ref="value">12.45</span>
 </div>
 ```
+#### Use `form`
+```ts
+defineComponent({
+  name: 'my-component',
+  refs: {
+    // this is needed for the source-target
+    form: 'form',
+    email: 'email',
+    phone: 'phone',
+  },
+  props: {
+    // get the FormData from the form ref
+    // outputs FormData {}
+    form: propType.object.source(
+      { target: 'form', type: 'form', formData: true},
+    ),
+    // get the value from the email ref
+    // outputs "user@company.com"
+    email: propType.string.source(
+      { target: 'email', type: 'form'},
+    ),
+    // Extract the 'email' property from the form ref FormData object
+    // outputs "user@company.com"
+    emailAddress: propType.string.source(
+      { target: 'form', type: 'form', name: 'email'},
+    ),
+    // conversions to Booleans, Numbers and Dates also work
+    // outputs "986868" (as a number)
+    phone: propType.number.source(
+      { target: 'phone', type: 'form'},
+    ),
+  },
+})
+```
+```html
+<div data-component="my-component">
+  <form data-ref="form">
+    <input type="text" data-ref="email" value="user@company.com"/>
+    <input type="text" data-ref="phone" value="986868"/>
+  </form>
+</div>
+```
 
 #### Use `custom`
 
diff --git a/docs/guide/props.md b/docs/guide/props.md
index 3c4fc014..27d1c103 100644
--- a/docs/guide/props.md
+++ b/docs/guide/props.md
@@ -68,8 +68,10 @@ specify exactly what values you want to extract from where.
   
 * The `attr` source is similar to the `data` source, but uses normal attributes to extract data 
   from, and also allows conversion.
+
+* The `form` source allow you to extract _Input state_ from form elements, when targeting an input it will extract the value, when targeting a form it will extract the FormData Object. It allows for value conversion into basic data types as well.
   
-_Input state_ can be extracted using the `attr` binding if needed, but most often you will end 
+Remember, the `form` binding will extract the value from form inputs, but most often you will end 
 up using two-way bindings to manage syncing up these values with the internal component state.
 
 ### Parent components
diff --git a/src/lib/props/propDefinitions.types.ts b/src/lib/props/propDefinitions.types.ts
index c1bd64b1..42c067e0 100644
--- a/src/lib/props/propDefinitions.types.ts
+++ b/src/lib/props/propDefinitions.types.ts
@@ -6,6 +6,7 @@ import type { RefElementType } from '../refs/refDefinitions.types';
 export type SourceOption =
   | SourceOptionCss
   | SourceOptionHtmlText
+  | SourceOptionForm
   | SourceOptionCustom
   | {
       type?: 'data' | 'json' | 'attr' | 'custom';
@@ -20,6 +21,13 @@ export type SourceOptionHtmlText = {
   target?: string;
 };
 
+export type SourceOptionForm = {
+  type: 'form';
+  target?: string;
+  name?: string;
+  formData?: boolean;
+};
+
 export type SourceOptionCss = {
   type: 'css';
   target?: string;
@@ -65,7 +73,8 @@ export type PropTypeInfo<T = any> = Pick<
     target: RefElementType | undefined;
   } & Pick<SourceOption, 'type'> &
     Pick<SourceOptionCustom, 'options'> &
-    Pick<SourceOptionCss, 'options'>;
+    Pick<SourceOptionCss, 'options'> &
+    Pick<SourceOptionForm, 'formData'>;
 };
 
 // type OptionalPropertyKeys<T> = {
diff --git a/src/lib/props/property-sources/createFormPropertySource.test.ts b/src/lib/props/property-sources/createFormPropertySource.test.ts
new file mode 100644
index 00000000..c96f717a
--- /dev/null
+++ b/src/lib/props/property-sources/createFormPropertySource.test.ts
@@ -0,0 +1,274 @@
+import dedent from 'ts-dedent';
+import type { PropTypeInfo } from '../propDefinitions.types';
+import { createFormPropertySource } from './createFormPropertySource';
+import { getFullPropTypeInfo } from './createFormPropertySource.testutils';
+
+describe('createFormPropertySource', () => {
+  describe('function itself', () => {
+    it('should create without errors', () => {
+      expect(createFormPropertySource).not.toThrow();
+    });
+    it('should allow calling the created source without errors', () => {
+      expect(createFormPropertySource()).not.toThrow();
+    });
+  });
+
+  describe('hasProp', () => {
+    it('should return false if the type is "Function"', () => {
+      const form = document.createElement('form');
+      const functionPropInfo: PropTypeInfo = {
+        name: 'email',
+        type: Function,
+        source: {
+          name: 'email',
+          target: form,
+          type: 'form',
+        },
+      };
+      expect(createFormPropertySource()(form).hasProp(functionPropInfo)).toBe(false);
+    });
+    it('should return true if the type is different than "Function"', () => {
+      const form = document.createElement('form');
+      const validPropInfoTypes = [Number, String, Boolean, Date, Array, Object];
+      const propInfos: Array<PropTypeInfo> = validPropInfoTypes.map((type) => ({
+        name: 'foo',
+        type,
+        source: {
+          name: 'foo',
+          target: form,
+          type: 'form',
+        },
+      }));
+      propInfos.forEach((propInfo) => {
+        expect(createFormPropertySource()(form).hasProp(propInfo)).toBe(true);
+      });
+    });
+  });
+
+  describe('getProp', () => {
+    describe('Text inputs', () => {
+      const form = document.createElement('form');
+      form.innerHTML = `
+        <input type="email" name="email" value="juan.polanco@mediamonks.com"/>
+        <input type="password" name="password" value="123456"/>
+        <textarea name="description">lorem ipsum</textarea>
+      `;
+      const email = getFullPropTypeInfo('email', form);
+      const password = getFullPropTypeInfo('password', form);
+      const description = getFullPropTypeInfo('description', form);
+      const formSource = createFormPropertySource()(form);
+
+      describe('type String with an input target', () => {
+        it('Should return the input value if the target is a text input', () => {
+          expect(formSource.getProp(email.string.asInput)).toBe('juan.polanco@mediamonks.com');
+          expect(formSource.getProp(password.string.asInput)).toBe('123456');
+          expect(formSource.getProp(description.string.asInput)).toBe('lorem ipsum');
+        });
+      });
+
+      describe('type String with a form target', () => {
+        it('Should return the child input value if the target form', () => {
+          expect(formSource.getProp(email.string.asForm)).toBe('juan.polanco@mediamonks.com');
+          expect(formSource.getProp(password.string.asForm)).toBe('123456');
+          expect(formSource.getProp(description.string.asForm)).toBe('lorem ipsum');
+        });
+      });
+    });
+
+    describe('Non String text inputs', () => {
+      const form = document.createElement('form');
+      form.innerHTML = `
+        <input type="text" name="age" value="32"/>
+        <input type="text" name="height" value="1.70"/>
+        <input type="text" name="terms" value="true"/>
+        <input type="text" name="kids" value="false"/>
+        <input type="text" name="birthday" value="2022/06/06"/>
+        <input type="text" name="pets" value='["Armin", "Trico"]'/>
+        <input type="text" name="area" value='{ "zip": "110010", "latlong": 1293847}'/>
+      `;
+
+      const age = getFullPropTypeInfo('age', form);
+      const height = getFullPropTypeInfo('height', form);
+      const terms = getFullPropTypeInfo('terms', form);
+      const kids = getFullPropTypeInfo('kids', form);
+      const birthday = getFullPropTypeInfo('birthday', form);
+      const pets = getFullPropTypeInfo('pets', form);
+      const area = getFullPropTypeInfo('area', form);
+      const source = createFormPropertySource()(form);
+
+      it('Should return transformed input values for all possible types', () => {
+        expect(source.getProp(age.number.asInput)).toBe(32);
+        expect(source.getProp(height.number.asInput)).toBe(1.7);
+        expect(source.getProp(terms.boolean.asInput)).toBe(true);
+        expect(source.getProp(kids.boolean.asInput)).toBe(false);
+        expect(source.getProp(birthday.date.asInput)).toBeInstanceOf(Date);
+        expect(source.getProp(pets.array.asInput)).toEqual(['Armin', 'Trico']);
+        expect(source.getProp(area.object.asInput)).toEqual({ zip: '110010', latlong: 1293847 });
+      });
+
+      it('Should return the same transformed input values when passing an input element target and a form element target', () => {
+        expect(source.getProp(age.number.asInput)).toBe(source.getProp(age.number.asForm));
+        expect(source.getProp(age.number.asInput)).toBe(source.getProp(age.number.asForm));
+        expect(source.getProp(height.number.asInput)).toBe(source.getProp(height.number.asForm));
+        expect(source.getProp(terms.boolean.asInput)).toBe(source.getProp(terms.boolean.asForm));
+        expect(source.getProp(kids.boolean.asInput)).toBe(source.getProp(kids.boolean.asForm));
+        expect(source.getProp(birthday.date.asInput)).toEqual(source.getProp(birthday.date.asForm));
+        expect(source.getProp(pets.array.asInput)).toEqual(source.getProp(pets.array.asForm));
+        expect(source.getProp(area.object.asInput)).toEqual(source.getProp(area.object.asForm));
+      });
+    });
+
+    describe('checkbox', () => {
+      const form = document.createElement('form');
+      form.innerHTML = `
+        <input name="onBoolean" type="checkbox" checked/>
+        <input name="offBoolean" type="checkbox" />
+        <input name="onString" type="checkbox" checked/>
+        <input name="offString" type="checkbox" />
+        <input name="onStringValue" type="checkbox" value="foo" checked />
+        <input name="offStringValue" type="checkbox" value="foo" />
+      `;
+
+      const onBoolean = getFullPropTypeInfo('onBoolean', form);
+      const offBoolean = getFullPropTypeInfo('offBoolean', form);
+      const onString = getFullPropTypeInfo('onString', form);
+      const offString = getFullPropTypeInfo('offString', form);
+      const onStringValue = getFullPropTypeInfo('onStringValue', form);
+      const offStringValue = getFullPropTypeInfo('offStringValue', form);
+
+      it('Should return the checked value if the target is a checkbox and the propType is boolean', () => {
+        expect(createFormPropertySource()(form).getProp(onBoolean.boolean.asInput)).toBe(true);
+        expect(createFormPropertySource()(form).getProp(offBoolean.boolean.asInput)).toBe(false);
+      });
+
+      it('Should return the input value if the target is a checked checkbox and the propType is not boolean', () => {
+        expect(createFormPropertySource()(form).getProp(onString.string.asInput)).toBe('on');
+        expect(createFormPropertySource()(form).getProp(offString.string.asInput)).toBe(undefined);
+        expect(createFormPropertySource()(form).getProp(onStringValue.string.asInput)).toBe('foo');
+        expect(createFormPropertySource()(form).getProp(offStringValue.string.asInput)).toBe(
+          undefined,
+        );
+      });
+
+      it('Should return an array of strings if the target is a form with multiple checkboxes with the same name and the propType is Array', () => {
+        const checkboxesForm = document.createElement('form');
+        checkboxesForm.innerHTML = `
+          <input name="choices" type="checkbox" value="apple" checked/>
+          <input name="choices" type="checkbox" value="banana" checked />
+          <input name="choices" type="checkbox" value="peach" />
+          <input name="choices" type="checkbox" />
+        `;
+        const choices = getFullPropTypeInfo('checkbox', checkboxesForm, 'choices');
+
+        expect(createFormPropertySource()(checkboxesForm).getProp(choices.array.asForm)).toEqual([
+          'apple',
+          'banana',
+        ]);
+      });
+    });
+
+    describe('radio', () => {
+      const form = document.createElement('form');
+      form.innerHTML = `
+        <input value="single" name="maritalStatus" type="radio" checked/>
+        <input id="offBoolean" value="married" name="maritalStatus" type="radio" />
+      `;
+
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      const offBooleanElement = form.querySelector('#offBoolean')!;
+      const radioDirectValue = getFullPropTypeInfo('offBoolean', offBooleanElement);
+      const radioFormDataValue = getFullPropTypeInfo('onBoolean', form, 'maritalStatus');
+
+      it('Should show a warning message and return the input value when trying to get a radio button value directly', () => {
+        const consoleSpy = jest.spyOn(console, 'warn');
+
+        expect(createFormPropertySource()(form).getProp(radioDirectValue.string.asInput)).toBe(
+          'married',
+        );
+
+        expect(consoleSpy)
+          .toHaveBeenCalledWith(dedent`The property "offBoolean" is trying to get a radio button value but the target is not the parent form, if you have multiple radio buttons with a shared name use the parent form as target
+          Returning the input value "married" despite the fact it could be unchecked.`);
+      });
+
+      it('Should return the selected radio value when using the parent form as a target', () => {
+        expect(createFormPropertySource()(form).getProp(radioFormDataValue.string.asForm)).toBe(
+          'single',
+        );
+      });
+    });
+
+    describe('select', () => {
+      it('Should return the select value if the target is a select that is not multiple', () => {
+        const form = document.createElement('form');
+        form.innerHTML = `
+          <select name="preference">
+            <option value="foo" selected>foo</option>
+            <option value="bar">bar</option>
+          </select>
+          <select name="preferenceBoolean">
+            <option value="true" selected>foo</option>
+            <option value="false">bar</option>
+          </select>
+        `;
+        const select = getFullPropTypeInfo('select', form, 'preference');
+        const selectBoolean = getFullPropTypeInfo('select', form, 'preferenceBoolean');
+
+        expect(createFormPropertySource()(form).getProp(selectBoolean.boolean.asInput)).toBe(true);
+        expect(createFormPropertySource()(form).getProp(selectBoolean.boolean.asForm)).toBe(true);
+        expect(createFormPropertySource()(form).getProp(select.string.asInput)).toBe('foo');
+        expect(createFormPropertySource()(form).getProp(select.string.asForm)).toBe('foo');
+      });
+
+      it('Should return an array of strings if the target is a multiselect', () => {
+        const form = document.createElement('form');
+        form.innerHTML = `
+          <select name="candidates" multiple>
+            <option value="foo" selected>foo</option>
+            <option value="bar" selected>bar</option>
+          </select>
+        `;
+        const candidates = getFullPropTypeInfo('multiselect', form, 'candidates');
+
+        expect(createFormPropertySource()(form).getProp(candidates.array.asForm)).toEqual([
+          'foo',
+          'bar',
+        ]);
+        expect(createFormPropertySource()(form).getProp(candidates.array.asInput)).toEqual([
+          'foo',
+          'bar',
+        ]);
+      });
+    });
+
+    describe('form', () => {
+      it('Should return undefined when passing a form as target and an unmatching child input', () => {
+        const form = document.createElement('form');
+        const unmatchingName = getFullPropTypeInfo('myForm', form, 'nomatch');
+
+        expect(createFormPropertySource()(form).getProp(unmatchingName.string.asForm)).toBe(
+          undefined,
+        );
+      });
+
+      it('Should return undefined when using formData: true and a type different than Object', () => {
+        const form = document.createElement('form');
+        const validForm = getFullPropTypeInfo('validForm', form, undefined, true);
+        const formData = createFormPropertySource()(form).getProp(validForm.number.asForm);
+        expect(formData).toBe(undefined);
+      });
+
+      it('Should return FormData object when using type "Object" and formData: true', () => {
+        const form = document.createElement('form');
+        form.innerHTML = `
+          <input type="email" name="email" value="juan.polanco@mediamonks.com"/>
+        `;
+        const validForm = getFullPropTypeInfo('validForm', form, undefined, true);
+        const formData = createFormPropertySource()(form).getProp(validForm.object.asForm);
+
+        expect(formData).toBeInstanceOf(FormData);
+        expect((formData as FormData).get('email')).toBe('juan.polanco@mediamonks.com');
+      });
+    });
+  });
+});
diff --git a/src/lib/props/property-sources/createFormPropertySource.testutils.ts b/src/lib/props/property-sources/createFormPropertySource.testutils.ts
new file mode 100644
index 00000000..0fd943cf
--- /dev/null
+++ b/src/lib/props/property-sources/createFormPropertySource.testutils.ts
@@ -0,0 +1,77 @@
+import getPropTypeInfo from '../../test-utils/propTypes';
+import type { PropTypeDefinition, PropTypeInfo } from '../propDefinitions.types';
+
+type PossibleTypes = 'number' | 'string' | 'boolean' | 'date' | 'array' | 'object';
+type MixedProptypeInfo = {
+  asForm: PropTypeInfo;
+  asInput: PropTypeInfo;
+};
+type FullPropTypeInfo = {
+  [key in PossibleTypes]: MixedProptypeInfo;
+};
+
+function getMixedPropTypeInfo(
+  name: string,
+  targetElement: HTMLElement,
+  type: PropTypeDefinition['type'],
+  formData?: boolean,
+  sourceName: string = '',
+): MixedProptypeInfo {
+  const formTarget: PropTypeInfo = getPropTypeInfo({
+    name,
+    type,
+    source: {
+      name: sourceName,
+      target: targetElement,
+      type: 'form',
+      formData,
+    },
+  });
+
+  const inputTarget: PropTypeInfo = getPropTypeInfo({
+    name,
+    type,
+    source: {
+      name: sourceName,
+      target:
+        targetElement.querySelector<HTMLElement>(`[name='${formTarget.source.name}']`) ||
+        targetElement,
+      type: 'form',
+      formData,
+    },
+  });
+
+  return {
+    asForm: formTarget,
+    asInput: inputTarget,
+  };
+}
+
+/**
+ * For a given form return an object containg two PropTypeInfo, one where the
+ * target is the form itself and one where the target is the form's child input
+ *
+ * Useful for testing value extraction for a form and it's child inputs
+ * @param {string} name prop info name
+ * @param {Element} targetElement target element
+ * @param {string} sourceName to be used as source.name
+ * @param {boolean } formData to be used as source.formData
+ * @returns {FullPropTypeInfo}
+ */
+export function getFullPropTypeInfo(
+  name: string,
+  targetElement: Element,
+  sourceName?: string,
+  formData?: boolean,
+): FullPropTypeInfo {
+  const target = targetElement as HTMLElement;
+
+  return {
+    number: getMixedPropTypeInfo(name, target, Number, formData, sourceName),
+    string: getMixedPropTypeInfo(name, target, String, formData, sourceName),
+    boolean: getMixedPropTypeInfo(name, target, Boolean, formData, sourceName),
+    date: getMixedPropTypeInfo(name, target, Date, formData, sourceName),
+    array: getMixedPropTypeInfo(name, target, Array, formData, sourceName),
+    object: getMixedPropTypeInfo(name, target, Object, formData, sourceName),
+  };
+}
diff --git a/src/lib/props/property-sources/createFormPropertySource.ts b/src/lib/props/property-sources/createFormPropertySource.ts
new file mode 100644
index 00000000..2fc067d3
--- /dev/null
+++ b/src/lib/props/property-sources/createFormPropertySource.ts
@@ -0,0 +1,111 @@
+import dedent from 'ts-dedent';
+import type { PropertySource } from '../getComponentProps';
+import { convertSourceValue } from './convertSourceValue';
+
+export function createFormPropertySource(): PropertySource {
+  return () => {
+    return {
+      sourceName: 'form',
+      hasProp: (propInfo) => Boolean(propInfo.source.target && propInfo.type !== Function),
+      getProp: (propInfo) => {
+        const element = propInfo.source.target!;
+        const isCheckbox =
+          element.nodeName === 'INPUT' && (element as HTMLInputElement).type === 'checkbox';
+        const isRadio =
+          element.nodeName === 'INPUT' && (element as HTMLInputElement).type === 'radio';
+        const isForm = element.nodeName === 'FORM';
+        const isInput =
+          ['INPUT', 'TEXTAREA', 'SELECT'].includes(element.nodeName) &&
+          (element as HTMLInputElement).type !== 'checkbox';
+        const isMultiSelect =
+          element.nodeName === 'SELECT' && (element as HTMLSelectElement).multiple;
+        const isValidtag = ['INPUT', 'FORM', 'TEXTAREA', 'SELECT'].includes(element.nodeName);
+        if (!isValidtag) {
+          // eslint-disable-next-line no-console
+          console.warn(
+            dedent`The property "${propInfo.name}" of type "${propInfo.type.name}" requires an element of type input, form, textarea, or select. ${element.nodeName} was given
+              Returning "undefined".`,
+          );
+          return undefined;
+        }
+
+        const formDataValue = (previousValue: unknown) => {
+          if (!isForm) return previousValue;
+
+          const formData = new FormData(element as HTMLFormElement);
+
+          if (propInfo.source.formData) {
+            if (propInfo.type !== Object) {
+              // eslint-disable-next-line no-console
+              console.warn(
+                dedent`The property "${propInfo.name}" is trying to get a FormData object but is type "${propInfo.type.name}" use type "Object" if you want the full FormData object
+                    Returning "undefined".`,
+              );
+              return undefined;
+            }
+            return formData;
+          }
+
+          const childInputValues = formData.getAll(propInfo.source.name || '');
+
+          if (childInputValues.length > 0 && propInfo.type === Array) {
+            let valueIsStringifiedArray = false;
+
+            try {
+              const parsedValue = JSON.parse(childInputValues[0] as string);
+              if (Array.isArray(parsedValue)) valueIsStringifiedArray = true;
+              // eslint-disable-next-line no-empty
+            } catch {}
+
+            if (!valueIsStringifiedArray) return childInputValues;
+          }
+
+          if (childInputValues.length === 0) return undefined;
+          return convertSourceValue(propInfo, (childInputValues[0] as string) || '');
+        };
+
+        const textInput = (previousValue: unknown) => {
+          const input = element as HTMLInputElement;
+
+          if (isRadio) {
+            // eslint-disable-next-line no-console
+            console.warn(
+              dedent`The property "${propInfo.name}" is trying to get a radio button value but the target is not the parent form, if you have multiple radio buttons with a shared name use the parent form as target
+                    Returning the input value "${input.value}" despite the fact it could be unchecked.`,
+            );
+          }
+
+          if (isInput && !input.multiple) return convertSourceValue(propInfo, input.value);
+          return previousValue;
+        };
+
+        const checkbox = (previousValue: unknown) => {
+          const input = element as HTMLInputElement;
+          if (isCheckbox && propInfo.type === Boolean) return input.checked;
+          return previousValue;
+        };
+
+        const nonBooleanCheckbox = (previousValue: unknown) => {
+          const input = element as HTMLInputElement;
+          if (isCheckbox && propInfo.type !== Boolean && input.checked)
+            return convertSourceValue(propInfo, input.value);
+          return previousValue;
+        };
+
+        const multiSelect = (previousValue: unknown) => {
+          if (isMultiSelect) {
+            return Array.from((element as HTMLSelectElement).selectedOptions).map(
+              (option) => option.value,
+            );
+          }
+          return previousValue;
+        };
+
+        return [formDataValue, textInput, checkbox, nonBooleanCheckbox, multiSelect].reduce(
+          (previous, current) => current(previous),
+          undefined,
+        );
+      },
+    };
+  };
+}
diff --git a/src/lib/test-utils/propTypes.ts b/src/lib/test-utils/propTypes.ts
new file mode 100644
index 00000000..5780f728
--- /dev/null
+++ b/src/lib/test-utils/propTypes.ts
@@ -0,0 +1,11 @@
+import type { PropTypeInfo } from '../props/propDefinitions.types';
+
+const getPropTypeInfo = (propTypeInfo: PropTypeInfo): PropTypeInfo => ({
+  ...propTypeInfo,
+  source: {
+    ...propTypeInfo.source,
+    name: propTypeInfo.source.name || propTypeInfo.name,
+  },
+});
+
+export default getPropTypeInfo;
diff --git a/src/lib/utils/global.ts b/src/lib/utils/global.ts
index 3870a951..3e60bb65 100644
--- a/src/lib/utils/global.ts
+++ b/src/lib/utils/global.ts
@@ -15,6 +15,7 @@ import { createDataAttributePropertySource } from '../props/property-sources/cre
 import { createJsonScriptPropertySource } from '../props/property-sources/createJsonScriptPropertySource';
 import { createReactivePropertySource } from '../props/property-sources/createReactivePropertySource';
 import { createCustomPropertySource } from '../props/property-sources/createCustomPropertySource';
+import { createFormPropertySource } from '../props/property-sources/createFormPropertySource';
 
 // TODO: Move to "App"?
 class MubanGlobal {
@@ -30,6 +31,7 @@ class MubanGlobal {
     createTextPropertySource(),
     createHtmlPropertySource(),
     createCustomPropertySource(),
+    createFormPropertySource(),
   ];
 }
 
diff --git a/test-storybook/src/components/core/props/FormProps.stories.ts b/test-storybook/src/components/core/props/FormProps.stories.ts
new file mode 100644
index 00000000..13553429
--- /dev/null
+++ b/test-storybook/src/components/core/props/FormProps.stories.ts
@@ -0,0 +1,309 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { Story } from '@muban/storybook/types-6-0';
+import { html } from '@muban/template';
+import { bind, defineComponent, propType, computed, ref } from '@muban/muban';
+import type { PropTypeDefinition, ComponentRefItem } from '@muban/muban';
+import { screen } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+
+export default {
+  title: 'core/props/form',
+};
+
+const getInfoBinding = (refs: any, props: any) =>
+  bind(refs.info, {
+    text: computed(() => JSON.stringify(props, null, 2)),
+  });
+
+const createPropsComponent = (
+  props: Record<string, PropTypeDefinition>,
+  refs: Record<string, ComponentRefItem> = {},
+) => {
+  return defineComponent({
+    name: 'props',
+    refs: {
+      info: 'info',
+      ...refs,
+    },
+    props,
+    setup({ props, refs }) {
+      return [getInfoBinding(refs, props)];
+    },
+  });
+};
+
+export const Form: Story = () => ({
+  component: createPropsComponent(
+    {
+      inputText: propType.string.source({ type: 'form', target: 'inputTextRef' }),
+      inputNumber: propType.number.source({ type: 'form', target: 'inputNumberRef' }),
+      inputBoolean: propType.boolean.source({ type: 'form', target: 'inputBooleanRef' }),
+      inputDate: propType.date.source({ type: 'form', target: 'inputDateRef' }),
+      inputObject: propType.object.source({ type: 'form', target: 'inputObjectRef' }),
+      inputArray: propType.array.source({ type: 'form', target: 'inputArrayRef' }),
+      checkboxOnBoolean: propType.boolean.source({ type: 'form', target: 'checkboxOnBooleanRef' }),
+      checkboxOnString: propType.string.source({ type: 'form', target: 'checkboxOnStringRef' }),
+      checkboxOnValueString: propType.string.source({
+        type: 'form',
+        target: 'checkboxOnValueStringRef',
+      }),
+      checkboxOffBoolean: propType.boolean.source({
+        type: 'form',
+        target: 'checkboxOffBooleanRef',
+      }),
+      checkboxOffString: propType.string.source({ type: 'form', target: 'checkboxOffStringRef' }),
+      checkboxOffValueString: propType.string.source({
+        type: 'form',
+        target: 'checkboxOffValueStringRef',
+      }),
+      selectText: propType.string.source({ type: 'form', target: 'selectRef' }),
+      multiSelectText: propType.number.source({ type: 'form', target: 'multiSelectRef' }),
+      radio: propType.string.source({ type: 'form', target: 'radioRef' }),
+      radioChecked: propType.string.source({ type: 'form', target: 'radioRefChecked' }),
+    },
+    {
+      inputTextRef: 'inputTextRef',
+      inputNumberRef: 'inputNumberRef',
+      inputBooleanRef: 'inputBooleanRef',
+      inputDateRef: 'inputDateRef',
+      inputObjectRef: 'inputObjectRef',
+      inputArrayRef: 'inputArrayRef',
+      checkboxOnBooleanRef: 'checkboxOnBooleanRef',
+      checkboxOnStringRef: 'checkboxOnStringRef',
+      checkboxOnValueStringRef: 'checkboxOnValueStringRef',
+      checkboxOffBooleanRef: 'checkboxOffBooleanRef',
+      checkboxOffStringRef: 'checkboxOffStringRef', // This won't show up in the info as it's undefined
+      checkboxOffValueStringRef: 'checkboxOffValueStringRef', // This won't show up in the info as it's undefined
+      selectRef: 'selectRef',
+      multiSelectRef: 'multiSelectRef',
+      formRef: 'formRef',
+      radioRef: 'radioRef',
+      radioRefChecked: 'radioRefChecked',
+    },
+  ),
+  template: () => html`<div data-component="props">
+    <form data-ref="formRef" style="max-width: 500px">
+      <fieldset class="form-group">
+        <legend class="mt-4">Text Inputs</legend>
+        ${inputTemplate('inputTextRef', 'Email', {
+          layout: 'column',
+          value: 'juan.polanco@mediamonks.com',
+          type: 'email',
+        })}
+        ${inputTemplate('inputNumberRef', 'Age', {
+          layout: 'column',
+          value: '31',
+          type: 'number',
+        })}
+        ${inputTemplate('inputBooleanRef', 'Boolean', {
+          layout: 'column',
+          value: 'true',
+        })}
+        ${inputTemplate('inputDateRef', 'Date', {
+          layout: 'column',
+          value: '2022-01-01',
+        })}
+        ${inputTemplate('inputObjectRef', 'Object', {
+          layout: 'column',
+          type: 'textarea',
+          value: '{"foo": "bar"}',
+        })}
+        ${inputTemplate('inputArrayRef', 'Array', {
+          layout: 'column',
+          type: 'textarea',
+          value: '[1, 2, 3, 4]',
+        })}
+      </fieldset>
+      <fieldset class="form-group">
+        <legend class="mt-4">Checkboxes</legend>
+        ${inputTemplate('checkboxOnBooleanRef', 'Checkbox On Boolean', {
+          type: 'checkbox',
+          checked: true,
+        })}
+        ${inputTemplate('checkboxOnStringRef', 'Checkbox On String', {
+          type: 'checkbox',
+          checked: true,
+        })}
+        ${inputTemplate('checkboxOnValueStringRef', 'Checkbox On String Value', {
+          type: 'checkbox',
+          checked: true,
+          value: 'foo',
+        })}
+        ${inputTemplate('checkboxOffBooleanRef', 'Checkbox Off Boolean', {
+          type: 'checkbox',
+        })}
+        ${inputTemplate('checkboxOffStringRef', 'Checkbox Off String', {
+          type: 'checkbox',
+        })}
+        ${inputTemplate('checkboxOffValueStringRef', 'Checkbox Off String Value', {
+          type: 'checkbox',
+          value: 'foo',
+        })}
+      </fieldset>
+      ${inputTemplate('selectRef', 'Single Select', {
+        type: 'select',
+        options: [
+          ['foo', 'foo', true],
+          ['bar', 'bar'],
+        ],
+      })}
+      ${inputTemplate('multiSelectRef', 'Multiple Select', {
+        type: 'select',
+        multiple: true,
+        options: [
+          ['foo', 'foo', true],
+          ['bar', 'bar'],
+          ['bax', 'bax'],
+          ['fox', 'fox', true],
+        ],
+      })}
+      <fieldset class="form-group">
+        <legend class="mt-4">Radio button</legend>
+        ${inputTemplate('radioRef', 'Radio unchecked', {
+          layout: 'row',
+          type: 'radio',
+          value: 'foo',
+          name: 'radio',
+        })}
+        ${inputTemplate('radioRefChecked', 'Radio checked', {
+          layout: 'row',
+          type: 'radio',
+          value: 'bar',
+          checked: true,
+          name: 'radio',
+        })}
+      </fieldset>
+      <div class="alert alert-secondary mt-4">
+        <pre data-ref="info" data-testid="infoJson"></pre>
+      </div>
+    </form>
+  </div>`,
+});
+
+Form.play = async () => {
+  const extractedJson = JSON.parse(screen.getByTestId('infoJson').innerText);
+  await expect(screen.getByTestId('inputTextRef')).toHaveValue('juan.polanco@mediamonks.com');
+  await expect(extractedJson.inputText).toBe('juan.polanco@mediamonks.com');
+  await expect(screen.getByTestId('inputNumberRef')).toHaveValue(31);
+  await expect(extractedJson.inputNumber).toBe(31);
+  await expect(screen.getByTestId('inputBooleanRef')).toHaveValue('true');
+  await expect(extractedJson.inputBoolean).toBe(true);
+  await expect(screen.getByTestId('inputDateRef')).toHaveValue('2022-01-01');
+  await expect(extractedJson.inputDate).toBe('2022-01-01T00:00:00.000Z');
+  await expect(screen.getByTestId('inputObjectRef')).toHaveValue('{"foo": "bar"}');
+  await expect(extractedJson.inputObject).toEqual({ foo: 'bar' });
+  await expect(screen.getByTestId('inputArrayRef')).toHaveValue('[1, 2, 3, 4]');
+  await expect(extractedJson.inputArray).toEqual([1, 2, 3, 4]);
+  await expect(screen.getByTestId('checkboxOnBooleanRef')).toBeChecked();
+  await expect(extractedJson.checkboxOnBoolean).toBe(true);
+  await expect(screen.getByTestId('checkboxOnStringRef')).toBeChecked();
+  await expect(extractedJson.checkboxOnString).toBe('on');
+  await expect(screen.getByTestId('checkboxOnValueStringRef')).toBeChecked();
+  await expect(extractedJson.checkboxOnValueString).toBe('foo');
+  await expect(screen.getByTestId('checkboxOffBooleanRef')).not.toBeChecked();
+  await expect(extractedJson.checkboxOffBoolean).toBe(false);
+  await expect(screen.getByTestId('checkboxOffStringRef')).not.toBeChecked();
+  await expect(extractedJson.checkboxOffString).toBe(undefined);
+  await expect(screen.getByTestId('checkboxOffValueStringRef')).not.toBeChecked();
+  await expect(extractedJson.checkboxOffValueString).toBe(undefined);
+  await expect(screen.getByTestId('selectRef')).toHaveValue('foo');
+  await expect(extractedJson.selectText).toBe('foo');
+  await expect(screen.getByTestId('multiSelectRef')).toHaveValue(['foo', 'fox']);
+  await expect(extractedJson.multiSelectText).toEqual(['foo', 'fox']);
+  await expect(screen.getByTestId('radioRef')).not.toBeChecked();
+  await expect(extractedJson.radio).toBe('foo');
+  await expect(screen.getByTestId('radioRefChecked')).toBeChecked();
+  await expect(extractedJson.radioChecked).toBe('bar');
+};
+
+type InputTemplateProps = {
+  name?: string;
+  type?: string;
+  value?: string;
+  layout?: 'row' | 'column';
+  input?: string;
+  checked?: boolean;
+  options?: Array<[value: string, label: string, selected?: true]>;
+  multiple?: boolean;
+};
+function inputTemplate(
+  ref: string,
+  label: string,
+  { layout, name, type, value, checked, options, multiple }: InputTemplateProps,
+) {
+  if (type === 'checkbox' || type === 'radio') {
+    return html`<div class="form-check">
+      <input
+        data-ref=${ref}
+        data-testid=${ref}
+        class="form-check-input"
+        type=${type}
+        id=${ref}
+        name=${name || ref}
+        checked=${checked}
+        value=${value}
+      />
+      <label class="form-check-label" for=${ref}>${label}</label>
+    </div> `;
+  }
+  if (type === 'select') {
+    // TODO: select in row/column mode
+    return html`<div class="form-group">
+      <label for=${ref} class="form-label mt-4">${label}</label>
+      <select data-ref=${ref} data-testid=${ref} class="form-select" id=${ref} multiple=${multiple}>
+        ${(options ?? []).map(
+          ([value, label, selected]) =>
+            html`<option value=${value} selected=${selected}>${label}</option>`,
+        )}
+      </select>
+    </div>`;
+  }
+  if (layout === 'column') {
+    if (type === 'textarea') {
+      return html`<div class="form-group row">
+        <label for=${ref} class="col-sm-2 col-form-label">${label}</label>
+        <div class="col-sm-10">
+          <textarea
+            data-ref=${ref}
+            data-testid=${ref}
+            class="form-control"
+            id=${ref}
+            name=${name ?? ref}
+          >
+            ${value}
+          </textarea
+          >
+        </div>
+      </div>`;
+    }
+    return html`<div class="form-group row">
+      <label for=${ref} class="col-sm-2 col-form-label">${label}</label>
+      <div class="col-sm-10">
+        <input
+          data-ref=${ref}
+          data-testid=${ref}
+          class="form-control"
+          id=${ref}
+          name=${name ?? ref}
+          type=${type ?? 'text'}
+          value=${value}
+        />
+      </div>
+    </div>`;
+  }
+  if (layout === 'row') {
+    return html`<div class="form-group">
+      <label for=${ref} class="form-label mt-4">${label}</label>
+      <input
+        data-ref=${ref}
+        data-testid=${ref}
+        class="form-control"
+        id=${ref}
+        name=${name ?? ref}
+        type=${type ?? 'text'}
+        value=${value}
+      />
+    </div>`;
+  }
+  return html``;
+}