zudoku 0.1.1-dev.47 → 0.1.1-dev.48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.1.1-dev.47",
+  "version": "0.1.1-dev.48",
   "type": "module",
   "files": [
     "dist",
@@ -54,6 +54,7 @@
     "@monaco-editor/react": "^4.6.0",
     "@pothos/core": "3.41.0",
     "@radix-ui/react-select": "2.1.1",
+    "@radix-ui/react-visually-hidden": "1.1.0",
     "@sentry/node": "8.11.0",
     "@stefanprobst/rehype-extract-toc": "2.2.0",
     "@tailwindcss/typography": "0.5.13",

package/src/lib/components/Select.tsx

@@ -16,14 +16,14 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
       className,
     )}
     {...props}
   >
-    {children}
+    <span className="truncate">{children}</span>
     <SelectPrimitive.Icon asChild>
-      <ChevronDown className="h-4 w-4 opacity-50" />
+      <ChevronDown className="flex-shrink-0 h-4 w-4 opacity-50" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ));

package/src/lib/components/index.ts

@@ -1,4 +1,3 @@
 export { useMDXComponents } from "@mdx-js/react";
 export { DevPortal } from "./DevPortal.js";
-export { DynamicIcon } from "./DynamicIcon.js";
 export { Link } from "./Link.js";

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

