@workos-inc/widgets 0.0.0-pre.0

package/src/lib/edit-user-details-dialog.tsx

@@ -0,0 +1,170 @@
+"use client";
+
+import * as React from "react";
+import {
+  Callout,
+  Dialog,
+  Flex,
+  Select,
+  Skeleton,
+  Text,
+  VisuallyHidden,
+} from "@radix-ui/themes";
+import { type ReactNode, useState } from "react";
+import { useUpdateUserRole } from "./api/user";
+import type { User } from "./api/user";
+import { PrimaryButton, SecondaryButton } from "./elements";
+import { getBestName } from "./utils";
+import { useRoles } from "./api/role";
+import { useElement } from "./widgets-context";
+
+interface EditUserDialogProps extends Dialog.RootProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  user: User;
+  children?: ReactNode;
+}
+
+export const EditUserDetailsDialog = ({
+  children,
+  user,
+  ...props
+}: EditUserDialogProps) => {
+  const displayName = getBestName(user) || user.email;
+  const rolesQuery = useRoles();
+  const { data: roles } = rolesQuery;
+  const updateUser = useUpdateUserRole();
+  const dropdownProps = useElement("dropdown");
+  const [selectedRole, setSelectedRole] = useState(
+    user.roles[0]?.slug || "Unknown",
+  );
+
+  const onSubmitForm = ({ id, roles }: { id: string; roles: string[] }) => {
+    updateUser.mutate(
+      { id, data: { roles } },
+      {
+        onSuccess: () => {
+          props.onOpenChange(false);
+        },
+      },
+    );
+  };
+
+  const rootId = React.useId();
+  const formId = `edit-user-form-${rootId}`;
+  const selectId = `role-select-${rootId}`;
+  const selectLabelId = `${selectId}-label`;
+  const infoId = `${selectId}-info`;
+  const errorId = `${selectId}-error`;
+  const showErrorMessage = !!rolesQuery.error;
+  const showSingleRoleInfo = rolesQuery.isSuccess && roles.length === 1;
+
+  return (
+    <Dialog.Root {...props}>
+      {children && <Dialog.Trigger>{children}</Dialog.Trigger>}
+      <Dialog.Content maxWidth="480px">
+        <Dialog.Title>Edit role</Dialog.Title>
+        <Dialog.Description>
+          Select the role to assign to <Text weight="bold">{displayName}</Text>
+        </Dialog.Description>
+        <Flex mt="2" direction="column" gap="1" asChild>
+          <form
+            id={formId}
+            onSubmit={async (event) => {
+              event.preventDefault();
+              onSubmitForm({ id: user.id, roles: [selectedRole] });
+            }}
+          >
+            <Select.Root
+              name="roles"
+              value={selectedRole ?? "Unknown"}
+              onValueChange={setSelectedRole}
+              disabled={rolesQuery.isLoading || showSingleRoleInfo}
+            >
+              <Skeleton loading={rolesQuery.isLoading}>
+                <Select.Trigger
+                  id={selectId}
+                  placeholder="Assign a role"
+                  aria-labelledby={selectLabelId}
+                  aria-invalid={showErrorMessage || undefined}
+                  aria-describedby={
+                    [showErrorMessage && errorId, showSingleRoleInfo && infoId]
+                      .filter(Boolean)
+                      .join(" ") || undefined
+                  }
+                />
+              </Skeleton>
+
+              <Select.Content {...dropdownProps}>
+                {roles.map((role) => (
+                  <Select.Item key={role.slug} value={role.slug}>
+                    {role.name}
+                  </Select.Item>
+                ))}
+              </Select.Content>
+            </Select.Root>
+
+            {showErrorMessage ? (
+              <Text color="red" size="2" id={errorId}>
+                {getRoleSelectErrorMessage(rolesQuery.error)}
+              </Text>
+            ) : null}
+
+            {showSingleRoleInfo ? (
+              <Text color="gray" size="2" id={infoId} mt="1">
+                You cannot update the role for this user as there is only one
+                role available.
+              </Text>
+            ) : null}
+          </form>
+        </Flex>
+
+        {updateUser.error ? (
+          <Callout.Root color="red" mt="4" mb="-2">
+            <Callout.Text>
+              {getMutationErrorMessage(updateUser.error)}
+            </Callout.Text>
+          </Callout.Root>
+        ) : null}
+
+        <Flex mt="5" gap="3" justify="end">
+          <Dialog.Close>
+            <SecondaryButton disabled={updateUser.isPending}>
+              Cancel
+            </SecondaryButton>
+          </Dialog.Close>
+
+          <PrimaryButton
+            form={formId}
+            loading={updateUser.isPending}
+            disabled={rolesQuery.isLoading || showSingleRoleInfo || undefined}
+          >
+            Save
+          </PrimaryButton>
+        </Flex>
+        {/* mirror errors in a live region */}
+        <VisuallyHidden asChild>
+          <section aria-live="polite">
+            {getMutationErrorMessage(updateUser.error)}
+          </section>
+        </VisuallyHidden>
+      </Dialog.Content>
+    </Dialog.Root>
+  );
+};
+
+function getRoleSelectErrorMessage(error: unknown) {
+  if (!error) {
+    return null;
+  }
+  // TODO Handle server errors
+  return "There was an error fetching roles. Please try again.";
+}
+
+function getMutationErrorMessage(error: unknown) {
+  if (!error) {
+    return null;
+  }
+  // TODO Handle server errors
+  return "There was an error updating the user role. Please try again.";
+}

