@workos-inc/widgets 0.0.0-pre.1 → 0.0.0-pre.3

package/src/lib/elements.tsx

@@ -1,149 +1,270 @@
 "use client";
 
+import * as React from "react";
 import {
-  Button,
-  DropdownMenu,
+  Button as RadixButton,
+  DropdownMenu as RadixDropdownMenu,
   Avatar as RadixAvatar,
   AvatarProps as RadixAvatarProps,
+  AlertDialog as RadixAlertDialog,
+  Dialog as RadixDialog,
   Badge as RadixBadge,
   IconButton as RadixIconButton,
+  Select as RadixSelect,
   TextField as RadixTextField,
+  Text,
+  type BadgeProps,
+  type ButtonProps,
+  type IconButtonProps,
+  type TextProps,
 } from "@radix-ui/themes";
 import type {
   GetPropDefTypes,
   avatarPropDefs,
   badgePropDefs,
   buttonPropDefs,
+  dialogContentPropDefs,
   dropdownMenuContentPropDefs,
   dropdownMenuItemPropDefs,
   iconButtonPropDefs,
+  textPropDefs,
   textFieldRootPropDefs,
+  selectTriggerPropDefs,
 } from "@radix-ui/themes/props";
-import { type ComponentPropsWithoutRef, forwardRef } from "react";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
 import { useElement } from "./widgets-context";
+import { cx, namespaceClassName } from "./utils";
+import { useLayoutEffect } from "./use-layout-effect";
 
-export const PrimaryButton = forwardRef<
-  HTMLButtonElement,
-  ComponentPropsWithoutRef<typeof Button>
->((props, ref) => {
-  const element = useElement("primaryButton");
-
-  return <Button ref={ref} variant="solid" {...props} {...element} />;
-});
+export const PrimaryButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  function PrimaryButton({ className, ...props }, ref) {
+    const element = useElement("primaryButton");
+    return (
+      <RadixButton
+        ref={ref}
+        className={cx("button", "button--primary", className)}
+        variant="solid"
+        {...props}
+        {...element}
+      />
+    );
+  },
+);
 
-PrimaryButton.displayName = "PrimaryButton";
+export const SecondaryButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  function SecondaryButton({ className, ...props }, ref) {
+    const element = useElement("secondaryButton");
+    return (
+      <RadixButton
+        ref={ref}
+        className={cx(["button", "button--secondary"], className)}
+        variant="surface"
+        color="gray"
+        {...props}
+        {...element}
+      />
+    );
+  },
+);
 
-export const SecondaryButton = forwardRef<
+export const DestructiveButton = React.forwardRef<
   HTMLButtonElement,
