From 046d4bd098132079e06a46821aa6e9dffd23d39f Mon Sep 17 00:00:00 2001 From: AlacrisDevs Date: Mon, 9 Feb 2026 15:23:03 +0200 Subject: [PATCH] Style guide improvement --- src/routes/style/+page.svelte | 754 +++++++++++++++++++++++++++++++++- 1 file changed, 747 insertions(+), 7 deletions(-) diff --git a/src/routes/style/+page.svelte b/src/routes/style/+page.svelte index 3842127..bf5f1da 100644 --- a/src/routes/style/+page.svelte +++ b/src/routes/style/+page.svelte @@ -11,6 +11,7 @@ Spinner, Toggle, Toast, + ToastContainer, Chip, ListItem, OrgHeader, @@ -27,6 +28,22 @@ StatCard, StatusBadge, TabBar, + Icon, + ContextMenu, + KanbanColumn, + AssigneePicker, + MemberList, + ActivityFeed, + EventCard, + ModuleCard, + QuickLinkGrid, + PageSkeleton, + ContentSkeleton, + Twemoji, + EmojiPicker, + ImagePreviewModal, + VirtualList, + PersonContactModal, } from "$lib/components/ui"; let inputValue = $state(""); @@ -34,9 +51,96 @@ let selectValue = $state(""); let toggleChecked = $state(false); let modalOpen = $state(false); + let imagePreviewOpen = $state(false); + let emojiPickerOpen = $state(false); + let personModalProfile = $state(null); + let assigneeValue = $state(null); let activeTab = $state("tab1"); let searchFilter = $state(""); + const demoMembers = [ + { + id: "1", + user_id: "u1", + role: "owner", + profiles: { + id: "u1", + email: "alice@example.com", + full_name: "Alice Johnson", + avatar_url: null, + }, + }, + { + id: "2", + user_id: "u2", + role: "admin", + profiles: { + id: "u2", + email: "bob@example.com", + full_name: "Bob Smith", + avatar_url: null, + }, + }, + { + id: "3", + user_id: "u3", + role: "member", + profiles: { + id: "u3", + email: "charlie@example.com", + full_name: "Charlie Brown", + avatar_url: null, + }, + }, + { + id: "4", + user_id: "u4", + role: "member", + profiles: { + id: "u4", + email: "diana@example.com", + full_name: "Diana Prince", + avatar_url: null, + }, + }, + ]; + + const demoActivity = [ + { + id: "a1", + action: "create", + entity_type: "document", + entity_id: "d1", + entity_name: "Project Brief", + created_at: new Date(Date.now() - 300000).toISOString(), + profiles: { + full_name: "Alice Johnson", + email: "alice@example.com", + }, + }, + { + id: "a2", + action: "update", + entity_type: "kanban_card", + entity_id: "k1", + entity_name: "Design Review", + created_at: new Date(Date.now() - 3600000).toISOString(), + profiles: { full_name: "Bob Smith", email: "bob@example.com" }, + }, + { + id: "a3", + action: "delete", + entity_type: "folder", + entity_id: "f1", + entity_name: "Old Files", + created_at: new Date(Date.now() - 86400000).toISOString(), + profiles: { + full_name: "Charlie Brown", + email: "charlie@example.com", + }, + }, + ]; + const selectOptions = [ { value: "option1", label: "Option 1" }, { value: "option2", label: "Option 2" }, @@ -47,7 +151,7 @@ // Component Registry - add new components here and they render automatically // Each entry: { name, description, sections: [{ label, ... }] } // ============================================================ - const componentCount = 25; + const componentCount = 42; const colors = [ { @@ -97,9 +201,13 @@ "Colors", "Typography", "Button", + "Icon", + "IconButton", "Input", "Textarea", "Select", + "Toggle", + "AssigneePicker", "Avatar", "Badge", "Chip", @@ -107,21 +215,33 @@ "Card", "SectionCard", "StatCard", - "Toggle", + "ModuleCard", + "EventCard", + "KanbanColumn", + "ListItem", + "MemberList", + "ActivityFeed", + "QuickLinkGrid", + "Modal", + "ImagePreviewModal", + "PersonContactModal", + "ContextMenu", + "Dropdown", + "Toast", "Spinner", "Skeleton", - "Modal", - "Toast", + "PageSkeleton", + "ContentSkeleton", "Logo", - "ListItem", "OrgHeader", - "IconButton", "ContentHeader", "PageHeader", "CalendarDay", "TabBar", "EmptyState", - "Dropdown", + "Twemoji", + "EmojiPicker", + "VirtualList", ]; const filteredSections = $derived( @@ -339,6 +459,54 @@ + +
+

+ Icon +

+
+
+

+ Sizes +

+
+ {#each [16, 20, 24, 32, 48] as size} +
+ + {size}px +
+ {/each} +
+
+
+

+ Various Icons +

+
+ {#each ["home", "settings", "search", "notifications", "person", "edit", "delete", "add", "check_circle", "error", "info", "warning", "folder", "description", "calendar_today", "group"] as name} +
+ + {name} +
+ {/each} +
+
+
+
+

+ +
+

+ AssigneePicker +

+
+ (assigneeValue = v)} + /> +
+

+ Selected: {assigneeValue ?? "none"} +

+
+ + +
+

+ ContextMenu +

+

+ A three-dot menu that opens a dropdown with actions. Click + the icon to toggle. +

+
+
+ {}, + }, + { + label: "Duplicate", + icon: "content_copy", + onclick: () => {}, + }, + { + label: "", + icon: "", + onclick: () => {}, + divider: true, + }, + { + label: "Delete", + icon: "delete", + onclick: () => {}, + danger: true, + }, + ]} + /> + right +
+
+ {}, + }, + { + label: "Export", + icon: "download", + onclick: () => {}, + }, + ]} + /> + left +
+
+
+ + +
+

