zudoku 0.3.1-dev.2 → 0.3.1-dev.20

package/src/lib/components/Header.tsx

@@ -1,6 +1,5 @@
 import { MoonStarIcon, SunIcon } from "lucide-react";
 import { memo } from "react";
-
 import { Link, useLocation } from "react-router-dom";
 import { useAuth } from "../authentication/hook.js";
 import { isProfileMenuPlugin, ProfileNavigationItem } from "../core/plugins.js";
@@ -45,6 +44,7 @@ const RecursiveMenu = ({ item }: { item: ProfileNavigationItem }) => {
 };
 
 export const Header = memo(function HeaderInner() {
+  const auth = useAuth();
   const [isDark, toggleTheme] = useTheme();
   const { isAuthenticated, profile, isAuthEnabled } = useAuth();
   const { pathname } = useLocation();
@@ -97,15 +97,8 @@ export const Header = memo(function HeaderInner() {
             <div className="items-center justify-self-end text-sm hidden lg:flex gap-2">
               <Slotlet name="head-navigation-start" />
               {isAuthEnabled && !isAuthenticated ? (
-                <Button variant="ghost" asChild>
-                  <Link
-                    to={{
-                      pathname: "/signin",
-                      search: `?redirect=${encodeURIComponent(pathname)}`,
-                    }}
-                  >
-                    Login
-                  </Link>
+                <Button variant="ghost" onClick={() => auth.login()}>
+                  Login
                 </Button>
               ) : (
                 accountItems.length > 0 && (

package/src/lib/components/Layout.tsx

@@ -14,13 +14,18 @@ import { Spinner } from "./Spinner.js";
 export const Layout = ({ children }: { children?: ReactNode }) => {
   const location = useLocation();
   const { setActiveAnchor } = useViewportAnchor();
-  const { meta } = useZudoku();
+  const { meta, authentication } = useZudoku();
 
   useScrollToAnchor();
   useScrollToTop();
 
   const previousLocationPath = useRef(location.pathname);
 
+  useEffect(() => {
+    // Initialize the authentication plugin
+    authentication?.pageLoad ? authentication.pageLoad() : null;
+  }, [authentication]);
+
   useEffect(() => {
     // always reset on location change
     if (location.pathname !== previousLocationPath.current) {

package/src/lib/components/context/ZudokuProvider.tsx

@@ -1,6 +1,5 @@
 import { useSuspenseQuery } from "@tanstack/react-query";
 import type { PropsWithChildren } from "react";
-import { useNavigate } from "react-router-dom";
 import { DevPortalContext } from "../../core/DevPortalContext.js";
 import { ZudokuReactContext } from "./ZudokuContext.js";
 
@@ -8,11 +7,9 @@ export const ZudokuProvider = ({
   children,
   context,
 }: PropsWithChildren<{ context: DevPortalContext }>) => {
-  const navigate = useNavigate();
-
   useSuspenseQuery({
     queryFn: async () => {
-      await context.initialize({ navigate });
+      await context.initialize();
       return true;
     },
     queryKey: ["zudoku-initialize"],

package/src/lib/core/DevPortalContext.ts

@@ -1,5 +1,4 @@
 import { QueryClient } from "@tanstack/react-query";
-import { NavigateFunction } from "react-router-dom";
 import type { SidebarConfig } from "../../config/validators/SidebarSchema.js";
 import { type AuthenticationProvider } from "../authentication/authentication.js";
 import type { ComponentsContextType } from "../components/context/ComponentsContext.js";
@@ -84,15 +83,11 @@ export class DevPortalContext {
     this.page = config.page;
   }
 
-  initialize = async ({
-    navigate,
-  }: {
-    navigate: NavigateFunction;
-  }): Promise<void> => {
+  initialize = async (): Promise<void> => {
     await Promise.all(
       this.plugins
         .filter(needsInitialization)
-        .map((plugin) => plugin.initialize?.(this, { navigate })),
+        .map((plugin) => plugin.initialize?.(this)),
     );
   };
 

package/src/lib/core/plugins.ts

@@ -1,5 +1,5 @@
 import { type ReactElement } from "react";
-import { NavigateFunction, type RouteObject } from "react-router-dom";
+import { type RouteObject } from "react-router-dom";
 import type { Sidebar } from "../../config/validators/SidebarSchema.js";
 import { MdxComponentsType } from "../util/MdxComponents.js";
 import { DevPortalContext, type ApiIdentity } from "./DevPortalContext.js";
@@ -40,7 +40,6 @@ export type ProfileNavigationItem = {
 export interface CommonPlugin {
   initialize?: (
     context: DevPortalContext,
-    options: { navigate: NavigateFunction },
   ) => Promise<void | boolean> | void | boolean;
   getHead?: () => ReactElement | undefined;
   getMdxComponents?: () => MdxComponentsType;

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

@@ -4,14 +4,13 @@ import { DeveloperHint } from "../../components/DeveloperHint.js";
 import { ErrorPage } from "../../components/ErrorPage.js";
 import { Heading } from "../../components/Heading.js";
 import { InlineCode } from "../../components/InlineCode.js";
-import { Markdown } from "../../components/Markdown.js";
+import { Markdown, ProseClasses } from "../../components/Markdown.js";
 import { SyntaxHighlight } from "../../components/SyntaxHighlight.js";
 import { cn } from "../../util/cn.js";
 import { OperationListItem } from "./OperationListItem.js";
 import StaggeredRender from "./StaggeredRender.js";
 import { useOasConfig } from "./context.js";
 import { graphql } from "./graphql/index.js";
-import { SchemaProseClasses } from "./util/prose.js";
 import { useQuery } from "./util/urql.js";
 
 export const OperationsFragment = graphql(/* GraphQL */ `
@@ -124,10 +123,7 @@ export const OperationList = () => {
   return (
     <div className="pt-[--padding-content-top]">
       <div
-        className={cn(
-          SchemaProseClasses,
-          "mb-16 max-w-full prose-img:max-w-prose",
-        )}
+        className={cn(ProseClasses, "mb-16 max-w-full prose-img:max-w-prose")}
       >
         <CategoryHeading>Overview</CategoryHeading>
         <Heading level={1} id="description" registerSidebarAnchor>
@@ -142,7 +138,7 @@ export const OperationList = () => {
             {tag.name && <CategoryHeading>{tag.name}</CategoryHeading>}
             {tag.description && (
               <Markdown
-                className={`${SchemaProseClasses} mt-2 mb-12`}
+                className={`${ProseClasses} max-w-full prose-img:max-w-prose w-full mt-2 mb-12`}
                 content={tag.description}
               />
             )}

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

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { Heading } from "../../components/Heading.js";
-import { Markdown } from "../../components/Markdown.js";
+import { Markdown, ProseClasses } from "../../components/Markdown.js";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../ui/Tabs.js";
 import { groupBy } from "../../util/groupBy.js";
 import { renderIf } from "../../util/renderIf.js";
@@ -9,7 +9,6 @@ import { ParameterList } from "./ParameterList.js";
 import { Sidecar } from "./Sidecar.js";
 import { FragmentType, useFragment } from "./graphql/index.js";
 import { SchemaView } from "./schema/SchemaView.js";
-import { SchemaProseClasses } from "./util/prose.js";
 
 export const PARAM_GROUPS = ["path", "query", "header", "cookie"] as const;
 export type ParameterGroup = (typeof PARAM_GROUPS)[number];
@@ -39,7 +38,7 @@ export const OperationListItem = ({
         </Heading>
         {operation.description && (
           <Markdown
-            className={SchemaProseClasses}
+            className={`${ProseClasses} max-w-full prose-img:max-w-prose`}
             content={operation.description}
           />
         )}
@@ -89,7 +88,7 @@ export const OperationListItem = ({
                   ))}
                 </TabsList>
               )}
-              <ul className="list-none m-0 px-0 overflow-hidden">
+              <ul className="list-none m-0 px-0">
                 {operation.responses.map((response) => (
                   <TabsContent
                     value={response.statusCode}

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

@@ -55,7 +55,7 @@ export const ParameterListItem = ({
     {parameter.description && (
       <Markdown
         content={parameter.description}
-        className="text-sm prose-p:my-1"
+        className="text-sm prose-p:my-1 prose-code:whitespace-pre-line"
       />
     )}
   </li>

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

@@ -1,5 +1,4 @@
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
-import { CirclePlayIcon } from "lucide-react";
 import { type PropsWithChildren, useState } from "react";
 import {
   Dialog,
@@ -11,16 +10,39 @@ import { Playground, type PlaygroundContentProps } from "./Playground.js";
 
 export type PlaygroundDialogProps = PropsWithChildren<PlaygroundContentProps>;
 
+const HeroPlayIcon = ({
+  className,
+  size = 16,
+}: {
+  className?: string;
+  size?: number;
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    className={className}
+    width={size}
+    height={size}
+  >
+    <path
+      fillRule="evenodd"
+      d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm14.024-.983a1.125 1.125 0 0 1 0 1.966l-5.603 3.113A1.125 1.125 0 0 1 9 15.113V8.887c0-.857.921-1.4 1.671-.983l5.603 3.113Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
 const PlaygroundDialog = (props: PlaygroundDialogProps) => {
   const [open, setOpen] = useState(false);
   return (
     <Dialog onOpenChange={(open) => setOpen(open)}>
       <DialogTrigger asChild>
         {props.children ?? (
-          <CirclePlayIcon
-            className="cursor-pointer text-primary hover:text-primary/80"
-            size={16}
-          />
+          <button className="flex gap-1 items-center px-2 py-1 rounded-md bg-primary/80 hover:bg-primary transition text-primary-foreground text-xs">
+            Test
+            <HeroPlayIcon className="" size={14} />
+          </button>
         )}
       </DialogTrigger>
 

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

@@ -0,0 +1,47 @@
+import * as Collapsible from "@radix-ui/react-collapsible";
+import { SquareMinusIcon, SquarePlusIcon } from "lucide-react";
+import type { SchemaObject } from "../../../../oas/parser/index.js";
+import { Card } from "../../../../ui/Card.js";
+import type { LogicalGroupType } from "../utils.js";
+import { LogicalGroupItem } from "./LogicalGroupItem.js";
+
+const typeLabel = {
+  AND: "All of",
+  OR: "Any of",
+  ONE: "One of",
+};
+
+export const LogicalGroup = ({
+  schemas,
+  type,
+  isOpen,
+  level,
+  toggleOpen,
+}: {
+  schemas: SchemaObject[];
+  type: LogicalGroupType;
+  isOpen: boolean;
+  toggleOpen: () => void;
+  level: number;
+}) => (
+  <Collapsible.Root open={isOpen} onOpenChange={toggleOpen} asChild>
+    <Card className="px-6">
+      <Collapsible.Trigger className="flex gap-2 items-center py-2 w-full text-sm text-muted-foreground -translate-x-1.5">
+        {isOpen ? <SquareMinusIcon size={14} /> : <SquarePlusIcon size={14} />}
+        <span>{typeLabel[type]}</span>
+      </Collapsible.Trigger>
+
+      <Collapsible.Content className="pb-4">
+        {schemas.map((subSchema, index) => (
+          // eslint-disable-next-line react/no-array-index-key
+          <LogicalGroupItem
+            key={index}
+            type={type}
+            schema={subSchema}
+            level={level}
+          />
+        ))}
+      </Collapsible.Content>
+    </Card>
+  </Collapsible.Root>
+);

package/src/lib/plugins/openapi/schema/LogicalGroup/LogicalGroupConnector.tsx

@@ -0,0 +1,54 @@
+import {
+  ChevronDownIcon,
+  CircleDotIcon,
+  CircleFadingPlusIcon,
+  CircleIcon,
+} from "lucide-react";
+import { cn } from "../../../../util/cn.js";
+
+import type { LogicalGroupType } from "../utils.js";
+
+const iconMap = {
+  AND: <CircleFadingPlusIcon size={16} className="fill-card" />,
+  OR: <CircleDotIcon size={16} className="fill-card" />,
+  ONE: <CircleIcon size={14} className="fill-card" />,
+} as const;
+
+const colorClass = {
+  AND: "text-green-500 dark:text-green-300/60",
+  OR: "text-blue-400 dark:text-blue-500",
+  ONE: "text-purple-500 dark:text-purple-300/60",
+} as const;
+
+export const LogicalGroupConnector = ({
+  type,
+  isOpen,
+  className,
+}: {
+  type: LogicalGroupType;
+  isOpen: boolean;
+  className?: string;
+}) => {
+  return (
+    <div
+      className={cn(
+        colorClass[type],
+        "relative text-sm flex py-2",
+        "before:border-l before:absolute before:-top-2 before:-bottom-2 before:border-border before:border-dashed before:content-['']",
+        className,
+      )}
+    >
+      <div className="-translate-x-[7px] flex gap-1 items-center">
+        {iconMap[type]}
+        <div
+          className={cn(
+            "translate-y-px mx-px opacity-0 group-hover:opacity-100 transition",
+            !isOpen && "-rotate-90",
+          )}
+        >
+          <ChevronDownIcon size={16} />
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/lib/plugins/openapi/schema/LogicalGroup/LogicalGroupItem.tsx

@@ -0,0 +1,30 @@
+import * as Collapsible from "@radix-ui/react-collapsible";
+import { useState } from "react";
+import type { SchemaObject } from "../../../../oas/parser/index.js";
+import { SchemaView } from "../SchemaView.js";
+import type { LogicalGroupType } from "../utils.js";
+import { LogicalGroupConnector } from "./LogicalGroupConnector.js";
+
+export const LogicalGroupItem = (props: {
+  type: LogicalGroupType;
+  schema: SchemaObject;
+  level: number;
+}) => {
+  const [isOpen, setIsOpen] = useState(true);
+
+  return (
+    <Collapsible.Root
+      open={isOpen}
+      onOpenChange={() => setIsOpen((prev) => !prev)}
+      className="group"
+    >
+      <Collapsible.Trigger>
+        <LogicalGroupConnector type={props.type} isOpen={isOpen} />
+      </Collapsible.Trigger>
+      {!isOpen && <div className="wavy-line bg-border translate-y-1" />}
+      <Collapsible.Content>
+        <SchemaView schema={props.schema} level={props.level + 1} />
+      </Collapsible.Content>
+    </Collapsible.Root>
+  );
+};

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

@@ -1,12 +1,18 @@
 import * as Collapsible from "@radix-ui/react-collapsible";
 import { ListPlusIcon } from "lucide-react";
-import { useState } from "react";
+import { useCallback, 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 { objectEntries } from "../../../util/objectEntries.js";
+import { LogicalGroup } from "./LogicalGroup/LogicalGroup.js";
 import { SchemaView } from "./SchemaView.js";
-import { hasLogicalGroupings, isComplexType } from "./utils.js";
+import {
+  hasLogicalGroupings,
+  isComplexType,
+  LogicalSchemaTypeMap,
+} from "./utils.js";
 
 export const SchemaLogicalGroup = ({
   schema,
@@ -15,41 +21,34 @@ export const SchemaLogicalGroup = ({
   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>
-    ));
-  };
+  const [isOpen, setIsOpen] = useState(true);
+  const toggleOpen = useCallback(() => setIsOpen((prev) => !prev), []);
 
-  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");
+  for (const [key, type] of objectEntries(LogicalSchemaTypeMap)) {
+    if (!schema[key]) continue;
 
-  return null;
+    return (
+      <LogicalGroup
+        schemas={schema[key]}
+        type={type}
+        isOpen={isOpen}
+        toggleOpen={toggleOpen}
+        level={level}
+      />
+    );
+  }
 };
 
 export const SchemaPropertyItem = ({
   name,
-  value,
+  schema,
   group,
   level,
   defaultOpen = false,
   showCollapseButton = true,
 }: {
   name: string;
-  value: SchemaObject;
+  schema: SchemaObject;
   group: "required" | "optional" | "deprecated";
   level: number;
   defaultOpen?: boolean;
@@ -63,12 +62,12 @@ export const SchemaPropertyItem = ({
         <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>
+            {schema.type === "array" && schema.items?.type ? (
+              <span>{schema.items.type}[]</span>
+            ) : Array.isArray(schema.type) ? (
+              <span>{schema.type.join(" | ")}</span>
             ) : (
-              <span>{value.type}</span>
+              <span>{schema.type}</span>
             )}
           </span>
           {group === "optional" && (
@@ -78,14 +77,14 @@ export const SchemaPropertyItem = ({
           )}
         </div>
 
-        {value.description && (
+        {schema.description && (
           <Markdown
             className={cn(ProseClasses, "text-sm leading-normal line-clamp-4")}
-            content={value.description}
+            content={schema.description}
           />
         )}
 
-        {(hasLogicalGroupings(value) || isComplexType(value)) && (
+        {(hasLogicalGroupings(schema) || isComplexType(schema)) && (
           <Collapsible.Root
             defaultOpen={defaultOpen}
             open={isOpen}
@@ -107,14 +106,15 @@ export const SchemaPropertyItem = ({
             )}
             <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} />
+                {hasLogicalGroupings(schema) ? (
+                  <SchemaLogicalGroup schema={schema} level={level + 1} />
+                ) : schema.type === "object" ? (
+                  <SchemaView schema={schema} level={level + 1} />
+                ) : (
+                  schema.type === "array" &&
+                  typeof schema.items === "object" && (
+                    <SchemaView schema={schema.items} level={level + 1} />
+                  )
                 )}
               </div>
             </Collapsible.Content>

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

@@ -111,11 +111,11 @@ export const SchemaView = ({
             (group) =>
               groupedProperties[group] && (
                 <ul key={group} className="divide-y">
-                  {groupedProperties[group].map(([key, value]) => (
+                  {groupedProperties[group].map(([name, schema]) => (
                     <SchemaPropertyItem
-                      key={key}
-                      name={key}
-                      value={value}
+                      key={name}
+                      name={name}
+                      schema={schema}
                       group={group}
                       level={level}
                       defaultOpen={isTopLevelSingleItem || defaultOpen}

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

@@ -8,3 +8,11 @@ export const isComplexType = (value: SchemaObject) =>
 
 export const hasLogicalGroupings = (value: SchemaObject) =>
   Boolean(value.oneOf ?? value.allOf ?? value.anyOf);
+
+export const LogicalSchemaTypeMap = {
+  allOf: "AND",
+  anyOf: "OR",
+  oneOf: "ONE",
+} as const;
+
+export type LogicalGroupType = "AND" | "OR" | "ONE";

package/dist/lib/plugins/openapi/util/prose.d.ts

@@ -1 +0,0 @@
-export declare const SchemaProseClasses: string;

package/dist/lib/plugins/openapi/util/prose.js

@@ -1,4 +0,0 @@
-import { ProseClasses } from "../../../components/Markdown.js";
-import { cn } from "../../../util/cn.js";
-export const SchemaProseClasses = cn(ProseClasses, "max-w-full prose-img:max-w-prose");
-//# sourceMappingURL=prose.js.map

package/dist/lib/plugins/openapi/util/prose.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"prose.js","sourceRoot":"","sources":["../../../../../src/lib/plugins/openapi/util/prose.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC/D,OAAO,EAAE,EAAE,EAAE,MAAM,qBAAqB,CAAC;AAEzC,MAAM,CAAC,MAAM,kBAAkB,GAAG,EAAE,CAClC,YAAY,EACZ,kCAAkC,CACnC,CAAC"}