zudoku 0.3.0-dev.12 → 0.3.0-dev.121

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

@@ -1,22 +1,19 @@
-import { PlaygroundForm } from "./Playground.js";
+import type { 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("/"),
+  const filledPath = path.replace(
+    /\{(\w+)}/g,
+    (_, key) =>
+      data.pathParams.find((part) => part.name === key)?.value || `{${key}}`,
   );
 
-  data.queryParams.forEach((param) => {
-    url.searchParams.set(param.name, param.value);
-  });
+  const url = new URL(filledPath, host);
+
+  data.queryParams
+    .filter((param) => param.active)
+    .forEach((param) => {
+      url.searchParams.set(param.name, param.value);
+    });
 
   return url;
 };

package/src/lib/plugins/openapi/schema/SchemaComponents.tsx

@@ -0,0 +1,126 @@
+import * as Collapsible from "@radix-ui/react-collapsible";
+import { ListPlusIcon } from "lucide-react";
+import { useState } from "react";
+import { Markdown, ProseClasses } from "../../../components/Markdown.js";
+import type { SchemaObject } from "../../../oas/parser/index.js";
+import { Button } from "../../../ui/Button.js";
+import { cn } from "../../../util/cn.js";
+import { SchemaView } from "./SchemaView.js";
+import { hasLogicalGroupings, isComplexType } from "./utils.js";
+
+export const SchemaLogicalGroup = ({
+  schema,
+  level,
+}: {
+  schema: SchemaObject;
+  level: number;
+}) => {
+  const renderLogicalGroup = (
+    group: SchemaObject[],
+    groupName: string,
+    separator: string,
+  ) => {
+    return group.map((subSchema, index) => (
+      <div key={index} className="my-2">
+        <strong>{groupName}</strong>
+        <div className="mt-2">
+          <SchemaView schema={subSchema} level={level + 1} />
+          {index < group.length - 1 && (
+            <div className="text-center my-2">{separator}</div>
+          )}
+        </div>
+      </div>
+    ));
+  };
+
+  if (schema.oneOf) return renderLogicalGroup(schema.oneOf, "One of", "OR");
+  if (schema.allOf) return renderLogicalGroup(schema.allOf, "All of", "AND");
+  if (schema.anyOf) return renderLogicalGroup(schema.anyOf, "Any of", "OR");
+
+  return null;
+};
+
+export const SchemaPropertyItem = ({
+  name,
+  value,
+  group,
+  level,
+  defaultOpen = false,
+  showCollapseButton = true,
+}: {
+  name: string;
+  value: SchemaObject;
+  group: "required" | "optional" | "deprecated";
+  level: number;
+  defaultOpen?: boolean;
+  showCollapseButton?: boolean;
+}) => {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+
+  return (
+    <li className="p-4 bg-border/20 hover:bg-border/30">
+      <div className="flex flex-col gap-1 justify-between text-sm">
+        <div className="flex gap-2 items-center">
+          <code>{name}</code>
+          <span className="text-muted-foreground">
+            {value.type === "array" && value.items?.type ? (
+              <span>{value.items.type}[]</span>
+            ) : Array.isArray(value.type) ? (
+              <span>{value.type.join(" | ")}</span>
+            ) : (
+              <span>{value.type}</span>
+            )}
+          </span>
+          {group === "optional" && (
+            <span className="py-px px-1.5 font-medium border rounded-lg">
+              optional
+            </span>
+          )}
+        </div>
+
+        {value.description && (
+          <Markdown
+            className={cn(ProseClasses, "text-sm leading-normal line-clamp-4")}
+            content={value.description}
+          />
+        )}
+
+        {(hasLogicalGroupings(value) ?? isComplexType(value)) && (
+          <Collapsible.Root
+            defaultOpen={defaultOpen}
+            open={isOpen}
+            onOpenChange={() => setIsOpen(!isOpen)}
+          >
+            {showCollapseButton && (
+              <Collapsible.Trigger asChild>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="mt-2 flex gap-1.5"
+                >
+                  <ListPlusIcon size={18} />
+                  {!isOpen
+                    ? "Show nested properties"
+                    : "Hide nested properties"}
+                </Button>
+              </Collapsible.Trigger>
+            )}
+            <Collapsible.Content>
+              <div className="mt-2">
+                {hasLogicalGroupings(value) && (
+                  <SchemaLogicalGroup schema={value} level={level + 1} />
+                )}
+                {value.type === "object" && (
+                  <SchemaView schema={value} level={level + 1} />
+                )}
+                {value.type === "array" && typeof value.items === "object" && (
+                  <SchemaView schema={value.items} level={level + 1} />
+                )}
+              </div>
+            </Collapsible.Content>
+          </Collapsible.Root>
+        )}
+      </div>
+    </li>
+  );
+};

package/src/lib/plugins/openapi/schema/SchemaView.tsx

