zudoku 0.1.1-dev.29 → 0.1.1-dev.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.1.1-dev.29",
+  "version": "0.1.1-dev.30",
   "type": "module",
   "files": [
     "dist",
@@ -51,6 +51,7 @@
     "@lekoarts/rehype-meta-as-attributes": "3.0.1",
     "@mdx-js/react": "3.0.1",
     "@mdx-js/rollup": "3.0.1",
+    "@monaco-editor/react": "^4.6.0",
     "@pothos/core": "3.41.0",
     "@sentry/node": "8.11.0",
     "@stefanprobst/rehype-extract-toc": "2.2.0",
@@ -71,6 +72,14 @@
     "picocolors": "^1.0.1",
     "postcss": "8.4.39",
     "posthog-node": "^4.0.1",
+    "prism-react-renderer": "2.3.1",
+    "prismjs": "1.29.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-helmet-async": "2.0.5",
+    "react-hook-form": "^7.52.1",
+    "react-markdown": "9.0.1",
+    "react-router-dom": "6.23.0",
     "rehype-slug": "6.0.0",
     "remark-comment": "1.0.0",
     "remark-directive": "3.0.0",

package/src/lib/components/Dialog.tsx

@@ -1,15 +1,15 @@
-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { XIcon } from "lucide-react"
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
 import { cn } from "../util/cn.js";
 
-const Dialog = DialogPrimitive.Root
+const Dialog = DialogPrimitive.Root;
 
-const DialogTrigger = DialogPrimitive.Trigger
+const DialogTrigger = DialogPrimitive.Trigger;
 
-const DialogPortal = DialogPrimitive.Portal
+const DialogPortal = DialogPrimitive.Portal;
 
-const DialogClose = DialogPrimitive.Close
+const DialogClose = DialogPrimitive.Close;
 
 const DialogOverlay = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Overlay>,
@@ -19,12 +19,12 @@ const DialogOverlay = React.forwardRef<
     ref={ref}
     className={cn(
       "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
+      className,
     )}
     {...props}
   />
-))
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
@@ -35,8 +35,8 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg border-border",
+        className,
       )}
       {...props}
     >
@@ -47,36 +47,36 @@ const DialogContent = React.forwardRef<
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>
   </DialogPortal>
-))
-DialogContent.displayName = DialogPrimitive.Content.displayName
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogHeader = ({
-                        className,
-                        ...props
-                      }: React.HTMLAttributes<HTMLDivElement>) => (
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
       "flex flex-col space-y-1.5 text-center sm:text-left",
-      className
+      className,
     )}
     {...props}
   />
-)
-DialogHeader.displayName = "DialogHeader"
+);
+DialogHeader.displayName = "DialogHeader";
 
 const DialogFooter = ({
-                        className,
-                        ...props
-                      }: React.HTMLAttributes<HTMLDivElement>) => (
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
+      className,
     )}
     {...props}
   />
-)
-DialogFooter.displayName = "DialogFooter"
+);
+DialogFooter.displayName = "DialogFooter";
 
 const DialogTitle = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Title>,
@@ -86,12 +86,12 @@ const DialogTitle = React.forwardRef<
     ref={ref}
     className={cn(
       "text-lg font-semibold leading-none tracking-tight",
-      className
+      className,
     )}
     {...props}
   />
-))
-DialogTitle.displayName = DialogPrimitive.Title.displayName
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
 
 const DialogDescription = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Description>,
@@ -102,8 +102,8 @@ const DialogDescription = React.forwardRef<
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-))
-DialogDescription.displayName = DialogPrimitive.Description.displayName
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 export {
   Dialog,
@@ -116,4 +116,4 @@ export {
   DialogFooter,
   DialogTitle,
   DialogDescription,
-}
+};

package/src/lib/components/SyntaxHighlight.tsx

@@ -41,6 +41,10 @@ export const SyntaxHighlight = ({
   const [isDark] = useTheme();
   const [isCopied, setIsCopied] = useState(false);
 
+  if (!props.code) {
+    return null;
+  }
+
   return (
     <Highlight theme={isDark ? themes.vsDark : themes.github} {...props}>
       {({ className, style, tokens, getLineProps, getTokenProps }) => (

package/src/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;

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

@@ -27,7 +27,7 @@ export const MakeRequest = ({
         host={server.data?.schema.url}
         method={operation.method}
         url={operation.path}
-        defaultHeaders={[]}
+        // defaultHeaders={}
       />
       {identities.data.map((identity) => (
         <button

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

@@ -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/lib/plugins/openapi/playground/Editor.tsx

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

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

@@ -0,0 +1,66 @@
+import { Control, useFieldArray, UseFormRegister } from "react-hook-form";
+import { TrashIcon } from "lucide-react";
+import { InlineInput } from "./InlineInput.js";
+import type { PlaygroundForm, Header } from "./Playground.js";
+import { useEffect } from "react";
+
+export const Headers = ({
+  control,
+  register,
+  headers,
+}: {
+  register: UseFormRegister<PlaygroundForm>;
+  control: Control<PlaygroundForm>;
+  headers: Header[];
+}) => {
+  const { fields, append, remove } = useFieldArray<PlaygroundForm>({
+    control,
+    name: "headers",
+  });
+
+  const headersCount = headers.length;
+  const headersLastName = headers.at(-1)?.name;
+  const headersValue = headers.at(-1)?.value;
+
+  useEffect(() => {
+    if (headersCount === 0) {
+      append({ name: "", value: "" });
+    }
+    if (headersLastName !== "" || headersValue !== "") {
+      append({ name: "", value: "" });
+    }
+  }, [append, headersCount, headersLastName, headersValue]);
+
+  return (
+    <div className="grid grid-cols-[1fr_1fr_auto]">
+      {fields.map((header, i) => (
+        <div
+          key={header.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"
+        >
+          {/*<input type="checkbox" />*/}
+          <InlineInput
+            {...register(`headers.${i}.name`)}
+            placeholder="Name"
+            className="peer"
+          />
+          <InlineInput
+            placeholder={"Value"}
+            className="peer"
+            {...register(`headers.${i}.value`)}
+          />
+          <button
+            className="hover:bg-black/5 p-1 rounded mr-2 text-muted-foreground invisible group-hover:visible peer-focus:visible"
+            onClick={() => {
+              remove(i);
+            }}
+            disabled={fields.length === 1}
+          >
+            <TrashIcon size={16} />
+          </button>
+          <div className="col-span-full border-b  border-border"></div>
+        </div>
+      ))}
+    </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-8 font-mono text-xs m-2",
+);