@gostack-framework/ui 0.0.0-stage → 0.1.0

package/src/components/Error.tsx

@@ -0,0 +1,248 @@
+import { useLanguage } from "@gostack-framework/react";
+
+interface ErrorProps {
+    message: string;
+    variant?: "inline" | "card" | "banner";
+    showIcon?: boolean;
+    title?: string;
+    helpText?: string;
+    onRetry?: () => void;
+    onHelp?: () => void;
+    showButtons?: boolean;
+}
+
+export function ErrorComponent(props: ErrorProps | string) {
+    const { t } = useLanguage();
+    const config: ErrorProps =
+        typeof props === "string"
+            ? {
+                  message: props,
+                  variant: "card",
+                  showIcon: true,
+                  showButtons: true,
+              }
+            : {
+                  message: props.message,
+                  variant: props.variant || "card",
+                  showIcon: props.showIcon !== false,
+                  title: props.title,
+                  helpText: props.helpText,
+                  onRetry: props.onRetry,
+                  onHelp: props.onHelp,
+                  showButtons: props.showButtons !== false,
+              };
+
+    const {
+        message,
+        variant,
+        showIcon,
+        title,
+        helpText,
+        onRetry,
+        onHelp,
+        showButtons,
+    } = config;
+
+    const ErrorIcon = () => (
+        <svg
+            className="w-6 h-6 shrink-0"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+            />
+        </svg>
+    );
+
+    const InlineVariant = () => (
+        <div className="flex justify-center items-center gap-2 text-xs text-dashboard-destructive">
+            {showIcon && <ErrorIcon />}
+            <span>{message}</span>
+        </div>
+    );
+
+    const BannerVariant = () => (
+        <div className="bg-dashboard-destructive/10 border-l-4 border-dashboard-destructive p-3.5 rounded-lg">
+            <div className="flex items-start gap-2.5">
+                {showIcon && (
+                    <div className="text-dashboard-destructive mt-0.5">
+                        <ErrorIcon />
+                    </div>
+                )}
+                <div className="flex-1">
+                    {title && (
+                        <h4 className="text-xs font-semibold text-dashboard-destructive mb-1">
+                            {title}
+                        </h4>
+                    )}
+                    <p className="text-xs text-dashboard-muted-foreground">
+                        {message}
+                    </p>
+                </div>
+            </div>
+        </div>
+    );
+
+    const CardVariant = () => (
+        <div className="max-w-md w-full mx-4">
+            <div className="bg-dashboard-card border border-dashboard-border rounded-xl shadow-2xl p-6 transition-all duration-300">
+                {/* Header with Icon */}
+                <div className="flex flex-col items-center text-center mb-5">
+                    {showIcon && (
+                        <div className="w-12 h-12 rounded-xl bg-dashboard-destructive/15 flex items-center justify-center text-dashboard-destructive mb-3 ring-1 ring-dashboard-destructive/30">
+                            <svg
+                                className="w-6 h-6"
+                                fill="none"
+                                stroke="currentColor"
+                                viewBox="0 0 24 24"
+                            >
+                                <path
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    strokeWidth={2}
+                                    d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                                />
+                            </svg>
+                        </div>
+                    )}
+                    <h3 className="text-base font-bold text-dashboard-foreground mb-1.5">
+                        {title || t("error.defaultTitle")}
+                    </h3>
+                    <p className="text-xs text-dashboard-muted-foreground leading-relaxed">
+                        {message}
+                    </p>
+                </div>
+
+                {/* Help Text Section */}
+                {helpText && (
+                    <div className="mb-5 p-3.5 bg-dashboard-secondary/40 rounded-lg border border-dashboard-border">
+                        <div className="flex items-start gap-2.5">
+                            <svg
+                                className="w-4 h-4 text-dashboard-primary shrink-0 mt-0.5"
+                                fill="none"
+                                stroke="currentColor"
+                                viewBox="0 0 24 24"
+                            >
+                                <path
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    strokeWidth={2}
+                                    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                                />
+                            </svg>
+                            <div className="flex-1">
+                                <h4 className="text-xs font-semibold text-dashboard-foreground mb-0.5">
+                                    {t("error.howToFix")}
+                                </h4>
+                                <p className="text-xs text-dashboard-muted-foreground leading-relaxed">
+                                    {helpText}
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                )}
+
+                {/* Action Buttons */}
+                {showButtons && (
+                    <div className="flex flex-col sm:flex-row gap-2.5">
+                        {onRetry && (
+                            <button
+                                onClick={onRetry}
+                                className="flex-1 px-4 py-2 bg-dashboard-destructive hover:bg-dashboard-destructive/90 text-white font-medium text-xs rounded-lg transition-colors flex items-center justify-center gap-1.5 shadow-xs cursor-pointer"
+                            >
+                                <svg
+                                    className="w-3.5 h-3.5"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    viewBox="0 0 24 24"
+                                >
+                                    <path
+                                        strokeLinecap="round"
+                                        strokeLinejoin="round"
+                                        strokeWidth={2}
+                                        d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+                                    />
+                                </svg>
+                                {t("error.tryAgain")}
+                            </button>
+                        )}
+                        {onHelp && (
+                            <button
+                                onClick={onHelp}
+                                className="flex-1 px-4 py-2 bg-dashboard-secondary/60 hover:bg-dashboard-secondary text-dashboard-foreground font-medium text-xs rounded-lg border border-dashboard-border transition-colors flex items-center justify-center gap-1.5 cursor-pointer"
+                            >
+                                <svg
+                                    className="w-3.5 h-3.5"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    viewBox="0 0 24 24"
+                                >
+                                    <path
+                                        strokeLinecap="round"
+                                        strokeLinejoin="round"
+                                        strokeWidth={2}
+                                        d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                                    />
+                                </svg>
+                                {t("error.getHelp")}
+                            </button>
+                        )}
+                        {!onRetry && !onHelp && (
+                            <button
+                                onClick={() => window.location.reload()}
+                                className="w-full px-4 py-2 bg-dashboard-primary hover:bg-dashboard-primary/90 text-white font-medium text-xs rounded-lg transition-colors flex items-center justify-center gap-1.5 shadow-xs cursor-pointer"
+                            >
+                                <svg
+                                    className="w-3.5 h-3.5"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    viewBox="0 0 24 24"
+                                >
+                                    <path
+                                        strokeLinecap="round"
+                                        strokeLinejoin="round"
+                                        strokeWidth={2}
+                                        d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+                                    />
+                                </svg>
+                                {t("error.reloadPage")}
+                            </button>
+                        )}
+                    </div>
+                )}
+
+                {/* Additional Info */}
+                <div className="mt-5 pt-3.5 border-t border-dashboard-border">
+                    <p className="text-[11px] text-dashboard-muted-foreground text-center">
+                        {t("error.contactSupport")}
+                    </p>
+                </div>
+            </div>
+        </div>
+    );
+
+    const variantRender = () => {
+        switch (variant) {
+            case "inline":
+                return <InlineVariant />;
+            case "banner":
+                return <BannerVariant />;
+            case "card":
+                return <CardVariant />;
+            default:
+                return <InlineVariant />;
+        }
+    };
+
+    return (
+        <div className="w-full h-screen flex justify-center items-center bg-transparent">
+            {variantRender()}
+        </div>
+    );
+}

