zudoku 0.1.1-dev.47 → 0.1.1-dev.49

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

@@ -1,27 +1,32 @@
+import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
+import { useMutation } from "@tanstack/react-query";
+import { CirclePlayIcon } from "lucide-react";
+import { Fragment } from "react";
+import { FormProvider, useForm } from "react-hook-form";
+import { useApiIdentities } from "../../../components/context/DevPortalProvider.js";
 import {
   Dialog,
   DialogContent,
-  DialogDescription,
-  DialogHeader,
   DialogTitle,
   DialogTrigger,
 } from "../../../components/Dialog.js";
-import { Card, CardContent } from "../../../ui/Card.js";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../../../components/Select.js";
+import { Spinner } from "../../../components/Spinner.js";
+import { SyntaxHighlight } from "../../../components/SyntaxHighlight.js";
 import { Button } from "../../../ui/Button.js";
+import { Card } from "../../../ui/Card.js";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../../ui/Tabs.js";
-import { Fragment, useMemo } from "react";
-import { SyntaxHighlight } from "../../../components/SyntaxHighlight.js";
 import { ColorizedParam } from "../ColorizedParam.js";
-import { useMutation } from "@tanstack/react-query";
-import { FormProvider, useForm } from "react-hook-form";
+import { createUrl } from "./createUrl.js";
 import { Headers } from "./Headers.js";
-import { QueryParams } from "./QueryParams.js";
 import { PathParams } from "./PathParams.js";
-import { CirclePlayIcon, LoaderCircle, MonitorCheckIcon } 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 { QueryParams } from "./QueryParams.js";
 
 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 {
@@ -134,9 +152,6 @@ const Playground = ({
         <ColorizedParam
           name={part}
           backgroundOpacity="0"
-          onClick={() => {
-            console.log("asd");
-          }}
           slug={part.slice(1, -1)}
         >
           {
@@ -176,7 +191,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 +222,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}
@@ -283,7 +327,7 @@ const Playground = ({
                             noBackground
                             className="overflow-x-auto "
                             code={
-                              queryMutation.data?.body ?? JSON.stringify("")
+                              queryMutation.data.body ?? JSON.stringify("")
                             }
                           />
                         </Card>

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

@@ -1,3 +1,6 @@
+import logger from "loglevel";
+import { XIcon } from "lucide-react";
+import { useEffect } from "react";
 import {
   Control,
   Controller,
@@ -5,10 +8,8 @@ import {
   useFormContext,
   useWatch,
 } from "react-hook-form";
-import { XIcon } from "lucide-react";
 import { InlineInput } from "./InlineInput.js";
 import { PlaygroundForm } from "./Playground.js";
-import { useEffect } from "react";
 
 const QueryParamActive = ({
   i,
@@ -20,13 +21,10 @@ 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) {
-      console.log(`queryParams.${i}.active`, active);
+      logger.log(`queryParams.${i}.active`, active);
       form.setValue(`queryParams.${i}.active`, true);
     }
   }, [value]);

package/src/lib/plugins/openapi/util/generateSchemaExample.ts

@@ -50,7 +50,6 @@ function processComplexTypes(schema: SchemaObject, name?: string): any {
 
 function getDefaultForType(type?: string | string[]): any {
   if (Array.isArray(type)) {
-    debugger;
     return getDefaultForSingleType(type[0]);
   }
   return getDefaultForSingleType(type);

package/src/lib/plugins/openapi/worker/createSharedWorkerClient.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import { monotonicFactory } from "ulidx";
 import { createWaitForNotify } from "../../../util/createWaitForNotify.js";
 import {

package/src/lib/ui/Button.tsx

@@ -1,56 +1,25 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "@radix-ui/react-slot";
+import { VariantProps } from "class-variance-authority";
+import * as React from "react";
 import { cn } from "../util/cn.js";
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
-  {
-    variants: {
-      variant: {
-        default:
-          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-        outline:
-          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-        secondary:
-          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
+import { buttonVariants } from "./button-variants.js";
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
-  asChild?: boolean
+  asChild?: boolean;
 }
 
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
+    const Comp = asChild ? Slot : "button";
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
         {...props}
       />
-    )
-  }
-)
-Button.displayName = "Button"
-
-export { Button, buttonVariants }
+    );
+  },
+);
+Button.displayName = "Button";

package/src/lib/ui/button-variants.ts

@@ -0,0 +1,31 @@
+import { cva } from "class-variance-authority";
+
+export const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);

package/src/lib/util/MdxComponents.tsx

@@ -18,17 +18,41 @@ export const MdxComponents = {
     }
     return <img {...props} className="rounded-md" />;
   },
-  h1: ({ children, id }) => <Heading level={1} id={id} children={children} />,
-  h2: ({ children, id }) => <Heading level={2} id={id} children={children} />,
-  h3: ({ children, id }) => <Heading level={3} id={id} children={children} />,
-  h4: ({ children, id }) => <Heading level={4} id={id} children={children} />,
-  h5: ({ children, id }) => <Heading level={5} id={id} children={children} />,
-  h6: ({ children, id }) => <Heading level={6} id={id} children={children} />,
+  h1: ({ children, id }) => (
+    <Heading level={1} id={id}>
+      {children}
+    </Heading>
+  ),
+  h2: ({ children, id }) => (
+    <Heading level={2} id={id}>
+      {children}
+    </Heading>
+  ),
+  h3: ({ children, id }) => (
+    <Heading level={3} id={id}>
+      {children}
+    </Heading>
+  ),
+  h4: ({ children, id }) => (
+    <Heading level={4} id={id}>
+      {children}
+    </Heading>
+  ),
+  h5: ({ children, id }) => (
+    <Heading level={5} id={id}>
+      {children}
+    </Heading>
+  ),
+  h6: ({ children, id }) => (
+    <Heading level={6} id={id}>
+      {children}
+    </Heading>
+  ),
   a: ({ href, ...props }) =>
     href && !href.startsWith("http") ? (
       <Link to={href} relative="path" {...props} />
     ) : (
-      <a href={href} target="_blank" {...props} />
+      <a href={href} target="_blank" {...props} rel="noreferrer" />
     ),
   Callout,
   tip: (props) => <Callout type="tip" {...props} />,

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/dist/lib/oas/graphql/server.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/lib/oas/graphql/server.js

@@ -1,8 +0,0 @@
-import { createServer } from "node:http";
-import { createGraphQLServer } from "./index.js";
-const yoga = createGraphQLServer();
-const server = createServer(yoga);
-server.listen(4000, () => {
-    console.log(`🚀 Server ready at  http://localhost:4000/graphql`);
-});
-//# sourceMappingURL=server.js.map

package/dist/lib/oas/graphql/server.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"server.js","sourceRoot":"","sources":["../../../../src/lib/oas/graphql/server.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAEjD,MAAM,IAAI,GAAG,mBAAmB,EAAE,CAAC;AAEnC,MAAM,MAAM,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;AAElC,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,GAAG,EAAE;IACvB,OAAO,CAAC,GAAG,CAAC,mDAAmD,CAAC,CAAC;AACnE,CAAC,CAAC,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>
-);

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

@@ -1,10 +0,0 @@
-import { createServer } from "node:http";
-import { createGraphQLServer } from "./index.js";
-
-const yoga = createGraphQLServer();
-
-const server = createServer(yoga);
-
-server.listen(4000, () => {
-  console.log(`🚀 Server ready at  http://localhost:4000/graphql`);
-});