@@ -11,7 +11,6 @@ import type {
 import { cn } from "../../util/cn.js";
 import { joinPath } from "../../util/joinPath.js";
 import { AnchorLink } from "../AnchorLink.js";
-import { DynamicIcon, isValidIcon } from "../DynamicIcon.js";
 import { useNavigationCollapsibleState } from "./useNavigationCollapsibleState.js";
 import { checkHasActiveItem, isLinkItem, isPathItem } from "./util.js";
 
@@ -82,7 +81,7 @@ export const SideNavigationItem = ({
   const linkContent = (
     <div className="flex justify-between w-full">
       <div className="flex items-center gap-2 truncate w-full">
-        {isValidIcon(item.icon) && <DynamicIcon name={item.icon} size={16} />}
+        {item.icon}
         {typeof item.label !== "string" ? (
           item.label
         ) : (

package/src/lib/core/DevPortalContext.ts

@@ -14,12 +14,9 @@ import {
   type NavigationPlugin,
 } from "./plugins.js";
 
-import type { LucideIcon } from "lucide-react";
-import type { IconName } from "../components/DynamicIcon.js";
-
 export interface ApiIdentity {
   authorizeRequest: (request: Request) => Request;
-  name: string;
+  label: string;
   id: string;
 }
 
@@ -27,7 +24,7 @@ type BaseNavigationCategoryItem = {
   label: ReactNode;
   title?: string;
   muted?: boolean;
-  icon?: ReactNode | IconName;
+  icon?: ReactNode;
 };
 
 export type PathNavigationCategoryItem = BaseNavigationCategoryItem & {
@@ -48,7 +45,7 @@ export type NavigationCategory = {
   path?: string;
   expanded?: boolean;
   collapsible?: boolean;
-  icon?: LucideIcon;
+  icon?: ReactNode;
   children: NavigationCategoryItem[];
 };
 

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

@@ -189,7 +189,7 @@ const ParameterItem = builder
         resolve: (parent) =>
           Object.entries(parent.examples ?? {}).map(([name, value]) => ({
             name,
-            ...value,
+            ...(typeof value === "string" ? { value } : value),
           })),
         nullable: true,
       }),

package/src/lib/plugins/api-key/index.tsx

@@ -107,7 +107,7 @@ export const apiKeyPlugin = (
           return request;
         },
         id: key.id,
-        name: key.id,
+        label: key.description ?? key.id,
       }));
     },
     getRoutes: () => {

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

@@ -25,7 +25,7 @@ export const MakeRequest = ({
     ?.filter((p) => p.in === "header")
     ?.map((p) => ({
       name: p.name,
-      value: "",
+      value: p.examples?.find((x) => x.value)?.value ?? "",
     }));
   const queryParams = operation.parameters
     ?.filter((p) => p.in === "query")

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

@@ -24,6 +24,13 @@ export const OperationsFragment = graphql(/* GraphQL */ `
       required
       schema
       style
+      examples {
+        name
+        description
+        externalValue
+        value
+        summary
+      }
     }
     requestBody {
       content {

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

@@ -55,6 +55,7 @@ export const SchemaListView = ({
         {Object.entries(groups).map(([group, properties]) => {
           return (
             <SchemaListViewItemGroup
+              key={group}
               defaultOpen={defaultOpen}
               group={group as any}
               nestingLevel={level}
@@ -112,6 +113,7 @@ const SchemaListViewItemGroup = ({
       <Collapsible.Content>
         {properties.map(([propertyName, property]) => (
           <SchemaListViewItem
+            key={propertyName}
             property={property}
             propertyName={propertyName}
             nestingLevel={nestingLevel}
@@ -149,19 +151,16 @@ const SchemaListViewItem = ({
         </code>
 
         {property.type && (
-          <span className="text-muted-foreground">{property.type}</span>
+          <span className="text-xs text-muted-foreground">{property.type}</span>
         )}
         {property.deprecated && (
-          <span className="text-muted-foreground">Deprecated</span>
+          <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>
         )}
-        {/*{property.type === "object" && (*/}
-        {/*  <div className="absolute right-3">+</div>*/}
-        {/*)}*/}
       </div>
       {property.description && (
         <Markdown

package/src/lib/plugins/openapi/graphql/gql.ts

@@ -15,7 +15,7 @@ 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,
@@ -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.
  */

package/src/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";
@@ -301,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" },
+                      },
+                    ],
+                  },
+                },
               ],
             },
           },
@@ -590,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" },
+                      },
+                    ],
+                  },
+                },
               ],
             },
           },

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

@@ -1,15 +1,13 @@
 import {
   Dialog,
   DialogContent,
-  DialogDescription,
-  DialogHeader,
   DialogTitle,
   DialogTrigger,
 } from "../../../components/Dialog.js";
-import { Card, CardContent } from "../../../ui/Card.js";
+import { Card } from "../../../ui/Card.js";
 import { Button } from "../../../ui/Button.js";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../../ui/Tabs.js";
-import { Fragment, useMemo } from "react";
+import { Fragment } from "react";
 import { SyntaxHighlight } from "../../../components/SyntaxHighlight.js";
 import { ColorizedParam } from "../ColorizedParam.js";
 import { useMutation } from "@tanstack/react-query";
@@ -17,11 +15,18 @@ import { FormProvider, useForm } from "react-hook-form";
 import { Headers } from "./Headers.js";
 import { QueryParams } from "./QueryParams.js";
 import { PathParams } from "./PathParams.js";
-import { CirclePlayIcon, LoaderCircle, MonitorCheckIcon } from "lucide-react";
+import { CirclePlayIcon } 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";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../../../components/Select.js";
+import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 
 function mimeTypeToLanguage(mimeType: string) {
   const mimeTypeMapping = {
@@ -72,8 +77,11 @@ export type PlaygroundForm = {
   queryParams: QueryParam[];
   pathParams: PathParam[];
   headers: Header[];
+  identity?: string;
 };
 
+const NO_IDENTITY = "__none";
+
 const Playground = ({
   url,
   host,
@@ -98,6 +106,7 @@ const Playground = ({
         queryParams,
         headers,
         pathParams,
+        identity: NO_IDENTITY,
       },
     });
   const formState = watch();
@@ -107,7 +116,8 @@ const Playground = ({
     mutationFn: async (data: PlaygroundForm) => {
       const requestUrl = createUrl(host, url, data);
       const start = performance.now();
-      const response = await fetch(requestUrl, {
+
+      const request = new Request(requestUrl, {
         method: method.toUpperCase(),
         headers: Object.fromEntries(
           data.pathParams
@@ -116,6 +126,14 @@ const Playground = ({
         ),
       });
 
+      if (data.identity !== NO_IDENTITY) {
+        identities.data
+          ?.find((i) => i.id === data.identity)
+          ?.authorizeRequest(request);
+      }
+
+      const response = await fetch(request);
+
       const body = await response.text();
 
       return {
@@ -176,7 +194,13 @@ const Playground = ({
         />
       </DialogTrigger>
 
-      <DialogContent className="max-w-screen-xl w-full h-5/6 overflow-auto p-0">
+      <DialogContent
+        className="max-w-screen-xl w-full h-5/6 overflow-auto p-0"
+        aria-describedby={undefined}
+      >
+        <VisuallyHidden>
+          <DialogTitle>Playground</DialogTitle>
+        </VisuallyHidden>
         <FormProvider {...{ register, control, handleSubmit, watch, ...form }}>
           <form
             onSubmit={handleSubmit((data) => {
@@ -201,24 +225,47 @@ const Playground = ({
                   </Button>
                 </div>
                 <Tabs defaultValue={hasParams ? "parameters" : "headers"}>
-                  <TabsList>
-                    {hasParams && (
-                      <TabsTrigger value="parameters">Parameters</TabsTrigger>
-                    )}
-                    <TabsTrigger value="headers">
-                      Headers{" "}
-                      {formState.headers.length > 0 &&
-                        `(${formState.headers.length})`}
-                    </TabsTrigger>
-                    <TabsTrigger
-                      value="body"
-                      disabled={["POST", "PUT", "PATCH", "DELETE"].includes(
-                        method.toUpperCase(),
+                  <div className="flex justify-between">
+                    <TabsList>
+                      {hasParams && (
+                        <TabsTrigger value="parameters">Parameters</TabsTrigger>
                       )}
-                    >
-                      Body
-                    </TabsTrigger>
-                  </TabsList>
+                      <TabsTrigger value="headers">
+                        Headers{" "}
+                        {formState.headers.length > 0 &&
+                          `(${formState.headers.length})`}
+                      </TabsTrigger>
+                      <TabsTrigger
+                        value="body"
+                        disabled={["POST", "PUT", "PATCH", "DELETE"].includes(
+                          method.toUpperCase(),
+                        )}
+                      >
+                        Body
+                      </TabsTrigger>
+                    </TabsList>
+                    <div className="flex gap-2 items-center">
+                      Auth:
+                      <Select
+                        onValueChange={(value) =>
+                          form.setValue("identity", value)
+                        }
+                        defaultValue={formState.identity}
+                      >
+                        <SelectTrigger className="w-[180px]">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent align="center">
+                          <SelectItem value={NO_IDENTITY}>None</SelectItem>
+                          {identities.data?.map((identity) => (
+                            <SelectItem key={identity.id} value={identity.id}>
+                              {identity.label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
                   <TabsContent value="headers">
                     <Headers
                       control={control}

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

@@ -20,9 +20,6 @@ const QueryParamActive = ({
   const value = useWatch({ control, name: `queryParams.${i}.value` });
   const active = useWatch({ control, name: `queryParams.${i}.active` });
   const form = useFormContext<PlaygroundForm>();
-  const dirty = form.formState.dirtyFields;
-
-  console.log("dirty fields", dirty);
 
   useEffect(() => {
     if (value) {

package/dist/lib/components/DynamicIcon.d.ts

@@ -1,6 +0,0 @@
-export type IconName = string;
-export declare function isValidIcon(name: unknown): name is IconName;
-export declare const DynamicIcon: (props: {
-    name: string;
-    size?: number;
-}) => import("react/jsx-runtime").JSX.Element;

package/dist/lib/components/DynamicIcon.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-export function isValidIcon(name) {
-    return true;
-}
-export const DynamicIcon = (props) => (_jsx("div", {}));
-//# sourceMappingURL=DynamicIcon.js.map

package/dist/lib/components/DynamicIcon.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DynamicIcon.js","sourceRoot":"","sources":["../../../src/lib/components/DynamicIcon.tsx"],"names":[],"mappings":";AAqDA,MAAM,UAAU,WAAW,CAAC,IAAa;IACvC,OAAO,IAAI,CAAC;AACd,CAAC;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAsC,EAAE,EAAE,CAAC,CACrE,eAAW,CACZ,CAAC"}

package/src/lib/components/DynamicIcon.tsx

@@ -1,60 +0,0 @@
-// import { type LucideProps } from "lucide-react";
-// import dynamicIconImports from "lucide-react/dynamicIconImports.js";
-// import { Suspense, lazy, memo } from "react";
-// import { cn } from "../util/cn.js";
-
-// export type IconName = keyof typeof dynamicIconImports;
-
-// const IconNames = Object.keys(dynamicIconImports) as IconName[];
-
-// export const isValidIcon = (name: unknown): name is IconName =>
-//   typeof name === "string" && IconNames.includes(name as IconName);
-
-// type IconProps = Omit<LucideProps, "ref"> & {
-//   name: IconName;
-//   inline?: boolean;
-// };
-
-// const Fallback = ({
-//   inline,
-//   size,
-// }: {
-//   inline?: boolean;
-//   size?: string | number;
-// }) => (
-//   <span
-//     className={cn(inline ? "inline-block" : "block", "bg-background")}
-//     style={{ height: size, width: size }}
-//     role="presentation"
-//   />
-// );
-
-// export const DynamicIcon = memo(function ({
-//   name,
-//   inline,
-//   className,
-//   size = 16,
-//   ...props
-// }: IconProps) {
-//   const LucideIcon = lazy(dynamicIconImports[name]);
-
-//   return (
-//     <Suspense fallback={<Fallback inline={inline} size={size} />}>
-//       <LucideIcon
-//         {...props}
-//         size={size}
-//         className={cn(inline && "inline-block align-[-0.125em]", className)}
-//       />
-//     </Suspense>
-//   );
-// });
-
-export type IconName = string;
-
-export function isValidIcon(name: unknown): name is IconName {
-  return true;
-}
-
-export const DynamicIcon = (props: { name: string; size?: number }) => (
-  <div></div>
-);