@workos-inc/widgets 1.1.5 → 1.2.0

package/src/lib/utils.ts

@@ -1,131 +0,0 @@
-import { Member } from "../api";
-import { UAParser } from "ua-parser-js";
-import { WIDGETS_CLASS_NAMESPACE } from "./constants";
-
-export const canUseDOM = !!(
-  typeof window !== "undefined" &&
-  window.document &&
-  window.document.createElement
-);
-
-export function getBestName({
-  firstName,
-  lastName,
-}: Pick<Member, "firstName" | "lastName">) {
-  return [firstName, lastName].filter(Boolean).join(" ") || null;
-}
-
-export function getComparativeReadableDate(
-  now: Date,
-  then: Date,
-  options?: { timeZone?: string },
-): string {
-  const timeSince = now.getTime() - then.getTime();
-
-  // Has it been less than a minute?
-  if (timeSince < 60_000) {
-    return "Just now";
-  }
-
-  // Has it been less than an hour?
-  if (timeSince < 3_600_000) {
-    const timePassed = Math.floor(timeSince / 60_000);
-    return timePassed === 1 ? "1 minute ago" : `${timePassed} minutes ago`;
-  }
-
-  // Has it been less than a day?
-  if (timeSince < 86_400_000) {
-    const timePassed = Math.floor(timeSince / 3_600_000);
-    return timePassed === 1 ? "1 hour ago" : `${timePassed} hours ago`;
-  }
-
-  // Has it been less than a week?
-  if (timeSince < 604_800_000) {
-    const timePassed = Math.floor(timeSince / 86_400_000);
-    return timePassed === 1 ? "1 day ago" : `${timePassed} days ago`;
-  }
-
-  // Has it been less than a month?
-  if (timeSince < 2_592_000_000) {
-    const timePassed = Math.floor(timeSince / 604_800_000);
-    return timePassed === 1 ? "1 week ago" : `${timePassed} weeks ago`;
-  }
-
-  // Any later?
-  return then.toLocaleDateString("en-US", {
-    timeZone: options?.timeZone,
-    month: "long",
-    day: "numeric",
-    // omit year if it's the same as the current year
-    year: now.getFullYear() !== then.getFullYear() ? "numeric" : undefined,
-  });
-}
-
-export function isObjectLike(value: unknown): value is Record<string, unknown> {
-  return typeof value === "object" && value !== null;
-}
-
-export function isErrorLike(
-  value: unknown,
-): value is Record<string, unknown> & { message: string } {
-  return isObjectLike(value) && typeof value.message === "string";
-}
-
-export async function parseErrorResponse(
-  response: Response,
-): Promise<{ message: string; status: number }> {
-  try {
-    const json = await response.json();
-    if (!isObjectLike(json) || typeof json.message !== "string") {
-      return {
-        status: response.status,
-        message: response.statusText,
-      };
-    }
-    return {
-      ...json,
-      status: response.status,
-      message: json.message || response.statusText,
-    };
-  } catch {
-    return {
-      status: response.status,
-      message: response.statusText,
-    };
-  }
-}
-
-export function namespaceClassNames(className: string): string;
-export function namespaceClassNames(...classNames: string[]): string;
-export function namespaceClassNames(...classNames: string[]): string {
-  return classNames
-    .map((className) => `${WIDGETS_CLASS_NAMESPACE}-${className}`)
-    .join(" ");
-}
-
-export function parseUserAgent(userAgent?: string | null) {
-  const { browser, device, os } = UAParser(userAgent ?? "");
-
-  const browserName = browser.name?.replace(/^Mobile\s*/i, "");
-  const pretty = [browserName, os.name].filter(Boolean).join(" on ");
-
-  return { pretty, isMobile: device.type === "mobile" };
-}
-
-export function getUserLocation(
-  location?: {
-    cityName: string;
-    countryISOCode: string;
-  } | null,
-  ipAddress?: string | null,
-) {
-  if (location) {
-    return `${location.cityName}, ${location.countryISOCode}`;
-  }
-
-  if (ipAddress) {
-    return ipAddress;
-  }
-
-  return "Unknown location";
-}

package/src/lib/widgets-context.ts

@@ -1,29 +0,0 @@
-import * as React from "react";
-import { DEFAULT_API_HOSTNAME } from "./api/config";
-import type { Elements } from "./elements";
-
-export interface WidgetsContextType {
-  elements: Elements;
-  apiBaseUrl: string;
-}
-
-const WidgetsContext = React.createContext<WidgetsContextType | undefined>(
-  undefined,
-);
-WidgetsContext.displayName = "WidgetsContext";
-export { WidgetsContext };
-
-export function useWorkOsApiUrl() {
-  const context = React.useContext(WidgetsContext);
-  return context?.apiBaseUrl || `https://${DEFAULT_API_HOSTNAME}`;
-}
-
-export function useElement<K extends keyof Elements>(
-  key: K,
-): NonNullable<Elements[K]> {
-  const context = React.useContext(WidgetsContext);
-  if (!context) {
-    throw new Error("useElement must be used within a WidgetsContext provider");
-  }
-  return context.elements[key] || {};
-}

