@tidecloak/ui-framework 0.0.1

package/src/components/pages/connected/UsersPage.tsx

@@ -0,0 +1,237 @@
+/**
+ * UsersPage - Pre-made user management page
+ *
+ * Uses AdminAPI from @tidecloak/js for data fetching.
+ * Just drop it in and it works.
+ */
+
+import { AdminAPI as DefaultAdminAPI } from "@tidecloak/js";
+import { UsersPageBase, type UsersPageBaseProps, type UserItem } from "../base";
+import type { AccessMetadataAPI, AccessMetadataRecord } from "./ApprovalsPage";
+
+// Type for the AdminAPI instance
+type AdminAPIInstance = {
+  setRealm?: (realm: string) => void;
+  getUsers: () => Promise<any>;
+  getRoles: () => Promise<any>;
+  getRole: (roleName: string) => Promise<any>;
+  createUser: (user: any) => Promise<any>;
+  updateUser: (userId: string, user: any) => Promise<any>;
+  deleteUser: (userId: string) => Promise<any>;
+  addUserRoles?: (userId: string, roles: any[]) => Promise<any>;
+  removeUserRoles?: (userId: string, roles: any[]) => Promise<any>;
+  setUserEnabled?: (userId: string, enabled: boolean) => Promise<any>;
+  getTideLinkUrl?: (userId: string, redirectUri: string, lifespan?: number) => Promise<string>;
+};
+
+export interface ChangeSetInfo {
+  changeSetId: string;
+  changeSetType: string;
+  actionType: string;
+  username: string;
+  userId: string;
+  roles: string[];
+  timestamp: number;
+}
+
+export interface UsersPageProps<T extends UserItem = UserItem>
+  extends Omit<
+    UsersPageBaseProps<T>,
+    | "fetchUsers"
+    | "fetchRoles"
+    | "onCreate"
+    | "onUpdateProfile"
+    | "onUpdateRoles"
+    | "onDelete"
+    | "onSetEnabled"
+    | "getTideLinkUrl"
+  > {
+  /** AdminAPI instance */
+  adminAPI?: AdminAPIInstance;
+  /** Realm name */
+  realm?: string;
+  /** Redirect URI for Tide link */
+  tideLinkRedirectUri?: string;
+  /** Access metadata adapter (saves metadata when role changes create change sets) */
+  accessMetadataAPI?: AccessMetadataAPI;
+  /** Callback when a change set is created */
+  onChangeSetCreated?: (info: ChangeSetInfo) => void | Promise<void>;
+  /** Override fetch users */
+  fetchUsers?: UsersPageBaseProps<T>["fetchUsers"];
+  /** Override create */
+  onCreate?: UsersPageBaseProps<T>["onCreate"];
+  /** Override delete */
+  onDelete?: UsersPageBaseProps<T>["onDelete"];
+  /** Override getTideLinkUrl */
+  getTideLinkUrl?: UsersPageBaseProps<T>["getTideLinkUrl"];
+}
+
+export function UsersPage<T extends UserItem = UserItem>({
+  adminAPI: adminAPIProp,
+  realm,
+  tideLinkRedirectUri,
+  accessMetadataAPI,
+  onChangeSetCreated,
+  fetchUsers: fetchUsersProp,
+  onCreate: onCreateProp,
+  onDelete: onDeleteProp,
+  getTideLinkUrl: getTideLinkUrlProp,
+  ...props
+}: UsersPageProps<T>) {
+  // Use provided AdminAPI instance or fall back to default singleton
+  const api = adminAPIProp || DefaultAdminAPI;
+
+  // Set realm if provided
+  if (realm && api.setRealm) {
+    api.setRealm(realm);
+  }
+
+  const fetchUsers =
+    fetchUsersProp ||
+    (async () => {
+      const rawUsers = await api.getUsers();
+      // Transform users to include linked status based on vuid attribute
+      const users = (rawUsers || []).map((u: any) => ({
+        ...u,
+        // User is linked if they have a vuid attribute (Tide account linked)
+        linked: !!(u.attributes?.vuid?.[0]),
+        // Ensure role is an array
+        role: Array.isArray(u.role) ? u.role : u.role ? [u.role] : [],
+      })) as T[];
+      return users;
+    });
+
+  const fetchRoles = async () => {
+    const roles = await api.getRoles();
+    return { roles: roles || [] };
+  };
+
+  const onCreate =
+    onCreateProp ||
+    (async (data) => {
+      await api.createUser(data);
+    });
+
+  const onUpdateProfile = async (data: {
+    id: string;
+    firstName?: string;
+    lastName?: string;
+    email?: string;
+  }) => {
+    await api.updateUser(data.id, {
+      firstName: data.firstName,
+      lastName: data.lastName,
+      email: data.email,
+    });
+  };
+
+  // Helper to track change set metadata
+  const trackChangeSet = async (
+    response: any,
+    userId: string,
+    username: string,
+    roles: string[],
+    actionType: string
+  ) => {
+    // Extract changeSetId from response (AdminAPI returns this)
+    const changeSetId = response?.changeSetId || response?.draftRecordId || response?.id;
+    if (!changeSetId) {
+      return;
+    }
+
+    const timestamp = Date.now();
+    const info: ChangeSetInfo = {
+      changeSetId,
+      changeSetType: response?.changeSetType || "USER",
+      actionType,
+      username,
+      userId,
+      roles,
+      timestamp,
+    };
+
+    // Call the callback if provided
+    if (onChangeSetCreated) {
+      await onChangeSetCreated(info);
+    }
+
+    // Save to metadata API if provided
+    if (accessMetadataAPI) {
+      const record: AccessMetadataRecord = {
+        changeSetId,
+        username,
+        role: roles.join(", "),
+        timestamp,
+        actionType,
+        changeSetType: info.changeSetType,
+      };
+      await accessMetadataAPI.saveMetadata(record);
+    }
+  };
+
+  const onUpdateRoles = async (data: {
+    id: string;
+    username?: string;
+    rolesToAdd?: string[];
+    rolesToRemove?: string[];
+  }) => {
+    // Get username for metadata tracking
+    const username = data.username || data.id;
+
+    if (data.rolesToAdd?.length && api.addUserRoles) {
+      // Fetch role details first
+      const roles = await Promise.all(
+        data.rolesToAdd.map((name) => api.getRole(name))
+      );
+      const response = await api.addUserRoles(data.id, roles);
+      // Track the change set
+      await trackChangeSet(response, data.id, username, data.rolesToAdd, "ADD");
+    }
+    if (data.rolesToRemove?.length && api.removeUserRoles) {
+      const roles = await Promise.all(
+        data.rolesToRemove.map((name) => api.getRole(name))
+      );
+      const response = await api.removeUserRoles(data.id, roles);
+      // Track the change set
+      await trackChangeSet(response, data.id, username, data.rolesToRemove, "REMOVE");
+    }
+  };
+
+  const onDelete =
+    onDeleteProp ||
+    (async (userId: string) => {
+      await api.deleteUser(userId);
+    });
+
+  const onSetEnabled = api.setUserEnabled
+    ? async (userId: string, enabled: boolean) => {
+        await api.setUserEnabled!(userId, enabled);
+      }
+    : undefined;
+
+  // Get Tide link URL for user invitation
+  const getTideLinkUrl =
+    getTideLinkUrlProp ||
+    (api.getTideLinkUrl
+      ? async (userId: string) => {
+          // Default redirect to current origin if not specified
+          const redirectUri = tideLinkRedirectUri || (typeof window !== "undefined" ? window.location.origin : "");
+          const linkUrl = await api.getTideLinkUrl!(userId, redirectUri);
+          return { linkUrl };
+        }
+      : undefined);
+
+  return (
+    <UsersPageBase<T>
+      fetchUsers={fetchUsers}
+      fetchRoles={fetchRoles}
+      onCreate={onCreate}
+      onUpdateProfile={onUpdateProfile}
+      onUpdateRoles={onUpdateRoles}
+      onDelete={onDelete}
+      onSetEnabled={onSetEnabled}
+      getTideLinkUrl={getTideLinkUrl}
+      {...props}
+    />
+  );
+}