package/src/components/ErrorState.tsx

@@ -0,0 +1,199 @@
+/**
+ * ErrorState — modern error UI for inline, card, and full-page contexts.
+ */
+
+import { cn } from "../support/utils";
+import { AlertTriangle, Home, RefreshCw, WifiOff } from "lucide-react";
+import { motion } from "motion/react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router";
+import type { BaseComponentProps, ErrorStateProps } from "../types";
+import { Button } from "./button";
+import { ThemedText } from "../index";
+
+interface Props extends ErrorStateProps, BaseComponentProps {}
+
+/** Normalizes unknown errors into a display message. */
+export function getErrorMessage(
+    error: unknown,
+    fallback = "Something went wrong. Please try again.",
+): string {
+    if (error instanceof Error && error.message) return error.message;
+    if (typeof error === "string" && error.trim()) return error;
+    if (
+        error &&
+        typeof error === "object" &&
+        "message" in error &&
+        typeof (error as { message: unknown }).message === "string"
+    ) {
+        return (error as { message: string }).message;
+    }
+    return fallback;
+}
+
+export function ErrorState({
+    title,
+    message,
+    error,
+    onRetry,
+    showIcon = true,
+    variant = "fullPage",
+    primaryColor,
+    accentColor,
+    className = "",
+    testId,
+}: Props) {
+    const { t } = useTranslation();
+    const navigate = useNavigate();
+    const resolvedMessage =
+        message ??
+        (error !== undefined
+            ? getErrorMessage(error)
+            : t("errors.unexpected", "Something went wrong"));
+    const resolvedTitle =
+        title ?? t("errors.unexpected", "Something went wrong");
+
+    if (variant === "inline") {
+        return (
+            <motion.div
+                role="alert"
+                initial={{ opacity: 0, y: 4 }}
+                animate={{ opacity: 1, y: 0 }}
+                className={cn(
+                    "inline-flex items-center gap-2.5 rounded-lg border border-dashboard-destructive/20 bg-dashboard-destructive/10 px-3 py-1.5 text-xs text-dashboard-destructive",
+                    className,
+                )}
+                data-testid={testId}
+            >
+                {showIcon && (
+                    <AlertTriangle className="size-3.5 shrink-0 text-dashboard-destructive" />
+                )}
+                <ThemedText as="span">{resolvedMessage}</ThemedText>
+                {onRetry && (
+                    <button
+                        type="button"
+                        onClick={onRetry}
+                        className="font-semibold text-dashboard-destructive/80 underline-offset-2 hover:underline cursor-pointer"
+                    >
+                        {t("actions.retry", "Retry")}
+                    </button>
+                )}
+            </motion.div>
+        );
+    }
+
+    const Icon = variant === "fullPage" ? WifiOff : AlertTriangle;
+
+    const card = (
+        <motion.div
+            role="alert"
+            initial={{ opacity: 0, y: 20, scale: 0.98 }}
+            animate={{ opacity: 1, y: 0, scale: 1 }}
+            transition={{ duration: 0.35, ease: [0.25, 0.1, 0.25, 1] }}
+            className={cn(
+                "relative w-full max-w-md overflow-hidden rounded-xl border border-dashboard-border bg-dashboard-card p-6 shadow-2xl md:p-8",
+                className,
+            )}
+            data-testid={testId}
+        >
+            <div
+                aria-hidden
+                className="pointer-events-none absolute -right-16 -top-16 size-48 rounded-full opacity-20 blur-3xl"
+                style={{
+                    background: accentColor ?? "var(--color-dashboard-primary)",
+                }}
+            />
+            <div
+                aria-hidden
+                className="pointer-events-none absolute -bottom-20 -left-16 size-56 rounded-full opacity-20 blur-3xl"
+                style={{
+                    background:
+                        primaryColor ?? "var(--color-dashboard-secondary)",
+                }}
+            />
+
+            <div className="relative z-10 flex flex-col items-center text-center">
+                {showIcon && (
+                    <motion.div
+                        initial={{ scale: 0.8, opacity: 0 }}
+                        animate={{ scale: 1, opacity: 1 }}
+                        transition={{ delay: 0.1, duration: 0.35 }}
+                        className="mb-4 flex size-12 items-center justify-center rounded-xl bg-dashboard-destructive/15 ring-1 ring-dashboard-destructive/30"
+                    >
+                        <Icon
+                            className="size-6 text-dashboard-destructive"
+                            strokeWidth={2}
+                        />
+                    </motion.div>
+                )}
+
+                <ThemedText variant="body" as="p" className="mb-1.5 font-bold uppercase tracking-wider text-dashboard-destructive">
+                    {t("errors.errorLabel", "Error")}
+                </ThemedText>
+                <ThemedText as="h2" className="text-xl font-bold tracking-tight text-dashboard-foreground">
+                    {resolvedTitle}
+                </ThemedText>
+                <ThemedText as="p" className="mt-2 max-w-sm text-xs leading-relaxed text-dashboard-muted-foreground">
+                    {resolvedMessage}
+                </ThemedText>
+
+                <div className="mt-6 flex w-full flex-col gap-2.5 sm:flex-row sm:justify-center">
+                    {onRetry && (
+                        <Button
+                            type="button"
+                            onClick={onRetry}
+                            className="h-9 gap-1.5 rounded-lg bg-dashboard-destructive px-4 text-xs font-medium text-white shadow-xs hover:bg-dashboard-destructive/90"
+                        >
+                            <RefreshCw className="size-3.5" />
+                            {t("actions.tryAgain", "Try again")}
+                        </Button>
+                    )}
+                    <Button
+                        type="button"
+                        variant="outline"
+                        className="h-9 gap-1.5 rounded-lg border-dashboard-border bg-dashboard-card/50 px-4 text-xs font-medium hover:bg-dashboard-secondary text-dashboard-foreground"
+                        onClick={() => {
+                            navigate("/");
+                        }}
+                    >
+                        <Home className="size-3.5" />
+                        {t("actions.goHome", "Go home")}
+                    </Button>
+                </div>
+            </div>
+        </motion.div>
+    );
+
+    if (variant === "fullPage") {
+        return (
+            <div
+                className={cn(
+                    "relative flex h-[90vh] items-center justify-center overflow-hidden px-6 py-16",
+                    className,
+                )}
+                data-testid={testId}
+            >
+                <motion.div
+                    className="pointer-events-none absolute inset-0 opacity-40"
+                    style={{
+                        backgroundImage: `radial-gradient(circle at 20% 20%, ${accentColor ?? "var(--color-dashboard-accent)"}33 0%, transparent 45%), radial-gradient(circle at 80% 80%, ${primaryColor ?? "var(--color-dashboard-secondary)"}44 0%, transparent 50%)`,
+                    }}
+                />
+                <div className="relative z-10 w-full flex justify-center">
+                    {card}
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <motion.div
+            className={cn("flex w-full justify-center p-4", className)}
+            data-testid={testId}
+        >
+            {card}
+        </motion.div>
+    );
+}
+
+export default ErrorState;

package/src/components/FileAttachmentChip.tsx

@@ -0,0 +1,84 @@
+import { cn } from "../support/utils";
+import { Download, Paperclip, Trash2 } from "lucide-react";
+import React from "react";
+
+export interface FileAttachmentChipProps extends React.HTMLAttributes<HTMLDivElement> {
+    name: string;
+    size?: string;
+    url?: string;
+    onDownload?: () => void;
+    onDelete?: () => void;
+}
+
+export function FileAttachmentChip({
+    name,
+    size,
+    url,
+    onDownload,
+    onDelete,
+    className,
+    ...props
+}: FileAttachmentChipProps) {
+    const handleDownload = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        if (onDownload) {
+            onDownload();
+        } else if (url) {
+            window.open(url, "_blank");
+        }
+    };
+
+    const handleDelete = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        onDelete?.();
+    };
+
+    return (
+        <div
+            className={cn(
+                "group flex items-center justify-between gap-3 px-3 py-2 rounded-lg bg-dashboard-secondary/60 hover:bg-dashboard-secondary border border-dashboard-border transition-colors text-xs select-none",
+                className,
+            )}
+            {...props}
+        >
+            <div className="flex items-center gap-2 min-w-0 flex-1">
+                <Paperclip className="w-3.5 h-3.5 text-dashboard-muted-foreground shrink-0" />
+                <span className="truncate font-medium text-dashboard-foreground">
+                    {name}
+                </span>
+            </div>
+
+            <div className="flex items-center gap-2 shrink-0">
+                {size && (
+                    <span className="text-[11px] text-dashboard-muted-foreground tabular-nums">
+                        {size}
+                    </span>
+                )}
+
+                {(onDownload || url) && (
+                    <button
+                        type="button"
+                        onClick={handleDownload}
+                        aria-label={`Download ${name}`}
+                        className="p-1 text-dashboard-muted-foreground hover:text-dashboard-foreground hover:bg-dashboard-muted/30 rounded transition-colors"
+                    >
+                        <Download className="w-3.5 h-3.5" />
+                    </button>
+                )}
+
+                {onDelete && (
+                    <button
+                        type="button"
+                        onClick={handleDelete}
+                        aria-label={`Delete ${name}`}
+                        className="p-1 text-dashboard-muted-foreground hover:text-red-400 hover:bg-red-500/10 rounded transition-colors"
+                    >
+                        <Trash2 className="w-3.5 h-3.5" />
+                    </button>
+                )}
+            </div>
+        </div>
+    );
+}
+
+export default FileAttachmentChip;

