zudoku 0.1.1-dev.31 → 0.1.1-dev.33

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

@@ -2,78 +2,110 @@ import {
   Control,
   Controller,
   useFieldArray,
-  UseFormRegister,
+  useFormContext,
+  useWatch,
 } from "react-hook-form";
-import { TrashIcon } from "lucide-react";
+import { XIcon } from "lucide-react";
 import { InlineInput } from "./InlineInput.js";
-import { PlaygroundForm, QueryParam } from "./Playground.js";
+import { PlaygroundForm } from "./Playground.js";
 import { useEffect } from "react";
 
-export const QueryParams = ({
+const QueryParamActive = ({
+  i,
   control,
-  register,
-  queryParams,
 }: {
-  register: UseFormRegister<PlaygroundForm>;
+  i: number;
   control: Control<PlaygroundForm>;
-  queryParams: QueryParam[];
 }) => {
-  const { fields, append, remove } = useFieldArray<PlaygroundForm>({
-    control,
-    name: "queryParams",
-  });
+  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;
 
-  const queryCount = queryParams?.length;
-  const queryLastName = queryParams.at(-1)?.name;
-  const queryLastValue = queryParams.at(-1)?.value;
+  console.log("dirty fields", dirty);
 
   useEffect(() => {
-    // if (queryCount === 0) {
-    //   append({ name: "", value: "" });
-    // }
-    console.log(queryLastName, queryLastValue, queryCount);
-    if (queryLastName !== "" || queryLastValue !== "") {
-      console.log("appending");
-      append({ name: "", value: "" });
+    if (value) {
+      console.log(`queryParams.${i}.active`, active);
+      form.setValue(`queryParams.${i}.active`, true);
     }
-  }, [append, queryLastValue, queryLastName, queryCount]);
+  }, [value]);
 
   return (
-    <div className="grid grid-cols-[1fr_1fr_auto]">
-      {fields.map((field, i) => (
-        <div
-          key={field.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"
-        >
-          {field.id}
-          <Controller
-            control={control}
-            render={({ field }) => {
-              return (
-                <InlineInput {...field} placeholder="Name" className="peer" />
-              );
-            }}
-            name={`queryParams.${i}.name`}
-          />
-          <Controller
-            control={control}
-            render={({ field }) => {
-              return (
-                <InlineInput {...field} placeholder="Value" className="peer" />
-              );
-            }}
-            name={`queryParams.${i}.value`}
+    <Controller
+      name={`queryParams.${i}.active`}
+      render={({ field }) => {
+        return (
+          <input
+            type="checkbox"
+            id={`queryParams.${i}.active`}
+            {...field}
+            checked={field.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)}
-          >
-            <TrashIcon size={16} />
-          </button>
-          <div className="col-span-full border-b  border-border"></div>
-        </div>
-      ))}
+export const QueryParams = ({
+  control,
+}: {
+  control: Control<PlaygroundForm>;
+}) => {
+  const { fields } = useFieldArray<PlaygroundForm>({
+    control,
+    name: "queryParams",
+  });
+
+  return fields.map((field, i) => (
+    <div
+      key={field.id}
+      className="px-2 grid-cols-subgrid col-span-full grid items-center gap-x-2 has-[:focus]:bg-muted hover:bg-accent rounded overflow-hidden group"
+    >
+      <QueryParamActive i={i} control={control} />
+
+      <Controller
+        control={control}
+        render={({ field }) => {
+          return (
+            <InlineInput asChild>
+              <label
+                className="flex items-center"
+                htmlFor={`queryParams.${i}.active`}
+              >
+                {field.value}
+              </label>
+            </InlineInput>
+          );
+        }}
+        name={`queryParams.${i}.name`}
+      />
+      <Controller
+        control={control}
+        render={({ field }) => {
+          return (
+            <InlineInput {...field} placeholder="Value" className="peer" />
+          );
+        }}
+        name={`queryParams.${i}.value`}
+      />
+      <Controller
+        control={control}
+        render={({ field }) => {
+          return (
+            <button
+              className="hover:bg-black/5 p-1 rounded mr-2 text-muted-foreground invisible group-hover:visible peer-focus:visible"
+              onClick={() => field.onChange("")}
+            >
+              <XIcon size={16} />
+            </button>
+          );
+        }}
+        name={`queryParams.${i}.value`}
+      />
+
+      <div className="-mx-2 col-span-full border-b border-border"></div>
     </div>
-  );
+  ));
 };

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

@@ -0,0 +1,32 @@
+import { useFormContext } from "react-hook-form";
+import type { PlaygroundForm } from "./Playground.js";
+
+export const UrlDisplay = ({ host, path }: { host: string; path: string }) => {
+  const { watch } = useFormContext<PlaygroundForm>();
+  const data = watch();
+  const url = new URL(
+    host +
+      path
+        .split("/")
+        .map((v) =>
+          v.startsWith("{") && v.endsWith("}")
+            ? data.pathParams.find((part) => part.name === v.slice(1, -1))
+                ?.value ?? v
+            : v,
+        )
+        .join("/"),
+  );
+
+  data.queryParams.forEach((param) => {
+    if (!param.value) {
+      return;
+    }
+    url.searchParams.set(param.name, param.value);
+  });
+
+  return (
+    <div className="overflow-auto font-mono whitespace-nowrap">
+      {url.toString()}
+    </div>
+  );
+};

package/src/lib/plugins/openapi/playground/createUrl.ts

@@ -0,0 +1,22 @@
+import { PlaygroundForm } from "./Playground.js";
+
+export const createUrl = (host: string, path: string, data: PlaygroundForm) => {
+  const url = new URL(
+    host +
+      path
+        .split("/")
+        .map((v) =>
+          v.startsWith("{") && v.endsWith("}")
+            ? data.pathParams.find((part) => part.name === v.slice(1, -1))
+                ?.value ?? v
+            : v,
+        )
+        .join("/"),
+  );
+
+  data.queryParams.forEach((param) => {
+    url.searchParams.set(param.name, param.value);
+  });
+
+  return url;
+};

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

@@ -4,7 +4,10 @@ import { type SchemaObject } from "../../../oas/graphql/index.js";
 export const isObject = (value: unknown): boolean =>
   typeof value === "object" && value !== null && !Array.isArray(value);
 
-export const generateSchemaExample = (schema: SchemaObject): any => {
+export const generateSchemaExample = (
+  schema: SchemaObject,
+  name?: string,
+): any => {
   // Directly return the example or default if they exist
   if (schema.example !== undefined) {
     return schema.example;
@@ -18,25 +21,37 @@ export const generateSchemaExample = (schema: SchemaObject): any => {
   }
 
   // Recursively process objects and arrays
-  return processComplexTypes(schema);
+  return processComplexTypes(schema, name);
 };
 
-function processComplexTypes(schema: SchemaObject): any {
-  if (schema.type === "object" && schema.properties) {
+function processComplexTypes(schema: SchemaObject, name?: string): any {
+  const properties = Object.entries(schema.properties ?? {}).concat(
+    Object.entries(schema.additionalProperties ?? {}),
+  );
+  if (schema.type === "object" && properties.length > 0) {
     const obj: { [key: string]: any } = {};
-    Object.keys(schema.properties!).forEach((key) => {
-      obj[key] = generateSchemaExample(schema.properties![key]);
+    properties.forEach(([key, propSchema]) => {
+      const value = generateSchemaExample(propSchema, key);
+      if (value !== undefined) {
+        obj[key] = value;
+      }
     });
     return obj;
   } else if (schema.type === "array" && schema.items) {
-    return [generateSchemaExample(schema.items)];
+    console.log(name, "array", schema.items, schema);
+    const value = generateSchemaExample(schema.items, name);
+    if (value !== undefined) {
+      return [value];
+    }
+    return [];
   }
   // Fallback for missing or undefined types
-  return getDefaultForType(schema.type);
+  return undefined; //getDefaultForType(schema.type);
 }
 
 function getDefaultForType(type?: string | string[]): any {
   if (Array.isArray(type)) {
+    debugger;
     return getDefaultForSingleType(type[0]);
   }
   return getDefaultForSingleType(type);
@@ -54,6 +69,6 @@ function getDefaultForSingleType(type?: string): any {
     case "null":
       return null;
     default:
-      return undefined;
+      return "undefined";
   }
 }

package/src/lib/plugins/redirect/index.tsx

@@ -1,7 +1,7 @@
 import { Navigate } from "react-router-dom";
 import type { DevPortalPlugin } from "../../core/plugins.js";
 
-type Redirect = {
+export type Redirect = {
   from: string;
   to: string;
   replace?: boolean;

package/src/lib/util/MdxComponents.tsx

@@ -51,6 +51,7 @@ export const MdxComponents = {
         <SyntaxHighlight
           language={match?.[1] ?? "markup"}
           className="rounded-xl overflow-x-auto p-4 border border-border dark:!bg-foreground/10 dark:border-transparent"
+          showLanguageIndicator
           code={String(children).trim()}
         />
       );

package/src/lib/util/createVariantComponent.tsx

@@ -1,7 +1,8 @@
-import { cva } from "class-variance-authority";
-import { ClassValue } from "clsx";
 import * as React from "react";
-import { JSX } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { Slot } from "@radix-ui/react-slot";
+import type { ClassValue } from "clsx";
+import type { JSX } from "react/jsx-runtime";
 import { cn } from "./cn.js";
 
 const createVariantComponent = <
@@ -14,15 +15,17 @@ const createVariantComponent = <
 ) => {
   const MyVariant = React.forwardRef<
     HTMLElement,
-    JSX.IntrinsicElements[E] & { className?: ClassValue }
-  >(({ className, ...props }, ref) =>
-    React.createElement(tag, {
+    JSX.IntrinsicElements[E] & { className?: ClassValue; asChild?: boolean }
+  >(({ className, asChild, ...props }, ref) => {
+    const Comp = asChild ? Slot : tag;
+
+    return React.createElement(Comp, {
       ...props,
       ref,
       className:
         typeof cvx === "function" ? cvx({ className }) : cn(cvx, className),
-    }),
-  );
+    });
+  });
 
   MyVariant.displayName = `VariantComponent(${tag})`;
 

package/dist/lib/plugins/openapi/playground/UrlParts.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"UrlParts.js","sourceRoot":"","sources":["../../../../../src/lib/plugins/openapi/playground/UrlParts.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAW,aAAa,EAAmB,MAAM,iBAAiB,CAAC;AAC1E,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AACtE,OAAO,EAAE,UAAU,EAAuB,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,EAAE,EAAE,MAAM,qBAAqB,CAAC;AAMzC,MAAM,cAAc,GAAG,UAAU,CAC/B,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACrC,MAAM,KAAK,GAAG,mBAAmB,CAAC,IAAI,CAAC,CAAC;IACxC,OAAO,CACL,KAAC,WAAW,OACN,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,2CAA2C,CAAC,EACrE,KAAK,EAAE;YACL,0BAA0B;YAC1B,YAAY,EAAE,OAAO,KAAK,GAAG;SAC9B,GACD,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACvB,OAAO,EACP,QAAQ,GAIT,EAAE,EAAE;IACH,MAAM,EAAE,MAAM,EAAE,GAAG,aAAa,CAAiB;QAC/C,OAAO;QACP,IAAI,EAAE,UAAU;KACjB,CAAC,CAAC;IAEH,OAAO,CACL,cAAK,SAAS,EAAC,+BAA+B,YAC3C,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CACvB,eAEE,SAAS,EAAC,8HAA8H,aAExI,KAAC,WAAW,OACN,QAAQ,CAAC,YAAY,CAAC,OAAO,CAAC,EAClC,QAAQ,QACR,WAAW,EAAC,MAAM,EAClB,SAAS,EAAC,MAAM,GAChB,EACF,KAAC,cAAc,OACT,QAAQ,CAAC,YAAY,CAAC,QAAQ,CAAC,EACnC,IAAI,EAAE,IAAI,CAAC,IAAI,EACT,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,IAAI,EAC5B,WAAW,EAAC,OAAO,EACnB,SAAS,EAAC,MAAM,GAChB,EAEF,cAAK,SAAS,EAAC,sCAAsC,GAAO,KAjBvD,IAAI,CAAC,EAAE,CAkBR,CACP,CAAC,GACE,CACP,CAAC;AACJ,CAAC,CAAC"}

package/src/lib/plugins/openapi/queries.graphql

@@ -1,6 +0,0 @@
-query getServerUrl($userId: ID!) {
-  schema(input: {userId: $userId}) {
-    serverUrl
-  }
-}
-