@xyd-js/apidocs-demo 0.0.1-build.73

package/app/const.ts

@@ -0,0 +1,2 @@
+// TODO: IN THE FUTURE BETTER cuz should also work without prefix
+export const DOCS_PREFIX = "/docs/api"

package/app/context.tsx

@@ -0,0 +1,52 @@
+import { createContext, useContext, useState, useEffect } from 'react';
+import type { Reference } from '@xyd-js/uniform';
+import type { Settings } from '@xyd-js/core';
+import type { FwSidebarItemProps } from '@xyd-js/framework/react';
+import { SETTINGS } from './settings';
+
+interface GlobalStateActionData {
+  references: Reference[];
+  settings: Settings
+  groups: FwSidebarItemProps[]
+  exampleType: "openapi" | "graphql"
+}
+
+// Create a context for the global state
+export const GlobalStateContext = createContext<{
+  actionData: GlobalStateActionData | null;
+  setActionData: (data: GlobalStateActionData) => void;
+}>({
+  actionData: null,
+  setActionData: () => { },
+});
+
+// Create a provider component
+export function GlobalStateProvider({ children }: { children: React.ReactNode }) {
+  const [actionData, setActionData] = useState<any>({
+    references: [],
+    settings: SETTINGS,
+    groups: [],
+    exampleType: ""
+  });
+
+  const handleSetActionData = (data: any) => {
+    setActionData(data);
+  };
+  
+  return (
+    <GlobalStateContext.Provider value={{ actionData, setActionData: handleSetActionData }}>
+      {children}
+    </GlobalStateContext.Provider>
+  );
+}
+
+// Custom hook for using the global state
+export function useGlobalState() {
+  const context = useContext(GlobalStateContext);
+  if (context === undefined) {
+    throw new Error('useGlobalState must be used within a GlobalStateProvider');
+  }
+  return context;
+} 
+
+export const UrlContext = createContext({})

package/app/index.css

@@ -0,0 +1,58 @@
+:root {
+    --xyd-nav-height: 0px !important;
+}
+[data-color-scheme="dark"] {
+    --color-text-default: var(--black);
+}
+/* System Dark Mode Support */
+@media (prefers-color-scheme: dark) {
+    :root:not([data-color-scheme="light"]):not([data-color-scheme="dark"]) {
+        --color-text-default: var(--black);
+    }
+}
+
+/* FIX IMPORANT */
+xyd-layout-primary {
+    [part=sidebar], atlas-apiref-samples {
+        top: 50px !important;
+    }
+}
+
+
+xyd-banner {
+    background: none;
+    border-bottom: 1px solid var(--dark32);
+    justify-content: normal;
+}
+
+xyd-layout-primary > header {
+    display: none
+}
+xyd-layout-primary > main {
+    top: 100px
+}
+
+.banner-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    position: fixed;
+    top: 0;
+    z-index: 5;
+    background: var(--white);
+    border-bottom: 1px solid var(--dark32);
+    padding: 15px;
+
+    .banner-left {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        padding-left: 20px;
+    }
+
+    .banner-right {
+        padding-right: 20px;
+    }
+}

package/app/root.tsx

@@ -0,0 +1,106 @@
+import {
+  isRouteErrorResponse,
+  Links,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+} from "react-router";
+import React, { } from 'react';
+
+import { GlobalStateProvider } from './context';
+import type { Route } from "./+types/root";
+import { SETTINGS } from "./settings";
+
+import gestaltCss from 'gestalt/dist/gestalt.css?url';
+import poetryCss from '@xyd-js/theme-poetry/index.css?url';
+import openerCss from '@xyd-js/theme-opener/index.css?url';
+import cosmoCss from '@xyd-js/theme-cosmo/index.css?url';
+import picassoCss from '@xyd-js/theme-picasso/index.css?url';
+import gustoCss from '@xyd-js/theme-gusto/index.css?url';
+import solarCss from '@xyd-js/theme-solar/index.css?url';
+
+import indexCss from './index.css?url';
+
+export const links: Route.LinksFunction = () => {
+  const links = [
+    { rel: "stylesheet", href: gestaltCss },
+    { rel: "stylesheet", href: indexCss },
+  ]
+
+  switch (SETTINGS?.theme?.name) {
+    case "poetry":
+      links.push({ rel: "stylesheet", href: poetryCss });
+      break;
+    case "opener":
+      links.push({ rel: "stylesheet", href: openerCss });
+      break;
+    case "cosmo":
+      links.push({ rel: "stylesheet", href: cosmoCss });
+      break;
+    case "picasso":
+      links.push({ rel: "stylesheet", href: picassoCss, "data-xyd-theme-default": "true" });
+    case "gusto":
+      links.push({ rel: "stylesheet", href: gustoCss });
+      break;
+    case "solar":
+      links.push({ rel: "stylesheet", href: solarCss });
+      break;
+  }
+
+  return links;
+}
+
+export function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <GlobalStateProvider>
+          {children}
+          <ScrollRestoration />
+          <Scripts />
+        </GlobalStateProvider>
+      </body>
+    </html>
+  );
+}
+
+export default function App() {
+  return <Outlet />;
+}
+
+export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+  let message = "Oops!";
+  let details = "An unexpected error occurred.";
+  let stack: string | undefined;
+
+  if (isRouteErrorResponse(error)) {
+    message = error.status === 404 ? "404" : "Error";
+    details =
+      error.status === 404
+        ? "The requested page could not be found."
+        : error.statusText || details;
+  } else if (import.meta.env.DEV && error && error instanceof Error) {
+    details = error.message;
+    stack = error.stack;
+  }
+
+  return (
+    <main className="pt-16 p-4 container mx-auto">
+      <h1>{message}</h1>
+      <p>{details}</p>
+      {stack && (
+        <pre className="w-full p-4 overflow-x-auto">
+          <code>{stack}</code>
+        </pre>
+      )}
+    </main>
+  );
+}