@gunjo/ui 0.0.1-alpha.1 → 0.0.1-alpha.2

package/src/components/display/GaugeChart.tsx

@@ -0,0 +1,219 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+import type { ChartColor } from "./chart-utils"
+import {
+    chartLabelToString,
+    clamp,
+    defaultChartValueFormatter,
+    getChartColor,
+    normalizeChartValue,
+} from "./chart-utils"
+import { ChartFloatingTooltip } from "./chart-tooltip"
+import type { GaugeChartVariantKey } from "./generated/variant-keys"
+import { gaugeChartDefaultVariantKey } from "./generated/default-variant-keys"
+
+export interface GaugeChartProps extends React.HTMLAttributes<HTMLDivElement> {
+    value: number
+    min?: number
+    max?: number
+    variant?: GaugeChartVariantKey
+    color?: ChartColor
+    label?: React.ReactNode
+    valueLabel?: React.ReactNode
+    thickness?: number
+    formatValue?: (value: number) => React.ReactNode
+    rangeLabel?: React.ReactNode
+}
+
+const gaugeChartVariantClasses: Record<GaugeChartVariantKey, string> = {
+    compact: "h-[112px] w-full p-0",
+    default: "h-[144px] w-full p-0",
+}
+
+const gaugeChartSizeClasses: Record<GaugeChartVariantKey, string> = {
+    compact: "max-w-44",
+    default: "max-w-56",
+}
+
+const GaugeChart = React.forwardRef<HTMLDivElement, GaugeChartProps>(
+    (
+        {
+            className,
+            value,
+            min = 0,
+            max = 100,
+            variant = gaugeChartDefaultVariantKey,
+            color,
+            label,
+            valueLabel,
+            thickness = variant === "compact" ? 16 : 22,
+            formatValue = defaultChartValueFormatter,
+            rangeLabel = "Range",
+            ...props
+        },
+        ref
+    ) => {
+        const [tooltipOpen, setTooltipOpen] = React.useState(false)
+        const [tooltipPosition, setTooltipPosition] = React.useState({
+            x: 50,
+            y: 24,
+        })
+        const chartRef = React.useRef<HTMLDivElement | null>(null)
+        const touchTooltipStickyRef = React.useRef(false)
+        const range = Math.max(max - min, 1)
+        const normalizedValue = clamp(value, min, max)
+        const percent = normalizeChartValue(normalizedValue - min, range)
+        const degrees = (percent / 100) * 180
+        const activeColor = getChartColor(color, 0)
+        const trackColor = "hsl(var(--muted))"
+        const background = `conic-gradient(from 270deg, ${activeColor} 0deg ${degrees}deg, ${trackColor} ${degrees}deg 180deg, transparent 180deg 360deg)`
+        const formattedValue = formatValue(normalizedValue)
+        const displayValue = valueLabel ?? formattedValue
+        const rangeValueLabel = `${formatValue(min)} - ${formatValue(max)}`
+        const ariaValue = chartLabelToString(
+            displayValue,
+            chartLabelToString(formattedValue, String(normalizedValue))
+        )
+        const ariaLabel = `${chartLabelToString(label, "Gauge")}: ${ariaValue} (${chartLabelToString(rangeLabel, "Range")}: ${rangeValueLabel})`
+
+        const updateTooltipAtPoint = (
+            element: HTMLDivElement,
+            clientX: number,
+            clientY: number
+        ) => {
+            const rect = element.getBoundingClientRect()
+            const radius = rect.width / 2
+            const centerX = rect.left + radius
+            const centerY = rect.top + radius
+            const dx = clientX - centerX
+            const dy = clientY - centerY
+            const distance = Math.sqrt(dx * dx + dy * dy)
+            const innerRadius = Math.max(radius - thickness, 0)
+            const angle = (Math.atan2(dy, dx) * 180) / Math.PI
+            const cssAngle = (((angle + 90) % 360) + 360) % 360
+            const sweep = (cssAngle - 270 + 360) % 360
+            const isOnActiveArc =
+                distance >= innerRadius &&
+                distance <= radius &&
+                sweep <= degrees &&
+                sweep <= 180
+
+            if (!isOnActiveArc) {
+                setTooltipOpen(false)
+                return
+            }
+
+            setTooltipPosition({
+                x: clamp(((clientX - rect.left) / rect.width) * 100),
+                y: clamp(((clientY - rect.top) / rect.height) * 100),
+            })
+            setTooltipOpen(true)
+        }
+        const handlePointerMove = (event: React.PointerEvent<HTMLDivElement>) => {
+            if (event.pointerType !== "touch") {
+                touchTooltipStickyRef.current = false
+            }
+            updateTooltipAtPoint(event.currentTarget, event.clientX, event.clientY)
+        }
+        const handlePointerDown = (event: React.PointerEvent<HTMLDivElement>) => {
+            touchTooltipStickyRef.current = event.pointerType === "touch"
+            if (event.pointerType === "touch") {
+                event.preventDefault()
+            }
+            event.currentTarget.focus({ preventScroll: true })
+            updateTooltipAtPoint(event.currentTarget, event.clientX, event.clientY)
+        }
+        const handleTouchStart = (event: React.TouchEvent<HTMLDivElement>) => {
+            const touch = event.touches[0]
+            if (!touch) return
+            touchTooltipStickyRef.current = true
+            event.preventDefault()
+            event.currentTarget.focus({ preventScroll: true })
+            updateTooltipAtPoint(event.currentTarget, touch.clientX, touch.clientY)
+        }
+
+        return (
+            <div
+                ref={ref}
+                className={cn(
+                    gaugeChartVariantClasses[variant],
+                    "flex flex-col items-center justify-end",
+                    className
+                )}
+                {...props}
+            >
+                <div
+                    ref={chartRef}
+                    className={cn(
+                        "relative aspect-[2/1] w-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+                        gaugeChartSizeClasses[variant]
+                    )}
+                    role="img"
+                    aria-label={props["aria-label"] ?? ariaLabel}
+                    tabIndex={0}
+                    onFocus={() => {
+                        setTooltipPosition({ x: percent, y: 24 })
+                        setTooltipOpen(true)
+                    }}
+                    onBlur={() => {
+                        touchTooltipStickyRef.current = false
+                        setTooltipOpen(false)
+                    }}
+                    onPointerDown={handlePointerDown}
+                    onPointerMove={handlePointerMove}
+                    onTouchStart={handleTouchStart}
+                    onPointerLeave={() => {
+                        if (touchTooltipStickyRef.current) return
+                        setTooltipOpen(false)
+                    }}
+                    onPointerCancel={() => {
+                        touchTooltipStickyRef.current = false
+                        setTooltipOpen(false)
+                    }}
+                >
+                    <div
+                        className="pointer-events-none absolute inset-0 overflow-hidden"
+                        aria-hidden="true"
+                    >
+                        <div
+                            className="absolute inset-x-0 top-0 aspect-square rounded-full"
+                            style={{ background }}
+                        />
+                        <div
+                            className="absolute rounded-full bg-card"
+                            style={{
+                                insetInline: thickness,
+                                top: thickness,
+                                width: `calc(100% - ${thickness * 2}px)`,
+                                aspectRatio: "1 / 1",
+                            }}
+                        />
+                    </div>
+                    <div className="pointer-events-none absolute inset-x-0 bottom-0 flex flex-col items-center px-4 text-center">
+                        <span className="text-2xl font-semibold tracking-tight">
+                            {valueLabel ?? formatValue(normalizedValue)}
+                        </span>
+                        {label !== undefined ? (
+                            <span className="text-xs text-muted-foreground">{label}</span>
+                        ) : null}
+                    </div>
+                    <ChartFloatingTooltip
+                        label={label}
+                        value={displayValue}
+                        description={[rangeLabel, ": ", rangeValueLabel]}
+                        position={tooltipPosition}
+                        open={tooltipOpen}
+                        anchorRef={chartRef}
+                        onOpenChange={setTooltipOpen}
+                    />
+                </div>
+            </div>
+        )
+    }
+)
+GaugeChart.displayName = "GaugeChart"
+
+export { GaugeChart }

