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

package/src/lib/api/user.ts

@@ -12,6 +12,7 @@ import { parseErrorResponse } from "../utils";
 import { useWorkOsApiUrl } from "../widgets-context";
 import { API_ENDPOINTS } from "./config";
 import { USER_ROW_LIMIT, WIDGETS_API_VERSION } from "../constants";
+import { ApiError, FetchError, NoAuthTokenError } from "../errors";
 
 export interface PaginationData {
   before?: string;
@@ -54,15 +55,6 @@ export type Paginated<T> = { data: T; pagination: PaginationData };
 
 type PaginatedUsers = Paginated<User[]>;
 
-class InviteUserError extends Error {
-  status: number;
-  constructor(args: { message: string; status: number }) {
-    super(args.message);
-    this.name = "InviteUserError";
-    this.status = args.status;
-  }
-}
-
 export const useUsers = (context?: UsersManagementContextType) => {
   const {
     authToken,
@@ -206,6 +198,8 @@ export const useResendUserInvite = (args?: {
   });
 };
 
+type AuthToken = () => Promise<string>;
+
 /**
  * Fetch functions
  */
@@ -219,7 +213,7 @@ async function fetchUsers({
   searchQuery,
 }: {
   baseUrl: string;
-  authToken: string | null;
+  authToken: AuthToken | null;
   limit: number;
   before: string | undefined;
   after: string | undefined;
@@ -227,7 +221,7 @@ async function fetchUsers({
   role: string | null;
 }) {
   if (!authToken) {
-    throw new Error("No auth token provided");
+    throw new NoAuthTokenError();
   }
   const url = new URL(`${baseUrl}/${API_ENDPOINTS.USERS}`);
   url.searchParams.set("limit", limit.toString());
@@ -245,16 +239,24 @@ async function fetchUsers({
   }
   const response = await fetch(url, {
     cache: "no-store",
-    headers: getAuthHeaders(authToken),
+    headers: getAuthHeaders(await authToken()),
   }).catch((error) => {
-    console.error(error);
-    // TODO: handle fetch errors
-    throw new Error("Failed to fetch users");
+    throw new FetchError({
+      message: "Failed to fetch users",
+      queryType: "query",
+      recordType: "users",
+      context: { error },
+    });
   });
 
   if (!response.ok) {
-    // TODO: handle this case
-    throw new Error("Failed to fetch users");
+    const { message, status } = await parseErrorResponse(response);
+    throw new ApiError({
+      message,
+      status,
+      queryType: "query",
+      recordType: "users",
+    });
   }
   // TODO validate the response
   const json = await response.json();
@@ -267,23 +269,31 @@ async function fetchUsers({
 
 const fetchUser = async (
   userId: string,
-  { authToken, baseUrl }: { authToken: string | null; baseUrl: string },
+  { authToken, baseUrl }: { authToken: AuthToken | null; baseUrl: string },
 ) => {
   if (!authToken) {
-    throw new Error("No auth token provided");
+    throw new NoAuthTokenError();
   }
   const response = await fetch(`${baseUrl}/${API_ENDPOINTS.USERS}/${userId}`, {
-    headers: getAuthHeaders(authToken),
+    headers: getAuthHeaders(await authToken()),
     cache: "no-store",
   }).catch((error) => {
-    console.error(error);
-    // TODO: handle fetch errors
-    throw new Error("Failed to fetch user");
+    throw new FetchError({
+      message: "Failed to fetch user",
+      queryType: "query",
+      recordType: "users",
+      context: { error },
+    });
   });
 
   if (!response.ok) {
-    // TODO: handle this case
-    throw new Error("Failed to fetch user");
+    const { message, status } = await parseErrorResponse(response);
+    throw new ApiError({
+      message,
+      status,
+      queryType: "query",
+      recordType: "users",
+    });
   }
   // TODO validate the response
   const json = await response.json();
@@ -296,28 +306,40 @@ const updateUserRole = async (
     authToken,
     baseUrl,
     data,
-  }: { authToken: string | null; baseUrl: string; data: { roles: string[] } },
+  }: {
+    authToken: AuthToken | null;
+    baseUrl: string;
+    data: { roles: string[] };
+  },
 ) => {
   if (!authToken) {
-    // TODO handle this case
-    throw new Error("No auth token");
+    throw new NoAuthTokenError();
   }
 
   const response = await fetch(`${baseUrl}/${API_ENDPOINTS.USERS}/${userId}`, {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
-      ...getAuthHeaders(authToken),
+      ...getAuthHeaders(await authToken()),
     },
     body: JSON.stringify(data),
   }).catch((error) => {
-    console.error(error);
-    // TODO: handle fetch errors
-    throw new Error("Failed to update user");
+    throw new FetchError({
+      message: "Failed to update user",
+      queryType: "mutation",
+      recordType: "users",
+      context: { error },
+    });
   });
 
   if (!response.ok) {
-    throw new Error("Failed to update user");
+    const { message, status } = await parseErrorResponse(response);
+    throw new ApiError({
+      message,
+      status,
+      queryType: "mutation",
+      recordType: "users",
+    });
   }
   // TODO validate the response
   const json = await response.json();
@@ -327,36 +349,38 @@ const updateUserRole = async (
 const inviteUser = async ({
   authToken,
   baseUrl,
-  ...data
-}: InviteUserPayload & { authToken: string | null; baseUrl: string }) => {
+  email,
+  role,
+}: InviteUserPayload & { authToken: AuthToken | null; baseUrl: string }) => {
   if (!authToken) {
-    // TODO handle this case
-    throw new Error("No auth token");
-  }
-  if (!data.role) {
-    throw new Error("Role required to invite user");
+    throw new NoAuthTokenError();
   }
   const response = await fetch(`${baseUrl}/${API_ENDPOINTS.USER_INVITE}`, {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
-      ...getAuthHeaders(authToken),
+      ...getAuthHeaders(await authToken()),
     },
     body: JSON.stringify({
-      email: data.email,
-      roles: [data.role],
+      email,
+      roles: [role],
     }),
   }).catch((error) => {
-    console.error(error);
-    // TODO: handle fetch errors
-    throw new Error("Failed to invite user");
+    throw new FetchError({
+      message: "Failed to invite user",
+      queryType: "mutation",
+      recordType: "users",
+      context: { error },
+    });
   });
 
   if (!response.ok) {
     const { message, status } = await parseErrorResponse(response);
-    throw new InviteUserError({
+    throw new ApiError({
       message,
       status,
+      queryType: "mutation",
+      recordType: "users",
     });
   }
   // TODO validate the response
@@ -366,26 +390,32 @@ const inviteUser = async ({
 
 const deleteUser = async (
   userId: string,
-  { authToken, baseUrl }: { authToken: string | null; baseUrl: string },
+  { authToken, baseUrl }: { authToken: AuthToken | null; baseUrl: string },
 ) => {
   if (!authToken) {
-    // TODO handle this case
-    throw new Error("No auth token");
+    throw new NoAuthTokenError();
   }
 
   const response = await fetch(`${baseUrl}/${API_ENDPOINTS.USERS}/${userId}`, {
     method: "DELETE",
-    headers: getAuthHeaders(authToken),
+    headers: getAuthHeaders(await authToken()),
   }).catch((error) => {
-    console.error(error);
-    // TODO: handle fetch errors
-    throw new Error("Failed to delete user. Please try again.");
+    throw new FetchError({
+      message: "Failed to delete user. Please try again.",
+      queryType: "mutation",
+      recordType: "users",
+      context: { error },
+    });
   });
 
   if (!response.ok) {
-    console.error(response);
-    // TODO: handle server errors
-    throw new Error("Failed to delete user. Please try again.");
+    const { message, status } = await parseErrorResponse(response);
+    throw new ApiError({
+      message,
+      status,
+      queryType: "mutation",
+      recordType: "users",
+    });
   }
   // TODO validate the response
   const json = await response.json();
@@ -394,27 +424,34 @@ const deleteUser = async (
 
 const revokeUserInvite = async (
   userId: string,
-  { authToken, baseUrl }: { authToken: string | null; baseUrl: string },
+  { authToken, baseUrl }: { authToken: AuthToken | null; baseUrl: string },
 ) => {
   if (!authToken) {
-    // TODO handle this case
-    throw new Error("No auth token");
+    throw new NoAuthTokenError();
   }
   const response = await fetch(
     `${baseUrl}/${API_ENDPOINTS.USER_INVITES}/${userId}`,
     {
       method: "DELETE",
-      headers: getAuthHeaders(authToken),
+      headers: getAuthHeaders(await authToken()),
     },
   ).catch((error) => {
-    console.error(error);
-    // TODO: handle fetch errors
-    throw new Error("Failed to resend user invite. Please try again.");
+    throw new FetchError({
+      message: "Failed to resend user invite. Please try again.",
+      queryType: "mutation",
+      recordType: "users",
+      context: { error },
+    });
   });
 
   if (!response.ok) {
-    // TODO: handle server errors
-    throw new Error("Failed to resend user invite. Please try again.");
+    const { message, status } = await parseErrorResponse(response);
+    throw new ApiError({
+      message,
+      status,
+      queryType: "mutation",
+      recordType: "users",
+    });
   }
   // TODO validate the response
   const json = await response.json();
@@ -423,27 +460,34 @@ const revokeUserInvite = async (
 
 const resendUserInvite = async (
   userId: string,
-  { authToken, baseUrl }: { authToken: string | null; baseUrl: string },
+  { authToken, baseUrl }: { authToken: AuthToken | null; baseUrl: string },
 ) => {
   if (!authToken) {
-    // TODO handle this case
-    throw new Error("No auth token");
+    throw new NoAuthTokenError();
   }
   const response = await fetch(
     `${baseUrl}/${API_ENDPOINTS.USER_INVITES_RESEND(userId)}`,
     {
       method: "POST",
-      headers: getAuthHeaders(authToken),
+      headers: getAuthHeaders(await authToken()),
     },
   ).catch((error) => {
-    console.error(error);
-    // TODO: handle fetch errors
-    throw new Error("Failed to resend user invite. Please try again.");
+    throw new FetchError({
+      message: "Failed to resend user invite. Please try again.",
+      queryType: "mutation",
+      recordType: "users",
+      context: { error },
+    });
   });
 
   if (!response.ok) {
-    // TODO: handle server errors
-    throw new Error("Failed to resend user invite. Please try again.");
+    const { message, status } = await parseErrorResponse(response);
+    throw new ApiError({
+      message,
+      status,
+      queryType: "mutation",
+      recordType: "users",
+    });
   }
   // TODO validate the response
   const json = await response.json();

package/src/lib/constants.ts

@@ -1,2 +1,3 @@
 export const USER_ROW_LIMIT = 10;
-export const WIDGETS_API_VERSION = "v1";
+export const WIDGETS_API_VERSION = "1";
+export const WIDGETS_CLASS_NAMESPACE = "woswidgets";

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

@@ -11,7 +11,11 @@ import {
 import { type ReactNode, useRef } from "react";
 import { useDeleteUser } from "./api/user";
 import type { User } from "./api/user";
-import { DestructiveButton, SecondaryButton } from "./elements";
+import {
+  AlertDialogContent,
+  DestructiveButton,
+  SecondaryButton,
+} from "./elements";
 
 interface DeleteUserDialogProps extends AlertDialog.RootProps {
   open: boolean;
@@ -40,7 +44,7 @@ export const DeleteUserDialog = ({
     <AlertDialog.Root {...props}>
       {children && <AlertDialog.Trigger>{children}</AlertDialog.Trigger>}
 
-      <AlertDialog.Content
+      <AlertDialogContent
         maxWidth="480px"
         onOpenAutoFocus={() => {
           requestAnimationFrame(() => {
@@ -89,7 +93,7 @@ export const DeleteUserDialog = ({
             {getMutationErrorMessage(deleteUser.error)}
           </section>
         </VisuallyHidden>
-      </AlertDialog.Content>
+      </AlertDialogContent>
     </AlertDialog.Root>
   );
 };

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

@@ -13,10 +13,16 @@ import {
 import { type ReactNode, useState } from "react";
 import { useUpdateUserRole } from "./api/user";
 import type { User } from "./api/user";
-import { PrimaryButton, SecondaryButton } from "./elements";
+import {
+  DialogContent,
+  PrimaryButton,
+  SecondaryButton,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+} from "./elements";
 import { getBestName } from "./utils";
 import { useRoles } from "./api/role";
-import { useElement } from "./widgets-context";
 
 interface EditUserDialogProps extends Dialog.RootProps {
   open: boolean;
@@ -34,7 +40,6 @@ export const EditUserDetailsDialog = ({
   const rolesQuery = useRoles();
   const { data: roles } = rolesQuery;
   const updateUser = useUpdateUserRole();
-  const dropdownProps = useElement("dropdown");
   const [selectedRole, setSelectedRole] = useState(
     user.roles[0]?.slug || "Unknown",
   );
@@ -62,7 +67,7 @@ export const EditUserDetailsDialog = ({
   return (
     <Dialog.Root {...props}>
       {children && <Dialog.Trigger>{children}</Dialog.Trigger>}
-      <Dialog.Content maxWidth="480px">
+      <DialogContent maxWidth="480px">
         <Dialog.Title>Edit role</Dialog.Title>
         <Dialog.Description>
           Select the role to assign to <Text weight="bold">{displayName}</Text>
@@ -82,7 +87,7 @@ export const EditUserDetailsDialog = ({
               disabled={rolesQuery.isLoading || showSingleRoleInfo}
             >
               <Skeleton loading={rolesQuery.isLoading}>
-                <Select.Trigger
+                <SelectTrigger
                   id={selectId}
                   placeholder="Assign a role"
                   aria-labelledby={selectLabelId}
@@ -95,13 +100,13 @@ export const EditUserDetailsDialog = ({
                 />
               </Skeleton>
 
-              <Select.Content {...dropdownProps}>
+              <SelectContent>
                 {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>
 
             {showErrorMessage ? (
@@ -148,7 +153,7 @@ export const EditUserDetailsDialog = ({
             {getMutationErrorMessage(updateUser.error)}
           </section>
         </VisuallyHidden>
-      </Dialog.Content>
+      </DialogContent>
     </Dialog.Root>
   );
 };