zudoku 0.1.1-dev.4 → 0.1.1-dev.41

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

@@ -0,0 +1,324 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/Dialog.js";
+import { Card, CardContent } 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 { SyntaxHighlight } from "../../../components/SyntaxHighlight.js";
+import { ColorizedParam } from "../ColorizedParam.js";
+import { useMutation } from "@tanstack/react-query";
+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 { createUrl } from "./createUrl.js";
+import { UrlDisplay } from "./UrlDisplay.js";
+import { useApiIdentities } from "../../../components/context/DevPortalProvider.js";
+
+function mimeTypeToLanguage(mimeType: string) {
+  const mimeTypeMapping = {
+    "application/json": "json",
+    "text/json": "json",
+    "text/html": "html",
+    "text/css": "css",
+    "text/javascript": "javascript",
+    "application/xml": "xml",
+    "application/xhtml+xml": "xhtml",
+    "text/plain": "plain",
+  } as const;
+
+  return Object.entries(mimeTypeMapping).find(([mime]) =>
+    mimeType.includes(mime),
+  )?.[0][1];
+}
+
+const statusCodeMap: Record<number, string> = {
+  200: "OK",
+  201: "Created",
+  202: "Accepted",
+  204: "No Content",
+  400: "Bad Request",
+  401: "Unauthorized",
+  403: "Forbidden",
+  404: "Not Found",
+  405: "Method Not Allowed",
+  500: "Internal Server Error",
+};
+
+export type Header = {
+  name: string;
+  value: string;
+};
+export type QueryParam = {
+  name: string;
+  value: string;
+  active?: boolean;
+};
+export type PathParam = {
+  name: string;
+  value: string;
+};
+
+export type PlaygroundForm = {
+  body: string;
+  queryParams: QueryParam[];
+  pathParams: PathParam[];
+  headers: Header[];
+};
+
+const Playground = ({
+  url,
+  host,
+  method,
+  headers = [{ name: "", value: "" }],
+  queryParams = [],
+  pathParams = [],
+  hasParams,
+}: {
+  host: string;
+  url: string;
+  method: string;
+  headers?: Header[];
+  queryParams?: QueryParam[];
+  pathParams?: PathParam[];
+  hasParams: boolean;
+}) => {
+  const { register, control, handleSubmit, watch, ...form } =
+    useForm<PlaygroundForm>({
+      defaultValues: {
+        body: "",
+        queryParams,
+        headers,
+        pathParams,
+      },
+    });
+  const formState = watch();
+  const identities = useApiIdentities();
+
+  const queryMutation = useMutation({
+    mutationFn: async (data: PlaygroundForm) => {
+      const requestUrl = createUrl(host, url, data);
+      const start = performance.now();
+      const response = await fetch(requestUrl, {
+        method: method.toUpperCase(),
+        headers: Object.fromEntries(
+          data.pathParams
+            .filter((h) => h.name)
+            .map((header) => [header.name, header.value]),
+        ),
+      });
+
+      const body = await response.text();
+
+      return {
+        status: response.status,
+        headers: response.headers,
+        size: body.length,
+        body,
+        time: performance.now() - start,
+      };
+    },
+  });
+
+  const path = url.split("/").map((part, i, arr) => (
+    <Fragment key={part}>
+      {part.startsWith("{") && part.endsWith("}") ? (
+        <ColorizedParam
+          name={part}
+          backgroundOpacity="0"
+          onClick={() => {
+            console.log("asd");
+          }}
+          slug={part.slice(1, -1)}
+        >
+          {
+            formState.pathParams.find((p) => p.name === part.slice(1, -1))
+              ?.value
+          }
+        </ColorizedParam>
+      ) : (
+        part
+      )}
+      {i < arr.length - 1 && "/"}
+      <wbr />
+    </Fragment>
+  ));
+
+  const lang = mimeTypeToLanguage(
+    queryMutation.data?.headers.get("Content-Type") ?? "",
+  );
+
+  const headerEntries = Array.from(queryMutation.data?.headers.entries() ?? []);
+
+  const urlQueryParams = formState.queryParams
+    .filter((p) => p.active)
+    .map((p) => (
+      <Fragment key={p.name}>
+        {p.name}={p.value}
+        <wbr />
+      </Fragment>
+    ));
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <CirclePlayIcon
+          className="cursor-pointer text-primary hover:text-primary/80"
+          size={16}
+        />
+      </DialogTrigger>
+
+      <DialogContent className="max-w-screen-xl w-full h-5/6 overflow-auto p-0">
+        <FormProvider {...{ register, control, handleSubmit, watch, ...form }}>
+          <form
+            onSubmit={handleSubmit((data) => {
+              queryMutation.mutateAsync(data);
+            })}
+          >
+            <div className="grid grid-cols-2 text-sm h-full">
+              <div className="flex flex-col gap-4 p-8 bg-muted/50 after:bg-muted-foreground/20 relative after:absolute after:w-px after:inset-0 after:left-auto">
+                <div className="flex gap-2 items-stretch">
+                  <div className="flex flex-1 items-center w-full border rounded-md border-border">
+                    <div className="border-r border-border p-2 bg-muted rounded-l-md self-stretch font-semibold font-mono">
+                      {method.toUpperCase()}
+                    </div>
+                    <div className="p-2 font-mono text-xs">
+                      {path}
+                      {urlQueryParams.length > 0 ? "?" : ""}
+                      {urlQueryParams}
+                    </div>
+                  </div>
+                  <Button type="submit" className="h-auto flex gap-1">
+                    Send
+                  </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(),
+                      )}
+                    >
+                      Body
+                    </TabsTrigger>
+                  </TabsList>
+                  <TabsContent value="headers">
+                    <Headers
+                      control={control}
+                      register={register}
+                      headers={formState.headers}
+                    />
+                  </TabsContent>
+                  <TabsContent value="parameters">
+                    <div className="grid grid-cols-[min-content_1fr_1fr_auto]">
+                      {pathParams.length > 0 && (
+                        <div className="font-semibold my-3 col-span-3">
+                          Path Parameters
+                        </div>
+                      )}
+                      <PathParams control={control} register={register} />
+                      {queryParams.length > 0 && (
+                        <span className="font-semibold my-3 col-span-3">
+                          Query Parameters
+                        </span>
+                      )}
+                      <QueryParams control={control} />
+                    </div>
+                  </TabsContent>
+                  <TabsContent value="body">
+                    <textarea
+                      {...register("body")}
+                      className="border border-border w-full rounded p-2 bg-muted h-40"
+                    />
+                  </TabsContent>
+                </Tabs>
+              </div>
+              <div className="flex flex-col gap-4 p-8 bg-muted/70">
+                {queryMutation.error ? (
+                  <div>{queryMutation.error.message}</div>
+                ) : queryMutation.data ? (
+                  <div className="flex flex-col gap-2">
+                    <div className="flex gap-2">
+                      <div className="flex text-xs gap-6">
+                        <div>
+                          Status: {queryMutation.data.status}{" "}
+                          {statusCodeMap[queryMutation.data.status] ?? ""}
+                        </div>
+                        <div>Time: {queryMutation.data.time.toFixed(0)}ms</div>
+                        <div>Size: {queryMutation.data.size} B</div>
+                      </div>
+                    </div>
+                    {/*<UrlDisplay host={host} path={url} />*/}
+                    <Tabs defaultValue="response">
+                      <TabsList>
+                        <TabsTrigger value="response">Response</TabsTrigger>
+                        <TabsTrigger value="headers">
+                          {headerEntries.length
+                            ? `Headers (${headerEntries.length})`
+                            : "No headers"}
+                        </TabsTrigger>
+                      </TabsList>
+
+                      <TabsContent value="response">
+                        <Card className="shadow-none p-4">
+                          <SyntaxHighlight
+                            language={lang ?? "json"}
+                            noBackground
+                            className="overflow-x-auto "
+                            code={
+                              queryMutation.data?.body ?? JSON.stringify("")
+                            }
+                          />
+                        </Card>
+                      </TabsContent>
+                      <TabsContent value="headers">
+                        <Card className="grid grid-cols-2 w-full gap-2.5 font-mono text-xs shadow-none p-4">
+                          <div className="font-semibold">Key</div>
+                          <div className="font-semibold">Value</div>
+                          {headerEntries.map(([key, value]) => (
+                            <Fragment key={key}>
+                              <div>{key}</div>
+                              <div>{value}</div>
+                            </Fragment>
+                          ))}
+                        </Card>
+                      </TabsContent>
+                    </Tabs>
+                  </div>
+                ) : (
+                  <div className="grid place-items-center h-full">
+                    <span className="text-[16px] font-semibold text-muted-foreground">
+                      {queryMutation.isPending ? (
+                        <LoaderCircle size={18} className="animate-spin" />
+                      ) : (
+                        "Send a request first to see the response here"
+                      )}
+                    </span>
+                  </div>
+                )}
+              </div>
+            </div>
+          </form>
+        </FormProvider>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export { Playground };

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

