add stackblitz example

Author: KurtGokhan

package-lock.json

@@ -18,6 +18,7 @@
   },
   "scripts": {
     "start": "npm run start --workspace=tanstack-query-builder-example-vite",
+    "docs": "npm run start --workspace=tanstack-query-builder-website",
     "test": "vitest",
     "lint": "biome lint",
     "format": "biome format",

package.json

@@ -10,3 +10,5 @@ title: Introduction
 ```bash npm2yarn
 npm install tanstack-query-builder
 ```
+
+<Stackblitz embedId="KurtGokhan/tanstack-query-builder/tree/main/examples/vite" />

website/docs/index.mdx

@@ -1,5 +1,5 @@
 {
-  "name": "website",
+  "name": "tanstack-query-builder-website",
   "version": "0.9.2",
   "private": true,
   "scripts": {
@@ -19,6 +19,7 @@
     "@docusaurus/preset-classic": "3.7.0",
     "@docusaurus/remark-plugin-npm2yarn": "^3.7.0",
     "@mdx-js/react": "^3.1.0",
+    "@stackblitz/sdk": "^1.11.0",
     "clsx": "^2.1.1",
     "prism-react-renderer": "^2.4.1",
     "react": "^19.0.0",

website/package.json

@@ -11,7 +11,7 @@ interface Props {
   bodyStyle?: CSSProperties;
 }
 
-export default function BrowserWindow({ children, minHeight, url = 'http://localhost:3000', style, bodyStyle }: Props) {
+export function BrowserWindow({ children, minHeight, url = 'http://localhost:3000', style, bodyStyle }: Props) {
   return (
     <div className={styles.browserWindow} style={{ ...style, minHeight }}>
       <div className={styles.browserWindowHeader}>

website/src/components/BrowserWindow/index.tsx

@@ -0,0 +1,64 @@
+import StackBlitzSDK, { EmbedOptions } from '@stackblitz/sdk';
+import { useCallback } from 'react';
+import React from 'react';
+
+interface Props {
+  embedId: 'string';
+}
+
+const cache: Record<string, HTMLDivElement> = {};
+
+const elRoot = document.createElement('div');
+elRoot.style.visibility = 'hidden';
+elRoot.style.pointerEvents = 'none';
+elRoot.style.width = '0px';
+elRoot.style.height = '0px';
+elRoot.style.position = 'absolute';
+
+document.body.appendChild(elRoot);
+
+function getStackblitzEl(projectId: string) {
+  const existing = cache[projectId];
+  if (existing) return existing;
+
+  const elParent = document.createElement('div');
+  elParent.style.display = 'contents';
+  elRoot.appendChild(elParent);
+
+  const el = document.createElement('div');
+  elParent.appendChild(el);
+
+  const opts: EmbedOptions = {
+    forceEmbedLayout: true,
+    view: 'preview',
+    height: '100%',
+    hideNavigation: true,
+    hideExplorer: true,
+  };
+
+  const isGithub = projectId.startsWith('KurtGokhan');
+  const promise = isGithub ? StackBlitzSDK.embedGithubProject(el, projectId, opts) : StackBlitzSDK.embedProjectId(el, projectId, opts);
+
+  promise.then(() => {
+    const iframe = elParent.querySelector('iframe');
+    // if (!iframe) return;
+    // iframe.style.width = '100%';
+    // iframe.style.height = '100%';
+  });
+
+  cache[projectId] = elParent;
+  return elParent;
+}
+
+export function Stackblitz({ embedId }: Props) {
+  const el = getStackblitzEl(embedId);
+
+  const ref = useCallback(
+    (node) => {
+      node?.appendChild(el);
+    },
+    [el],
+  );
+
+  return <div ref={ref} key={embedId} style={{ height: 600 }} />;
+}

website/src/components/Stackblitz/index.tsx

@@ -1,7 +1,9 @@
-import BrowserWindow from '@site/src/components/BrowserWindow';
+import { BrowserWindow } from '@site/src/components/BrowserWindow';
+import { Stackblitz } from '@site/src/components/Stackblitz';
 import MDXComponents from '@theme-original/MDXComponents';
 
 export default {
   ...MDXComponents,
   BrowserWindow,
+  Stackblitz,
 };