🔥( Hot-Fix ): fixes UI breaking by error rendering component of (react-view) in playground area.

src/components/playground/index.jsx

@@ -24,8 +24,8 @@ export default ({ params }) => {
           placeholder={Placeholder}
         />
       </div>
-      <Error msg={params.errorProps.msg} isPopup />
       <Knobs {...params.knobProps} />
+      <Error msg={params.errorProps.msg}/>
       <Editor {...params.editorProps} />
       <Error {...params.errorProps} />
       <ActionButtons {...params.actions} />

src/content/AirbnbRating/airbnb.mdx

@@ -0,0 +1,49 @@
+# Props
+
+- [`count`](#count)
+- [`defaultRating`](#defaultRating)
+- [`onFinishRating`](#onFinishRating)
+- [`reviews`](#reviews)
+- [`showRating`](#showRating)
+
+---
+
+# Reference
+
+### `count`
+
+Total number of ratings to display
+
+|  Type  | Default |
+| :----: | :-----: |
+| number |   5     |
+
+---
+
+### `defaultRating`
+
+Initial value for the rating defaultRating
+
+|      Type      | Default |
+| :------------: | :-----: |
+|     number     |  1      |
+
+---
+
+### `reviews`
+
+Labels to show when each value is tapped e.g. If the first star is tapped, then value in index 0 will be used as the label
+
+|   Type   |                  Default                     |
+| :------: | :------------------------------------------: |
+| string[] | ['Terrible', 'Bad', 'Okay', 'Good', 'Great'] |
+
+---
+
+### `onFinishRating`
+
+Callback method when the user finishes rating. Gives you the final rating value as a whole number (required)
+
+|      Type      | Default |
+| :------------: | :-----: |
+|    function    |  none   |

src/content/AirbnbRating/index.jsx

@@ -1,10 +1,19 @@
-import React from "react";
+import React, { lazy, Suspense } from "react";
 import Playground from "./searchbar.playground.jsx";
+import { importMDX } from "mdx.macro";
+import PropDrawer from "../../components/PropDrawer";
+
+const Content = lazy(() => importMDX("./airbnb.mdx"));
 
 export default function AirbnbPlayground() {
   return (
     <div>
       <Playground />
+        <Suspense fallback={<div>Loading...</div>}>
+          <PropDrawer>
+            <Content />
+          </PropDrawer>
+        </Suspense>
     </div>
   );
 }

src/content/Avatar/avatar.mdx

@@ -1,4 +1,4 @@
-## Props
+# Props
 
 - [`activeOpacity`](#activeopacity)
 - [`avatarStyle`](#avatarstyle)

src/content/BottomSheet/bottomsheet.mdx

@@ -0,0 +1,39 @@
+# Props
+
+- [`containerStyle`](#containerStyle)
+- [`isVisible`](#isvisible)
+- [`modalProps`](#modalprops)
+
+---
+
+# Reference
+
+### `containerStyle`
+
+Style of the bottom sheet's container
+
+Use this to change the color of the underlay
+
+|        Type         |    Default     |
+| :-----------------: | :------------: |
+| View style (object) | Internal Style |
+
+---
+
+### `isVisible`
+
+Is the modal component shown
+
+|  Type   | Default |
+| :-----: | :-----: |
+| boolean |  false  |
+
+---
+
+### `modalProps`
+
+Additional props handed to the `Modal`
+
+|                             Type                             | Default |
+| :----------------------------------------------------------: | :-----: |
+| [Modal Props](https://reactnative.dev/docs/modal.html#props) |   {}    |

src/content/BottomSheet/index.jsx

@@ -1,10 +1,19 @@
-import React from "react";
+import React, { lazy, Suspense } from "react";
 import Playground from "./bottomsheet.playground.jsx";
+import { importMDX } from "mdx.macro";
+import PropDrawer from "../../components/PropDrawer";
+
+const Content = lazy(() => importMDX("./bottomsheet.mdx"));
 
 export default function BottomSheetPlayground() {
   return (
     <div>
       <Playground />
+        <Suspense fallback={<div>Loading...</div>}>
+          <PropDrawer>
+            <Content />
+          </PropDrawer>
+        </Suspense>
     </div>
   );
 }

src/content/ButtonGroup/buttongroup.mdx

@@ -0,0 +1,226 @@
+# Props
+
+- [`buttonContainerStyle`](#buttonContainerStyle)
+- [`buttons`](#buttons)
+- [`buttonStyle`](#buttonStyle)
+- [`Component`](#Component)
+- [`containerStyle`](#containerStyle)
+- [`disabled`](#disabled)
+- [`disabledSelectedStyle`](#disabledSelectedStyle)
+- [`disabledSelectedTextStyle`](#disabledSelectedTextStyle)
+- [`disabledStyle`](#disabledStyle)
+- [`disabledTextStyle`](#disabledTextStyle)
+- [`innerBorderStyle`](#innerBorderStyle)
+- [`onPress`](#onPress)
+- [`selectedButtonStyle`](#selectedButtonStyle)
+- [`selectedIndex`](#selectedIndex)
+- [`selectedIndexes`](#selectedIndexes)
+- [`selectedTextStyle`](#selectedTextStyle)
+- [`selectMultiple`](#selectMultiple)
+- [`textStyle`](#textStyle)
+- [`underlayColor`](#underlayColor)
+- [`vertical`](#vertical)
+
+---
+
+# Reference
+
+### `buttonContainerStyle`
+
+specify styling for button containers (optional)
+
+|      Type      |      Default      |
+| :------------: | :---------------: |
+| object (style) | inherited styling |
+
+---
+
+### `buttons`
+
+array of buttons for component (required), if returning a component, must be an
+object with { element: componentName }
+
+| Type  | Default |
+| :---: | :-----: |
+| array |  none   |
+
+---
+
+### `buttonStyle`
+
+specify styling for button (optional)
+
+|      Type      |      Default      |
+| :------------: | :---------------: |
+| object (style) | inherited styling |
+
+---
+
+### `Component`
+
+Choose other button component such as TouchableOpacity (optional)
+
+|          Type          |                           Default                           |
+| :--------------------: | :---------------------------------------------------------: |
+| React Native Component | TouchableOpacity (ios) or TouchableNativeFeedback (android) |
+
+---
+
+### `containerStyle`
+
+specify styling for main button container (optional)
+
+|      Type      |      Default      |
+| :------------: | :---------------: |
+| object (style) | inherited styling |
+
+---
+
+### `disabled`
+
+Controls if buttons are disabled. Setting `true` makes all of them disabled,
+while using an array only makes those indices disabled.
+
+|          Type           | Default |
+| :---------------------: | :-----: |
+| boolean **OR** number[] |  false  |
+
+---
+
+### `disabledSelectedStyle`
+
+Styling for each selected button when disabled.
+
+|        Type         |    Default     |
+| :-----------------: | :------------: |
+| View style (object) | Internal Style |
+
+---
+
+### `disabledSelectedTextStyle`
+
+Styling for the text of each selected button when disabled.
+
+|        Type         |    Default     |
+| :-----------------: | :------------: |
+| Text style (object) | Internal Style |
+
+---
+
+### `disabledStyle`
+
+Styling for each button when disabled.
+
+|        Type         |    Default     |
+| :-----------------: | :------------: |
+| View style (object) | Internal Style |
+
+---
+
+### `disabledTextStyle`
+
+Styling for the text of each button when disabled.
+
+|        Type         |    Default     |
+| :-----------------: | :------------: |
+| Text style (object) | Internal Style |
+
+---
+
+### `innerBorderStyle`
+
+update the styling of the interior border of the list of buttons (optional)
+
+|          Type           |      Default      |
+| :---------------------: | :---------------: |
+| object { width, color } | inherited styling |
+
+---
+
+### `onPress`
+
+method to update Button Group Index (required)
+
+|   Type   | Default |
+| :------: | :-----: |
+| function |  none   |
+
+---
+
+### `selectedButtonStyle`
+
+specify styling for selected button (optional)
+
+|      Type      |      Default      |
+| :------------: | :---------------: |
+| object (style) | inherited styling |
+
+---
+
+### `selectedIndex`
+
+current selected index of array of buttons (required)
+
+|  Type  | Default |
+| :----: | :-----: |
+| number |  none   |
+
+---
+
+### `selectedIndexes`
+
+current selected indexes from the array of buttons
+
+|      Type      | Default |
+| :------------: | :-----: |
+| array (number) |   []    |
+
+---
+
+### `selectedTextStyle`
+
+specify specific styling for text in the selected state (optional)
+
+|      Type      |      Default      |
+| :------------: | :---------------: |
+| object (style) | inherited styling |
+
+---
+
+### `selectMultiple`
+
+allows the user to select multiple buttons
+
+|  Type   | Default |
+| :-----: | :-----: |
+| boolean |  false  |
+
+---
+
+### `textStyle`
+
+specify specific styling for text (optional)
+
+|      Type      |      Default      |
+| :------------: | :---------------: |
+| object (style) | inherited styling |
+
+---
+
+### `underlayColor`
+
+specify underlayColor for TouchableHighlight (optional)
+
+|  Type  | Default |
+| :----: | :-----: |
+| string |  white  |
+
+---
+
+### `vertical`
+
+Display the ButtonGroup vertically
+
+|  Type   | Default |
+| :-----: | :-----: |
+| boolean |  false  |

src/content/ButtonGroup/index.jsx

@@ -1,10 +1,19 @@
-import React from "react";
+import React, { lazy, Suspense } from "react";
 import Playground from "./buttongroup.playground.jsx";
+import { importMDX } from "mdx.macro";
+import PropDrawer from "../../components/PropDrawer";
+
+const Content = lazy(() => importMDX("./buttongroup.mdx"));
 
 export default function ButtonGroupPlayground() {
   return (
     <div>
       <Playground />
+      <Suspense fallback={<div>Loading...</div>}>
+        <PropDrawer>
+          <Content />
+        </PropDrawer>
+      </Suspense>
     </div>
   );
 }