chore: fix useId problem in playroom

The code now exposes the provider and a wrapper div, also allowing for more customization

packages/orbit-components/playroom.config.js

@@ -7,9 +7,14 @@ module.exports = {
   outputPath: "./.playroom",
   frameComponent: "./playroom/FrameComponent.tsx",
   snippets: "./playroom/snippets.ts",
+  scope: "./playroom/scope.ts",
   port: 9000,
   openBrowser: false,
   widths: Object.values(defaultFoundation.breakpoint),
+  defaultVisibleWidths: [
+    defaultFoundation.breakpoint.mediumMobile,
+    defaultFoundation.breakpoint.desktop,
+  ],
   baseUrl: "/",
   webpackConfig: () => ({
     resolve: {
@@ -58,4 +63,12 @@ module.exports = {
       ],
     },
   }),
+  exampleCode: `
+  <OrbitProvider theme={theme} useId={useId}>
+    <div className="bg-white-normal p-300 h-screen">
+      { /* Write your code below this line */ }
+      <Button type="primary">Hello World</Button>
+    </div>
+  </OrbitProvider>
+`,
 };

packages/orbit-components/playroom/FrameComponent.tsx

@@ -1,15 +1,8 @@
 import * as React from "react";
 import "./index.css";
 
-import { OrbitProvider } from "../src";
-import defaultTheme from "../src/defaultTheme";
-
-// Wrap all examples in OrbitProvider for proper theming
 const FrameComponent = ({ children }) => {
-  return (
-    <OrbitProvider theme={defaultTheme} useId={React.useId}>
-      <div style={{ padding: "20px" }}>{children}</div>
-    </OrbitProvider>
-  );
+  return <div id="playroom-frame">{children}</div>;
 };
+
 export default FrameComponent;

packages/orbit-components/playroom/scope.ts

@@ -0,0 +1,12 @@
+import React from "react";
+
+import { useTheme } from "../src";
+
+const useScope = () => {
+  return {
+    useId: React.useId,
+    theme: useTheme(),
+  };
+};
+
+export default useScope;