nucleus-core-ts 0.8.7 → 0.8.9

package/dist/fe/components/UsersPage/components/UserListItem.js

@@ -0,0 +1,125 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../utils/cn";
+export function UserListItem({ theme, user, roles, isSelected, onSelect }) {
+    const getInitials = (name)=>{
+        const parts = name.split(" ");
+        if (parts.length >= 2 && parts[0] && parts[1]) {
+            return `${parts[0][0]}${parts[1][0]}`.toUpperCase();
+        }
+        return name.slice(0, 2).toUpperCase();
+    };
+    const getUserDisplayName = ()=>{
+        if (user.profile?.firstName || user.profile?.lastName) {
+            return `${user.profile.firstName || ""} ${user.profile.lastName || ""}`.trim();
+        }
+        return user.email.split("@")[0];
+    };
+    const getUserRoles = ()=>{
+        if (!user.userRoles) return [];
+        return user.userRoles.map((ur)=>roles.find((r)=>r.id === ur.roleId)).filter(Boolean).slice(0, 3);
+    };
+    const getStatusDotClass = ()=>{
+        if (user.isLocked) return theme.userCard.avatar.statusDot.locked;
+        if (!user.verifiedAt) return theme.userCard.avatar.statusDot.unverified;
+        return theme.userCard.avatar.statusDot.active;
+    };
+    const formatLastLogin = (date)=>{
+        if (!date) return "Never logged in";
+        const d = typeof date === "string" ? new Date(date) : date;
+        const now = new Date();
+        const diff = now.getTime() - d.getTime();
+        const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+        if (days === 0) return "Today";
+        if (days === 1) return "Yesterday";
+        if (days < 7) return `${days} days ago`;
+        if (days < 30) return `${Math.floor(days / 7)} weeks ago`;
+        if (days < 365) return `${Math.floor(days / 30)} months ago`;
+        return `${Math.floor(days / 365)} years ago`;
+    };
+    const displayName = getUserDisplayName();
+    const userRoles = getUserRoles();
+    const hasMoreRoles = (user.userRoles?.length || 0) > 3;
+    return /*#__PURE__*/ _jsxs("button", {
+        type: "button",
+        onClick: ()=>onSelect(user),
+        className: cn(theme.userCard.wrapper.base, theme.userCard.wrapper.hover, isSelected && theme.userCard.wrapper.selected, "w-full text-left flex items-start gap-3"),
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: cn(theme.userCard.avatar.wrapper),
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        className: cn(theme.userCard.avatar.placeholder),
+                        children: getInitials(displayName || "U")
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: cn(theme.userCard.avatar.statusDot.base, getStatusDotClass())
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: cn(theme.userCard.content.wrapper),
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "flex items-center gap-2",
+                        children: [
+                            /*#__PURE__*/ _jsx("span", {
+                                className: cn(theme.userCard.content.name),
+                                children: displayName
+                            }),
+                            user.isGod && /*#__PURE__*/ _jsx("span", {
+                                className: cn(theme.userCard.badges.status.god),
+                                children: "God"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("p", {
+                        className: cn(theme.userCard.content.email),
+                        children: user.email
+                    }),
+                    /*#__PURE__*/ _jsx("p", {
+                        className: cn(theme.userCard.content.meta),
+                        children: formatLastLogin(user.lastLoginAt)
+                    }),
+                    (userRoles.length > 0 || user.isLocked || !user.verifiedAt) && /*#__PURE__*/ _jsxs("div", {
+                        className: cn(theme.userCard.badges.wrapper),
+                        children: [
+                            user.isLocked && /*#__PURE__*/ _jsx("span", {
+                                className: cn(theme.userCard.badges.status.locked),
+                                children: "Locked"
+                            }),
+                            !user.verifiedAt && !user.isLocked && /*#__PURE__*/ _jsx("span", {
+                                className: cn(theme.userCard.badges.status.unverified),
+                                children: "Unverified"
+                            }),
+                            userRoles.map((role)=>/*#__PURE__*/ _jsx("span", {
+                                    className: cn(theme.userCard.badges.role),
+                                    children: role?.name
+                                }, role?.id)),
+                            hasMoreRoles && /*#__PURE__*/ _jsxs("span", {
+                                className: cn(theme.userCard.badges.role),
+                                children: [
+                                    "+",
+                                    (user.userRoles?.length || 0) - 3
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("svg", {
+                className: "w-5 h-5 text-zinc-400 flex-shrink-0 mt-1",
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                "aria-hidden": "true",
+                children: /*#__PURE__*/ _jsx("path", {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M9 5l7 7-7 7"
+                })
+            })
+        ]
+    });
+}

package/dist/fe/components/UsersPage/components/UserListSkeleton.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../utils/cn";
+export function UserListSkeleton({ theme, count = 5 }) {
+    return /*#__PURE__*/ _jsx("div", {
+        className: "divide-y divide-zinc-100 dark:divide-zinc-800/50",
+        children: Array.from({
+            length: count
+        }).map((_, idx)=>/*#__PURE__*/ _jsxs("div", {
+                className: "p-3 sm:p-4 flex items-start gap-3",
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        className: cn(theme.skeleton.base, theme.skeleton.avatar)
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "flex-1 space-y-2",
+                        children: [
+                            /*#__PURE__*/ _jsx("div", {
+                                className: cn(theme.skeleton.base, theme.skeleton.text, "w-32")
+                            }),
+                            /*#__PURE__*/ _jsx("div", {
+                                className: cn(theme.skeleton.base, theme.skeleton.text, "w-48")
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "flex gap-1.5 mt-1",
+                                children: [
+                                    /*#__PURE__*/ _jsx("div", {
+                                        className: cn(theme.skeleton.base, "h-5 w-16 rounded")
+                                    }),
+                                    /*#__PURE__*/ _jsx("div", {
+                                        className: cn(theme.skeleton.base, "h-5 w-12 rounded")
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            }, idx))
+    });
+}