package/src/components/FilterConditionChip.tsx

@@ -0,0 +1,56 @@
+import { cn } from "../support/utils";
+import { X } from "lucide-react";
+import React from "react";
+
+export interface FilterConditionChipProps extends React.HTMLAttributes<HTMLDivElement> {
+    field: string;
+    operator?: string;
+    value: string;
+    onRemove?: () => void;
+    onClick?: () => void;
+}
+
+export function FilterConditionChip({
+    field,
+    operator = "=",
+    value,
+    onRemove,
+    onClick,
+    className,
+    ...props
+}: FilterConditionChipProps) {
+    return (
+        <div
+            className={cn(
+                "inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md bg-dashboard-secondary/80 hover:bg-dashboard-secondary border border-dashboard-border text-xs text-dashboard-foreground font-medium transition-colors select-none",
+                onClick && "cursor-pointer",
+                className,
+            )}
+            onClick={onClick}
+            {...props}
+        >
+            <span className="text-dashboard-muted-foreground">{field}</span>
+            <span className="text-dashboard-primary font-mono text-[11px]">
+                {operator}
+            </span>
+            <span className="text-dashboard-foreground font-semibold">
+                {value}
+            </span>
+            {onRemove && (
+                <button
+                    type="button"
+                    aria-label={`Remove filter for ${field}`}
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        onRemove();
+                    }}
+                    className="ml-1 p-0.5 rounded-xs text-dashboard-muted-foreground hover:text-dashboard-foreground hover:bg-dashboard-muted/40 transition-colors"
+                >
+                    <X className="w-3 h-3" />
+                </button>
+            )}
+        </div>
+    );
+}
+
+export default FilterConditionChip;