zudoku 0.1.1-dev.9 → 0.3.0-dev.11

package/src/{app → lib}/plugins/openapi/graphql/gql.ts

@@ -1,6 +1,6 @@
 /* eslint-disable */
-import * as types from "./graphql.js";
 import type { TypedDocumentNode as DocumentNode } from "@graphql-typed-document-node/core";
+import * as types from "./graphql.js";
 
 /**
  * Map of all GraphQL operations in the project.
@@ -15,11 +15,11 @@ import type { TypedDocumentNode as DocumentNode } from "@graphql-typed-document-
 const documents = {
   "\n  query getServerQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n    }\n  }\n":
     types.GetServerQueryDocument,
-  "\n  fragment OperationsFragment on OperationItem {\n    slug\n    summary\n    method\n    description\n    operationId\n    contentTypes\n    path\n    parameters {\n      name\n      in\n      description\n      required\n      schema\n      style\n    }\n    requestBody {\n      content {\n        mediaType\n        encoding {\n          name\n        }\n        schema\n      }\n      description\n      required\n    }\n    responses {\n      statusCode\n      links\n      description\n      content {\n        mediaType\n        encoding {\n          name\n        }\n        schema\n      }\n    }\n  }\n":
+  "\n  fragment OperationsFragment on OperationItem {\n    slug\n    summary\n    method\n    description\n    operationId\n    contentTypes\n    path\n    parameters {\n      name\n      in\n      description\n      required\n      schema\n      style\n      examples {\n        name\n        description\n        externalValue\n        value\n        summary\n      }\n    }\n    requestBody {\n      content {\n        mediaType\n        encoding {\n          name\n        }\n        schema\n      }\n      description\n      required\n    }\n    responses {\n      statusCode\n      links\n      description\n      content {\n        mediaType\n        encoding {\n          name\n        }\n        schema\n      }\n    }\n  }\n":
     types.OperationsFragmentFragmentDoc,
   "\n  query AllOperations($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      description\n      title\n      url\n      version\n      tags {\n        name\n        description\n        operations {\n          slug\n          ...OperationsFragment\n        }\n      }\n    }\n  }\n":
     types.AllOperationsDocument,
-  "\n  query GetCategories($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      tags {\n        __typename\n        name\n        operations {\n          __typename\n          slug\n          method\n          summary\n          operationId\n          path\n        }\n      }\n    }\n  }\n":
+  "\n  query GetCategories($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      tags {\n        __typename\n        name\n        operations {\n          __typename\n          slug\n          deprecated\n          method\n          summary\n          operationId\n          path\n        }\n      }\n    }\n  }\n":
     types.GetCategoriesDocument,
 };
 
@@ -47,8 +47,8 @@ export function graphql(
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(
-  source: "\n  fragment OperationsFragment on OperationItem {\n    slug\n    summary\n    method\n    description\n    operationId\n    contentTypes\n    path\n    parameters {\n      name\n      in\n      description\n      required\n      schema\n      style\n    }\n    requestBody {\n      content {\n        mediaType\n        encoding {\n          name\n        }\n        schema\n      }\n      description\n      required\n    }\n    responses {\n      statusCode\n      links\n      description\n      content {\n        mediaType\n        encoding {\n          name\n        }\n        schema\n      }\n    }\n  }\n",
-): (typeof documents)["\n  fragment OperationsFragment on OperationItem {\n    slug\n    summary\n    method\n    description\n    operationId\n    contentTypes\n    path\n    parameters {\n      name\n      in\n      description\n      required\n      schema\n      style\n    }\n    requestBody {\n      content {\n        mediaType\n        encoding {\n          name\n        }\n        schema\n      }\n      description\n      required\n    }\n    responses {\n      statusCode\n      links\n      description\n      content {\n        mediaType\n        encoding {\n          name\n        }\n        schema\n      }\n    }\n  }\n"];
+  source: "\n  fragment OperationsFragment on OperationItem {\n    slug\n    summary\n    method\n    description\n    operationId\n    contentTypes\n    path\n    parameters {\n      name\n      in\n      description\n      required\n      schema\n      style\n      examples {\n        name\n        description\n        externalValue\n        value\n        summary\n      }\n    }\n    requestBody {\n      content {\n        mediaType\n        encoding {\n          name\n        }\n        schema\n      }\n      description\n      required\n    }\n    responses {\n      statusCode\n      links\n      description\n      content {\n        mediaType\n        encoding {\n          name\n        }\n        schema\n      }\n    }\n  }\n",
+): (typeof documents)["\n  fragment OperationsFragment on OperationItem {\n    slug\n    summary\n    method\n    description\n    operationId\n    contentTypes\n    path\n    parameters {\n      name\n      in\n      description\n      required\n      schema\n      style\n      examples {\n        name\n        description\n        externalValue\n        value\n        summary\n      }\n    }\n    requestBody {\n      content {\n        mediaType\n        encoding {\n          name\n        }\n        schema\n      }\n      description\n      required\n    }\n    responses {\n      statusCode\n      links\n      description\n      content {\n        mediaType\n        encoding {\n          name\n        }\n        schema\n      }\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -59,8 +59,8 @@ export function graphql(
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(
-  source: "\n  query GetCategories($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      tags {\n        __typename\n        name\n        operations {\n          __typename\n          slug\n          method\n          summary\n          operationId\n          path\n        }\n      }\n    }\n  }\n",
-): (typeof documents)["\n  query GetCategories($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      tags {\n        __typename\n        name\n        operations {\n          __typename\n          slug\n          method\n          summary\n          operationId\n          path\n        }\n      }\n    }\n  }\n"];
+  source: "\n  query GetCategories($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      tags {\n        __typename\n        name\n        operations {\n          __typename\n          slug\n          deprecated\n          method\n          summary\n          operationId\n          path\n        }\n      }\n    }\n  }\n",
+): (typeof documents)["\n  query GetCategories($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      tags {\n        __typename\n        name\n        operations {\n          __typename\n          slug\n          deprecated\n          method\n          summary\n          operationId\n          path\n        }\n      }\n    }\n  }\n"];
 
 export function graphql(source: string) {
   return (documents as any)[source] ?? {};

package/src/{app → lib}/plugins/openapi/graphql/graphql.ts

@@ -190,6 +190,14 @@ export type OperationsFragmentFragment = {
     required?: boolean | null;
     schema?: any | null;
     style?: string | null;
+    examples?: Array<{
+      __typename?: "ExampleItem";
+      name: string;
+      description?: string | null;
+      externalValue?: string | null;
+      value?: string | null;
+      summary?: string | null;
+    }> | null;
   }> | null;
   requestBody?: {
     __typename?: "RequestBodyObject";
@@ -259,6 +267,7 @@ export type GetCategoriesQuery = {
       operations: Array<{
         __typename: "OperationItem";
         slug: string;
+        deprecated?: boolean | null;
         method: string;
         summary?: string | null;
         operationId?: string | null;
@@ -300,6 +309,29 @@ export const OperationsFragmentFragmentDoc = {
                 { kind: "Field", name: { kind: "Name", value: "required" } },
                 { kind: "Field", name: { kind: "Name", value: "schema" } },
                 { kind: "Field", name: { kind: "Name", value: "style" } },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "examples" },
+                  selectionSet: {
+                    kind: "SelectionSet",
+                    selections: [
+                      { kind: "Field", name: { kind: "Name", value: "name" } },
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "description" },
+                      },
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "externalValue" },
+                      },
+                      { kind: "Field", name: { kind: "Name", value: "value" } },
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "summary" },
+                      },
+                    ],
+                  },
+                },
               ],
             },
           },
@@ -589,6 +621,29 @@ export const AllOperationsDocument = {
                 { kind: "Field", name: { kind: "Name", value: "required" } },
                 { kind: "Field", name: { kind: "Name", value: "schema" } },
                 { kind: "Field", name: { kind: "Name", value: "style" } },
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "examples" },
+                  selectionSet: {
+                    kind: "SelectionSet",
+                    selections: [
+                      { kind: "Field", name: { kind: "Name", value: "name" } },
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "description" },
+                      },
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "externalValue" },
+                      },
+                      { kind: "Field", name: { kind: "Name", value: "value" } },
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "summary" },
+                      },
+                    ],
+                  },
+                },
               ],
             },
           },
@@ -763,6 +818,10 @@ export const GetCategoriesDocument = {
                               kind: "Field",
                               name: { kind: "Name", value: "slug" },
                             },
+                            {
+                              kind: "Field",
+                              name: { kind: "Name", value: "deprecated" },
+                            },
                             {
                               kind: "Field",
                               name: { kind: "Name", value: "method" },

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

@@ -13,7 +13,8 @@ import {
   cacheExchange,
   fetchExchange,
 } from "./util/urql.js";
-import { createSharedWorkerClient } from "./worker/createSharedWorkerClient.js";
+
+import { createSharedWorkerClient } from "virtual:zudoku-openapi-worker";
 
 const OasContext = createContext<{ config: OasPluginConfig } | undefined>(
   undefined,
@@ -64,6 +65,7 @@ const GetCategoriesQuery = graphql(`
         operations {
           __typename
           slug
+          deprecated
           method
           summary
           operationId
@@ -85,6 +87,22 @@ export const openApiPlugin = (config: OasPluginConfig): DevPortalPlugin => {
     : createSharedWorkerClient();
 
   return {
+    getHead: () => {
+      if (config.type === "url") {
+        return (
+          <link
+            rel="preload"
+            href={config.input}
+            as="fetch"
+            crossOrigin="anonymous"
+          />
+        );
+      }
+
+      if (config.server) {
+        return <link rel="preconnect" href={config.server} />;
+      }
+    },
     getNavigation: async (path: string) => {
       if (!matchPath({ path: basePath, end: false }, path)) {
         return [];
@@ -105,6 +123,7 @@ export const openApiPlugin = (config: OasPluginConfig): DevPortalPlugin => {
           collapsible: false,
           children: tag.operations.map((operation) => ({
             path: `#${operation.slug}`,
+            muted: !!operation.deprecated,
             title: operation.summary ?? operation.path,
             label: (
               <div className="flex flex-1 min-w-0 justify-between gap-2">

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

@@ -0,0 +1,4 @@
+export const Editor = () => {
+  // const XoXo = lazy(() => import("@monaco-editor/react"));
+  // return <XoXo />;
+};

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

@@ -0,0 +1,87 @@
+import { TriangleAlertIcon, XIcon } from "lucide-react";
+import {
+  Control,
+  useFieldArray,
+  UseFormRegister,
+  useWatch,
+} from "react-hook-form";
+import { Button } from "../../../ui/Button.js";
+import { cn } from "../../../util/cn.js";
+import { InlineInput } from "./InlineInput.js";
+import { NO_IDENTITY, type PlaygroundForm } from "./Playground.js";
+
+export const Headers = ({
+  control,
+  register,
+}: {
+  register: UseFormRegister<PlaygroundForm>;
+  control: Control<PlaygroundForm>;
+}) => {
+  const { fields, append, remove } = useFieldArray<PlaygroundForm>({
+    control,
+    name: "headers",
+  });
+  const selectedIdentity = useWatch({ name: "identity", control });
+  const liveHeaders = useWatch({ name: "headers", control });
+
+  const disableAuth = selectedIdentity !== NO_IDENTITY;
+
+  return (
+    <div className="grid grid-cols-[1fr_1fr_auto]">
+      {fields.map((header, i) => {
+        const isDisabledByAuth =
+          disableAuth && liveHeaders.at(i)?.name === "Authorization";
+
+        return (
+          <div
+            key={header.id}
+            className={cn(
+              "grid-cols-subgrid col-span-full grid items-center gap-x-2 has-[:focus]:bg-muted hover:bg-muted rounded overflow-hidden group",
+              isDisabledByAuth && "line-through",
+            )}
+            title={
+              isDisabledByAuth
+                ? "This header is disabled because authentication was selected"
+                : undefined
+            }
+          >
+            <div className="flex gap-2 items-center">
+              <InlineInput
+                {...register(`headers.${i}.name`)}
+                placeholder="Name"
+                className="peer"
+                autoComplete="off"
+              />
+              {isDisabledByAuth && (
+                <TriangleAlertIcon size={16} className="text-amber-500" />
+              )}
+            </div>
+            <InlineInput
+              placeholder={"Value"}
+              className="peer"
+              {...register(`headers.${i}.value`)}
+              autoComplete="off"
+            />
+            <button
+              className="hover:bg-black/5 p-1 rounded mr-2 text-muted-foreground invisible group-hover:visible peer-focus:visible"
+              onClick={() => {
+                remove(i);
+              }}
+              type="button"
+            >
+              <XIcon size={16} />
+            </button>
+            <div className="col-span-full border-b border-border"></div>
+          </div>
+        );
+      })}
+      <Button
+        className="col-span-full mt-4"
+        onClick={() => append({ name: "", value: "" })}
+        type="button"
+      >
+        Add header
+      </Button>
+    </div>
+  );
+};

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

@@ -0,0 +1,6 @@
+import createVariantComponent from "../../../util/createVariantComponent.js";
+
+export const InlineInput = createVariantComponent(
+  "input",
+  "px-2 bg-transparent h-6 font-mono text-xs m-2",
+);

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

@@ -0,0 +1,63 @@
+import { forwardRef, InputHTMLAttributes } from "react";
+import { Control, useFieldArray, UseFormRegister } from "react-hook-form";
+import { cn } from "../../../util/cn.js";
+import { DATA_ATTR, usePastellizedColor } from "../ColorizedParam.js";
+import { InlineInput } from "./InlineInput.js";
+import { PlaygroundForm } from "./Playground.js";
+
+type ParameterValueProps = {
+  part: string;
+} & InputHTMLAttributes<HTMLInputElement>;
+
+const ParameterValue = forwardRef<HTMLInputElement, ParameterValueProps>(
+  function ParameterValue({ part, className, ...props }, ref) {
+    const color = usePastellizedColor(part);
+    return (
+      <InlineInput
+        {...props}
+        ref={ref}
+        className={cn(className, "opacity-80 data-[active=true]:opacity-100")}
+        style={{
+          // color: `hsl(${color})`,
+          outlineColor: `hsl(${color})`,
+        }}
+      />
+    );
+  },
+);
+
+export const PathParams = ({
+  control,
+  register,
+}: {
+  register: UseFormRegister<PlaygroundForm>;
+  control: Control<PlaygroundForm>;
+}) => {
+  const { fields } = useFieldArray<PlaygroundForm>({
+    control,
+    name: "pathParams",
+  });
+
+  return fields.map((part, i) => (
+    <div
+      key={part.id}
+      className="grid-cols-subgrid col-span-full grid items-center gap-x-2 has-[:focus]:bg-muted hover:bg-muted rounded overflow-hidden group"
+    >
+      <InlineInput
+        {...register(`pathParams.${i}.name`)}
+        disabled
+        placeholder="Name"
+        className="peer"
+      />
+      <ParameterValue
+        {...register(`pathParams.${i}.value`)}
+        part={part.name}
+        {...{ [DATA_ATTR]: part.name }}
+        placeholder="Value"
+        className="peer"
+      />
+
+      <div className="col-span-full border-b border-border"></div>
+    </div>
+  ));
+};