zudoku 0.42.0 → 0.42.2

package/src/lib/authentication/components/SignIn.tsx

@@ -1,5 +1,13 @@
 import { useEffect } from "react";
-import { useSearchParams } from "react-router";
+import { Link, useSearchParams } from "react-router";
+import { Button } from "zudoku/ui/Button.js";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "zudoku/ui/Card.js";
 import { useZudoku } from "../../components/context/ZudokuContext.js";
 
 export const SignIn = () => {
@@ -11,5 +19,30 @@ export const SignIn = () => {
     });
   }, [context.authentication, search]);
 
-  return null;
+  return (
+    <div className="flex items-center justify-center mt-8">
+      <Card className="max-w-md w-full">
+        <CardHeader>
+          <CardTitle className="text-lg">Sign in</CardTitle>
+          <CardDescription>
+            You're being redirected to our secure login provider to complete
+            your sign-in process.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="flex flex-col gap-2 justify-center">
+            <Button
+              onClick={() => context.authentication?.signIn()}
+              variant="default"
+            >
+              Login
+            </Button>
+            <Button variant="link" className="text-muted-foreground" asChild>
+              <Link to="/">Go home</Link>
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
 };

package/src/lib/authentication/components/SignUp.tsx

@@ -1,11 +1,45 @@
 import { useEffect } from "react";
