zudoku 0.1.1-dev.14 → 0.1.1-dev.16

package/src/app/DevPortal.tsx

@@ -1,93 +0,0 @@
-import { MDXProvider } from "@mdx-js/react";
-import { QueryClientProvider } from "@tanstack/react-query";
-import { memo, Suspense, useEffect, useMemo } from "react";
-import { type AuthProvider } from "./authentication/authentication.js";
-import {
-  ComponentsProvider,
-  DEFAULT_COMPONENTS,
-  type ComponentsContextType,
-} from "./components/context/ComponentsContext.js";
-import { DevPortalProvider } from "./components/context/DevPortalProvider.js";
-import { ThemeProvider } from "./components/context/ThemeContext.js";
-import { ViewportAnchorProvider } from "./components/context/ViewportAnchorContext.js";
-import {
-  DevPortalContext,
-  queryClient,
-  type NavigationItem,
-} from "./core/DevPortalContext.js";
-import { HelmetProvider } from "./core/helmet.js";
-import { type DevPortalPlugin } from "./core/plugins.js";
-import { Router } from "./Router.js";
-import { MdxComponents, type MdxComponentsType } from "./util/MdxComponents.js";
-
-export const DevPortalSystemPaths = {
-  Settings: "/settings",
-} as const;
-
-export type DevPortalPath =
-  | string
-  | (typeof DevPortalSystemPaths)[keyof typeof DevPortalSystemPaths];
-
-export type DevPortalProps = {
-  meta?: Partial<{
-    headerTitle: string;
-    pageTitle: string;
-    description: string;
-    logo: string;
-    favicon: string;
-  }>;
-  authentication?: AuthProvider;
-  navigation: NavigationItem[];
-  plugins?: DevPortalPlugin[];
-  mdxComponents?: MdxComponentsType;
-  overrides?: ComponentsContextType;
-};
-
-const DevPortal = (props: DevPortalProps) => {
-  const components = useMemo(
-    () => ({ ...DEFAULT_COMPONENTS, ...props.overrides }),
-    [props.overrides],
-  );
-
-  const mdxComponents = useMemo(
-    () => ({ ...MdxComponents, ...props.mdxComponents }),
-    [props.mdxComponents],
-  );
-
-  const devPortalContext = useMemo(() => new DevPortalContext(props), [props]);
-
-  useEffect(() => {
-    void devPortalContext.initialize();
-  }, [devPortalContext]);
-
-  return (
-    <QueryClientProvider client={queryClient}>
-      <HelmetProvider>
-        <DevPortalProvider value={devPortalContext}>
-          <MDXProvider components={mdxComponents}>
-            <ThemeProvider>
-              <ComponentsProvider value={components}>
-                <ViewportAnchorProvider>
-                  <Suspense
-                    fallback={
-                      <div className="grid place-items-center h-full">
-                        Loading...
-                      </div>
-                    }
-                  >
-                    <Router plugins={props.plugins} />
-                  </Suspense>
-                </ViewportAnchorProvider>
-              </ComponentsProvider>
-            </ThemeProvider>
-          </MDXProvider>
-        </DevPortalProvider>
-      </HelmetProvider>
-    </QueryClientProvider>
-  );
-};
-
-const MemoDevPortal = memo(DevPortal);
-MemoDevPortal.displayName = "DevPortal";
-
-export default MemoDevPortal;

package/src/app/Heading.tsx

@@ -1,60 +0,0 @@
-import { type ReactNode } from "react";
-import { useRegisterAnchorElement } from "./components/context/ViewportAnchorContext.js";
-import { cn } from "./util/cn.js";
-
-const getComponent = (level: number) => {
-  switch (level) {
-    case 1:
-      return "h1";
-    case 2:
-      return "h2";
-    case 3:
-      return "h3";
-    case 4:
-      return "h4";
-    case 5:
-      return "h5";
-    case 6:
-      return "h6";
-    default:
-      return "h1";
-  }
-};
-
-export type HeadingProps = {
-  children: ReactNode;
-  className?: string;
-  id?: string;
-  level?: 1 | 2 | 3 | 4 | 5 | 6;
-  registerSidebarAnchor?: boolean;
-};
-
-export const Heading = ({
-  level,
-  children,
-  id,
-  className,
-  registerSidebarAnchor,
-}: HeadingProps) => {
-  const Component = getComponent(level ?? 1);
-  const { ref } = useRegisterAnchorElement();
-
-  return (
-    <Component
-      className={cn("group relative", className)}
-      ref={registerSidebarAnchor ? ref : undefined}
-      id={id}
-    >
-      {id && (
-        <a
-          href={`#${id}`}
-          className="no-underline absolute text-primary -left-[0.8em] pr-2.5 opacity-0 group-hover:opacity-50 hover:!opacity-100 transition-opacity duration-200"
-          aria-label={`Link to ${id}`}
-        >
-          #
-        </a>
-      )}
-      {children}
-    </Component>
-  );
-};

