nucleus-core-ts 0.8.6 → 0.8.8

package/dist/fe/components/DevicesPage/components/DeviceCard.js

@@ -0,0 +1,251 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
+import { useRef } from "react";
+import { cn } from "../../../utils/cn";
+import { devicesPageTheme } from "../theme";
+gsap.registerPlugin(useGSAP);
+function getDeviceIcon(deviceType) {
+    const iconClass = "w-5 h-5";
+    switch(deviceType?.toLowerCase()){
+        case "mobile":
+            return /*#__PURE__*/ _jsxs("svg", {
+                className: iconClass,
+                fill: "none",
+                viewBox: "0 0 24 24",
+                stroke: "currentColor",
+                "aria-label": "Mobile device",
+                children: [
+                    /*#__PURE__*/ _jsx("title", {
+                        children: "Mobile device"
+                    }),
+                    /*#__PURE__*/ _jsx("path", {
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        strokeWidth: 1.5,
+                        d: "M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"
+                    })
+                ]
+            });
+        case "tablet":
+            return /*#__PURE__*/ _jsxs("svg", {
+                className: iconClass,
+                fill: "none",
+                viewBox: "0 0 24 24",
+                stroke: "currentColor",
+                "aria-label": "Tablet device",
+                children: [
+                    /*#__PURE__*/ _jsx("title", {
+                        children: "Tablet device"
+                    }),
+                    /*#__PURE__*/ _jsx("path", {
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        strokeWidth: 1.5,
+                        d: "M12 18h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"
+                    })
+                ]
+            });
+        default:
+            return /*#__PURE__*/ _jsxs("svg", {
+                className: iconClass,
+                fill: "none",
+                viewBox: "0 0 24 24",
+                stroke: "currentColor",
+                "aria-label": "Desktop device",
+                children: [
+                    /*#__PURE__*/ _jsx("title", {
+                        children: "Desktop device"
+                    }),
+                    /*#__PURE__*/ _jsx("path", {
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        strokeWidth: 1.5,
+                        d: "M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+                    })
+                ]
+            });
+    }
+}
+function getTrustScoreColor(score) {
+    if (!score) return "bg-zinc-400";
+    if (score >= 80) return "bg-green-500";
+    if (score >= 60) return "bg-yellow-500";
+    if (score >= 40) return "bg-orange-500";
+    return "bg-red-500";
+}
+function formatDate(dateString) {
+    if (!dateString) return "Unknown";
+    const date = new Date(dateString);
+    return date.toLocaleDateString(undefined, {
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+        hour: "2-digit",
+        minute: "2-digit"
+    });
+}
+export function DeviceCard({ device, isCurrent = false, onRevoke, isRevoking = false }) {
+    const theme = devicesPageTheme;
+    const cardRef = useRef(null);
+    useGSAP(()=>{
+        if (!cardRef.current) return;
+        gsap.fromTo(cardRef.current, {
+            opacity: 0,
+            y: 20
+        }, {
+            opacity: 1,
+            y: 0,
+            duration: 0.4,
+            ease: "power2.out"
+        });
+    }, {
+        scope: cardRef
+    });
+    const deviceName = device.deviceName || `${device.browserName || "Unknown"} on ${device.osName || "Unknown"}`;
+    return /*#__PURE__*/ _jsxs("article", {
+        ref: cardRef,
+        className: cn(theme.deviceCard.base, theme.deviceCard.padding, isCurrent ? theme.deviceCard.backgroundCurrent : theme.deviceCard.background, isCurrent ? theme.deviceCard.borderCurrent : theme.deviceCard.border, theme.deviceCard.shadow, theme.deviceCard.rounded, !isCurrent && theme.deviceCard.hover),
+        children: [
+            /*#__PURE__*/ _jsxs("header", {
+                className: theme.deviceCard.header.container,
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        className: cn(theme.deviceCard.header.icon, isCurrent && theme.deviceCard.header.iconCurrent),
+                        children: getDeviceIcon(device.deviceType)
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: theme.deviceCard.header.info,
+                        children: [
+                            /*#__PURE__*/ _jsx("h3", {
+                                className: theme.deviceCard.header.deviceName,
+                                children: deviceName
+                            }),
+                            /*#__PURE__*/ _jsxs("p", {
+                                className: theme.deviceCard.header.deviceType,
+                                children: [
+                                    device.deviceType || "Desktop",
+                                    " • ",
+                                    device.browserName,
+                                    " ",
+                                    device.browserVersion
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("dl", {
+                className: theme.deviceCard.details.container,
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: theme.deviceCard.details.row,
+                        children: [
+                            /*#__PURE__*/ _jsx("dt", {
+                                className: theme.deviceCard.details.label,
+                                children: "IP Address"
+                            }),
+                            /*#__PURE__*/ _jsx("dd", {
+                                className: theme.deviceCard.details.value,
+                                children: device.ipAddress || "Unknown"
+                            })
+                        ]
+                    }),
+                    device.locationCity && /*#__PURE__*/ _jsxs("div", {
+                        className: theme.deviceCard.details.row,
+                        children: [
+                            /*#__PURE__*/ _jsx("dt", {
+                                className: theme.deviceCard.details.label,
+                                children: "Location"
+                            }),
+                            /*#__PURE__*/ _jsxs("dd", {
+                                className: theme.deviceCard.details.value,
+                                children: [
+                                    device.locationCity,
+                                    device.locationCountry ? `, ${device.locationCountry}` : ""
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: theme.deviceCard.details.row,
+                        children: [
+                            /*#__PURE__*/ _jsx("dt", {
+                                className: theme.deviceCard.details.label,
+                                children: "Last Active"
+                            }),
+                            /*#__PURE__*/ _jsx("dd", {
+                                className: theme.deviceCard.details.value,
+                                children: formatDate(device.lastActivityAt)
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: theme.deviceCard.details.row,
+                        children: [
+                            /*#__PURE__*/ _jsx("dt", {
+                                className: theme.deviceCard.details.label,
+                                children: "First Seen"
+                            }),
+                            /*#__PURE__*/ _jsx("dd", {
+                                className: theme.deviceCard.details.value,
+                                children: formatDate(device.createdAt)
+                            })
+                        ]
+                    })
+                ]
+            }),
+            device.trustScore !== undefined && /*#__PURE__*/ _jsxs("div", {
+                className: theme.deviceCard.trustScore.container,
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        className: theme.deviceCard.trustScore.bar,
+                        children: /*#__PURE__*/ _jsx("div", {
+                            className: cn(theme.deviceCard.trustScore.barFill, getTrustScoreColor(device.trustScore)),
+                            style: {
+                                width: `${device.trustScore}%`
+                            }
+                        })
+                    }),
+                    /*#__PURE__*/ _jsxs("p", {
+                        className: theme.deviceCard.trustScore.label,
+                        children: [
+                            "Trust Score: ",
+                            device.trustScore,
+                            "%"
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("footer", {
+                className: theme.deviceCard.footer.container,
+                children: [
+                    isCurrent ? /*#__PURE__*/ _jsxs("span", {
+                        className: theme.deviceCard.footer.currentBadge,
+                        children: [
+                            /*#__PURE__*/ _jsx("svg", {
+                                className: "w-3 h-3 mr-1",
+                                fill: "currentColor",
+                                viewBox: "0 0 20 20",
+                                children: /*#__PURE__*/ _jsx("path", {
+                                    fillRule: "evenodd",
+                                    d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
+                                    clipRule: "evenodd"
+                                })
+                            }),
+                            "Current Device"
+                        ]
+                    }) : /*#__PURE__*/ _jsx("span", {}),
+                    onRevoke && !isCurrent && /*#__PURE__*/ _jsx("button", {
+                        type: "button",
+                        onClick: ()=>onRevoke(device.id),
+                        disabled: isRevoking,
+                        className: cn(theme.deviceCard.footer.revokeButton, isRevoking && "opacity-50 cursor-not-allowed"),
+                        children: isRevoking ? "Revoking..." : "Revoke Access"
+                    })
+                ]
+            })
+        ]
+    });
+}

package/dist/fe/components/DevicesPage/components/DevicesHeader.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "../../Button";
+import { devicesPageTheme } from "../theme";
+export function DevicesHeader({ title = "Active Devices", subtitle = "Manage devices that have access to your account", totalDevices = 0, onRevokeAll, isRevokingAll = false, allowRevokeAll = true }) {
+    const theme = devicesPageTheme;
+    return /*#__PURE__*/ _jsxs("header", {
+        className: theme.header.container,
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: theme.header.titleWrapper,
+                children: [
+                    /*#__PURE__*/ _jsxs("h1", {
+                        className: theme.header.title,
+                        children: [
+                            title,
+                            totalDevices > 0 && /*#__PURE__*/ _jsx("span", {
+                                className: theme.header.badge,
+                                children: totalDevices
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("p", {
+                        className: theme.header.subtitle,
+                        children: subtitle
+                    })
+                ]
+            }),
+            allowRevokeAll && totalDevices > 1 && onRevokeAll && /*#__PURE__*/ _jsx("div", {
+                className: theme.header.actions,
+                children: /*#__PURE__*/ _jsx(Button, {
+                    variant: "outline",
+                    size: "sm",
+                    onClick: onRevokeAll,
+                    disabled: isRevokingAll,
+                    className: "text-red-600 border-red-200 hover:bg-red-50 dark:text-red-400 dark:border-red-800 dark:hover:bg-red-900/20",
+                    children: isRevokingAll ? "Revoking..." : "Revoke All Other Devices"
+                })
+            })
+        ]
+    });
+}