fix(openCSB): pass children to buttons

sandpack-react/src/PrivatePackage.stories.tsx

@@ -10,19 +10,19 @@ export const Basic: React.FC = () => {
   return (
     <div style={{ width: 800, margin: "auto" }}>
       <Sandpack
-        //         customSetup={{
-        //           dependencies: { "@codesandbox/test-package": "latest" },
-        //         }}
-        //         files={{
-        //           "App.js": `import { Button } from "@codesandbox/test-package";
+        customSetup={{
+          dependencies: { "@codesandbox/test-package": "latest" },
+        }}
+        files={{
+          "App.js": `import { Button } from "@codesandbox/test-package";
 
-        // export default function App() {
-        //   return <Button>Hello World</Button>
-        // }`,
-        //         }}
+export default function App() {
+  return <Button>Hello World</Button>
+}`,
+        }}
         // options={{ bundlerURL: `http://localhost:3000` }}
-        options={{ bundlerURL: `https://2-1-0-sandpack.codesandbox.stream/` }}
-        teamId="6756547b-12fb-465e-82c8-b38a981f1f67"
+        // options={{ bundlerURL: `https://2-1-0-sandpack.codesandbox.stream/` }}
+        teamId="642af90c-4717-4730-bad3-e4c1e37ca5e2"
         template="react"
       />
     </div>

sandpack-react/src/components/common/OpenInCodeSandboxButton/UnstyledOpenInCodeSandboxButton.tsx

@@ -45,7 +45,7 @@ const getFileParameters = (
 
 export const UnstyledOpenInCodeSandboxButton: React.FC<
   React.HtmlHTMLAttributes<unknown>
-> = ({ children, ...props }) => {
+> = (props) => {
   const { sandpack } = useSandpack();
 
   if (sandpack.exportOptions) {

sandpack-react/src/contexts/utils/useFiles.test.ts

@@ -7,7 +7,7 @@ import { VANILLA_TEMPLATE } from "../../templates";
 import { getSandpackStateFromProps } from "../../utils/sandpackUtils";
 
 import { useFiles } from "./useFiles";
-import {SandpackBundlerFile} from "@codesandbox/sandpack-client/src";
+import { SandpackBundlerFile } from "@codesandbox/sandpack-client/src";
 
 describe(useFiles, () => {
   it("should returns an initial state, which is the default template", () => {
@@ -127,24 +127,26 @@ describe(useFiles, () => {
     expect(result.current[0].files["/index.js"]).toEqual({ code: `Baz` });
   });
   it("doesn't override the activeFile's metadata", () => {
-    const {result} = renderHook(() => useFiles({
-      template: "react",
-      files: {
-        "/App.js": {
-          code: "export default function App() { return <h1>Hello world</h1>}",
-          readOnly: true,
-          someOtherMetadata: "foo"
-        } as SandpackBundlerFile
-      }
-    }));
+    const { result } = renderHook(() =>
+      useFiles({
+        template: "react",
+        files: {
+          "/App.js": {
+            code: "export default function App() { return <h1>Hello world</h1>}",
+            readOnly: true,
+            someOtherMetadata: "foo",
+          } as SandpackBundlerFile,
+        },
+      })
+    );
 
     act(() => {
       result.current[1].updateFile("/App.js", "console.log(10)");
     });
     expect(result.current[0].files["/App.js"]).toEqual({
-        code: "console.log(10)",
-        readOnly: true,
-        someOtherMetadata: "foo"
+      code: "console.log(10)",
+      readOnly: true,
+      someOtherMetadata: "foo",
     });
-  })
+  });
 });

sandpack-react/src/contexts/utils/useFiles.ts

@@ -78,7 +78,7 @@ export const useFiles: UseFiles = (props) => {
           ...files,
           [pathOrFiles]: {
             ...files[pathOrFiles],
-            code
+            code,
           },
         };
       } else if (typeof pathOrFiles === "object") {