package/src/components/display/HeatmapChart.tsx

@@ -0,0 +1,266 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+import type { ChartColor } from "./chart-utils"
+import {
+    clamp,
+    defaultChartValueFormatter,
+    getChartColor,
+    normalizeChartValue,
+} from "./chart-utils"
+import { ChartTooltip } from "./chart-tooltip"
+import type { HeatmapChartVariantKey } from "./generated/variant-keys"
+import { heatmapChartDefaultVariantKey } from "./generated/default-variant-keys"
+
+export interface HeatmapChartCell {
+    x: string
+    y: string
+    value: number
+    color?: ChartColor
+    description?: React.ReactNode
+}
+
+export interface HeatmapChartSummary {
+    x: string
+    value: number
+    color?: ChartColor
+    description?: React.ReactNode
+}
+
+export interface HeatmapChartProps extends React.HTMLAttributes<HTMLDivElement> {
+    data: HeatmapChartCell[]
+    xLabels: string[]
+    yLabels: string[]
+    summary?: HeatmapChartSummary[]
+    variant?: HeatmapChartVariantKey
+    max?: number
+    summaryMax?: number
+    color?: ChartColor
+    selectedCell?: { x: string; y: string }
+    showValues?: boolean
+    showSummaryValues?: boolean
+    formatValue?: (value: number) => React.ReactNode
+    summaryLabel?: React.ReactNode
+    onCellSelect?: (cell: HeatmapChartCell, selection: { x: string; y: string }) => void
+}
+
+const heatmapChartVariantClasses: Record<HeatmapChartVariantKey, string> = {
+    compact: "w-full p-0",
+    default: "w-full p-0",
+}
+
+const heatmapCellClasses: Record<HeatmapChartVariantKey, string> = {
+    compact: "min-h-6 rounded",
+    default: "min-h-8 rounded-md",
+}
+
+const heatmapLabelColumnWidth = "2.75rem"
+
+const HeatmapChart = React.forwardRef<HTMLDivElement, HeatmapChartProps>(
+    (
+        {
+            className,
+            data,
+            xLabels,
+            yLabels,
+            summary,
+            variant = heatmapChartDefaultVariantKey,
+            max,
+            summaryMax,
+            color,
+            selectedCell,
+            showValues = false,
+            showSummaryValues = true,
+            formatValue = defaultChartValueFormatter,
+            summaryLabel,
+            onCellSelect,
+            ...props
+        },
+        ref
+    ) => {
+        const values = data.map((cell) => cell.value)
+        const maxValue = Math.max(max ?? 0, ...values, 1)
+        const summaryValues = summary?.map((item) => item.value) ?? []
+        const maxSummaryValue = Math.max(summaryMax ?? 0, ...summaryValues, 1)
+        const cellMap = new Map(data.map((cell) => [`${cell.x}::${cell.y}`, cell]))
+        const summaryMap = new Map(summary?.map((item) => [item.x, item]) ?? [])
+        const canSelectCells = typeof onCellSelect === "function"
+
+        return (
+            <div
+                ref={ref}
+                className={cn(
+                    heatmapChartVariantClasses[variant],
+                    "min-w-0",
+                    className
+                )}
+                {...props}
+            >
+                {summary ? (
+                    <div
+                        className="mb-2 grid w-full min-w-0 items-end gap-1"
+                        style={{
+                            gridTemplateColumns: `${heatmapLabelColumnWidth} repeat(${xLabels.length}, minmax(0, 1fr))`,
+                        }}
+                    >
+                        <span className="truncate pr-1 text-right text-xs text-muted-foreground">
+                            {summaryLabel}
+                        </span>
+                        {xLabels.map((label, index) => {
+                            const item = summaryMap.get(label)
+                            const value = item?.value ?? 0
+                            const percent = normalizeChartValue(value, maxSummaryValue)
+                            const activeColor = getChartColor(
+                                item?.color ?? color ?? "primary",
+                                index
+                            )
+
+                            return (
+                                <ChartTooltip
+                                    key={`${label}-summary`}
+                                    label={label}
+                                    value={formatValue(value)}
+                                    description={item?.description}
+                                >
+                                    <span
+                                        className="flex min-h-14 min-w-0 flex-col items-center justify-end gap-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+                                        tabIndex={0}
+                                        aria-label={`${label}: ${formatValue(value)}`}
+                                    >
+                                        {showSummaryValues ? (
+                                            <span className="truncate text-[10px] font-medium tabular-nums text-muted-foreground">
+                                                {formatValue(value)}
+                                            </span>
+                                        ) : null}
+                                        <span className="flex h-10 w-full items-end justify-center">
+                                            <span
+                                                className="block w-3 rounded-full"
+                                                style={{
+                                                    height: `${Math.max(percent, 6)}%`,
+                                                    backgroundColor: activeColor,
+                                                    opacity: 0.35 + (clamp(percent, 0, 100) / 100) * 0.65,
+                                                }}
+                                                aria-hidden="true"
+                                            />
+                                        </span>
+                                    </span>
+                                </ChartTooltip>
+                            )
+                        })}
+                    </div>
+                ) : null}
+                <div
+                    className="grid w-full min-w-0 items-center gap-1"
+                    style={{
+                        gridTemplateColumns: `${heatmapLabelColumnWidth} repeat(${xLabels.length}, minmax(0, 1fr))`,
+                    }}
+                >
+                    <span aria-hidden="true" />
+                    {xLabels.map((label) => (
+                        <span
+                            key={label}
+                            className="min-w-0 truncate text-center text-xs text-muted-foreground"
+                        >
+                            {label}
+                        </span>
+                    ))}
+                    {yLabels.map((rowLabel) => (
+                        <React.Fragment key={rowLabel}>
+                            <span className="min-w-0 truncate pr-1 text-right text-xs text-muted-foreground">
+                                {rowLabel}
+                            </span>
+                            {xLabels.map((columnLabel) => {
+                                const cell = cellMap.get(`${columnLabel}::${rowLabel}`)
+                                const value = cell?.value ?? 0
+                                const percent = normalizeChartValue(value, maxValue)
+                                const opacity = 0.1 + (clamp(percent, 0, 100) / 100) * 0.9
+                                const cellColor = cell?.color ?? color ?? "primary"
+                                const activeColor = getChartColor(
+                                    cellColor,
+                                    0
+                                )
+                                const isSelected =
+                                    selectedCell?.x === columnLabel &&
+                                    selectedCell?.y === rowLabel
+                                const cellContent = (
+                                    <>
+                                        <span
+                                            className="absolute inset-0"
+                                            style={{
+                                                backgroundColor: activeColor,
+                                                opacity,
+                                            }}
+                                            aria-hidden="true"
+                                        />
+                                        {showValues ? (
+                                            <span
+                                                className={cn(
+                                                    "absolute inset-0 z-10 flex items-center justify-center px-0.5 text-center text-foreground"
+                                                )}
+                                            >
+                                                <span className="rounded-[3px] bg-background/75 px-1 shadow-sm">
+                                                    {formatValue(value)}
+                                                </span>
+                                            </span>
+                                        ) : null}
+                                    </>
+                                )
+                                const cellClassName = cn(
+                                    "relative block overflow-hidden bg-muted text-center text-[10px] font-medium tabular-nums",
+                                    "w-full min-w-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+                                    canSelectCells &&
+                                        "cursor-pointer border-0 p-0 transition-transform hover:scale-[1.04]",
+                                    !canSelectCells && "cursor-default",
+                                    heatmapCellClasses[variant],
+                                    isSelected &&
+                                        "z-10 ring-2 ring-foreground ring-offset-1 ring-offset-background"
+                                )
+
+                                return (
+                                    <ChartTooltip
+                                        key={`${columnLabel}-${rowLabel}`}
+                                        label={`${columnLabel} ${rowLabel}`}
+                                        value={formatValue(value)}
+                                        description={cell?.description}
+                                    >
+                                        {canSelectCells && cell ? (
+                                            <button
+                                                type="button"
+                                                className={cellClassName}
+                                                aria-label={`${columnLabel} ${rowLabel}: ${formatValue(value)}`}
+                                                aria-current={isSelected ? "true" : undefined}
+                                                aria-pressed={isSelected}
+                                                onClick={() =>
+                                                    onCellSelect?.(cell, {
+                                                        x: columnLabel,
+                                                        y: rowLabel,
+                                                    })
+                                                }
+                                            >
+                                                {cellContent}
+                                            </button>
+                                        ) : (
+                                            <span
+                                                className={cellClassName}
+                                                tabIndex={0}
+                                                aria-label={`${columnLabel} ${rowLabel}: ${formatValue(value)}`}
+                                                aria-current={isSelected ? "true" : undefined}
+                                            >
+                                                {cellContent}
+                                            </span>
+                                        )}
+                                    </ChartTooltip>
+                                )
+                            })}
+                        </React.Fragment>
+                    ))}
+                </div>
+            </div>
+        )
+    }
+)
+HeatmapChart.displayName = "HeatmapChart"
+
+export { HeatmapChart }

