feat: Add slot for additional buttons (#412)

Co-authored-by: Danilo Woznica <[email protected]>
codesandbox · Mar 16, 2022 · 7a59d18 · 7a59d18
1 parent 3bad60c
commit 7a59d18
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 9 deletions.
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
@@ -22,10 +22,11 @@
 <!-- add "N/A" to the end of each line that's irrelevant to your changes -->
 <!-- to check an item, place an "x" in the box like so: "- [x] Documentation" -->
 
-- [ ] Documentation
-- [ ] Tests
-- [ ] Ready to be merged
-      <!-- In your opinion, is this ready to be merged as soon as it's reviewed? -->
+- [ ] Documentation;
+- [ ] Storybook (if applicable);
+- [ ] Tests;
+- [ ] Ready to be merged;
+
 
 <!-- feel free to add additional comments -->
 <!-- Thank you for contributing! -->
diff --git a/sandpack-react/src/components/Preview/Preview.stories.tsx b/sandpack-react/src/components/Preview/Preview.stories.tsx
@@ -1,9 +1,12 @@
 import type { Story } from "@storybook/react";
 import * as React from "react";
 
-import { SandpackLayout } from "../../common/Layout";
-import { SandpackProvider } from "../../contexts/sandpackContext";
-import { SandpackThemeProvider } from "../../contexts/themeContext";
+import {
+  SandpackCodeEditor,
+  SandpackThemeProvider,
+  SandpackProvider,
+  SandpackLayout,
+} from "../../";
 
 import type { PreviewProps } from "./index";
 import { SandpackPreview } from "./index";
@@ -100,3 +103,22 @@ export const AutoResize: React.FC = () => (
     </SandpackThemeProvider>
   </SandpackProvider>
 );
+
+export const AdditionalButtons: React.FC = () => (
+  <SandpackProvider template="react">
+    <SandpackLayout>
+      <SandpackPreview
+        actionsChildren={
+          <button
+            className="sp-button"
+            style={{ padding: "var(--sp-space-1) var(--sp-space-3)" }}
+            onClick={() => window.alert("Bug reported!")}
+          >
+            Report bug
+          </button>
+        }
+      />
+      <SandpackCodeEditor />
+    </SandpackLayout>
+  </SandpackProvider>
+);
diff --git a/sandpack-react/src/components/Preview/index.tsx b/sandpack-react/src/components/Preview/index.tsx
@@ -1,6 +1,7 @@
 import { useClasser } from "@code-hike/classer";
 import * as React from "react";
 
+import type { SandpackMessage } from "@codesandbox/sandpack-client";
 import { ErrorOverlay } from "../../common/ErrorOverlay";
 import { LoadingOverlay } from "../../common/LoadingOverlay";
 import { OpenInCodeSandboxButton } from "../../common/OpenInCodeSandboxButton";
@@ -32,6 +33,7 @@ export interface PreviewProps {
   showOpenInCodeSandbox?: boolean;
   showRefreshButton?: boolean;
   showSandpackErrorOverlay?: boolean;
+  actionsChildren?: JSX.Element;
 }
 
 export { RefreshButton };
@@ -45,6 +47,7 @@ export const SandpackPreview = ({
   showRefreshButton = true,
   showOpenInCodeSandbox = true,
   showSandpackErrorOverlay = true,
+  actionsChildren = <></>,
   viewportSize = "auto",
   viewportOrientation = "portrait",
 }: PreviewProps): JSX.Element => {
@@ -60,7 +63,7 @@ export const SandpackPreview = ({
     openInCSBRegisteredRef,
     loadingScreenRegisteredRef,
   } = sandpack;
-
+  
   const c = useClasser("sp");
   const clientId = React.useRef<string>(generateRandomId());
   const iframeRef = React.useRef<HTMLIFrameElement | null>(null);
@@ -77,7 +80,7 @@ export const SandpackPreview = ({
 
     registerBundler(iframeElement, clientIdValue);
 
-    const unsubscribe = listen((message) => {
+    const unsubscribe = listen((message: SandpackMessage) => {
       if (message.type === "resize") {
         setComputedAutoHeight(message.height);
       }
@@ -129,6 +132,7 @@ export const SandpackPreview = ({
         {showSandpackErrorOverlay ? <ErrorOverlay /> : null}
 
         <div className={c("preview-actions")}>
+          {actionsChildren}
           {!showNavigator && showRefreshButton && status === "running" ? (
             <RefreshButton clientId={clientId.current} />
           ) : null}

diff --git a/website/docs/docs/advanced-usage/components.md b/website/docs/docs/advanced-usage/components.md
@@ -111,6 +111,45 @@ There's nothing stopping you from rendering multiple previews in the same `Provi
   </SandpackLayout>
 </SandpackProvider>
 
+### Additional buttons
+The `<SandpackPreview />` component also allows you to add additional buttons to the preview area.
+
+```jsx
+<SandpackProvider template="react">
+  <SandpackLayout>
+    <SandpackPreview
+      actionsChildren={
+        <button
+          className="sp-button"
+          style={{ padding: 'var(--sp-space-1) var(--sp-space-3)' }}
+          onClick={() => window.alert('Bug reported!')}
+        >
+          Report bug
+        </button>
+      }
+    />
+    <SandpackCodeEditor />
+  </SandpackLayout>
+</SandpackProvider>
+```
+
+<SandpackProvider template="react">
+  <SandpackLayout>
+    <SandpackPreview
+      actionsChildren={
+        <button
+          className="sp-button"
+          style={{ padding: 'var(--sp-space-1) var(--sp-space-3)' }}
+          onClick={() => window.alert('Bug reported!')}
+        >
+          Report bug
+        </button>
+      }
+    />
+    <SandpackCodeEditor />
+  </SandpackLayout>
+</SandpackProvider>
+
 ## Code Editor
 
 The `SandpackCodeEditor` component renders a wrapper over [`codemirror`](https://github.com/codemirror/codemirror.next), a lightweight code editor we use inside `sandpack`.