@gostack-framework/ui 0.0.0-stage → 0.1.0

package/src/components/PopUp.tsx

@@ -0,0 +1,309 @@
+import DOMPurify from "dompurify";
+import { AnimatePresence, motion } from "framer-motion";
+import { X } from "lucide-react";
+import { useEffect, useState } from "react";
+
+interface PopUpProps {
+    title?: string;
+    description?: string;
+    image?: string;
+    primaryColor?: string;
+    secondaryColor?: string;
+    accentColor?: string;
+    onClose?: () => void;
+}
+
+function PopUp({
+    title,
+    description,
+    image,
+    primaryColor,
+    secondaryColor,
+    accentColor,
+    onClose,
+}: PopUpProps) {
+    const [isVisible, setIsVisible] = useState(false);
+
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            setIsVisible(true);
+        }, 5000);
+
+        return () => clearTimeout(timer);
+    }, []);
+
+    const handleClose = () => {
+        setIsVisible(false);
+        onClose?.();
+    };
+
+    if (!title && !description && !image) return;
+
+    return (
+        <>
+            <style>{`
+                .banner-popup-bg-accent:hover {
+                    background-color: ${accentColor || "var(--color-dashboard-secondary)"};
+                }
+            `}</style>
+            <AnimatePresence>
+                {isVisible && (
+                    <>
+                        {/* Backdrop */}
+                        <motion.div
+                            initial={{ opacity: 0 }}
+                            animate={{ opacity: 1 }}
+                            exit={{ opacity: 0 }}
+                            transition={{ duration: 0.3 }}
+                            className="fixed inset-0 z-100 bg-black/75 backdrop-blur-xs"
+                            onClick={handleClose}
+                        />
+
+                        {/* Popup Card */}
+                        <motion.div
+                            initial={{ scale: 0.85, opacity: 0, y: 20 }}
+                            animate={{ scale: 1, opacity: 1, y: 0 }}
+                            exit={{ scale: 0.85, opacity: 0, y: 20 }}
+                            whileHover={{
+                                y: -2,
+                            }}
+                            transition={{ duration: 0.25, ease: "easeOut" }}
+                            className="fixed inset-0 z-100 flex items-center justify-center p-4"
+                        >
+                            <div
+                                className="relative w-full h-auto max-w-md bg-dashboard-card rounded-2xl border border-dashboard-border overflow-hidden shadow-2xl"
+                                onClick={(e) => e.stopPropagation()}
+                            >
+                                {/* Close Button */}
+                                <button
+                                    onClick={handleClose}
+                                    aria-label="Close popup"
+                                    className="absolute top-3 right-3 z-20 w-7 h-7 rounded-full bg-dashboard-secondary/80 border border-dashboard-border flex items-center justify-center text-dashboard-foreground hover:bg-dashboard-secondary transition-all cursor-pointer shadow-xs"
+                                >
+                                    <X size={14} />
+                                </button>
+
+                                {/* Image */}
+                                <motion.div
+                                    initial={{ x: 50, opacity: 0 }}
+                                    animate={{ x: 0, opacity: 1 }}
+                                    exit={{ x: -50, opacity: 0 }}
+                                    transition={{ duration: 0.3 }}
+                                    className="relative w-full h-full"
+                                >
+                                    {image ? (
+                                        <img
+                                            src={image}
+                                            alt={title || "Banner"}
+                                            className="w-full h-full object-cover"
+                                        />
+                                    ) : (
+                                        <div className="w-full h-full bg-linear-to-br from-dashboard-primary/20 via-dashboard-background to-dashboard-primary/10 flex items-center justify-center overflow-hidden">
+                                            {/* Default placeholder illustration */}
+                                            <svg
+                                                width="300"
+                                                height="200"
+                                                viewBox="0 0 300 200"
+                                                xmlns="http://www.w3.org/2000/svg"
+                                                className="absolute top-0 left-0"
+                                            >
+                                                <defs>
+                                                    <radialGradient
+                                                        id="sky1"
+                                                        cx="50%"
+                                                        cy="30%"
+                                                        r="70%"
+                                                    >
+                                                        <stop
+                                                            offset="0%"
+                                                            stopColor="#1e4a5c"
+                                                        />
+                                                        <stop
+                                                            offset="100%"
+                                                            stopColor="#0a1e28"
+                                                        />
+                                                    </radialGradient>
+                                                </defs>
+                                                <rect
+                                                    width="300"
+                                                    height="200"
+                                                    fill="url(#sky1)"
+                                                />
+                                                <circle
+                                                    cx="240"
+                                                    cy="35"
+                                                    r="18"
+                                                    fill="#c8d8e8"
+                                                    opacity="0.18"
+                                                />
+                                                <circle
+                                                    cx="240"
+                                                    cy="35"
+                                                    r="12"
+                                                    fill="#c8d8e8"
+                                                    opacity="0.28"
+                                                />
+                                                <polygon
+                                                    points="150,30 210,140 90,140"
+                                                    fill="#122535"
+                                                    opacity="0.95"
+                                                />
+                                                <polygon
+                                                    points="150,50 195,140 105,140"
+                                                    fill="#0a1c28"
+                                                    opacity="0.9"
+                                                />
+                                                <polygon
+                                                    points="60,60 110,140 10,140"
+                                                    fill="#152a38"
+                                                    opacity="0.9"
+                                                />
+                                                <polygon
+                                                    points="250,50 295,140 205,140"
+                                                    fill="#152a38"
+                                                    opacity="0.85"
+                                                />
+                                                <rect
+                                                    x="0"
+                                                    y="130"
+                                                    width="300"
+                                                    height="70"
+                                                    fill="#0a1c26"
+                                                    opacity="0.6"
+                                                />
+                                                <rect
+                                                    x="0"
+                                                    y="150"
+                                                    width="300"
+                                                    height="50"
+                                                    fill="#0d2232"
+                                                    opacity="0.7"
+                                                />
+                                                <line
+                                                    x1="0"
+                                                    y1="148"
+                                                    x2="300"
+                                                    y2="148"
+                                                    stroke="#1a3a4a"
+                                                    strokeWidth="0.5"
+                                                    opacity="0.4"
+                                                />
+                                                <ellipse
+                                                    cx="150"
+                                                    cy="195"
+                                                    rx="120"
+                                                    ry="8"
+                                                    fill="#0a1825"
+                                                    opacity="0.5"
+                                                />
+                                            </svg>
+                                        </div>
+                                    )}
+                                </motion.div>
+
+                                {/* Card Body */}
+                                <div className="p-5">
+                                    {/* Header */}
+                                    <div className="flex items-start justify-between mb-2.5">
+                                        <motion.h3
+                                            initial={{ y: 10, opacity: 0 }}
+                                            animate={{ y: 0, opacity: 1 }}
+                                            transition={{ delay: 0.15 }}
+                                            className="text-xl font-bold leading-tight"
+                                            style={{
+                                                color: primaryColor,
+                                            }}
+                                        >
+                                            {title || "Special Offer"}
+                                        </motion.h3>
+                                    </div>
+
+                                    {/* Description */}
+                                    <motion.div
+                                        initial={{ y: 10, opacity: 0 }}
+                                        animate={{ y: 0, opacity: 1 }}
+                                        transition={{ delay: 0.25 }}
+                                        className="banner-popup-content text-xs leading-relaxed mb-4 text-dashboard-muted-foreground"
+                                        dangerouslySetInnerHTML={{
+                                            __html: DOMPurify.sanitize(
+                                                description || "",
+                                            ),
+                                        }}
+                                        style={{
+                                            color: secondaryColor,
+                                        }}
+                                    />
+                                    <style>{`
+                                    .banner-popup-content {
+                                        color: var(--color-dashboard-muted-foreground);
+                                        font-size: 0.75rem;
+                                        line-height: 1.5;
+                                    }
+                                    .banner-popup-content p {
+                                        margin: 0.375rem 0;
+                                    }
+                                    .banner-popup-content strong {
+                                        font-weight: 600;
+                                        color: var(--color-dashboard-foreground);
+                                    }
+                                    .banner-popup-content em {
+                                        font-style: italic;
+                                    }
+                                    .banner-popup-content u {
+                                        text-decoration: underline;
+                                        text-underline-offset: 2px;
+                                    }
+                                    .banner-popup-content ul {
+                                        list-style-type: disc;
+                                        padding-left: 1rem;
+                                        margin: 0.375rem 0;
+                                    }
+                                    .banner-popup-content ol {
+                                        list-style-type: decimal;
+                                        padding-left: 1rem;
+                                        margin: 0.375rem 0;
+                                    }
+                                    .banner-popup-content li {
+                                        display: list-item;
+                                        margin: 0.2rem 0;
+                                    }
+                                    .banner-popup-content blockquote {
+                                        border-left: 2px solid var(--color-dashboard-primary);
+                                        padding: 0.25rem 0 0.25rem 0.5rem;
+                                        margin: 0.5rem 0;
+                                        font-style: italic;
+                                        background: var(--color-dashboard-secondary);
+                                        border-radius: 0 4px 4px 0;
+                                    }
+                                    .banner-popup-content a {
+                                        color: var(--color-dashboard-primary);
+                                        text-decoration: underline;
+                                    }
+                                `}</style>
+
+                                    {/* Action Button */}
+                                    <motion.button
+                                        initial={{ y: 10, opacity: 0 }}
+                                        animate={{ y: 0, opacity: 1 }}
+                                        transition={{ delay: 0.35 }}
+                                        onClick={handleClose}
+                                        whileHover={{ opacity: 0.9 }}
+                                        whileTap={{ scale: 0.98 }}
+                                        className="w-full py-2.5 rounded-lg text-white text-xs font-semibold bg-dashboard-primary hover:bg-dashboard-primary/90 transition-all cursor-pointer shadow-xs"
+                                        style={{
+                                            backgroundColor: primaryColor,
+                                        }}
+                                    >
+                                        Got it
+                                    </motion.button>
+                                </div>
+                            </div>
+                        </motion.div>
+                    </>
+                )}
+            </AnimatePresence>
+        </>
+    );
+}
+
+export default PopUp;

