zudoku 0.1.1-dev.2 → 0.1.1-dev.20

package/src/lib/plugins/openapi/graphql/index.ts

@@ -0,0 +1,2 @@
+export * from "./fragment-masking.js";
+export * from "./gql.js";

package/src/{app → lib}/plugins/openapi/index.tsx

@@ -13,7 +13,9 @@ import {
   cacheExchange,
   fetchExchange,
 } from "./util/urql.js";
-import { createSharedWorkerClient } from "./worker/createSharedWorkerClient.js";
+
+import { createSharedWorkerClient } from "zudoku/open-api-worker";
+import type { createSharedWorkerClient as createSharedWorkerClientType } from "./worker/createSharedWorkerClient.js";
 
 const OasContext = createContext<{ config: OasPluginConfig } | undefined>(
   undefined,
@@ -82,7 +84,9 @@ export const openApiPlugin = (config: OasPluginConfig): DevPortalPlugin => {
         url: config.server,
         exchanges: [cacheExchange, fetchExchange],
       })
-    : createSharedWorkerClient();
+    : (createSharedWorkerClient() as ReturnType<
+        typeof createSharedWorkerClientType
+      >);
 
   return {
     getNavigation: async (path: string) => {

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

@@ -0,0 +1,309 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/Dialog.js";
+import { Card, CardContent } from "../../../ui/Card.js";
+import { Button } from "../../../ui/Button.js";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../../ui/Tabs.js";
+import { Header } from "har-format";
+import {
+  Fragment,
+  InputHTMLAttributes,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { TrashIcon } from "lucide-react";
+import createVariantComponent from "../../../util/createVariantComponent.js";
+import { SyntaxHighlight } from "../../../components/SyntaxHighlight.js";
+import {
+  ColorizedParam,
+  DATA_ATTR,
+  usePastellizedColor,
+} from "../ColorizedParam.js";
+import { cn } from "../../../util/cn.js";
+import { useMutation } from "@tanstack/react-query";
+
+const InlineInput = createVariantComponent(
+  "input",
+  "px-2 bg-transparent h-8 font-mono text-xs m-2",
+);
+
+const ParameterValue = ({
+  part,
+  className,
+  ...props
+}: {
+  part: string;
+} & InputHTMLAttributes<HTMLInputElement>) => {
+  const color = usePastellizedColor(part);
+  return (
+    <InlineInput
+      {...props}
+      className={cn(className, "opacity-80 data-[active=true]:opacity-100")}
+      style={{ color: `hsl(${color})` }}
+    />
+  );
+};
+
+const Playground = ({
+  url,
+  host,
+  method,
+  defaultHeaders,
+}: {
+  host: string;
+  url: string;
+  method: string;
+  defaultHeaders?: Header[];
+}) => {
+  const [headers, setHeaders] = useState<Header[]>(
+    defaultHeaders ?? [{ name: "", value: "" }],
+  );
+  const [urlParts, setUrlParts] = useState<Header[]>(
+    url
+      .split("/")
+      .filter((part) => part.startsWith("{") && part.endsWith("}"))
+      .map((part) => ({ name: part, value: "" })),
+  );
+
+  useEffect(() => {
+    const lastHeader = headers.at(-1);
+    if (lastHeader?.value !== "" || lastHeader?.name !== "") {
+      setHeaders([...headers, { name: "", value: "" }]);
+    }
+  }, [headers]);
+
+  const x = useMutation({
+    mutationFn: async () => {
+      const fullUrl =
+        host +
+        url
+          .split("/")
+          .map((v) => urlParts.find((part) => part.name === v)?.value ?? v)
+          .join("/");
+      console.log(
+        fullUrl,
+        Object.fromEntries(
+          headers.map((header) => [header.name, header.value]),
+        ),
+      );
+      const response = await fetch(fullUrl, {
+        // method,
+        headers: Object.fromEntries(
+          headers
+            .filter((h) => h.name)
+            .map((header) => [header.name, header.value]),
+        ),
+      });
+
+      return {
+        status: response.status,
+        body: await response.text(),
+      };
+    },
+  });
+
+  const path = url.split("/").map((part) => (
+    <Fragment key={part}>
+      {part.startsWith("{") && part.endsWith("}") ? (
+        <ColorizedParam
+          name={part.slice(1, -1)}
+          backgroundOpacity="0"
+          onClick={() => {
+            console.log("asd");
+          }}
+          slug={part.slice(1, -1)}
+        >
+          {urlParts.find((p) => p.name === part)?.value}
+        </ColorizedParam>
+      ) : (
+        part
+      )}
+      /
+      <wbr />
+    </Fragment>
+  ));
+
+  return (
+    <Dialog>
+      <DialogTrigger>Open</DialogTrigger>
+      <DialogContent className="max-w-screen-xl">
+        <DialogHeader>
+          <DialogTitle>API Playground</DialogTitle>
+          <DialogDescription>
+            <div className="grid grid-cols-2 gap-2">
+              <Card>
+                <CardContent className="border-b border-border pt-4">
+                  <div>URL</div>
+                  <div className="flex gap-2">
+                    <div className="border rounded border-border p-1.5 w-full">
+                      {path}
+                    </div>
+                    <Button onClick={() => x.mutateAsync()}>Send</Button>
+                  </div>
+                </CardContent>
+                <Tabs defaultValue="headers">
+                  <CardContent className="border-b border-border py-4">
+                    <TabsList>
+                      <TabsTrigger value="headers">
+                        Headers ({headers.length})
+                      </TabsTrigger>
+                      <TabsTrigger value="parameters">Parameters</TabsTrigger>
+                      <TabsTrigger value="auth">Auth</TabsTrigger>
+                    </TabsList>
+                  </CardContent>
+                  <CardContent>
+                    <TabsContent value="headers">
+                      <div className="grid grid-cols-[1fr_1fr_auto]">
+                        {headers.map((header, i) => (
+                          <div
+                            key={i}
+                            className="grid-cols-subgrid col-span-full grid items-center gap-x-2 has-[:focus]:bg-muted hover:bg-muted rounded overflow-hidden group"
+                          >
+                            {/*<input type="checkbox" />*/}
+                            <InlineInput
+                              onChange={(e) =>
+                                setHeaders((headers) => {
+                                  const newHeaders = [...headers];
+                                  newHeaders[i] = {
+                                    ...headers[i],
+                                    name: e.target.value,
+                                  };
+                                  return newHeaders;
+                                })
+                              }
+                              value={header.name}
+                              placeholder={"Name"}
+                              className="peer"
+                            />
+                            <InlineInput
+                              onChange={(e) =>
+                                setHeaders((headers) => {
+                                  const newHeaders = [...headers];
+                                  newHeaders[i] = {
+                                    name: "",
+                                    ...headers.at(i),
+                                    value: e.target.value,
+                                  };
+                                  return newHeaders;
+                                })
+                              }
+                              value={header.value}
+                              placeholder={"Value"}
+                              className="peer"
+                            />
+                            <button
+                              className="hover:bg-black/5 p-1 rounded mr-2 text-muted-foreground invisible group-hover:visible peer-focus:visible"
+                              onClick={() => {
+                                setHeaders((headers) =>
+                                  [...headers].toSpliced(i, 1),
+                                );
+                              }}
+                            >
+                              <TrashIcon size={16} />
+                            </button>
+                            <div className="col-span-full border-b  border-border"></div>
+                          </div>
+                        ))}
+                      </div>
+                    </TabsContent>
+                    <TabsContent value="parameters">
+                      Parameters
+                      <div className="grid grid-cols-[1fr_1fr_auto]">
+                        {urlParts.map(({ name, value }, i) => (
+                          <div
+                            key={i}
+                            className="grid-cols-subgrid col-span-full grid items-center gap-x-2 has-[:focus]:bg-muted hover:bg-muted rounded overflow-hidden group"
+                          >
+                            {/*<input type="checkbox" />*/}
+                            <InlineInput
+                              onChange={(e) =>
+                                setHeaders((headers) => {
+                                  const newHeaders = [...headers];
+                                  newHeaders[i] = {
+                                    ...headers[i],
+                                    name: e.target.value,
+                                  };
+                                  return newHeaders;
+                                })
+                              }
+                              value={name.slice(1, -1)}
+                              disabled
+                              placeholder={"Name"}
+                              className="peer"
+                            />
+                            <ParameterValue
+                              part={name.slice(1, -1)}
+                              onChange={(e) =>
+                                setUrlParts((parts) => {
+                                  const newParts = [...parts];
+                                  newParts[i] = {
+                                    name: "",
+                                    ...parts.at(i),
+                                    value: e.target.value,
+                                  };
+                                  return newParts;
+                                })
+                              }
+                              {...{ [DATA_ATTR]: name.slice(1, -1) }}
+                              value={value}
+                              placeholder={"Value"}
+                              className="peer"
+                            />
+
+                            <div className="col-span-full border-b border-border"></div>
+                          </div>
+                        ))}
+                      </div>
+                    </TabsContent>
+                    <TabsContent value="auth">
+                      <CardContent>
+                        {url
+                          .split("/")
+                          .map((part, i) =>
+                            part.startsWith("{") && part.endsWith("}")
+                              ? urlParts[i]
+                              : part,
+                          )
+                          .join("/")}
+                      </CardContent>
+                      Change your password here.
+                    </TabsContent>
+                  </CardContent>
+                </Tabs>
+              </Card>
+              <Card>
+                <CardContent>
+                  {method.toUpperCase()}
+                  {url
+                    .split("/")
+                    .map((v) =>
+                      v.startsWith("{") && v.endsWith("}")
+                        ? urlParts.find((part) => part.name === v)?.value ?? v
+                        : v,
+                    )
+                    .join("/")}
+                  <SyntaxHighlight
+                    language="json"
+                    noBackground
+                    copyable={false}
+                    className="text-xs"
+                    code={x.data?.body ?? JSON.stringify("")}
+                  />
+                </CardContent>
+                {x.data?.status}
+              </Card>
+            </div>
+          </DialogDescription>
+        </DialogHeader>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export { Playground };

package/src/lib/plugins/openapi/queries.graphql

@@ -0,0 +1,6 @@
+query getServerUrl($userId: ID!) {
+  schema(input: {userId: $userId}) {
+    serverUrl
+  }
+}
+

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

@@ -0,0 +1,5 @@
+export function createSharedWorker() {
+  return new SharedWorker(new URL("./worker.ts", import.meta.url), {
+    type: "module",
+  });
+}

package/src/lib/plugins.ts

@@ -0,0 +1,5 @@
+// Plugins
+export { apiKeyPlugin } from "./plugins/api-key/index.js";
+export { markdownPlugin } from "./plugins/markdown/index.js";
+export { openApiPlugin } from "./plugins/openapi/index.js";
+export { redirectPlugin } from "./plugins/redirect/index.js";

package/src/lib/ui/Button.tsx

@@ -0,0 +1,56 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../util/cn.js";
+
+const buttonVariants = cva(
+  "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",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

package/src/{app → lib}/ui/Card.tsx

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

package/src/lib/ui/Tabs.tsx

@@ -0,0 +1,52 @@
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { cn } from "../util/cn.js";
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/src/lib/util/createVariantComponent.tsx

@@ -0,0 +1,30 @@
+import { cva } from "class-variance-authority";
+import { ClassValue } from "clsx";
+import * as React from "react";
+import { JSX } from "react/jsx-runtime";
+import { cn } from "./cn.js";
+
+const createVariantComponent = <
+  E extends keyof React.ReactHTML,
+  C extends ReturnType<typeof cva>,
+>(
+  tag: E,
+  cvx: ClassValue | C,
+  // variantProps: Array<keyof VariantProps<C>> = [],
+) => {
+  const MyVariant = ({
+    className,
+    ...props
+  }: JSX.IntrinsicElements[E] & { className?: ClassValue }) =>
+    React.createElement(tag, {
+      ...props,
+      className:
+        typeof cvx === "function" ? cvx({ className }) : cn(cvx, className),
+    });
+
+  MyVariant.displayName = `VariantComponent(${tag})`;
+
+  return MyVariant;
+};
+
+export default createVariantComponent;

package/src/ts.ts

@@ -0,0 +1,94 @@
+import path from "path";
+import ts from "typescript";
+
+/**
+ * Function to check if a TypeScript string is valid
+ * Used for tests
+ */
+export async function checkTypescriptString(code: string) {
+  const rootDir = process.cwd();
+  const inMemoryFileName = path.join(rootDir, "/src/temp.ts");
+  const configPath = ts.findConfigFile(
+    rootDir,
+    ts.sys.fileExists,
+    "tsconfig.json",
+  );
+  if (!configPath) {
+    throw new Error("Could not find a valid tsconfig.json");
+  }
+  const configFile = ts.readConfigFile(configPath, ts.sys.readFile);
+  const parsedCommandLine = ts.parseJsonConfigFileContent(
+    configFile.config,
+    ts.sys,
+    path.dirname(configPath),
+  );
+
+  // Custom compiler host to handle in-memory file and delegate to default host for others
+  const compilerHost: ts.CompilerHost = {
+    ...ts.createCompilerHost(parsedCommandLine.options),
+    getSourceFile: (
+      fileName,
+      languageVersion,
+      onError,
+      shouldCreateNewSourceFile,
+    ) => {
+      if (fileName === inMemoryFileName) {
+        return ts.createSourceFile(fileName, code, languageVersion, true);
+      }
+      return ts
+        .createCompilerHost(parsedCommandLine.options)
+        .getSourceFile(
+          fileName,
+          languageVersion,
+          onError,
+          shouldCreateNewSourceFile,
+        );
+    },
+    fileExists: (fileName) => {
+      if (fileName === inMemoryFileName) {
+        return true;
+      }
+      return ts.sys.fileExists(fileName);
+    },
+    readFile: (fileName) => {
+      if (fileName === inMemoryFileName) {
+        return code;
+      }
+      return ts.sys.readFile(fileName);
+    },
+  };
+
+  // Create a source file in memory
+  const sourceFile = ts.createSourceFile("tempFile.ts", code, 99, true);
+
+  // Create a program using the in-memory source file
+  const program = ts.createProgram({
+    rootNames: parsedCommandLine.fileNames.concat(inMemoryFileName),
+    options: parsedCommandLine.options,
+    host: compilerHost,
+  });
+
+  // Get all diagnostics for the program, which includes syntax and semantic errors
+  const diagnostics = ts.getPreEmitDiagnostics(program);
+
+  diagnostics.forEach((diagnostic) => {
+    if (diagnostic.file) {
+      const { line, character } = diagnostic.file.getLineAndCharacterOfPosition(
+        diagnostic.start!,
+      );
+      const message = ts.flattenDiagnosticMessageText(
+        diagnostic.messageText,
+        "\n",
+      );
+      console.log(
+        `${diagnostic.file.fileName} (${line + 1},${character + 1}): ${message}`,
+      );
+    } else {
+      console.log(
+        ts.flattenDiagnosticMessageText(diagnostic.messageText, "\n"),
+      );
+    }
+  });
+
+  return diagnostics;
+}

package/src/types.d.ts

@@ -0,0 +1,24 @@
+declare module "slugify" {
+  declare function slugify(
+    string: string,
+    options?:
+      | {
+          replacement?: string;
+          remove?: RegExp;
+          lower?: boolean;
+          strict?: boolean;
+          locale?: string;
+          trim?: boolean;
+        }
+      | string,
+  ): string;
+
+  export default slugify;
+}
+
+declare module "virtual:zudoku-docs-plugins";
+declare module "virtual:zudoku-api-plugins";
+declare module "virtual:zudoku-config";
+declare module "virtual:zudoku-auth";
+declare module "virtual:zudoku-component";
+declare module "zudoku/open-api-worker";

package/src/vite/build.ts

@@ -0,0 +1,33 @@
+import { writeFile } from "fs/promises";
+import { build as viteBuild } from "vite";
+import { getViteConfig } from "./config.js";
+import { getBuildHtml } from "./html.js";
+
+export async function runBuild(options: { dir: string }) {
+  const viteConfig = await getViteConfig({ dir: options.dir, mode: "build" });
+
+  const result = await viteBuild(viteConfig);
+
+  if (Array.isArray(result)) {
+    throw new Error("Build failed");
+  }
+
+  if ("output" in result) {
+    const jsEntry = result.output.find(
+      (o) => "isEntry" in o && o.isEntry,
+    )?.fileName;
+    const cssEntry = result.output.find((o) =>
+      o.fileName.endsWith(".css"),
+    )?.fileName;
+
+    const html = getBuildHtml({
+      jsEntry: `/${jsEntry}`,
+      cssEntry: `/${cssEntry}`,
+    });
+
+    await writeFile(`${options.dir}/dist/index.html`, html, "utf-8");
+    return;
+  }
+
+  throw new Error("Build failed");
+}

package/src/vite/config.test.ts

@@ -0,0 +1,10 @@
+import assert from "node:assert";
+import path from "node:path";
+import test from "node:test";
+import { loadConfig } from "./config.js";
+
+test("Should correctly load zudoku.config.ts file", async (t) => {
+  const rootPath = path.resolve("../../samples/with-config/");
+  const config = await loadConfig(rootPath, "zudoku.config.ts");
+  assert.equal(config.default.ui.headerTitle, "My Portal");
+});