zudoku 0.1.1-dev.42 → 0.1.1-dev.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.1.1-dev.42",
+  "version": "0.1.1-dev.44",
   "type": "module",
   "files": [
     "dist",

package/src/lib/components/DevPortal.tsx

@@ -1,4 +1,4 @@
-import { MDXProvider, useMDXComponents } from "@mdx-js/react";
+import { MDXProvider } from "@mdx-js/react";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { memo, Suspense, useEffect, useMemo } from "react";
 import { type AuthProvider } from "../authentication/authentication.js";
@@ -93,4 +93,4 @@ const DevPortalInner = (props: DevPortalProps) => {
 const DevPortal = memo(DevPortalInner);
 DevPortal.displayName = "DevPortal";
 
-export { DevPortal, useMDXComponents };
+export { DevPortal };

package/src/lib/components/Layout.tsx

@@ -7,7 +7,7 @@ import { Header } from "./Header.js";
 import { useDevPortal } from "./context/DevPortalProvider.js";
 import { useViewportAnchor } from "./context/ViewportAnchorContext.js";
 import { SideNavigation } from "./navigation/SideNavigation.js";
-import { SideNavigationWrapper } from "./navigation/SideNavigationWrapper.js";
+import { Spinner } from "./Spinner.js";
 
 export const Layout = ({ children }: { children?: ReactNode }) => {
   const location = useLocation();
@@ -42,8 +42,14 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
       </Helmet>
       <Header />
 
-      <div className="max-w-screen-2xl mx-auto pt-[--header-height] px-10 lg:px-12">
-        <Suspense fallback={<div />}>
+      <div className="max-w-screen-2xl mx-auto pt-[--header-height] px-10 lg:px-12 h-full">
+        <Suspense
+          fallback={
+            <div className="grid h-full place-items-center">
+              <Spinner />
+            </div>
+          }
+        >
           <SideNavigation />
           <main
             className="dark:border-white/10 translate-x-0

package/src/lib/components/Spinner.tsx

@@ -0,0 +1,5 @@
+import { LoaderCircle } from "lucide-react";
+
+export const Spinner = ({ size = 16 }: { size?: number }) => (
+  <LoaderCircle size={size} className="animate-spin" />
+);

package/src/lib/components/navigation/SideNavigation.tsx

@@ -11,7 +11,7 @@ export const SideNavigation = () => {
   return (
     <SideNavigationWrapper
       ref={navRef}
-      data={navigation.data.items.length > 0 ? "true" : "false"}
+      pushMainContent={navigation.data.items.length > 0}
     >
       {navigation.data.items.map((category) => (
         <SideNavigationCategory key={category.label} category={category} />

package/src/lib/components/navigation/SideNavigationWrapper.tsx

@@ -3,10 +3,14 @@ import { cn } from "../../util/cn.js";
 
 export const SideNavigationWrapper = forwardRef<
   HTMLDivElement,
-  PropsWithChildren<{ data?: string; className?: string }>
->(({ children, className, data }, ref) => (
+  PropsWithChildren<{ pushMainContent?: boolean; className?: string }>
+>(({ children, className, pushMainContent }, ref) => (
   <nav
-    data-navigation={data}
+    // this data attribute is used in `Layout.tsx` to determine if side navigation
+    // is present for the current page so the main content is pushed to the right
+    // it's also important to set `peer` class here.
+    // maybe this could be simplified by adjusting the layout
+    data-navigation={String(pushMainContent)}
     className={cn(
       "peer hidden lg:flex flex-col fixed text-sm overflow-y-auto shrink-0 p-[--padding-nav-item] -mx-[--padding-nav-item] pb-20 pt-[--padding-content-top] w-[--side-nav-width] h-[calc(100%-var(--header-height))] scroll-pt-2 gap-2",
       className,

package/src/lib/plugins/openapi/OperationList.tsx

@@ -72,12 +72,15 @@ const AllOperationsQuery = graphql(/* GraphQL */ `
   }
 `);
 
+const suspenseContext = { suspense: true };
+
 export const OperationList = () => {
   const { type, input } = useOasConfig();
 
   const [result] = useQuery({
     query: AllOperationsQuery,
     variables: { type, input },
+    context: suspenseContext,
   });
 
   if (!result.data) return null;

package/src/lib/plugins/openapi/OperationListItem.tsx

@@ -53,19 +53,25 @@ export const OperationListItem = ({
           </div>
         )}
         <Heading level={3} className="capitalize">
-          Repsonses
+          Responses
         </Heading>
         <Tabs defaultValue={`${first?.statusCode}${first?.description}`}>
           <TabsList>
             {operation.responses.map((response) => (
-              <TabsTrigger value={response.statusCode + response.description}>
+              <TabsTrigger
+                value={response.statusCode + response.description}
+                key={response.statusCode}
+              >
                 {response.description} ({response.statusCode})
               </TabsTrigger>
             ))}
           </TabsList>
           <ul className="list-none m-0 px-0 overflow-hidden">
             {operation.responses.map((response) => (
-              <TabsContent value={response.statusCode + response.description}>
+              <TabsContent
+                value={response.statusCode + response.description}
+                key={response.statusCode}
+              >
                 <ViewSchema schema={response.content?.at(0)?.schema} name="" />
               </TabsContent>
             ))}
@@ -121,6 +127,7 @@ const ViewSchema = ({
             .concat(additionalProperties)
             .map(([propertyName, property]) => (
               <div
+                key={propertyName}
                 className={cn(
                   level > 0 ? "py-2" : "py-4",
                   "px-2 border-t border-border bg-border/20 hover:bg-border/30 flex gap-1 flex-col",
@@ -166,7 +173,10 @@ const ViewSchema = ({
                     {property.enum
                       .filter((value) => value)
                       .map((value) => (
-                        <span className="font-mono text-xs border-border border bg-muted rounded px-1">
+                        <span
+                          key={value}
+                          className="font-mono text-xs border-border border bg-muted rounded px-1"
+                        >
                           {value}
                         </span>
                       ))}

package/src/lib/plugins/openapi/playground/Playground.tsx

@@ -21,6 +21,7 @@ import { CirclePlayIcon, LoaderCircle, MonitorCheckIcon } from "lucide-react";
 import { createUrl } from "./createUrl.js";
 import { UrlDisplay } from "./UrlDisplay.js";
 import { useApiIdentities } from "../../../components/context/DevPortalProvider.js";
+import { Spinner } from "../../../components/Spinner.js";
 
 function mimeTypeToLanguage(mimeType: string) {
   const mimeTypeMapping = {
@@ -305,7 +306,7 @@ const Playground = ({
                   <div className="grid place-items-center h-full">
                     <span className="text-[16px] font-semibold text-muted-foreground">
                       {queryMutation.isPending ? (
-                        <LoaderCircle size={18} className="animate-spin" />
+                        <Spinner />
                       ) : (
                         "Send a request first to see the response here"
                       )}

package/src/lib/plugins/openapi/util/generateSchemaExample.ts

@@ -38,7 +38,6 @@ function processComplexTypes(schema: SchemaObject, name?: string): any {
     });
     return obj;
   } else if (schema.type === "array" && schema.items) {
-    console.log(name, "array", schema.items, schema);
     const value = generateSchemaExample(schema.items, name);
     if (value !== undefined) {
       return [value];