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

package/src/lib/elements.tsx

@@ -1,12 +1,16 @@
 "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,
 } from "@radix-ui/themes";
 import type {
@@ -14,60 +18,76 @@ import type {
   avatarPropDefs,
   badgePropDefs,
   buttonPropDefs,
+  dialogContentPropDefs,
   dropdownMenuContentPropDefs,
   dropdownMenuItemPropDefs,
   iconButtonPropDefs,
   textFieldRootPropDefs,
+  selectTriggerPropDefs,
 } from "@radix-ui/themes/props";
-import { type ComponentPropsWithoutRef, forwardRef } from "react";
 import { useElement } from "./widgets-context";
+import { cx, namespaceClassName } from "./utils";
+import { useLayoutEffect } from "./use-layout-effect";
 
-export const PrimaryButton = forwardRef<
+export const PrimaryButton = React.forwardRef<
   HTMLButtonElement,
-  ComponentPropsWithoutRef<typeof Button>
->((props, ref) => {
+  React.ComponentPropsWithoutRef<typeof RadixButton>
+>(function PrimaryButton({ className, ...props }, ref) {
   const element = useElement("primaryButton");
-
-  return <Button ref={ref} variant="solid" {...props} {...element} />;
+  return (
+    <RadixButton
+      ref={ref}
+      className={cx("button", className)}
+      variant="solid"
+      {...props}
+      {...element}
+    />
+  );
 });
 
-PrimaryButton.displayName = "PrimaryButton";
-
-export const SecondaryButton = forwardRef<
+export const SecondaryButton = React.forwardRef<
   HTMLButtonElement,
-  ComponentPropsWithoutRef<typeof Button>
->((props, ref) => {
+  React.ComponentPropsWithoutRef<typeof RadixButton>
+>(function SecondaryButton({ className, ...props }, ref) {
   const element = useElement("secondaryButton");
-
   return (
-    <Button ref={ref} variant="surface" color="gray" {...props} {...element} />
+    <RadixButton
+      ref={ref}
+      className={cx(["button", "button--secondary"], className)}
+      variant="surface"
+      color="gray"
+      {...props}
+      {...element}
+    />
   );
 });
 
-SecondaryButton.displayName = "SecondaryButton";
-
-export const DestructiveButton = forwardRef<
+export const DestructiveButton = React.forwardRef<
   HTMLButtonElement,
-  ComponentPropsWithoutRef<typeof Button>
->((props, ref) => {
+  React.ComponentPropsWithoutRef<typeof RadixButton>
+>(function DestructiveButton({ className, ...props }, ref) {
   const element = useElement("destructiveButton");
-
   return (
-    <Button ref={ref} variant="solid" color="red" {...props} {...element} />
+    <RadixButton
+      ref={ref}
+      className={cx(["button", "button--destructive"], className)}
+      variant="solid"
+      color="red"
+      {...props}
+      {...element}
+    />
   );
 });
 
-DestructiveButton.displayName = "DestructiveButton";
-
-export const IconButton = forwardRef<
+export const IconButton = React.forwardRef<
   HTMLButtonElement,
-  ComponentPropsWithoutRef<typeof RadixIconButton>
->((props, ref) => {
+  React.ComponentPropsWithoutRef<typeof RadixIconButton>
+>(function IconButton({ className, ...props }, ref) {
   const element = useElement("iconButton");
-
   return (
     <RadixIconButton
       ref={ref}
+      className={cx(["button", "icon-button"], className)}
       variant="ghost"
       color="gray"
       {...props}
@@ -76,74 +96,153 @@ export const IconButton = forwardRef<
   );
 });
 
-IconButton.displayName = "IconButton";
+export const SelectTrigger = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentPropsWithoutRef<typeof RadixSelect.Trigger>
+>(function SelectTrigger({ className, ...props }, ref) {
+  const element = useElement("select");
+  return (
+    <RadixSelect.Trigger
+      ref={ref}
+      className={cx("select", className)}
+      {...props}
+      {...element}
+    />
+  );
+});
+
+export const SelectContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<typeof RadixSelect.Content>
+>(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,
+  React.ComponentPropsWithoutRef<typeof RadixSelect.Item>
+>(function SelectItem({ className, ...props }, ref) {
+  const element = useElement("primaryMenuItem");
+  return (
+    <RadixSelect.Item
+      ref={ref}
+      className={cx(["menu-item", "select-item"], className)}
+      {...props}
+      {...element}
+    />
+  );
+});
 
-export const TextField = forwardRef<
+export const TextField = React.forwardRef<
   HTMLInputElement,
-  ComponentPropsWithoutRef<typeof RadixTextField.Root>
->((props, ref) => {
+  React.ComponentPropsWithoutRef<typeof RadixTextField.Root>
+>(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,
+  React.ComponentPropsWithoutRef<typeof RadixTextField.Slot>
+>(function TextFieldSlot({ className, ...props }, ref) {
+  return (
+    <RadixTextField.Slot
+      ref={ref}
+      className={cx("text-field-slot", className)}
+      {...props}
+    />
+  );
+});
 
-export const Badge = forwardRef<
+export const Badge = React.forwardRef<
   HTMLSpanElement,
-  ComponentPropsWithoutRef<typeof RadixBadge>
->((props, ref) => {
+  React.ComponentPropsWithoutRef<typeof RadixBadge>
+>(function Badge({ className, ...props }, ref) {
   const element = useElement("badge");
-
-  return <RadixBadge ref={ref} {...element} {...props} />;
+  return (
+    <RadixBadge
+      ref={ref}
+      className={cx("badge", className)}
+      {...element}
+      {...props}
+    />
+  );
 });
 
-Badge.displayName = "Badge";
+export const DropdownMenuContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<typeof RadixDropdownMenu.Content>
+>(function DropdownMenuContent({ className, ...props }, ref) {
+  const element = useElement("dropdown");
+  return (
+    <RadixDropdownMenu.Content
+      ref={ref}
+      className={cx("dropdown", className)}
+      {...props}
+      {...element}
+    />
+  );
+});
 
-export const PrimaryMenuItem = forwardRef<
+export const PrimaryMenuItem = React.forwardRef<
   HTMLDivElement,
-  ComponentPropsWithoutRef<typeof DropdownMenu.Item>
->((props, ref) => {
+  React.ComponentPropsWithoutRef<typeof RadixDropdownMenu.Item>
+>(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) => {
+  React.ComponentPropsWithoutRef<typeof RadixDropdownMenu.Item>
+>(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 +252,87 @@ export const Avatar = forwardRef<HTMLImageElement, AvatarProps>(
   },
 );
 
-Avatar.displayName = "Avatar";
+export const DialogContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<typeof RadixDialog.Content>
+>(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,
+  React.ComponentPropsWithoutRef<typeof RadixAlertDialog.Content>
+>(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]);
+}
+
+function useComposedRefs<T>(...refs: Array<React.Ref<T>>) {
+  return React.useCallback(
+    (value: T) => {
+      for (const ref of refs) {
+        if (typeof ref === "function") {
+          ref(value);
+        } else if (ref != null) {
+          try {
+            (ref as React.MutableRefObject<T | null>).current = value;
+          } catch {
+            //
+          }
+        }
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    refs,
+  );
+}
 
 type OmitAsChild<T> = {
   [K in keyof T]: T[K] extends undefined
@@ -162,11 +341,13 @@ 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>;

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;
+  }
+}

package/src/lib/invite-user-dialog.tsx

@@ -11,7 +11,15 @@ import {
 import * as React from "react";
 import { type Role, useRoles } from "./api/role";
 import { type InviteUserPayload, useInviteUser } from "./api/user";
-import { PrimaryButton, SecondaryButton, TextField } from "./elements";
+import {
+  DialogContent,
+  PrimaryButton,
+  SecondaryButton,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  TextField,
+} from "./elements";
 import { Label } from "./label";
 import { isErrorLike } from "./utils";
 
@@ -74,7 +82,7 @@ export const InviteUserDialog = ({ children }: InviteUserDialogProps) => {
   return (
     <Dialog.Root open={open} onOpenChange={setOpen}>
       {children && <Dialog.Trigger>{children}</Dialog.Trigger>}
-      <Dialog.Content maxWidth="480px" key={String(open)}>
+      <DialogContent maxWidth="480px" key={String(open)}>
         <Dialog.Title>Invite user</Dialog.Title>
         <Dialog.Description>
           An invitation will be sent to this email address with a link to
@@ -100,9 +108,10 @@ export const InviteUserDialog = ({ children }: InviteUserDialogProps) => {
                 control={(props) => (
                   <TextField
                     {...props}
-                    data-1p-ignore
+                    data-1p-ignore="true"
+                    data-lpignore="true"
                     type="email"
-                    autoComplete="email"
+                    autoComplete="off"
                     placeholder="Enter an email address"
                   />
                 )}
@@ -133,21 +142,21 @@ export const InviteUserDialog = ({ children }: InviteUserDialogProps) => {
                     value={selectedRole}
                     onValueChange={setSelectedRole}
                   >
-                    <Select.Trigger
+                    <SelectTrigger
                       id={id}
                       aria-invalid={ariaInvalid}
                       aria-describedby={ariaDescribedBy}
                     />
-                    <Select.Content>
-                      <Select.Item value={PLACEHOLDER_ROLE} disabled>
+                    <SelectContent>
+                      <SelectItem value={PLACEHOLDER_ROLE} disabled>
                         Select a role
-                      </Select.Item>
+                      </SelectItem>
                       {roles.map((role) => (
-                        <Select.Item key={role.slug} value={role.slug}>
+                        <SelectItem key={role.slug} value={role.slug}>
                           {role.name}
-                        </Select.Item>
+                        </SelectItem>
                       ))}
-                    </Select.Content>
+                    </SelectContent>
                   </Select.Root>
                 )}
               />
@@ -179,7 +188,7 @@ export const InviteUserDialog = ({ children }: InviteUserDialogProps) => {
         <VisuallyHidden asChild>
           <section aria-live="polite">{formErrors.form}</section>
         </VisuallyHidden>
-      </Dialog.Content>
+      </DialogContent>
     </Dialog.Root>
   );
 };