@gostack-framework/ui 0.0.0-stage → 0.1.0

package/src/components/RichTextEditor.tsx

@@ -0,0 +1,433 @@
+import { Button } from "../index";
+import { useLanguage } from "@gostack-framework/react";
+import { cn } from "../support/utils";
+import { Highlight } from "@tiptap/extension-highlight";
+import Image from "@tiptap/extension-image";
+import Link from "@tiptap/extension-link";
+import Placeholder from "@tiptap/extension-placeholder";
+import Underline from "@tiptap/extension-underline";
+import { EditorContent, useEditor } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import {
+    Bold,
+    Code,
+    Highlighter,
+    Image as ImageIcon,
+    Italic,
+    Link as LinkIcon,
+    List,
+    ListOrdered,
+    Quote,
+    Redo,
+    Underline as UnderlineIcon,
+    Undo,
+} from "lucide-react";
+import { useState } from "react";
+
+interface RichTextEditorProps {
+    content: string;
+    onChange: (content: string) => void;
+    placeholder?: string;
+}
+
+const MenuBar = ({
+    editor,
+    onLinkClick,
+    onImageClick,
+}: {
+    editor: any;
+    onLinkClick: () => void;
+    onImageClick: () => void;
+}) => {
+    if (!editor) return null;
+
+    const buttons = [
+        {
+            icon: Bold,
+            action: () => editor.chain().focus().toggleBold().run(),
+            isActive: editor.isActive("bold"),
+            label: "Bold",
+            group: 0,
+        },
+        {
+            icon: Italic,
+            action: () => editor.chain().focus().toggleItalic().run(),
+            isActive: editor.isActive("italic"),
+            label: "Italic",
+            group: 0,
+        },
+        {
+            icon: UnderlineIcon,
+            action: () => editor.chain().focus().toggleUnderline().run(),
+            isActive: editor.isActive("underline"),
+            label: "Underline",
+            group: 0,
+        },
+        // ── NEW: Highlight button in group 0 ──
+        {
+            icon: Highlighter,
+            action: () =>
+                editor
+                    .chain()
+                    .focus()
+                    .toggleHighlight({ color: "rgba(105, 117, 226, 0.35)" })
+                    .run(),
+            isActive: editor.isActive("highlight"),
+            label: "Highlight",
+            group: 0,
+        },
+        {
+            icon: List,
+            action: () => editor.chain().focus().toggleBulletList().run(),
+            isActive: editor.isActive("bulletList"),
+            label: "Bullet List",
+            group: 1,
+        },
+        {
+            icon: ListOrdered,
+            action: () => editor.chain().focus().toggleOrderedList().run(),
+            isActive: editor.isActive("orderedList"),
+            label: "Ordered List",
+            group: 1,
+        },
+        {
+            icon: Quote,
+            action: () => editor.chain().focus().toggleBlockquote().run(),
+            isActive: editor.isActive("blockquote"),
+            label: "Quote",
+            group: 2,
+        },
+        {
+            icon: Code,
+            action: () => editor.chain().focus().toggleCodeBlock().run(),
+            isActive: editor.isActive("codeBlock"),
+            label: "Code Block",
+            group: 2,
+        },
+        {
+            icon: LinkIcon,
+            action: onLinkClick,
+            isActive: editor.isActive("link"),
+            label: "Link",
+            group: 3,
+        },
+        {
+            icon: ImageIcon,
+            action: onImageClick,
+            isActive: false,
+            label: "Image",
+            group: 3,
+        },
+    ];
+
+    const groups = [0, 1, 2, 3];
+
+    return (
+        <div className="flex flex-wrap items-center gap-1 p-2 bg-dashboard-secondary/50 backdrop-blur-md border-b border-dashboard-border sticky top-0 z-10">
+            {groups.map((groupId, gi) => (
+                <div
+                    key={groupId}
+                    className={cn(
+                        "flex items-center gap-1 px-2",
+                        gi < groups.length - 1 &&
+                            "border-r border-dashboard-border",
+                    )}
+                >
+                    {buttons
+                        .filter((b) => b.group === groupId)
+                        .map((btn, i) => (
+                            <Button
+                                key={i}
+                                type="button"
+                                variant="ghost"
+                                size="sm"
+                                onClick={btn.action}
+                                className={cn(
+                                    "h-8 w-8 p-0 rounded-lg transition-all",
+                                    btn.isActive
+                                        ? "bg-dashboard-primary text-dashboard-primary-foreground shadow-sm"
+                                        : "text-dashboard-muted-foreground hover:bg-dashboard-secondary hover:text-dashboard-foreground",
+                                )}
+                                title={btn.label}
+                            >
+                                <btn.icon className="h-3.5 w-3.5" />
+                            </Button>
+                        ))}
+                </div>
+            ))}
+
+            <div className="flex-1" />
+
+            <div className="flex items-center gap-1 border-l border-dashboard-border pl-2">
+                <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => editor.chain().focus().undo().run()}
+                    disabled={!editor.can().undo()}
+                    className="h-8 w-8 p-0 rounded-lg text-dashboard-muted-foreground hover:bg-dashboard-secondary hover:text-dashboard-foreground disabled:opacity-30"
+                >
+                    <Undo className="h-3.5 w-3.5" />
+                </Button>
+                <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => editor.chain().focus().redo().run()}
+                    disabled={!editor.can().redo()}
+                    className="h-8 w-8 p-0 rounded-lg text-dashboard-muted-foreground hover:bg-dashboard-secondary hover:text-dashboard-foreground disabled:opacity-30"
+                >
+                    <Redo className="h-3.5 w-3.5" />
+                </Button>
+            </div>
+        </div>
+    );
+};
+
+export default function RichTextEditor({
+    content,
+    onChange,
+    placeholder,
+}: RichTextEditorProps) {
+    const { t } = useLanguage();
+    const [linkModalOpen, setLinkModalOpen] = useState(false);
+    const [imageModalOpen, setImageModalOpen] = useState(false);
+    const [linkUrl, setLinkUrl] = useState("");
+    const [imageUrl, setImageUrl] = useState("");
+
+    const editor = useEditor({
+        extensions: [
+            StarterKit.configure({
+                bulletList: { keepMarks: true, keepAttributes: false },
+                orderedList: { keepMarks: true, keepAttributes: false },
+            }),
+            Underline,
+            Highlight.configure({ multicolor: true }), // ← NEW
+            Link.configure({ openOnClick: false }),
+            Image.configure({ allowBase64: true }),
+            Placeholder.configure({
+                placeholder: placeholder || "Start writing...",
+            }),
+        ],
+        content,
+        onUpdate: ({ editor }) => {
+            onChange(editor.getHTML());
+        },
+        editorProps: {
+            attributes: {
+                class: "focus:outline-none min-h-[400px] p-8 max-w-none",
+            },
+        },
+    });
+
+    const handleLinkSubmit = () => {
+        if (linkUrl && editor) {
+            const url = linkUrl.startsWith("http")
+                ? linkUrl
+                : `https://${linkUrl}`;
+            editor.chain().focus().setLink({ href: url }).run();
+            setLinkUrl("");
+            setLinkModalOpen(false);
+        }
+    };
+
+    const handleImageSubmit = () => {
+        if (imageUrl && editor) {
+            editor.chain().focus().setImage({ src: imageUrl }).run();
+            setImageUrl("");
+            setImageModalOpen(false);
+        }
+    };
+
+    const characterCount = editor ? editor.getText().length : 0;
+
+    return (
+        <div className="w-full border border-dashboard-border rounded-xl bg-dashboard-card overflow-hidden focus-within:border-dashboard-primary/50 transition-all shadow-xs">
+            <MenuBar
+                editor={editor}
+                onLinkClick={() => setLinkModalOpen(true)}
+                onImageClick={() => setImageModalOpen(true)}
+            />
+
+            <EditorContent editor={editor} />
+
+            <div className="flex justify-between items-center px-4 py-2 bg-dashboard-secondary/30 border-t border-dashboard-border text-xs text-dashboard-muted-foreground">
+                <span>Characters: {characterCount}</span>
+                <span>Rich Text Editor</span>
+            </div>
+
+            {/* Link Modal */}
+            {linkModalOpen && (
+                <div className="fixed inset-0 bg-black/75 flex items-center justify-center z-50 backdrop-blur-xs">
+                    <div className="bg-dashboard-card border border-dashboard-border rounded-xl p-5 w-96 shadow-2xl animate-in fade-in zoom-in-95 duration-200">
+                        <h3 className="text-sm font-bold text-dashboard-foreground mb-3">
+                            Add Link
+                        </h3>
+                        <input
+                            id="rich-text-link-url"
+                            aria-label="Link URL"
+                            type="url"
+                            value={linkUrl}
+                            onChange={(e) => setLinkUrl(e.target.value)}
+                            onKeyDown={(e) =>
+                                e.key === "Enter" && handleLinkSubmit()
+                            }
+                            placeholder="https://example.com"
+                            className="w-full px-3 py-1.5 bg-dashboard-background/70 border border-dashboard-border rounded-lg focus:outline-none focus:ring-1 focus:ring-dashboard-primary/40 text-dashboard-foreground text-xs mb-3"
+                            autoFocus
+                        />
+                        <div className="flex gap-2 justify-end">
+                            <Button
+                                variant="ghost"
+                                size="sm"
+                                onClick={() => {
+                                    setLinkModalOpen(false);
+                                    setLinkUrl("");
+                                }}
+                            >
+                                {t("dashboard:common.cancel")}
+                            </Button>
+                            <Button size="sm" onClick={handleLinkSubmit}>
+                                Add Link
+                            </Button>
+                        </div>
+                    </div>
+                </div>
+            )}
+
+            {/* Image Modal */}
+            {imageModalOpen && (
+                <div className="fixed inset-0 bg-black/75 flex items-center justify-center z-50 backdrop-blur-xs">
+                    <div className="bg-dashboard-card border border-dashboard-border rounded-xl p-5 w-96 shadow-2xl animate-in fade-in zoom-in-95 duration-200">
+                        <h3 className="text-sm font-bold text-dashboard-foreground mb-3">
+                            Add Image
+                        </h3>
+                        <input
+                            id="rich-text-image-url"
+                            aria-label="Image URL"
+                            type="url"
+                            value={imageUrl}
+                            onChange={(e) => setImageUrl(e.target.value)}
+                            onKeyDown={(e) =>
+                                e.key === "Enter" && handleImageSubmit()
+                            }
+                            placeholder="https://example.com/image.jpg"
+                            className="w-full px-3 py-1.5 bg-dashboard-background/70 border border-dashboard-border rounded-lg focus:outline-none focus:ring-1 focus:ring-dashboard-primary/40 text-dashboard-foreground text-xs mb-3"
+                            autoFocus
+                        />
+                        <div className="flex gap-2 justify-end">
+                            <Button
+                                variant="ghost"
+                                onClick={() => {
+                                    setImageModalOpen(false);
+                                    setImageUrl("");
+                                }}
+                            >
+                                {t("dashboard:common.cancel")}
+                            </Button>
+                            <Button onClick={handleImageSubmit}>
+                                Add Image
+                            </Button>
+                        </div>
+                    </div>
+                </div>
+            )}
+
+            <style>{`
+                .ProseMirror p.is-editor-empty:first-child::before {
+                    content: attr(data-placeholder);
+                    float: left;
+                    color: var(--color-dashboard-muted-foreground);
+                    opacity: 0.6;
+                    pointer-events: none;
+                    height: 0;
+                }
+                .ProseMirror { outline: none !important; }
+                .ProseMirror p { margin: 0.5rem 0; color: var(--color-dashboard-foreground); opacity: 0.9; line-height: 1.75; }
+                .ProseMirror strong { color: var(--color-dashboard-foreground); font-weight: 700; }
+                .ProseMirror em { font-style: italic; color: var(--color-dashboard-foreground); opacity: 0.8; }
+                .ProseMirror u {
+                    text-decoration: underline;
+                    text-decoration-color: var(--color-dashboard-primary);
+                    text-underline-offset: 3px;
+                    opacity: 0.8;
+                }
+
+                /* ── Highlight ── */
+                .ProseMirror mark {
+                    background-color: var(--color-dashboard-primary);
+                    color: var(--color-dashboard-primary-foreground);
+                    border-radius: 3px;
+                    padding: 0.05em 0.2em;
+                }
+
+                .ProseMirror ul {
+                    list-style-type: disc !important;
+                    padding-left: 1.5rem !important;
+                    margin: 0.75rem 0 !important;
+                }
+                .ProseMirror ol {
+                    list-style-type: decimal !important;
+                    padding-left: 1.5rem !important;
+                    margin: 0.75rem 0 !important;
+                }
+                .ProseMirror li {
+                    display: list-item !important;
+                    margin: 0.25rem 0 !important;
+                    color: var(--color-dashboard-foreground);
+                    opacity: 0.9;
+                }
+                .ProseMirror li p { margin: 0 !important; }
+                .ProseMirror blockquote {
+                    border-left: 4px solid var(--color-dashboard-primary);
+                    padding: 0.5rem 0 0.5rem 1rem;
+                    margin: 1rem 0;
+                    font-style: italic;
+                    color: var(--color-dashboard-muted-foreground);
+                    background: color-mix(in srgb, var(--color-dashboard-primary) 8%, transparent);
+                    border-radius: 0 6px 6px 0;
+                }
+                .ProseMirror blockquote p { margin: 0.2rem 0 !important; }
+                .ProseMirror code {
+                    background: var(--color-dashboard-secondary);
+                    color: var(--color-dashboard-primary);
+                    font-family: 'Courier New', monospace;
+                    font-size: 0.88em;
+                    padding: 0.15em 0.45em;
+                    border-radius: 5px;
+                    border: 1px solid var(--color-dashboard-border);
+                }
+                .ProseMirror pre {
+                    background: var(--color-dashboard-background);
+                    border: 1px solid var(--color-dashboard-border);
+                    border-radius: 10px;
+                    padding: 1.25rem;
+                    margin: 1rem 0;
+                    overflow-x: auto;
+                }
+                .ProseMirror pre code {
+                    background: none;
+                    border: none;
+                    padding: 0;
+                    color: var(--color-dashboard-foreground);
+                    font-size: 0.9rem;
+                }
+                .ProseMirror a {
+                    color: var(--color-dashboard-primary);
+                    text-decoration: underline;
+                    text-underline-offset: 3px;
+                    text-decoration-color: var(--color-dashboard-primary);
+                    cursor: pointer;
+                }
+                .ProseMirror a:hover { opacity: 0.8; }
+                .ProseMirror img {
+                    max-width: 100%;
+                    height: auto;
+                    border-radius: 1rem;
+                    margin: 1.5rem 0;
+                    border: 1px solid var(--color-dashboard-border);
+                }
+            `}</style>
+        </div>
+    );
+}

