Docs update for properties

src/form/fields/ArrayDefaultField.tsx

@@ -9,6 +9,11 @@ import { buildPropertyField } from "../form_factory";
 import { useClearRestoreValue } from "../../hooks";
 
 /**
+ * Generic array field that allows reordering and renders the child property
+ * as nodes.
+ *
+ * This is one of the internal components that get mapped natively inside forms
+ * and tables to the specified properties.
  * @category Form fields
  */
 export default function ArrayDefaultField<T extends Array<any>>({

src/form/fields/ArrayEnumSelect.tsx

@@ -16,6 +16,10 @@ import { enumToObjectEntries, isEnumValueDisabled } from "../../util/enums";
 import { EnumValuesChip } from "../../preview/components/CustomChip";
 
 /**
+ * This fields renders a dropdown with multiple selection.
+ *
+ * This is one of the internal components that get mapped natively inside forms
+ * and tables to the specified properties.
  * @category Form fields
  */
 export default function ArrayEnumSelect({

src/form/fields/ArrayOfReferencesField.tsx

@@ -22,6 +22,10 @@ import { ErrorView } from "../../core/components";
 type ArrayOfReferencesFieldProps = FieldProps<firebase.firestore.DocumentReference[]>;
 
 /**
+ * This field allows to select multiple references.
+ *
+ * This is one of the internal components that get mapped natively inside forms
+ * and tables to the specified properties.
  * @category Form fields
  */
 export default function ArrayOfReferencesField({

src/form/fields/ArrayOneOfField.tsx

@@ -21,6 +21,11 @@ import { EnumValues, FieldProps, FormContext, Property } from "../../models";
 
 
 /**
+ * If the `oneOf` property is specified, this fields render each array entry as
+ * a `type` select and the corresponding field widget to the selected `type.
+ *
+ * This is one of the internal components that get mapped natively inside forms
+ * and tables to the specified properties.
  * @category Form fields
  */
 export default function ArrayOneOfField<T extends Array<any>>({

src/form/fields/DateTimeField.tsx

@@ -13,6 +13,10 @@ import { CMSAppContext } from "../../contexts/CMSAppContext";
 type DateTimeFieldProps = FieldProps<Date>;
 
 /**
+ * Field that allows selecting a date
+ *
+ * This is one of the internal components that get mapped natively inside forms
+ * and tables to the specified properties.
  * @category Form fields
  */
 export default function DateTimeField({

src/form/fields/MapField.tsx

@@ -19,6 +19,10 @@ import { useClearRestoreValue } from "../../hooks";
 import { buildPropertyField } from "../form_factory";
 
 /**
+ * Field that renders the children property fields
+ *
+ * This is one of the internal components that get mapped natively inside forms
+ * and tables to the specified properties.
  * @category Form fields
  */
 export default function MapField<T extends object>({

src/form/fields/MarkdownField.tsx

@@ -31,6 +31,10 @@ export const useStyles = makeStyles((theme: Theme) =>
 );
 
 /**
+ * Render a markdown field that allows edition and seeing the preview.
+ *
+ * This is one of the internal components that get mapped natively inside forms
+ * and tables to the specified properties.
  * @category Form fields
  */
 export default function MarkDownField({

src/form/fields/ReadOnlyField.tsx

@@ -8,6 +8,11 @@ import LabelWithIcon from "../components/LabelWithIcon";
 import ErrorBoundary from "../../core/internal/ErrorBoundary";
 
 /**
+ *
+ * Simply render the non-editable preview of a field
+ *
+ * This is one of the internal components that get mapped natively inside forms
+ * and tables to the specified properties.
  * @category Form fields
  */
 export default function ReadOnlyField<S extends EntitySchema>({

src/form/fields/ReferenceField.tsx

@@ -58,6 +58,10 @@ export const useStyles = makeStyles(theme => createStyles({
 }));
 
 /**
+ * Field that opens a reference selection dialog.
+ *
+ * This is one of the internal components that get mapped natively inside forms
+ * and tables to the specified properties.
  * @category Form fields
  */
 export default function ReferenceField<S extends EntitySchema<Key>,

src/form/fields/Select.tsx

@@ -16,6 +16,11 @@ import { EnumValuesChip } from "../../preview/components/CustomChip";
 type SelectProps<T extends EnumType> = FieldProps<T>;
 
 /**
+ * If `enumValues` are set in the string config, this field renders a select
+ * where each option is a colored chip.
+ *
+ * This is one of the internal components that get mapped natively inside forms
+ * and tables to the specified properties.
  * @category Form fields
  */
 export default function Select<T extends EnumType>({

src/form/fields/StorageUploadField.tsx

@@ -106,6 +106,10 @@ export const useStyles = makeStyles(theme => ({
 type StorageUploadFieldProps = FieldProps<string | string[]>;
 
 /**
+ * Field that allows to upload files to Google Cloud Storage.
+ *
+ * This is one of the internal components that get mapped natively inside forms
+ * and tables to the specified properties.
  * @category Form fields
  */
 export default function StorageUploadField({

src/form/fields/SwitchField.tsx

@@ -95,6 +95,10 @@ const SwitchFieldComponent = React.forwardRef(function({
 });
 
 /**
+ * Simple boolean switch.
+ *
+ * This is one of the internal components that get mapped natively inside forms
+ * and tables to the specified properties.
  * @category Form fields
  */
 export default function(props: SwitchFieldProps) {

src/form/fields/TextField.tsx

@@ -23,6 +23,9 @@ interface TextFieldProps<T extends string | number> extends FieldProps<T> {
 }
 
 /**
+ * Generic text field.
+ * This is one of the internal components that get mapped natively inside forms
+ * and tables to the specified properties.
  * @category Form fields
  */
 export default function TextField<T extends string | number>({

website/docs/properties/array.md

@@ -10,8 +10,25 @@ The property of this array.
 
 You can specify any property (except another Array property, since
 Firestore does not support it)
-You can leave this field empty only if you are providing a custom field,
-otherwise an error will be thrown.
+You can leave this field empty only if you are providing a custom field or
+provide a `oneOf` field otherwise an error will be thrown.
+
+
+##  `oneOf`
+
+Use this field if you would like to have an array of properties.
+It is useful if you need to have values of different types in the same
+array.
+Each entry of the array is an object with the shape:
+```
+{ type: "YOUR_TYPE", value: "YOUR_VALUE"}
+```
+Note that you can use any property so `value` can take any value (strings,
+numbers, array, objects...)
+You can customise the `type` and `value` fields to suit your needs.
+
+An example use case for this feature may be a blog entry, where you have
+images and text blocks using markdown.
 
 ## `validation`
 
@@ -20,3 +37,16 @@ otherwise an error will be thrown.
 * `min` Set the minimum length allowed.
 * `max` Set the maximum length allowed.
 
+---
+
+Based on your configuration the form field widgets that are created are:
+- [`ArrayDefaultField`](api/functions/arraydefaultfield.md) generic array field that allows reordering and renders
+  the child property as nodes.
+- [`StorageUploadField`](api/functions/storageuploadfield.md) if the `of` property is a `string` with storage configuration.
+- [`ArrayEnumSelect`](api/functions/arrayenumselect.md) if the `of` property is a `string` with an enum configuration.
+- [`ArrayOfReferencesField`](api/functions/arrayofreferencesfield.md) if the `of` property is a `reference`
+- [`ArrayOneOfField`](api/functions/arrayoneoffield.md) if the `oneOf` property is specified
+
+Links:
+- [API](api/interfaces/arrayproperty.md)
+

website/docs/properties/boolean.md

@@ -8,3 +8,11 @@ sidebar_label: Boolean
 
 * `required` Should this field be compulsory.
 * `requiredMessage` Message to be displayed as a validation error.
+
+---
+
+The widget that gets created is
+- `SwitchField` simple boolean switch
+
+Links:
+- [API](api/interfaces/booleanproperty.md)

website/docs/properties/map.md

@@ -15,3 +15,11 @@ List of properties rendered as this map preview. Defaults to first 3.
 * `required` Should this field be compulsory.
 * `requiredMessage` Message to be displayed as a validation error.
 
+---
+
+The widget that gets created is
+- [`MapField`](api/functions/mapfield.md) Field that renders the children
+property fields
+
+Links:
+- [API](api/interfaces/mapproperty.md)

website/docs/properties/number.md

@@ -21,3 +21,14 @@ sidebar_label: Number
 * `positive` Value must be a positive number.
 * `negative` Value must be a negative number.
 * `integer` Value must be an integer.
+
+
+---
+
+The widget that gets created is
+- [`TextField`](api/functions/textfield.md) generic text field
+- [`Select`](api/functions/select.md) if `enumValues` are set in the string config, this field renders a select
+  where each option is a colored chip.
+
+Links:
+- [API](api/interfaces/numberproperty.md)

website/docs/properties/reference.md

@@ -19,3 +19,12 @@ List of properties rendered as this reference preview.
 * `required` Should this field be compulsory.
 * `requiredMessage` Message to be displayed as a validation error.
 
+
+---
+
+The widget that gets created is
+- [`ReferenceField`](api/functions/referencefield.md) Field that opens a
+reference selection dialog
+
+Links:
+- [API](api/interfaces/referenceproperty.md)

website/docs/properties/string.md

@@ -62,3 +62,18 @@ sidebar_label: String
   whitespace.
 * `lowercase` Transforms the string value to lowercase.
 * `uppercase` Transforms the string value to uppercase.
+
+
+---
+
+Based on your configuration the form field widgets that are created are:
+- [`TextField`](api/functions/textfield.md) generic text field
+- [`StorageUploadField`](api/functions/storageuploadfield.md) the property has a
+  storage configuration.
+- [`MarkdownField.`](api/functions/markdownfield.md) the property has a
+  markdown configuration.
+- [`Select`](api/functions/select.md) if `enumValues` are set in the string config, this field renders a select
+  where each option is a colored chip.
+
+Links:
+- [API](api/interfaces/stringproperty.md)

website/docs/properties/timestamp.md

@@ -10,3 +10,11 @@ sidebar_label: Timestamp
 * `requiredMessage` Message to be displayed as a validation error.
 * `min` Set the minimum date allowed.
 * `max` Set the maximum date allowed.
+
+---
+
+The widget that gets created is
+- [`DateTimeField`](api/functions/datetimefield.md) Field that allows selecting a date
+
+Links:
+- [API](api/interfaces/timestampproperty.md)