fix rjsf-team#3696 - Playground fixes and light improvements (rjsf-team#3699)

* Fix rjsf-team#3696 - Fixed broken playground examples - Added experimental_defaultFormStateBehavior.emptyObjectFields control to Playground - Fixed bug where subthemes would not appear in Playground * Fix rjsf-team#3696 - Changes from review

Author: nickgros

CHANGELOG.md

@@ -55,6 +55,9 @@ should change the heading of the (upcoming) version to include a major version b
 ## Dev / docs / playground
 
 - Updated sample data and documentation about the markdown in `RJSFSchema` description
+- Fixed broken playground examples ([#3696](https://github.com/rjsf-team/react-jsonschema-form/issues/3696))
+- Added experimental_defaultFormStateBehavior.emptyObjectFields control to Playground
+- Fixed bug where subthemes would not appear in Playground
 
 # 5.7.3
 

packages/docs/docs/api-reference/form-props.md

@@ -72,7 +72,7 @@ The following sub-sections represent the different keys in this object, with the
 | `populate` | Legacy behavior - populate minItems entries with default values initially and include empty array when no values have been defined |
 | `requiredOnly` | Ignore `minItems` on a field when calculating defaults unless the field is required |
 
-### `emptyObjectFields
+### `emptyObjectFields`
 
 | Flag Value | Description |
 | -------------------------- | -------------------------------------------------------------------------------------------------------------------------- |

packages/docs/docs/usage/validation.md

@@ -71,7 +71,7 @@ node compileYourSchema.js
 
 > NOTE: You must have your schema provided within a file that can be parsed and turned into the set of precompiled validator functions.
 
-> Additional Note: If you are using Webpack or NextJS and are encountering an issue resolving `fs` during development, consult this [blog post](https://bobbyhadz.com/blog/module-not-found-cant-resolve-fs) for how to solve the issue. 
+> Additional Note: If you are using Webpack or NextJS and are encountering an issue resolving `fs` during development, consult this [blog post](https://bobbyhadz.com/blog/module-not-found-cant-resolve-fs) for how to solve the issue.
 
 ### Using the precompiled validator
 
@@ -435,7 +435,7 @@ An important note is that these errors are "display only" and will not block the
 
 ### ajvOptionsOverrides
 
-In version 5, with the advent of the decoupling of the validation implementation from the `Form`, it is now possible to provide additional options to the `ajv6` instance used within `@rjsf/validator-ajv8`.
+In version 5, with the advent of the decoupling of the validation implementation from the `Form`, it is now possible to provide additional options to the `ajv` instance used within `@rjsf/validator-ajv8`.
 For instance, if you need more information from `ajv` about errors via the `verbose` option, now you can turn it on!
 
 ```tsx

packages/playground/src/components/Header.tsx

@@ -86,6 +86,30 @@ const liveSettingsSchema: RJSFSchema = {
  },
  ],
  },
+ emptyObjectFields: {
+ type: 'string',
+ title: 'Object fields default behavior',
+ default: 'populateAllDefaults',
+ oneOf: [
+ {
+ type: 'string',
+ title:
+ 'Assign value to formData when default is primitive, non-empty object field, or is required (legacy behavior)',
+ enum: ['populateAllDefaults'],
+ },
+ {
+ type: 'string',
+ title:
+ 'Assign value to formData when default is an object and parent is required, or default is primitive and is required',
+ enum: ['populateRequiredDefaults'],
+ },
+ {
+ type: 'string',
+ title: 'Does not set defaults',
+ enum: ['skipDefaults'],
+ },
+ ],
+ },
  },
  },
  },
@@ -213,7 +237,7 @@ export default function Header({
  </div>
  <div className='col-sm-2'>
  <ThemeSelector themes={themes} theme={theme} select={onThemeSelected} />
- {themes[theme] && themes[theme].subthemes && subtheme && (
+ {themes[theme] && themes[theme].subthemes && (
  <SubthemeSelector subthemes={themes[theme].subthemes!} subtheme={subtheme} select={onSubthemeSelected} />
  )}
  <ValidatorSelector validators={validators} validator={validator} select={onValidatorSelected} />

packages/playground/src/components/Playground.tsx

@@ -1,15 +1,6 @@
 import { useCallback, useState, useRef, useEffect, ComponentType, FormEvent } from 'react';
 import { withTheme, IChangeEvent, FormProps } from '@rjsf/core';
-import {
- ErrorSchema,
- ArrayFieldTemplateProps,
- ObjectFieldTemplateProps,
- RJSFSchema,
- RJSFValidationError,
- TemplatesType,
- UiSchema,
- ValidatorType,
-} from '@rjsf/utils';
+import { ErrorSchema, RJSFSchema, RJSFValidationError, TemplatesType, UiSchema, ValidatorType } from '@rjsf/utils';
 
 import { samples } from '../samples';
 import Header, { LiveSettings } from './Header';
@@ -44,11 +35,10 @@ export default function Playground({ themes, validators }: PlaygroundProps) {
  readonly: false,
  omitExtraData: false,
  liveOmit: false,
- experimental_defaultFormStateBehavior: { arrayMinItems: 'populate' },
+ experimental_defaultFormStateBehavior: { arrayMinItems: 'populate', emptyObjectFields: 'populateAllDefaults' },
  });
  const [FormComponent, setFormComponent] = useState<ComponentType<FormProps>>(withTheme({}));
- const [ArrayFieldTemplate, setArrayFieldTemplate] = useState<ComponentType<ArrayFieldTemplateProps>>();
- const [ObjectFieldTemplate, setObjectFieldTemplate] = useState<ComponentType<ObjectFieldTemplateProps>>();
+ const [templates, setTemplates] = useState<Partial<TemplatesType>>();
 
  const playGroundFormRef = useRef<any>(null);
 
@@ -65,7 +55,7 @@ export default function Playground({ themes, validators }: PlaygroundProps) {
  const load = useCallback(
  (data: any) => {
  // Reset the ArrayFieldTemplate whenever you load new data
- const { ArrayFieldTemplate, ObjectFieldTemplate, extraErrors, liveSettings } = data;
+ const { templates = {}, extraErrors, liveSettings } = data;
  // uiSchema is missing on some examples. Provide a default to
  // clear the field in all cases.
  const { schema, uiSchema = {}, formData, theme: dataTheme = theme } = data;
@@ -79,9 +69,7 @@ export default function Playground({ themes, validators }: PlaygroundProps) {
  setFormData(formData);
  setExtraErrors(extraErrors);
  setTheme(dataTheme);
- setArrayFieldTemplate(ArrayFieldTemplate);
- setObjectFieldTemplate(ObjectFieldTemplate);
- setLiveSettings(liveSettings);
+ setTemplates(templates);
  setShowForm(true);
  setLiveSettings(liveSettings);
  },
@@ -127,14 +115,6 @@ export default function Playground({ themes, validators }: PlaygroundProps) {
  window.alert('Form submitted');
  }, []);
 
- const templates: Partial<TemplatesType> = {};
- if (ArrayFieldTemplate) {
- templates.ArrayFieldTemplate = ArrayFieldTemplate;
- }
- if (ObjectFieldTemplate) {
- templates.ObjectFieldTemplate = ObjectFieldTemplate;
- }
-
  return (
  <>
  <Header

packages/playground/src/components/SubthemeSelector.tsx

@@ -16,7 +16,7 @@ export interface SubthemesType {
 }
 
 interface SubthemeSelectorProps {
- subtheme: string;
+ subtheme: string | null;
  subthemes: SubthemesType;
  select: (subthemeName: string, subtheme: SubthemeType) => void;
 }
@@ -25,6 +25,7 @@ export default function SubthemeSelector({ subtheme, subthemes, select }: Subthe
  const schema: RJSFSchema = useMemo(
  () => ({
  type: 'string',
+ title: 'Subtheme',
  enum: Object.keys(subthemes),
  }),
  [subthemes]

packages/playground/src/components/ThemeSelector.tsx

@@ -18,6 +18,7 @@ interface ThemeSelectorProps {
 export default function ThemeSelector({ theme, themes, select }: ThemeSelectorProps) {
  const schema: RJSFSchema = {
  type: 'string',
+ title: 'Theme',
  enum: Object.keys(themes),
  };
 

packages/playground/src/components/ValidatorSelector.tsx

@@ -11,6 +11,7 @@ interface ValidatorSelectorProps {
 export default function ValidatorSelector({ validator, validators, select }: ValidatorSelectorProps) {
  const schema: RJSFSchema = {
  type: 'string',
+ title: 'Validator',
  enum: Object.keys(validators),
  };
 

packages/playground/src/samples/customArray.tsx

@@ -43,5 +43,5 @@ export default {
  },
  },
  formData: ['react', 'jsonschema', 'form'],
- ArrayFieldTemplate,
+ templates: { ArrayFieldTemplate },
 };

packages/playground/src/samples/customObject.tsx

@@ -1,29 +1,48 @@
-const ObjectFieldTemplate: React.FC<{
- TitleField: React.FC<{ title: string }>;
- title: string;
- properties: any[];
- description: string;
-}> = ({ TitleField, properties, title, description }) => {
+import {
+ getTemplate,
+ getUiOptions,
+ titleId,
+ StrictRJSFSchema,
+ RJSFSchema,
+ FormContextType,
+ ObjectFieldTemplateProps,
+} from '@rjsf/utils';
+
+function ObjectFieldTemplate<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+ props: ObjectFieldTemplateProps<T, S, F>
+) {
+ const { registry, properties, title, description, uiSchema, required, schema, idSchema } = props;
+ const options = getUiOptions<T, S, F>(uiSchema);
+ const TitleFieldTemplate = getTemplate<'TitleFieldTemplate', T, S, F>('TitleFieldTemplate', registry, options);
  return (
  <div>
- <TitleField title={title} />
+ {title && (
+ <TitleFieldTemplate
+ id={titleId<T>(idSchema)}
+ title={title}
+ required={required}
+ schema={schema}
+ uiSchema={uiSchema}
+ registry={registry}
+ />
+ )}{' '}
+ {description}
  <div className='row'>
  {properties.map((prop) => (
- <div className='col-lg-2 col-md-4 col-sm-6 col-xs-12' key={prop.content.key}>
+ <div className='col-lg-1 col-md-2 col-sm-4 col-xs-6' key={prop.content.key}>
  {prop.content}
  </div>
  ))}
  </div>
- {description}
  </div>
  );
-};
+}
 
 export default {
  schema: {
  title: 'A registration form',
  description:
- 'This is the same as the simple form, but it is rendered as a bootstrap grid. Try shrinking the browser window to see it in action.',
+ 'This is the same as the simple form, but with an altered bootstrap grid. Set the theme to default, and try shrinking the browser window to see it in action.',
  type: 'object',
  required: ['firstName', 'lastName'],
  properties: {
@@ -62,5 +81,7 @@ export default {
  bio: 'Roundhouse kicking asses since 1940',
  password: 'noneed',
  },
- ObjectFieldTemplate,
+ templates: {
+ ObjectFieldTemplate,
+ },
 };