package/src/app/Router.tsx

@@ -1,28 +0,0 @@
-import { useMemo } from "react";
-import { createBrowserRouter, RouterProvider } from "react-router-dom";
-import { Layout } from "./components/Layout.js";
-import { DevPortalPlugin, isNavigationPlugin } from "./core/plugins.js";
-
-export function Router({ plugins }: { plugins?: DevPortalPlugin[] }) {
-  const router = useMemo(() => {
-    const routes = (plugins ?? []).flatMap((plugin) =>
-      isNavigationPlugin(plugin) ? plugin.getRoutes() : [],
-    );
-
-    return createBrowserRouter([
-      {
-        path: "/",
-        element: <Layout />,
-        errorElement: (
-          <Layout>
-            <div className="h-[75vh] flex items-center justify-center">
-              Error, look at the console
-            </div>
-          </Layout>
-        ),
-        children: routes,
-      },
-    ]);
-  }, [plugins]);
-  return <RouterProvider router={router} />;
-}

package/src/app/authentication/authentication.ts

@@ -1,18 +0,0 @@
-import { DevPortalContext } from "../core/DevPortalContext.js";
-
-export interface AuthProvider {
-  initialize(context: DevPortalContext): Promise<unknown>;
-  login(context: DevPortalContext): Promise<unknown>;
-  getToken?: (context: DevPortalContext) => Promise<string | undefined>;
-  handleAuthenticationResponse?: (
-    path: Path,
-    context: DevPortalContext,
-  ) => Promise<unknown>;
-  signOut(context: DevPortalContext): void;
-}
-
-export type Path = {
-  pathname: string;
-  search: string;
-  hash: string;
-};

package/src/app/authentication/clerk.ts

@@ -1,47 +0,0 @@
-import { Clerk } from "@clerk/clerk-js";
-import { type AuthProvider } from "./authentication.js";
-
-const clerkProvider = ({
-  clerkPubKey,
-}: {
-  clerkPubKey: string;
-}): AuthProvider => {
-  const clerkApi = new Clerk(clerkPubKey);
-
-  const clerkIsLoaded = clerkApi.load({});
-
-  return {
-    initialize: async (context) => {
-      await clerkIsLoaded;
-
-      if (clerkApi.session) {
-        await context.setUserProfile({
-          isLoggedIn: true,
-          name: clerkApi.session.user.fullName ?? undefined,
-          email:
-            clerkApi.session.user.emailAddresses.at(0)?.emailAddress ??
-            undefined,
-        });
-      } else {
-        await context.setUserProfile({
-          isLoggedIn: false,
-        });
-      }
-    },
-
-    getToken: async () => {
-      await clerkIsLoaded;
-      const token = await clerkApi.session?.getToken();
-      return token ?? undefined;
-    },
-
-    signOut() {
-      clerkApi.signOut();
-    },
-    login: async () => {
-      await clerkApi.redirectToSignIn();
-    },
-  };
-};
-
-export default clerkProvider;

package/src/app/authentication/openid.ts