package/src/organization-switcher.client.tsx

@@ -1,81 +0,0 @@
-"use client";
-
-import {
-  ApiProvider,
-  AuthToken,
-  OrganizationInfo,
-  useOrganizations,
-} from "./api";
-import * as React from "react";
-import { ErrorBoundary } from "./lib/error-boundary";
-import { useIsHydrated } from "./lib/use-is-hydrated";
-import {
-  OrganizationSwitcherError,
-  OrganizationSwitcherLoading,
-  OrganizationSwitcherPassthroughProps,
-  OrganizationSwitcher as OrganizationSwitcherPresentational,
-} from "./lib/organization-switcher";
-import { useWorkOsApiUrl } from "./lib/widgets-context";
-import { keepPreviousData } from "@tanstack/react-query";
-
-export interface OrganizationSwitcherProps
-  extends OrganizationSwitcherPassthroughProps {
-  authToken: AuthToken;
-}
-
-export const OrganizationSwitcher: React.FC<OrganizationSwitcherProps> = ({
-  authToken,
-  ...passthroughProps
-}) => {
-  const baseUrl = useWorkOsApiUrl();
-
-  return (
-    <ErrorBoundary FallbackComponent={OrganizationSwitcherError}>
-      <ApiProvider
-        widgetType="organization-switcher"
-        authToken={authToken}
-        baseUrl={baseUrl}
-      >
-        <OrganizationSwitcherContent {...passthroughProps} />
-      </ApiProvider>
-    </ErrorBoundary>
-  );
-};
-
-// Constant reference to avoid unnecessary prop changes
-const emptyOrganizations: OrganizationInfo[] = [];
-
-const OrganizationSwitcherContent = ({
-  variant,
-  ...rest
-}: OrganizationSwitcherPassthroughProps) => {
-  const isHydrated = useIsHydrated();
-  const organizationsQuery = useOrganizations({
-    query: {
-      placeholderData: keepPreviousData,
-    },
-  });
-
-  const organizations = organizationsQuery.data?.data ?? emptyOrganizations;
-
-  if (
-    organizationsQuery.isLoading ||
-    // render loading state on the server to prevent FOUC or hydration mismatch
-    !isHydrated
-  ) {
-    return <OrganizationSwitcherLoading organizations={organizations} />;
-  }
-
-  if (organizationsQuery.isError) {
-    return <OrganizationSwitcherError error={organizationsQuery.error} />;
-  }
-
-  return (
-    <ErrorBoundary FallbackComponent={OrganizationSwitcherError}>
-      <OrganizationSwitcherPresentational
-        organizations={organizations}
-        {...rest}
-      />
-    </ErrorBoundary>
-  );
-};

package/src/user-profile.client.tsx

@@ -1,55 +0,0 @@
-"use client";
-
-import * as React from "react";
-import {
-  UserProfileError,
-  UserProfileLoading,
-  UserProfile as UserProfilePresentational,
-} from "./lib/user-profile";
-import { useIsHydrated } from "./lib/use-is-hydrated";
-import { ApiProvider, AuthToken, useMe } from "./api";
-import { useWorkOsApiUrl } from "./lib/widgets-context";
-import { ErrorBoundary } from "./lib/error-boundary";
-
-export interface UserProfileProps {
-  authToken: AuthToken;
-}
-
-export const UserProfile: React.FC<UserProfileProps> = ({ authToken }) => {
-  const baseUrl = useWorkOsApiUrl();
-
-  return (
-    <ApiProvider
-      widgetType="user-profile"
-      authToken={authToken}
-      baseUrl={baseUrl}
-    >
-      <UserProfileContent />
-    </ApiProvider>
-  );
-};
-
-const UserProfileContent = () => {
-  const isHydrated = useIsHydrated();
-  const meQuery = useMe();
-
-  if (
-    // render loading state on the server to prevent FOUC or hydration mismatch
-    !isHydrated ||
-    meQuery.isLoading
-  ) {
-    return <UserProfileLoading />;
-  }
-
-  if (meQuery.isError) {
-    return <UserProfileError error={meQuery.error} />;
-  }
-
-  const user = meQuery.data!;
-
-  return (
-    <ErrorBoundary FallbackComponent={UserProfileError}>
-      <UserProfilePresentational userData={user} />
-    </ErrorBoundary>
-  );
-};

package/src/user-security.client.tsx

