zudoku 0.1.1-dev.5 → 0.1.1-dev.51

package/src/{app → lib}/plugins/markdown/MdxPage.tsx

@@ -1,22 +1,42 @@
+import { useMDXComponents } from "@mdx-js/react";
 import { useMemo, type PropsWithChildren, type ReactNode } from "react";
-import { Heading } from "../../Heading.js";
 import { CategoryHeading } from "../../components/CategoryHeading.js";
+import { Heading } from "../../components/Heading.js";
 import { ProseClasses } from "../../components/Markdown.js";
 import { useTopNavigationItem } from "../../components/context/DevPortalProvider.js";
 import { isPathItem } from "../../components/navigation/util.js";
 import { Helmet } from "../../core/helmet.js";
 import { Link, useLocation } from "../../core/router.js";
+import type { MdxComponentsType } from "../../util/MdxComponents.js";
 import { cn } from "../../util/cn.js";
 import slugify from "../../util/slugify.js";
 import { traverseNavigation } from "../../util/traverseNavigation.js";
 import { Toc } from "./Toc.js";
 import type { MDXImport } from "./index.js";
 
+const MarkdownHeadings = {
+  h2: ({ children, id }) => (
+    <Heading level={2} id={id} registerSidebarAnchor>
+      {children}
+    </Heading>
+  ),
+  h3: ({ children, id }) => (
+    <Heading level={3} id={id} registerSidebarAnchor>
+      {" "}
+      {children}
+    </Heading>
+  ),
+} satisfies MdxComponentsType;
+
 export const MdxPage = ({
-  children,
+  mdxComponent: MdxComponent,
   frontmatter,
   tableOfContents,
-}: PropsWithChildren<Omit<MDXImport, "default">>) => {
+}: PropsWithChildren<
+  Omit<MDXImport, "default"> & {
+    mdxComponent: MDXImport["default"];
+  }
+>) => {
   const navItem = useTopNavigationItem();
   const location = useLocation();
 
@@ -28,9 +48,9 @@ export const MdxPage = ({
       })
     : undefined;
 
-  const title = frontmatter?.title;
-  const category = frontmatter?.category ?? categoryTitle;
-  const hideToc = frontmatter?.toc === false;
+  const title = frontmatter.title;
+  const category = frontmatter.category ?? categoryTitle;
+  const hideToc = frontmatter.toc === false;
 
   const pageTitle =
     tableOfContents.find((item) => item.depth === 1)?.value ?? title;
@@ -75,21 +95,23 @@ export const MdxPage = ({
       <div
         className={cn(
           ProseClasses,
-          "mx-auto max-w-full xl:w-full xl:max-w-prose flex-1 flex-shrink pt-[--padding-content-top] pb-[--padding-content-bottom]",
+          "max-w-full xl:w-full xl:max-w-prose flex-1 flex-shrink pt-[--padding-content-top] pb-[--padding-content-bottom]",
         )}
       >
-        <header className="-translate-y-1">
+        <header>
           {category && <CategoryHeading>{category}</CategoryHeading>}
           {title && (
             <Heading level={1} id={slugify(title, { lower: true })}>
               {title}
             </Heading>
           )}
-          {frontmatter?.description && (
+          {frontmatter.description && (
             <p className="prose-lg">{frontmatter.description}</p>
           )}
         </header>
-        {children}
+        <MdxComponent
+          components={{ ...useMDXComponents(), ...MarkdownHeadings }}
+        />
         <hr />
         <div className="not-prose flex items-center justify-between gap-8">
           {prev.path ? (

package/src/{app → lib}/plugins/markdown/generateRoutes.tsx

@@ -1,21 +1,10 @@
-import { Heading } from "../../Heading.js";
 import { useTopNavigationItem } from "../../components/context/DevPortalProvider.js";
 import { isPathItem } from "../../components/navigation/util.js";
 import { Navigate, type RouteObject } from "../../core/router.js";
-import type { MdxComponentsType } from "../../util/MdxComponents.js";
 import { traverseNavigation } from "../../util/traverseNavigation.js";
 import { MdxPage } from "./MdxPage.js";
 import type { MarkdownPluginOptions } from "./index.js";
 
-const MarkdownHeadings = {
-  h2: ({ children, id }) => (
-    <Heading level={2} id={id} children={children} registerSidebarAnchor />
-  ),
-  h3: ({ children, id }) => (
-    <Heading level={3} id={id} children={children} registerSidebarAnchor />
-  ),
-} satisfies MdxComponentsType;
-
 export const generateRoutes = (
   markdownFiles: MarkdownPluginOptions["markdownFiles"],
 ): RouteObject[] => {
@@ -39,11 +28,7 @@ export const generateRoutes = (
           const { default: Component, ...props } = await importPromise();
 
           return {
-            element: (
-              <MdxPage {...props}>
-                <Component components={MarkdownHeadings} />
-              </MdxPage>
-            ),
+            element: <MdxPage mdxComponent={Component} {...props} />,
           };
         },
       } satisfies RouteObject;

package/src/{app → lib}/plugins/openapi/ColorizedParam.tsx

@@ -15,7 +15,6 @@ export const usePastellizedColor = (name: string) => {
 
 export const ColorizedParam = ({
   name,
-  value,
   className,
   backgroundOpacity = "100%",
   slug,
@@ -23,7 +22,6 @@ export const ColorizedParam = ({
   onClick,
 }: {
   name: string;
-  value?: string;
   className?: string;
   backgroundOpacity?: string;
   slug?: string;
@@ -76,7 +74,7 @@ export const ColorizedParam = ({
         className="absolute inset-0 border-b-2 transition-opacity duration-200 opacity-30 group-data-[active=true]:opacity-100"
         style={{ borderColor, backgroundColor }}
       />
-      <span className="relative">{children || name}</span>
+      <span className="relative">{children ?? name}</span>
     </span>
   );
 };

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

@@ -0,0 +1,58 @@
+import { graphql } from "./graphql/index.js";
+import { useOasConfig } from "./index.js";
+import type { OperationListItemResult } from "./OperationList.js";
+import { Playground } from "./playground/Playground.js";
+
+import { useQuery } from "urql";
+
+const GetServerQuery = graphql(/* GraphQL */ `
+  query getServerQuery($input: JSON!, $type: SchemaType!) {
+    schema(input: $input, type: $type) {
+      url
+    }
+  }
+`);
+
+export const MakeRequest = ({
+  operation,
+}: {
+  operation: OperationListItemResult;
+}) => {
+  const variables = useOasConfig();
+  const [server] = useQuery({ query: GetServerQuery, variables });
+
+  const headers = operation.parameters
+    ?.filter((p) => p.in === "header")
+    .map((p) => ({
+      name: p.name,
+      value: p.examples?.find((x) => x.value)?.value ?? "",
+    }));
+  const queryParams = operation.parameters
+    ?.filter((p) => p.in === "query")
+    .map((p) => ({
+      name: p.name,
+      value: "",
+    }));
+  const pathParams = operation.parameters
+    ?.filter((p) => p.in === "path")
+    .map((p) => ({
+      name: p.name,
+      value: "",
+    }));
+
+  const hasParams =
+    operation.parameters?.some((p) => p.in === "query" || p.in === "path") ??
+    false;
+
+  return (
+    <Playground
+      host={server.data?.schema.url ?? ""}
+      method={operation.method}
+      url={operation.path}
+      headers={headers}
+      queryParams={queryParams}
+      pathParams={pathParams}
+      hasParams={hasParams}
+    />
+  );
+};

package/src/{app → lib}/plugins/openapi/OperationList.tsx

@@ -1,12 +1,12 @@
-import { Heading } from "../../Heading.js";
+import { ResultOf } from "@graphql-typed-document-node/core";
 import { CategoryHeading } from "../../components/CategoryHeading.js";
+import { Heading } from "../../components/Heading.js";
 import { Markdown, ProseClasses } from "../../components/Markdown.js";
 import { cn } from "../../util/cn.js";
 import { OperationListItem } from "./OperationListItem.js";
-import { useOasConfig } from "./index.js";
 import { graphql } from "./graphql/index.js";
+import { useOasConfig } from "./index.js";
 import { useQuery } from "./util/urql.js";
-import { ResultOf } from "@graphql-typed-document-node/core";
 
 export const OperationsFragment = graphql(/* GraphQL */ `
   fragment OperationsFragment on OperationItem {
@@ -24,6 +24,13 @@ export const OperationsFragment = graphql(/* GraphQL */ `
       required
       schema
       style
+      examples {
+        name
+        description
+        externalValue
+        value
+        summary
+      }
     }
     requestBody {
       content {
@@ -72,12 +79,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;
@@ -91,7 +101,7 @@ export const OperationList = () => {
         </Heading>
         <Markdown content={result.data.schema.description ?? ""} />
       </div>
-      {result.data?.schema.tags
+      {result.data.schema.tags
         .filter((tag) => tag.operations.length > 0)
         .map((tag) => (
           <div key={tag.name}>

package/src/{app → lib}/plugins/openapi/OperationListItem.tsx

@@ -1,8 +1,10 @@
-import { Heading } from "../../Heading.js";
+import { Heading } from "../../components/Heading.js";
 import { Markdown, ProseClasses } from "../../components/Markdown.js";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../ui/Tabs.js";
 import { groupBy } from "../../util/groupBy.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";
 
@@ -15,8 +17,8 @@ export const OperationListItem = ({
   operationFragment: FragmentType<typeof OperationsFragment>;
 }) => {
   const operation = useFragment(OperationsFragment, operationFragment);
-  const groupedParameters = groupBy(operation?.parameters ?? [], "in");
-
+  const groupedParameters = groupBy(operation.parameters ?? [], "in");
+  const first = operation.responses.find((re) => re.statusCode === "200");
   return (
     <div
       key={operation.operationId}
@@ -35,7 +37,7 @@ export const OperationListItem = ({
         {operation.parameters && operation.parameters.length > 0 && (
           <div className="mt-4">
             {PARAM_GROUPS.flatMap((group) =>
-              groupedParameters?.[group]?.length ? (
+              groupedParameters[group].length ? (
                 <ParameterList
                   key={group}
                   id={operation.slug}
@@ -48,7 +50,37 @@ export const OperationListItem = ({
             )}
           </div>
         )}
+        <Heading level={3} className="capitalize">
+          Responses
+        </Heading>
+        <Tabs defaultValue={`${first?.statusCode}${first?.description}`}>
+          <TabsList>
+            {operation.responses.map((response) => (
+              <TabsTrigger
+                value={response.statusCode + response.description}
+                key={response.statusCode}
+                title={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}
+                key={response.statusCode}
+              >
+                <SchemaListView
+                  schema={response.content?.at(0)?.schema}
+                  name=""
+                />
+              </TabsContent>
+            ))}
+          </ul>
+        </Tabs>
       </div>
+
       <Sidecar operation={operation} />
     </div>
   );

package/src/{app → lib}/plugins/openapi/ParameterList.tsx

@@ -1,4 +1,4 @@
-import { Heading } from "../../Heading.js";
+import { Heading } from "../../components/Heading.js";
 import type { ParameterGroup } from "./OperationListItem.js";
 import {
   ParameterListItem,

package/src/{app → lib}/plugins/openapi/ParameterListItem.tsx

@@ -28,7 +28,7 @@ export const ParameterListItem = ({
   group: ParameterGroup;
   id: string;
 }) => (
-  <li className="not-prose px-2 py-4 border-t border-border bg-border/20">
+  <li className="not-prose px-2 py-4 border-t border-border bg-border/20 text-sm flex flex-col gap-1">
     <div className="flex items-center gap-2">
       <code>
         {group === "path" ? (
@@ -54,7 +54,10 @@ export const ParameterListItem = ({
       )}
     </div>
     {parameter.description && (
-      <Markdown content={parameter.description} className="prose-p:my-1" />
+      <Markdown
+        content={parameter.description}
+        className="text-sm prose-p:my-1"
+      />
     )}
   </li>
 );

package/src/{app → lib}/plugins/openapi/RequestBodySidecarBox.tsx

@@ -34,7 +34,7 @@ export const RequestBodySidecarBox = ({ content }: { content: Content }) => {
           <SyntaxHighlight
             language="json"
             noBackground
-            copyable={false}
+            copyable
             className="text-xs"
             code={JSON.stringify(
               selected === "example"

package/src/{app → lib}/plugins/openapi/ResponsesSidecarBox.tsx

@@ -15,12 +15,12 @@ export const ResponsesSidecarBox = ({
   const [tabIndex, setTabIndex] = useState(0);
 
   const activeTab = responses[tabIndex];
-  const schema = activeTab?.content?.[0]?.schema as SchemaObject | undefined;
+  const schema = activeTab.content?.[0]?.schema as SchemaObject | undefined;
 
   return (
     <SidecarBox.Root>
       <SidecarBox.Head className="text-xs grid grid-rows-2 pb-0">
-        <span className="font-mono">Responses</span>
+        <span className="font-mono">Example Responses</span>
         <div className="flex gap-2">
           {responses.map((response, index) => (
             <div
@@ -43,7 +43,6 @@ export const ResponsesSidecarBox = ({
           <SyntaxHighlight
             language="json"
             noBackground
-            copyable={false}
             className="text-xs"
             code={JSON.stringify(generateSchemaExample(schema), null, 2)}
           />

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

@@ -0,0 +1,228 @@
+import * as Collapsible from "@radix-ui/react-collapsible";
+import { ListPlusIcon } from "lucide-react";
+import { useState } from "react";
+import { Markdown } from "../../components/Markdown.js";
+import { SchemaObject } from "../../oas/parser/index.js";
+import { Button } from "../../ui/Button.js";
+import { cn } from "../../util/cn.js";
+
+export const SchemaListView = ({
+  name,
+  schema,
+  level = 0,
+  defaultOpen = false,
+}: {
+  level?: number;
+  defaultOpen?: boolean;
+  name?: string;
+  schema: SchemaObject;
+}) => {
+  const properties = Object.entries(schema.properties ?? {});
+  const additionalProperties =
+    typeof schema.additionalProperties === "object"
+      ? Object.entries(schema.additionalProperties)
+      : [];
+
+  const combinedProperties = properties.concat(
+    Array.isArray(additionalProperties) ? additionalProperties : [],
+  );
+
+  const groups = Object.groupBy(
+    combinedProperties,
+    ([propertyName, property]) => {
+      return property.deprecated
+        ? "deprecated"
+        : schema.required?.includes(propertyName)
+          ? "required"
+          : "optional";
+    },
+  );
+
+  return (
+    <div
+      className={cn(
+        "not-prose",
+        level > 0 && "border border-border rounded text-sm",
+      )}
+    >
+      {(schema.title ?? name) && (
+        <div className="ml-2 my-1 font-bold">{schema.title ?? name}</div>
+      )}
+      {level === 0 && schema.description && (
+        <p className="prose">{schema.description}</p>
+      )}
+      <ul>
+        {Object.entries(groups).map(([group, properties]) => {
+          return (
+            <SchemaListViewItemGroup
+              key={group}
+              defaultOpen={defaultOpen}
+              group={group as any}
+              nestingLevel={level}
+              properties={properties}
+              required={schema.required ?? []}
+            />
+          );
+        })}
+      </ul>
+    </div>
+  );
+};
+
+const SchemaListViewItemGroup = ({
+  group,
+  properties,
+  nestingLevel,
+  required,
+  defaultOpen = false,
+}: {
+  group: "optional" | "required" | "deprecated";
+  defaultOpen?: boolean;
+  properties: [string, SchemaObject][];
+  nestingLevel: number;
+  required: string[];
+}) => {
+  const notCollapsible =
+    defaultOpen ||
+    group === "required" ||
+    properties.length === 1 ||
+    nestingLevel === 0;
+  const [open, setOpen] = useState(notCollapsible);
+  if (properties.length === 0) {
+    return;
+  }
+
+  return (
+    <Collapsible.Root
+      className="CollapsibleRoot"
+      open={open}
+      onOpenChange={setOpen}
+    >
+      {!open && (
+        <Collapsible.Trigger
+          className={cn(
+            "py-2 hover:bg-muted w-full",
+            group === "optional" && "font-semibold",
+            group === "deprecated" && "text-muted-foreground",
+          )}
+        >
+          {properties.length} {group} fields
+        </Collapsible.Trigger>
+      )}
+
+      <Collapsible.Content>
+        {properties.map(([propertyName, property]) => (
+          <SchemaListViewItem
+            key={propertyName}
+            property={property}
+            propertyName={propertyName}
+            nestingLevel={nestingLevel}
+            isRequired={required.includes(propertyName)}
+          />
+        ))}
+      </Collapsible.Content>
+    </Collapsible.Root>
+  );
+};
+
+const SchemaListViewItem = ({
+  propertyName,
+  property,
+  nestingLevel,
+  isRequired,
+}: {
+  propertyName: string;
+  isRequired: boolean;
+  property: SchemaObject;
+  nestingLevel: number;
+}) => {
+  return (
+    <div
+      key={propertyName}
+      className={cn(
+        nestingLevel > 0 ? "py-2" : "py-4",
+        "px-2 border-t border-border bg-border/20 hover:bg-border/30 flex gap-1 flex-col text-sm",
+        property.deprecated && "opacity-50",
+      )}
+    >
+      <div className="flex items-center gap-2 relative">
+        <code>
+          {propertyName} {property.title}
+        </code>
+
+        {property.type && (
+          <span className="text-xs text-muted-foreground">{property.type}</span>
+        )}
+        {property.deprecated && (
+          <span className="text-xs text-muted-foreground">Deprecated</span>
+        )}
+        {!isRequired && (
+          <span className="py-px px-1.5 font-medium text-xs border border-border rounded-lg">
+            optional {property.required}
+          </span>
+        )}
+      </div>
+      {property.description && (
+        <Markdown
+          content={property.description}
+          className="text-sm leading-normal line-clamp-4 "
+        />
+      )}
+
+      {property.enum && (
+        <span className="text-sm text-muted-foreground flex gap-1 flex-wrap items-center">
+          <span>Possible values</span>
+          {property.enum
+            .filter((value) => value)
+            .map((value) => (
+              <span
+                key={value}
+                className="font-mono text-xs border-border border bg-muted rounded px-1"
+              >
+                {value}
+              </span>
+            ))
+            .slice(0, 4)}
+          {property.enum.length > 4 && (
+            <span className="font-mono text-xs border-border border bg-muted rounded px-1">
+              ...
+            </span>
+          )}
+        </span>
+      )}
+
+      <Collapsible.Root className="CollapsibleRoot" defaultOpen={false}>
+        {property.type === "object" ||
+        (property.type === "array" && property.items.type === "object") ? (
+          <Collapsible.Trigger asChild>
+            <Button variant="ghost" size="sm">
+              Show nested fields
+              <ListPlusIcon size={18} className="ml-1.5" />
+            </Button>
+          </Collapsible.Trigger>
+        ) : null}
+
+        <Collapsible.Content>
+          {property.type === "object" && (
+            <div className="mt-2.5">
+              <SchemaListView
+                schema={property}
+                level={nestingLevel + 1}
+                defaultOpen
+              />
+            </div>
+          )}
+          {property.type === "array" && property.items.type === "object" && (
+            <div className="mt-2.5">
+              <SchemaListView
+                schema={property.items}
+                defaultOpen
+                level={nestingLevel + 1}
+              />
+            </div>
+          )}
+        </Collapsible.Content>
+      </Collapsible.Root>
+    </div>
+  );
+};