@@ -1,192 +0,0 @@
-import * as oauth from "oauth4webapi";
-import { DevPortalContext } from "../core/DevPortalContext.js";
-import { type AuthProvider } from "./authentication.js";
-const algorithm = "oauth2";
-
-const getAuthServerByIssuer = async (issuer: string) => {
-  const authorizationServer = await oauth
-    .discoveryRequest(new URL(issuer), { algorithm })
-    .then((response) =>
-      oauth.processDiscoveryResponse(new URL(issuer), response),
-    );
-
-  return authorizationServer;
-};
-
-export type AuthServerOption = {
-  issuer?: string;
-  authorizationEndpoint?: string;
-  tokenEndpoint?: string;
-};
-
-const getAuthServer = async ({
-  issuer,
-  authorizationEndpoint,
-  tokenEndpoint,
-}: AuthServerOption) => {
-  return issuer
-    ? await getAuthServerByIssuer(issuer)
-    : ({
-        issuer: new URL(authorizationEndpoint!).origin,
-        authorization_endpoint: authorizationEndpoint,
-        token_endpoint: tokenEndpoint,
-        code_challenge_methods_supported: [],
-      } satisfies oauth.AuthorizationServer);
-};
-
-export const openIdAuth = ({
-  clientId,
-  clientSecret,
-  issuer,
-  authorizationEndpoint,
-  tokenEndpoint,
-}: {
-  clientId: string;
-  clientSecret?: string;
-  audience?: string;
-} & AuthServerOption): AuthProvider => {
-  const client: oauth.Client = {
-    client_id: clientId,
-    client_secret: clientSecret,
-    token_endpoint_auth_method: "none",
-  };
-
-  const redirect_uri = "http://localhost:5173/oauth/callback";
-
-  return {
-    initialize() {
-      return Promise.resolve();
-    },
-    signOut() {},
-    login: async (context: DevPortalContext) => {
-      const code_challenge_method = "S256";
-      const authorizationServer = await getAuthServer({
-        issuer,
-        authorizationEndpoint,
-        tokenEndpoint,
-      });
-
-      if (!authorizationServer.authorization_endpoint) {
-        throw new Error("No authorization endpoint");
-      }
-
-      /**
-       * The following MUST be generated for every redirect to the authorization_endpoint. You must store
-       * the codeVerifier and nonce in the end-user session such that it can be recovered as the user
-       * gets redirected from the authorization server back to your application.
-       */
-      const codeVerifier = oauth.generateRandomCodeVerifier();
-      const codeChallenge =
-        await oauth.calculatePKCECodeChallenge(codeVerifier);
-
-      await context.sessionStorage.set("codeVerifier", codeVerifier);
-
-      // redirect user to as.authorization_endpoint
-      const authorizationUrl = new URL(
-        authorizationServer.authorization_endpoint,
-      );
-      authorizationUrl.searchParams.set("client_id", client.client_id);
-      authorizationUrl.searchParams.set("redirect_uri", redirect_uri);
-      authorizationUrl.searchParams.set("response_type", "code");
-      // authorizationUrl.searchParams.set("scope", "api:read");
-      authorizationUrl.searchParams.set("code_challenge", codeChallenge);
-      authorizationUrl.searchParams.set(
-        "code_challenge_method",
-        code_challenge_method,
-      );
-
-      /**
-       * We cannot be sure the AS supports PKCE so we're going to use state too. Use of PKCE is
-       * backwards compatible even if the AS doesn't support it which is why we're using it regardless.
-       */
-      if (
-        authorizationServer.code_challenge_methods_supported?.includes(
-          "S256",
-        ) !== true
-      ) {
-        const state = oauth.generateRandomState();
-        authorizationUrl.searchParams.set("state", state);
-      }
-
-      // now redirect the user to authorizationUrl.href
-      location.href = authorizationUrl.href;
-    },
-
-    handleAuthenticationResponse: async ({ search }, { sessionStorage }) => {
-      const searchParams = new URLSearchParams(search);
-      const state = searchParams.get("state");
-      if (!state) {
-        return;
-      }
-
-      // one eternity later, the user lands back on the redirect_uri
-      // Authorization Code Grant Request & Response
-      const codeVerifier = await sessionStorage.get("codeVerifier");
-
-      if (!codeVerifier) {
-        return;
-      }
-
-      const as = await getAuthServer({
-        issuer,
-        authorizationEndpoint,
-        tokenEndpoint,
-      });
-
-      const params = oauth.validateAuthResponse(
-        as,
-        client,
-        searchParams,
-        state,
-      );
-      if (oauth.isOAuth2Error(params)) {
-        console.error("Error Response", params);
-        throw new Error(); // Handle OAuth 2.0 redirect error
-      }
-
-      const response = await oauth.authorizationCodeGrantRequest(
-        as,
-        client,
-        params,
-        redirect_uri,
-        codeVerifier,
-      );
-
-      // @todo do we need to do these
-      // const challenges = oauth.parseWwwAuthenticateChallenges(response);
-      // if (challenges) {
-      //   for (const challenge of challenges) {
-      //     console.error("WWW-Authenticate Challenge", challenge);
-      //   }
-      //   throw new Error(); // Handle WWW-Authenticate Challenges as needed
-      // }
-
-      const oauthResult = await oauth.processAuthorizationCodeOpenIDResponse(
-        as,
-        client,
-        response,
-      );
-      if (oauth.isOAuth2Error(oauthResult)) {
-        console.error("Error Response", oauthResult);
-        throw new Error(oauthResult.error);
-      }
-
-      const userInfoResponse = await oauth.userInfoRequest(
-        as,
-        client,
-        oauthResult.access_token,
-      );
-      const userInfo = await userInfoResponse.json();
-
-      // void storage.setProfile({
-      //   sub: userInfo.sub,
-      //   email: userInfo.email,
-      //   name: userInfo.name,
-      //   email_verified: userInfo.email_verified ?? false,
-      //   picture: userInfo.picture,
-      //   id_token: oauthResult.id_token,
-      //   access_token: oauthResult.access_token,
-      // });
-    },
-  };
-};