@@ -0,0 +1,112 @@
+import type { SchemaObject } from "../../../oas/parser/index.js";
+import { Card, CardContent, CardHeader, CardTitle } from "../../../ui/Card.js";
+import { groupBy } from "../../../util/groupBy.js";
+import { SchemaLogicalGroup, SchemaPropertyItem } from "./SchemaComponents.js";
+import { hasLogicalGroupings } from "./utils.js";
+
+export const SchemaView = ({
+  schema,
+  level = 0,
+  defaultOpen = false,
+}: {
+  schema: SchemaObject;
+  level?: number;
+  defaultOpen?: boolean;
+}) => {
+  const renderSchema = (schema: SchemaObject, level: number) => {
+    if (schema.oneOf || schema.allOf || schema.anyOf) {
+      return <SchemaLogicalGroup schema={schema} level={level} />;
+    }
+
+    if (schema.type === "array" && schema.items) {
+      const itemsSchema = schema.items as SchemaObject;
+
+      if (
+        typeof itemsSchema.type === "string" &&
+        ["string", "number", "boolean", "integer"].includes(itemsSchema.type)
+      ) {
+        return (
+          <Card className="my-2">
+            <CardContent>
+              <strong>{`array<${itemsSchema.type}>`}</strong>
+              {schema.description && <p>{schema.description}</p>}
+            </CardContent>
+          </Card>
+        );
+      } else if (
+        itemsSchema.type === "object" ||
+        hasLogicalGroupings(itemsSchema)
+      ) {
+        return (
+          <Card className="flex flex-col gap-2 bg-border/30 p-4 ">
+            <span className="text-sm text-muted-foreground">object[]</span>
+            {renderSchema(itemsSchema, level + 1)}
+          </Card>
+        );
+      } else {
+        return renderSchema(itemsSchema, level + 1);
+      }
+    }
+
+    if (schema.properties) {
+      const groupedProperties = groupBy(
+        Object.entries(schema.properties),
+        ([propertyName, property]) => {
+          return property.deprecated
+            ? "deprecated"
+            : schema.required?.includes(propertyName)
+              ? "required"
+              : "optional";
+        },
+      );
+
+      const isTopLevelSingleItem =
+        level === 0 && Object.keys(groupedProperties).length === 1;
+
+      const groupNames = ["required", "optional", "deprecated"] as const;
+
+      return (
+        <Card className="divide-y overflow-hidden">
+          {groupNames.map(
+            (group) =>
+              groupedProperties[group] && (
+                <ul key={group} className="divide-y">
+                  {groupedProperties[group].map(([key, value]) => (
+                    <SchemaPropertyItem
+                      key={key}
+                      name={key}
+                      value={value}
+                      group={group}
+                      level={level}
+                      defaultOpen={isTopLevelSingleItem || defaultOpen}
+                      showCollapseButton={!isTopLevelSingleItem}
+                    />
+                  ))}
+                </ul>
+              ),
+          )}
+        </Card>
+      );
+    }
+
+    if (schema.additionalProperties) {
+      return (
+        <Card className="my-2">
+          <CardHeader>
+            <CardTitle>Additional Properties:</CardTitle>
+          </CardHeader>
+          <CardContent>
+            {renderSchema(
+              schema.additionalProperties as SchemaObject,
+              level + 1,
+            )}
+          </CardContent>
+        </Card>
+      );
+    }
+
+    return null;
+  };
+
+  return renderSchema(schema, level);
+};

package/src/lib/plugins/openapi/schema/utils.ts

@@ -0,0 +1,10 @@
+import type { SchemaObject } from "../../../oas/parser/index.js";
+
+export const isComplexType = (value: SchemaObject) =>
+  value.type === "object" ||
+  (value.type === "array" &&
+    typeof value.items === "object" &&
+    (!value.items.type || value.items.type === "object"));
+
+export const hasLogicalGroupings = (value: SchemaObject) =>
+  Boolean(value.oneOf ?? value.allOf ?? value.anyOf);

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

@@ -1 +1 @@
-export { createSharedWorkerClient } from "./openapi/worker/createSharedWorkerClient.js";
+export { createClient } from "./openapi/client/createWorkerClient.js";

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