@@ -0,0 +1,111 @@
+import {
+  Control,
+  Controller,
+  useFieldArray,
+  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,
+  control,
+}: {
+  i: number;
+  control: Control<PlaygroundForm>;
+}) => {
+  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);
+      form.setValue(`queryParams.${i}.active`, true);
+    }
+  }, [value]);
+
+  return (
+    <Controller
+      name={`queryParams.${i}.active`}
+      render={({ field }) => {
+        return (
+          <input
+            type="checkbox"
+            id={`queryParams.${i}.active`}
+            {...field}
+            checked={field.value}
+          />
+        );
+      }}
+    />
+  );
+};
+
+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/{app → 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/{app → lib}/plugins/openapi/worker/createSharedWorkerClient.ts

@@ -1,4 +1,4 @@
-import { monotonicFactory } from "ulid";
+import { monotonicFactory } from "ulidx";
 import { createWaitForNotify } from "../../../util/createWaitForNotify.js";
 import {
   cacheExchange,

package/src/lib/plugins/openapi/worker/shared-worker.ts

@@ -0,0 +1,5 @@
+export function createSharedWorker() {
+  return new SharedWorker(new URL("./worker.ts", import.meta.url), {
+    type: "module",
+  });
+}

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

@@ -0,0 +1 @@
+export { createSharedWorkerClient } from "./openapi/worker/createSharedWorkerClient.js";

package/src/{app → 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/{app → lib}/util/MdxComponents.tsx

@@ -2,7 +2,7 @@ import { MDXProvider } from "@mdx-js/react";
 import type { ComponentProps } from "react";
 
 import { Link } from "react-router-dom";
-import { Heading } from "../Heading.js";
+import { Heading } from "../components/Heading.js";
 import { SyntaxHighlight } from "../components/SyntaxHighlight.js";
 import { Callout } from "../ui/Callout.js";
 import { cn } from "./cn.js";
@@ -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/{app → 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 = <
@@ -12,15 +13,19 @@ const createVariantComponent = <
   cvx: ClassValue | C,
   // variantProps: Array<keyof VariantProps<C>> = [],
 ) => {
-  const MyVariant = ({
-    className,
-    ...props
-  }: JSX.IntrinsicElements[E] & { className?: ClassValue }) =>
-    React.createElement(tag, {
+  const MyVariant = React.forwardRef<
+    HTMLElement,
+    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/app/DevPortal.js

@@ -1,41 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { MDXProvider } from "@mdx-js/react";
-import { QueryClientProvider } from "@tanstack/react-query";
-import { memo, Suspense, useEffect, useMemo } from "react";
-import { createBrowserRouter, RouterProvider } from "react-router-dom";
-import { ComponentsProvider, DEFAULT_COMPONENTS, } from "./components/context/ComponentsContext.js";
-import { DevPortalProvider } from "./components/context/DevPortalProvider.js";
-import { ThemeProvider } from "./components/context/ThemeContext.js";
-import { ViewportAnchorProvider } from "./components/context/ViewportAnchorContext.js";
-import { Layout } from "./components/Layout.js";
-import { DevPortalContext, queryClient, } from "./core/DevPortalContext.js";
-import { HelmetProvider } from "./core/helmet.js";
-import { isNavigationPlugin } from "./core/plugins.js";
-import { MdxComponents } from "./util/MdxComponents.js";
-export const DevPortalSystemPaths = {
-    Settings: "/settings",
-};
-const DevPortal = (props) => {
-    const router = useMemo(() => {
-        const routes = (props.plugins ?? []).flatMap((plugin) => isNavigationPlugin(plugin) ? plugin.getRoutes() : []);
-        return createBrowserRouter([
-            {
-                path: "/",
-                element: _jsx(Layout, {}),
-                errorElement: (_jsx(Layout, { children: _jsx("div", { className: "h-[75vh] flex items-center justify-center", children: "Error, look at the console" }) })),
-                children: routes,
-            },
-        ]);
-    }, [props.plugins]);
-    const components = useMemo(() => ({ ...DEFAULT_COMPONENTS, ...props.overrides }), [props.overrides]);
-    const mdxComponents = useMemo(() => ({ ...MdxComponents, ...props.mdxComponents }), [props.mdxComponents]);
-    const devPortalContext = useMemo(() => new DevPortalContext(props), [props]);
-    useEffect(() => {
-        void devPortalContext.initialize();
-    }, [devPortalContext]);
-    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(HelmetProvider, { children: _jsx(DevPortalProvider, { value: devPortalContext, children: _jsx(MDXProvider, { components: mdxComponents, children: _jsx(ThemeProvider, { children: _jsx(ComponentsProvider, { value: components, children: _jsx(ViewportAnchorProvider, { children: _jsx(Suspense, { fallback: _jsx("div", { className: "grid place-items-center h-full", children: "Loading..." }), children: _jsx(RouterProvider, { router: router }) }) }) }) }) }) }) }) }));
-};
-const MemoDevPortal = memo(DevPortal);
-MemoDevPortal.displayName = "DevPortal";
-export default MemoDevPortal;
-//# sourceMappingURL=DevPortal.js.map