@gostack-framework/ui 0.0.0-stage → 0.1.0

package/src/components/StatusCards.tsx

@@ -0,0 +1,78 @@
+import { cn } from "../support/utils";
+import { LucidIconRender } from "./LucidIconRender";
+import { ThemedText } from "./ThemedText";
+
+interface StatusCardsProps {
+    icon?: React.ReactNode;
+    title: string;
+    value: string | number;
+    valueClassName?: string;
+    className?: string;
+    subtitle?: React.ReactNode;
+    delta?: string;
+    trend?: "up" | "down" | "neutral";
+}
+
+export default function StatusCards({
+    icon,
+    title,
+    value,
+    valueClassName,
+    className,
+    subtitle,
+    delta,
+    trend,
+}: StatusCardsProps) {
+    return (
+        <div
+            className={cn(
+                "bg-dashboard-card border border-dashboard-border rounded-lg p-3.5 flex flex-col justify-between gap-2.5 shadow-xs transition-colors hover:border-dashboard-primary/40",
+                className,
+            )}
+        >
+            <div className="flex items-center justify-between gap-2">
+                <ThemedText variant="label" className="text-[10.5px] font-semibold uppercase tracking-wider text-dashboard-muted-foreground line-clamp-1">
+                    {title}
+                </ThemedText>
+                {icon && (
+                    <span className="w-6 h-6 rounded-md bg-dashboard-secondary flex items-center justify-center text-dashboard-primary shrink-0 [&_svg]:size-3.5">
+                        <LucidIconRender iconName={icon} />
+                    </span>
+                )}
+            </div>
+
+            <div className="flex items-baseline justify-between gap-2">
+                <ThemedText
+                    variant="metric"
+                    className={cn(
+                        "text-[22px] sm:text-[24px] font-bold text-dashboard-foreground tracking-tight leading-none",
+                        valueClassName,
+                    )}
+                >
+                    {value}
+                </ThemedText>
+
+                {delta && (
+                    <span
+                        className={cn(
+                            "text-[10.5px] font-semibold px-1.5 py-0.5 rounded-[4px] border shrink-0",
+                            trend === "up"
+                                ? "bg-emerald-500/12 text-emerald-400 border-emerald-500/25"
+                                : trend === "down"
+                                  ? "bg-red-500/12 text-red-400 border-red-500/25"
+                                  : "bg-dashboard-secondary text-dashboard-muted-foreground border-dashboard-border",
+                        )}
+                    >
+                        {delta}
+                    </span>
+                )}
+            </div>
+
+            {subtitle && (
+                <div className="text-[11px] text-dashboard-muted-foreground leading-tight">
+                    {subtitle}
+                </div>
+            )}
+        </div>
+    );
+}

package/src/components/StatusProgressBar.tsx

