@makolabs/ripple 1.2.3 → 1.2.4

package/dist/user-management/UserViewModal.svelte

@@ -0,0 +1,282 @@
+<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>
+								{#if user?.username}
+									<div>
+										<span class="text-xs text-gray-500">Username</span>
+										<p class="text-sm">{user.username}</p>
+									</div>
+								{/if}
+								<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/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * User Management Module
+ * Components and utilities for managing users
+ */
+export { default as UserManagement } from './UserManagement.svelte';
+export { default as UserTable } from './UserTable.svelte';
+export { default as UserModal } from './UserModal.svelte';
+export { default as UserViewModal } from './UserViewModal.svelte';
+export type { User, UserEmail, UserPhone, Permission, Role, UserTableProps, UserModalProps, UserViewModalProps, UserManagementProps, FormErrors } from './user-management.js';
+export { createUser, getUserDisplayName, getUserInitials } from './user-management.js';

package/dist/user-management/index.js

@@ -0,0 +1,11 @@
+/**
+ * User Management Module
+ * Components and utilities for managing users
+ */
+// Components
+export { default as UserManagement } from './UserManagement.svelte';
+export { default as UserTable } from './UserTable.svelte';
+export { default as UserModal } from './UserModal.svelte';
+export { default as UserViewModal } from './UserViewModal.svelte';
+// Utilities
+export { createUser, getUserDisplayName, getUserInitials } from './user-management.js';

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

@@ -0,0 +1,99 @@
+/**
+ * User Management Types
+ * Type definitions for user management components
+ */
+import type { ClassValue } from 'tailwind-variants';
+export interface UserEmail {
+    email_address: string;
+    verified?: boolean;
+}
+export interface UserPhone {
+    phone_number: string;
+    verified?: boolean;
+}
+export interface User {
+    id: string;
+    first_name?: string;
+    last_name?: string;
+    username?: string;
+    email_addresses?: UserEmail[];
+    phone_numbers?: UserPhone[];
+    image_url?: string;
+    created_at?: number;
+    last_sign_in_at?: number;
+    private_metadata?: Record<string, unknown>;
+    public_metadata?: Record<string, unknown>;
+    permissions?: string[];
+    role?: string;
+}
+export interface Permission {
+    id: string;
+    name: string;
+    description?: string;
+    category?: string;
+}
+export interface Role {
+    value: string;
+    label: string;
+    description?: string;
+    permissions: string[];
+}
+export interface UserTableProps {
+    users: User[];
+    loading?: boolean;
+    currentPage?: number;
+    pageSize?: number;
+    totalUsers?: number;
+    onPageChange: (page: number) => void;
+    onPageSizeChange: (size: number) => void;
+    onSort?: (state: {
+        column: string | null;
+        direction: 'asc' | 'desc' | null;
+    }) => void;
+    onView: (user: User) => void;
+    onEdit: (user: User) => void;
+    onDelete: (userId: string) => void;
+    class?: ClassValue;
+}
+export interface UserModalProps {
+    open: boolean;
+    user: User | null;
+    roles?: Role[];
+    onSave: (user: User, mode: 'create' | 'edit') => Promise<void>;
+    onClose: () => void;
+    class?: ClassValue;
+}
+export interface UserViewModalProps {
+    open: boolean;
+    user: User | null;
+    permissions?: Permission[];
+    onEdit?: (user: User) => void;
+    onClose: () => void;
+    class?: ClassValue;
+}
+export interface UserManagementProps {
+    users: User[];
+    totalUsers: number;
+    loading?: boolean;
+    currentPage?: number;
+    pageSize?: number;
+    roles?: Role[];
+    permissions?: Permission[];
+    onPageChange: (page: number) => void;
+    onPageSizeChange: (size: number) => void;
+    onSort?: (state: {
+        column: string | null;
+        direction: 'asc' | 'desc' | null;
+    }) => void;
+    onCreateUser?: (userData: Partial<User>) => Promise<void>;
+    onUpdateUser?: (userId: string, userData: Partial<User>) => Promise<void>;
+    onDeleteUser?: (userId: string) => Promise<void>;
+    onDeleteUsers?: (userIds: string[]) => Promise<void>;
+    class?: ClassValue;
+}
+export interface FormErrors {
+    [key: string]: string;
+}
+export declare function createUser(partial?: Partial<User>): User;
+export declare function getUserDisplayName(user: User | null): string;
+export declare function getUserInitials(user: User | null): string;

package/dist/user-management/user-management.js

@@ -0,0 +1,42 @@
+/**
+ * User Management Types
+ * Type definitions for user management components
+ */
+// Export convenience function to create a user object
+export function createUser(partial = {}) {
+    return {
+        id: '',
+        first_name: '',
+        last_name: '',
+        username: '',
+        email_addresses: [],
+        phone_numbers: [],
+        permissions: [],
+        ...partial
+    };
+}
+// Export convenience function to format user display name
+export function getUserDisplayName(user) {
+    if (!user)
+        return 'Unknown User';
+    if (user.first_name || user.last_name) {
+        return `${user.first_name || ''} ${user.last_name || ''}`.trim();
+    }
+    if (user.username)
+        return user.username;
+    if (user.email_addresses?.[0]?.email_address) {
+        return user.email_addresses[0].email_address;
+    }
+    return user.id || 'Unknown User';
+}
+// Export convenience function to get user initials
+export function getUserInitials(user) {
+    if (!user)
+        return '?';
+    if (user.first_name)
+        return user.first_name[0].toUpperCase();
+    if (user.email_addresses?.[0]?.email_address) {
+        return user.email_addresses[0].email_address[0].toUpperCase();
+    }
+    return '?';
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@makolabs/ripple",
-	"version": "1.2.3",
+	"version": "1.2.4",
 	"description": "Simple Svelte 5 powered component library ✨",
 	"license": "SEE LICENSE IN LICENSE",
 	"repository": {
@@ -71,7 +71,9 @@
 		"eslint-plugin-storybook": "^9.0.18",
 		"eslint-plugin-svelte": "^3.0.0",
 		"globals": "^16.0.0",
+		"husky": "^9.1.7",
 		"jsdom": "^26.0.0",
+		"lint-staged": "^16.2.6",
 		"prettier": "^3.4.2",
 		"prettier-plugin-svelte": "^3.3.3",
 		"prettier-plugin-tailwindcss": "^0.6.11",

package/dist/types/markdown.d.ts

@@ -1,14 +0,0 @@
-declare module 'markdown' {
-	export interface MarkdownOptions {
-		dialect?: string;
-	}
-
-	export interface MarkdownAPI {
-		toHTML(markdown: string, options?: MarkdownOptions): string;
-		parse(markdown: string): any;
-		renderJsonML(jsonml: any): string;
-		toHTMLTree(tree: any): any;
-	}
-
-	export const markdown: MarkdownAPI;
-}

package/dist/types/variants.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/types/variants.js

@@ -1 +0,0 @@
-"use strict";