zudoku 0.3.1-dev.2 → 0.3.1-dev.21

package/src/lib/authentication/providers/openid.tsx

@@ -1,13 +1,12 @@
 import logger from "loglevel";
 import * as oauth from "oauth4webapi";
-import { NavigateFunction } from "react-router-dom";
 import { OpenIDAuthenticationConfig } from "../../../config/config.js";
-import { CommonPlugin } from "../../core/plugins.js";
 import {
   AuthenticationProvider,
   AuthenticationProviderInitializer,
 } from "../authentication.js";
 import { AuthenticationPlugin } from "../AuthenticationPlugin.js";
+import { CallbackHandler } from "../components/CallbackHandler.js";
 import { AuthorizationError, OAuthAuthorizationError } from "../errors.js";
 import { useAuthState, UserProfile } from "../state.js";
 
@@ -23,7 +22,7 @@ interface TokenState {
 class OpenIdAuthPlugin extends AuthenticationPlugin {
   constructor(
     private callbackUrlPath: string,
-    public initialize?: CommonPlugin["initialize"],
+    private handleCallback: () => Promise<string>,
   ) {
     super();
   }
@@ -32,7 +31,7 @@ class OpenIdAuthPlugin extends AuthenticationPlugin {
       ...super.getRoutes(),
       {
         path: this.callbackUrlPath,
-        element: <div />,
+        element: <CallbackHandler handleCallback={this.handleCallback} />,
       },
     ];
   }
@@ -41,11 +40,8 @@ class OpenIdAuthPlugin extends AuthenticationPlugin {
 export class OpenIDAuthenticationProvider implements AuthenticationProvider {
   protected client: oauth.Client;
   protected issuer: string;
-  protected authorizationEndpoint: string | undefined;
-  protected tokenEndpoint: string | undefined;
 
   protected authorizationServer: oauth.AuthorizationServer | undefined;
-  protected tokens: TokenState | undefined;
 
   protected callbackUrlPath = "/oauth/callback";
   protected logoutRedirectUrlPath = "/";
@@ -61,8 +57,6 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
   constructor({
     issuer,
     audience,
-    authorizationEndpoint,
-    tokenEndpoint,
     clientId,
     redirectToAfterSignUp,
     redirectToAfterSignIn,
@@ -74,8 +68,6 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     };
     this.audience = audience;
     this.issuer = issuer;
-    this.authorizationEndpoint = authorizationEndpoint;
-    this.tokenEndpoint = tokenEndpoint;
     this.redirectToAfterSignUp = redirectToAfterSignUp ?? "/";
     this.redirectToAfterSignIn = redirectToAfterSignIn ?? "/";
     this.redirectToAfterSignOut = redirectToAfterSignOut ?? "/";
@@ -83,21 +75,12 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
 
   protected async getAuthServer() {
     if (!this.authorizationServer) {
-      if (this.tokenEndpoint && this.authorizationEndpoint) {
-        this.authorizationServer = {
-          issuer: new URL(this.authorizationEndpoint!).origin,
-          authorization_endpoint: this.authorizationEndpoint,
-          token_endpoint: this.tokenEndpoint,
-          code_challenge_methods_supported: [],
-        };
-      } else {
-        const issuerUrl = new URL(this.issuer);
-        const response = await oauth.discoveryRequest(issuerUrl);
-        this.authorizationServer = await oauth.processDiscoveryResponse(
-          issuerUrl,
-          response,
-        );
-      }
+      const issuerUrl = new URL(this.issuer);
+      const response = await oauth.discoveryRequest(issuerUrl);
+      this.authorizationServer = await oauth.processDiscoveryResponse(
+        issuerUrl,
+        response,
+      );
     }
     return this.authorizationServer;
   }
@@ -118,13 +101,13 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
       throw new AuthorizationError("No expires_in in response");
     }
 
-    this.tokens = {
+    const tokens: TokenState = {
       accessToken: response.access_token,
       refreshToken: response.refresh_token,
       expiresOn: new Date(Date.now() + response.expires_in * 1000),
       tokenType: response.token_type,
     };
-    sessionStorage.setItem("openid-token", JSON.stringify(this.tokens));
+    sessionStorage.setItem("token-state", JSON.stringify(tokens));
   }
 
   async signUp({ redirectTo }: { redirectTo?: string } = {}) {
@@ -178,7 +161,7 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     authorizationUrl.searchParams.set("client_id", this.client.client_id);
     authorizationUrl.searchParams.set("redirect_uri", redirectUrl.toString());
     authorizationUrl.searchParams.set("response_type", "code");
-    authorizationUrl.searchParams.set("scope", "openid+profile+email");
+    authorizationUrl.searchParams.set("scope", "openid profile email");
     authorizationUrl.searchParams.set("code_challenge", codeChallenge);
     authorizationUrl.searchParams.set(
       "code_challenge_method",
@@ -211,11 +194,14 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
 
   async getAccessToken(): Promise<string> {
     const as = await this.getAuthServer();
-    if (!this.tokens) {
+    const tokenState = sessionStorage.getItem("token-state");
+    if (!tokenState) {
       throw new AuthorizationError("User is not authenticated");
     }
-    if (this.tokens.expiresOn < new Date()) {
-      if (!this.tokens.refreshToken) {
+
+    const state = JSON.parse(tokenState) as TokenState;
+    if (state.expiresOn < new Date()) {
+      if (!state.refreshToken) {
         await this.signIn();
         return "";
       }
@@ -223,7 +209,7 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
       const request = await oauth.refreshTokenGrantRequest(
         as,
         this.client,
-        this.tokens.refreshToken,
+        state.refreshToken,
       );
       const response = await oauth.processRefreshTokenResponse(
         as,
@@ -231,10 +217,16 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
         request,
       );
 
+      if (!response.access_token) {
+        throw new AuthorizationError("No access token in response");
+      }
+
       this.setTokensFromResponse(response);
-    }
 
-    return this.tokens.accessToken;
+      return response.access_token.toString();
+    } else {
+      return state.accessToken;
+    }
   }
 
   signOut = async () => {
@@ -243,7 +235,7 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
       isPending: false,
       profile: undefined,
     });
-    localStorage.removeItem("auto-login");
+    sessionStorage.clear();
 
     const as = await this.getAuthServer();
 
@@ -279,9 +271,8 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     // Authorization Code Grant Request & Response
     const codeVerifier = sessionStorage.getItem(CODE_VERIFIER_KEY);
     sessionStorage.removeItem(CODE_VERIFIER_KEY);
-
     if (!codeVerifier) {
-      return "/";
+      throw new AuthorizationError("No code verifier found in state.");
     }
 
     const authServer = await this.getAuthServer();
@@ -320,7 +311,7 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     //   }
     //   throw new Error(); // Handle WWW-Authenticate Challenges as needed
     // }
-    const oauthResult = await oauth.processAuthorizationCodeOAuth2Response(
+    const oauthResult = await oauth.processAuthorizationCodeOpenIDResponse(
       authServer,
       this.client,
       response,
@@ -351,29 +342,36 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
       profile,
     });
 
-    localStorage.setItem("auto-login", "1");
+    sessionStorage.setItem(
+      "profile-state",
+      JSON.stringify(useAuthState.getState().profile),
+    );
 
-    return sessionStorage.getItem("redirect-to") ?? "/";
+    const redirectTo = sessionStorage.getItem("redirect-to") ?? "/";
+    sessionStorage.removeItem("redirect-to");
+    return redirectTo;
   };
 
+  pageLoad(): void {
+    const profileState = sessionStorage.getItem("profile-state");
+    if (profileState) {
+      try {
+        const profile = JSON.parse(profileState);
+        useAuthState.setState({
+          isAuthenticated: true,
+          isPending: false,
+          profile,
+        });
+      } catch (err) {
+        logger.error("Error parsing auth state", err);
+      }
+    }
+  }
+
   getAuthenticationPlugin() {
-    return new OpenIdAuthPlugin(
-      this.callbackUrlPath,
-      async (_, options: { navigate: NavigateFunction }) => {
-        if (typeof window === "undefined") return;
-
-        if (localStorage.getItem("auto-login")) {
-          localStorage.removeItem("auto-login");
-
-          await this.authorize({ redirectTo: window.location.pathname });
-        } else if (window.location.pathname === "/oauth/callback") {
-          const redirect = await this.handleCallback();
-          if (redirect) {
-            options.navigate(redirect);
-          }
-        }
-      },
-    );
+    // TODO: This API is a bit messy, we need to refactor auth plugins/providers
+    // to remove the extra layers of abstraction.
+    return new OpenIdAuthPlugin(this.callbackUrlPath, this.handleCallback);
   }
 }
 

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>
+  );
+};