@xyd-js/storybook 0.0.1-xyd.0 → 0.0.1-xyd.10

package/.storybook/main.ts

@@ -1,8 +1,13 @@
+import {join, dirname} from "path";
+
+import React from "react";
 import type {StorybookConfig} from "@storybook/react-vite";
 import remarkGfm from 'remark-gfm';
+import remarkDirective from 'remark-directive';
 import {visit} from 'unist-util-visit';
-
-import {join, dirname} from "path";
+import {unified} from 'unified';
+import remarkParse from 'remark-parse';
+import remarkMdx from 'remark-mdx';
 
 /**
  * This function is used to resolve the absolute path of a package.
@@ -26,6 +31,167 @@ function remarkInjectMeta() { // TODO: move to @xyd-js/content
     };
 }
 
+// TODO: get from @xyd-js/content/md but curently error when importing a `content` lib: Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main defined in /Users/zdunecki/Code/livesession/xyd/node_modules/.pnpm/estree-util-build-jsx@3.0.1/node_modules/estree-walker/package.json
+export function mdCodeGroup() {
+    return (tree: any) => {
+        visit(tree, 'containerDirective', (node) => {
+            if (node.name !== 'code-group') return;
+
+            const description = node.attributes?.title || '';
+            const codeblocks = [];
+
+            for (const child of node.children) {
+                if (child.type === 'code') {
+                    const meta = child.meta || '';
+                    const value = child.value || '';
+                    const lang = child.lang || '';
+
+                    codeblocks.push({value, lang, meta});
+                }
+            }
+
+            // Add metadata to the node
+            node.data = {
+                hName: 'DirectiveCodeSample',
+                hProperties: {
+                    description,
+                    codeblocks: JSON.stringify(codeblocks),
+                },
+            };
+
+            node.children = [];
+        });
+    };
+}
+
+function toPascalCase(str) {
+    return str
+        .replace(/([a-z])([A-Z])/g, "$1 $2") // Add space before capital letters
+        .replace(/[^a-zA-Z0-9]/g, " ") // Replace special characters with space
+        .split(" ") // Split by space
+        .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()) // Capitalize first letter
+        .join("");
+}
+
+
+const supportedDirectives = {
+    Details: true,
+    details: true,
+    TableV2: true
+}
+
+const tableComponents: { [key: string]: boolean } = {
+    TableV2: true
+}
+
+const parseMarkdown = (content: string) => {
+    const ast = unified()
+        .use(remarkParse)
+        .use(remarkMdx)
+        .parse(content);
+    return ast.children;
+};
+
+export function remarkDirectiveWithMarkdown() {
+    return (tree) => {
+        visit(tree, 'containerDirective', (node) => {
+            if (!supportedDirectives[node.name]) {
+                return;
+            }
+
+            const isTable = tableComponents[node.name];
+            const attributes = [];
+
+            // TODO: MORE GENERIC CUZ IT HAS IMPL DETAILS OF TABLE
+            if (isTable) {
+                // TODO: support tsx tables like: [<>`Promise<Reference[]>`</>] ?
+                const tableData = JSON.parse(node.children[0].value);
+                const [header, ...rows] = tableData;
+
+                const jsxNode = {
+                    type: 'mdxJsxFlowElement',
+                    name: 'TableV2',
+                    attributes: [],
+                    children: [
+                        {
+                            type: 'mdxJsxFlowElement',
+                            name: 'TableV2.Head',
+                            attributes: [],
+                            children: [
+                                {
+                                    type: 'mdxJsxFlowElement',
+                                    name: 'TableV2.Tr',
+                                    attributes: [],
+                                    children: header.map((cell: string) => ({
+                                        type: 'mdxJsxFlowElement',
+                                        name: 'TableV2.Th',
+                                        attributes: [],
+                                        children: parseMarkdown(cell)
+                                    }))
+                                }
+                            ]
+                        },
+                        ...rows.map((row: string[]) => ({
+                            type: 'mdxJsxFlowElement',
+                            name: 'TableV2.Tr',
+                            attributes: [],
+                            children: row.map((cell: string) => ({
+                                type: 'mdxJsxFlowElement',
+                                name: 'TableV2.Td',
+                                attributes: [],
+                                children: parseMarkdown(cell)
+                            }))
+                        }))
+                    ]
+                };
+
+                Object.assign(node, jsxNode);
+                return;
+            }
+
+            if (node.attributes) {
+                const jsxProps = []
+
+                for (let [key, value] of Object.entries(node.attributes)) {
+                    if (typeof value === "string" && !value.startsWith("<")) {
+                        attributes.push({
+                            type: 'mdxJsxAttribute',
+                            name: key,
+                            value: value
+                        });
+                    } else {
+                        jsxProps.push(`${key}={${value}}`)
+
+                    }
+                }
+
+                const mdxString = `<Fragment ${jsxProps.join(" ")}></Fragment>`
+
+                const ast = unified()
+                    .use(remarkParse)
+                    .use(remarkMdx)
+                    .parse(mdxString);
+
+                if (ast && ast.children[0] && ast.children[0].attributes) {
+                    for (const attr of ast.children[0].attributes) {
+                        // TODO: support markdown also e.g Hello `World` - currently it mus be: Hello <code>World</code>
+                        attributes.push(attr);
+                    }
+                }
+            }
+
+            const jsxNode = {
+                type: 'mdxJsxFlowElement',
+                name: toPascalCase(node.name),
+                attributes: attributes,
+                children: node.children
+            };
+
+            Object.assign(node, jsxNode);
+        });
+    };
+}
+
 const config: StorybookConfig = {
     stories: ["../src/docs/**/*.mdx", "../src/docs/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
     addons: [
@@ -41,8 +207,11 @@ const config: StorybookConfig = {
                     mdxCompileOptions: {
                         remarkPlugins: [
                             remarkGfm,
-                            remarkInjectMeta
-                        ],
+                            remarkDirective,
+                            mdCodeGroup,
+                            remarkDirectiveWithMarkdown,
+                            // mdComponentDirective
+                        ]
                     },
                 },
             },

