@xyd-js/apidocs-demo 0.0.0-build

package/app/routes/url.tsx

@@ -0,0 +1,80 @@
+import { useLocation, useNavigate, useNavigation } from "react-router";
+import { useContext, useEffect, useMemo, memo } from "react";
+
+import { Atlas } from "@xyd-js/atlas";
+
+import { UrlContext, useGlobalState } from "~/context";
+import { DOCS_PREFIX } from "~/const";
+import { Spinner } from "gestalt";
+
+export default function Url() {
+    const { actionData: globalActionData } = useGlobalState();
+    const location = useLocation()
+    
+    if (!globalActionData?.references?.length) {
+        return null
+    }
+
+    const findRef = globalActionData?.references?.find(ref => {
+        let canonical = ref.canonical.startsWith("/") ? ref.canonical : `/${ref.canonical}`
+        if (canonical.endsWith("/")) {
+            canonical = canonical.slice(0, -1)
+        }
+        canonical = canonical.startsWith(DOCS_PREFIX) ? canonical : `${DOCS_PREFIX}${canonical}`
+
+        return canonical === location.pathname
+    })
+
+    if (!findRef) {
+        return null
+    }
+
+    const references = [findRef]
+
+    return <AtlasContent canonical={findRef.canonical} references={references} />
+}
+
+const AtlasContent = memo(({ canonical, references }: { canonical: string, references: any[] }) => {
+    const { BaseThemePage } = useContext(UrlContext)
+
+    return (
+        <BaseThemePage>
+            <Loader/>
+            <Atlas
+                kind="primary"
+                references={references}
+            />
+        </BaseThemePage>
+    )
+}, (prevProps, nextProps) => prevProps.canonical === nextProps.canonical)
+
+
+function Loader() {
+    const navigation = useNavigation()
+
+    const loading = navigation.state === "loading"
+
+    if (!loading) {
+        return null
+    }
+    return <div style={{
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        zIndex: 1000,
+        background: "var(--white)"
+    }}>
+        <Spinner
+            accessibilityLabel="Loading..."
+            label="Loading..."
+            show={true}
+        />
+    </div>
+}

package/app/routes.ts

@@ -0,0 +1,12 @@
+import { type RouteConfig, index, layout, route } from "@react-router/dev/routes";
+
+export default [
+  // route("", "./routes/layout.tsx", [
+  //   route("*", "./routes/url.tsx"),
+  // ]),
+  index("./routes/layout.tsx", {id: "index"}),
+  layout("./routes/layout.tsx", [
+    route("/docs/*", "./routes/url.tsx"),
+  ]),
+  route("api/try", "./api/try.ts"),
+] satisfies RouteConfig;

package/app/settings.ts

@@ -0,0 +1,47 @@
+export const SETTINGS = Object.freeze({
+    "theme": {
+        "name": "picasso",
+        "icons": {
+            "library": [
+                {
+                    "name": "lucide",
+                    "default": true
+                },
+                "./icons/iconify.json"
+            ]
+        }
+    },
+    "integrations": {
+        "search": {
+            "orama": true
+        },
+        "apps": {
+            "githubStar": {
+                "title": "Star",
+                "label": "Show your support! Star us on GitHub ⭐️",
+                "href": "https://github.com/livesession/xyd",
+                "dataIcon": "octicon-star",
+                "dataSize": "large",
+                "dataShowCount": true,
+                "ariaLabel": "Star livesession/xyd on GitHub"
+            }
+        }
+    },
+    "navigation": {
+        "header": [],
+        "subheader": [],
+        "sidebar": [
+            {
+                "route": "/docs/api",
+                "pages": [
+                    {
+                        "group": "Endpoints",
+                        "pages": [
+
+                        ]
+                    }
+                ]
+            }
+        ]
+    }
+})

package/app/utils/toUniform.ts

