@workos-inc/widgets 0.0.0-pre.0

package/dist/esm/users-management.client.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"users-management.client.js","sourceRoot":"","sources":["../../src/users-management.client.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,eAAe,IAAI,6BAA6B,EAAE,MAAM,wBAAwB,CAAC;AAC1F,OAAO,EACL,8BAA8B,GAE/B,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAEL,uBAAuB,GACxB,MAAM,8BAA8B,CAAC;AAMtC,MAAM,YAAY,GAAyB;IACzC,UAAU,EAAE,IAAI;IAChB,IAAI,EAAE,IAAI;IACV,WAAW,EAAE,IAAI;CAClB,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAmC,CAAC,EAC9D,SAAS,GAAG,IAAI,GACjB,EAAE,EAAE;IACH,MAAM,UAAU,GAAG,aAAa,EAAE,CAAC;IAEnC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,uBAAuB,CAAC,YAAY,CAAC,CAAC;IAChE,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAC3B,GAAG,EAAE,CAAC,CAAC;QACL,SAAS;QACT,KAAK;QACL,QAAQ;KACT,CAAC,EACF,CAAC,SAAS,EAAE,KAAK,EAAE,QAAQ,CAAC,CAC7B,CAAC;IAEF,MAAM,UAAU,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC;IACrC,MAAM,UAAU,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC;IACrC,MAAM,UAAU,GAAG,UAAU,CAAC,UAAU,IAAI,UAAU,CAAC,UAAU,CAAC;IAClE,MAAM,SAAS,GAAG,UAAU,CAAC,SAAS,IAAI,UAAU,CAAC,SAAS,CAAC;IAC/D,MAAM,SAAS,GACb,UAAU,CAAC,iBAAiB,IAAI,UAAU,CAAC,iBAAiB,CAAC;IAE/D,OAAO,CACL,KAAC,8BAA8B,IAAC,KAAK,EAAE,OAAO,YAC5C,KAAC,6BAA6B,IAC5B,QAAQ,EAAE,UAAU,CAAC,IAAI,EACzB,SAAS,EAAE,UAAU,CAAC,IAAI,EAC1B,gBAAgB,EAAE,CAAC,UAAU,IAAI,SAAS,CAAC,IAAI,CAAC,UAAU,EAC1D,SAAS,EAAE,SAAS,GACpB,GAC6B,CAClC,CAAC;AACJ,CAAC,CAAC"}

package/dist/esm/workos-widgets.client.d.ts

@@ -0,0 +1,17 @@
+import type { GetPropDefTypes, themePropDefs } from "@radix-ui/themes/props";
+import * as React from "react";
+import type { Elements } from "./lib/elements";
+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 declare const WorkOsWidgets: React.FC<WorkOsWidgetsProps>;
+//# sourceMappingURL=workos-widgets.client.d.ts.map

package/dist/esm/workos-widgets.client.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"workos-widgets.client.d.ts","sourceRoot":"","sources":["../../src/workos-widgets.client.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAE7E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAK/C,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,KAAK,CAAC,EAAE,IAAI,CAAC,eAAe,CAAC,OAAO,aAAa,CAAC,EAAE,SAAS,CAAC,GAAG;QAC/D,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;IACF,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA+CtD,CAAC"}

package/dist/esm/workos-widgets.client.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Theme as RadixThemes } from "@radix-ui/themes";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import * as React from "react";
+import { DEFAULT_API_HOSTNAME } from "./lib/api/config";
+import { WidgetsContext } from "./lib/widgets-context";
+const queryClient = new QueryClient();
+export const WorkOsWidgets = ({ elements = {}, className, theme: { fontFamily, ...radixThemesProps } = {}, style = {}, children, apiHostname = DEFAULT_API_HOSTNAME, port = null, https = true, }) => {
+    const customStyle = (fontFamily
+        ? {
+            "--default-font-family": fontFamily,
+            ...style,
+        }
+        : style);
+    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 (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(RadixThemes, { ...radixThemesProps, style: customStyle, className: className, children: _jsx(WidgetsContext.Provider, { value: { elements, apiBaseUrl }, children: children }) }) }));
+};
+//# sourceMappingURL=workos-widgets.client.js.map