package/.storybook/preview.ts

@@ -1,7 +1,6 @@
 import type {Preview} from "@storybook/react";
 
-import "@xyd-js/atlas/index.css"
-import "@xyd-js/fable-wiki/theme.css"
+import "@xyd-js/theme-poetry/index.css" // TODO: in the future configurable themes via UI?
 
 import './styles.css'
 

package/CHANGELOG.md

@@ -1,5 +1,110 @@
 # @xyd-js/storybook
 
+## 0.0.1-xyd.10
+
+### Patch Changes
+
+- Updated dependencies
+  - @xyd-js/atlas@0.1.0-xyd.16
+  - @xyd-js/components@0.1.0-xyd.11
+  - @xyd-js/content@0.1.0-xyd.14
+  - @xyd-js/theme-poetry@0.1.0-xyd.27
+  - @xyd-js/ui@0.1.0-xyd.16
+  - @xyd-js/fable-wiki@0.1.0-xyd.14
+
+## 0.0.1-xyd.9
+
+### Patch Changes
+
+- Updated dependencies
+  - @xyd-js/atlas@0.1.0-xyd.15
+  - @xyd-js/components@0.1.0-xyd.10
+  - @xyd-js/content@0.1.0-xyd.13
+  - @xyd-js/theme-poetry@0.1.0-xyd.26
+  - @xyd-js/ui@0.1.0-xyd.15
+  - @xyd-js/fable-wiki@0.1.0-xyd.13
+
+## 0.0.1-xyd.8
+
+### Patch Changes
+
+- Updated dependencies
+  - @xyd-js/atlas@0.1.0-xyd.14
+  - @xyd-js/components@0.1.0-xyd.9
+  - @xyd-js/content@0.1.0-xyd.12
+  - @xyd-js/theme-poetry@0.1.0-xyd.25
+  - @xyd-js/ui@0.1.0-xyd.14
+  - @xyd-js/fable-wiki@0.1.0-xyd.12
+
+## 0.0.1-xyd.7
+
+### Patch Changes
+
+- Updated dependencies
+  - @xyd-js/atlas@0.1.0-xyd.13
+  - @xyd-js/components@0.1.0-xyd.8
+  - @xyd-js/content@0.1.0-xyd.11
+  - @xyd-js/theme-poetry@0.1.0-xyd.24
+  - @xyd-js/ui@0.1.0-xyd.13
+  - @xyd-js/fable-wiki@0.1.0-xyd.11
+
+## 0.0.1-xyd.6
+
+### Patch Changes
+
+- @xyd-js/fable-wiki@0.1.0-xyd.10
+
+## 0.0.1-xyd.5
+
+### Patch Changes
+
+- Updated dependencies
+  - @xyd-js/atlas@0.1.0-xyd.12
+  - @xyd-js/components@0.1.0-xyd.7
+  - @xyd-js/content@0.1.0-xyd.10
+  - @xyd-js/ui@0.1.0-xyd.12
+  - @xyd-js/fable-wiki@0.1.0-xyd.9
+
+## 0.0.1-xyd.4
+
+### Patch Changes
+
+- Updated dependencies
+  - @xyd-js/atlas@0.1.0-xyd.11
+  - @xyd-js/components@0.1.0-xyd.6
+  - @xyd-js/ui@0.1.0-xyd.11
+  - @xyd-js/fable-wiki@0.1.0-xyd.8
+
+## 0.0.1-xyd.3
+
+### Patch Changes
+
+- Updated dependencies
+  - @xyd-js/atlas@0.1.0-xyd.10
+  - @xyd-js/components@0.1.0-xyd.5
+  - @xyd-js/ui@0.1.0-xyd.10
+  - @xyd-js/fable-wiki@0.1.0-xyd.7
+
+## 0.0.1-xyd.2
+
+### Patch Changes
+
+- Updated dependencies
+  - @xyd-js/atlas@0.1.0-xyd.9
+  - @xyd-js/components@0.1.0-xyd.4
+  - @xyd-js/ui@0.1.0-xyd.9
+  - @xyd-js/fable-wiki@0.1.0-xyd.6
+
+## 0.0.1-xyd.1
+
+### Patch Changes
+
+- Updated dependencies
+  - @xyd-js/atlas@0.1.0-xyd.8
+  - @xyd-js/components@0.1.0-xyd.3
+  - @xyd-js/ui@0.1.0-xyd.8
+  - @xyd-js/fable-wiki@0.1.0-xyd.5
+
 ## 0.0.1-xyd.0
 
 ### Patch Changes

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 xyd
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE. 