-  ComponentPropsWithoutRef<typeof Button>
->((props, ref) => {
-  const element = useElement("secondaryButton");
-
+  ButtonProps
+>(function DestructiveButton({ className, ...props }, ref) {
+  const element = useElement("destructiveButton");
   return (
-    <Button ref={ref} variant="surface" color="gray" {...props} {...element} />
+    <RadixButton
+      ref={ref}
+      className={cx(["button", "button--destructive"], className)}
+      variant="solid"
+      color="red"
+      {...props}
+      {...element}
+    />
   );
 });
 
-SecondaryButton.displayName = "SecondaryButton";
+export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
+  function IconButton({ className, ...props }, ref) {
+    const element = useElement("iconButton");
+    return (
+      <RadixIconButton
+        ref={ref}
+        className={cx(["button", "icon-button"], className)}
+        variant="ghost"
+        color="gray"
+        {...props}
+        {...element}
+      />
+    );
+  },
+);
 
-export const DestructiveButton = forwardRef<
+export const SelectTrigger = React.forwardRef<
   HTMLButtonElement,
-  ComponentPropsWithoutRef<typeof Button>
->((props, ref) => {
-  const element = useElement("destructiveButton");
-
+  RadixSelect.TriggerProps
+>(function SelectTrigger({ className, ...props }, ref) {
+  const element = useElement("select");
   return (
-    <Button ref={ref} variant="solid" color="red" {...props} {...element} />
+    <RadixSelect.Trigger
+      ref={ref}
+      className={cx("select", className)}
+      {...props}
+      {...element}
+    />
   );
 });
 
-DestructiveButton.displayName = "DestructiveButton";
-
-export const IconButton = forwardRef<
-  HTMLButtonElement,
-  ComponentPropsWithoutRef<typeof RadixIconButton>
->((props, ref) => {
-  const element = useElement("iconButton");
+export const SelectContent = React.forwardRef<
+  HTMLDivElement,
+  RadixSelect.ContentProps
+>(function SelectContent({ className, ...props }, ref) {
+  const element = useElement("dropdown");
+  return (
+    <RadixSelect.Content
+      ref={ref}
+      className={cx(["dropdown", "select-dropdown"], className)}
+      {...props}
+      {...element}
+    />
+  );
+});
 
+export const SelectItem = React.forwardRef<
+  HTMLDivElement,
+  RadixSelect.ItemProps
+>(function SelectItem({ className, ...props }, ref) {
+  const element = useElement("primaryMenuItem");
   return (
-    <RadixIconButton
+    <RadixSelect.Item
       ref={ref}
-      variant="ghost"
-      color="gray"
+      className={cx(["menu-item", "select-item"], className)}
       {...props}
       {...element}
     />
   );
 });
 
-IconButton.displayName = "IconButton";
+export const Label = React.forwardRef<HTMLLabelElement, TextProps>(
+  function Label({ children, className, ...props }, ref) {
+    const element = useElement("label");
+    return (
+      <Text
+        as="label"
+        ref={ref}
+        weight="bold"
+        size="2"
+        className={cx("label", className)}
+        {...props}
+        {...element}
+      >
+        {children}
+      </Text>
+    );
+  },
+);
 
-export const TextField = forwardRef<
+export const TextField = React.forwardRef<
   HTMLInputElement,
-  ComponentPropsWithoutRef<typeof RadixTextField.Root>
->((props, ref) => {
+  RadixTextField.RootProps
+>(function TextField({ className, ...props }, ref) {
   const element = useElement("textfield");
-
   return (
     <RadixTextField.Root
-      data-1p-ignore
       ref={ref}
       variant="surface"
+      className={cx("text-field", className)}
       {...props}
       {...element}
     />
   );
 });
 
-TextField.displayName = "TextField";
-
-export const TextFieldSlot = RadixTextField.Slot;
+export const TextFieldSlot = React.forwardRef<
+  HTMLDivElement,
+  RadixTextField.SlotProps
+>(function TextFieldSlot({ className, ...props }, ref) {
+  return (
+    <RadixTextField.Slot
+      ref={ref}
+      className={cx("text-field-slot", className)}
+      {...props}
+    />
+  );
+});
 
-export const Badge = forwardRef<
-  HTMLSpanElement,
-  ComponentPropsWithoutRef<typeof RadixBadge>
->((props, ref) => {
-  const element = useElement("badge");
+export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
+  function Badge({ className, ...props }, ref) {
+    const element = useElement("badge");
+    return (
+      <RadixBadge
+        ref={ref}
+        className={cx("badge", className)}
+        {...element}
+        {...props}
+      />
+    );
+  },
+);
 
-  return <RadixBadge ref={ref} {...element} {...props} />;
+export const DropdownMenuContent = React.forwardRef<
+  HTMLDivElement,
+  RadixDropdownMenu.ContentProps
+>(function DropdownMenuContent({ className, ...props }, ref) {
+  const element = useElement("dropdown");
+  return (
+    <RadixDropdownMenu.Content
+      ref={ref}
+      className={cx("dropdown", className)}
+      {...props}
+      {...element}
+    />
+  );
 });
 
-Badge.displayName = "Badge";
-
-export const PrimaryMenuItem = forwardRef<
+export const PrimaryMenuItem = React.forwardRef<
   HTMLDivElement,
-  ComponentPropsWithoutRef<typeof DropdownMenu.Item>
->((props, ref) => {
+  RadixDropdownMenu.ItemProps
+>(function PrimaryMenuItem({ className, ...props }, ref) {
   const element = useElement("primaryMenuItem");
-
-  return <DropdownMenu.Item ref={ref} {...props} {...element} />;
+  return (
+    <RadixDropdownMenu.Item
+      ref={ref}
+      className={cx("menu-item", className)}
+      {...props}
+      {...element}
+    />
+  );
 });
 
-PrimaryMenuItem.displayName = "PrimaryMenuItem";
-
-export const DestructiveMenuItem = forwardRef<
+export const DestructiveMenuItem = React.forwardRef<
   HTMLDivElement,
-  ComponentPropsWithoutRef<typeof DropdownMenu.Item>
->((props, ref) => {
+  RadixDropdownMenu.ItemProps
+>(function DestructiveMenuItem({ className, ...props }, ref) {
   const element = useElement("destructiveMenuItem");
-
-  return <DropdownMenu.Item ref={ref} color="red" {...props} {...element} />;
+  return (
+    <RadixDropdownMenu.Item
+      ref={ref}
+      className={cx(["menu-item", "menu-item--destructive"], className)}
+      color="red"
+      {...props}
+      {...element}
+    />
+  );
 });
 
-DestructiveMenuItem.displayName = "DestructiveMenuItem";
-
 interface AvatarProps extends RadixAvatarProps {
   dim?: boolean;
 }
 
-export const Avatar = forwardRef<HTMLImageElement, AvatarProps>(
-  ({ dim, ...props }, ref) => {
+export const Avatar = React.forwardRef<HTMLImageElement, AvatarProps>(
+  function Avatar({ dim, className, ...props }, ref) {
     const element = useElement("avatar");
-
     return (
       <RadixAvatar
         ref={ref}
         color="gray"
+        className={cx("avatar", className)}
         {...props}
         {...element}
         // TODO: use CSS var instead of hard-coded value for opacity
@@ -153,7 +274,67 @@ export const Avatar = forwardRef<HTMLImageElement, AvatarProps>(
   },
 );
 
-Avatar.displayName = "Avatar";
+export const DialogContent = React.forwardRef<
+  HTMLDivElement,
+  RadixDialog.ContentProps
+>(function DialogContent({ className, ...props }, forwardedRef) {
+  const element = useElement("dialog");
+  const [node, setNode] = React.useState<HTMLDivElement | null>(null);
+  const ref = useComposedRefs(forwardedRef, setNode as any);
+  useDialogOverlayHack(node, {
+    className: namespaceClassName("dialog-overlay"),
+    selector: ".rt-DialogOverlay",
+  });
+  return (
+    <RadixDialog.Content
+      ref={ref}
+      className={cx("dialog", className)}
+      {...props}
+      {...element}
+    />
+  );
+});
+
+export const AlertDialogContent = React.forwardRef<
+  HTMLDivElement,
+  RadixAlertDialog.ContentProps
+>(function AlertDialogContent({ className, ...props }, forwardedRef) {
+  const element = useElement("dialog");
+  const [node, setNode] = React.useState<HTMLDivElement | null>(null);
+  const ref = useComposedRefs(forwardedRef, setNode as any);
+  useDialogOverlayHack(node, {
+    className: namespaceClassName("dialog-overlay"),
+    selector: ".rt-AlertDialogOverlay",
+  });
+
+  return (
+    <RadixAlertDialog.Content
+      ref={ref}
+      className={cx("dialog", className)}
+      {...props}
+      {...element}
+    />
+  );
+});
+
+/**
+ * HACK: Radix themes does not expose the dialog overlay, but we want consumer
+ * to be able to style it with a classname. This will add a classname to the
+ * overlay when the dialog content is mounted.
+ */
+function useDialogOverlayHack(
+  node: HTMLDivElement | null,
+  { className, selector }: { className: string; selector: string },
+) {
+  useLayoutEffect(() => {
+    if (!node) {
+      return;
+    }
+    const document = node.ownerDocument;
+    const overlay = document.querySelector<HTMLDivElement>(selector);
+    overlay?.classList.add(className);
+  }, [node, className, selector]);
+}
 
 type OmitAsChild<T> = {
   [K in keyof T]: T[K] extends undefined
@@ -162,14 +343,17 @@ type OmitAsChild<T> = {
 };
 
 export type Elements = OmitAsChild<{
+  dialog?: GetPropDefTypes<typeof dialogContentPropDefs>;
   primaryButton?: GetPropDefTypes<typeof buttonPropDefs>;
   secondaryButton?: GetPropDefTypes<typeof buttonPropDefs>;
   destructiveButton?: GetPropDefTypes<typeof buttonPropDefs>;
   iconButton?: GetPropDefTypes<typeof iconButtonPropDefs>;
   textfield?: GetPropDefTypes<typeof textFieldRootPropDefs>;
+  select?: GetPropDefTypes<typeof selectTriggerPropDefs>;
   badge?: GetPropDefTypes<typeof badgePropDefs>;
   dropdown?: GetPropDefTypes<typeof dropdownMenuContentPropDefs>;
   primaryMenuItem?: GetPropDefTypes<typeof dropdownMenuItemPropDefs>;
   destructiveMenuItem?: GetPropDefTypes<typeof dropdownMenuItemPropDefs>;
   avatar?: Omit<GetPropDefTypes<typeof avatarPropDefs>, "fallback">;
+  label?: Omit<GetPropDefTypes<typeof textPropDefs>, "as">;
 }>;

package/src/lib/error-boundary.tsx

@@ -0,0 +1,166 @@
+// Modified from https://github.com/bvaughn/react-error-boundary
+// Copyright (c) 2020 Brian Vaughn, MIT License
+
+import * as React from "react";
+
+type ErrorBoundaryState =
+  | { didCatch: true; error: any }
+  | { didCatch: false; error: null };
+
+export interface ErrorBoundaryContextValue {
+  didCatch: boolean;
+  error: any;
+  resetErrorBoundary: (...args: any[]) => void;
+}
+
+const ErrorBoundaryContext =
+  React.createContext<ErrorBoundaryContextValue | null>(null);
+ErrorBoundaryContext.displayName = "ErrorBoundaryContext";
+
+const initialState: ErrorBoundaryState = {
+  didCatch: false,
+  error: null,
+} satisfies ErrorBoundaryState;
+
+export class ErrorBoundary extends React.Component<
+  ErrorBoundaryProps,
+  ErrorBoundaryState
+> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+
+    this.resetErrorBoundary = this.resetErrorBoundary.bind(this);
+    this.state = initialState;
+  }
+
+  static getDerivedStateFromError(error: Error) {
+    return { didCatch: true, error };
+  }
+
+  resetErrorBoundary(...args: any[]) {
+    const { error } = this.state;
+
+    if (error !== null) {
+      this.props.onReset?.({
+        args,
+        reason: "imperative-api",
+      });
+
+      this.setState(initialState);
+    }
+  }
+
+  componentDidCatch(error: Error, info: React.ErrorInfo) {
+    this.props.onError?.(error, info);
+  }
+
+  componentDidUpdate(
+    prevProps: ErrorBoundaryProps,
+    prevState: ErrorBoundaryState,
+  ) {
+    const { didCatch } = this.state;
+    const { resetKeys } = this.props;
+
+    // There's an edge case where if the thing that triggered the error happens
+    // to *also* be in the resetKeys array, we'd end up resetting the error
+    // boundary immediately.
+    //
+    // This would likely trigger a second error to be thrown. So we make sure
+    // that we don't check the resetKeys on the first call of cDU after the
+    // error is set.
+    if (
+      didCatch &&
+      prevState.error !== null &&
+      hasArrayChanged(prevProps.resetKeys, resetKeys)
+    ) {
+      this.props.onReset?.({
+        next: resetKeys,
+        prev: prevProps.resetKeys,
+        reason: "keys",
+      });
+
+      this.setState(initialState);
+    }
+  }
+
+  render() {
+    const { children, fallbackRender, FallbackComponent, fallback } =
+      this.props;
+    const { didCatch, error } = this.state;
+
+    let childToRender = children;
+
+    if (didCatch) {
+      const props: FallbackProps = {
+        error,
+        resetErrorBoundary: this.resetErrorBoundary,
+      };
+
+      if (typeof fallbackRender === "function") {
+        childToRender = fallbackRender(props);
+      } else if (FallbackComponent) {
+        childToRender = React.createElement(FallbackComponent, props);
+      } else if (fallback !== undefined) {
+        childToRender = fallback;
+      } else {
+        throw error;
+      }
+    }
+
+    return (
+      <ErrorBoundaryContext.Provider
+        value={{
+          didCatch,
+          error,
+          resetErrorBoundary: this.resetErrorBoundary,
+        }}
+      >
+        {childToRender}
+      </ErrorBoundaryContext.Provider>
+    );
+  }
+}
+
+function hasArrayChanged(a: any[] = [], b: any[] = []) {
+  return (
+    a.length !== b.length || a.some((item, index) => !Object.is(item, b[index]))
+  );
+}
+
+export type FallbackProps = {
+  error: any;
+  resetErrorBoundary: (...args: any[]) => void;
+};
+
+type ErrorBoundarySharedProps = React.PropsWithChildren<{
+  onError?: (error: Error, info: React.ErrorInfo) => void;
+  onReset?: (
+    details:
+      | { reason: "imperative-api"; args: any[] }
+      | { reason: "keys"; prev: any[] | undefined; next: any[] | undefined },
+  ) => void;
+  resetKeys?: any[];
+}>;
+
+export type ErrorBoundaryPropsWithComponent = ErrorBoundarySharedProps & {
+  fallback?: never;
+  FallbackComponent: React.ComponentType<FallbackProps>;
+  fallbackRender?: never;
+};
+
+export type ErrorBoundaryPropsWithRender = ErrorBoundarySharedProps & {
+  fallback?: never;
+  FallbackComponent?: never;
+  fallbackRender: (props: FallbackProps) => React.ReactNode;
+};
+
+export type ErrorBoundaryPropsWithFallback = ErrorBoundarySharedProps & {
+  fallback: React.ReactNode;
+  FallbackComponent?: never;
+  fallbackRender?: never;
+};
+
+export type ErrorBoundaryProps =
+  | ErrorBoundaryPropsWithFallback
+  | ErrorBoundaryPropsWithComponent
+  | ErrorBoundaryPropsWithRender;

package/src/lib/errors.ts

@@ -0,0 +1,49 @@
+type QueryType = "query" | "mutation";
+type RecordType = "users" | "roles";
+
+export class FetchError extends Error {
+  queryType: QueryType;
+  recordType: RecordType;
+  context: unknown;
+  constructor(args: {
+    message: string;
+    queryType: QueryType;
+    recordType: RecordType;
+    context?: unknown;
+  }) {
+    super(args.message);
+    this.name = "FetchError";
+    this.queryType = args.queryType;
+    this.recordType = args.recordType;
+    this.context = args.context;
+  }
+}
+
+export class ApiError extends Error {
+  status: number;
+  queryType: QueryType;
+  recordType: RecordType;
+  context: unknown;
+  constructor(args: {
+    message: string;
+    queryType: QueryType;
+    recordType: RecordType;
+    status: number;
+    context?: unknown;
+  }) {
+    super(args.message);
+    this.name = "ApiError";
+    this.status = args.status;
+    this.queryType = args.queryType;
+    this.recordType = args.recordType;
+  }
+}
+
+export class NoAuthTokenError extends Error {
+  context: unknown;
+  constructor(args?: { context?: unknown }) {
+    super("No auth token provided");
+    this.name = "NoAuthTokenError";
+    this.context = args?.context;
+  }
+}