@makolabs/ripple 1.2.3 → 1.2.8

package/dist/user-management/UserViewModal.svelte

@@ -0,0 +1,276 @@
+<script lang="ts">
+	import { Modal, Button, TabGroup, TabContent, type TabItem, cn } from '../index.js';
+	import type { UserViewModalProps } from './user-management.js';
+	import { getUserDisplayName } from './user-management.js';
+	import { SvelteDate } from 'svelte/reactivity';
+
+	let {
+		open = $bindable(),
+		user = $bindable(),
+		onEdit,
+		onClose,
+		class: className
+	}: UserViewModalProps = $props();
+
+	// Local state
+	let activeTab = $state<'profile' | 'permissions'>('profile');
+
+	// Define tabs
+	const tabs: TabItem[] = [
+		{
+			value: 'profile',
+			label: 'Profile',
+			disabled: false
+		},
+		{
+			value: 'permissions',
+			label: 'Permissions',
+			disabled: false
+		}
+	];
+
+	function handleClose() {
+		open = false;
+		activeTab = 'profile';
+		if (onClose) onClose();
+	}
+
+	function handleEdit() {
+		if (onEdit && user) {
+			onEdit(user);
+		}
+	}
+
+	function getModalTitle() {
+		return getUserDisplayName(user);
+	}
+
+	function formatDate(timestamp?: number) {
+		if (!timestamp) return 'Never';
+		return new SvelteDate(timestamp).toLocaleDateString('en-US', {
+			year: 'numeric',
+			month: 'short',
+			day: 'numeric'
+		});
+	}
+</script>
+
+{#snippet MailIcon()}
+	<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+		<path
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width="2"
+			d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+		></path>
+	</svg>
+{/snippet}
+
+{#snippet PhoneIcon()}
+	<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+		<path
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width="2"
+			d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
+		></path>
+	</svg>
+{/snippet}
+
+{#snippet ProfileIcon()}
+	<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+		<path
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width="2"
+			d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+		></path>
+	</svg>
+{/snippet}
+
+{#snippet ShieldIcon()}
+	<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+		<path
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width="2"
+			d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
+		></path>
+	</svg>
+{/snippet}
+
+<Modal
+	{open}
+	onclose={handleClose}
+	title={getModalTitle()}
+	contentclass="max-w-4xl"
+	bodyclass="flex flex-col min-h-[500px]"
+	class={cn(className)}
+>
+	<div class="flex h-full grow flex-col space-y-6">
+		<!-- Tab Navigation -->
+		<TabGroup {tabs} bind:selected={activeTab}>
+			<TabContent value="profile" persisted>
+				<!-- Profile Information -->
+				<div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
+					<!-- Basic Info -->
+					<div class="space-y-4">
+						<div class="rounded-lg bg-gray-50 p-4">
+							<div class="mb-3 flex items-center gap-2">
+								<span class="inline-flex">{@render ProfileIcon()}</span>
+								<h4 class="text-sm font-medium text-gray-700">Basic Information</h4>
+							</div>
+							<div class="space-y-3">
+								<div>
+									<span class="text-xs text-gray-500">Name</span>
+									<p class="text-sm font-medium">
+										{getUserDisplayName(user)}
+									</p>
+								</div>
+								<div>
+									<span class="text-xs text-gray-500">User ID</span>
+									<p class="font-mono text-xs break-all">{user?.id || 'N/A'}</p>
+								</div>
+								{#if user?.role}
+									<div>
+										<span class="text-xs text-gray-500">Role</span>
+										<p class="text-sm">
+											<span
+												class="inline-flex items-center rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-800"
+											>
+												{user.role}
+											</span>
+										</p>
+									</div>
+								{/if}
+							</div>
+						</div>
+
+						<!-- Contact Info -->
+						<div class="rounded-lg bg-gray-50 p-4">
+							<h4 class="mb-3 text-sm font-medium text-gray-700">Contact</h4>
+							<div class="space-y-2">
+								{#if user?.email_addresses?.[0]?.email_address}
+									<div class="flex items-center gap-2">
+										<span class="inline-flex text-gray-400">{@render MailIcon()}</span>
+										<span class="text-sm">{user.email_addresses[0].email_address}</span>
+									</div>
+								{/if}
+								{#if user?.phone_numbers?.[0]?.phone_number}
+									<div class="flex items-center gap-2">
+										<span class="inline-flex text-gray-400">{@render PhoneIcon()}</span>
+										<span class="text-sm">{user.phone_numbers[0].phone_number}</span>
+									</div>
+								{/if}
+							</div>
+						</div>
+					</div>
+
+					<!-- Account Status & Metadata -->
+					<div class="space-y-4">
+						<div class="rounded-lg bg-gray-50 p-4">
+							<h4 class="mb-3 text-sm font-medium text-gray-700">Account Status</h4>
+							<div class="space-y-3">
+								<div>
+									<span class="text-xs text-gray-500">Status</span>
+									<p class="text-sm">
+										<span
+											class="inline-flex items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800"
+										>
+											Active
+										</span>
+									</p>
+								</div>
+								<div>
+									<span class="text-xs text-gray-500">Created</span>
+									<p class="text-sm">{formatDate(user?.created_at)}</p>
+								</div>
+								<div>
+									<span class="text-xs text-gray-500">Last Sign In</span>
+									<p class="text-sm">{formatDate(user?.last_sign_in_at)}</p>
+								</div>
+							</div>
+						</div>
+
+						<!-- Additional Metadata -->
+						{#if user?.private_metadata && Object.keys(user.private_metadata).length > 0}
+							<div class="rounded-lg bg-gray-50 p-4">
+								<h4 class="mb-3 text-sm font-medium text-gray-700">Additional Information</h4>
+								<div class="space-y-2">
+									{#each Object.entries(user.private_metadata ?? {}) as [key, value] (key + value)}
+										<div>
+											<span class="text-xs text-gray-500">{key}</span>
+											<p class="font-mono text-sm text-gray-700">
+												{typeof value === 'string' && value.length > 50
+													? `${value.slice(0, 50)}...`
+													: String(value)}
+											</p>
+										</div>
+									{/each}
+								</div>
+							</div>
+						{/if}
+					</div>
+				</div>
+			</TabContent>
+
+			<TabContent value="permissions" persisted>
+				<!-- Permissions Information -->
+				<div class="space-y-6">
+					<!-- Current Role -->
+					{#if user?.role}
+						<div class="rounded-lg bg-gray-50 p-4">
+							<div class="mb-3 flex items-center gap-2">
+								<span class="inline-flex text-blue-600">{@render ShieldIcon()}</span>
+								<h4 class="text-sm font-medium text-gray-700">Current Role</h4>
+							</div>
+							<div class="flex items-center justify-between">
+								<div>
+									<p class="text-sm font-medium text-blue-600">{user.role}</p>
+									{#if user.permissions}
+										<p class="mt-1 text-xs text-gray-600">
+											{user.permissions.length} permission{user.permissions.length === 1 ? '' : 's'}
+										</p>
+									{/if}
+								</div>
+							</div>
+						</div>
+					{/if}
+
+					<!-- Permissions List -->
+					<div>
+						<h4 class="mb-3 text-sm font-medium text-gray-700">Assigned Permissions</h4>
+						{#if user?.permissions && user.permissions.length > 0}
+							<div class="max-h-80 overflow-y-auto rounded-lg border border-gray-200 bg-white">
+								<div class="divide-y divide-gray-100">
+									{#each user.permissions as permission (permission)}
+										<div class="px-4 py-3">
+											<div class="flex items-center gap-2 text-sm">
+												<div class="h-1.5 w-1.5 shrink-0 rounded-full bg-green-500"></div>
+												<span class="font-mono text-gray-700">{permission}</span>
+											</div>
+										</div>
+									{/each}
+								</div>
+							</div>
+						{:else}
+							<div class="rounded-lg bg-gray-50 p-6 text-center">
+								<p class="text-sm text-gray-500">No permissions assigned</p>
+							</div>
+						{/if}
+					</div>
+				</div>
+			</TabContent>
+		</TabGroup>
+	</div>
+
+	<!-- View Mode Actions -->
+	{#snippet footer()}
+		<div class="flex justify-end gap-3">
+			<Button variant="outline" onclick={handleClose}>Close</Button>
+			{#if onEdit}
+				<Button color="primary" onclick={handleEdit}>Edit User</Button>
+			{/if}
+		</div>
+	{/snippet}
+</Modal>

package/dist/user-management/UserViewModal.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { UserViewModalProps } from './user-management.js';
+declare const UserViewModal: import("svelte").Component<UserViewModalProps, {}, "open" | "user">;
+type UserViewModal = ReturnType<typeof UserViewModal>;
+export default UserViewModal;

package/dist/user-management/UserViewModalTestWrapper.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import UserViewModal from './UserViewModal.svelte';
+	import type { UserViewModalProps } from './user-management.js';
+
+	interface Props extends UserViewModalProps {
+		testId?: string;
+	}
+
+	let {
+		open = $bindable(),
+		user = $bindable(),
+		permissions = [],
+		onEdit,
+		onClose = () => {},
+		testId,
+		...rest
+	}: Props = $props();
+</script>
+
+<div data-testid={testId}>
+	<UserViewModal bind:open bind:user {permissions} {onEdit} {onClose} {...rest} />
+</div>

package/dist/user-management/UserViewModalTestWrapper.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { UserViewModalProps } from './user-management.js';
+interface Props extends UserViewModalProps {
+    testId?: string;
+}
+declare const UserViewModalTestWrapper: import("svelte").Component<Props, {}, "open" | "user">;
+type UserViewModalTestWrapper = ReturnType<typeof UserViewModalTestWrapper>;
+export default UserViewModalTestWrapper;

package/dist/user-management/adapters/UserManagement.remote.d.ts

@@ -0,0 +1,68 @@
+/**
+ * User Management Remote Functions
+ *
+ * Complete implementation template for user management remote functions.
+ * This follows the same pattern as users.remote.ts and is designed to be
+ * used as-is in SvelteKit applications like sharkfin-frontend.
+ *
+ * Configuration:
+ * - Set environment variables: CLERK_SECRET_KEY, ADMIN_API_KEY, PRIVATE_BASE_AUTH_URL, ALLOWED_ORG_ID
+ * - Configure CLIENT_ID via ADMIN_CONFIG or env variable (CLIENT_ID)
+ * - Adjust permission prefix filter via PERMISSION_PREFIX env variable
+ *
+ * @see https://svelte.dev/docs/kit/remote-functions
+ *
+ * Usage in your app:
+ * ```svelte
+ * <script>
+ *   import { UserManagement } from '@makolabs/ripple';
+ *   import * as adapter from '../UserManagement.remote';
+ * </script>
+ *
+ * <UserManagement adapter={adapter} />
+ * ```
+ */
+import type { User } from '../user-management.js';
+import type { GetUsersOptions, GetUsersResult } from './types.js';
+/**
+ * Get users with pagination and sorting
+ *
+ * Transforms adapter options to Clerk API format
+ */
+export declare const getUsers: import("@sveltejs/kit").RemoteQueryFunction<GetUsersOptions, GetUsersResult>;
+/**
+ * Create a new user
+ *
+ * Creates user in Clerk, optionally adds to organization, and creates admin key with permissions
+ */
+export declare const createUser: import("@sveltejs/kit").RemoteCommand<Partial<User>, Promise<User>>;
+/**
+ * Update an existing user
+ */
+export declare const updateUser: import("@sveltejs/kit").RemoteCommand<{
+    userId: string;
+    userData: Partial<User>;
+}, Promise<User>>;
+/**
+ * Delete a single user
+ */
+export declare const deleteUser: import("@sveltejs/kit").RemoteCommand<string, Promise<void>>;
+/**
+ * Delete multiple users
+ */
+export declare const deleteUsers: import("@sveltejs/kit").RemoteCommand<string[], Promise<void>>;
+/**
+ * Get permissions for a specific user
+ *
+ * Uses 'sub' (userId) parameter in admin API calls
+ */
+export declare const getUserPermissions: import("@sveltejs/kit").RemoteQueryFunction<string, string[]>;
+/**
+ * Update permissions for a specific user
+ *
+ * Uses 'sub' (userId) parameter in admin API calls
+ */
+export declare const updateUserPermissions: import("@sveltejs/kit").RemoteCommand<{
+    userId: string;
+    permissions: string[];
+}, Promise<void>>;