+ KanbanColumn +

+
+ {}}> +
+

+ Design mockups +

+

+ Due tomorrow +

+
+
+

Write specs

+
+ + {}} + onMore={() => {}} + > +
+

+ API integration +

+

+ Started 2h ago +

+
+ + {}} /> +
+
+ + +
+

+ MemberList +

+
+
+

+ With Members +

+ +
+
+

+ Empty +

+ +
+
+
+ + +
+

+ ActivityFeed +

+
+
+

+ With Entries +

+ +
+
+

+ Empty +

+ +
+
+
+ + +
+

+ EventCard +

+
+
+

+ Full Card +

+
+ + +
+
+
+

+ Compact +

+
+ + +
+
+
+
+ + +
+

+ ModuleCard +

+
+ + + + +
+
+ + +
+

+ QuickLinkGrid +

+
+ +
+
+ + +
+

+ ImagePreviewModal +

+ +
+ {#if imagePreviewOpen} + (imagePreviewOpen = false)} + /> + {/if} + + +
+

+ PersonContactModal +

+ +
+ (personModalProfile = null)} + /> + + +
+

+ PageSkeleton +

+
+ {#each ["default", "kanban", "files", "calendar", "settings"] as variant} +
+

+ {variant} +

+
+ +
+
+ {/each} +
+
+ + +
+

+ ContentSkeleton +

+
+ {#each ["default", "kanban", "files", "list", "detail"] as variant} +
+

+ {variant} +

+
+ +
+
+ {/each} +
+
+ + +
+

+ Twemoji +

+
+
+

+ Sizes +

+
+ {#each [16, 24, 32, 48] as size} +
+ + {size}px +
+ {/each} +
+
+
+

+ Various Emojis +

+
+ {#each ["😀", "🎉", "🔥", "💡", "⭐", "🎯", "📦", "🛠️", "✅", "❌", "🌍", "🎨"] as emoji} + + {/each} +
+
+
+
+ + +
+

+ EmojiPicker +

+

+ A full emoji picker with category tabs and search. Click to + open. +

+
+ + {#if emojiPickerOpen} +
+ { + emojiPickerOpen = false; + }} + onClose={() => (emojiPickerOpen = false)} + /> +
+ {/if} +
+
+ + +
+

+ VirtualList +

+

+ Renders only visible items for large lists. Scroll to see + virtualization in action. +

+
+ ({ + id: i, + label: `Item ${i + 1}`, + }))} + itemHeight={40} + getKey={(item) => String(item.id)} + > + {#snippet children( + item: { id: number; label: string }, + _index: number, + )} +
+ {item.label} +
+ {/snippet} + +
+
+