@@ -1,55 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { ApiProvider, AuthToken, useAuthenticationInformation } from "./api";
-import {
-  UserSecurityError,
-  UserSecurityLoading,
-  UserSecurity as UserSecurityPresentational,
-} from "./lib/user-security";
-import { useIsHydrated } from "./lib/use-is-hydrated";
-import { useWorkOsApiUrl } from "./lib/widgets-context";
-import { ErrorBoundary } from "./lib/error-boundary";
-
-export interface UserSecurityProps {
-  authToken: AuthToken;
-}
-
-export const UserSecurity: React.FC<UserSecurityProps> = ({ authToken }) => {
-  const baseUrl = useWorkOsApiUrl();
-
-  return (
-    <ApiProvider
-      widgetType="user-security"
-      authToken={authToken}
-      baseUrl={baseUrl}
-    >
-      <UserSecurityContent />
-    </ApiProvider>
-  );
-};
-
-const UserSecurityContent = () => {
-  const isHydrated = useIsHydrated();
-  const {
-    data: settings,
-    isLoading,
-    isError,
-    isSuccess,
-    error,
-  } = useAuthenticationInformation();
-
-  if (!isHydrated || isLoading) {
-    return <UserSecurityLoading />;
-  }
-
-  if (isError || !isSuccess) {
-    return <UserSecurityError error={error} />;
-  }
-
-  return (
-    <ErrorBoundary FallbackComponent={UserSecurityError}>
-      <UserSecurityPresentational settings={settings.data} />
-    </ErrorBoundary>
-  );
-};

package/src/user-sessions.client.tsx

@@ -1,100 +0,0 @@
-"use client";
-
-import * as React from "react";
-import {
-  UserSessionsError,
-  UserSessionsLoading,
-  UserSessions as UserSessionsPresentational,
-} from "./lib/user-sessions";
-import { useIsHydrated } from "./lib/use-is-hydrated";
-import { ApiProvider, useApi, useSessions } from "./api";
-import { useWorkOsApiUrl } from "./lib/widgets-context";
-import { ErrorBoundary } from "./lib/error-boundary";
-import { useQuery } from "@tanstack/react-query";
-
-type UserSessionsWithoutCurrentSessionIdProps = {
-  authToken: () => Promise<string>;
-};
-
-type UserSessionsWithCurrentSessionIdProps = {
-  authToken: string;
-  currentSessionId: string;
-};
-
-type UserSessionsProps =
-  | UserSessionsWithoutCurrentSessionIdProps
-  | UserSessionsWithCurrentSessionIdProps;
-
-export const UserSessions: React.FC<UserSessionsProps> = (props) => {
-  const baseUrl = useWorkOsApiUrl();
-
-  return (
-    <ApiProvider
-      widgetType="user-sessions"
-      authToken={props.authToken}
-      baseUrl={baseUrl}
-    >
-      <UserSessionsContent
-        currentSessionId={
-          "currentSessionId" in props ? props.currentSessionId : undefined
-        }
-      />
-    </ApiProvider>
-  );
-};
-
-const UserSessionsContent = ({
-  currentSessionId,
-}: {
-  currentSessionId?: string;
-}) => {
-  const isHydrated = useIsHydrated();
-  const sessionsQuery = useSessions();
-  const currentSessionIdQuery = useCurrentSessionIdQuery(currentSessionId);
-
-  if (
-    !isHydrated ||
-    sessionsQuery.isLoading ||
-    currentSessionIdQuery.isLoading
-  ) {
-    return <UserSessionsLoading />;
-  }
-
-  if (sessionsQuery.isError || currentSessionIdQuery.isError) {
-    return (
-      <UserSessionsError
-        error={sessionsQuery.error || currentSessionIdQuery.error}
-      />
-    );
-  }
-
-  return (
-    <ErrorBoundary FallbackComponent={UserSessionsError}>
-      <UserSessionsPresentational
-        sessionsData={sessionsQuery.data?.data || []}
-        currentSessionId={currentSessionIdQuery.data ?? ""}
-      />
-    </ErrorBoundary>
-  );
-};
-
-function useCurrentSessionIdQuery(currentSessionId?: string) {
-  const { authToken } = useApi();
-
-  return useQuery({
-    queryKey: ["authToken"],
-    queryFn: async () => {
-      if (currentSessionId) {
-        return currentSessionId;
-      }
-
-      const res = await Promise.resolve(authToken);
-      const claims = getClaims(res);
-      return claims.sid;
-    },
-  });
-}
-
-function getClaims(accessToken: string) {
-  return JSON.parse(atob(accessToken.split(".")[1])) as { sid: string };
-}

package/src/users-management.client.tsx

