Feat/custom template per field (#4352)

* [MISC] Retrieved change from older PR

* [MISC] Updated documentation

* [MISC] Updated types

* [EVO] Added test for custom template name in registry

* [FIX] Docx

* [FIX] Templates typing

* [MISC] Updated docs

* [MISC] Moved type and removed blank lines

* [FIX] Template type

* FIX: Fixed tests

* FIX getTemplate.test.ts

* DOCS: Add section for custom templates in registry

* FIX: Node 14 compat

* Update types.ts

* Update packages/utils/src/types.ts

* Apply suggestions from code review

* Apply suggestions from code review

---------

Co-authored-by: LFRW2K\lecmil2 <[email protected]>
Co-authored-by: Heath C <[email protected]>

Author: 3 people

CHANGELOG.md

@@ -114,6 +114,9 @@ should change the heading of the (upcoming) version to include a major version b
 - BREAKING CHANGE: Removed the deprecated `RJSF_ADDITONAL_PROPERTIES_FLAG` constant
 - Updated the `WrapIfAdditionalTemplateProps` to include `hideError` and `rawErrors` in support of moving `Bootstrap 3` marker classes out of `SchemaField`
 - Added support for `patternProperties` [#1944](https://github.com/rjsf-team/react-jsonschema-form/issues/1944)
+- Updated `getTemplate()` to allow per-field customization using string key from `Registry`, fixing [#3695](https://github.com/rjsf-team/react-jsonschema-form/issues/3695).
+- Updated `TemplatesType` to allow for a string key to be used to reference a custom template in the `Registry`, fixing [#3695](https://github.com/rjsf-team/react-jsonschema-form/issues/3695)
+- Updated tests to cover the new `getTemplate()` functionality
 
 ## @rjsf/validator-ajv6
 
@@ -134,6 +137,7 @@ should change the heading of the (upcoming) version to include a major version b
 - Replaced Lerna with Nx, updated all lerna commands to use the Nx CLI
 - BREAKING CHANGE: Updated all `peerDependencies` to change minimal `React` support to `>=18`
 - Added documentation and playground example for `patternProperties`
+- Updated `advanced-customization/custom-templates` with the new feature.
 
 # 6.0.0-alpha.0
 

packages/docs/docs/advanced-customization/custom-templates.md

@@ -78,16 +78,27 @@ render(
 );
 ```
 
-You also can provide your own field template to a uiSchema by specifying a `ui:ArrayFieldTemplate` property.
+You also can provide your own field template to a uiSchema by specifying a `ui:ArrayFieldTemplate` property with your Component :
 
 ```tsx
 import { UiSchema } from '@rjsf/utils';
+import ArrayFieldTemplate from './ArrayFieldTemplate';
 
 const uiSchema: UiSchema = {
   'ui:ArrayFieldTemplate': ArrayFieldTemplate,
 };
 ```
 
+or a string value from the `Registry` :
+
+```tsx
+import { UiSchema } from '@rjsf/utils';
+
+const uiSchema: UiSchema = {
+  'ui:ArrayFieldTemplate': 'CustomArrayFieldTemplate',
+};
+```
+
 Please see the [customArray.tsx sample](https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/playground/src/samples/customArray.tsx) from the [playground](https://rjsf-team.github.io/react-jsonschema-form/) for another example.
 
 The following props are passed to each `ArrayFieldTemplate`:
@@ -165,16 +176,27 @@ render(
 );
 ```
 
-You also can provide your own template to a uiSchema by specifying a `ui:ArrayFieldDescriptionTemplate` property.
+You also can provide your own field template to a uiSchema by specifying a `ui:ArrayFieldDescriptionTemplate` property with your Component :
 
 ```tsx
 import { UiSchema } from '@rjsf/utils';
+import ArrayFieldDescriptionTemplate from './ArrayFieldDescriptionTemplate';
 
 const uiSchema: UiSchema = {
   'ui:ArrayFieldDescriptionTemplate': ArrayFieldDescriptionTemplate,
 };
 ```
 
+or a string value from the `Registry` :
+
+```tsx
+import { UiSchema } from '@rjsf/utils';
+
+const uiSchema: UiSchema = {
+  'ui:ArrayFieldDescriptionTemplate': 'CustomArrayFieldDescriptionTemplate',
+};
+```
+
 The following props are passed to each `ArrayFieldDescriptionTemplate`:
 
 - `description`: The description of the array field being rendered.
@@ -322,13 +344,24 @@ render(
 );
 ```
 
-You also can provide your own template to a uiSchema by specifying a `ui:ArrayFieldDescriptionTemplate` property.
+You also can provide your own template to a uiSchema by specifying a `ui:ArrayFieldDescriptionTemplate` property with your Component :
+
+```tsx
+import { UiSchema } from '@rjsf/utils';
+import ArrayFieldDescriptionTemplate from './ArrayFieldDescriptionTemplate';
+
+const uiSchema: UiSchema = {
+  'ui:ArrayFieldDescriptionTemplate': ArrayFieldDescriptionTemplate,
+};
+```
+
+or a string value from the `Registry` :
 
 ```tsx
 import { UiSchema } from '@rjsf/utils';
 
 const uiSchema: UiSchema = {
-  'ui:ArrayFieldTitleTemplate': ArrayFieldTitleTemplate,
+  'ui:ArrayFieldDescriptionTemplate': 'CustomArrayFieldDescriptionTemplate',
 };
 ```
 
@@ -676,16 +709,27 @@ render(
 );
 ```
 
-You also can provide your own field template to a uiSchema by specifying a `ui:FieldTemplate` property.
+You also can provide your own field template to a uiSchema by specifying a `ui:FieldTemplate` property with your Component :
 
 ```tsx
 import { UiSchema } from '@rjsf/utils';
+import CustomFieldTemplate from './CustomFieldTemplate';
 
 const uiSchema: UiSchema = {
   'ui:FieldTemplate': CustomFieldTemplate,
 };
 ```
 
+or a string value from the `Registry` :
+
+```tsx
+import { UiSchema } from '@rjsf/utils';
+
+const uiSchema: UiSchema = {
+  'ui:FieldTemplate': 'CustomFieldTemplate',
+};
+```
+
 If you want to handle the rendering of each element yourself, you can use the props `rawHelp`, `rawDescription` and `rawErrors`.
 
 The following props are passed to a custom field template component:
@@ -789,16 +833,27 @@ render(
 );
 ```
 
-You also can provide your own field template to a uiSchema by specifying a `ui:ObjectFieldTemplate` property.
+You also can provide your own field template to a uiSchema by specifying a `ui:ObjectFieldTemplate` property with your Component :
 
 ```tsx
 import { UiSchema } from '@rjsf/utils';
+import ObjectFieldTemplate from './ObjectFieldTemplate';
 
 const uiSchema: UiSchema = {
   'ui:ObjectFieldTemplate': ObjectFieldTemplate,
 };
 ```
 
+or a string value from the `Registry` :
+
+```tsx
+import { UiSchema } from '@rjsf/utils';
+
+const uiSchema: UiSchema = {
+  'ui:ObjectFieldTemplate': 'ObjectFieldTemplate',
+};
+```
+
 Please see the [customObject.tsx sample](https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/playground/src/samples/customObject.tsx) from the [playground](https://rjsf-team.github.io/react-jsonschema-form/) for a better example.
 
 The following props are passed to each `ObjectFieldTemplate` as defined by the `ObjectFieldTemplateProps` in `@rjsf/utils`:
@@ -1145,3 +1200,20 @@ The following prop is passed to a `SubmitButton`:
 
 - `uiSchema`: The uiSchema object for this field, used to extract the `UISchemaSubmitButtonOptions`.
 - `registry`: The `registry` object.
+
+## Custom Templates
+
+You can now add custom components to the registry and reference them in your `uiSchema` using string keys.
+
+### Adding Custom Templates to the Registry
+
+```tsx
+import CustomArrayFieldTemplate from './CustomArrayFieldTemplate';
+import { UiSchema } from '@rjsf/utils';
+
+// Add the custom template to the registry
+const registry = { templates: { CustomArrayFieldTemplate } };
+
+// Use the custom template in the uiSchema
+const uiSchema: UiSchema = { 'ui:ArrayFieldTemplate': 'CustomArrayFieldTemplate' };
+```

packages/utils/src/getTemplate.ts

@@ -18,6 +18,17 @@ export default function getTemplate<
   if (name === 'ButtonTemplates') {
     return templates[name];
   }
+  // Allow templates to be customized per-field by using string keys from the registry
+  if (
+    Object.hasOwn(uiOptions, name) &&
+    typeof uiOptions[name] === 'string' &&
+    Object.hasOwn(templates, uiOptions[name] as string)
+  ) {
+    const key = uiOptions[name];
+    // Evaluating templates[key] results in TS2590: Expression produces a union type that is too complex to represent
+    // To avoid that, we cast templates to `any` before accessing the key field
+    return (templates as any)[key];
+  }
   return (
     // Evaluating uiOptions[name] results in TS2590: Expression produces a union type that is too complex to represent
     // To avoid that, we cast uiOptions to `any` before accessing the name field