package/src/lib/elements.tsx

@@ -0,0 +1,175 @@
+"use client";
+
+import {
+  Button,
+  DropdownMenu,
+  Avatar as RadixAvatar,
+  AvatarProps as RadixAvatarProps,
+  Badge as RadixBadge,
+  IconButton as RadixIconButton,
+  TextField as RadixTextField,
+} from "@radix-ui/themes";
+import type {
+  GetPropDefTypes,
+  avatarPropDefs,
+  badgePropDefs,
+  buttonPropDefs,
+  dropdownMenuContentPropDefs,
+  dropdownMenuItemPropDefs,
+  iconButtonPropDefs,
+  textFieldRootPropDefs,
+} from "@radix-ui/themes/props";
+import { type ComponentPropsWithoutRef, forwardRef } from "react";
+import { useElement } from "./widgets-context";
+
+export const PrimaryButton = forwardRef<
+  HTMLButtonElement,
+  ComponentPropsWithoutRef<typeof Button>
+>((props, ref) => {
+  const element = useElement("primaryButton");
+
+  return <Button ref={ref} variant="solid" {...props} {...element} />;
+});
+
+PrimaryButton.displayName = "PrimaryButton";
+
+export const SecondaryButton = forwardRef<
+  HTMLButtonElement,
+  ComponentPropsWithoutRef<typeof Button>
+>((props, ref) => {
+  const element = useElement("secondaryButton");
+
+  return (
+    <Button ref={ref} variant="surface" color="gray" {...props} {...element} />
+  );
+});
+
+SecondaryButton.displayName = "SecondaryButton";
+
+export const DestructiveButton = forwardRef<
+  HTMLButtonElement,
+  ComponentPropsWithoutRef<typeof Button>
+>((props, ref) => {
+  const element = useElement("destructiveButton");
+
+  return (
+    <Button ref={ref} variant="solid" color="red" {...props} {...element} />
+  );
+});
+
+DestructiveButton.displayName = "DestructiveButton";
+
+export const IconButton = forwardRef<
+  HTMLButtonElement,
+  ComponentPropsWithoutRef<typeof RadixIconButton>
+>((props, ref) => {
+  const element = useElement("iconButton");
+
+  return (
+    <RadixIconButton
+      ref={ref}
+      variant="ghost"
+      color="gray"
+      {...props}
+      {...element}
+    />
+  );
+});
+
+IconButton.displayName = "IconButton";
+
+export const TextField = forwardRef<
+  HTMLInputElement,
+  ComponentPropsWithoutRef<typeof RadixTextField.Root>
+>((props, ref) => {
+  const element = useElement("textfield");
+
+  return (
+    <RadixTextField.Root
+      data-1p-ignore
+      ref={ref}
+      variant="surface"
+      {...props}
+      {...element}
+    />
+  );
+});
+
+TextField.displayName = "TextField";
+
+export const TextFieldSlot = RadixTextField.Slot;
+
+export const Badge = forwardRef<
+  HTMLSpanElement,
+  ComponentPropsWithoutRef<typeof RadixBadge>
+>((props, ref) => {
+  const element = useElement("badge");
+
+  return <RadixBadge ref={ref} {...element} {...props} />;
+});
+
+Badge.displayName = "Badge";
+
+export const PrimaryMenuItem = forwardRef<
+  HTMLDivElement,
+  ComponentPropsWithoutRef<typeof DropdownMenu.Item>
+>((props, ref) => {
+  const element = useElement("primaryMenuItem");
+
+  return <DropdownMenu.Item ref={ref} {...props} {...element} />;
+});
+
+PrimaryMenuItem.displayName = "PrimaryMenuItem";
+
+export const DestructiveMenuItem = forwardRef<
+  HTMLDivElement,
+  ComponentPropsWithoutRef<typeof DropdownMenu.Item>
+>((props, ref) => {
+  const element = useElement("destructiveMenuItem");
+
+  return <DropdownMenu.Item ref={ref} color="red" {...props} {...element} />;
+});
+
+DestructiveMenuItem.displayName = "DestructiveMenuItem";
+
+interface AvatarProps extends RadixAvatarProps {
+  dim?: boolean;
+}
+
+export const Avatar = forwardRef<HTMLImageElement, AvatarProps>(
+  ({ dim, ...props }, ref) => {
+    const element = useElement("avatar");
+
+    return (
+      <RadixAvatar
+        ref={ref}
+        color="gray"
+        {...props}
+        {...element}
+        // TODO: use CSS var instead of hard-coded value for opacity
+        style={dim ? { opacity: 0.6, ...props.style } : props.style}
+      />
+    );
+  },
+);
+
+Avatar.displayName = "Avatar";
+
+type OmitAsChild<T> = {
+  [K in keyof T]: T[K] extends undefined
+    ? undefined
+    : Omit<NonNullable<T[K]>, "asChild">;
+};
+
+export type Elements = OmitAsChild<{
+  primaryButton?: GetPropDefTypes<typeof buttonPropDefs>;
+  secondaryButton?: GetPropDefTypes<typeof buttonPropDefs>;
+  destructiveButton?: GetPropDefTypes<typeof buttonPropDefs>;
+  iconButton?: GetPropDefTypes<typeof iconButtonPropDefs>;
+  textfield?: GetPropDefTypes<typeof textFieldRootPropDefs>;
+  badge?: GetPropDefTypes<typeof badgePropDefs>;
+  dropdown?: GetPropDefTypes<typeof dropdownMenuContentPropDefs>;
+  primaryMenuItem?: GetPropDefTypes<typeof dropdownMenuItemPropDefs>;
+  destructiveMenuItem?: GetPropDefTypes<typeof dropdownMenuItemPropDefs>;
+  avatar?: Omit<GetPropDefTypes<typeof avatarPropDefs>, "fallback">;
+}>;

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

