@makolabs/ripple 1.2.3 → 1.2.4

package/dist/user-management/UserModal.svelte

@@ -0,0 +1,303 @@
+<script lang="ts">
+	import { Modal, Button, cn } from '../index.js';
+	import type { User, UserModalProps, FormErrors } from './user-management.js';
+	import { getUserDisplayName } from './user-management.js';
+
+	// Icons as simple SVGs
+	let {
+		open = $bindable(),
+		user = $bindable(),
+		roles = [],
+		onSave,
+		onClose,
+		class: className
+	}: UserModalProps = $props();
+
+	// Mode determination
+	const mode = $derived(user ? 'edit' : 'create');
+
+	// Local state
+	let formErrors = $state<FormErrors>({});
+	let saving = $state(false);
+	let formElement = $state<HTMLFormElement | null>(null);
+
+	// Form data
+	let formData = $state<Partial<User>>({
+		first_name: '',
+		last_name: '',
+		username: '',
+		email_addresses: [{ email_address: '' }],
+		phone_numbers: [],
+		role: '',
+		permissions: []
+	});
+
+	// Initialize form data when user changes
+	$effect(() => {
+		if (open && user) {
+			formData = {
+				first_name: user.first_name || '',
+				last_name: user.last_name || '',
+				username: user.username || '',
+				email_addresses: user.email_addresses || [{ email_address: '' }],
+				phone_numbers: user.phone_numbers || [],
+				role: user.role || '',
+				permissions: user.permissions || []
+			};
+		} else if (open && !user) {
+			// Reset for create mode
+			formData = {
+				first_name: '',
+				last_name: '',
+				username: '',
+				email_addresses: [{ email_address: '' }],
+				phone_numbers: [],
+				role: '',
+				permissions: []
+			};
+		}
+		formErrors = {};
+	});
+
+	function handleClose() {
+		open = false;
+		formErrors = {};
+		saving = false;
+		if (onClose) onClose();
+	}
+
+	async function handleSubmit(event: SubmitEvent) {
+		event.preventDefault();
+		formErrors = {};
+
+		// Basic validation
+		if (!formData.first_name?.trim()) {
+			formErrors.first_name = 'First name is required';
+		}
+		if (!formData.last_name?.trim()) {
+			formErrors.last_name = 'Last name is required';
+		}
+		if (!formData.email_addresses?.[0]?.email_address?.trim()) {
+			formErrors.email = 'Email address is required';
+		}
+
+		if (Object.keys(formErrors).length > 0) {
+			return;
+		}
+
+		try {
+			saving = true;
+			const userData: User = {
+				id: user?.id || '',
+				first_name: formData.first_name,
+				last_name: formData.last_name,
+				username: formData.username,
+				email_addresses: formData.email_addresses,
+				phone_numbers: formData.phone_numbers,
+				role: formData.role,
+				permissions: formData.permissions
+			};
+			await onSave(userData, mode);
+			handleClose();
+		} catch (error) {
+			console.error('Error saving user:', error);
+			formErrors.submit = error instanceof Error ? error.message : 'Failed to save user';
+		} finally {
+			saving = false;
+		}
+	}
+
+	function handleRoleChange(roleValue: string) {
+		formData.role = roleValue;
+		const role = roles?.find((r) => r.value === roleValue);
+		if (role) {
+			formData.permissions = [...role.permissions];
+		}
+	}
+
+	function getModalTitle() {
+		if (mode === 'create') return 'Create New User';
+		return `Edit ${getUserDisplayName(user)}`;
+	}
+</script>
+
+<Modal
+	{open}
+	onclose={handleClose}
+	title={getModalTitle()}
+	contentclass="max-w-4xl"
+	class={cn(className)}
+>
+	<form bind:this={formElement} onsubmit={handleSubmit} class="flex gap-6">
+		<!-- Left Column: Profile Information -->
+		<div class="min-w-0 flex-1 space-y-4">
+			<div class="border-b border-gray-200 pb-3">
+				<h3 class="text-lg font-semibold text-gray-900">Profile Information</h3>
+			</div>
+
+			<!-- First Name -->
+			<div>
+				<label for="first-name" class="mb-1 block text-sm font-medium text-gray-700">
+					First Name <span class="text-red-500">*</span>
+				</label>
+				<input
+					id="first-name"
+					type="text"
+					bind:value={formData.first_name}
+					class="w-full rounded-lg border px-3 py-2 focus:border-blue-500 focus:ring-2 focus:ring-blue-500 {formErrors.first_name
+						? 'border-red-300'
+						: 'border-gray-300'}"
+					placeholder="First name"
+					required
+				/>
+				{#if formErrors.first_name}
+					<p class="mt-1 text-xs text-red-500">{formErrors.first_name}</p>
+				{/if}
+			</div>
+
+			<!-- Last Name -->
+			<div>
+				<label for="last-name" class="mb-1 block text-sm font-medium text-gray-700">
+					Last Name <span class="text-red-500">*</span>
+				</label>
+				<input
+					id="last-name"
+					type="text"
+					bind:value={formData.last_name}
+					class="w-full rounded-lg border px-3 py-2 focus:border-blue-500 focus:ring-2 focus:ring-blue-500 {formErrors.last_name
+						? 'border-red-300'
+						: 'border-gray-300'}"
+					placeholder="Last name"
+					required
+				/>
+				{#if formErrors.last_name}
+					<p class="mt-1 text-xs text-red-500">{formErrors.last_name}</p>
+				{/if}
+			</div>
+
+			<!-- Email Address -->
+			<div>
+				<label for="email" class="mb-1 block text-sm font-medium text-gray-700">
+					Email Address <span class="text-red-500">*</span>
+				</label>
+				<input
+					id="email"
+					type="email"
+					bind:value={formData.email_addresses![0].email_address}
+					class="w-full rounded-lg border px-3 py-2 focus:border-blue-500 focus:ring-2 focus:ring-blue-500 {formErrors.email
+						? 'border-red-300'
+						: 'border-gray-300'}"
+					placeholder="user@example.com"
+					required
+				/>
+				{#if formErrors.email}
+					<p class="mt-1 text-xs text-red-500">{formErrors.email}</p>
+				{/if}
+			</div>
+
+			<!-- Username (Optional) -->
+			<div>
+				<label for="username" class="mb-1 block text-sm font-medium text-gray-700">
+					Username
+				</label>
+				<input
+					id="username"
+					type="text"
+					bind:value={formData.username}
+					class="w-full rounded-lg border border-gray-300 px-3 py-2 focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
+					placeholder="username"
+				/>
+			</div>
+		</div>
+
+		<!-- Right Column: Permissions & Role -->
+		<div class="min-w-0 flex-1 space-y-4">
+			<div class="border-b border-gray-200 pb-3">
+				<h3 class="text-lg font-semibold text-gray-900">Role & Permissions</h3>
+			</div>
+
+			<!-- Role Selection -->
+			{#if roles && roles.length > 0}
+				<div>
+					<span class="mb-3 block text-sm font-medium text-gray-700">
+						Select User Role {#if mode === 'create'}<span class="text-red-500">*</span>{/if}
+					</span>
+					<div class="grid grid-cols-1 gap-2">
+						{#each roles as role (role.value)}
+							{@const isSelected = formData.role === role.value}
+							<button
+								type="button"
+								onclick={() => handleRoleChange(role.value)}
+								class="cursor-pointer rounded-lg border-2 p-3 text-left transition-all {isSelected
+									? 'border-blue-500 bg-blue-50'
+									: 'border-gray-200 bg-white hover:border-gray-300'}"
+							>
+								<div class="flex items-center justify-between gap-2">
+									<div class="min-w-0 flex-1">
+										<h4 class="text-sm font-semibold text-gray-900">{role.label}</h4>
+										{#if role.description}
+											<p class="mt-1 line-clamp-2 text-xs text-gray-600">{role.description}</p>
+										{/if}
+									</div>
+									<div
+										class="flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-2 {isSelected
+											? 'border-blue-500 bg-blue-500'
+											: 'border-gray-300 bg-white'}"
+									>
+										{#if isSelected}
+											<div class="h-2 w-2 rounded-full bg-white"></div>
+										{/if}
+									</div>
+								</div>
+							</button>
+						{/each}
+					</div>
+				</div>
+			{/if}
+
+			<!-- Permission Preview -->
+			{#if formData.permissions && formData.permissions.length > 0}
+				<div>
+					<h4 class="mb-2 text-sm font-medium text-gray-700">
+						Permissions ({formData.permissions.length})
+					</h4>
+					<div class="max-h-60 overflow-y-auto rounded-lg bg-gray-50 p-3">
+						<div class="space-y-2">
+							{#each formData.permissions as permission (permission)}
+								<div class="flex items-start gap-2 text-xs">
+									<div class="mt-1 h-1 w-1 shrink-0 rounded-full bg-blue-500"></div>
+									<div class="font-mono text-gray-700">{permission}</div>
+								</div>
+							{/each}
+						</div>
+					</div>
+				</div>
+			{/if}
+		</div>
+	</form>
+
+	<!-- Form Actions -->
+	{#snippet footer()}
+		<div class="flex items-center justify-between gap-4">
+			{#if formErrors.submit}
+				<p class="text-sm text-red-500">{formErrors.submit}</p>
+			{:else}
+				<div></div>
+			{/if}
+			<div class="flex gap-3">
+				<Button variant="outline" onclick={handleClose} disabled={saving} type="button">
+					Cancel
+				</Button>
+				<Button
+					type="button"
+					color="primary"
+					onclick={() => formElement?.requestSubmit()}
+					disabled={saving}
+					isLoading={saving}
+				>
+					{mode === 'create' ? 'Create User' : 'Save Changes'}
+				</Button>
+			</div>
+		</div>
+	{/snippet}
+</Modal>

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

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

package/dist/user-management/UserModalTestWrapper.svelte

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

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

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

package/dist/user-management/UserTable.svelte

@@ -0,0 +1,219 @@
+<script lang="ts">
+	import { Table, type TableColumn } from '../index.js';
+	import type { User, UserTableProps } from './user-management.js';
+	import { getUserDisplayName, getUserInitials } from './user-management.js';
+	import { SvelteDate } from 'svelte/reactivity';
+
+	let {
+		users = [],
+		loading = false,
+		currentPage = 1,
+		pageSize = 10,
+		totalUsers = 0,
+		onPageChange,
+		onPageSizeChange,
+		onSort,
+		onView,
+		onEdit,
+		onDelete,
+		class: className = ''
+	}: UserTableProps = $props();
+
+	// Format date helper
+	function formatDate(timestamp?: number) {
+		if (!timestamp) return 'Never';
+		return new SvelteDate(timestamp).toLocaleDateString('en-US', {
+			year: 'numeric',
+			month: 'short',
+			day: 'numeric',
+			hour: '2-digit',
+			minute: '2-digit'
+		});
+	}
+
+	// Handle table sort
+	function handleTableSort(state: { column: string | null; direction: 'asc' | 'desc' | null }) {
+		if (onSort && state.column && state.direction) {
+			onSort(state);
+		}
+	}
+
+	// Table column definitions with cell snippets
+	const columns: TableColumn<User>[] = [
+		{
+			key: 'user',
+			header: 'User',
+			sortable: true,
+			sortKey: 'first_name',
+			cell: UserCell
+		},
+		{
+			key: 'email_addresses',
+			header: 'Contact',
+			sortable: false,
+			cell: ContactCell
+		},
+		{
+			key: 'last_sign_in_at',
+			header: 'Last Sign In',
+			sortable: true,
+			class: 'hidden lg:table-cell',
+			cell: LastSignInCell
+		},
+		{
+			key: 'created_at',
+			header: 'Created',
+			sortable: true,
+			class: 'hidden xl:table-cell',
+			cell: CreatedCell
+		},
+		{
+			key: 'actions',
+			header: 'Actions',
+			sortable: false,
+			align: 'right',
+			cell: ActionsCell
+		}
+	];
+</script>
+
+{#snippet EyeIcon()}
+	<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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+		></path>
+		<path
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width="2"
+			d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+		></path>
+	</svg>
+{/snippet}
+
+{#snippet EditIcon()}
+	<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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+		></path>
+	</svg>
+{/snippet}
+
+{#snippet TrashIcon()}
+	<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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+		></path>
+	</svg>
+{/snippet}
+
+{#snippet UserCell(user: User)}
+	<div class="flex items-center">
+		<div class="h-8 w-8 shrink-0">
+			{#if user.image_url}
+				<img class="h-8 w-8 rounded-full" src={user.image_url} alt="" />
+			{:else}
+				<div class="flex h-8 w-8 items-center justify-center rounded-full bg-gray-300">
+					<span class="text-xs font-medium text-gray-700">
+						{getUserInitials(user)}
+					</span>
+				</div>
+			{/if}
+		</div>
+		<div class="ml-3">
+			<div class="text-sm font-medium text-gray-900">
+				{getUserDisplayName(user)}
+			</div>
+			<div class="text-xs text-gray-500">
+				{user.username || user.id.slice(0, 8) + '...'}
+			</div>
+		</div>
+	</div>
+{/snippet}
+
+{#snippet ContactCell(user: User)}
+	<div class="text-sm text-gray-900">
+		{#if user.email_addresses?.[0]}
+			<div class="max-w-[180px] truncate text-xs" title={user.email_addresses[0].email_address}>
+				{user.email_addresses[0].email_address}
+			</div>
+		{/if}
+		{#if user.phone_numbers?.[0]}
+			<div class="mt-1 text-xs text-gray-500">
+				{user.phone_numbers[0].phone_number}
+			</div>
+		{/if}
+	</div>
+{/snippet}
+
+{#snippet LastSignInCell(user: User)}
+	<span class="text-xs whitespace-nowrap text-gray-500">
+		{formatDate(user.last_sign_in_at)}
+	</span>
+{/snippet}
+
+{#snippet CreatedCell(user: User)}
+	<span class="text-xs whitespace-nowrap text-gray-500">
+		{formatDate(user.created_at)}
+	</span>
+{/snippet}
+
+{#snippet ActionsCell(user: User)}
+	<div class="flex items-center justify-end space-x-1">
+		<button
+			onclick={() => onView(user)}
+			class="inline-flex rounded p-1 text-blue-600 transition-colors hover:bg-blue-50 hover:text-blue-900"
+			title="View User"
+			aria-label="View User"
+		>
+			{@render EyeIcon()}
+		</button>
+		<button
+			onclick={() => onEdit(user)}
+			class="inline-flex rounded p-1 text-green-600 transition-colors hover:bg-green-50 hover:text-green-900"
+			title="Edit User"
+			aria-label="Edit User"
+		>
+			{@render EditIcon()}
+		</button>
+		<button
+			onclick={() => onDelete(user.id)}
+			class="inline-flex rounded p-1 text-red-600 transition-colors hover:bg-red-50 hover:text-red-900"
+			title="Delete User"
+			aria-label="Delete User"
+		>
+			{@render TrashIcon()}
+		</button>
+	</div>
+{/snippet}
+
+<Table
+	data={users}
+	{columns}
+	{currentPage}
+	{pageSize}
+	totalItems={totalUsers}
+	{loading}
+	pagination={true}
+	showPagination={true}
+	showPageSize={true}
+	pageSizeOptions={[10, 25, 50, 100]}
+	paginationTemplate="full"
+	onpagechange={onPageChange}
+	onpagesizechange={onPageSizeChange}
+	onsort={handleTableSort}
+	paginationPosition="bottom"
+	paginationclass="whitespace-nowrap flex-wrap gap-3 justify-between items-center"
+	wrapperclass="overflow-x-auto"
+	tableclass="min-w-full w-full"
+	class={className}
+/>

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

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

package/dist/user-management/UserTableTestWrapper.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import UserTable from './UserTable.svelte';
+	import type { UserTableProps } from './user-management.js';
+
+	interface Props extends UserTableProps {
+		testId?: string;
+	}
+
+	let {
+		users = [],
+		loading = false,
+		currentPage = 1,
+		pageSize = 10,
+		totalUsers = 0,
+		onPageChange = () => {},
+		onPageSizeChange = () => {},
+		onSort,
+		onView = () => {},
+		onEdit = () => {},
+		onDelete = () => {},
+		testId,
+		...rest
+	}: Props = $props();
+</script>
+
+<div data-testid={testId}>
+	<UserTable
+		{users}
+		{loading}
+		{currentPage}
+		{pageSize}
+		{totalUsers}
+		{onPageChange}
+		{onPageSizeChange}
+		{onSort}
+		{onView}
+		{onEdit}
+		{onDelete}
+		{...rest}
+	/>
+</div>

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

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