@@ -0,0 +1,158 @@
+import { cn } from "../support/utils";
+import { Check } from "lucide-react";
+import React from "react";
+
+export interface ProgressBarStageObject<T extends string = string> {
+    id?: T;
+    statusKey?: T;
+    key?: T;
+    label: string;
+}
+
+export type ProgressBarStage<T extends string = string> =
+    | T
+    | ProgressBarStageObject<T>;
+
+export interface StatusProgressBarProps<T extends string = string> {
+    status: T;
+    stages: readonly ProgressBarStage<T>[] | ProgressBarStage<T>[];
+    onStatusChange?: (newStatus: T) => void;
+    className?: string;
+    containerClassName?: string;
+}
+
+export function StatusProgressBar<T extends string = string>({
+    status,
+    stages,
+    onStatusChange,
+    className,
+    containerClassName,
+}: StatusProgressBarProps<T>) {
+    const normalizedStages = React.useMemo(() => {
+        return stages.map((s) => {
+            if (typeof s === "string") {
+                return { id: s as T, label: s };
+            }
+            const anyStage = s as ProgressBarStageObject<T>;
+            const stageId = (anyStage.id ||
+                anyStage.statusKey ||
+                anyStage.key ||
+                anyStage.label) as T;
+            return {
+                id: stageId,
+                label: anyStage.label || String(stageId),
+            };
+        });
+    }, [stages]);
+
+    const currentIndex = React.useMemo(() => {
+        const found = normalizedStages.findIndex(
+            (s) =>
+                s.id.toLowerCase() === (status || "").toLowerCase() ||
+                s.label.toLowerCase() === (status || "").toLowerCase(),
+        );
+        return found !== -1 ? found : 0;
+    }, [normalizedStages, status]);
+
+    const progressPercent =
+        normalizedStages.length > 1
+            ? (currentIndex / (normalizedStages.length - 1)) * 100
+            : 0;
+
+    return (
+        <div
+            className={cn(
+                "w-full px-8 py-3 bg-dashboard-card/40 border-b border-dashboard-border overflow-x-auto hide-scrollbar shrink-0",
+                className,
+            )}
+        >
+            <div
+                className={cn(
+                    "relative flex items-center justify-between w-full max-w-4xl mx-auto min-w-140 px-6",
+                    containerClassName,
+                )}
+            >
+                {/* Background Connecting Line */}
+                <div className="absolute top-4 left-6 right-6 h-0.5 -translate-y-1/2 bg-dashboard-border z-0" />
+
+                {/* Active Filled Progress Line */}
+                <div
+                    className="absolute top-4 left-6 h-0.5 -translate-y-1/2 bg-dashboard-primary transition-all duration-500 ease-out z-0"
+                    style={{
+                        width: `calc(${progressPercent}% * (100% - 48px) / 100)`,
+                    }}
+                />
+
+                {/* Stage Steps */}
+                <div className="relative z-10 flex justify-between w-full">
+                    {normalizedStages.map((stage, idx) => {
+                        const isCompleted = idx < currentIndex;
+                        const isCurrent = idx === currentIndex;
+                        const isPending = idx > currentIndex;
+
+                        const nodeElement = (
+                            <div className="flex flex-col items-center gap-1.5 min-w-0 px-1">
+                                <div
+                                    className={cn(
+                                        "relative z-10 flex h-8 w-8 items-center justify-center rounded-full border-2 text-[11px] font-semibold transition-all duration-300",
+                                        isCompleted &&
+                                            "border-emerald-500 bg-emerald-500 text-white ring-4 ring-emerald-500/20",
+                                        isCurrent &&
+                                            "border-dashboard-primary bg-dashboard-primary text-white ring-4 ring-dashboard-primary/25 scale-105",
+                                        isPending &&
+                                            "border-dashboard-border bg-dashboard-card text-dashboard-muted-foreground",
+                                    )}
+                                >
+                                    {isCompleted ? (
+                                        <Check size={14} strokeWidth={3} />
+                                    ) : (
+                                        idx + 1
+                                    )}
+                                </div>
+
+                                <span
+                                    className={cn(
+                                        "max-w-22 text-center text-[10px] font-semibold leading-tight tracking-wide whitespace-nowrap",
+                                        isCompleted && "text-emerald-500",
+                                        isCurrent &&
+                                            "text-dashboard-primary font-bold",
+                                        isPending &&
+                                            "text-dashboard-muted-foreground",
+                                    )}
+                                >
+                                    {stage.label}
+                                </span>
+                            </div>
+                        );
+
+                        if (onStatusChange) {
+                            return (
+                                <button
+                                    key={stage.id}
+                                    type="button"
+                                    onClick={() => onStatusChange(stage.id)}
+                                    aria-label={`Change status to ${stage.label}`}
+                                    className="group cursor-pointer focus:outline-none flex flex-col items-center"
+                                >
+                                    {nodeElement}
+                                </button>
+                            );
+                        }
+
+                        return (
+                            <div
+                                key={stage.id}
+                                className="flex flex-col items-center"
+                            >
+                                {nodeElement}
+                            </div>
+                        );
+                    })}
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export const ProgressBar = StatusProgressBar;
+export default StatusProgressBar;

package/src/components/TableActions.tsx

@@ -0,0 +1,182 @@
+import { MoreHorizontal } from "lucide-react";
+import * as React from "react";
+import {
+    ContextMenuAdvancedItem,
+    ContextMenuAdvancedSeparator,
+    ContextMenuAdvancedSub,
+} from "./context menu core/contextMenuAdvanced";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from "./dropdown-menu";
+
+export interface TableActionItem<T> {
+    id: string;
+    label: React.ReactNode | ((item: T) => React.ReactNode);
+    icon?: React.ComponentType<{ size?: number; className?: string }>;
+    variant?: "default" | "destructive";
+    onClick: (item: T) => void;
+    /** Sub-actions for nested copy menu */
+    subActions?: {
+        label: string;
+        getValue: (item: T) => string;
+    }[];
+    /** Hide action condition */
+    hidden?: (item: T) => boolean;
+    /** Separator line after this action */
+    separator?: boolean;
+}
+
+export interface RowActionsDropdownProps<T> {
+    item: T;
+    actions: TableActionItem<T>[];
+}
+
+export function renderContextMenuItems<T>(
+    item: T,
+    actions: TableActionItem<T>[],
+): React.ReactNode {
+    return (
+        <>
+            {actions.map((action, index) => {
+                if (action.hidden && action.hidden(item)) return null;
+
+                const IconComponent = action.icon;
+                const labelText =
+                    typeof action.label === "function"
+                        ? action.label(item)
+                        : action.label;
+
+                if (action.subActions && action.subActions.length > 0) {
+                    return (
+                        <React.Fragment key={action.id || index}>
+                            <ContextMenuAdvancedSub
+                                icon={IconComponent}
+                                label={labelText}
+                            >
+                                {action.subActions.map((sub, sIdx) => (
+                                    <ContextMenuAdvancedItem
+                                        key={sIdx}
+                                        onClick={() => {
+                                            const val = sub.getValue(item);
+                                            if (val) {
+                                                navigator.clipboard.writeText(
+                                                    val,
+                                                );
+                                            }
+                                        }}
+                                    >
+                                        {sub.label}
+                                    </ContextMenuAdvancedItem>
+                                ))}
+                            </ContextMenuAdvancedSub>
+                            {action.separator && (
+                                <ContextMenuAdvancedSeparator className="bg-dashboard-border" />
+                            )}
+                        </React.Fragment>
+                    );
+                }
+
+                return (
+                    <React.Fragment key={action.id || index}>
+                        <ContextMenuAdvancedItem
+                            icon={IconComponent}
+                            variant={action.variant}
+                            onClick={() => action.onClick(item)}
+                            className={
+                                action.variant === "destructive"
+                                    ? "text-dashboard-destructive hover:bg-dashboard-destructive/15"
+                                    : undefined
+                            }
+                        >
+                            {labelText}
+                        </ContextMenuAdvancedItem>
+                        {action.separator && (
+                            <ContextMenuAdvancedSeparator className="bg-dashboard-border" />
+                        )}
+                    </React.Fragment>
+                );
+            })}
+        </>
+    );
+}
+
+export function RowActionsDropdown<T>({
+    item,
+    actions,
+}: RowActionsDropdownProps<T>) {
+    const visibleActions = actions.filter((a) => !a.hidden || !a.hidden(item));
+    if (visibleActions.length === 0) return null;
+
+    return (
+        <div onClick={(e) => e.stopPropagation()}>
+            <DropdownMenu>
+                <DropdownMenuTrigger
+                    aria-label="Row actions"
+                    className="p-1 rounded-md hover:bg-dashboard-secondary transition-colors outline-none cursor-pointer"
+                >
+                    <MoreHorizontal
+                        size={15}
+                        className="text-dashboard-muted-foreground"
+                    />
+                </DropdownMenuTrigger>
+                <DropdownMenuContent
+                    align="end"
+                    className="bg-dashboard-card border border-dashboard-border p-1 w-36 shadow-2xl rounded-xl"
+                >
+                    {visibleActions.map((action, index) => {
+                        const IconComponent = action.icon;
+                        const labelText =
+                            typeof action.label === "function"
+                                ? action.label(item)
+                                : action.label;
+
+                        if (action.subActions && action.subActions.length > 0) {
+                            return (
+                                <React.Fragment key={action.id || index}>
+                                    {action.subActions.map((sub, sIdx) => (
+                                        <DropdownMenuItem
+                                            key={sIdx}
+                                            onClick={() => {
+                                                const val = sub.getValue(item);
+                                                if (val) {
+                                                    navigator.clipboard.writeText(
+                                                        val,
+                                                    );
+                                                }
+                                            }}
+                                            className="gap-2 px-3 py-1.5 cursor-pointer rounded-lg transition-colors"
+                                        >
+                                            <span className="text-xs font-medium">
+                                                {sub.label}
+                                            </span>
+                                        </DropdownMenuItem>
+                                    ))}
+                                </React.Fragment>
+                            );
+                        }
+
+                        return (
+                            <DropdownMenuItem
+                                key={action.id || index}
+                                onClick={() => action.onClick(item)}
+                                className={
+                                    action.variant === "destructive"
+                                        ? "text-dashboard-destructive hover:bg-dashboard-destructive/15 gap-2 px-3 py-1.5 cursor-pointer rounded-lg transition-colors"
+                                        : "gap-2 px-3 py-1.5 cursor-pointer rounded-lg transition-colors"
+                                }
+                            >
+                                {IconComponent && <IconComponent size={14} />}
+                                <span className="text-xs font-medium">
+                                    {labelText}
+                                </span>
+                            </DropdownMenuItem>
+                        );
+                    })}
+                </DropdownMenuContent>
+            </DropdownMenu>
+        </div>
+    );
+}

package/src/components/TaskDetailsModal.tsx

@@ -0,0 +1,7 @@
+import { ClickUpTaskModal, type ClickUpTaskModalProps } from './ClickUpTaskModal';
+import { useChannelMembers } from '../integrations';
+export function TaskDetailsModal(props: ClickUpTaskModalProps) {
+    const { data: members } = useChannelMembers();
+    return <ClickUpTaskModal {...props} availableUsers={props.availableUsers ?? members.map(member => member.name)} />;
+}
+export type { ClickUpTaskData as Task, TaskNote } from "./ClickUpTaskModal";

package/src/components/ThemedText.tsx

@@ -0,0 +1,181 @@
+import { useLanguage } from "@gostack-framework/react";
+import { cn } from "../support/utils";
+import React from "react";
+import {
+    AnyFontOption,
+    TEXT_ALIGNMENTS_MAP,
+    TEXT_COLORS_MAP,
+    TEXT_TRANSFORMS_MAP,
+    ThemedTextAlign,
+    ThemedTextColor,
+    ThemedTextSize,
+    ThemedTextTransform,
+    ThemedTextVariant,
+    ThemedTextWeight,
+    useTypography,
+} from "../typography";
+
+// Types and Interfaces
+export interface ThemedTextProps extends Omit<
+    React.AllHTMLAttributes<HTMLElement>,
+    "as" | "color" | "size"
+> {
+    children?: React.ReactNode;
+    [key: string]: any;
+    variant?: ThemedTextVariant;
+    size?: ThemedTextSize;
+    weight?: ThemedTextWeight;
+    color?: ThemedTextColor;
+    font?: AnyFontOption;
+    align?: ThemedTextAlign;
+    transform?: ThemedTextTransform;
+    className?: string;
+    as?: React.ElementType;
+    truncate?: boolean;
+    italic?: boolean;
+    underline?: boolean;
+    lineThrough?: boolean;
+    fullWidth?: boolean;
+    htmlFor?: string;
+}
+
+// Utility Function for RTL-aware alignment
+const getAlignmentClass = (
+    align: ThemedTextProps["align"],
+    isRTL: boolean,
+): string => {
+    if (!align) return "";
+
+    if (isRTL) {
+        switch (align) {
+            case "left":
+                return TEXT_ALIGNMENTS_MAP.right;
+            case "right":
+                return TEXT_ALIGNMENTS_MAP.left;
+            case "start":
+                return TEXT_ALIGNMENTS_MAP.right;
+            case "end":
+                return TEXT_ALIGNMENTS_MAP.left;
+            default:
+                return TEXT_ALIGNMENTS_MAP[align] || "";
+        }
+    }
+
+    return TEXT_ALIGNMENTS_MAP[align] || "";
+};
+
+// Utility function to infer semantic HTML tag from variant if `as` is not provided
+const getDefaultComponent = (variant: ThemedTextVariant): React.ElementType => {
+    switch (variant) {
+        case "h1":
+        case "title":
+            return "h1";
+        case "h2":
+        case "section":
+        case "heading":
+            return "h2";
+        case "h3":
+        case "subheading":
+            return "h3";
+        case "h4":
+            return "h4";
+        case "label":
+        case "caption":
+            return "span";
+        case "metric":
+            return "div";
+        case "code":
+            return "code";
+        case "subtitle":
+        case "lead":
+        case "body":
+        case "sidebar":
+            return "button";
+        default:
+            return "p";
+    }
+};
+
+// Main Component
+const ThemedText: React.FC<ThemedTextProps> = ({
+    children,
+    variant = "body",
+    size,
+    weight,
+    color,
+    font,
+    align,
+    transform = "none",
+    className,
+    as: ComponentProp,
+    truncate = false,
+    italic = false,
+    underline = false,
+    lineThrough = false,
+    fullWidth = false,
+    ...props
+}) => {
+    const { isRTL } = useLanguage();
+    const { getFontFamilyClass, getVariantStyleClass } = useTypography();
+
+    const Component = ComponentProp || getDefaultComponent(variant);
+    const isHeading = [
+        "heading",
+        "h1",
+        "h2",
+        "h3",
+        "h4",
+        "title",
+        "section",
+        "subheading",
+    ].includes(variant);
+
+    // Resolve classes from centralized typography system
+    const classes = [
+        // Base classes
+        "transition-colors duration-200",
+
+        // Dynamically configured font family (respects user settings + RTL + explicit override)
+        getFontFamilyClass(font, isRTL, isHeading),
+
+        // Variant-specific styles: handles font size, font weight, leading, and tracking based on active density scale (compact, normal, comfortable)
+        getVariantStyleClass(variant),
+
+        // Color: explicit prop overrides variant default
+        color ? TEXT_COLORS_MAP[color] : "",
+
+        // RTL-aware text alignment
+        align ? getAlignmentClass(align, isRTL) : "",
+
+        // Text transform
+        TEXT_TRANSFORMS_MAP[transform] || "",
+
+        // Text decorations
+        italic && "italic",
+        underline && "underline",
+        lineThrough && "line-through",
+
+        // Truncation
+        truncate && "truncate",
+
+        // Full width
+        fullWidth && "w-full",
+
+        // Custom className
+        className,
+    ];
+
+    const combinedClassName = cn(...classes);
+
+    return React.createElement(
+        Component,
+        { className: combinedClassName, ...props },
+        children,
+    );
+};
+
+// Display name for debugging
+ThemedText.displayName = "ThemedText";
+
+export { ThemedText };
+export default ThemedText;

package/src/components/TicketWorkspaceLayout.tsx

@@ -0,0 +1,63 @@
+import { cn } from "../support/utils";
+import React from "react";
+
+export interface TicketWorkspaceLayoutProps {
+    header?: React.ReactNode;
+    mainContent: React.ReactNode;
+    sidebarContent: React.ReactNode;
+    footerActions?: React.ReactNode;
+    className?: string;
+    sidebarWidthClassName?: string;
+}
+
+export function TicketWorkspaceLayout({
+    header,
+    mainContent,
+    sidebarContent,
+    footerActions,
+    className,
+    sidebarWidthClassName = "lg:w-[340px] xl:w-[380px]",
+}: TicketWorkspaceLayoutProps) {
+    return (
+        <div
+            className={cn(
+                "flex flex-col w-full h-full min-h-[70vh] bg-dashboard-background select-none",
+                className,
+            )}
+        >
+            {/* Top Workspace Header Bar */}
+            {header && (
+                <div className="shrink-0 border-b border-dashboard-border bg-dashboard-card dark:bg-dashboard-card/40 px-4 py-3 backdrop-blur-md">
+                    {header}
+                </div>
+            )}
+
+            {/* Split View Content */}
+            <div className="flex-1 flex flex-col lg:flex-row overflow-hidden">
+                {/* Left Column (Main Ticket Body) */}
+                <div className="flex-1 overflow-y-auto p-4 lg:p-6 space-y-6">
+                    {mainContent}
+                </div>
+
+                {/* Right Column (SLA & Pinned Metadata Sidebar) */}
+                <div
+                    className={cn(
+                        "shrink-0 border-t lg:border-t-0 lg:border-l border-dashboard-border bg-dashboard-card dark:bg-dashboard-card/30 overflow-y-auto p-4 space-y-5",
+                        sidebarWidthClassName,
+                    )}
+                >
+                    {sidebarContent}
+                </div>
+            </div>
+
+            {/* Optional Floating / Fixed Footer Actions */}
+            {footerActions && (
+                <div className="shrink-0 border-t border-dashboard-border bg-dashboard-card dark:bg-dashboard-card/80 px-4 py-2.5 backdrop-blur-md flex items-center justify-end gap-3">
+                    {footerActions}
+                </div>
+            )}
+        </div>
+    );
+}
+
+export default TicketWorkspaceLayout;