@mehdad67/apitogo 0.1.24

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

@@ -0,0 +1,120 @@
+import { Button } from "@lukoweb/apitogo/components";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@lukoweb/apitogo/ui/Collapsible.js";
+import {
+  NativeSelect,
+  NativeSelectOption,
+} from "@lukoweb/apitogo/ui/NativeSelect.js";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@lukoweb/apitogo/ui/Tooltip.js";
+import { ChevronsDownUpIcon, ChevronsUpDownIcon, InfoIcon } from "lucide-react";
+import { useEffect, useState } from "react";
+import type { ResponseItem } from "./graphql/graphql.js";
+import * as SidecarBox from "./SidecarBox.js";
+import { SidecarExamples } from "./SidecarExamples.js";
+
+export const ResponsesSidecarBox = ({
+  responses,
+  selectedResponse,
+  isOnScreen,
+  shouldLazyHighlight,
+  isGenerated,
+}: {
+  responses: ResponseItem[];
+  selectedResponse?: string;
+  isOnScreen: boolean;
+  shouldLazyHighlight?: boolean;
+  isGenerated?: boolean;
+}) => {
+  const [internalSelectedResponse, setInternalSelectedResponse] = useState(
+    selectedResponse ?? responses[0]?.statusCode,
+  );
+  const [selectedContentIndex, setSelectedContentIndex] = useState(0);
+  const [selectedExampleIndex, setSelectedExampleIndex] = useState(0);
+
+  useEffect(() => {
+    if (!selectedResponse) return;
+
+    setInternalSelectedResponse(selectedResponse);
+  }, [selectedResponse]);
+
+  useEffect(() => {
+    if (!internalSelectedResponse) return;
+
+    setSelectedContentIndex(0);
+    setSelectedExampleIndex(0);
+  }, [internalSelectedResponse]);
+
+  return (
+    <Collapsible className="group/collapsible" defaultOpen>
+      <SidecarBox.Root>
+        <SidecarBox.Head className="text-xs flex justify-between items-center">
+          <div className="flex items-center gap-1 font-medium shrink-0">
+            <CollapsibleTrigger asChild>
+              <Button
+                variant="ghost"
+                className="size-fit px-1 py-1 -my-1"
+                aria-label="Toggle response examples"
+              >
+                <ChevronsDownUpIcon className="size-[1em] group-data-[state=closed]/collapsible:hidden" />
+                <ChevronsUpDownIcon className="size-[1em] group-data-[state=open]/collapsible:hidden" />
+              </Button>
+            </CollapsibleTrigger>
+            Example Responses
+            {isGenerated && (
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <InfoIcon size={13} />
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    This example is auto-generated from the schema.
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            )}
+          </div>
+          <div className="group-data-[state=closed]/collapsible:invisible">
+            <NativeSelect
+              className="text-xs h-fit py-1 -my-1 bg-background"
+              value={internalSelectedResponse}
+              onChange={(e) => setInternalSelectedResponse(e.target.value)}
+            >
+              {responses.map((response) => (
+                <NativeSelectOption
+                  key={response.statusCode}
+                  value={response.statusCode}
+                >
+                  {response.statusCode}
+                </NativeSelectOption>
+              ))}
+            </NativeSelect>
+          </div>
+        </SidecarBox.Head>
+        <CollapsibleContent>
+          <SidecarExamples
+            selectedContentIndex={selectedContentIndex}
+            selectedExampleIndex={selectedExampleIndex}
+            onExampleChange={(selected) => {
+              setSelectedContentIndex(selected.contentTypeIndex);
+              setSelectedExampleIndex(selected.exampleIndex);
+            }}
+            content={
+              responses.find((r) => r.statusCode === internalSelectedResponse)
+                ?.content ?? []
+            }
+            isOnScreen={isOnScreen}
+            shouldLazyHighlight={shouldLazyHighlight}
+          />
+        </CollapsibleContent>
+      </SidecarBox.Root>
+    </Collapsible>
+  );
+};

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

