Add open in Stackblitz in the documentation (#564)

gsoft-inc · Jan 2, 2025 · 672cb06 · 672cb06
2 parents 7daa59c + d09a413
commit 672cb06
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 9 deletions.
diff --git a/apps/docs/app/playground/headings-link/page.tsx b/apps/docs/app/playground/headings-link/page.tsx
@@ -1,8 +1,8 @@
-import { allPages } from "contentlayer/generated";
+import getSectionLinks from "@/app/lib/getSectionLinks";
+import Aside from "@/app/ui/layout/aside/Aside.tsx";
 import Mdx from "@/components/mdx/Mdx";
+import { allPages } from "contentlayer/generated";
 import { notFound } from "next/navigation";
-import Aside from "@/app/ui/layout/aside/Aside.tsx";
-import getSectionLinks from "@/app/lib/getSectionLinks";
 
 export default function HeadingsLinkPage() {
     const page = allPages.find(playgroundPage => playgroundPage._id === "pages/playground-headings-links.mdx");
@@ -13,13 +13,15 @@ export default function HeadingsLinkPage() {
 
     const sectionLinks = getSectionLinks(page);
 
+    const { _id, body: { code } } = page;
+
     return (
         <div className="hd-wrapper hd-flex">
             <div className="hd-container">
                 <Aside title="On this page" links={sectionLinks} />
                 <main>
-                    <article className="hd-content" key={page._id}>
-                        {page.body && <Mdx code={page.body.code} />}
+                    <article className="hd-content" key={_id}>
+                        <Mdx code={code} />
                     </article>
                 </main>
             </div>

diff --git a/apps/docs/app/ui/components/componentExample/ComponentExample.tsx b/apps/docs/app/ui/components/componentExample/ComponentExample.tsx
@@ -1,16 +1,17 @@
 "use client";
 
-import { memo, useState, useEffect, type ReactNode } from "react";
 import clsx from "clsx";
+import { memo, useEffect, useState, type ReactNode } from "react";
 
-import { CodeIcon } from "@/components/icon";
+import { CodeIcon, Icon, StackblitzIcon } from "@/components/icon";
 import { ToggleButton } from "@/components/toggleButton/ToggleButton.tsx";
 import { useToggle } from "@/hooks/useToggle.ts";
 
 import ComponentPreviewWrapper from "./ComponentPreviewWrapper.tsx";
 
-import "./componentExample.css";
 import ComponentSkeleton from "@/app/ui/components/componentExample/ComponentSkeleton.tsx";
+import LinkButton from "@/components/button/LinkButton.tsx";
+import "./componentExample.css";
 
 interface CommonProps {
     src: string;
@@ -78,13 +79,21 @@ const ComponentExample = memo(({
         );
     };
 
+    const openInStackblitzButton = (
+        <LinkButton variant="secondary" size="sm" href="https://stackblitz.com/edit/hopper-sandbox?file=src%2FComponent.tsx" target="_blank">
+            Open in Stackblitz
+            <Icon src={StackblitzIcon} slot="end-icon" />
+        </LinkButton>
+    );
+
     const renderPreviewComponent = () => {
         if (!showPreviewComponent) {
             return null;
         }
 
         return (
             <ComponentPreviewWrapper
+                openInStackblitzButton={openInStackblitzButton}
                 preview={(type === "preview" || type === "both") ? (props as PreviewProps | BothProps).preview : undefined}
                 toggleButton={renderToggleButton()}
             />

diff --git a/apps/docs/app/ui/components/componentExample/ComponentPreviewWrapper.tsx b/apps/docs/app/ui/components/componentExample/ComponentPreviewWrapper.tsx
@@ -9,12 +9,13 @@ import { HopperProvider } from "@hopper-ui/components";
 import "./componentPreviewWrapper.css";
 
 interface ComponentPreviewWrapperProps {
+    openInStackblitzButton?: ReactNode;
     preview?: ReactNode;
     toggleButton?: ReactNode;
     minHeight?: string;
 }
 
-const ComponentPreviewWrapper = memo(({ preview, toggleButton, minHeight = "13rem" }: ComponentPreviewWrapperProps) => {
+const ComponentPreviewWrapper = memo(({ openInStackblitzButton, preview, toggleButton, minHeight = "13rem" }: ComponentPreviewWrapperProps) => {
     const { colorMode = "light" } = useContext(ThemeContext);
     const [localColorMode, setLocalColorMode] = useState(colorMode);
 
@@ -38,6 +39,7 @@ const ComponentPreviewWrapper = memo(({ preview, toggleButton, minHeight = "13re
             style={{ minHeight: minHeight }}
         >
             <div className="hd-component-preview-wrapper__actions">
+                {openInStackblitzButton}
                 {toggleButton}
                 <ThemeSwitch className="hd-component-preview-wrapper__action"
                     onChange={toggleTheme}

diff --git a/apps/docs/components/button/Button.tsx b/apps/docs/components/button/Button.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { IconContext } from "@/components/icon/IconContext.ts";
 import clsx from "clsx";
 import { Provider, Button as RACButton, type ButtonProps as RACButtonProps } from "react-aria-components";

diff --git a/apps/docs/components/icon/assets/stackblitz.svg b/apps/docs/components/icon/assets/stackblitz.svg
diff --git a/apps/docs/components/icon/index.tsx b/apps/docs/components/icon/index.tsx
@@ -19,6 +19,7 @@ import NpmIcon from "./assets/npm.svg";
 import ProductMenuIcon from "./assets/product-menu.svg";
 import RightAngleIcon from "./assets/right-angle.svg";
 import SelectArrowIcon from "./assets/select-arrow.svg";
+import StackblitzIcon from "./assets/stackblitz.svg";
 import TokenIcon from "./assets/tokens.svg";
 import TypescriptIcon from "./assets/typescript.svg";
 import WaiAriaIcon from "./assets/wai-aria.svg";
@@ -34,5 +35,6 @@ export {
     GithubIcon, Icon, IconProps, InfoIcon, InternationalIcon,
     LineHeightIcon,
     MarginIcon, MessageIcon, NpmIcon, ProductMenuIcon, RightAngleIcon, SelectArrowIcon,
+    StackblitzIcon,
     TokenIcon, TypescriptIcon, WaiAriaIcon, WarningIcon
 };