package/src/components/pages/connected/index.ts

@@ -0,0 +1,36 @@
+// Pre-made page components - uses AdminAPI from @tidecloak/js
+
+export {
+  RolesPage,
+  createLocalStoragePolicyAPI,
+  type RolesPageProps,
+  type PolicyAPI,
+  type RolePolicy,
+} from "./RolesPage";
+export { UsersPage, type UsersPageProps, type ChangeSetInfo } from "./UsersPage";
+export {
+  TemplatesPage,
+  createLocalStorageTemplateAPI,
+  type TemplatesPageProps,
+  type TemplateAPI,
+} from "./TemplatesPage";
+export {
+  LogsPage,
+  createLocalStoragePolicyLogsAPI,
+  type LogsPageProps,
+  type PolicyLogsAPI,
+  type PolicyLogData,
+} from "./LogsPage";
+export {
+  ApprovalsPage,
+  createLocalStoragePolicyApprovalsAPI,
+  createLocalStorageAccessMetadataAPI,
+  type ApprovalsPageProps,
+  type PolicyApprovalsAPI,
+  type PolicyApprovalData,
+  type AccessMetadataAPI,
+  type AccessMetadataRecord,
+  type TideApprovalContext,
+  type TideApprovalResult,
+  type EnclaveApprovalTabConfig,
+} from "./ApprovalsPage";