package/src/app/components/AnchorLink.tsx

@@ -1,19 +0,0 @@
-import React from "react";
-import { Link, type LinkProps, useLocation } from "react-router-dom";
-
-/**
- * Link that scrolls to anchor even if the hash is already set in the URL.
- */
-export const AnchorLink = (props: LinkProps) => {
-  const location = useLocation();
-  const hash = typeof props.to === "string" ? props.to : props.to.hash;
-
-  const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
-    if (!hash?.startsWith("#") || hash !== location.hash) return;
-
-    event.preventDefault();
-    document.getElementById(hash.slice(1))?.scrollIntoView();
-  };
-
-  return <Link onClick={handleClick} {...props} />;
-};

package/src/app/components/CategoryHeading.tsx

@@ -1,16 +0,0 @@
-import type { ReactNode } from "react";
-import { cx } from "class-variance-authority";
-
-export const CategoryHeading = ({
-  children,
-  className,
-}: {
-  children: ReactNode;
-  className?: string;
-}) => {
-  return (
-    <div className={cx("text-sm font-semibold text-primary mb-2", className)}>
-      {children}
-    </div>
-  );
-};

package/src/app/components/Dialog.tsx

@@ -1,119 +0,0 @@
-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { XIcon } from "lucide-react"
-import { cn } from "../util/cn.js";
-
-const Dialog = DialogPrimitive.Root
-
-const DialogTrigger = DialogPrimitive.Trigger
-
-const DialogPortal = DialogPrimitive.Portal
-
-const DialogClose = DialogPrimitive.Close
-
-const DialogOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Overlay
-    ref={ref}
-    className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
-    )}
-    {...props}
-  />
-))
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
-
-const DialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <XIcon className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-  </DialogPortal>
-))
-DialogContent.displayName = DialogPrimitive.Content.displayName
-
-const DialogHeader = ({
-                        className,
-                        ...props
-                      }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
-      className
-    )}
-    {...props}
-  />
-)
-DialogHeader.displayName = "DialogHeader"
-
-const DialogFooter = ({
-                        className,
-                        ...props
-                      }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    )}
-    {...props}
-  />
-)
-DialogFooter.displayName = "DialogFooter"
-
-const DialogTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    ref={ref}
-    className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className
-    )}
-    {...props}
-  />
-))
-DialogTitle.displayName = DialogPrimitive.Title.displayName
-
-const DialogDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-DialogDescription.displayName = DialogPrimitive.Description.displayName
-
-export {
-  Dialog,
-  DialogPortal,
-  DialogOverlay,
-  DialogTrigger,
-  DialogClose,
-  DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
-  DialogDescription,
-}

package/src/app/components/DynamicIcon.tsx

@@ -1,60 +0,0 @@
-// import { type LucideProps } from "lucide-react";
-// import dynamicIconImports from "lucide-react/dynamicIconImports.js";
-// import { Suspense, lazy, memo } from "react";
-// import { cn } from "../util/cn.js";
-
-// export type IconName = keyof typeof dynamicIconImports;
-
-// const IconNames = Object.keys(dynamicIconImports) as IconName[];
-
-// export const isValidIcon = (name: unknown): name is IconName =>
-//   typeof name === "string" && IconNames.includes(name as IconName);
-
-// type IconProps = Omit<LucideProps, "ref"> & {
-//   name: IconName;
-//   inline?: boolean;
-// };
-
-// const Fallback = ({
-//   inline,
-//   size,
-// }: {
-//   inline?: boolean;
-//   size?: string | number;
-// }) => (
-//   <span
-//     className={cn(inline ? "inline-block" : "block", "bg-background")}
-//     style={{ height: size, width: size }}
-//     role="presentation"
-//   />
-// );
-
-// export const DynamicIcon = memo(function ({
-//   name,
-//   inline,
-//   className,
-//   size = 16,
-//   ...props
-// }: IconProps) {
-//   const LucideIcon = lazy(dynamicIconImports[name]);
-
-//   return (
-//     <Suspense fallback={<Fallback inline={inline} size={size} />}>
-//       <LucideIcon
-//         {...props}
-//         size={size}
-//         className={cn(inline && "inline-block align-[-0.125em]", className)}
-//       />
-//     </Suspense>
-//   );
-// });
-
-export type IconName = string;
-
-export function isValidIcon(name: unknown): name is IconName {
-  return true;
-}
-
-export const DynamicIcon = (props: { name: string; size?: number }) => (
-  <div></div>
-);