package/dist/esm/workos-widgets.client.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"workos-widgets.client.js","sourceRoot":"","sources":["../../src/workos-widgets.client.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAExD,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACzE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAExD,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD,MAAM,WAAW,GAAG,IAAI,WAAW,EAAE,CAAC;AAetC,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,EAC1D,QAAQ,GAAG,EAAE,EACb,SAAS,EACT,KAAK,EAAE,EAAE,UAAU,EAAE,GAAG,gBAAgB,EAAE,GAAG,EAAE,EAC/C,KAAK,GAAG,EAAE,EACV,QAAQ,EACR,WAAW,GAAG,oBAAoB,EAClC,IAAI,GAAG,IAAI,EACX,KAAK,GAAG,IAAI,GACb,EAAE,EAAE;IACH,MAAM,WAAW,GAAG,CAClB,UAAU;QACR,CAAC,CAAC;YACE,uBAAuB,EAAE,UAAU;YACnC,GAAG,KAAK;SACT;QACH,CAAC,CAAC,KAAK,CACa,CAAC;IAEzB,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACpC,IAAI,CAAC;YACH,MAAM,GAAG,GAAG,IAAI,GAAG,CACjB,GAAG,EACH,GAAG,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,CACxE,CAAC;YACF,OAAO,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;QACrC,CAAC;QAAC,MAAM,CAAC;YACP,OAAO,CAAC,KAAK,CACX,8HAA8H,CAC/H,CAAC;YACF,OAAO,WAAW,oBAAoB,EAAE,CAAC;QAC3C,CAAC;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC;IAE/B,OAAO,CACL,KAAC,mBAAmB,IAAC,MAAM,EAAE,WAAW,YACtC,KAAC,WAAW,OACN,gBAAgB,EACpB,KAAK,EAAE,WAAW,EAClB,SAAS,EAAE,SAAS,YAEpB,KAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,YACrD,QAAQ,GACe,GACd,GACM,CACvB,CAAC;AACJ,CAAC,CAAC"}

package/dist/tsconfig.cjs.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["../src/index.ts","../src/users-management.client.tsx","../src/workos-widgets.client.tsx","../src/lib/constants.ts","../src/lib/delete-user-dialog.tsx","../src/lib/edit-user-details-dialog.tsx","../src/lib/elements.tsx","../src/lib/invite-user-dialog.tsx","../src/lib/label.tsx","../src/lib/pagination.tsx","../src/lib/resend-invite-dialog.tsx","../src/lib/revoke-invite-dialog.tsx","../src/lib/search-provider.tsx","../src/lib/use-is-hydrated.ts","../src/lib/user-actions-dropdown.tsx","../src/lib/users-filter.tsx","../src/lib/users-management-context.tsx","../src/lib/users-management-state.ts","../src/lib/users-management.tsx","../src/lib/users-search.tsx","../src/lib/utils.ts","../src/lib/widgets-context.ts","../src/lib/api/config.ts","../src/lib/api/role.ts","../src/lib/api/user.ts"],"version":"5.6.3"}

package/dist/tsconfig.esm.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["../src/index.ts","../src/users-management.client.tsx","../src/workos-widgets.client.tsx","../src/lib/constants.ts","../src/lib/delete-user-dialog.tsx","../src/lib/edit-user-details-dialog.tsx","../src/lib/elements.tsx","../src/lib/invite-user-dialog.tsx","../src/lib/label.tsx","../src/lib/pagination.tsx","../src/lib/resend-invite-dialog.tsx","../src/lib/revoke-invite-dialog.tsx","../src/lib/search-provider.tsx","../src/lib/use-is-hydrated.ts","../src/lib/user-actions-dropdown.tsx","../src/lib/users-filter.tsx","../src/lib/users-management-context.tsx","../src/lib/users-management-state.ts","../src/lib/users-management.tsx","../src/lib/users-search.tsx","../src/lib/utils.ts","../src/lib/widgets-context.ts","../src/lib/api/config.ts","../src/lib/api/role.ts","../src/lib/api/user.ts"],"version":"5.6.3"}

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@workos-inc/widgets",
+  "version": "0.0.0-pre.0",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/esm/index.d.ts",
+        "default": "./dist/esm/index.js"
+      },
+      "require": {
+        "types": "./dist/cjs/index.d.ts",
+        "default": "./dist/cjs/index.js"
+      }
+    },
+    "./*": {
+      "import": {
+        "types": "./dist/esm/*.client.d.ts",
+        "default": "./dist/esm/*.client.js"
+      },
+      "require": {
+        "types": "./dist/cjs/*.client.d.ts",
+        "default": "./dist/cjs/*.client.js"
+      }
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "CHANGELOG.md",
+    "LICENSE",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "restricted"
+  },
+  "sideEffects": false,
+  "dependencies": {
+    "@radix-ui/react-compose-refs": "^1.1.0",
+    "@radix-ui/react-icons": "^1.3.1",
+    "@radix-ui/themes": "^3.1.6",
+    "suspend-react": "^0.1.3",
+    "use-debounce": "^10.0.3"
+  },
+  "peerDependencies": {
+    "@tanstack/react-query": "^5.0.0",
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@tanstack/react-query": "^5.59.20",
+    "@types/node": "^20.16.6",
+    "@types/react": "^18.3.9",
+    "@types/react-dom": "^18.3.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "typescript": "^5.6.2",
+    "@repo/typescript-config": "0.0.0"
+  },
+  "scripts": {
+    "build": "npm run clean:dist && tsc -b ./tsconfig.cjs.json ./tsconfig.esm.json",
+    "clean": "rm -rf .turbo && rm -rf node_modules && npm run clean:dist",
+    "clean:dist": "rm -rf dist"
+  },
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/esm/index.d.ts"
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+export {
+  WorkOsWidgets,
+  type WorkOsWidgetsProps,
+} from "./workos-widgets.client";
+export { UsersManagement } from "./users-management.client";