package/src/components/SLACountdown.tsx

@@ -0,0 +1,133 @@
+import React from "react";
+import { cn } from "../support/utils";
+
+export interface SLACountdownProps extends React.HTMLAttributes<HTMLDivElement> {
+    stage: string;
+    remainingTime: string;
+    percentage: number;
+    isBreached?: boolean;
+    targetDate?: string;
+}
+
+export function SLADialIndicator({
+    percentage,
+    isBreached = false,
+    size = 18,
+}: {
+    percentage: number;
+    isBreached?: boolean;
+    size?: number;
+}) {
+    const radius = 7;
+    const circumference = 2 * Math.PI * radius;
+    const clampedPct = Math.min(Math.max(percentage, 0), 100);
+    const strokeDashoffset = circumference - (clampedPct / 100) * circumference;
+
+    const strokeColor = isBreached
+        ? "text-red-500"
+        : percentage > 75
+          ? "text-amber-500"
+          : "text-dashboard-muted-foreground";
+
+    return (
+        <div
+            className="relative inline-flex items-center justify-center shrink-0"
+            style={{ width: size, height: size }}
+            aria-hidden="true"
+        >
+            <svg
+                width={size}
+                height={size}
+                viewBox="0 0 20 20"
+                className="-rotate-90"
+            >
+                {/* Background track */}
+                <circle
+                    cx="10"
+                    cy="10"
+                    r={radius}
+                    className="stroke-dashboard-border"
+                    strokeWidth="2.5"
+                    fill="none"
+                />
+                {/* Progress arc */}
+                <circle
+                    cx="10"
+                    cy="10"
+                    r={radius}
+                    className={cn(strokeColor, "transition-all duration-300")}
+                    strokeWidth="2.5"
+                    strokeDasharray={circumference}
+                    strokeDashoffset={strokeDashoffset}
+                    strokeLinecap="round"
+                    fill={isBreached ? "currentColor" : "none"}
+                />
+            </svg>
+        </div>
+    );
+}
+
+export function SLACountdown({
+    stage,
+    remainingTime,
+    percentage,
+    isBreached = false,
+    targetDate,
+    className,
+    ...props
+}: SLACountdownProps) {
+    const breached = isBreached || percentage >= 100 || remainingTime.startsWith("-");
+
+    return (
+        <div
+            className={cn(
+                "flex items-center justify-between text-xs py-1 px-1 select-none",
+                className,
+            )}
+            {...props}
+        >
+            <span
+                className={cn(
+                    "font-medium",
+                    breached
+                        ? "text-red-500"
+                        : "text-dashboard-muted-foreground",
+                )}
+            >
+                {stage}
+            </span>
+
+            <div className="flex items-center gap-2.5">
+                <span
+                    className={cn(
+                        "font-mono font-medium text-xs",
+                        breached
+                            ? "text-red-500"
+                            : "text-dashboard-foreground",
+                    )}
+                >
+                    {remainingTime}
+                </span>
+
+                <SLADialIndicator
+                    percentage={percentage}
+                    isBreached={breached}
+                    size={16}
+                />
+
+                <span
+                    className={cn(
+                        "text-[11px] font-mono w-9 text-right",
+                        breached
+                            ? "text-red-500 font-semibold"
+                            : "text-dashboard-muted-foreground",
+                    )}
+                >
+                    {Math.round(percentage)}%
+                </span>
+            </div>
+        </div>
+    );
+}
+
+export default SLACountdown;

