feat(code): add code tab content to modal

src/components/ComponentDemo/KnobContainer.js

@@ -242,7 +242,7 @@ const KnobContainer = ({ knobs, code, setCode, initialCode, variantId }) => {
     }
 
     knobs[component].forEach((knob) => {
-      if (fullComponent.props[knob].type) {
+      if (fullComponent.props[knob]?.type) {
         requestedProps[knob] = fullComponent.props[knob];
       } else {
         console.error(

src/components/ModalStateManager/ModalStateManager.js

@@ -0,0 +1,35 @@
+import PropTypes from 'prop-types';
+import React, { useState } from 'react';
+import ReactDOM from 'react-dom';
+
+/**
+ * Simple state manager for modals.
+ */
+const ModalStateManager = ({
+  renderLauncher: LauncherContent,
+  children: ModalContent,
+}) => {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      {!ModalContent || typeof document === 'undefined'
+        ? null
+        : ReactDOM.createPortal(
+            <ModalContent open={open} setOpen={setOpen} />,
+            document.body
+          )}
+      {LauncherContent && <LauncherContent open={open} setOpen={setOpen} />}
+    </>
+  );
+};
+
+ModalStateManager.propTypes = {
+  children: PropTypes.elementType,
+
+  /**
+   * The component to render the launcher UI.
+   */
+  renderLauncher: PropTypes.elementType,
+};
+
+export default ModalStateManager;

src/components/ModalStateManager/index.js

@@ -0,0 +1 @@
+export { default } from './ModalStateManager';