package/src/components/PrioritySignal.tsx

@@ -0,0 +1,131 @@
+import React from "react";
+import { AlertCircle } from "lucide-react";
+import { cn } from "../support/utils";
+
+export type PriorityLevel =
+    | "critical"
+    | "urgent"
+    | "high"
+    | "normal"
+    | "medium"
+    | "low"
+    | "lowest";
+
+export interface PrioritySignalProps
+    extends React.HTMLAttributes<HTMLSpanElement> {
+    level?: PriorityLevel | string;
+    label?: string;
+    showLabel?: boolean;
+    size?: "xs" | "sm";
+}
+
+const parseLevel = (
+    rawLevel?: string,
+): { bars: number; color: string; barBg: string; defaultLabel: string; isAlert: boolean } => {
+    const norm = (rawLevel || "normal").toLowerCase();
+
+    if (norm.includes("crit") || norm.includes("urg") || norm === "p1") {
+        return {
+            bars: 4,
+            color: "text-red-500",
+            barBg: "bg-red-500",
+            defaultLabel: "Critical",
+            isAlert: true,
+        };
+    }
+    if (norm.includes("high") || norm === "p2") {
+        return {
+            bars: 3,
+            color: "text-amber-500",
+            barBg: "bg-amber-500",
+            defaultLabel: "High",
+            isAlert: false,
+        };
+    }
+    if (norm.includes("low") || norm === "p4" || norm.includes("minor")) {
+        return {
+            bars: 1,
+            color: "text-dashboard-muted-foreground",
+            barBg: "bg-dashboard-muted-foreground",
+            defaultLabel: "Low",
+            isAlert: false,
+        };
+    }
+    // Normal / Medium (Default)
+    return {
+        bars: 2,
+        color: "text-emerald-500",
+        barBg: "bg-emerald-500",
+        defaultLabel: "Normal",
+        isAlert: false,
+    };
+};
+
+export function PrioritySignal({
+    level = "normal",
+    label,
+    showLabel = true,
+    size = "xs",
+    className,
+    ...props
+}: PrioritySignalProps) {
+    const config = parseLevel(level);
+    const displayLabel = label ?? config.defaultLabel;
+
+    return (
+        <span
+            className={cn(
+                "inline-flex items-center gap-1.5 shrink-0 select-none",
+                size === "xs" ? "text-[11px]" : "text-xs",
+                className,
+            )}
+            {...props}
+        >
+            {config.isAlert ? (
+                <span className="inline-flex items-center justify-center text-red-500 shrink-0">
+                    <AlertCircle className={size === "xs" ? "w-3.5 h-3.5" : "w-4 h-4"} />
+                </span>
+            ) : (
+                <span
+                    className="inline-flex items-end gap-0.5 h-3.5 w-3.5 shrink-0 justify-center pb-0.5"
+                    aria-hidden="true"
+                >
+                    <span
+                        className={cn(
+                            "w-[2.5px] rounded-xs transition-colors",
+                            "h-[4px]",
+                            config.bars >= 1
+                                ? config.barBg
+                                : "bg-dashboard-border",
+                        )}
+                    />
+                    <span
+                        className={cn(
+                            "w-[2.5px] rounded-xs transition-colors",
+                            "h-[7px]",
+                            config.bars >= 2
+                                ? config.barBg
+                                : "bg-dashboard-border",
+                        )}
+                    />
+                    <span
+                        className={cn(
+                            "w-[2.5px] rounded-xs transition-colors",
+                            "h-[10px]",
+                            config.bars >= 3
+                                ? config.barBg
+                                : "bg-dashboard-border",
+                        )}
+                    />
+                </span>
+            )}
+            {showLabel && (
+                <span className="font-medium text-dashboard-foreground">
+                    {displayLabel}
+                </span>
+            )}
+        </span>
+    );
+}
+
+export default PrioritySignal;