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") {