@@ -1,73 +0,0 @@
-"use client";
-
-import { ApiProvider, AuthToken, useRoles } from "./api";
-import * as React from "react";
-import { useUsers } from "./lib/api/user";
-import { useIsHydrated } from "./lib/use-is-hydrated";
-import {
-  UsersManagementError,
-  UsersManagementLoading,
-  UsersManagement as UsersManagementPresentational,
-} from "./lib/users-management";
-import { UsersManagementContextProvider } from "./lib/users-management-context";
-import { ErrorBoundary } from "./lib/error-boundary";
-import { useWorkOsApiUrl } from "./lib/widgets-context";
-
-export interface UsersManagementProps {
-  authToken: AuthToken;
-}
-
-export const UsersManagement: React.FC<UsersManagementProps> = ({
-  authToken,
-}) => {
-  const baseUrl = useWorkOsApiUrl();
-
-  return (
-    <ErrorBoundary FallbackComponent={UsersManagementError}>
-      <ApiProvider
-        widgetType="user-management"
-        authToken={authToken}
-        baseUrl={baseUrl}
-      >
-        <UsersManagementContextProvider>
-          <UsersManagementContent />
-        </UsersManagementContextProvider>
-      </ApiProvider>
-    </ErrorBoundary>
-  );
-};
-
-const UsersManagementContent = () => {
-  const isHydrated = useIsHydrated();
-  const rolesQuery = useRoles({
-    query: { initialData: [] },
-  });
-  const usersQuery = useUsers();
-
-  if (
-    usersQuery.isLoading ||
-    rolesQuery.isLoading ||
-    usersQuery.isPending ||
-    // render loading state on the server to prevent FOUC or hydration mismatch
-    !isHydrated
-  ) {
-    return <UsersManagementLoading />;
-  }
-
-  if (usersQuery.isError || rolesQuery.isError) {
-    return (
-      <UsersManagementError error={usersQuery.error || rolesQuery.isError} />
-    );
-  }
-
-  return (
-    <ErrorBoundary FallbackComponent={UsersManagementError}>
-      <UsersManagementPresentational
-        userData={usersQuery.data}
-        rolesData={rolesQuery.data}
-        isPending={usersQuery.isFetching}
-        disableRolesFilter={rolesQuery.isPending || rolesQuery.isFetching}
-      />
-    </ErrorBoundary>
-  );
-};

package/src/workos-widgets.client.tsx

@@ -1,75 +0,0 @@
-"use client";
-
-import { Theme as RadixThemes } from "@radix-ui/themes";
-import type { GetPropDefTypes, themePropDefs } from "@radix-ui/themes/props";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import cx from "clsx";
-import * as React from "react";
-import { namespaceClassNames } from "./lib/utils";
-import { DEFAULT_API_HOSTNAME } from "./lib/api/config";
-import type { Elements } from "./lib/elements";
-import { WidgetsContext } from "./lib/widgets-context";
-
-const queryClient = new QueryClient();
-
-export interface WorkOsWidgetsProps {
-  elements?: Elements;
-  theme?: Omit<GetPropDefTypes<typeof themePropDefs>, "asChild"> & {
-    fontFamily?: string;
-  };
-  style?: React.CSSProperties;
-  className?: string;
-  children: React.ReactNode;
-  apiHostname?: string;
-  port?: number | null;
-  https?: boolean;
-}
-
-export const WorkOsWidgets: React.FC<WorkOsWidgetsProps> = ({
-  elements = {},
-  className,
-  theme: { fontFamily, ...radixThemesProps } = {},
-  style = {},
-  children,
-  apiHostname = DEFAULT_API_HOSTNAME,
-  port = null,
-  https = true,
-}) => {
-  const customStyle = (
-    fontFamily
-      ? {
-          "--default-font-family": fontFamily,
-          ...style,
-        }
-      : style
-  ) as React.CSSProperties;
-
-  const apiBaseUrl = React.useMemo(() => {
-    try {
-      const url = new URL(
-        "/",
-        `${https ? "https" : "http"}://${apiHostname}${port ? `:${port}` : ""}`,
-      );
-      return url.toString().slice(0, -1);
-    } catch {
-      console.error(
-        "Failed to validate the WorkOS API URL. Check to ensure that valid `apiHostname` and `port` props are passed to WorkOsWidgets",
-      );
-      return `https://${DEFAULT_API_HOSTNAME}`;
-    }
-  }, [apiHostname, https, port]);
-
-  return (
-    <QueryClientProvider client={queryClient}>
-      <RadixThemes
-        {...radixThemesProps}
-        style={customStyle}
-        className={cx(namespaceClassNames("root"), className)}
-      >
-        <WidgetsContext.Provider value={{ elements, apiBaseUrl }}>
-          {children}
-        </WidgetsContext.Provider>
-      </RadixThemes>
-    </QueryClientProvider>
-  );
-};