[fix] #3856

- update `validation` example to use RJSF v5 API - add types for all samples and fix/ignore uncovered type issues - Spread sample data as extra form props
rjsf-team · Sep 8, 2023 · 83f09f6 · 83f09f6
1 parent b07eda3
commit 83f09f6
Show file tree

Hide file tree

Showing 37 changed files with 221 additions and 73 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -25,6 +25,10 @@ should change the heading of the (upcoming) version to include a major version b
 
 - Fixed a faulty check of the `isMultiple` option in `MultiSchemaField`. It no longer offers multiple choice inside a select field in a `oneOf` case in Chakra UI, fixing [#3848](https://github.com/rjsf-team/react-jsonschema-form/issues/3848)
 
+## Dev / docs / playground
+
+- Fixed custom validation playground example ([#3856](https://github.com/rjsf-team/react-jsonschema-form/issues/3856))
+
 # 5.12.1
 
 ## @rjsf/validator-ajv8

diff --git a/packages/playground/src/components/Playground.tsx b/packages/playground/src/components/Playground.tsx
@@ -1,6 +1,6 @@
-import { useCallback, useState, useRef, useEffect, ComponentType, FormEvent } from 'react';
-import { withTheme, IChangeEvent, FormProps } from '@rjsf/core';
-import { ErrorSchema, RJSFSchema, RJSFValidationError, TemplatesType, UiSchema, ValidatorType } from '@rjsf/utils';
+import { ComponentType, FormEvent, useCallback, useEffect, useRef, useState } from 'react';
+import { FormProps, IChangeEvent, withTheme } from '@rjsf/core';
+import { ErrorSchema, RJSFSchema, RJSFValidationError, UiSchema, ValidatorType } from '@rjsf/utils';
 
 import { samples } from '../samples';
 import Header, { LiveSettings } from './Header';
@@ -10,6 +10,7 @@ import GeoPosition from './GeoPosition';
 import { ThemesType } from './ThemeSelector';
 import Editors from './Editors';
 import SpecialInput from './SpecialInput';
+import { Sample } from '../samples/Sample';
 
 export interface PlaygroundProps {
   themes: { [themeName: string]: ThemesType };
@@ -39,7 +40,7 @@ export default function Playground({ themes, validators }: PlaygroundProps) {
     experimental_defaultFormStateBehavior: { arrayMinItems: 'populate', emptyObjectFields: 'populateAllDefaults' },
   });
   const [FormComponent, setFormComponent] = useState<ComponentType<FormProps>>(withTheme({}));
-  const [templates, setTemplates] = useState<Partial<TemplatesType>>();
+  const [otherFormProps, setOtherFormProps] = useState<Partial<FormProps>>({});
 
   const playGroundFormRef = useRef<any>(null);
 
@@ -54,12 +55,21 @@ export default function Playground({ themes, validators }: PlaygroundProps) {
   );
 
   const load = useCallback(
-    (data: any) => {
-      // Reset the ArrayFieldTemplate whenever you load new 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;
+    (data: Sample & { theme: string; liveSettings: LiveSettings }) => {
+      const {
+        schema,
+        // uiSchema is missing on some examples. Provide a default to
+        // clear the field in all cases.
+        uiSchema = {},
+        // Always reset templates and fields
+        templates = {},
+        fields = {},
+        formData,
+        theme: dataTheme = theme,
+        extraErrors,
+        liveSettings,
+        ...rest
+      } = data;
 
       onThemeSelected(dataTheme, themes[dataTheme]);
 
@@ -70,9 +80,9 @@ export default function Playground({ themes, validators }: PlaygroundProps) {
       setFormData(formData);
       setExtraErrors(extraErrors);
       setTheme(dataTheme);
-      setTemplates(templates);
       setShowForm(true);
       setLiveSettings(liveSettings);
+      setOtherFormProps({ fields, templates, ...rest });
     },
     [theme, onThemeSelected, themes]
   );
@@ -175,8 +185,8 @@ export default function Playground({ themes, validators }: PlaygroundProps) {
               theme={theme}
             >
               <FormComponent
+                {...otherFormProps}
                 {...liveSettings}
-                templates={templates}
                 extraErrors={extraErrors}
                 schema={schema}
                 uiSchema={uiSchema}

diff --git a/packages/playground/src/samples/Sample.ts b/packages/playground/src/samples/Sample.ts
@@ -0,0 +1,3 @@
+import { FormProps } from '@rjsf/core';
+
+export type Sample = Omit<FormProps, 'validator'>;
diff --git a/packages/playground/src/samples/additionalProperties.ts b/packages/playground/src/samples/additionalProperties.ts
@@ -1,4 +1,6 @@
-export default {
+import { Sample } from './Sample';
+
+const additionalProperties: Sample = {
   schema: {
     title: 'A customizable registration form',
     description: 'A simple form with additional properties example.',
@@ -30,3 +32,5 @@ export default {
     assKickCount: 'infinity',
   },
 };
+
+export default additionalProperties;
diff --git a/packages/playground/src/samples/allOf.ts b/packages/playground/src/samples/allOf.ts
@@ -1,4 +1,6 @@
-export default {
+import { Sample } from './Sample';
+
+const allOf: Sample = {
   schema: {
     type: 'object',
     allOf: [
@@ -24,3 +26,5 @@ export default {
   },
   formData: {},
 };
+
+export default allOf;
diff --git a/packages/playground/src/samples/alternatives.ts b/packages/playground/src/samples/alternatives.ts
@@ -1,4 +1,6 @@
-export default {
+import { Sample } from './Sample';
+
+const alternatives: Sample = {
   schema: {
     definitions: {
       Color: {
@@ -90,3 +92,5 @@ export default {
     blendMode: 'screen',
   },
 };
+
+export default alternatives;
diff --git a/packages/playground/src/samples/anyOf.ts b/packages/playground/src/samples/anyOf.ts
@@ -1,4 +1,6 @@
-export default {
+import { Sample } from './Sample';
+
+const anyOf: Sample = {
   schema: {
     type: 'object',
     properties: {
@@ -57,3 +59,5 @@ export default {
   },
   formData: {},
 };
+
+export default anyOf;
diff --git a/packages/playground/src/samples/arrays.ts b/packages/playground/src/samples/arrays.ts
@@ -1,4 +1,6 @@
-export default {
+import { Sample } from './Sample';
+
+const arrays: Sample = {
   schema: {
     definitions: {
       Thing: {
@@ -189,3 +191,5 @@ export default {
     fixedNoToolbar: [42, true, 'additional item one', 'additional item two'],
   },
 };
+
+export default arrays;
diff --git a/packages/playground/src/samples/custom.ts b/packages/playground/src/samples/custom.ts
@@ -1,4 +1,6 @@
-export default {
+import { Sample } from './Sample';
+
+const custom: Sample = {
   schema: {
     title: 'A localisation form',
     type: 'object',
@@ -20,3 +22,5 @@ export default {
     lon: 0,
   },
 };
+
+export default custom;
diff --git a/packages/playground/src/samples/customArray.tsx b/packages/playground/src/samples/customArray.tsx
@@ -1,9 +1,8 @@
-const ArrayFieldTemplate: React.FC<{ className: string; items?: any[]; canAdd?: boolean; onAddClick: () => void }> = ({
-  className,
-  items,
-  canAdd,
-  onAddClick,
-}) => {
+import { Sample } from './Sample';
+import { ArrayFieldTemplateProps } from '@rjsf/utils';
+
+function ArrayFieldTemplate(props: ArrayFieldTemplateProps) {
+  const { className, items, canAdd, onAddClick } = props;
   return (
     <div className={className}>
       {items &&
@@ -32,9 +31,9 @@ const ArrayFieldTemplate: React.FC<{ className: string; items?: any[]; canAdd?:
       )}
     </div>
   );
-};
+}
 
-export default {
+export const customArray: Sample = {
   schema: {
     title: 'Custom array of strings',
     type: 'array',
@@ -45,3 +44,5 @@ export default {
   formData: ['react', 'jsonschema', 'form'],
   templates: { ArrayFieldTemplate },
 };
+
+export default customArray;
diff --git a/packages/playground/src/samples/customField.ts b/packages/playground/src/samples/customField.ts
@@ -1,4 +1,6 @@
-export default {
+import { Sample } from './Sample';
+
+const customField: Sample = {
   schema: {
     title: 'A registration form',
     description: 'A custom-field form example.',
@@ -26,3 +28,5 @@ export default {
     mySpecialStringField: 'special-text',
   },
 };
+
+export default customField;
diff --git a/packages/playground/src/samples/customFieldAnyOf.tsx b/packages/playground/src/samples/customFieldAnyOf.tsx
@@ -1,10 +1,12 @@
-const UiField: React.FC<{
-  schema?: any;
-  idSchema: { $id: string };
-  formData?: any;
-  onChange: (...args: any[]) => void;
-  [key: string]: any;
-}> = ({ idSchema: { $id }, formData, onChange }) => {
+import { Sample } from './Sample';
+import { FieldProps } from '@rjsf/utils';
+
+function UiField(props: FieldProps) {
+  const {
+    idSchema: { $id },
+    formData,
+    onChange,
+  } = props;
   const changeHandlerFactory = (fieldName: string) => (event: any) => {
     onChange(formData ? { ...formData, [fieldName]: event.target.value } : { [fieldName]: event.target.value });
   };
@@ -71,9 +73,9 @@ const UiField: React.FC<{
       </div>
     </>
   );
-};
+}
 
-export default {
+const customFieldAnyOf: Sample = {
   schema: {
     title: 'Location',
     type: 'object',
@@ -106,3 +108,5 @@ export default {
   },
   formData: {},
 };
+
+export default customFieldAnyOf;
diff --git a/packages/playground/src/samples/customObject.tsx b/packages/playground/src/samples/customObject.tsx
@@ -6,7 +6,9 @@ import {
   RJSFSchema,
   FormContextType,
   ObjectFieldTemplateProps,
+  ObjectFieldTemplatePropertyType,
 } from '@rjsf/utils';
+import { Sample } from './Sample';
 
 function ObjectFieldTemplate<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
   props: ObjectFieldTemplateProps<T, S, F>
@@ -28,7 +30,7 @@ function ObjectFieldTemplate<T = any, S extends StrictRJSFSchema = RJSFSchema, F
       )}{' '}
       {description}
       <div className='row'>
-        {properties.map((prop) => (
+        {properties.map((prop: ObjectFieldTemplatePropertyType) => (
           <div className='col-lg-1 col-md-2 col-sm-4 col-xs-6' key={prop.content.key}>
             {prop.content}
           </div>
@@ -38,7 +40,7 @@ function ObjectFieldTemplate<T = any, S extends StrictRJSFSchema = RJSFSchema, F
   );
 }
 
-export default {
+const customObject: Sample = {
   schema: {
     title: 'A registration form',
     description:
@@ -85,3 +87,5 @@ export default {
     ObjectFieldTemplate,
   },
 };
+
+export default customObject;
diff --git a/packages/playground/src/samples/date.ts b/packages/playground/src/samples/date.ts
@@ -1,4 +1,6 @@
-export default {
+import { Sample } from './Sample';
+
+const date: Sample = {
   schema: {
     title: 'Date and time widgets',
     type: 'object',
@@ -57,3 +59,5 @@ export default {
   },
   formData: {},
 };
+
+export default date;
diff --git a/packages/playground/src/samples/defaults.ts b/packages/playground/src/samples/defaults.ts
@@ -1,4 +1,6 @@
-export default {
+import { Sample } from './Sample';
+
+const defaults: Sample = {
   schema: {
     title: 'Schema default properties',
     type: 'object',
@@ -68,3 +70,5 @@ export default {
     },
   },
 };
+
+export default defaults;
diff --git a/packages/playground/src/samples/enumObjects.ts b/packages/playground/src/samples/enumObjects.ts
@@ -1,7 +1,10 @@
-export default {
+import { Sample } from './Sample';
+
+const enumObjects: Sample = {
   schema: {
     definitions: {
       locations: {
+        // @ts-expect-error -- enumNames an RJSF keyword and is not in the JSON Schema spec
         enumNames: ['New York', 'Amsterdam', 'Hong Kong'],
         enum: [
           {
@@ -66,3 +69,5 @@ export default {
     },
   },
 };
+
+export default enumObjects;
diff --git a/packages/playground/src/samples/errorSchema.ts b/packages/playground/src/samples/errorSchema.ts
@@ -1,4 +1,6 @@
-export default {
+import { Sample } from './Sample';
+
+const errorSchema: Sample = {
   schema: {
     title: 'A registration form',
     description: 'A simple form example.',
@@ -67,8 +69,11 @@ export default {
     password: 'noneed',
   },
   extraErrors: {
+    // @ts-expect-error - extraErrors types are hard
     firstName: {
       __errors: ['some error that got added as a prop'],
     },
   },
 };
+
+export default errorSchema;
diff --git a/packages/playground/src/samples/errors.ts b/packages/playground/src/samples/errors.ts
@@ -1,4 +1,6 @@
-export default {
+import { Sample } from './Sample';
+
+const errors: Sample = {
   schema: {
     title: 'Contextualized errors',
     type: 'object',
@@ -40,3 +42,5 @@ export default {
     multipleChoicesList: ['foo', 'bar', 'fuzz'],
   },
 };
+
+export default errors;
diff --git a/packages/playground/src/samples/examples.ts b/packages/playground/src/samples/examples.ts
@@ -1,4 +1,6 @@
-export default {
+import { Sample } from './Sample';
+
+const examples: Sample = {
   schema: {
     title: 'Examples',
     description: 'A text field with example values.',
@@ -12,3 +14,5 @@ export default {
     },
   },
 };
+
+export default examples;