From 4c72b51ea4372da8963f2f095059c3b5f2efaed2 Mon Sep 17 00:00:00 2001
From: Gregory Douglas <gdouglas@palantir.com>
Date: Thu, 16 Jan 2025 10:41:31 -0500
Subject: [PATCH] Try simplified examples

---
 .../docs-theme/src/components/codeExample.tsx | 43 ++++++-------------
 1 file changed, 13 insertions(+), 30 deletions(-)

diff --git a/packages/docs-theme/src/components/codeExample.tsx b/packages/docs-theme/src/components/codeExample.tsx
index 07673d9aec..76fb049aa3 100644
--- 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 />);
-`;