@@ -0,0 +1,344 @@
+import { Separator } from "@lukoweb/apitogo/ui/Separator.js";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { Helmet } from "@zudoku/react-helmet-async";
+import {
+  BracesIcon,
+  GlobeIcon,
+  InfoIcon,
+  MailIcon,
+  TagIcon,
+  WebhookIcon,
+} from "lucide-react";
+import type { PropsWithChildren, ReactNode } from "react";
+import { Link } from "react-router";
+import { Markdown } from "../../components/Markdown.js";
+import { PagefindSearchMeta } from "../../components/PagefindSearchMeta.js";
+import { Badge } from "../../ui/Badge.js";
+import { Button } from "../../ui/Button.js";
+import { Card, CardContent } from "../../ui/Card.js";
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemTitle,
+} from "../../ui/Item.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../../ui/Popover.js";
+import { slugify } from "../../util/slugify.js";
+import { ApiHeader } from "./ApiHeader.js";
+import { useCreateQuery } from "./client/useCreateQuery.js";
+import { useOasConfig } from "./context.js";
+import type { SchemaInfoQuery as SchemaInfoQueryType } from "./graphql/graphql.js";
+import { graphql } from "./graphql/index.js";
+import { useWarmupSchema } from "./util/useWarmupSchema.js";
+
+const SchemaInfoQuery = graphql(/* GraphQL */ `
+  query SchemaInfo($input: JSON!, $type: SchemaType!) {
+    schema(input: $input, type: $type) {
+      servers {
+        url
+        description
+      }
+      license {
+        name
+        url
+        identifier
+      }
+      termsOfService
+      externalDocs {
+        description
+        url
+      }
+      contact {
+        name
+        url
+        email
+      }
+      description
+      summary
+      title
+      url
+      version
+      tags {
+        name
+        description
+      }
+      components {
+        schemas {
+          name
+        }
+      }
+      webhooks {
+        name
+        method
+        summary
+        description
+      }
+    }
+  }
+`);
+
+const InfoLink = ({
+  href,
+  icon,
+  children,
+}: PropsWithChildren<{ href?: string; icon?: ReactNode }>) => (
+  <a
+    href={href}
+    className="inline-flex items-center gap-2 opacity-65 hover:opacity-100 [&_svg]:shrink-0 [&_svg]:size-3.5"
+    target="_blank"
+    rel="noopener noreferrer"
+  >
+    {icon}
+    <span className="truncate grow-0">{children}</span>
+  </a>
+);
+
+const InfoCardContent = ({
+  schema,
+}: {
+  schema: SchemaInfoQueryType["schema"];
+}) => {
+  const hasInfoLinks = !!(
+    schema.license ||
+    schema.termsOfService ||
+    schema.externalDocs
+  );
+  const hasContact = !!(
+    schema.contact?.name ||
+    schema.contact?.email ||
+    schema.contact?.url
+  );
+  const hasServers = schema.servers.length > 0;
+
+  return (
+    <CardContent className="flex flex-col gap-3 text-sm">
+      {hasInfoLinks && (
+        <div className="flex flex-col gap-1.5">
+          {schema.license && (
+            <InfoLink href={schema.license.url ?? undefined}>
+              {schema.license.name}
+            </InfoLink>
+          )}
+          {schema.termsOfService && (
+            <InfoLink href={schema.termsOfService}>Terms of Service</InfoLink>
+          )}
+          {schema.externalDocs && (
+            <InfoLink href={schema.externalDocs.url}>
+              {schema.externalDocs.description ?? "Documentation"}
+            </InfoLink>
+          )}
+        </div>
+      )}
+      {hasInfoLinks && (hasContact || hasServers) && <Separator />}
+      {hasContact && (
+        <div className="flex flex-col gap-1.5">
+          <span className="text-xs text-muted-foreground font-medium uppercase tracking-wide">
+            Contact
+          </span>
+          {schema.contact?.name && <span>{schema.contact.name}</span>}
+          {schema.contact?.email && (
+            <InfoLink
+              href={`mailto:${schema.contact.email}`}
+              icon={<MailIcon />}
+            >
+              {schema.contact.email}
+            </InfoLink>
+          )}
+          {schema.contact?.url && (
+            <InfoLink href={schema.contact.url} icon={<GlobeIcon />}>
+              {schema.contact.url}
+            </InfoLink>
+          )}
+        </div>
+      )}
+      {hasContact && hasServers && <Separator />}
+      {hasServers && (
+        <div className="flex flex-col gap-1.5">
+          <span className="text-xs text-muted-foreground font-medium uppercase tracking-wide">
+            Servers
+          </span>
+          {schema.servers.map((server) => (
+            <div key={server.url}>
+              <code className="text-xs select-all break-all">{server.url}</code>
+              {server.description && (
+                <p className="text-muted-foreground text-xs">
+                  {server.description}
+                </p>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </CardContent>
+  );
+};
+
+export const SchemaInfo = () => {
+  const { input, type } = useOasConfig();
+  const query = useCreateQuery(SchemaInfoQuery, { input, type });
+  const {
+    data: { schema },
+  } = useSuspenseQuery(query);
+  const { title, description } = schema;
+
+  useWarmupSchema();
+
+  const hasCardContent = !!(
+    schema.contact?.name ||
+    schema.contact?.email ||
+    schema.contact?.url ||
+    schema.servers.length > 0 ||
+    schema.license ||
+    schema.termsOfService ||
+    schema.externalDocs
+  );
+
+  const tags = schema.tags.flatMap(({ name, description }) =>
+    name ? { name, description } : [],
+  );
+
+  return (
+    <div
+      className="pt-(--padding-content-top)"
+      data-pagefind-filter="section:openapi"
+      data-pagefind-meta="section:openapi"
+    >
+      <PagefindSearchMeta name="category">{title}</PagefindSearchMeta>
+      <Helmet>
+        {title && <title>{title}</title>}
+        {description && <meta name="description" content={description} />}
+      </Helmet>
+
+      <div className="mb-8 flex flex-col gap-4">
+        <ApiHeader heading={title} headingId="description" />
+
+        <div className="grid grid-cols-1 xl:grid-cols-[1fr_minmax(250px,380px)] gap-8">
+          {hasCardContent && (
+            <div className="xl:hidden sticky top-(--top-nav-height) lg:top-(--scroll-padding) z-10 row-start-1 col-start-1 justify-self-end self-start">
+              <Popover>
+                <PopoverTrigger asChild>
+                  <Button
+                    variant="outline"
+                    size="icon"
+                    className="shadow-sm rounded-full"
+                  >
+                    <InfoIcon />
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent
+                  align="end"
+                  className="xl:hidden w-full max-w-full md:max-w-sm"
+                >
+                  <InfoCardContent schema={schema} />
+                </PopoverContent>
+              </Popover>
+            </div>
+          )}
+          <div className="flex flex-col gap-6 row-start-1 col-start-1">
+            {schema.summary && (
+              <p className="text-lg text-muted-foreground">{schema.summary}</p>
+            )}
+            {schema.description && (
+              <Markdown
+                className="prose-img:max-w-prose prose-sm max-w-full lg:max-w-2xl"
+                content={schema.description}
+              />
+            )}
+            {tags.length > 0 && (
+              <div>
+                <div className="flex items-center gap-2 text-sm uppercase tracking-wide text-muted-foreground mb-4">
+                  <TagIcon size={14} />
+                  Tags
+                </div>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  {tags.map((tag) => (
+                    <Item key={tag.name} variant="outline" asChild>
+                      <Link to={slugify(tag.name)}>
+                        <ItemContent>
+                          <ItemTitle>{tag.name}</ItemTitle>
+                          {tag.description && (
+                            <ItemDescription asChild>
+                              <Markdown
+                                components={{
+                                  // Because the description is wrapped in a <p> and a <Link> already
+                                  p: ({ children }) => children,
+                                  a: (props) => <span {...props} />,
+                                }}
+                                content={tag.description}
+                                className="prose-sm text-pretty"
+                              />
+                            </ItemDescription>
+                          )}
+                        </ItemContent>
+                      </Link>
+                    </Item>
+                  ))}
+                </div>
+              </div>
+            )}
+            {(schema.components?.schemas?.length ?? 0) > 0 && (
+              <div>
+                <div className="flex items-center gap-2 text-sm uppercase tracking-wide text-muted-foreground mb-4">
+                  <BracesIcon size={14} />
+                  Schemas
+                </div>
+                <div className="grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-4">
+                  {schema.components?.schemas?.map((s) => (
+                    <Item key={s.name} variant="outline" title={s.name} asChild>
+                      <Link to={`~schemas#${slugify(s.name)}`}>
+                        <span className="text-sm font-medium leading-snug truncate">
+                          {s.name}
+                        </span>
+                      </Link>
+                    </Item>
+                  ))}
+                </div>
+              </div>
+            )}
+            {schema.webhooks.length > 0 && (
+              <div>
+                <div className="flex items-center gap-2 text-sm uppercase tracking-wide text-muted-foreground mb-4">
+                  <WebhookIcon size={14} />
+                  Webhooks
+                </div>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  {schema.webhooks.map((webhook) => (
+                    <Item
+                      key={`${webhook.name}-${webhook.method}`}
+                      variant="outline"
+                    >
+                      <ItemContent>
+                        <ItemTitle>{webhook.name}</ItemTitle>
+                        {(webhook.summary || webhook.description) && (
+                          <ItemDescription>
+                            {webhook.summary ?? webhook.description}
+                          </ItemDescription>
+                        )}
+                      </ItemContent>
+                      <ItemActions>
+                        <Badge
+                          variant="muted"
+                          className="text-[10px] font-mono"
+                        >
+                          {webhook.method}
+                        </Badge>
+                      </ItemActions>
+                    </Item>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+          {hasCardContent && (
+            <div className="hidden xl:block">
+              <Card className="sticky top-(--scroll-padding)">
+                <InfoCardContent schema={schema} />
+              </Card>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,113 @@
+import { Button } from "@lukoweb/apitogo/ui/Button.js";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@lukoweb/apitogo/ui/Collapsible.js";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { Helmet } from "@zudoku/react-helmet-async";
+import { ChevronRightIcon } from "lucide-react";
+import { Heading } from "../../components/Heading.js";
+import { Toc } from "../../components/navigation/Toc.js";
+import { PagefindSearchMeta } from "../../components/PagefindSearchMeta.js";
+import { slugify } from "../../util/slugify.js";
+import { ApiHeader } from "./ApiHeader.js";
+import { useCreateQuery } from "./client/useCreateQuery.js";
+import { useOasConfig } from "./context.js";
+import { graphql } from "./graphql/gql.js";
+import { SchemaView } from "./schema/SchemaView.js";
+
+const GET_SCHEMAS = graphql(/* GraphQL */ `
+  query GetSchemas($input: JSON!, $type: SchemaType!) {
+    schema(input: $input, type: $type) {
+      title
+      description
+      summary
+      components {
+        schemas {
+          name
+          schema
+          extensions
+        }
+      }
+    }
+  }
+`);
+
+export function SchemaList() {
+  const { input, type, versions, version, options } = useOasConfig();
+  const schemasQuery = useCreateQuery(GET_SCHEMAS, {
+    input,
+    type,
+  });
+  const { data } = useSuspenseQuery(schemasQuery);
+
+  const title = data.schema.title;
+  const schemas = data.schema.components?.schemas ?? [];
+  const hasMultipleVersions = Object.entries(versions).length > 1;
+  const showVersions =
+    options?.showVersionSelect === "always" ||
+    (hasMultipleVersions && options?.showVersionSelect !== "hide");
+
+  if (!schemas.length) {
+    return (
+      <div>
+        <Helmet>
+          <title>Schemas {showVersions ? version : ""}</title>
+          <meta name="description" content="List of schemas used by the API." />
+        </Helmet>
+        No schemas found
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="grid grid-cols-(--sidecar-grid-cols) gap-8 justify-between"
+      data-pagefind-filter="section:openapi"
+      data-pagefind-meta="section:openapi"
+    >
+      <PagefindSearchMeta name="category">{title}</PagefindSearchMeta>
+      <Helmet>
+        <title>Schemas {showVersions ? version : ""}</title>
+        <meta name="description" content="List of schemas used by the API." />
+      </Helmet>
+      <div className="pt-(--padding-content-top) pb-(--padding-content-bottom)">
+        <ApiHeader title={title} heading="Schemas" headingId="schemas" />
+        <hr className="my-8" />
+        <div className="flex flex-col gap-y-5">
+          {schemas.map((schema) => (
+            <Collapsible key={schema.name} className="group" defaultOpen>
+              <Heading
+                registerNavigationAnchor
+                level={2}
+                className="flex items-center gap-1 justify-between w-fit"
+                id={slugify(schema.name)}
+              >
+                {schema.name}{" "}
+                <CollapsibleTrigger asChild>
+                  <Button variant="ghost" size="icon" className="size-6">
+                    <ChevronRightIcon
+                      size={16}
+                      className="group-data-[state=open]:rotate-90 transition cursor-pointer"
+                    />
+                  </Button>
+                </CollapsibleTrigger>
+              </Heading>
+              <CollapsibleContent className="mt-4 CollapsibleContent">
+                <SchemaView schema={schema.schema} />
+              </CollapsibleContent>
+            </Collapsible>
+          ))}
+        </div>
+      </div>
+      <Toc
+        entries={schemas.map((schema) => ({
+          id: slugify(schema.name),
+          text: schema.name,
+          depth: 1,
+        }))}
+      />
+    </div>
+  );
+}