Validator to support AJV $data reference and saving validator state in ShareURL.

Author: abdalla-rko

packages/playground/src/app.tsx

@@ -20,9 +20,11 @@ const esV8Validator = customizeValidator({}, localize_es);
 const AJV8_2019 = customizeValidator({ AjvClass: Ajv2019 });
 const AJV8_2020 = customizeValidator({ AjvClass: Ajv2020 });
 const AJV8_DISC = customizeValidator({ ajvOptionsOverrides: { discriminator: true } });
+const AJV8_DATA_REF = customizeValidator({ ajvOptionsOverrides: { $data: true } });
 
 const validators: PlaygroundProps['validators'] = {
   AJV8: v8Validator,
+  'AJV8 $data reference': AJV8_DATA_REF,
   'AJV8 (discriminator)': AJV8_DISC,
   AJV8_es: esV8Validator,
   AJV8_2019,

packages/playground/src/components/Header.tsx

@@ -306,6 +306,7 @@ export default function Header({
           uiSchema,
           theme,
           liveSettings,
+          validator,
         })
       );
 
@@ -314,7 +315,7 @@ export default function Header({
       setShareURL(null);
       console.error(error);
     }
-  }, [formData, liveSettings, schema, theme, uiSchema, setShareURL]);
+  }, [formData, liveSettings, schema, theme, uiSchema, validator, setShareURL]);
 
   return (
     <div className='page-header'>

packages/playground/src/components/Playground.tsx

@@ -69,6 +69,7 @@ export default function Playground({ themes, validators }: PlaygroundProps) {
         theme: dataTheme = theme,
         extraErrors,
         liveSettings,
+        validator,
         ...rest
       } = data;
 
@@ -85,6 +86,7 @@ export default function Playground({ themes, validators }: PlaygroundProps) {
       setTheme(theTheme);
       setShowForm(true);
       setLiveSettings(liveSettings);
+      setValidator(validator);
       setOtherFormProps({ fields, templates, ...rest });
     },
     [theme, onThemeSelected, themes]

packages/playground/src/samples/Sample.ts

@@ -1,3 +1,5 @@
 import { FormProps } from '@rjsf/core';
 
-export type Sample = Omit<FormProps, 'validator'>;
+export interface Sample extends Omit<FormProps, 'validator'> {
+  validator: string;
+}