Fix playground examples tab

Fixes #4605 by removing the `validator` from the `Example` samples
- Updated the `examples.ts` to remove the `validator` that was causing the issue
- Updated `Samples.ts` to remove the `validator` redefinition from the `Samples` types
- Updated the `Playground` to add the `validator` back onto the `load` function, renaming `validator` to `theValidator` to avoid possible confusion with the state variable
- Updated `Header` to remove `React.` with inputs and replaced `React.FC` with a real functional component using `PropsWithChildren`
  - Also fixed up type warning for `onSubthemeSelected` by using proper `SubthemeType`.
  - Made the `HeaderButtons` click handlers be `useCallback`s
- Updated `SpecialInput` to remove `React.FC` in favor of a functional component using `PropsWithChildren`, extracting the `onChange` handler to a `useCallback`
- Updated `SubthemeSelector.ts` to export the `SubthemeType`
- Updated `ThemeSelector` and `ValidatorSelector` to extract the `onChange` handlers to a `useCallback`

Author: heath-freenome

packages/playground/src/components/Header.tsx

@@ -1,4 +1,11 @@
-import { useCallback } from 'react';
+import {
+  useCallback,
+  ButtonHTMLAttributes,
+  Dispatch,
+  MutableRefObject,
+  PropsWithChildren,
+  SetStateAction,
+} from 'react';
 import Form, { IChangeEvent } from '@rjsf/core';
 import { RJSFSchema, UiSchema, ValidatorType } from '@rjsf/utils';
 import localValidator from '@rjsf/validator-ajv8';
@@ -8,43 +15,43 @@ import CopyLink from './CopyLink';
 import ThemeSelector, { ThemesType } from './ThemeSelector';
 import SampleSelector, { SampleSelectorProps } from './SampleSelector';
 import ValidatorSelector from './ValidatorSelector';
-import SubthemeSelector from './SubthemeSelector';
+import SubthemeSelector, { SubthemeType } from './SubthemeSelector';
 import RawValidatorTest from './RawValidatorTest';
 
-const HeaderButton: React.FC<
-  {
-    title: string;
-    onClick: () => void;
-  } & React.ButtonHTMLAttributes<HTMLButtonElement>
-> = ({ title, onClick, children, ...buttonProps }) => {
+type HeaderButtonProps = {
+  title: string;
+  onClick: () => void;
+} & ButtonHTMLAttributes<HTMLButtonElement>;
+
+function HeaderButton({ title, onClick, children, ...buttonProps }: PropsWithChildren<HeaderButtonProps>) {
   return (
     <button type='button' className='btn btn-default' title={title} onClick={onClick} {...buttonProps}>
       {children}
     </button>
   );
-};
+}
 