package/src/components/StatusBadge.tsx

@@ -0,0 +1,119 @@
+import { cn } from "../support/utils";
+import React from "react";
+import { ThemedText } from "../index";
+
+export type StatusBadgeVariant =
+    | "in-progress"
+    | "backlog"
+    | "review"
+    | "done"
+    | "resolved"
+    | "cancelled"
+    | "rejected"
+    | "warning"
+    | "pending"
+    | "neutral";
+
+export interface StatusBadgeProps extends Omit<React.ComponentProps<typeof ThemedText>, "variant"> {
+    variant?: StatusBadgeVariant;
+    label?: string;
+    dotColor?: string;
+    pulse?: boolean;
+    size?: "xs" | "sm";
+    shape?: "default" | "pill";
+    children?: React.ReactNode;
+}
+
+const variantStyles: Record<
+    StatusBadgeVariant,
+    { badgeClass: string; dotClass: string }
+> = {
+    "in-progress": {
+        badgeClass: "bg-sky-500/12 text-sky-400 border-sky-500/25",
+        dotClass: "bg-sky-400",
+    },
+    backlog: {
+        badgeClass:
+            "bg-dashboard-secondary text-dashboard-muted-foreground border-dashboard-border",
+        dotClass: "bg-dashboard-muted-foreground",
+    },
+    review: {
+        badgeClass: "bg-dashboard-primary/15 text-dashboard-primary border-dashboard-primary/30",
+        dotClass: "bg-dashboard-primary",
+    },
+    done: {
+        badgeClass: "bg-emerald-500/12 text-emerald-400 border-emerald-500/25",
+        dotClass: "bg-emerald-400",
+    },
+    resolved: {
+        badgeClass: "bg-emerald-500/12 text-emerald-400 border-emerald-500/25",
+        dotClass: "bg-emerald-400",
+    },
+    cancelled: {
+        badgeClass: "bg-red-500/12 text-red-400 border-red-500/25",
+        dotClass: "bg-red-400",
+    },
+    rejected: {
+        badgeClass: "bg-red-500/12 text-red-400 border-red-500/25",
+        dotClass: "bg-red-400",
+    },
+    warning: {
+        badgeClass: "bg-amber-500/12 text-amber-400 border-amber-500/25",
+        dotClass: "bg-amber-400",
+    },
+    pending: {
+        badgeClass: "bg-amber-500/12 text-amber-400 border-amber-500/25",
+        dotClass: "bg-amber-400",
+    },
+    neutral: {
+        badgeClass:
+            "bg-dashboard-secondary text-dashboard-muted-foreground border-dashboard-border",
+        dotClass: "bg-dashboard-muted-foreground",
+    },
+};
+
+export function StatusBadge({
+    variant = "neutral",
+    label,
+    dotColor,
+    pulse = false,
+    size = "xs",
+    shape = "pill",
+    children,
+    className,
+    ...props
+}: StatusBadgeProps) {
+    const config = variantStyles[variant] ?? variantStyles.neutral;
+    const content = label ?? children;
+
+    const sizeClass =
+        size === "xs"
+            ? "h-5 px-2 text-[10.5px] gap-1.5"
+            : "h-6 px-2.5 text-xs gap-1.5";
+
+    return (
+        <ThemedText
+            className={cn(
+                "inline-flex items-center font-semibold border transition-colors select-none shrink-0 whitespace-nowrap",
+                shape === "pill" ? "rounded-full" : "rounded-[5px]",
+                sizeClass,
+                config.badgeClass,
+                className,
+            )}
+            {...props}
+        >
+            <span
+                className={cn(
+                    "rounded-full shrink-0",
+                    size === "xs" ? "w-1.5 h-1.5" : "w-2 h-2",
+                    dotColor ? undefined : config.dotClass,
+                    pulse && "animate-pulse",
+                )}
+                style={dotColor ? { backgroundColor: dotColor } : undefined}
+            />
+            {content && <span>{content}</span>}
+        </ThemedText>
+    );
+}
+
+export default StatusBadge;