zudoku 0.3.0-dev.98 → 0.3.0

package/src/lib/components/Search.tsx

@@ -1,15 +1,13 @@
 import { SearchIcon } from "lucide-react";
-import { useCallback, useEffect, useState } from "react";
+import { Suspense, useCallback, useEffect, useState } from "react";
 import { isSearchPlugin } from "../core/plugins.js";
 import { useZudoku } from "./context/ZudokuContext.js";
 
 export const Search = () => {
   const ctx = useZudoku();
-  const [isOpen, setIsOpen] = useState(true);
+  const [isOpen, setIsOpen] = useState(false);
 
-  const onClose = useCallback(() => {
-    setIsOpen(false);
-  }, []);
+  const onClose = useCallback(() => setIsOpen(false), []);
 
   useEffect(() => {
     if (isOpen) {
@@ -40,6 +38,7 @@ export const Search = () => {
     <>
       <button
         type="button"
+        onClick={() => setIsOpen(true)}
         className="flex items-center border border-input hover:bg-accent hover:text-accent-foreground p-4 relative h-8 justify-start rounded-lg bg-background text-sm text-muted-foreground shadow-none w-40 sm:w-72"
       >
         <div className="flex items-center gap-2 flex-grow">
@@ -50,11 +49,12 @@ export const Search = () => {
           ⌘K
         </kbd>
       </button>
-      {isOpen &&
-        searchPlugin.onRequestSearch({
+      <Suspense fallback={null}>
+        {searchPlugin.renderSearch({
           isOpen,
           onClose,
         })}
+      </Suspense>
     </>
   );
 };

package/src/lib/components/SlotletProvider.tsx

@@ -1,6 +1,6 @@
-import React, { ReactNode, useContext } from "react";
-
-export type Slotlets = Record<string, ReactNode>;
+import React, { type ReactElement, ReactNode, useContext } from "react";
+import { isValidElementType } from "react-is";
+export type Slotlets = Record<string, ReactNode | ReactElement>;
 
 const SlotletContext = React.createContext<Slotlets | undefined>({});
 
@@ -19,7 +19,12 @@ export const SlotletProvider = ({
 };
 
 export const Slotlet = ({ name }: { name: string }) => {
-  const x = useContext(SlotletContext);
+  const context = useContext(SlotletContext);
+  const componentOrElement = context?.[name];
+
+  if (isValidElementType(componentOrElement)) {
+    return React.createElement(componentOrElement);
+  }
 
-  return x?.[name];
+  return componentOrElement;
 };

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

@@ -18,6 +18,7 @@ export const SidebarCategory = ({
 }) => {
   const topNavItem = useTopNavigationItem();
   const isCategoryOpen = useIsCategoryOpen(category);
+  const [hasInteracted, setHasInteracted] = useState(false);
 
   const isCollapsible = category.collapsible ?? true;
   const isCollapsed = category.collapsed ?? true;
@@ -40,11 +41,15 @@ export const SidebarCategory = ({
       onClick={(e) => {
         e.preventDefault();
         setOpen((prev) => !prev);
+        setHasInteracted(true);
       }}
     >
       <ChevronRightIcon
         size={16}
-        className="transition shrink-0 group-data-[state=open]:rotate-90"
+        className={cn(
+          hasInteracted && "transition",
+          "shrink-0 group-data-[state=open]:rotate-90",
+        )}
       />
     </button>
   );
@@ -88,7 +93,13 @@ export const SidebarCategory = ({
           </div>
         )}
       </Collapsible.Trigger>
-      <Collapsible.Content className="CollapsibleContent ms-[calc(var(--padding-nav-item)*1.125)]">
+      <Collapsible.Content
+        className={cn(
+          // CollapsibleContent class is used to animate and it should only be applied when the user has triggered the toggle
+          hasInteracted && "CollapsibleContent",
+          "ms-[calc(var(--padding-nav-item)*1.125)]",
+        )}
+      >
         <ul className="mt-1 border-l ps-2">
           {category.items.map((item) => (
             <SidebarItem

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

@@ -1,6 +1,6 @@
 import { cva } from "class-variance-authority";
 import { ExternalLinkIcon } from "lucide-react";
-import { NavLink } from "react-router-dom";
+import { NavLink, useSearchParams } from "react-router-dom";
 
 import type { SidebarItem as SidebarItemType } from "../../../config/validators/SidebarSchema.js";
 import { cn } from "../../util/cn.js";
@@ -42,6 +42,7 @@ export const SidebarItem = ({
 }) => {
   const topNavItem = useTopNavigationItem();
   const { activeAnchor } = useViewportAnchor();
+  const [searchParams] = useSearchParams();
 
   switch (item.type) {
     case "category":
@@ -69,7 +70,7 @@ export const SidebarItem = ({
     case "link":
       return item.href.startsWith("#") ? (
         <AnchorLink
-          to={item.href}
+          to={{ hash: item.href, search: searchParams.toString() }}
           {...{ [DATA_ANCHOR_ATTR]: item.href.slice(1) }}
           className={cn(
             "flex gap-2.5 justify-between",

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

@@ -4,21 +4,23 @@ import { cn } from "../../util/cn.js";
 export const SidebarWrapper = forwardRef<
   HTMLDivElement,
   PropsWithChildren<{ pushMainContent?: boolean; className?: string }>
->(function SideNavigation({ children, className, pushMainContent }, ref) {
-  return (
-    <nav
-      // 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,
-      )}
-      ref={ref}
-    >
-      {children}
-    </nav>
-  );
-});
+>(({ children, className, pushMainContent }, ref) => (
+  <nav
+    // 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(
+      "scrollbar peer hidden lg:flex flex-col fixed text-sm overflow-y-auto shrink-0",
+      "px-[--padding-nav-item] -mx-[--padding-nav-item] pb-20 mt-[--padding-content-top]",
+      "w-[--side-nav-width] h-[calc(100%-var(--header-height))] scroll-pt-2 gap-2",
+      className,
+    )}
+    ref={ref}
+  >
+    {children}
+  </nav>
+));
+
+SidebarWrapper.displayName = "SidebarWrapper";

package/src/lib/core/plugins.ts

@@ -21,7 +21,7 @@ export interface ApiIdentityPlugin {
 }
 
 export interface SearchProviderPlugin {
-  onRequestSearch: (o: {
+  renderSearch: (o: {
     isOpen: boolean;
     onClose: () => void;
   }) => React.JSX.Element | null;
@@ -59,7 +59,7 @@ export const isNavigationPlugin = (
 export const isSearchPlugin = (
   obj: DevPortalPlugin,
 ): obj is SearchProviderPlugin =>
-  "onRequestSearch" in obj && typeof obj.onRequestSearch === "function";
+  "renderSearch" in obj && typeof obj.renderSearch === "function";
 
 export const needsInitialization = (
   obj: DevPortalPlugin,

package/src/lib/oas/graphql/index.ts

@@ -68,6 +68,25 @@ const builder = new SchemaBuilder<{
 const JSONScalar = builder.addScalarType("JSON", GraphQLJSON);
 const JSONObjectScalar = builder.addScalarType("JSONObject", GraphQLJSONObject);
 
+const getAllTags = (schema: OpenAPIDocument): TagObject[] => {
+  const tags = schema.tags ?? [];
+
+  // Extract tags from operations
+  const operationTags = Object.values(schema.paths ?? {})
+    .flatMap((path) => Object.values(path ?? {}))
+    .flatMap((operation) =>
+      typeof operation === "object" && "tags" in operation
+        ? operation.tags ?? []
+        : [],
+    );
+
+  // Remove duplicates and tags that appear in the schema
+  const uniqueOperationTags = [...new Set(operationTags)].filter(
+    (tag) => !tags.some((rootTag) => rootTag.name === tag),
+  );
+  return [...tags, ...uniqueOperationTags.map((tag) => ({ name: tag }))];
+};
+
 const getAllOperations = (paths?: PathsObject, tag?: string) => {
   return Object.entries(paths ?? {}).flatMap(([path, value]) =>
     HttpMethods.flatMap((method) => {
@@ -117,7 +136,7 @@ const SchemaTag = builder.objectRef<TagObject>("SchemaTag").implement({
     operations: t.field({
       type: [OperationItem],
       resolve: (parent, _args, ctx) => {
-        const rootTags = ctx.schema.tags?.map((tag) => tag.name) ?? [];
+        const rootTags = getAllTags(ctx.schema).map((tag) => tag.name);
 
         return getAllOperations(ctx.schema.paths, parent.name).filter((item) =>
           parent.name
@@ -246,7 +265,7 @@ const RequestBodyObject = builder
 const ResponseItem = builder
   .objectRef<{
     statusCode: string;
-    description: string;
+    description?: string;
     content: Array<{
       mediaType: string;
       schema: any;
@@ -258,7 +277,7 @@ const ResponseItem = builder
   .implement({
     fields: (t) => ({
       statusCode: t.exposeString("statusCode"),
-      description: t.exposeString("description"),
+      description: t.exposeString("description", { nullable: true }),
       content: t.expose("content", { type: [MediaTypeItem], nullable: true }),
       headers: t.expose("headers", { type: JSONScalar, nullable: true }),
       links: t.expose("links", { type: JSONScalar, nullable: true }),
@@ -363,10 +382,10 @@ const Schema = builder.objectRef<OpenAPIDocument>("Schema").implement({
         name: t.arg.string(),
       },
       type: [SchemaTag],
-      resolve: (root, args) =>
-        [...(root.tags ?? []), { name: "" }].filter(
-          (tag) => !args.name || args.name === tag.name,
-        ),
+      resolve: (root, args) => {
+        const tags = [...getAllTags(root), { name: "" }];
+        return args.name ? tags.filter((tag) => tag.name === args.name) : tags;
+      },
     }),
     operations: t.field({
       type: [OperationItem],

package/src/lib/plugins/markdown/MdxPage.tsx

@@ -23,7 +23,6 @@ const MarkdownHeadings = {
   ),
   h3: ({ children, id }) => (
     <Heading level={3} id={id} registerSidebarAnchor>
-      {" "}
       {children}
     </Heading>
   ),

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

@@ -1,14 +1,14 @@
+import { useState } from "react";
 import { Heading } from "../../components/Heading.js";
 import { Markdown } from "../../components/Markdown.js";
-import { Card } from "../../ui/Card.js";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../ui/Tabs.js";
 import { groupBy } from "../../util/groupBy.js";
 import { renderIf } from "../../util/renderIf.js";
 import { OperationsFragment } from "./OperationList.js";
 import { ParameterList } from "./ParameterList.js";
-import { SchemaListView } from "./SchemaListView.js";
 import { Sidecar } from "./Sidecar.js";
 import { FragmentType, useFragment } from "./graphql/index.js";
+import { SchemaView } from "./schema/SchemaView.js";
 import { SchemaProseClasses } from "./util/prose.js";
 
 export const PARAM_GROUPS = ["path", "query", "header", "cookie"] as const;
@@ -26,6 +26,8 @@ export const OperationListItem = ({
   );
 
   const first = operation.responses.at(0);
+  const [selectedResponse, setSelectedResponse] = useState(first?.statusCode);
+
   return (
     <div
       key={operation.operationId}
@@ -62,7 +64,7 @@ export const OperationListItem = ({
             <Heading level={3} className="capitalize">
               Request Body
             </Heading>
-            <SchemaListView schema={schema} />
+            <SchemaView schema={schema} />
           </div>
         ))}
         {operation.responses.length > 0 && (
@@ -70,12 +72,15 @@ export const OperationListItem = ({
             <Heading level={3} className="capitalize mt-8 pt-8 border-t">
               Responses
             </Heading>
-            <Tabs defaultValue={`${first?.statusCode}${first?.description}`}>
+            <Tabs
+              onValueChange={(value) => setSelectedResponse(value)}
+              value={selectedResponse}
+            >
               {operation.responses.length > 1 && (
                 <TabsList>
                   {operation.responses.map((response) => (
                     <TabsTrigger
-                      value={response.statusCode + response.description}
+                      value={response.statusCode}
                       key={response.statusCode}
                       title={response.description}
                     >
@@ -87,19 +92,15 @@ export const OperationListItem = ({
               <ul className="list-none m-0 px-0 overflow-hidden">
                 {operation.responses.map((response) => (
                   <TabsContent
-                    value={response.statusCode + response.description}
+                    value={response.statusCode}
                     key={response.statusCode}
                   >
-                    {renderIf(
-                      response.content?.find((content) => content.schema),
-                      (content) => {
-                        return <SchemaListView schema={content.schema} />;
-                      },
-                    ) ?? (
-                      <Card className="font-mono text-sm p-4">
-                        No response body
-                      </Card>
-                    )}
+                    <SchemaView
+                      schema={
+                        response.content?.find((content) => content.schema)
+                          ?.schema
+                      }
+                    />
                   </TabsContent>
                 ))}
               </ul>
@@ -108,7 +109,11 @@ export const OperationListItem = ({
         )}
       </div>
 
-      <Sidecar operation={operation} />
+      <Sidecar
+        selectedResponse={selectedResponse}
+        onSelectResponse={setSelectedResponse}
+        operation={operation}
+      />
     </div>
   );
 };

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

@@ -21,14 +21,16 @@ export const ParameterList = ({
     </Heading>
     <Card>
       <ul className="list-none m-0 px-0 divide-y ">
-        {parameters.map((parameter) => (
-          <ParameterListItem
-            key={`${parameter.name}-${parameter.in}`}
-            parameter={parameter}
-            id={id}
-            group={group}
-          />
-        ))}
+        {parameters
+          .sort((a, b) => (a.required === b.required ? 0 : a.required ? -1 : 1))
+          .map((parameter) => (
+            <ParameterListItem
+              key={`${parameter.name}-${parameter.in}`}
+              parameter={parameter}
+              id={id}
+              group={group}
+            />
+          ))}
       </ul>
     </Card>
   </>

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

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import * as Tabs from "@radix-ui/react-tabs";
 import { SyntaxHighlight } from "../../components/SyntaxHighlight.js";
 import { type SchemaObject } from "../../oas/graphql/index.js";
 import { cn } from "../../util/cn.js";
@@ -9,52 +9,64 @@ import { generateSchemaExample } from "./util/generateSchemaExample.js";
 type Responses = OperationListItemResult["responses"];
 export const ResponsesSidecarBox = ({
   responses,
+  selectedResponse,
+  onSelectResponse,
 }: {
   responses: Responses;
-}) => {
-  const [tabIndex, setTabIndex] = useState(0);
-
-  const activeTab = responses[tabIndex];
-  const schema = activeTab.content?.[0]?.schema as SchemaObject | undefined;
-
-  return (
-    <SidecarBox.Root>
-      <SidecarBox.Head className="text-xs grid grid-rows-2 pb-0">
+  selectedResponse?: string;
+  onSelectResponse: (response: string) => void;
+}) => (
+  <SidecarBox.Root>
+    <Tabs.Root
+      defaultValue={responses[0]?.statusCode}
+      value={selectedResponse}
+      onValueChange={(value) => onSelectResponse(value)}
+    >
+      <SidecarBox.Head className="text-xs flex flex-col gap-2 pb-0">
         <span className="font-mono">Example Responses</span>
-        <div className="flex gap-2">
-          {responses.map((response, index) => (
-            <div
+        <Tabs.List className="flex gap-2">
+          {responses.map((response) => (
+            <Tabs.Trigger
               key={response.statusCode}
-              onClick={() => setTabIndex(index)}
+              value={response.statusCode}
               className={cn(
                 "text-xs font-mono px-1.5 py-1 pb-px translate-y-px border-b-2 border-transparent rounded-t cursor-pointer",
-                tabIndex === index
-                  ? "text-primary dark:text-inherit border-primary"
-                  : "hover:border-accent-foreground/25",
+                "data-[state=active]:text-primary data-[state=active]:dark:text-inherit data-[state=active]:border-primary",
+                "hover:border-accent-foreground/25",
               )}
             >
               {response.statusCode}
-            </div>
+            </Tabs.Trigger>
           ))}
-        </div>
+        </Tabs.List>
       </SidecarBox.Head>
-      <SidecarBox.Body>
-        {schema ? (
-          <SyntaxHighlight
-            language="json"
-            noBackground
-            className="text-xs"
-            code={JSON.stringify(generateSchemaExample(schema), null, 2)}
-          />
-        ) : (
-          <span className="text-muted-foreground font-mono italic text-xs">
-            Empty Response
-          </span>
-        )}
-      </SidecarBox.Body>
-      <SidecarBox.Footer className="flex justify-end text-xs">
-        {responses[tabIndex].description}
-      </SidecarBox.Footer>
-    </SidecarBox.Root>
-  );
-};
+      {responses.map((response) => {
+        const schema = response.content?.[0]?.schema as
+          | SchemaObject
+          | undefined;
+
+        return (
+          <Tabs.Content key={response.statusCode} value={response.statusCode}>
+            <SidecarBox.Body>
+              {schema ? (
+                <SyntaxHighlight
+                  language="json"
+                  noBackground
+                  className="text-xs"
+                  code={JSON.stringify(generateSchemaExample(schema), null, 2)}
+                />
+              ) : (
+                <span className="text-muted-foreground font-mono italic text-xs">
+                  Empty Response
+                </span>
+              )}
+            </SidecarBox.Body>
+            <SidecarBox.Footer className="flex justify-end text-xs">
+              {response.description}
+            </SidecarBox.Footer>
+          </Tabs.Content>
+        );
+      })}
+    </Tabs.Root>
+  </SidecarBox.Root>
+);

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

@@ -84,8 +84,12 @@ const methodToColor = {
 
 export const Sidecar = ({
   operation,
+  selectedResponse,
+  onSelectResponse,
 }: {
   operation: OperationListItemResult;
+  selectedResponse?: string;
+  onSelectResponse: (response: string) => void;
 }) => {
   const oasConfig = useOasConfig();
   const [result] = useQuery({
@@ -105,24 +109,31 @@ export const Sidecar = ({
 
   const requestBodyContent = operation.requestBody?.content;
 
-  const path = operation.path.split("/").map((part) => (
-    <Fragment key={part}>
-      {part.startsWith("{") && part.endsWith("}") ? (
-        <ColorizedParam
-          name={part.slice(1, -1)}
-          backgroundOpacity="0"
-          // same as in `ParameterListItem`
-          slug={operation.slug + "-" + part.slice(1, -1).toLocaleLowerCase()}
-        >
-          {part}
-        </ColorizedParam>
-      ) : (
-        part
-      )}
-      /
-      <wbr />
-    </Fragment>
-  ));
+  const path = operation.path.split("/").map((part, i, arr) => {
+    const isParam =
+      (part.startsWith("{") && part.endsWith("}")) || part.startsWith(":");
+    const paramName = isParam ? part.replace(/[:{}]/g, "") : undefined;
+
+    return (
+      // eslint-disable-next-line react/no-array-index-key
+      <Fragment key={part + i}>
+        {paramName ? (
+          <ColorizedParam
+            name={paramName}
+            backgroundOpacity="0"
+            // same as in `ParameterListItem`
+            slug={`${operation.slug}-${paramName.toLocaleLowerCase()}`}
+          >
+            {part}
+          </ColorizedParam>
+        ) : (
+          part
+        )}
+        {i < arr.length - 1 ? "/" : null}
+        <wbr />
+      </Fragment>
+    );
+  });
 
   const code = useMemo(() => {
     const example = requestBodyContent?.[0]?.schema
@@ -200,7 +211,11 @@ export const Sidecar = ({
         <RequestBodySidecarBox content={requestBodyContent} />
       )}
       {operation.responses.length > 0 && (
-        <ResponsesSidecarBox responses={operation.responses} />
+        <ResponsesSidecarBox
+          selectedResponse={selectedResponse}
+          onSelectResponse={onSelectResponse}
+          responses={operation.responses}
+        />
       )}
     </aside>
   );

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

@@ -164,7 +164,7 @@ export const openApiPlugin = (
         .map<SidebarItem>((tag) => ({
           type: "category",
           label: tag.name ?? "",
-          collapsible: false,
+          collapsible: true,
           collapsed: false,
           items: tag.operations.map((operation) => ({
             type: "link",

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

@@ -164,8 +164,9 @@ export const Playground = ({
   });
 
   const path = url.split("/").map((part, i, arr) => {
-    const isPathParam = part.startsWith("{") && part.endsWith("}");
-    const replaced = part.replace(/[{}]/g, "");
+    const isPathParam =
+      (part.startsWith("{") && part.endsWith("}")) || part.startsWith(":");
+    const replaced = part.replace(/[:{}]/g, "");
     const value = formState.pathParams.find((p) => p.name === replaced)?.value;
 
     const pathParamValue = value ? (
@@ -191,10 +192,6 @@ export const Playground = ({
     );
   });
 
-  const lang = mimeTypeToLanguage(
-    queryMutation.data?.headers.get("Content-Type") ?? "",
-  );
-
   const headerEntries = Array.from(queryMutation.data?.headers.entries() ?? []);
 
   const urlQueryParams = formState.queryParams

package/src/lib/plugins/openapi/playground/createUrl.ts

@@ -1,11 +1,12 @@
 import type { PlaygroundForm } from "./Playground.js";
 
 export const createUrl = (host: string, path: string, data: PlaygroundForm) => {
-  const filledPath = path.replace(
-    /\{(\w+)}/g,
-    (_, key) =>
-      data.pathParams.find((part) => part.name === key)?.value || `{${key}}`,
-  );
+  const filledPath = path.replace(/(:\w+|\{\w+})/g, (match) => {
+    const key = match.replace(/[:{}]/g, "");
+    const value = data.pathParams.find((part) => part.name === key)?.value;
+
+    return value ?? match;
+  });
 
   const url = new URL(filledPath, host);