Feature: Modernized the playground ui (#4811)

* Feature: Modernized the playground ui
Modernized the playground UI to allow for more real-estate for the actual form
- Updated the `SampleSelector` to render the samples inside of a `Drawer` on the left side of the screen, that when closed just shows the selected sample name
- Refactored the theme and subtheme selector from `Headers` into the `Editors` component, moving that and the existing content into an `Accordion`
- Renamed the `Headers` component to `OptionsDrawer` moving all of the remaining content into a permanent right-side drawer
  - Also consolidated the two live settings schemas and uiSchemas into a single schema and uiSchema
  - Also moved the buttons above the live settings schema form
  - Updated `Playground` and `Sample.ts` to fix the imports due to the file rename
- Updated the `ThemeSelector` and `SubthemeSelectors` to add click handlers to stop the click propagation
- Updated `CopyLink` to make it wider and change the title to `Share Playground`
- Updated `Playground` to change the fragment into a `Box` flexed, with 100%, adding the `SampleSelector` directly
  - Also added a second `Box` width 100% around the `Editors`, `Divider`, and `DemoFrame`
  - Moved the renamed `OptionsDrawer` below the second `Box`
- Updated `Footer` to absolutely position the Netlify badge to the left of the Options Drawer

# Conflicts:
#	packages/playground/src/components/OptionsDrawer.tsx

# Conflicts:
#	packages/playground/src/components/OptionsDrawer.tsx

* - Updated screenshots to remove playground controls and to make sure all themes showed them in the README

* - Updated the documentation's animated playground GIF

* - Updated the `CHANGELOG.md`

# Conflicts:
#	CHANGELOG.md

* - Better animated gif

* - Update images

* - Updated playground's `index.tsx` to switch to non-deprecated APIs

Author: heath-freenome

CHANGELOG.md

@@ -15,7 +15,15 @@ it according to semantic versioning. For example, if your PR adds a breaking cha
 should change the heading of the (upcoming) version to include a major version bump.
 
 -->
-# 6.0.0
+# 6.0.0-beta.24
+
+## @rjsf/antd
+
+- Updated the `README.md` to show the theme snapshot with the latest theme UI from the playground, making it a link to the theme
+
+## @rjsf/chakra-ui
+
+- Updated the `README.md` to show the theme snapshot with the latest theme UI from the playground, making it a link to the theme
 
 ## @rjsf/core
 
@@ -25,6 +33,9 @@ should change the heading of the (upcoming) version to include a major version b
 ## Dev / docs / playground
 
 - Updated the libraries to the latest ones that aren't problematic
+  Updated the playground to modernize the UI using MUI components
+- Updated the documentation to switch to using an animated gif based on the latest modernized playground UI
+- Updated the `README.md` in all themes to show the theme snapshot with the latest theme UI from the playground, making it a link to the theme
 
 # 6.0.0-beta.23
 

packages/antd/README.md

@@ -47,6 +47,8 @@
 
 Ant Design theme, fields and widgets for `react-jsonschema-form`.
 
+[<img src="./screenshot.png" alt="product-screenshot" width="800" />](https://rjsf-team.github.io/@rjsf/antd)
+
 ### Built With
 
 - [react-jsonschema-form](https://github.com/rjsf-team/react-jsonschema-form/)

packages/antd/screenshot.png

@@ -48,7 +48,7 @@
 
 ## About The Project
 
-[![@rjsf/chakra-ui Screen Shot][product-screenshot]](https://rjsf-team.github.io/@rjsf/chakra-ui)
+[<img src="./screenshot.png" alt="product-screenshot" width="800" />](https://rjsf-team.github.io/@rjsf/chakra-ui)
 
 Exports `chakra-ui` theme, fields and widgets for `react-jsonschema-form`.
 

packages/chakra-ui/README.md

@@ -47,6 +47,8 @@
 
 Core logic and classic Bootstrap 3 theme for `react-jsonschema-form`.
 
+[<img src="./screenshot.png" alt="product-screenshot" width="800" />](https://rjsf-team.github.io/@rjsf/core)
+
 ### Built With
 
 - [react-jsonschema-form](https://github.com/rjsf-team/react-jsonschema-form/)

packages/chakra-ui/screenshot.png

@@ -12,8 +12,7 @@ This package integrates [DaisyUI](https://daisyui.com/), [Tailwind CSS](https://
 
 ## Screenshots
 
-![DaisyUI Form Example 1](daisy-screenshot1.png)
-![DaisyUI Form Example 2](daisy-screenshot2.png)
+[<img src="./screenshot.png" alt="product-screenshot" width="800" />](https://rjsf-team.github.io/@rjsf/daisyui)
 
 ## Features