Try simplified examples

palantir · Jan 16, 2025 · 4c72b51 · 4c72b51
1 parent 41e2c7c
commit 4c72b51
Showing 1 changed file with 13 additions and 30 deletions.
diff --git a/packages/docs-theme/src/components/codeExample.tsx b/packages/docs-theme/src/components/codeExample.tsx
@@ -2,7 +2,7 @@
  * (c) Copyright 2024 Palantir Technologies Inc. All rights reserved.
  */
 
-import { SandpackCodeEditor, SandpackLayout, SandpackPreview, SandpackProvider } from "@codesandbox/sandpack-react";
+import { Sandpack } from "@codesandbox/sandpack-react";
 import classNames from "classnames";
 import * as React from "react";
 
@@ -13,41 +13,24 @@ export interface CodeExampleProps {
     id: string;
 }
 
+const app = `import { Button } from "@blueprintjs/core";
+import "@blueprintjs/core/lib/css/blueprint.css";
+
+export default function App() {
+    return <Button intent="primary">Hello Sandpack</Button>;
+}`;
+
+const dependencies = {
+    "@blueprintjs/core": "^5.16.1",
+};
+
 export const CodeExample: React.FC<CodeExampleProps> = props => {
     const { children, className, code, id, ...rest } = props;
     const classes = classNames("docs-code-example-frame", className);
 
     return (
         <div className={classes} data-example-id={id} {...rest}>
-            <SandpackProvider
-                template="react-ts"
-                options={{ visibleFiles: ["/App.tsx"] }}
-                customSetup={{
-                    dependencies: {
-                        "@blueprintjs/core": "^5.13.1",
-                    },
-                }}
-                files={{
-                    "/App.tsx": code,
-                    "/index.tsx": index,
-                }}
-            >
-                <SandpackLayout className="layout">
-                    <SandpackCodeEditor className="editor" />
-                    <SandpackPreview className="preview" />
-                </SandpackLayout>
-            </SandpackProvider>
+            <Sandpack template="react-ts" files={{ "/App.tsx": app }} customSetup={{ dependencies }} />;
         </div>
     );
 };
-
-const index = `import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import { FocusStyleManager } from "@blueprintjs/core";
-import App from "./App";
-import React from "react";
-import "@blueprintjs/core/lib/css/blueprint.css";
-FocusStyleManager.onlyShowFocusOnTabs();
-const root = createRoot(document.getElementById("root") as HTMLElement);
-root.render(<App />);
-`;