-function HeaderButtons({ playGroundFormRef }: { playGroundFormRef: React.MutableRefObject<any> }) {
+function HeaderButtons({ playGroundFormRef }: { playGroundFormRef: MutableRefObject<any> }) {
+  const submitClick = useCallback(() => {
+    playGroundFormRef.current.submit();
+  }, [playGroundFormRef]);
+  const validateClick = useCallback(() => {
+    playGroundFormRef.current.validateForm();
+  }, [playGroundFormRef]);
+  const resetClick = useCallback(() => {
+    playGroundFormRef.current.reset();
+  }, [playGroundFormRef]);
   return (
     <>
       <label className='control-label'>Programmatic</label>
       <div className='btn-group'>
-        <HeaderButton
-          title='Click me to submit the form programmatically.'
-          onClick={() => playGroundFormRef.current.submit()}
-        >
+        <HeaderButton title='Click me to submit the form programmatically.' onClick={submitClick}>
           Submit
         </HeaderButton>
-        <HeaderButton
-          title='Click me to validate the form programmatically.'
-          onClick={() => playGroundFormRef.current.validateForm()}
-        >
+        <HeaderButton title='Click me to validate the form programmatically.' onClick={validateClick}>
           Validate
         </HeaderButton>
-        <HeaderButton
-          title='Click me to reset the form programmatically.'
-          onClick={() => playGroundFormRef.current.reset()}
-        >
+        <HeaderButton title='Click me to reset the form programmatically.' onClick={resetClick}>
           Reset
         </HeaderButton>
       </div>
@@ -242,14 +249,14 @@ type HeaderProps = {
   };
   validator: string;
   liveSettings: LiveSettings;
-  playGroundFormRef: React.MutableRefObject<any>;
+  playGroundFormRef: MutableRefObject<any>;
   onSampleSelected: SampleSelectorProps['onSelected'];
   onThemeSelected: (theme: string, themeObj: ThemesType) => void;
-  setSubtheme: React.Dispatch<React.SetStateAction<string | null>>;
-  setStylesheet: React.Dispatch<React.SetStateAction<string | null>>;
-  setValidator: React.Dispatch<React.SetStateAction<string>>;
-  setLiveSettings: React.Dispatch<React.SetStateAction<LiveSettings>>;
-  setShareURL: React.Dispatch<React.SetStateAction<string | null>>;
+  setSubtheme: Dispatch<SetStateAction<string | null>>;
+  setStylesheet: Dispatch<SetStateAction<string | null>>;
+  setValidator: Dispatch<SetStateAction<string>>;
+  setLiveSettings: Dispatch<SetStateAction<LiveSettings>>;
+  setShareURL: Dispatch<SetStateAction<string | null>>;
 };
 
 export default function Header({
@@ -274,9 +281,9 @@ export default function Header({
   onSampleSelected,
 }: HeaderProps) {
   const onSubthemeSelected = useCallback(
-    (subtheme: any, { stylesheet }: { stylesheet: any }) => {
+    (subtheme: any, { stylesheet }: SubthemeType) => {
       setSubtheme(subtheme);
-      setStylesheet(stylesheet);
+      setStylesheet(stylesheet || null);
     },
     [setSubtheme, setStylesheet],
   );

packages/playground/src/components/Playground.tsx

@@ -63,7 +63,7 @@ export default function Playground({ themes, validators }: PlaygroundProps) {
   );
 
   const load = useCallback(
-    (data: Sample & { theme: string; liveSettings: LiveSettings; sampleName?: string }) => {
+    (data: Sample & { theme: string; liveSettings: LiveSettings; sampleName?: string; validator?: string }) => {
       const {
         schema,
         // uiSchema is missing on some examples. Provide a default to
@@ -76,7 +76,7 @@ export default function Playground({ themes, validators }: PlaygroundProps) {
         theme: dataTheme = theme,
         extraErrors,
         liveSettings,
-        validator,
+        validator: theValidator,
         sampleName,
         ...rest
       } = data;
@@ -110,8 +110,8 @@ export default function Playground({ themes, validators }: PlaygroundProps) {
       setExtraErrors(extraErrors);
       setShowForm(true);
       setLiveSettings(liveSettings);
-      if ('validator' in data && validator !== undefined) {
-        setValidator(validator);
+      if ('validator' in data && theValidator !== undefined) {
+        setValidator(theValidator);
       }
       setOtherFormProps({ fields, templates, ...rest });
     },

packages/playground/src/components/SpecialInput.tsx

@@ -1,13 +1,21 @@
+import { ChangeEvent, PropsWithChildren, useCallback, useState } from 'react';
 import { FieldProps } from '@rjsf/utils';
-import { FC, useState } from 'react';
 
 const COLORS = ['red', 'green', 'blue'];
 
-const SpecialInput: FC<FieldProps<string>> = ({ onChange, formData }) => {
+export default function SpecialInput({ onChange, formData }: PropsWithChildren<FieldProps>) {
   const [text, setText] = useState<string>(formData || '');
 
   const inputBgColor = COLORS[text.length % COLORS.length];
 
+  const handleOnChange = useCallback(
+    ({ target: { value } }: ChangeEvent<HTMLInputElement>) => {
+      onChange(value);
+      setText(value);
+    },
+    [onChange, setText],
+  );
+
   return (
     <div className='SpecialInput'>
       <h3>Hey, I&apos;m a custom component</h3>
@@ -23,15 +31,10 @@ const SpecialInput: FC<FieldProps<string>> = ({ onChange, formData }) => {
             className='form-control'
             style={{ background: inputBgColor, color: 'white', fontSize: 14 }}
             value={text}
-            onChange={({ target: { value } }) => {
-              onChange(value);
-              setText(value);
-            }}
+            onChange={handleOnChange}
           />
         </div>
       </div>
     </div>
   );
-};
-
-export default SpecialInput;
+}

packages/playground/src/components/SubthemeSelector.tsx

@@ -7,7 +7,7 @@ const uiSchema: UiSchema = {
   'ui:placeholder': 'Select subtheme',
 };
 
-interface SubthemeType {
+export interface SubthemeType {
   stylesheet?: string;
   dataTheme?: string;
 }

packages/playground/src/components/ThemeSelector.tsx

@@ -1,6 +1,8 @@
+import { useCallback } from 'react';
 import Form, { IChangeEvent } from '@rjsf/core';
 import { RJSFSchema, UiSchema } from '@rjsf/utils';
 import localValidator from '@rjsf/validator-ajv8';
+
 import { SubthemesType } from './SubthemeSelector';
 
 export interface ThemesType {
@@ -26,6 +28,15 @@ export default function ThemeSelector({ theme, themes, select }: ThemeSelectorPr
     'ui:placeholder': 'Select theme',
   };
 
+  const onChange = useCallback(
+    ({ formData }: IChangeEvent) => {
+      if (formData) {
+        select(formData, themes[formData]);
+      }
+    },
+    [select, themes],
+  );
+
   return (
     <Form
       className='form_rjsf_themeSelector'
@@ -34,7 +45,7 @@ export default function ThemeSelector({ theme, themes, select }: ThemeSelectorPr
       uiSchema={uiSchema}
       formData={theme}
       validator={localValidator}
-      onChange={({ formData }: IChangeEvent) => formData && select(formData, themes[formData])}
+      onChange={onChange}
     >
       <div />
     </Form>

packages/playground/src/components/ValidatorSelector.tsx

@@ -1,10 +1,11 @@
+import { useCallback } from 'react';
 import Form, { IChangeEvent } from '@rjsf/core';
-import { GenericObjectType, RJSFSchema, UiSchema } from '@rjsf/utils';
+import { RJSFSchema, UiSchema, ValidatorType } from '@rjsf/utils';
 import localValidator from '@rjsf/validator-ajv8';
 
 interface ValidatorSelectorProps {
   validator: string;
-  validators: GenericObjectType;
+  validators: { [validatorName: string]: ValidatorType };
   select: (validator: string) => void;
 }
 
@@ -19,6 +20,15 @@ export default function ValidatorSelector({ validator, validators, select }: Val
     'ui:placeholder': 'Select validator',
   };
 
+  const onChange = useCallback(
+    ({ formData }: IChangeEvent) => {
+      if (formData) {
+        select(formData);
+      }
+    },
+    [select],
+  );
+
   return (
     <Form
       className='form_rjsf_validatorSelector'
@@ -27,7 +37,7 @@ export default function ValidatorSelector({ validator, validators, select }: Val
       uiSchema={uiSchema}
       formData={validator}
       validator={localValidator}
-      onChange={({ formData }: IChangeEvent) => formData && select(formData)}
+      onChange={onChange}
     >
       <div />
     </Form>

packages/playground/src/samples/Sample.ts

@@ -4,6 +4,5 @@ import { FormProps } from '@rjsf/core';
 export type UiSchemaForTheme = (theme: string) => UiSchema;
 
 export interface Sample extends Omit<FormProps, 'validator' | 'uiSchema'> {
-  validator?: string;
-  uiSchema: FormProps['uiSchema'] | UiSchemaForTheme;
+  uiSchema?: FormProps['uiSchema'] | UiSchemaForTheme;
 }

packages/playground/src/samples/examples.ts

@@ -1,9 +1,6 @@
-import validator from '@rjsf/validator-ajv8';
-
 import { Sample } from './Sample';
 
 const examples: Sample = {
-  validator: validator,
   schema: {
     title: 'Examples',
     description: 'A text field with example values.',