package/package.json

@@ -1,17 +1,22 @@
 {
   "name": "@xyd-js/storybook",
-  "version": "0.0.1-xyd.0",
+  "version": "0.0.1-xyd.10",
   "type": "module",
   "dependencies": {
     "@mdx-js/react": "^3.0.1",
     "@mdx-js/rollup": "^3.0.1",
+    "acorn": "^8.14.1",
+    "acorn-jsx": "^5.3.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "rehype-stringify": "^10.0.1",
     "remark-gfm": "^4.0.0",
-    "@xyd-js/components": "0.1.0-xyd.1",
-    "@xyd-js/atlas": "0.1.0-xyd.7",
-    "@xyd-js/fable-wiki": "0.1.0-xyd.4",
-    "@xyd-js/ui": "0.1.0-xyd.7"
+    "@xyd-js/atlas": "0.1.0-xyd.16",
+    "@xyd-js/content": "0.1.0-xyd.14",
+    "@xyd-js/fable-wiki": "0.1.0-xyd.14",
+    "@xyd-js/components": "0.1.0-xyd.11",
+    "@xyd-js/ui": "0.1.0-xyd.16",
+    "@xyd-js/theme-poetry": "0.1.0-xyd.27"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.9.0",

package/src/components/DemoWireframe.tsx

@@ -0,0 +1,237 @@
+import React, {useState} from "react";
+
+import {
+    Breadcrumbs,
+    NavLinks
+} from "@xyd-js/components/writer"
+import {
+    Nav,
+    Toc,
+    SubNav,
+    UISidebar
+} from "@xyd-js/ui"
+
+import {LiveSessionPlatformLogo} from "./logo"
+
+export function DemoNavbar() {
+    return <>
+        <Nav
+            value="api-reference"
+            logo={<LiveSessionPlatformLogo/>}
+            kind="middle"
+        >
+            <Nav.Item value="docs" href="/docs">
+                Docs
+            </Nav.Item>
+            <Nav.Item value="api-reference" href="/api">
+                API Reference
+            </Nav.Item>
+            <Nav.Item value="graphql" href="/graphql">
+                GraphQL
+            </Nav.Item>
+        </Nav>
+    </>
+}
+
+export function DemoSubNav() {
+    return <SubNav title="Apps" value="build">
+        <SubNav.Item value="build" href="/build">
+            Build
+        </SubNav.Item>
+        <SubNav.Item value="design" href="/design">
+            Design
+        </SubNav.Item>
+        <SubNav.Item value="launch" href="/launch">
+            Launch
+        </SubNav.Item>
+    </SubNav>
+}
+
+export function DemoSidebar() {
+    const [isOpen, setIsOpen] = useState(false)
+
+    function onClick() {
+        setIsOpen(!isOpen)
+    }
+
+    const items = new Array(40).fill(0).map((_, i) => <UISidebar.Item key={i} href="#">
+            {`Item ${i}`}
+        </UISidebar.Item>
+    )
+
+    return <UISidebar footerItems={<DemoSidebarFooter/>}>
+        <UISidebar.ItemHeader>
+            GET STARTED
+        </UISidebar.ItemHeader>
+        <UISidebar.Item
+            button
+            active={isOpen}
+            activeTheme="secondary"
+            onClick={onClick}
+        >
+            Root nested
+            <UISidebar.SubTree isOpen={isOpen}>
+                <UISidebar.Item href="#">
+                    Nested A
+                </UISidebar.Item>
+                <UISidebar.Item href="#">
+                    Nested B
+                </UISidebar.Item>
+                <UISidebar.Item button active>
+                    Nested root C
+                    <UISidebar.SubTree>
+                        <UISidebar.Item href="#">
+                            Nested C.A
+                        </UISidebar.Item>
+                        <UISidebar.Item href="#">
+                            Nested C.B
+                        </UISidebar.Item>
+                    </UISidebar.SubTree>
+                </UISidebar.Item>
+            </UISidebar.SubTree>
+        </UISidebar.Item>
+
+        <UISidebar.ItemHeader>
+            APIS
+        </UISidebar.ItemHeader>
+        <UISidebar.Item href="#">
+            Authentication
+        </UISidebar.Item>
+
+        <UISidebar.Item href="#">
+            Making requests
+        </UISidebar.Item>
+
+        {items}
+    </UISidebar>
+}
+
+export function DemoSidebarFooter() {
+    return <>
+        <UISidebar.FooterItem
+            href="#"
+            icon={
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                >
+                    <path
+                        fillRule="evenodd"
+                        d="M14.447 7.106a1 1 0 0 1 .447 1.341l-4 8a1 1 0 1 1-1.788-.894l4-8a1 1 0 0 1 1.341-.447ZM6.6 7.2a1 1 0 0 1 .2 1.4L4.25 12l2.55 3.4a1 1 0 0 1-1.6 1.2l-3-4a1 1 0 0 1 0-1.2l3-4a1 1 0 0 1 1.4-.2Zm10.8 0a1 1 0 0 1 1.4.2l3 4a1 1 0 0 1 0 1.2l-3 4a1 1 0 0 1-1.6-1.2l2.55-3.4-2.55-3.4a1 1 0 0 1 .2-1.4Z"
+                        clipRule="evenodd"
+                    />
+                </svg>
+            }
+        >
+            Cookbook
+        </UISidebar.FooterItem>
+        <UISidebar.FooterItem
+            href="#"
+            icon={
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="currentColor"
+                    viewBox="0 0 24 24"
+                >
+                    <path
+                        fillRule="evenodd"
+                        d="M10.5 8.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM12 5a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7ZM3 9.5a1 1 0 1 1 2 0 1 1 0 0 1-2 0Zm1-3a3 3 0 1 0 0 6 3 3 0 0 0 0-6Zm16 2a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm-3 1a3 3 0 1 1 6 0 3 3 0 0 1-6 0ZM8 18c0-.974.438-1.684 1.142-2.185C9.876 15.293 10.911 15 12 15c1.09 0 2.124.293 2.858.815.704.5 1.142 1.21 1.142 2.185a1 1 0 1 0 2 0c0-1.692-.812-2.982-1.983-3.815C14.876 13.373 13.411 13 12 13c-1.41 0-2.876.373-4.017 1.185C6.812 15.018 6 16.308 6 18a1 1 0 1 0 2 0Zm-3.016-3.675a1 1 0 0 1-.809 1.16C2.79 15.732 2 16.486 2 17.5a1 1 0 1 1-2 0c0-2.41 1.978-3.655 3.825-3.985a1 1 0 0 1 1.16.81Zm14.84 1.16a1 1 0 1 1 .351-1.97C22.022 13.845 24 15.09 24 17.5a1 1 0 1 1-2 0c0-1.014-.79-1.768-2.175-2.015Z"
+                        clipRule="evenodd"
+                    />
+                </svg>
+            }
+        >
+            Community
+        </UISidebar.FooterItem>
+        <UISidebar.FooterItem
+            href="#"
+            icon={
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+                     fill="none">
+                    <path fill-rule="evenodd" clip-rule="evenodd"
+                          d="M3.78163 3.28449C3.8768 2.96725 4.16879 2.75 4.5 2.75H19.5C19.8312 2.75 20.1232 2.96725 20.2184 3.28449L21.7184 8.28449C21.7393 8.3544 21.75 8.42701 21.75 8.5C21.75 10.5711 20.0711 12.25 18 12.25C16.7733 12.25 15.6842 11.661 15 10.7504C14.3158 11.661 13.2267 12.25 12 12.25C10.7733 12.25 9.68417 11.661 9 10.7504C8.31583 11.661 7.2267 12.25 6 12.25C3.92893 12.25 2.25 10.5711 2.25 8.5C2.25 8.42701 2.26066 8.3544 2.28163 8.28449L3.78163 3.28449ZM9.75 8.5C9.75 9.74264 10.7574 10.75 12 10.75C13.2426 10.75 14.25 9.74264 14.25 8.5C14.25 8.08579 14.5858 7.75 15 7.75C15.4142 7.75 15.75 8.08579 15.75 8.5C15.75 9.74264 16.7574 10.75 18 10.75C19.2083 10.75 20.1942 9.79754 20.2477 8.60244L18.942 4.25H5.05802L3.75229 8.60244C3.80584 9.79753 4.79169 10.75 6 10.75C7.24264 10.75 8.25 9.74264 8.25 8.5C8.25 8.08579 8.58579 7.75 9 7.75C9.41421 7.75 9.75 8.08579 9.75 8.5Z"
+                    />
+                    <path fill-rule="evenodd" clip-rule="evenodd"
+                          d="M4 10.25C4.41421 10.25 4.75 10.5858 4.75 11V19.75H6.5C6.91421 19.75 7.25 20.0858 7.25 20.5C7.25 20.9142 6.91421 21.25 6.5 21.25H4C3.58579 21.25 3.25 20.9142 3.25 20.5V11C3.25 10.5858 3.58579 10.25 4 10.25ZM20 10.25C20.4142 10.25 20.75 10.5858 20.75 11V20.5C20.75 20.9142 20.4142 21.25 20 21.25H10.5C10.0858 21.25 9.75 20.9142 9.75 20.5C9.75 20.0858 10.0858 19.75 10.5 19.75H19.25V11C19.25 10.5858 19.5858 10.25 20 10.25Z"
+                    />
+                    <path
+                        d="M12.003 19C11.31 18.9996 10.6384 18.7598 10.102 18.3213C9.56564 17.8829 9.19745 17.2726 9.05983 16.594C8.92222 15.9154 9.02364 15.2101 9.34693 14.5976C9.67022 13.9852 10.1955 13.5032 10.8337 13.2333C11.5673 12.9262 12.393 12.9221 13.1296 13.2222C13.8661 13.5222 14.4536 14.1018 14.7631 14.8338C15.0727 15.5659 15.0791 16.3907 14.7808 17.1274C14.4827 17.8642 13.9042 18.4527 13.1724 18.7641C12.8025 18.9205 12.4047 19.0007 12.003 19ZM11.1458 14.7215C11.1124 14.7215 11.0803 14.7348 11.0567 14.7584C11.0331 14.782 11.0198 14.8141 11.0198 14.8475V17.1923C11.0198 17.2258 11.0331 17.2578 11.0567 17.2814C11.0803 17.305 11.1124 17.3183 11.1458 17.3183C11.1671 17.3183 11.188 17.3128 11.2065 17.3024L13.3399 16.13C13.3597 16.1192 13.3761 16.1032 13.3876 16.0838C13.3991 16.0644 13.4052 16.0423 13.4052 16.0197C13.4052 15.9972 13.3991 15.9751 13.3876 15.9557C13.3761 15.9362 13.3597 15.9203 13.3399 15.9094L11.2063 14.7373C11.1879 14.727 11.1671 14.7215 11.1458 14.7215Z"
+                    />
+                </svg>
+            }
+        >
+            Marketplace
+        </UISidebar.FooterItem>
+        <UISidebar.FooterItem
+            href="#"
+            icon={
+                <svg
+                    viewBox="0 0 15 15"
+                    xmlns="http://www.w3.org/2000/svg"
+                >
+                    <path
+                        d="M7.28856 0.796908C7.42258 0.734364 7.57742 0.734364 7.71144 0.796908L13.7114 3.59691C13.8875 3.67906 14 3.85574 14 4.05V10.95C14 11.1443 13.8875 11.3209 13.7114 11.4031L7.71144 14.2031C7.57742 14.2656 7.42258 14.2656 7.28856 14.2031L1.28856 11.4031C1.11252 11.3209 1 11.1443 1 10.95V4.05C1 3.85574 1.11252 3.67906 1.28856 3.59691L7.28856 0.796908ZM2 4.80578L7 6.93078V12.9649L2 10.6316V4.80578ZM8 12.9649L13 10.6316V4.80578L8 6.93078V12.9649ZM7.5 6.05672L12.2719 4.02866L7.5 1.80176L2.72809 4.02866L7.5 6.05672Z"
+                        fill="currentColor"
+                        fillRule="evenodd"
+                        clipRule="evenodd"
+                    />
+                </svg>
+            }
+        >
+            SDKs
+        </UISidebar.FooterItem>
+    </>
+}
+
+
+export function DemoContent({children, breadcrumbs = true}: { children?: React.ReactNode, breadcrumbs?: boolean }) {
+    return <>
+        {breadcrumbs && <Breadcrumbs
+            items={[
+                {
+                    title: "APIs",
+                    href: "/apis"
+                },
+                {
+                    title: "GraphQL API",
+                    href: "/apis/graphql"
+                }
+            ]}
+        />}
+
+        <div style={{
+            display: "flex",
+            flexDirection: "column",
+            gap: "24px"
+        }}>
+            {children}
+        </div>
+
+        <NavLinks
+            prev={{
+                title: "Prev",
+                href: "/prev"
+            }}
+            next={{
+                title: "Next",
+                href: "/next"
+            }}
+        />
+    </>
+}
+
+export function DemoTOC() {
+    return <Toc defaultValue="quickstart">
+        <Toc.Item value="quickstart">
+            Quickstart
+        </Toc.Item>
+        <Toc.Item value="api-features">
+            API Features
+        </Toc.Item>
+        <Toc.Item value="example-use-cases">
+            Example Use Cases
+        </Toc.Item>
+    </Toc>
+}
+
+