package/src/components/display/Icon.tsx

@@ -0,0 +1,66 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+import type { IconVariantKey } from "./generated/variant-keys"
+import { iconDefaultVariantKey } from "./generated/default-variant-keys"
+
+export type IconGlyph = React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "stroke"> & {
+        size?: string | number
+        stroke?: string | number
+    } & React.RefAttributes<SVGSVGElement>
+>
+
+export interface IconProps
+    extends Omit<React.SVGProps<SVGSVGElement>, "children" | "size" | "strokeWidth"> {
+    icon: IconGlyph
+    size?: IconVariantKey
+    label?: string
+    decorative?: boolean
+    strokeWidth?: number
+}
+
+const iconSizeClasses: Record<IconVariantKey, string> = {
+    xs: "h-3 w-3",
+    sm: "h-4 w-4",
+    md: "h-5 w-5",
+    lg: "h-6 w-6",
+    xl: "h-8 w-8",
+}
+
+const Icon = React.forwardRef<SVGSVGElement, IconProps>(
+    (
+        {
+            icon: Glyph,
+            size = iconDefaultVariantKey,
+            label,
+            decorative = true,
+            strokeWidth = 2,
+            className,
+            role,
+            "aria-hidden": ariaHidden,
+            ...props
+        },
+        ref
+    ) => {
+        const isDecorative = decorative && !label
+
+        return (
+            <Glyph
+                ref={ref}
+                aria-hidden={isDecorative ? true : ariaHidden}
+                aria-label={isDecorative ? undefined : label}
+                role={isDecorative ? role : role ?? "img"}
+                focusable="false"
+                stroke={strokeWidth}
+                className={cn("shrink-0 p-0 text-current", iconSizeClasses[size], className)}
+                {...props}
+            />
+        )
+    }
+)
+Icon.displayName = "Icon"
+
+export { Icon }