+import { Button, Link } from "zudoku/components";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "zudoku/ui/Card.js";
 import { useZudoku } from "../../components/context/ZudokuContext.js";
 
 export const SignUp = () => {
   const context = useZudoku();
+
   useEffect(() => {
     void (context.authentication?.signUp() ?? context.authentication?.signIn());
   }, [context.authentication]);
 
-  return null;
+  return (
+    <div className="flex items-center justify-center mt-8">
+      <Card className="max-w-md w-full">
+        <CardHeader>
+          <CardTitle className="text-lg">Sign up</CardTitle>
+          <CardDescription>
+            You're being redirected to our secure login provider to complete
+            your sign up process.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="flex flex-col gap-2 justify-center">
+            <Button
+              onClick={() => context.authentication?.signIn()}
+              variant="default"
+            >
+              Register
+            </Button>
+            <Button variant="link" className="text-muted-foreground" asChild>
+              <Link to="/">Go home</Link>
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
 };

package/src/lib/components/Markdown.tsx

@@ -1,42 +1,37 @@
 import { memo } from "react";
-import { MarkdownHooks, type Components } from "react-markdown";
+import rehypeRaw from "rehype-raw";
 import remarkGfm from "remark-gfm";
-import { createConfiguredShikiRehypePlugins } from "../shiki.js";
+import { visit } from "unist-util-visit";
 import { MdxComponents } from "../util/MdxComponents.js";
-import { useZudoku } from "./context/ZudokuContext.js";
+import { ReactMarkdown } from "./ReactMarkdown.js";
+
+// same as in packages/dev-portal/framework/vite.ts
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const rehypeCodeBlockPlugin = () => (tree: any) => {
+  visit(tree, "element", (node, _index, parent) => {
+    if (node.tagName === "code") {
+      node.properties.inline = String(parent?.tagName !== "pre");
+    }
+  });
+};
 
 const remarkPlugins = [remarkGfm];
+const rehypePlugins = [rehypeCodeBlockPlugin, rehypeRaw];
 
 // other styles are defined in main.css .prose
 export const ProseClasses = "prose dark:prose-invert prose-neutral";
 
 export const Markdown = memo(
-  ({
-    content,
-    className,
-    components,
-  }: {
-    content: string;
-    className?: string;
-    components?: Components;
-  }) => {
-    const { syntaxHighlighting } = useZudoku().options;
-    const rehypePlugins = createConfiguredShikiRehypePlugins(
-      syntaxHighlighting?.themes,
-    );
-
-    return (
-      <div className={className}>
-        <MarkdownHooks
-          remarkPlugins={remarkPlugins}
-          rehypePlugins={rehypePlugins}
-          components={{ ...MdxComponents, ...components }}
-        >
-          {content}
-        </MarkdownHooks>
-      </div>
-    );
-  },
+  ({ content, className }: { content: string; className?: string }) => (
+    <ReactMarkdown
+      remarkPlugins={remarkPlugins}
+      rehypePlugins={rehypePlugins}
+      components={MdxComponents}
+      className={className}
+    >
+      {content}
+    </ReactMarkdown>
+  ),
 );
 
 Markdown.displayName = "Markdown";

package/src/lib/core/ZudokuContext.ts

@@ -2,7 +2,6 @@ import type { QueryClient } from "@tanstack/react-query";
 import { createNanoEvents } from "nanoevents";
 import type { ReactNode } from "react";
 import type { Location } from "react-router";
-import type { BundledTheme } from "shiki";
 import type { z } from "zod";
 import type {
   FooterSchema,
@@ -90,9 +89,6 @@ export type ZudokuContextOptions = {
   };
   overrides?: ComponentsContextType;
   protectedRoutes?: string[];
-  syntaxHighlighting?: {
-    themes?: { light: BundledTheme; dark: BundledTheme };
-  };
 };
 
 export class ZudokuContext {

package/src/lib/errors/ErrorAlert.tsx

@@ -32,7 +32,7 @@ export function ErrorAlert({ error }: { error: unknown }) {
         <div>
           <SyntaxHighlight
             className="max-h-[400px] border mt-2"
-            language="js"
+            language="jsstacktrace"
             code={stringError}
           />
         </div>

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

@@ -49,7 +49,7 @@ export const CollapsibleCode = ({
         )}
       >
         {!open && isOverflowing && (
-          <div className=" absolute inset-0 bg-gradient-to-b from-transparent to-zinc-50/60 dark:to-zinc-950/90 z-10 transition-all group-hover:to-transparent"></div>
+          <div className=" absolute inset-0 bg-gradient-to-b from-transparent to-zinc-50/60 dark:to-zinc-950/90 z-10 group-hover:to-transparent"></div>
         )}
         <div ref={contentRef}>{children}</div>
         {!open && isOverflowing && (
@@ -68,10 +68,7 @@ export const CollapsibleCode = ({
       </CollapsibleContent>
       {isOverflowing && (
         <div
-          className={cn(
-            "flex justify-center w-full py-2 bg-muted/50",
-            !open && "hidden",
-          )}
+          className={cn("flex justify-center w-full mb-2", !open && "hidden")}
         >
           <CollapsibleTrigger asChild>
             <Button variant="outline" size="sm">

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

@@ -1,5 +1,9 @@
+import * as Collapsible from "@radix-ui/react-collapsible";
+import { MinusIcon, PlusIcon } from "lucide-react";
+import { useState } from "react";
 import { Markdown } from "../../components/Markdown.js";
 import { type SchemaObject } from "../../oas/graphql/index.js";
+import { Button } from "../../ui/Button.js";
 import { ColorizedParam } from "./ColorizedParam.js";
 import type { OperationListItemResult } from "./OperationList.js";
 import type { ParameterGroup } from "./OperationListItem.js";
@@ -7,6 +11,8 @@ import { ParamInfos } from "./ParamInfos.js";
 import { EnumValues } from "./components/EnumValues.js";
 import { SelectOnClick } from "./components/SelectOnClick.js";
 import { SchemaExampleAndDefault } from "./schema/SchemaExampleAndDefault.js";
+import { SchemaView } from "./schema/SchemaView.js";
+import { isArrayType } from "./schema/utils.js";
 
 const getParameterSchema = (
   parameter: ParameterListItemResult,
@@ -33,6 +39,7 @@ export const ParameterListItem = ({
   id: string;
 }) => {
   const paramSchema = getParameterSchema(parameter);
+  const [isOpen, setIsOpen] = useState(false);
 
   return (
     <li className="p-4 bg-border/20 text-sm flex flex-col gap-1.5">
@@ -74,6 +81,29 @@ export const ParameterListItem = ({
         paramSchema.enum && <EnumValues values={paramSchema.enum} />
       )}
       <SchemaExampleAndDefault schema={paramSchema} />
+      {(paramSchema.type === "object" || isArrayType(paramSchema)) && (
+        <Collapsible.Root
+          defaultOpen={false}
+          onOpenChange={setIsOpen}
+          open={isOpen}
+        >
+          <Collapsible.Trigger asChild>
+            <Button variant="expand" size="sm">
+              {isOpen ? <MinusIcon size={12} /> : <PlusIcon size={12} />}
+              {isOpen ? "Hide properties" : "Show properties"}
+            </Button>
+          </Collapsible.Trigger>
+          <Collapsible.Content>
+            <div className="mt-2">
+              <SchemaView
+                schema={
+                  "items" in paramSchema ? paramSchema.items : paramSchema
+                }
+              />
+            </div>
+          </Collapsible.Content>
+        </Collapsible.Root>
+      )}
     </li>
   );
 };

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

@@ -225,7 +225,7 @@ export const Sidecar = ({
                 <SyntaxHighlight
                   language={selectedLang}
                   noBackground
-                  className="[--scrollbar-color:gray] rounded-none text-xs max-h-[500px] p-2"
+                  className="[--scrollbar-color:gray] text-xs max-h-[500px] p-2"
                   code={code!}
                 />
               </CollapsibleCode>

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

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from "react";
-import { type SchemaObject } from "../../oas/parser/index.js";
+import { SchemaObject } from "../../oas/parser/index.js";
 import { SyntaxHighlight } from "../../ui/SyntaxHighlight.js";
 import { CollapsibleCode } from "./CollapsibleCode.js";
 import type { OperationListItemResult } from "./OperationList.js";
@@ -97,7 +97,7 @@ export const SidecarExamples = ({
             <SyntaxHighlight
               language={language}
               noBackground
-              className="[--scrollbar-color:gray] rounded-none text-xs max-h-[500px] p-2"
+              className="[--scrollbar-color:gray] text-xs max-h-[500px] p-2"
               code={formattedExample}
             />
           </CollapsibleCode>

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

@@ -15,6 +15,7 @@ import { SchemaExampleAndDefault } from "./SchemaExampleAndDefault.js";
 import { SchemaView } from "./SchemaView.js";
 import {
   hasLogicalGroupings,
+  isArrayType,
   isCircularRef,
   isComplexType,
   LogicalSchemaTypeMap,
@@ -93,7 +94,7 @@ export const SchemaPropertyItem = ({
               group !== "optional" && (
                 <span className="text-primary">required</span>
               ),
-              schema.type === "array" &&
+              isArrayType(schema) &&
                 "items" in schema &&
                 isCircularRef(schema.items) && <RecursiveIndicator />,
             ]}
@@ -110,7 +111,9 @@ export const SchemaPropertyItem = ({
         )}
         {schema.enum && <EnumValues values={schema.enum} />}
         <SchemaExampleAndDefault schema={schema} />
-        {(hasLogicalGroupings(schema) || isComplexType(schema)) && (
+        {(hasLogicalGroupings(schema) ||
+          isComplexType(schema) ||
+          isArrayType(schema)) && (
           <Collapsible.Root
             defaultOpen={defaultOpen}
             open={isOpen}
@@ -118,7 +121,7 @@ export const SchemaPropertyItem = ({
           >
             {showCollapseButton && (
               <Collapsible.Trigger asChild>
-                <Button variant="expand" size="sm" className="h-7">
+                <Button variant="expand" size="sm">
                   {isOpen ? <MinusIcon size={12} /> : <PlusIcon size={12} />}
                   {!isOpen ? "Show properties" : "Hide properties"}
                 </Button>
@@ -131,7 +134,7 @@ export const SchemaPropertyItem = ({
                 ) : schema.type === "object" ? (
                   <SchemaView schema={schema} />
                 ) : (
-                  schema.type === "array" &&
+                  isArrayType(schema) &&
                   "items" in schema &&
                   typeof schema.items === "object" &&
                   !isCircularRef(schema.items) && (

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

@@ -57,12 +57,7 @@ export const SchemaView = ({
   }
 
   if (schema.type === "array" && typeof schema.items === "object") {
-    return (
-      <Card className="p-4 space-y-2 text-sm">
-        <ParamInfos schema={schema} />
-        <SchemaView schema={schema.items as SchemaObject} />
-      </Card>
-    );
+    return <SchemaView schema={schema.items as SchemaObject} />;
   }
 
   if (schema.type === "object") {

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

@@ -7,6 +7,11 @@ export const isBasicType = (
   typeof type === "string" &&
   ["string", "number", "boolean", "integer", "null"].includes(type);
 
+export const isArrayType = (value: SchemaObject) =>
+  value.type === "array" ||
+  // schema.type might be an array of types, so we need to check if "array" is one of them
+  (Array.isArray(value.type) && value.type.includes("array"));
+
 export const isComplexType = (value: SchemaObject) =>
   (value.type === "object" && Object.keys(value.properties ?? {}).length > 0) ||
   (value.type === "array" &&

package/src/lib/ui/Callout.tsx

@@ -77,7 +77,7 @@ export const Callout = ({
           "grid grid-cols-[min-content_1fr] items-baseline grid-rows-[fit-content_1fr] gap-x-4 gap-y-2",
         !icon && title && "flex flex-col gap-2",
         "[&_a]:underline [&_a]:decoration-current [&_a]:decoration-from-font [&_a]:underline-offset-4 hover:[&_a]:decoration-1",
-        "[&_.code-block-wrapper]:border",
+        "[&_code]:!bg-gray-50 [&_code]:dark:!bg-gray-800 [&_code]:!border-none",
         "[&_ul]:list-disc [&_ol]:list-decimal [&_ul]:ps-4 [&_ul>li]:ps-1 [&_ul>li]:my-1",
         icon && title && "items-center",
         border,

package/src/lib/ui/SyntaxHighlight.tsx

@@ -1,22 +1,186 @@
-import { memo } from "react";
-import { useZudoku } from "../components/context/ZudokuContext.js";
-import { highlight } from "../shiki.js";
-import { CodeBlock, type CodeBlockProps } from "./CodeBlock.js";
-
-type SyntaxHighlightProps = CodeBlockProps &
-  ({ code: string; children?: never } | { code?: never; children: string });
-
-export const SyntaxHighlight = memo(
-  ({ code, children, ...props }: SyntaxHighlightProps) => {
-    const { syntaxHighlighting } = useZudoku().options;
-    const highlightedCode = highlight(
-      code ?? children,
-      props.language,
-      syntaxHighlighting?.themes,
+import {
+  Highlight,
+  Prism,
+  themes,
+  type HighlightProps,
+} from "prism-react-renderer";
+
+import { CheckIcon, CopyIcon } from "lucide-react";
+
+globalThis.Prism = Prism;
+// @ts-expect-error This is untyped
+void import("prismjs/components/prism-bash.min.js");
+// @ts-expect-error This is untyped
+void import("prismjs/components/prism-ruby.min.js");
+// @ts-expect-error This is untyped
+void import("prismjs/components/prism-markup.js");
+// @ts-expect-error This is untyped
+void import("prismjs/components/prism-json.min.js");
+// @ts-expect-error This is untyped
+void import("prismjs/components/prism-java.min.js");
+// @ts-expect-error This is untyped
+void import("prismjs/components/prism-csharp.min.js");
+// @ts-expect-error This is untyped
+void import("prismjs/components/prism-objectivec.min.js");
+// @ts-expect-error This is untyped
+void import("prismjs/components/prism-markdown.min.js");
+// @ts-expect-error This is untyped
+void import("prismjs/components/prism-javascript.min.js");
+// @ts-expect-error This is untyped
+void import("prismjs/components/prism-typescript.min.js");
+// @ts-expect-error This is untyped
+void import("prismjs/components/prism-jsstacktrace.min.js");
+
+import { useTheme } from "next-themes";
+import { memo, useState } from "react";
+import { ClientOnly } from "../components/ClientOnly.js";
+import { cn } from "../util/cn.js";
+
+export type SyntaxHighlightProps = {
+  className?: string;
+  noBackground?: boolean;
+  wrapLines?: boolean;
+  showLanguageIndicator?: boolean;
+  language?: string;
+  title?: string;
+  children?: string;
+  code?: string;
+  showCopy?: "hover" | "always" | "never";
+  showCopyText?: boolean;
+  disabled?: boolean;
+} & Omit<HighlightProps, "children" | "language">;
+
+const remapLang = {
+  mdx: "md",
+} as Record<string, string>;
+
+const SyntaxHighlightInner = ({
+  language = "plain",
+  showCopy = "hover",
+  showCopyText,
+  title,
+  children,
+  disabled,
+  ...props
+}: SyntaxHighlightProps) => {
+  const { resolvedTheme } = useTheme();
+  const [isCopied, setIsCopied] = useState(false);
+
+  const code = children ?? props.code;
+
+  if (!code) {
+    return null;
+  }
+
+  const highlightTheme =
+    resolvedTheme === "dark" ? themes.vsDark : themes.github;
+
+  // hardcoded values from the themes to avoid color flash in SSR
+  const themeColorClasses =
+    "bg-[#f6f8fa] text-[#393a34] dark:bg-[#1e1e1e] dark:text-[#9cdcfe]";
+
+  const Wrapper = ({
+    children,
+    className,
+    style,
+  }: {
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+  }) => (
+    <div className="relative group">
+      {title && (
+        <div className="text-xs text-muted-foreground absolute top-2 font-mono border-b w-full pb-2 px-4 ">
+          {title}
+        </div>
+      )}
+      <pre
+        className={cn(
+          "relative scrollbar overflow-x-auto",
+          props.className,
+          props.noBackground ? "!bg-transparent" : themeColorClasses,
+          props.wrapLines && "whitespace-pre-wrap break-words",
+          title && "pt-10",
+          className,
+        )}
+        style={style}
+      >
+        {children}
+      </pre>
+      {props.showLanguageIndicator && (
+        <span className="absolute top-1.5 right-3 text-[11px] font-mono text-muted-foreground transition group-hover:opacity-0">
+          {language}
+        </span>
+      )}
+      {showCopy !== "never" && (
+        <button
+          type="button"
+          aria-label="Copy code"
+          title="Copy code"
+          className={cn(
+            "absolute top-2 right-2 p-2  hover:outline hover:outline-border/75 dark:hover:outline-border rounded-md text-sm text-muted-foreground transition",
+            showCopy === "hover"
+              ? "opacity-0 group-hover:opacity-100 group-hover:bg-zinc-100 group-hover:dark:bg-zinc-700"
+              : "bg-zinc-100 dark:bg-zinc-700",
+            showCopyText && "flex gap-2 items-center font-medium",
+          )}
+          disabled={isCopied}
+          onClick={() => {
+            setIsCopied(true);
+            void navigator.clipboard.writeText(code);
+            setTimeout(() => setIsCopied(false), 2000);
+          }}
+        >
+          {isCopied ? (
+            <CheckIcon
+              className="text-emerald-600"
+              size={16}
+              strokeWidth={2.5}
+              absoluteStrokeWidth
+            />
+          ) : (
+            <CopyIcon size={16} />
+          )}
+          {showCopyText && "Copy"}
+        </button>
+      )}
+    </div>
+  );
+
+  if (disabled) {
+    return (
+      <ClientOnly fallback={<Wrapper>{code}</Wrapper>}>
+        <Wrapper>{code}</Wrapper>
+      </ClientOnly>
     );
+  }
+
+  return (
+    <ClientOnly fallback={<Wrapper>{code}</Wrapper>}>
+      <Highlight
+        theme={highlightTheme}
+        language={remapLang[language] ?? language}
+        {...props}
+        code={code}
+      >
+        {({ className, style, tokens, getLineProps, getTokenProps }) => (
+          <Wrapper className={className} style={style}>
+            {tokens.map((line, i) => (
+              // eslint-disable-next-line react/no-array-index-key
+              <div key={i} {...getLineProps({ line })}>
+                {line.map((token, key) => (
+                  // eslint-disable-next-line react/no-array-index-key
+                  <span key={key} {...getTokenProps({ token })} />
+                ))}
+              </div>
+            ))}
+          </Wrapper>
+        )}
+      </Highlight>
+    </ClientOnly>
+  );
+};
 
-    return <CodeBlock {...props}>{highlightedCode}</CodeBlock>;
-  },
-);
+export const SyntaxHighlight = memo(SyntaxHighlightInner);
 
 SyntaxHighlight.displayName = "SyntaxHighlight";

package/src/lib/util/MdxComponents.tsx

@@ -1,5 +1,4 @@
 import { type MDXComponents } from "mdx/types.js";
-import { CodeBlock } from "zudoku/ui/CodeBlock.js";
 import { AnchorLink } from "../components/AnchorLink.js";
 import { Heading } from "../components/Heading.js";
 import { InlineCode } from "../components/InlineCode.js";
@@ -7,7 +6,6 @@ import { Button } from "../ui/Button.js";
 import { Callout } from "../ui/Callout.js";
 import { Stepper } from "../ui/Stepper.js";
 import { SyntaxHighlight } from "../ui/SyntaxHighlight.js";
-import { cn } from "./cn.js";
 
 export type MdxComponentsType = Readonly<MDXComponents> | null | undefined;
 
@@ -64,37 +62,26 @@ export const MdxComponents = {
   caution: (props) => <Callout type="caution" {...props} />,
   warning: (props) => <Callout type="caution" {...props} />,
   danger: (props) => <Callout type="danger" {...props} />,
-  pre: (props) => (
-    <pre className={cn("not-prose my-4", props.className)} {...props} />
-  ),
-  code: ({
-    className,
-    node: _node,
-    children,
-    title,
-    inline,
-    showLineNumbers,
-    ...props
-  }) => {
-    const match = className?.match(/language?-(\w+)/);
+  pre: ({ children }) => <>{children}</>,
+  code: ({ className, children, ...props }) => {
+    // `inline` provided by the rehype plugin, as react-markdown removed support for that
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const { inline, title } = props as Record<string, unknown>;
 
-    if (inline === "true" || inline === true) {
-      return (
-        <InlineCode className={cn(className, "inline")}>{children}</InlineCode>
-      );
+    if (inline === true || inline === "true") {
+      return <InlineCode className={className}>{children}</InlineCode>;
     }
 
+    const match = className?.match(/language?-(\w+)/);
+
     return (
-      <CodeBlock
+      <SyntaxHighlight
         language={match?.[1]}
+        className="rounded-xl p-4 border dark:!bg-foreground/10 dark:border-transparent"
         showLanguageIndicator
-        showLineNumbers={showLineNumbers}
-        title={title}
-      >
-        <code className={cn(className, "not-inline")} {...props}>
-          {children}
-        </code>
-      </CodeBlock>
+        code={String(children).trim()}
+        title={typeof title === "string" ? title : undefined}
+      />
     );
   },
 } satisfies MdxComponentsType;