@@ -0,0 +1,123 @@
+import { mapSettingsToProps } from "@xyd-js/framework/hydration"
+import uniform, { pluginNavigation, type OpenAPIReferenceContext, type Reference } from "@xyd-js/uniform"
+import { gqlSchemaToReferences } from "@xyd-js/gql"
+import { deferencedOpenAPI, oapSchemaToReferences } from "@xyd-js/openapi"
+
+import { SETTINGS } from "../settings"
+import { uniformOpenAIMeta } from "../api/pluginOasOpenAPI";
+
+export async function toUniform(
+    prefix: string,
+    example: string,
+    type: string,
+    value: string,
+    currentSettings?: any
+) {
+    let references: Reference[] = []
+
+    if (!type) {
+        const extension = example.split(".").pop()
+        if (extension === "json" || extension === "yaml" || extension === "yml") {
+            type = "openapi"
+        } else if (extension === "graphql" || extension === "gql" || extension === "gqls" || extension === "graphqls") {
+            type = "graphql"
+        } else if (example.startsWith('http://') || example.startsWith('https://')) {
+            try {
+                const response = await fetch(example)
+                const contentType = response.headers.get('content-type')
+
+                if (contentType?.includes('application/json') || contentType?.includes('text/json')) {
+                    type = "openapi"
+                } else if (contentType?.includes('text/yaml') || contentType?.includes('application/x-yaml')) {
+                    type = "openapi"
+                } else if (contentType?.includes('text/plain')) {
+                    // For plain text, we might need to check the content itself
+                    const text = await response.text()
+                    if (text.trim().startsWith('{') || text.trim().startsWith('[')) {
+                        type = "openapi"
+                    } else if (text.includes('---') || text.includes('yaml')) {
+                        type = "openapi"
+                    }
+                }
+            } catch (error) {
+                console.error('Error fetching URL:', error)
+            }
+        }
+    }
+
+    switch (type) {
+        case "openapi": {
+            const openApiSpec = await deferencedOpenAPI(example as string)
+            references = await oapSchemaToReferences(openApiSpec)
+            break
+        }
+
+        case "graphql": {
+            references = await gqlSchemaToReferences(example as string)
+        }
+    }
+
+    const uniformPlugins = [
+        pluginNavigation(JSON.parse(JSON.stringify(SETTINGS)) as any, {
+            urlPrefix: prefix
+        }),
+    ]
+
+    if (value === "openai") {
+        uniformPlugins.push(uniformOpenAIMeta)
+    }
+
+    const uniformData = await uniform(references || [], {
+        plugins: uniformPlugins,
+    })
+
+    if (uniformData?.references) {
+        references = uniformData.references
+    }
+
+    const settings = JSON.parse(JSON.stringify(currentSettings || SETTINGS))
+    const apisidebar = settings?.navigation?.sidebar.find(sidebar => sidebar.route === prefix) || null
+
+    if (uniformData?.out?.sidebar?.length && apisidebar?.pages) {
+        apisidebar.pages[0].pages.push(...uniformData?.out?.sidebar || [])
+    }
+
+    const frontmatter = uniformData?.out?.pageFrontMatter || {}
+
+    for (const ref of references) {
+        const frontmatter = uniformData?.out?.pageFrontMatter || {}
+        let canonical = ref.canonical
+        canonical = canonical.startsWith("/") ? canonical : `/${canonical}`
+        if (canonical.endsWith("/")) {
+            canonical = canonical.slice(0, -1)
+        }
+
+        const meta = frontmatter[`${prefix}${canonical}`] || {}
+        if (!meta) {
+            continue
+        }
+
+        const ctx = ref.context as OpenAPIReferenceContext
+
+        if (ctx.method && ctx.path) {
+            meta.openapi = `#${ctx.method?.toUpperCase()} ${ctx.path}`
+        }
+    }
+
+    const props = await mapSettingsToProps(
+        settings,
+        {},
+        prefix + (references?.[0]?.canonical || ""),
+        frontmatter
+    )
+
+    return {
+        groups: props?.groups || [],
+        settings,
+        example,
+        references,
+        sidebar: uniformData?.out?.sidebar || [],
+        pageFrontMatter: uniformData?.out?.pageFrontMatter || {},
+        exampleType: type
+    }
+}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@xyd-js/apidocs-demo",
+  "type": "module",
+  "version": "0.0.0-build+6952c2c-20250813013245",
+  "dependencies": {
+    "@netlify/vite-plugin-react-router": "^1.0.1",
+    "@primer/primitives": "^10.7.0",
+    "@primer/react": "^37.26.0",
+    "@react-router/node": "^7.7.1",
+    "@react-router/serve": "^7.7.1",
+    "gestalt": "^177.0.0",
+    "isbot": "^5.1.27",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-router": "^7.7.1",
+    "styled-components": "^6.1.18",
+    "@xyd-js/components": "0.0.0-build+6952c2c-20250813013245",
+    "@xyd-js/atlas": "0.0.0-build+6952c2c-20250813013245",
+    "@xyd-js/core": "0.0.0-build+6952c2c-20250813013245",
+    "@xyd-js/framework": "0.0.0-build+6952c2c-20250813013245",
+    "@xyd-js/gql": "0.0.0-build+6952c2c-20250813013245",
+    "@xyd-js/openapi": "0.0.0-build+6952c2c-20250813013245",
+    "@xyd-js/theme-opener": "0.0.0-build+6952c2c-20250813013245",
+    "@xyd-js/theme-cosmo": "0.0.0-build+6952c2c-20250813013245",
+    "@xyd-js/theme-poetry": "0.0.0-build+6952c2c-20250813013245",
+    "@xyd-js/theme-picasso": "0.0.0-build+6952c2c-20250813013245",
+    "@xyd-js/theme-gusto": "0.0.0-build+6952c2c-20250813013245",
+    "@xyd-js/theme-solar": "0.0.0-build+6952c2c-20250813013245",
+    "@xyd-js/themes": "0.0.0-build+6952c2c-20250813013245",
+    "@xyd-js/ui": "0.0.0-build+6952c2c-20250813013245",
+    "@xyd-js/uniform": "0.0.0-build+6952c2c-20250813013245"
+  },
+  "devDependencies": {
+    "@react-router/dev": "^7.7.1",
+    "@tailwindcss/vite": "^4.1.4",
+    "@types/node": "^20",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
+    "tailwindcss": "^4.1.4",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.3",
+    "vite-tsconfig-paths": "^5.1.4"
+  },
+  "scripts": {
+    "build": "react-router build",
+    "dev": "react-router dev",
+    "start": "react-router-serve ./build/server/index.js",
+    "typecheck": "react-router typegen && tsc"
+  }
+}

