zudoku 0.42.1 → 0.43.0

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/plugins/openapi/ParamInfos.tsx

@@ -36,6 +36,7 @@ const getSchemaInfos = (schema?: SchemaObject) => {
         : schema.type,
 
     schema.enum && "enum",
+    schema.const && "const",
     schema.format,
     schema.minimum && `min: ${schema.minimum}`,
     schema.maximum && `max: ${schema.maximum}`,

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/components/ConstValue.tsx

@@ -0,0 +1,24 @@
+import type { SchemaObject } from "../../../oas/parser/index.js";
+import { SelectOnClick } from "./SelectOnClick.js";
+
+export const ConstValue = ({
+  schema,
+  hideDescription = false,
+}: {
+  schema: SchemaObject;
+  hideDescription?: boolean;
+}) => {
+  return (
+    <div className="flex flex-col gap-1 text-xs">
+      <div>
+        <span className="text-muted-foreground">Const value: </span>
+        <SelectOnClick className="border rounded px-1 font-mono">
+          {schema.const}
+        </SelectOnClick>
+        {!hideDescription && schema.description && (
+          <div className="text-muted-foreground">{schema.description}</div>
+        )}
+      </div>
+    </div>
+  );
+};

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

@@ -7,6 +7,7 @@ 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 { ConstValue } from "../components/ConstValue.js";
 import { EnumValues } from "../components/EnumValues.js";
 import { SelectOnClick } from "../components/SelectOnClick.js";
 import { ParamInfos } from "../ParamInfos.js";
@@ -15,6 +16,7 @@ import { SchemaExampleAndDefault } from "./SchemaExampleAndDefault.js";
 import { SchemaView } from "./SchemaView.js";
 import {
   hasLogicalGroupings,
+  isArrayType,
   isCircularRef,
   isComplexType,
   LogicalSchemaTypeMap,
@@ -93,7 +95,7 @@ export const SchemaPropertyItem = ({
               group !== "optional" && (
                 <span className="text-primary">required</span>
               ),
-              schema.type === "array" &&
+              isArrayType(schema) &&
                 "items" in schema &&
                 isCircularRef(schema.items) && <RecursiveIndicator />,
             ]}
@@ -108,9 +110,13 @@ export const SchemaPropertyItem = ({
         {schema.type === "array" && "items" in schema && schema.items.enum && (
           <EnumValues values={schema.items.enum} />
         )}
+        {schema.const && <ConstValue schema={schema} hideDescription />}
         {schema.enum && <EnumValues values={schema.enum} />}
         <SchemaExampleAndDefault schema={schema} />
-        {(hasLogicalGroupings(schema) || isComplexType(schema)) && (
+        {(hasLogicalGroupings(schema) ||
+          isComplexType(schema) ||
+          isArrayType(schema) ||
+          schema.additionalProperties) && (
           <Collapsible.Root
             defaultOpen={defaultOpen}
             open={isOpen}
@@ -118,7 +124,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 +137,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

@@ -1,8 +1,10 @@
+import { InfoIcon } from "lucide-react";
 import { Markdown, ProseClasses } from "../../../components/Markdown.js";
 import type { SchemaObject } from "../../../oas/parser/index.js";
-import { Card, CardContent, CardHeader, CardTitle } from "../../../ui/Card.js";
+import { Card } from "../../../ui/Card.js";
 import { cn } from "../../../util/cn.js";
 import { groupBy } from "../../../util/groupBy.js";
+import { ConstValue } from "../components/ConstValue.js";
 import { EnumValues } from "../components/EnumValues.js";
 import { ParamInfos } from "../ParamInfos.js";
 import { SchemaExampleAndDefault } from "./SchemaExampleAndDefault.js";
@@ -48,6 +50,10 @@ export const SchemaView = ({
     );
   }
 
+  if (schema.const) {
+    return <ConstValue schema={schema} />;
+  }
+
   if (hasLogicalGroupings(schema)) {
     return <SchemaLogicalGroup schema={schema} />;
   }
@@ -57,12 +63,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} />;
   }
 
   if (schema.type === "object") {
@@ -78,6 +79,28 @@ export const SchemaView = ({
     );
     const groupNames = ["required", "optional", "deprecated"] as const;
 
+    const additionalProperties =
+      typeof schema.additionalProperties === "object" ? (
+        <SchemaView schema={schema.additionalProperties} />
+      ) : schema.additionalProperties === true ? (
+        <div
+          className={cn(
+            ProseClasses,
+            "text-sm p-4 bg-border/20 hover:bg-border/30 flex items-center gap-1",
+          )}
+        >
+          <span>Additional properties are allowed</span>
+          <a
+            className="p-0.5 -m-0.5"
+            href="https://swagger.io/docs/specification/v3_0/data-models/dictionaries/"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            <InfoIcon size={14} />
+          </a>
+        </div>
+      ) : null;
+
     return (
       <Card className="divide-y overflow-hidden">
         {groupNames.map(
@@ -96,19 +119,7 @@ export const SchemaView = ({
               </ul>
             ),
         )}
-      </Card>
-    );
-  }
-
-  if (schema.additionalProperties) {
-    return (
-      <Card className="my-2">
-        <CardHeader>
-          <CardTitle>Additional Properties:</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <SchemaView schema={schema.additionalProperties as SchemaObject} />
-        </CardContent>
+        {additionalProperties}
       </Card>
     );
   }

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/plugins/openapi/util/generateSchemaExample.ts

@@ -24,6 +24,11 @@ export const generateSchemaExample = (
     }
   }
 
+  // No example needed for const values
+  if (schema.const !== undefined) {
+    return schema.const;
+  }
+
   // For object schemas with properties
   if (schema.type === "object" && schema.properties) {
     const example: Record<string, any> = {};
@@ -50,10 +55,50 @@ export const generateSchemaExample = (
     return [];
   }
 
+  if (schema.format !== undefined) {
+    // Partial implementation of JSON Schema format examples
+    // https://json-schema.org/draft/2020-12/draft-bhutton-json-schema-validation-00#rfc.section.7.3
+    switch (schema.format) {
+      case "date-time":
+        return "2024-08-25T15:00:00Z";
+      case "date":
+        return "2024-08-25";
+      case "time":
+        return "15:00:00";
+      case "email":
+        return "test@example.com";
+      case "uri":
+        return "https://www.example.com/path/to/resource";
+      case "uri-reference":
+        return "/path/to/resource";
+      case "uuid":
+        return "00000000-0000-0000-0000-000000000000";
+    }
+  }
+
   if (schema.enum) {
     return schema.enum[0];
   }
 
+  if (schema.oneOf) {
+    const randomIndex = Math.floor(Math.random() * schema.oneOf.length);
+    return generateSchemaExample(schema.oneOf[randomIndex] as SchemaObject);
+  }
+
+  if (schema.anyOf) {
+    // Should likely be expanded to return a partial set of values, but it would require
+    // detection if being used within an array or a string type.
+    const randomIndex = Math.floor(Math.random() * schema.anyOf.length);
+    return generateSchemaExample(schema.anyOf[randomIndex] as SchemaObject);
+  }
+
+  if (schema.allOf) {
+    // https://swagger.io/docs/specification/v3_0/data-models/oneof-anyof-allof-not/#allof
+    return schema.allOf.reduce((acc, allOfSchema) => {
+      return { ...acc, ...generateSchemaExample(allOfSchema as SchemaObject) };
+    }, {});
+  }
+
   switch (schema.type) {
     case "string":
       return name || "string";

package/lib/AuthenticationPlugin-DPCuR3xm.js

@@ -1,58 +0,0 @@
-import { j as o } from "./jsx-runtime-C5mzlN2N.js";
-import { LogOutIcon as a } from "lucide-react";
-import { useEffect as i } from "react";
-import { b as u, a as r } from "./chunk-BAXFHI7N-BVBOl9s0.js";
-import { e as s } from "./hook-CldJlP5c.js";
-const c = () => {
-  const t = s(), [e] = u();
-  return i(() => {
-    var n;
-    (n = t.authentication) == null || n.signIn({
-      redirectTo: e.get("redirect") ?? void 0
-    });
-  }, [t.authentication, e]), null;
-}, g = () => {
-  const t = s(), e = r();
-  return i(() => {
-    var n;
-    (n = t.authentication) == null || n.signOut().then(() => e("/"));
-  }, []), null;
-}, m = () => {
-  const t = s();
-  return i(() => {
-    var e, n;
-    ((e = t.authentication) == null ? void 0 : e.signUp()) ?? ((n = t.authentication) == null || n.signIn());
-  }, [t.authentication]), null;
-};
-class d {
-  getRoutes() {
-    return [
-      {
-        path: "/signout",
-        element: /* @__PURE__ */ o.jsx(g, {})
-      },
-      {
-        path: "/signin",
-        element: /* @__PURE__ */ o.jsx(c, {})
-      },
-      {
-        path: "/signup",
-        element: /* @__PURE__ */ o.jsx(m, {})
-      }
-    ];
-  }
-  getProfileMenuItems() {
-    return [
-      {
-        label: "Logout",
-        path: "/signout",
-        category: "bottom",
-        icon: a
-      }
-    ];
-  }
-}
-export {
-  d as A
-};
-//# sourceMappingURL=AuthenticationPlugin-DPCuR3xm.js.map

package/lib/AuthenticationPlugin-DPCuR3xm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AuthenticationPlugin-DPCuR3xm.js","sources":["../src/lib/authentication/components/SignIn.tsx","../src/lib/authentication/components/SignOut.tsx","../src/lib/authentication/components/SignUp.tsx","../src/lib/authentication/AuthenticationPlugin.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { useSearchParams } from \"react-router\";\nimport { useZudoku } from \"../../components/context/ZudokuContext.js\";\n\nexport const SignIn = () => {\n  const context = useZudoku();\n  const [search] = useSearchParams();\n  useEffect(() => {\n    void context.authentication?.signIn({\n      redirectTo: search.get(\"redirect\") ?? undefined,\n    });\n  }, [context.authentication, search]);\n\n  return null;\n};\n","import { useEffect } from \"react\";\nimport { useNavigate } from \"react-router\";\nimport { useZudoku } from \"../../components/context/ZudokuContext.js\";\n\nexport const SignOut = () => {\n  const context = useZudoku();\n  const navigate = useNavigate();\n\n  useEffect(() => {\n    void context.authentication?.signOut().then(() => navigate(\"/\"));\n  }, []);\n\n  return null;\n};\n","import { useEffect } from \"react\";\nimport { useZudoku } from \"../../components/context/ZudokuContext.js\";\n\nexport const SignUp = () => {\n  const context = useZudoku();\n  useEffect(() => {\n    void (context.authentication?.signUp() ?? context.authentication?.signIn());\n  }, [context.authentication]);\n\n  return null;\n};\n","import { LogOutIcon } from \"lucide-react\";\nimport {\n  CommonPlugin,\n  NavigationPlugin,\n  ProfileMenuPlugin,\n} from \"../core/plugins.js\";\nimport { SignIn } from \"./components/SignIn.js\";\nimport { SignOut } from \"./components/SignOut.js\";\nimport { SignUp } from \"./components/SignUp.js\";\n\ntype PluginInterface = NavigationPlugin & CommonPlugin & ProfileMenuPlugin;\n\nexport class AuthenticationPlugin implements PluginInterface {\n  getRoutes() {\n    return [\n      {\n        path: \"/signout\",\n        element: <SignOut />,\n      },\n      {\n        path: \"/signin\",\n        element: <SignIn />,\n      },\n      {\n        path: \"/signup\",\n        element: <SignUp />,\n      },\n    ];\n  }\n\n  getProfileMenuItems() {\n    return [\n      {\n        label: \"Logout\",\n        path: \"/signout\",\n        category: \"bottom\",\n        icon: LogOutIcon,\n      } as const,\n    ];\n  }\n}\n"],"names":["SignIn","context","useZudoku","search","useSearchParams","useEffect","_a","SignOut","navigate","useNavigate","SignUp","_b","AuthenticationPlugin","LogOutIcon"],"mappings":";;;;;AAIO,MAAMA,IAAS,MAAM;AAC1B,QAAMC,IAAUC,EAAU,GACpB,CAACC,CAAM,IAAIC,EAAgB;AACjC,SAAAC,EAAU,MAAM;;AACT,KAAAC,IAAAL,EAAQ,mBAAR,QAAAK,EAAwB,OAAO;AAAA,MAClC,YAAYH,EAAO,IAAI,UAAU,KAAK;AAAA,IAAA;AAAA,EAEvC,GAAA,CAACF,EAAQ,gBAAgBE,CAAM,CAAC,GAE5B;AACT,GCVaI,IAAU,MAAM;AAC3B,QAAMN,IAAUC,EAAU,GACpBM,IAAWC,EAAY;AAE7B,SAAAJ,EAAU,MAAM;;AACT,KAAAC,IAAAL,EAAQ,mBAAR,QAAAK,EAAwB,UAAU,KAAK,MAAME,EAAS,GAAG;AAAA,EAChE,GAAG,EAAE,GAEE;AACT,GCVaE,IAAS,MAAM;AAC1B,QAAMT,IAAUC,EAAU;AAC1B,SAAAG,EAAU,MAAM;;AACd,MAAMC,IAAAL,EAAQ,mBAAR,gBAAAK,EAAwB,eAAYK,IAAAV,EAAQ,mBAAR,QAAAU,EAAwB;AAAA,EAAO,GACxE,CAACV,EAAQ,cAAc,CAAC,GAEpB;AACT;ACEO,MAAMW,EAAgD;AAAA,EAC3D,YAAY;AACH,WAAA;AAAA,MACL;AAAA,QACE,MAAM;AAAA,QACN,+BAAUL,GAAQ,CAAA,CAAA;AAAA,MACpB;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,+BAAUP,GAAO,CAAA,CAAA;AAAA,MACnB;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,+BAAUU,GAAO,CAAA,CAAA;AAAA,MAAA;AAAA,IAErB;AAAA,EAAA;AAAA,EAGF,sBAAsB;AACb,WAAA;AAAA,MACL;AAAA,QACE,OAAO;AAAA,QACP,MAAM;AAAA,QACN,UAAU;AAAA,QACV,MAAMG;AAAA,MAAA;AAAA,IAEV;AAAA,EAAA;AAEJ;"}