@@ -0,0 +1,319 @@
+"use client";
+
+import {
+  Callout,
+  Dialog,
+  Flex,
+  Select,
+  Text,
+  VisuallyHidden,
+} from "@radix-ui/themes";
+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 { Label } from "./label";
+import { isErrorLike } from "./utils";
+
+/**
+ * Used to stub a fake value for the role select. It will be selected by default
+ * before the role query resolves, or if the query results in an error. We do
+ * this because we need to provide _any_ value to the select to avoid
+ * controlled/uncontrolled bugs.
+ */
+const PLACEHOLDER_ROLE = "_rolePlaceholder";
+
+interface InviteUserDialogProps {
+  children?: React.ReactNode;
+}
+
+interface DialogFormContextValue {
+  dialogId: string;
+}
+
+const DialogFormContext = React.createContext<DialogFormContextValue>(null!);
+DialogFormContext.displayName = "DialogFormContext";
+
+export const InviteUserDialog = ({ children }: InviteUserDialogProps) => {
+  const [open, setOpen] = React.useState(false);
+  const dialogId = toId("invite-user", React.useId());
+  const formId = toId(dialogId, "form");
+
+  const inviteUser = useInviteUser();
+  const rolesQuery = useRoles();
+  const roles = rolesQuery.data;
+  const [selectedRole, setSelectedRole] = React.useState(
+    () => getDefaultRole(roles)?.slug || PLACEHOLDER_ROLE,
+  );
+  React.useEffect(() => {
+    // Update the selected role if it's not in the list (eg if the list was
+    // previously empty and the query resolved)
+    setSelectedRole((selectedRole) => {
+      if (roles.find((role) => role.slug === selectedRole)) {
+        // if current selected role is in the new list, don't change it
+        return selectedRole;
+      }
+      return getDefaultRole(roles)?.slug || PLACEHOLDER_ROLE;
+    });
+  }, [roles]);
+
+  const onSubmitForm = (data: InviteUserPayload) => {
+    if (inviteUser.isPending || rolesQuery.status !== "success") {
+      return;
+    }
+    inviteUser.mutate(data, {
+      onSuccess: () => {
+        setOpen(false);
+      },
+    });
+  };
+
+  const formErrors = getFormErrors(inviteUser.error);
+  useFormFieldFocusOnError(dialogId, inviteUser.error);
+
+  return (
+    <Dialog.Root open={open} onOpenChange={setOpen}>
+      {children && <Dialog.Trigger>{children}</Dialog.Trigger>}
+      <Dialog.Content 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
+          complete their account.
+        </Dialog.Description>
+        <DialogFormContext.Provider value={{ dialogId }}>
+          <Flex direction="column" gap="4" mt="5" asChild>
+            <form
+              id={formId}
+              onSubmit={async (event) => {
+                event.preventDefault();
+                onSubmitForm({
+                  email: event.currentTarget.email.value,
+                  role: selectedRole,
+                });
+              }}
+            >
+              <FormField
+                name="email"
+                label="Email address"
+                error={formErrors.fields.email}
+                required
+                control={(props) => (
+                  <TextField
+                    {...props}
+                    data-1p-ignore
+                    type="email"
+                    autoComplete="email"
+                    placeholder="Enter an email address"
+                  />
+                )}
+              />
+
+              <FormField
+                name="role"
+                label="Role"
+                error={formErrors.fields.role}
+                disabled={rolesQuery.isPending || roles.length <= 1}
+                info={
+                  roles.length === 1 ? (
+                    <>
+                      New users will be invited with the{" "}
+                      <Text weight="bold">{roles[0].name}</Text> role, as it is
+                      the only one available.
+                    </>
+                  ) : undefined
+                }
+                control={({
+                  id,
+                  "aria-invalid": ariaInvalid,
+                  "aria-describedby": ariaDescribedBy,
+                  ...props
+                }) => (
+                  <Select.Root
+                    {...props}
+                    value={selectedRole}
+                    onValueChange={setSelectedRole}
+                  >
+                    <Select.Trigger
+                      id={id}
+                      aria-invalid={ariaInvalid}
+                      aria-describedby={ariaDescribedBy}
+                    />
+                    <Select.Content>
+                      <Select.Item value={PLACEHOLDER_ROLE} disabled>
+                        Select a role
+                      </Select.Item>
+                      {roles.map((role) => (
+                        <Select.Item key={role.slug} value={role.slug}>
+                          {role.name}
+                        </Select.Item>
+                      ))}
+                    </Select.Content>
+                  </Select.Root>
+                )}
+              />
+            </form>
+          </Flex>
+        </DialogFormContext.Provider>
+
+        {formErrors.form ? (
+          <Callout.Root color="red" mt="4" mb="-2">
+            <Callout.Text>{formErrors.form}</Callout.Text>
+          </Callout.Root>
+        ) : null}
+
+        <Flex mt="5" gap="3" justify="end">
+          <Dialog.Close>
+            <SecondaryButton disabled={inviteUser.isPending}>
+              Cancel
+            </SecondaryButton>
+          </Dialog.Close>
+          <PrimaryButton
+            form={formId}
+            loading={inviteUser.isPending}
+            disabled={rolesQuery.isPending || undefined}
+          >
+            Invite
+          </PrimaryButton>
+        </Flex>
+        {/* mirror errors in a live region */}
+        <VisuallyHidden asChild>
+          <section aria-live="polite">{formErrors.form}</section>
+        </VisuallyHidden>
+      </Dialog.Content>
+    </Dialog.Root>
+  );
+};
+
+interface FormControlRenderProps {
+  id: string;
+  name: string;
+  "aria-describedby": string | undefined;
+  "aria-invalid"?: boolean;
+  required: boolean | undefined;
+  disabled: boolean | undefined;
+}
+
+function FormField({
+  name,
+  label,
+  error,
+  info,
+  control,
+  required,
+  disabled,
+}: {
+  name: string;
+  label: string;
+  error?: React.ReactNode;
+  info?: React.ReactNode;
+  control: (props: FormControlRenderProps) => React.ReactNode;
+  required?: boolean;
+  disabled?: boolean;
+}) {
+  const { dialogId } = React.useContext(DialogFormContext);
+  const fieldId = toId(dialogId, name);
+  const errorId = toId(dialogId, name, "error");
+  const infoId = toId(dialogId, name, "info");
+  return (
+    <Flex direction="column" gap="1">
+      <Label htmlFor={fieldId}>{label}</Label>
+      {control({
+        id: fieldId,
+        name,
+        "aria-describedby": (() => {
+          const tags: string[] = [];
+          if (error) {
+            tags.push(errorId);
+          }
+          if (info) {
+            tags.push(infoId);
+          }
+          if (tags.length === 0) {
+            return undefined;
+          }
+          return tags.join(" ");
+        })(),
+        "aria-invalid": !!error || undefined,
+        required: required || undefined,
+        disabled: disabled || undefined,
+      })}
+
+      {error ? (
+        <Text color="red" size="2" id={errorId}>
+          {error}
+        </Text>
+      ) : null}
+      {info ? (
+        <Text color="gray" size="2" id={infoId} mt="1">
+          {info}
+        </Text>
+      ) : null}
+    </Flex>
+  );
+}
+
+function toId(...parts: string[]) {
+  return parts.join("-");
+}
+
+function getFormErrors(queryError: unknown) {
+  const formErrors = {
+    form: null as string | null,
+    fields: {
+      email: null as string | null,
+      role: null as string | null,
+    },
+  };
+
+  if (queryError) {
+    if (!isErrorLike(queryError)) {
+      return {
+        ...formErrors,
+        form: "An unexpected error occurred. Please try again.",
+      };
+    }
+
+    switch (queryError.message.toLowerCase()) {
+      case "user already exists":
+      case "user already invited":
+      case "invalid email":
+        formErrors.fields.email = queryError.message;
+        break;
+      case "invalid role":
+        formErrors.fields.role = queryError.message;
+        break;
+      default:
+        // TODO handle more cases for various server errors
+        formErrors.form =
+          "There was an error inviting this user. Please refresh the page and try again.";
+        break;
+    }
+  }
+
+  return formErrors;
+}
+
+function useFormFieldFocusOnError(dialogId: string, queryError: unknown) {
+  React.useEffect(() => {
+    const fieldErrors = getFormErrors(queryError).fields;
+    for (const [name, error] of Object.entries(fieldErrors)) {
+      if (error) {
+        const fieldElement = document.getElementById(toId(dialogId, name)) as
+          | HTMLInputElement
+          | HTMLButtonElement
+          | null;
+        if (fieldElement) {
+          fieldElement?.focus();
+          if ("select" in fieldElement) {
+            fieldElement.select();
+          }
+        }
+        break;
+      }
+    }
+  }, [dialogId, queryError]);
+}
+
+function getDefaultRole(roles: Role[]) {
+  return roles.find((role) => role.default) || roles[0];
+}

package/src/lib/label.tsx

@@ -0,0 +1,14 @@
+import { Text, type TextProps } from "@radix-ui/themes";
+import { forwardRef } from "react";
+
+type LabelProps = Omit<Extract<TextProps, { as: "label" }>, "as">;
+
+export const Label = forwardRef<HTMLLabelElement, LabelProps>(
+  ({ children, ...props }, ref) => (
+    <Text as="label" ref={ref} weight="bold" size="2" {...props}>
+      {children}
+    </Text>
+  ),
+);
+
+Label.displayName = "Label";