feat(form): allow users to provide custom published fields/widgets

README.md

@@ -67,7 +67,7 @@ Formule includes a variety of predefined field types, grouped in three categorie
 
 You can freely remove some of these predefined fields and add your own custom fields and widgets following the JSON Schema specifications. More details below.
 
-All of these items contain different settings that you can tinker with, separated into **Schema Settings** (_generally_ affecting how the field _works_) and **UI Schema Settings** (_generally_ affecting how the field _looks_ like).
+All of these items contain different settings that you can tinker with, separated into **Schema Settings** (_generally_ affecting how the field _works_) and **UI Schema Settings** (_generally_ affecting how the field _looks like_).
 
 ## :horse_racing: Setting it up
 
@@ -101,12 +101,29 @@ const useEffect(() => initFormuleSchema(), []);
 
 ### Customizing and adding new field types
 
+Override (if existing) or create your own field types (rjsf type definitions) similarly to how it's done in `fieldTypes.jsx`, passing them as `customFieldTypes`. Implement your own custom fields and widgets (react components) by passing them as `customFields` and/or `customWidgets` (see `forms/fields/` and `forms/widgets/` for examples). If you also want to use a different published version of a field or widget, pass the component in `customPublishedFields` or `customPublishedWidgets`.
+
 ```jsx
+const customFieldTypes = {
+  advanced: {
+    myfield: {
+      title: ...
+      ...
+    }
+  }
+}
+
+const customFields: {
+  myfield: MyField  // react component
+}
+
 <FormuleContext
-  theme={{token: {colorPrimary: "blue"}}}
-  customFieldTypes={...}
-  customFields={...}
-  customWidgets={...}>
+  theme={{token: {colorPrimary: "blue"}}} // antd theme
+  customFieldTypes={customFieldTypes}
+  customFields={customFields}
+  customWidgets={...}
+  customPublishedFields={...}
+  customPublishedWidgets={...}>
 // ...
 </FormuleContext>
 ```
@@ -115,7 +132,7 @@ If you use Formule to edit existing JSON schemas that include extra fields (e.g.
 
 ```jsx
 const transformSchema = (schema) => {
-  // Remove properties...
+  // Remove properties here...
   return transformedSchema;
 };
 

src/exposed.tsx

@@ -17,6 +17,8 @@ type FormuleContextProps = {
   customFieldTypes?: object;
   customFields?: object;
   customWidgets?: object;
+  customPublishedFields?: object;
+  customPublishedWidgets?: object;
   theme?: ThemeConfig;
   separator?: string;
   synchronizeState?: (state: SchemaWizardState) => void;
@@ -28,6 +30,8 @@ export const FormuleContext = ({
   customFieldTypes,
   customFields,
   customWidgets,
+  customPublishedFields,
+  customPublishedWidgets,
   theme,
   separator = "::",
   synchronizeState,
@@ -55,6 +59,8 @@ export const FormuleContext = ({
               allFieldTypes: combineFieldTypes(fieldTypes, customFieldTypes),
               customFields,
               customWidgets,
+              customPublishedFields,
+              customPublishedWidgets,
               transformSchema,
               separator,
             }}

src/forms/Form.jsx

@@ -68,12 +68,14 @@ const RJSFForm = ({
           ...customizationContext.customFields,
           ...fields,
           ...(isPublished && PublishedFields),
+          ...(isPublished && customizationContext.customPublishedFields),
         }}
         widgets={{
           ...CAPWidgets,
           ...customizationContext.customWidgets,
           ...widgets,
           ...(isPublished && PublishedWidgets),
+          ...(isPublished && customizationContext.customPublishedWidgets),
         }}
         templates={templates}
         liveValidate={liveValidate}
@@ -88,9 +90,9 @@ const RJSFForm = ({
         readonly={readonly || isPublished}
         transformErrors={transformErrors}
         formContext={{
-          formRef: formRef,
+          formRef,
           ...formContext,
-          hideAnchors: hideAnchors,
+          hideAnchors,
         }}
         idSeparator={customizationContext.separator}
       >