@workos-inc/widgets 0.0.0-pre.0

package/src/lib/widgets-context.ts

@@ -0,0 +1,29 @@
+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/users-management.client.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import * as React from "react";
+import { useRoles } from "./lib/api/role";
+import { useUsers } from "./lib/api/user";
+import { useIsHydrated } from "./lib/use-is-hydrated";
+import { UsersManagement as UsersManagementPresentational } from "./lib/users-management";
+import {
+  UsersManagementContextProvider,
+  UsersManagementContextType,
+} from "./lib/users-management-context";
+import {
+  UsersManagementState,
+  useUsersManagementState,
+} from "./lib/users-management-state";
+
+export interface UsersManagementProps {
+  authToken: string | null | undefined;
+}
+
+const initialState: UsersManagementState = {
+  pagination: null,
+  role: null,
+  searchQuery: null,
+};
+
+export const UsersManagement: React.FC<UsersManagementProps> = ({
+  authToken = null,
+}) => {
+  const isHydrated = useIsHydrated();
+
+  const [state, dispatch] = useUsersManagementState(initialState);
+  const context = React.useMemo<UsersManagementContextType>(
+    () => ({
+      authToken,
+      state,
+      dispatch,
+    }),
+    [authToken, state, dispatch],
+  );
+
+  const rolesQuery = useRoles(context);
+  const usersQuery = useUsers(context);
+  const isFetching = usersQuery.isFetching || rolesQuery.isFetching;
+  const isLoading = usersQuery.isLoading || rolesQuery.isLoading;
+  const isPending =
+    usersQuery.isPlaceholderData || rolesQuery.isPlaceholderData;
+
+  return (
+    <UsersManagementContextProvider value={context}>
+      <UsersManagementPresentational
+        userData={usersQuery.data}
+        rolesData={rolesQuery.data}
+        isInitialLoading={(isFetching && isLoading) || !isHydrated}
+        isPending={isPending}
+      />
+    </UsersManagementContextProvider>
+  );
+};

package/src/workos-widgets.client.tsx

@@ -0,0 +1,73 @@
+"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 * as React from "react";
+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={className}
+      >
+        <WidgetsContext.Provider value={{ elements, apiBaseUrl }}>
+          {children}
+        </WidgetsContext.Provider>
+      </RadixThemes>
+    </QueryClientProvider>
+  );
+};