package/public/favicon.svg

@@ -0,0 +1,10 @@
+<svg width="64" height="18" viewBox="0 0 64 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3_18)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.9447 14.7921H10.6636L14.2428 9.73069L10.8861 4.9901H13.1857L14.9846 7.69901C15.0712 7.84158 15.1577 7.99307 15.2443 8.15347C15.2649 8.1918 15.2854 8.23023 15.3057 8.26877C15.3598 8.37166 15.4048 8.46149 15.4407 8.53824C15.4432 8.54364 15.4458 8.54904 15.4483 8.55446C15.4611 8.51802 15.4751 8.482 15.4904 8.44646C15.5265 8.36139 15.5743 8.26372 15.6337 8.15347C15.7203 7.99307 15.8068 7.84158 15.8934 7.69901L17.6923 4.9901H19.9919L16.6352 9.74852L20.1959 14.7921H17.8963L15.9119 11.8515C15.8254 11.7089 15.7388 11.5485 15.6523 11.3703C15.6317 11.328 15.6113 11.2857 15.5909 11.2434C15.551 11.1606 15.516 11.0873 15.4861 11.0237C15.4734 10.9967 15.4608 10.9696 15.4483 10.9426C15.3988 11.0495 15.3277 11.1921 15.235 11.3703C15.1851 11.4666 15.1319 11.5613 15.0755 11.6542C15.0349 11.7212 14.9922 11.7869 14.9476 11.8515L12.9447 14.7921ZM26.2973 18H24.1831L25.6482 14.2218L21.8464 4.9901H24.0533L26.186 10.5149C26.2523 10.6968 26.3186 10.9065 26.3848 11.1441C26.4058 11.2194 26.426 11.2947 26.4457 11.3703C26.5322 11.703 26.6064 11.9762 26.6682 12.1901C26.7125 11.9988 26.7716 11.76 26.8455 11.4737C26.8544 11.4392 26.8633 11.4047 26.8722 11.3703C26.9588 11.0376 27.0453 10.7525 27.1318 10.5149L29.1347 4.9901H31.2675L26.2973 18ZM33.5671 11.2812V8.51881C33.5671 8.5099 33.5671 8.50099 33.5671 8.49208C33.5713 7.51129 33.8055 6.70741 34.2698 6.08044C34.3394 5.98635 34.4144 5.89603 34.4943 5.8099C35.1125 5.14455 35.9347 4.81188 36.9609 4.81188C37.2432 4.80978 37.5248 4.83873 37.8002 4.89814C38.2353 4.98873 38.637 5.18972 38.9638 5.4802C39.4583 5.92574 39.7056 6.53465 39.7056 7.30693L39.279 6.86139H39.7427L39.687 4.5802V1.78218H41.6899V14.7921H39.7056V12.9208H39.279L39.7056 12.4752C39.7079 12.7346 39.6757 12.9931 39.6097 13.2446C39.5048 13.6495 39.2805 14.0166 38.9638 14.302C38.637 14.5925 38.2353 14.7935 37.8002 14.884C37.5248 14.9435 37.2432 14.9724 36.9609 14.9703C36.5745 14.9741 36.19 14.9196 35.8213 14.8087C35.3085 14.6502 34.8499 14.3611 34.4943 13.9723C33.8762 13.3069 33.5671 12.4099 33.5671 11.2812ZM2.07708 16.7525H0L6.52796 0H8.60504L2.07708 16.7525ZM64 9.92673L55.8771 13.7228V11.905L61.4222 9.35644C61.5629 9.29538 61.7054 9.23815 61.8495 9.18481C61.9412 9.15093 62.0337 9.11902 62.1269 9.08911C62.3475 9.01842 62.5134 8.97113 62.6247 8.94725C62.6257 8.94701 62.6267 8.94677 62.6276 8.94653C62.5884 8.93886 62.5495 8.93007 62.5108 8.92016C62.4265 8.89877 62.3263 8.86931 62.2102 8.83176C62.1731 8.81976 62.136 8.80752 62.0991 8.79505C61.8704 8.71782 61.6447 8.62574 61.4222 8.51881L55.8771 5.9703V4.11683L64 7.91287V9.92673ZM39.687 11.1743V8.60792C39.6886 8.39594 39.6672 8.18438 39.6231 7.97667C39.5654 7.71481 39.4687 7.48414 39.3328 7.28465C39.2758 7.20072 39.2112 7.12171 39.14 7.04852C38.8659 6.76894 38.503 6.58461 38.1083 6.52438C37.956 6.49891 37.8016 6.48645 37.6471 6.48713C37.4323 6.48547 37.218 6.50802 37.0087 6.55432C36.6672 6.62705 36.3545 6.79238 36.1078 7.03069C35.9021 7.23549 35.7516 7.48556 35.6696 7.75907C35.6117 7.94145 35.5751 8.14248 35.5598 8.36216C35.5541 8.44397 35.5514 8.52593 35.5514 8.60792V11.1743C35.55 11.3795 35.5691 11.5844 35.6086 11.7861C35.6563 12.0212 35.734 12.2299 35.8419 12.4122C35.9147 12.5359 36.0041 12.65 36.1078 12.7515C36.3578 12.9928 36.6752 13.1594 37.0217 13.2309C37.2269 13.2751 37.4367 13.2966 37.6471 13.2951C37.8632 13.2969 38.0786 13.2714 38.2878 13.2193C38.6141 13.1386 38.9098 12.9701 39.14 12.7337C39.4759 12.389 39.6571 11.9209 39.6837 11.3295C39.686 11.2778 39.6871 11.226 39.687 11.1743Z" fill="black" stroke="black" stroke-width="0.944882" stroke-linecap="round"/>
+</g>
+<defs>
+<clipPath id="clip0_3_18">
+<rect width="64" height="18" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/react-router.config.ts

