@workos-inc/widgets 1.1.4 → 1.2.0

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

@@ -1,178 +0,0 @@
-"use client";
-
-import * as React from "react";
-import {
-  Callout,
-  Dialog,
-  Flex,
-  Select,
-  Text,
-  VisuallyHidden,
-} from "@radix-ui/themes";
-import { type ReactNode, useState } from "react";
-import { useUpdateUserRole } from "./api/user";
-import {
-  DialogContent,
-  PrimaryButton,
-  SecondaryButton,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  Skeleton,
-} from "./elements";
-import { getBestName } from "./utils";
-import { Member, useRoles } from "../api";
-
-interface EditUserRoleDialogProps extends Dialog.RootProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  user: Member;
-  children?: ReactNode;
-}
-
-export function EditUserRoleDialog({
-  children,
-  user,
-  ...props
-}: EditUserRoleDialogProps) {
-  const displayName = getBestName(user) || user.email;
-  const rolesQuery = useRoles({
-    query: {
-      initialData: [],
-    },
-  });
-  const { data: roles } = rolesQuery;
-  const updateUser = useUpdateUserRole();
-  const [selectedRole, setSelectedRole] = useState(
-    user.roles?.at(0)?.slug || "Unknown",
-  );
-
-  const onSubmitForm = ({ id, roles }: { id: string; roles: string[] }) => {
-    updateUser.mutate(
-      { userId: 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>}
-      <DialogContent 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}>
-                <SelectTrigger
-                  id={selectId}
-                  placeholder="Assign a role"
-                  aria-labelledby={selectLabelId}
-                  aria-invalid={showErrorMessage || undefined}
-                  aria-describedby={
-                    [showErrorMessage && errorId, showSingleRoleInfo && infoId]
-                      .filter(Boolean)
-                      .join(" ") || undefined
-                  }
-                />
-              </Skeleton>
-
-              <SelectContent>
-                {roles.map((role) => (
-                  <SelectItem key={role.slug} value={role.slug}>
-                    {role.name}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </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>
-      </DialogContent>
-    </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

@@ -1,428 +0,0 @@
-"use client";
-
-import * as React from "react";
-import {
-  AlertDialog as RadixAlertDialog,
-  Avatar as RadixAvatar,
-  AvatarProps as RadixAvatarProps,
-  Badge as RadixBadge,
-  Button as RadixButton,
-  Dialog as RadixDialog,
-  DropdownMenu as RadixDropdownMenu,
-  IconButton as RadixIconButton,
-  Select as RadixSelect,
-  Skeleton as RadixSkeleton,
-  Text,
-  TextField as RadixTextField,
-  type BadgeProps,
-  type ButtonProps,
-  type IconButtonProps,
-  type SkeletonProps,
-  type TextProps,
-} from "@radix-ui/themes";
-import type {
-  GetPropDefTypes,
-  avatarPropDefs,
-  badgePropDefs,
-  buttonPropDefs,
-  dialogContentPropDefs,
-  dropdownMenuContentPropDefs,
-  dropdownMenuItemPropDefs,
-  iconButtonPropDefs,
-  textPropDefs,
-  textFieldRootPropDefs,
-  selectTriggerPropDefs,
-  skeletonPropDefs,
-} from "@radix-ui/themes/props";
-import { useComposedRefs } from "@radix-ui/react-compose-refs";
-import cx from "clsx";
-import { useElement } from "./widgets-context";
-import { namespaceClassNames } from "./utils";
-import { useLayoutEffect } from "./use-layout-effect";
-import { EyeClosedIcon, EyeOpenIcon } from "@radix-ui/react-icons";
-
-export const PrimaryButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  function PrimaryButton({ className, ...props }, ref) {
-    const element = useElement("primaryButton");
-    return (
-      <RadixButton
-        ref={ref}
-        className={cx(
-          namespaceClassNames("button", "button--primary"),
-          className,
-        )}
-        variant="solid"
-        {...props}
-        {...element}
-      />
-    );
-  },
-);
-
-export const SecondaryButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  function SecondaryButton({ className, ...props }, ref) {
-    const element = useElement("secondaryButton");
-    return (
-      <RadixButton
-        ref={ref}
-        highContrast
-        className={cx(
-          namespaceClassNames("button", "button--secondary"),
-          className,
-        )}
-        variant="surface"
-        color="gray"
-        {...props}
-        {...element}
-      />
-    );
-  },
-);
-
-export const DestructiveButton = React.forwardRef<
-  HTMLButtonElement,
-  ButtonProps
->(function DestructiveButton({ className, ...props }, ref) {
-  const element = useElement("destructiveButton");
-  return (
-    <RadixButton
-      ref={ref}
-      className={cx(
-        namespaceClassNames("button", "button--destructive"),
-        className,
-      )}
-      variant="solid"
-      color="red"
-      {...props}
-      {...element}
-    />
-  );
-});
-
-export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
-  function IconButton({ className, ...props }, ref) {
-    const element = useElement("iconButton");
-    return (
-      <RadixIconButton
-        ref={ref}
-        className={cx(namespaceClassNames("button", "icon-button"), className)}
-        variant="ghost"
-        color="gray"
-        {...props}
-        {...element}
-      />
-    );
-  },
-);
-
-export const Skeleton = React.forwardRef<HTMLSpanElement, SkeletonProps>(
-  function Skeleton({ className, ...props }, ref) {
-    const element = useElement("skeleton");
-    return (
-      <RadixSkeleton
-        ref={ref}
-        className={cx(namespaceClassNames("skeleton"), className)}
-        {...props}
-        {...element}
-      />
-    );
-  },
-);
-
-export const SelectTrigger = React.forwardRef<
-  HTMLButtonElement,
-  RadixSelect.TriggerProps
->(function SelectTrigger({ className, ...props }, ref) {
-  const element = useElement("select");
-  return (
-    <RadixSelect.Trigger
-      ref={ref}
-      className={cx(namespaceClassNames("select"), className)}
-      {...props}
-      {...element}
-    />
-  );
-});
-
-export const SelectContent = React.forwardRef<
-  HTMLDivElement,
-  RadixSelect.ContentProps
->(function SelectContent({ className, ...props }, ref) {
-  const element = useElement("dropdown");
-  return (
-    <RadixSelect.Content
-      ref={ref}
-      className={cx(
-        namespaceClassNames("dropdown", "select-dropdown"),
-        className,
-      )}
-      {...props}
-      {...element}
-    />
-  );
-});
-
-export const SelectItem = React.forwardRef<
-  HTMLDivElement,
-  RadixSelect.ItemProps
->(function SelectItem({ className, ...props }, ref) {
-  const element = useElement("primaryMenuItem");
-  return (
-    <RadixSelect.Item
-      ref={ref}
-      className={cx(namespaceClassNames("menu-item", "select-item"), className)}
-      {...props}
-      {...element}
-    />
-  );
-});
-
-export const Label = React.forwardRef<HTMLLabelElement, TextProps>(
-  function Label({ children, className, style = {}, ...props }, ref) {
-    const element = useElement("label");
-    return (
-      // @ts-expect-error: Text props are a complex union type depending on the
-      // `as` prop value, which breaks down when spreading in `element`
-      <Text
-        as="label"
-        ref={ref}
-        weight="bold"
-        size="2"
-        className={cx(namespaceClassNames("label"), className)}
-        style={{ width: "fit-content", ...style }}
-        {...props}
-        {...element}
-      >
-        {children}
-      </Text>
-    );
-  },
-);
-
-export const TextField = React.forwardRef<
-  HTMLInputElement,
-  RadixTextField.RootProps
->(function TextField({ className, ...props }, ref) {
-  const element = useElement("textfield");
-  return (
-    <RadixTextField.Root
-      ref={ref}
-      variant="surface"
-      className={cx(namespaceClassNames("text-field"), className)}
-      {...props}
-      {...element}
-    />
-  );
-});
-
-export const TextFieldSlot = React.forwardRef<
-  HTMLDivElement,
-  RadixTextField.SlotProps
->(function TextFieldSlot({ className, ...props }, ref) {
-  return (
-    <RadixTextField.Slot
-      ref={ref}
-      className={cx(namespaceClassNames("text-field-slot"), className)}
-      {...props}
-    />
-  );
-});
-
-export const PasswordField = React.forwardRef<
-  HTMLInputElement,
-  RadixTextField.RootProps
->(function TextField({ className, ...props }, ref) {
-  const element = useElement("textfield");
-  const [showPassword, setShowPassword] = React.useState(false);
-  return (
-    <RadixTextField.Root
-      ref={ref}
-      variant="surface"
-      className={cx(namespaceClassNames("text-field"), className)}
-      {...props}
-      {...element}
-      type={showPassword ? "text" : "password"}
-    >
-      <RadixTextField.Slot side="right">
-        <IconButton
-          type="button"
-          size="1"
-          variant="ghost"
-          color="gray"
-          onClick={() => setShowPassword(!showPassword)}
-        >
-          {showPassword ? <EyeOpenIcon /> : <EyeClosedIcon />}
-        </IconButton>
-      </RadixTextField.Slot>
-    </RadixTextField.Root>
-  );
-});
-
-export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
-  function Badge({ className, ...props }, ref) {
-    const element = useElement("badge");
-    return (
-      <RadixBadge
-        ref={ref}
-        className={cx(namespaceClassNames("badge"), className)}
-        {...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(namespaceClassNames("dropdown"), className)}
-      {...props}
-      {...element}
-    />
-  );
-});
-
-export const PrimaryMenuItem = React.forwardRef<
-  HTMLDivElement,
-  RadixDropdownMenu.ItemProps
->(function PrimaryMenuItem({ className, ...props }, ref) {
-  const element = useElement("primaryMenuItem");
-  return (
-    <RadixDropdownMenu.Item
-      ref={ref}
-      className={cx(namespaceClassNames("menu-item"), className)}
-      {...props}
-      {...element}
-    />
-  );
-});
-
-export const DestructiveMenuItem = React.forwardRef<
-  HTMLDivElement,
-  RadixDropdownMenu.ItemProps
->(function DestructiveMenuItem({ className, ...props }, ref) {
-  const element = useElement("destructiveMenuItem");
-  return (
-    <RadixDropdownMenu.Item
-      ref={ref}
-      className={cx(
-        namespaceClassNames("menu-item", "menu-item--destructive"),
-        className,
-      )}
-      color="red"
-      {...props}
-      {...element}
-    />
-  );
-});
-
-interface AvatarProps extends RadixAvatarProps {
-  dim?: boolean;
-}
-
-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(namespaceClassNames("avatar"), className)}
-        {...props}
-        {...element}
-        // TODO: use CSS var instead of hard-coded value for opacity
-        style={dim ? { opacity: 0.6, ...props.style } : props.style}
-      />
-    );
-  },
-);
-
-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: namespaceClassNames("dialog-overlay"),
-    selector: ".rt-DialogOverlay",
-  });
-  return (
-    <RadixDialog.Content
-      ref={ref}
-      className={cx(namespaceClassNames("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: namespaceClassNames("dialog-overlay"),
-    selector: ".rt-AlertDialogOverlay",
-  });
-
-  return (
-    <RadixAlertDialog.Content
-      ref={ref}
-      className={cx(namespaceClassNames("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
-    ? undefined
-    : Omit<NonNullable<T[K]>, "asChild">;
-};
-
-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?: GetPropDefTypes<typeof textPropDefs>;
-  skeleton?: GetPropDefTypes<typeof skeletonPropDefs>;
-}>;