package/src/lib/api/config.ts

@@ -0,0 +1,9 @@
+export const DEFAULT_API_HOSTNAME = "api.workos.com";
+export const API_ENDPOINTS = {
+  USERS: "_widgets/UserManagement/members",
+  USER_ROLES: "_widgets/UserManagement/roles",
+  USER_INVITE: "_widgets/UserManagement/invite-user",
+  USER_INVITES: "_widgets/UserManagement/invites",
+  USER_INVITES_RESEND: (userId: string) =>
+    `_widgets/UserManagement/invites/${userId}/resend`,
+};

package/src/lib/api/role.ts

@@ -0,0 +1,124 @@
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  UsersManagementContextType,
+  useUsersManagementContext,
+} from "../users-management-context";
+import { useWorkOsApiUrl } from "../widgets-context";
+import { API_ENDPOINTS } from "./config";
+import { WIDGETS_API_VERSION } from "../constants";
+
+export interface Role {
+  name: string;
+  slug: string;
+  default: boolean;
+}
+
+export const useRoles = (initialContext?: UsersManagementContextType) => {
+  const { authToken } = useUsersManagementContext(initialContext);
+  const baseUrl = useWorkOsApiUrl();
+  return useQuery({
+    queryKey: ["roles"],
+    queryFn: () => fetchRoles({ authToken, baseUrl }),
+    enabled: !!authToken,
+    initialData: [],
+  });
+};
+
+export const useRole = (
+  slug: string,
+  initialContext?: UsersManagementContextType,
+) => {
+  const { authToken } = useUsersManagementContext(initialContext);
+  const queryClient = useQueryClient();
+  const baseUrl = useWorkOsApiUrl();
+
+  return useQuery({
+    queryKey: ["role", slug],
+    queryFn: () => {
+      if (!authToken) {
+        throw new Error("No auth token provided");
+      }
+      const getRoleOrFetch = async (attempts = 0): Promise<Role> => {
+        if (attempts >= 3) {
+          return fetchRole(slug, { authToken, baseUrl });
+        }
+
+        const roles = queryClient.getQueryData<Role[]>(["roles"]);
+        const role = roles?.find((role) => role.slug === slug);
+        if (role) {
+          return role;
+        }
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+        return getRoleOrFetch(attempts + 1);
+      };
+      return getRoleOrFetch();
+    },
+    enabled: !!authToken,
+    staleTime: Number.POSITIVE_INFINITY,
+  });
+};
+
+/**
+ * Fetch functions
+ */
+const fetchRoles = async ({
+  authToken,
+  baseUrl,
+}: {
+  authToken: string | null;
+  baseUrl: string;
+}) => {
+  if (!authToken) {
+    throw new Error("No auth token provided");
+  }
+  const url = new URL(`${baseUrl}/${API_ENDPOINTS.USER_ROLES}`);
+  const response = await fetch(url, {
+    cache: "no-store",
+    headers: getAuthHeaders(authToken),
+  }).catch((error) => {
+    console.error(error);
+    // TODO: handle fetch errors
+    throw new Error("Failed to fetch roles");
+  });
+
+  if (!response.ok) {
+    // TODO: handle this case
+    throw new Error("Failed to fetch roles");
+  }
+  const data = await response.json();
+  return data as Promise<Role[]>;
+};
+
+const fetchRole = async (
+  slug: string,
+  {
+    authToken,
+    baseUrl,
+  }: {
+    authToken: string;
+    baseUrl: string;
+  },
+) => {
+  const url = new URL(`${baseUrl}/${API_ENDPOINTS.USER_ROLES}/${slug}`);
+  const response = await fetch(url, {
+    cache: "no-store",
+    headers: getAuthHeaders(authToken),
+  }).catch((error) => {
+    console.error(error);
+    // TODO: handle fetch errors
+    throw new Error("Failed to fetch role");
+  });
+
+  if (!response.ok) {
+    // TODO: handle this case
+    throw new Error("Failed to fetch role");
+  }
+  return response.json() as Promise<Role>;
+};
+
+function getAuthHeaders(authToken: string): HeadersInit {
+  return {
+    Authorization: `Bearer ${authToken}`,
+    "WorkOS-Widgets-Version": WIDGETS_API_VERSION,
+  };
+}