package/src/components/pages/index.ts

@@ -0,0 +1,5 @@
+// Page components - headless/composable UI for custom backends
+export * from "./base";
+
+// Connected pages - pre-made pages that use @tidecloak/js AdminAPI
+export * from "./connected";

package/src/components/tabs/TabsView.tsx

@@ -0,0 +1,300 @@
+import React from "react";
+import type { TabDef } from "../../types";
+
+export interface TabsViewProps {
+  /** Tab definitions */
+  tabs: TabDef[];
+  /** Currently active tab key */
+  activeTab: string;
+  /** Tab change callback */
+  onTabChange: (tabKey: string) => void;
+  /** Additional class name */
+  className?: string;
+  /** Tab list class name */
+  tabListClassName?: string;
+  /** Custom components */
+  components?: {
+    Tabs?: React.ComponentType<{
+      value: string;
+      onValueChange: (value: string) => void;
+      children: React.ReactNode;
+      className?: string;
+    }>;
+    TabsList?: React.ComponentType<{ children: React.ReactNode; className?: string }>;
+    TabsTrigger?: React.ComponentType<{
+      value: string;
+      disabled?: boolean;
+      className?: string;
+      children: React.ReactNode;
+    }>;
+    TabsContent?: React.ComponentType<{
+      value: string;
+      className?: string;
+      children: React.ReactNode;
+    }>;
+    Badge?: React.ComponentType<{
+      variant?: string;
+      className?: string;
+      children: React.ReactNode;
+    }>;
+  };
+}
+
+/**
+ * TabsView - Generic tabbed view component
+ *
+ * @example
+ * ```tsx
+ * <TabsView
+ *   tabs={[
+ *     { key: 'access', label: 'Access', badge: 5, content: <AccessTab /> },
+ *     { key: 'roles', label: 'Roles', badge: 2, content: <RolesTab /> },
+ *     { key: 'policies', label: 'Policies', content: <PoliciesTab /> },
+ *   ]}
+ *   activeTab={activeTab}
+ *   onTabChange={setActiveTab}
+ * />
+ * ```
+ */
+export function TabsView({
+  tabs,
+  activeTab,
+  onTabChange,
+  className,
+  tabListClassName,
+  components = {},
+}: TabsViewProps) {
+  // Use custom components or defaults
+  const Tabs = components.Tabs || DefaultTabs;
+  const TabsList = components.TabsList || DefaultTabsList;
+  const TabsTrigger = components.TabsTrigger || DefaultTabsTrigger;
+  const TabsContent = components.TabsContent || DefaultTabsContent;
+  const Badge = components.Badge || DefaultBadge;
+
+  return (
+    <Tabs value={activeTab} onValueChange={onTabChange} className={className}>
+      <TabsList className={tabListClassName}>
+        {tabs.map((tab) => (
+          <TabsTrigger
+            key={tab.key}
+            value={tab.key}
+            disabled={tab.disabled}
+          >
+            <span style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
+              {tab.icon}
+              {tab.label}
+              {tab.badge !== undefined && tab.badge !== null && tab.badge > 0 && (
+                <Badge
+                  variant={tab.badgeVariant || "destructive"}
+                >
+                  {tab.badge > 99 ? "99+" : tab.badge}
+                </Badge>
+              )}
+            </span>
+          </TabsTrigger>
+        ))}
+      </TabsList>
+
+      {tabs.map((tab) => (
+        <TabsContent key={tab.key} value={tab.key}>
+          {tab.content}
+        </TabsContent>
+      ))}
+    </Tabs>
+  );
+}
+
+// Default component implementations
+function DefaultTabs({
+  value,
+  onValueChange,
+  children,
+  className,
+}: {
+  value: string;
+  onValueChange: (value: string) => void;
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div className={className} data-value={value}>
+      {React.Children.map(children, (child) => {
+        if (React.isValidElement(child)) {
+          return React.cloneElement(child as React.ReactElement<any>, {
+            activeTab: value,
+            onTabChange: onValueChange,
+          });
+        }
+        return child;
+      })}
+    </div>
+  );
+}
+
+function DefaultTabsList({
+  children,
+  className,
+  activeTab,
+  onTabChange,
+}: {
+  children: React.ReactNode;
+  className?: string;
+  activeTab?: string;
+  onTabChange?: (value: string) => void;
+}) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "stretch",
+        borderBottom: "1px solid #e5e7eb",
+        backgroundColor: "#f9fafb",
+        padding: "0 1rem",
+        gap: "0",
+      }}
+      className={className}
+    >
+      {React.Children.map(children, (child) => {
+        if (React.isValidElement(child)) {
+          return React.cloneElement(child as React.ReactElement<any>, {
+            activeTab,
+            onTabChange,
+          });
+        }
+        return child;
+      })}
+    </div>
+  );
+}
+
+function DefaultTabsTrigger({
+  value,
+  disabled,
+  className,
+  children,
+  activeTab,
+  onTabChange,
+}: {
+  value: string;
+  disabled?: boolean;
+  className?: string;
+  children: React.ReactNode;
+  activeTab?: string;
+  onTabChange?: (value: string) => void;
+}) {
+  const isActive = activeTab === value;
+
+  const baseStyle: React.CSSProperties = {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    whiteSpace: "nowrap",
+    padding: "0.75rem 1rem",
+    fontSize: "0.875rem",
+    fontWeight: 500,
+    transition: "all 150ms ease",
+    border: "none",
+    borderBottom: isActive ? "2px solid #1f2937" : "2px solid transparent",
+    marginBottom: "-1px",
+    cursor: disabled ? "not-allowed" : "pointer",
+    opacity: disabled ? 0.5 : 1,
+    backgroundColor: isActive ? "#ffffff" : "transparent",
+    color: isActive ? "#111827" : "#6b7280",
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={() => onTabChange?.(value)}
+      disabled={disabled}
+      style={baseStyle}
+      className={className}
+    >
+      {children}
+    </button>
+  );
+}
+
+function DefaultTabsContent({
+  value,
+  className,
+  children,
+  activeTab,
+}: {
+  value: string;
+  className?: string;
+  children: React.ReactNode;
+  activeTab?: string;
+}) {
+  if (activeTab !== value) return null;
+
+  return (
+    <div
+      style={{ marginTop: 0 }}
+      className={className}
+    >
+      {children}
+    </div>
+  );
+}
+
+function DefaultBadge({
+  variant,
+  className,
+  children,
+}: {
+  variant?: string;
+  className?: string;
+  children: React.ReactNode;
+}) {
+  const getVariantStyles = (): React.CSSProperties => {
+    switch (variant) {
+      case "destructive":
+        return {
+          backgroundColor: "#dc2626",
+          color: "#ffffff",
+          borderColor: "transparent",
+        };
+      case "secondary":
+        return {
+          backgroundColor: "#f3f4f6",
+          color: "#374151",
+          borderColor: "transparent",
+        };
+      case "outline":
+        return {
+          backgroundColor: "transparent",
+          color: "#111827",
+          borderColor: "#e5e7eb",
+        };
+      default:
+        return {
+          backgroundColor: "#3b82f6",
+          color: "#ffffff",
+          borderColor: "transparent",
+        };
+    }
+  };
+
+  return (
+    <span
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: "9999px",
+        border: "1px solid",
+        padding: "0 0.5rem",
+        fontSize: "0.75rem",
+        fontWeight: 600,
+        height: "1.25rem",
+        minWidth: "1.25rem",
+        marginLeft: "0.25rem",
+        ...getVariantStyles(),
+      }}
+      className={className}
+    >
+      {children}
+    </span>
+  );
+}

package/src/components/tabs/index.ts

@@ -0,0 +1 @@
+export { TabsView, type TabsViewProps } from "./TabsView";