@@ -1,10 +1,9 @@
-import { Navigate } from "react-router-dom";
+import { redirect } from "react-router-dom";
 import type { DevPortalPlugin } from "../../core/plugins.js";
 
 export type Redirect = {
   from: string;
   to: string;
-  replace?: boolean;
 };
 
 export const redirectPlugin = (options: {
@@ -12,9 +11,9 @@ export const redirectPlugin = (options: {
 }): DevPortalPlugin => {
   return {
     getRoutes: () =>
-      options.redirects.map(({ from, to, replace }) => ({
+      options.redirects.map(({ from, to }) => ({
         path: from,
-        element: <Navigate to={to} replace={replace} />,
+        loader: () => redirect(to),
       })),
   };
 };

package/src/lib/plugins/search-inkeep/InkeepCustomTrigger.tsx

@@ -0,0 +1,3 @@
+import { InkeepCustomTrigger } from "@inkeep/widgets";
+
+export default InkeepCustomTrigger;

package/src/lib/plugins/search-inkeep/index.tsx

@@ -0,0 +1,63 @@
+import type { InkeepWidgetBaseSettings } from "@inkeep/widgets";
+import { lazy } from "react";
+import { ClientOnly } from "../../components/ClientOnly.js";
+import type { DevPortalPlugin } from "../../core/plugins.js";
+import { aiChatSettings, baseSettings } from "./inkeep.js";
+
+type PickedPluginInkeepBaseSettings =
+  | "apiKey"
+  | "integrationId"
+  | "organizationId"
+  | "primaryBrandColor"
+  | "organizationDisplayName";
+
+type PluginInkeepBaseSettings = Pick<
+  InkeepWidgetBaseSettings,
+  PickedPluginInkeepBaseSettings
+>;
+
+const Inkeep = lazy(() => import("./InkeepCustomTrigger.js"));
+
+const InkeepSearch = ({
+  prefilledQuery,
+  isOpen,
+  onClose,
+  settings,
+}: {
+  isOpen: boolean;
+  onClose: () => void;
+  prefilledQuery?: string | null;
+  settings: PluginInkeepBaseSettings;
+}) => {
+  return (
+    <Inkeep
+      isOpen={isOpen}
+      onClose={onClose}
+      baseSettings={{ ...baseSettings, ...settings }}
+      aiChatSettings={aiChatSettings}
+      searchSettings={{
+        prefilledQuery: prefilledQuery || undefined,
+      }}
+    />
+  );
+};
+
+export const inkeepSearchPlugin = (
+  settings: PluginInkeepBaseSettings,
+): DevPortalPlugin => {
+  return {
+    renderSearch: ({
+      isOpen,
+      onClose,
+    }: {
+      isOpen: boolean;
+      onClose: () => void;
+    }) => {
+      return (
+        <ClientOnly>
+          <InkeepSearch isOpen={isOpen} onClose={onClose} settings={settings} />
+        </ClientOnly>
+      );
+    },
+  };
+};

package/src/lib/plugins/search-inkeep/inkeep.ts

@@ -0,0 +1,32 @@
+import {
+  InkeepAIChatSettings,
+  InkeepModalSettings,
+  InkeepSearchSettings,
+} from "@inkeep/widgets";
+
+const baseSettings = {
+  theme: {
+    components: {
+      AIChatPageWrapper: {
+        defaultProps: {
+          size: "shrink-vertically",
+          variant: "no-shadow",
+        },
+      },
+      SearchBarTrigger: {
+        defaultProps: {
+          size: "expand",
+          variant: "subtle", // Choose from 'emphasized' or 'subtle'
+        },
+      },
+    },
+  },
+} as const;
+
+const modalSettings: InkeepModalSettings = {};
+
+const searchSettings: InkeepSearchSettings = {};
+
+const aiChatSettings: InkeepAIChatSettings = {};
+
+export { aiChatSettings, baseSettings, modalSettings, searchSettings };

package/src/lib/themeToggle.ts

@@ -0,0 +1,7 @@
+export const themeToggle = () => {
+  const isDarkMode =
+    localStorage.getItem("theme") === "dark" ||
+    (!localStorage.getItem("theme") &&
+      window.matchMedia("(prefers-color-scheme: dark)").matches);
+  document.documentElement.classList.toggle("dark", isDarkMode);
+};

package/src/lib/ui/Button.tsx

@@ -1,8 +1,38 @@
 import { Slot } from "@radix-ui/react-slot";
-import { VariantProps } from "class-variance-authority";
+import { cva, VariantProps } from "class-variance-authority";
 import * as React from "react";
 import { cn } from "../util/cn.js";
-import { buttonVariants } from "./button-variants.js";
+
+const buttonVariants = cva(
+  "not-prose 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",
+        xl: "h-14 rounded-lg px-10 text-lg",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,

package/src/lib/ui/Callout.tsx

@@ -1,10 +1,10 @@
-import type { ReactNode } from "react";
 import {
   AlertTriangleIcon,
   InfoIcon,
   LightbulbIcon,
   ShieldAlertIcon,
-} from "../core/icons.js";
+} from "lucide-react";
+import type { ReactNode } from "react";
 import { cn } from "../util/cn.js";
 
 const stylesMap = {
@@ -64,9 +64,9 @@ export const Callout = ({ type, children, title, className }: CalloutProps) => {
   return (
     <div
       className={cn(
-        "not-prose grid grid-cols-[fit-content_1fr] grid-rows-[fit-content_1fr] gap-x-4 gap-y-2 text-md rounded-md border p-4",
+        "not-prose grid grid-cols-[min-content_1fr] grid-rows-[fit-content_1fr] gap-x-4 gap-y-2 text-md rounded-md border p-4",
         "[&_a]:underline [&_a]:decoration-current [&_a]:decoration-from-font [&_a]:underline-offset-4 hover:[&_a]:decoration-1",
-        "[&_code]:!bg-transparent [&_code]:!border-none",
+        "[&_code]:!bg-gray-50 [&_code]:dark:!bg-gray-800 [&_code]:!border-none",
         title && "items-center",
         border,
         bg,

package/src/lib/ui/Card.tsx

@@ -8,7 +8,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-xl border border-border bg-card text-card-foreground shadow",
+      "rounded-xl border bg-card text-card-foreground shadow",
       className,
     )}
     {...props}