@@ -0,0 +1,7 @@
+import type { Config } from "@react-router/dev/config";
+
+export default {
+  // Config options...
+  // Server-side render by default, to enable SPA mode set this to `false`
+  ssr: true,
+} satisfies Config;

package/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "include": [
+    "**/*",
+    "**/.server/**/*",
+    "**/.client/**/*",
+    ".react-router/types/**/*"
+  ],
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "types": ["node", "vite/client"],
+    "target": "ES2022",
+    "module": "ES2022",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "rootDirs": [".", "./.react-router/types"],
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./app/*"]
+    },
+    "esModuleInterop": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true
+  }
+}

package/vite.config.ts

@@ -0,0 +1,39 @@
+import path from "node:path";
+
+import { reactRouter } from "@react-router/dev/vite";
+import { defineConfig,  PluginOption as VitePluginOption } from "vite";
+// import { createServer,, Plugin as VitePlugin } from "vite";
+import tsconfigPaths from "vite-tsconfig-paths";
+import netlifyPlugin from '@netlify/vite-plugin-react-router' 
+
+export default defineConfig({
+  plugins: [
+    reactRouter(),
+    tsconfigPaths(),
+    virtualComponentsPlugin(),
+    netlifyPlugin()
+  ],
+  ssr: {
+    external: ["@xyd-js/framework/hydration", "fs"]
+  }
+});
+
+
+export function virtualComponentsPlugin(): VitePluginOption {
+  return {
+    name: 'xyd-plugin-virtual-components',
+    enforce: 'pre',
+    config: () => {
+      const componentsDist = path.resolve(".", "./node_modules/@xyd-js/components/dist")
+
+      return {
+        resolve: {
+          alias: {
+            // TODO: type-safe virtual-components
+            'virtual-component:Search': path.resolve(componentsDist, "system.js")
+          }
+        }
+      }
+    },
+  }
+}