package/src/components/display/ImagePreview.tsx

@@ -0,0 +1,140 @@
+"use client"
+
+import * as React from "react"
+import { IconMaximize as Maximize, IconPhoto as Photo } from "@tabler/icons-react"
+
+import { cn } from "../../lib/utils"
+import { Tooltip, TooltipContent, TooltipTrigger } from "../overlay/Tooltip"
+import { Icon } from "./Icon"
+import { Img, type ImgProps } from "./Img"
+import { imagePreviewDefaultVariantKey } from "./generated/default-variant-keys"
+import type { ImagePreviewVariantKey } from "./generated/variant-keys"
+
+export interface ImagePreviewProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    src?: string
+    alt?: string
+    variant?: ImagePreviewVariantKey
+    aspectRatio?: ImgProps["aspectRatio"]
+    objectFit?: ImgProps["objectFit"]
+    loading?: ImgProps["loading"]
+    fallback?: React.ReactNode
+    noImageLabel?: string
+    showSkeleton?: boolean
+    previewLabel?: string
+    portalContainer?: HTMLElement | null
+    onPreview?: () => void
+    children?: React.ReactNode
+    imgProps?: Omit<ImgProps, "src" | "alt" | "aspectRatio" | "objectFit" | "fallback" | "showSkeleton" | "className">
+}
+
+const imagePreviewVariantClasses: Record<ImagePreviewVariantKey, string> = {
+    default: "bg-muted/40",
+    contain: "bg-muted/30",
+    empty: "bg-muted/30",
+}
+
+const imagePreviewAspectRatioClasses: Record<NonNullable<ImgProps["aspectRatio"]>, string> = {
+    square: "aspect-square",
+    video: "aspect-video",
+    portrait: "aspect-[3/4]",
+    wide: "aspect-[21/9]",
+    auto: "min-h-40",
+}
+
+function DefaultNoImagePreview({ alt, label }: { alt?: string; label: string }) {
+    return (
+        <div className="flex h-full w-full flex-col items-center justify-center gap-3 bg-muted/60 p-4 text-center text-muted-foreground">
+            <div className="flex h-12 w-12 items-center justify-center rounded-lg border border-dashed border-muted-foreground/35 bg-background/70">
+                <Icon icon={Photo} size="lg" />
+            </div>
+            <div className="min-w-0 space-y-1">
+                <div className="text-xs font-medium text-foreground/70">{label}</div>
+                {alt ? (
+                    <div className="max-w-[12rem] truncate text-[11px] leading-none text-muted-foreground">{alt}</div>
+                ) : null}
+            </div>
+        </div>
+    )
+}
+
+const ImagePreview = React.forwardRef<HTMLDivElement, ImagePreviewProps>(
+    (
+        {
+            src,
+            alt,
+            variant = imagePreviewDefaultVariantKey,
+            aspectRatio = "square",
+            objectFit,
+            loading = "lazy",
+            fallback,
+            noImageLabel = "Image not found",
+            showSkeleton = true,
+            previewLabel = "Open preview",
+            portalContainer,
+            onPreview,
+            children,
+            imgProps,
+            className,
+            ...props
+        },
+        ref
+    ) => {
+        const effectiveVariant = src ? variant : "empty"
+        const effectiveObjectFit = objectFit ?? (effectiveVariant === "contain" ? "contain" : "cover")
+        const noImageFallback = fallback ?? <DefaultNoImagePreview alt={alt} label={noImageLabel} />
+
+        return (
+            <div
+                ref={ref}
+                className={cn(
+                    "relative flex items-center justify-center overflow-hidden border border-border p-0 shadow-sm transition-colors",
+                    imagePreviewVariantClasses[effectiveVariant],
+                    imagePreviewAspectRatioClasses[aspectRatio],
+                    className
+                )}
+                {...props}
+            >
+                {src ? (
+                    <Img
+                        src={src}
+                        alt={alt}
+                        aspectRatio={aspectRatio}
+                        objectFit={effectiveObjectFit}
+                        fallback={noImageFallback}
+                        showSkeleton={showSkeleton}
+                        className="h-full w-full rounded-none bg-transparent"
+                        {...imgProps}
+                        loading={loading}
+                    />
+                ) : (
+                    noImageFallback
+                )}
+
+                {children}
+
+                {onPreview ? (
+                    <Tooltip>
+                        <TooltipTrigger asChild>
+                            <button
+                                type="button"
+                                className="absolute bottom-2 right-2 z-20 inline-flex h-8 w-8 items-center justify-center rounded-md border bg-background/95 text-muted-foreground opacity-0 shadow-sm transition-opacity hover:text-foreground focus:opacity-100 group-hover:opacity-100"
+                                aria-label={previewLabel}
+                                onClick={(event) => {
+                                    event.stopPropagation()
+                                    onPreview()
+                                }}
+                            >
+                                <Icon icon={Maximize} size="sm" />
+                            </button>
+                        </TooltipTrigger>
+                        <TooltipContent portalContainer={portalContainer}>{previewLabel}</TooltipContent>
+                    </Tooltip>
+                ) : null}
+            </div>
+        )
+    }
+)
+
+ImagePreview.displayName = "ImagePreview"
+
+export { ImagePreview }