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

package/src/components/display/MarkdownRenderer.tsx

@@ -0,0 +1,157 @@
+"use client"
+
+import * as React from "react"
+import ReactMarkdown, { type Options as ReactMarkdownOptions } from "react-markdown"
+import remarkGfm from "remark-gfm"
+
+import { cn } from "../../lib/utils"
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "./Table"
+import { TextLink } from "../navigation/TextLink"
+import { Tooltip, TooltipContent, TooltipTrigger } from "../overlay/Tooltip"
+
+export interface MarkdownRendererProps {
+    /** Markdown source text. */
+    content: string
+    /** Wrapper class. */
+    className?: string
+    /** Disable GFM (tables, task lists, strikethrough). Default false (GFM enabled). */
+    disableGfm?: boolean
+    /** Override or extend react-markdown components. */
+    components?: ReactMarkdownOptions["components"]
+}
+
+const defaultMarkdownComponents: NonNullable<ReactMarkdownOptions["components"]> = {
+    h1: ({ className, ...props }) => (
+        <h1 className={cn("mb-4 mt-0 text-2xl font-bold tracking-tight text-foreground", className)} {...props} />
+    ),
+    h2: ({ className, ...props }) => (
+        <h2 className={cn("mb-3 mt-6 border-b border-border/60 pb-2 text-xl font-semibold tracking-tight text-foreground", className)} {...props} />
+    ),
+    h3: ({ className, ...props }) => (
+        <h3 className={cn("mb-2 mt-5 text-lg font-semibold tracking-tight text-foreground", className)} {...props} />
+    ),
+    p: ({ className, ...props }) => (
+        <p className={cn("my-3 leading-7 text-foreground first:mt-0 last:mb-0", className)} {...props} />
+    ),
+    a: ({ className, ...props }) => (
+        <TextLink className={className} {...props} />
+    ),
+    ul: ({ className, ...props }) => {
+        const isTaskList = String(className ?? "").includes("contains-task-list")
+
+        return (
+            <ul
+                className={cn(
+                    "my-4 ml-5 list-disc space-y-1.5 text-foreground",
+                    isTaskList && "ml-0 list-none space-y-2",
+                    className
+                )}
+                {...props}
+            />
+        )
+    },
+    ol: ({ className, ...props }) => (
+        <ol className={cn("my-4 ml-5 list-decimal space-y-1.5 text-foreground", className)} {...props} />
+    ),
+    li: ({ className, ...props }) => {
+        const isTaskItem = String(className ?? "").includes("task-list-item")
+
+        return (
+            <li
+                className={cn(
+                    "pl-1 leading-7 text-foreground marker:text-muted-foreground",
+                    isTaskItem && "list-none pl-0",
+                    className
+                )}
+                {...props}
+            />
+        )
+    },
+    blockquote: ({ className, ...props }) => (
+        <blockquote className={cn("my-4 border-l-2 border-primary-border pl-4 text-muted-foreground", className)} {...props} />
+    ),
+    hr: ({ className, ...props }) => (
+        <hr className={cn("my-6 border-border/70", className)} {...props} />
+    ),
+    pre: ({ className, ...props }) => (
+        <pre className={cn("my-4 overflow-auto rounded-md border border-border/70 bg-muted p-4 text-sm text-foreground", className)} {...props} />
+    ),
+    code: ({ className, ...props }) => (
+        <code className={cn("rounded bg-muted px-1 py-0.5 font-mono text-sm text-foreground", className)} {...props} />
+    ),
+    table: ({ className, ...props }) => (
+        <div className="my-4">
+            <Table className={cn("min-w-[360px]", className)} {...props} />
+        </div>
+    ),
+    thead: ({ className, ...props }) => (
+        <TableHeader className={className} {...props} />
+    ),
+    tbody: ({ className, ...props }) => (
+        <TableBody className={className} {...props} />
+    ),
+    tr: ({ className, ...props }) => (
+        <TableRow className={className} {...props} />
+    ),
+    th: ({ className, ...props }) => (
+        <TableHead className={cn("bg-muted/50", className)} {...props} />
+    ),
+    td: ({ className, ...props }) => (
+        <TableCell className={className} {...props} />
+    ),
+    input: ({ className, checked, type, ...props }) => {
+        if (type !== "checkbox") {
+            return <input className={className} type={type} {...props} />
+        }
+
+        const tooltip = checked ? "Read-only completed task" : "Read-only pending task"
+
+        return (
+            <Tooltip>
+                <TooltipTrigger asChild>
+                    <span className="mr-2 inline-flex translate-y-0.5 cursor-default items-center justify-center" tabIndex={0}>
+                        <input
+                            aria-label={tooltip}
+                            checked={Boolean(checked)}
+                            className={cn("h-4 w-4 rounded border-border accent-foreground disabled:cursor-default disabled:opacity-100", className)}
+                            disabled
+                            readOnly
+                            type="checkbox"
+                            {...props}
+                        />
+                    </span>
+                </TooltipTrigger>
+                <TooltipContent>{tooltip}</TooltipContent>
+            </Tooltip>
+        )
+    },
+}
+
+const MarkdownRenderer = React.forwardRef<HTMLDivElement, MarkdownRendererProps>(
+    ({ content, className, disableGfm = false, components }, ref) => (
+        <div
+            ref={ref}
+            className={cn(
+                "max-w-none text-sm text-foreground",
+                className
+            )}
+        >
+            <ReactMarkdown
+                remarkPlugins={disableGfm ? [] : [remarkGfm]}
+                components={{ ...defaultMarkdownComponents, ...components }}
+            >
+                {content}
+            </ReactMarkdown>
+        </div>
+    )
+)
+MarkdownRenderer.displayName = "MarkdownRenderer"
+
+export { MarkdownRenderer }

package/src/components/display/MetadataList.tsx

@@ -0,0 +1,81 @@
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+import { metadataListDefaultVariantKey } from "./generated/default-variant-keys"
+import type { MetadataListVariantKey } from "./generated/variant-keys"
+
+export interface MetadataListItem {
+    label: React.ReactNode
+    value: React.ReactNode
+    description?: React.ReactNode
+    icon?: React.ReactNode
+}
+
+export interface MetadataListProps extends React.HTMLAttributes<HTMLDListElement> {
+    items: MetadataListItem[]
+    variant?: MetadataListVariantKey
+    layout?: "vertical" | "horizontal"
+    emptyMessage?: React.ReactNode
+}
+
+const variantClasses: Record<MetadataListVariantKey, { root: string; row: string; horizontalRow: string; value: string }> = {
+    default: {
+        root: "space-y-2",
+        row: "grid grid-cols-[minmax(0,1fr)_auto] gap-4 rounded-md px-0 py-1.5",
+        horizontalRow: "rounded-md border border-border/70 bg-card px-3 py-2.5",
+        value: "text-sm",
+    },
+    compact: {
+        root: "space-y-1",
+        row: "grid grid-cols-[minmax(0,1fr)_auto] gap-3 rounded-md px-0 py-1",
+        horizontalRow: "rounded-md border border-border/70 bg-card px-3 py-2",
+        value: "text-xs",
+    },
+}
+
+const MetadataList = React.forwardRef<HTMLDListElement, MetadataListProps>(
+    ({ items, variant = metadataListDefaultVariantKey, layout = "vertical", emptyMessage = "No metadata", className, ...props }, ref) => {
+        const classes = variantClasses[variant]
+        const isHorizontal = layout === "horizontal"
+
+        if (items.length === 0) {
+            return (
+                <div className={cn("w-full rounded-md border border-dashed p-4 text-sm text-muted-foreground", className)}>
+                    {emptyMessage}
+                </div>
+            )
+        }
+
+        return (
+            <dl
+                ref={ref}
+                className={cn(
+                    "w-full p-0",
+                    isHorizontal ? "grid grid-cols-1 gap-3 sm:grid-cols-2" : classes.root,
+                    className
+                )}
+                {...props}
+            >
+                {items.map((item, index) => (
+                    <div key={index} className={isHorizontal ? classes.horizontalRow : classes.row}>
+                        <dt className="flex min-w-0 items-start gap-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                            {item.icon ? <span className="mt-0.5 shrink-0 text-muted-foreground">{item.icon}</span> : null}
+                            <span className="min-w-0 truncate">{item.label}</span>
+                        </dt>
+                        <dd className={cn("min-w-0 font-medium text-foreground", isHorizontal ? "mt-1 text-left" : "text-right", classes.value)}>
+                            <div className="truncate">{item.value}</div>
+                            {item.description ? (
+                                <div className="mt-0.5 truncate text-xs font-normal text-muted-foreground">
+                                    {item.description}
+                                </div>
+                            ) : null}
+                        </dd>
+                    </div>
+                ))}
+            </dl>
+        )
+    }
+)
+MetadataList.displayName = "MetadataList"
+
+export { MetadataList }

package/src/components/display/MiniDistributionBarCard.tsx

@@ -0,0 +1,314 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+} from "./Card"
+import type { ChartDataPoint } from "./chart-utils"
+import {
+    chartLabelToString,
+    defaultChartValueFormatter,
+    getChartColor,
+    normalizeChartValue,
+} from "./chart-utils"
+import { ChartTooltip } from "./chart-tooltip"
+import type { MiniDistributionBarCardVariantKey } from "./generated/variant-keys"
+import { miniDistributionBarCardDefaultVariantKey } from "./generated/default-variant-keys"
+
+export interface MiniDistributionBarCardSegment extends ChartDataPoint {
+    detail?: React.ReactNode
+    description?: React.ReactNode
+}
+
+export interface MiniDistributionBarCardProps
+    extends Omit<React.ComponentPropsWithoutRef<typeof Card>, "title"> {
+    segments: MiniDistributionBarCardSegment[]
+    title?: React.ReactNode
+    description?: React.ReactNode
+    value?: React.ReactNode
+    delta?: React.ReactNode
+    deltaDescription?: React.ReactNode
+    selectedIndex?: number
+    tickCount?: number
+    max?: number
+    caption?: React.ReactNode
+    variant?: MiniDistributionBarCardVariantKey
+    formatValue?: (value: number) => React.ReactNode
+    totalLabel?: React.ReactNode
+    onSegmentSelect?: (segment: MiniDistributionBarCardSegment, index: number) => void
+}
+
+type MiniDistributionBarCardClassNames = {
+    card: string
+    header: string
+    content: string
+    tick: string
+    title: string
+}
+
+const variantClasses: Record<MiniDistributionBarCardVariantKey, MiniDistributionBarCardClassNames> = {
+    compact: {
+        card: "rounded-md",
+        header: "p-4 pb-3",
+        content: "px-4 pb-4",
+        tick: "h-7 rounded-sm",
+        title: "text-sm",
+    },
+    default: {
+        card: "rounded-lg",
+        header: "p-5 pb-3",
+        content: "px-5 pb-5",
+        tick: "h-9 rounded",
+        title: "text-base",
+    },
+}
+
+function getPositiveValue(value: number) {
+    return Number.isFinite(value) ? Math.max(value, 0) : 0
+}
+
+function getTotal(segments: MiniDistributionBarCardSegment[], max?: number) {
+    return Math.max(
+        max ?? 0,
+        segments.reduce((sum, segment) => sum + getPositiveValue(segment.value), 0),
+        1
+    )
+}
+
+function buildTicks(
+    segments: MiniDistributionBarCardSegment[],
+    tickCount: number,
+    total: number
+) {
+    const safeTickCount = Math.max(1, Math.round(tickCount))
+    const rawCounts = segments.map((segment) =>
+        Math.max(0, (getPositiveValue(segment.value) / total) * safeTickCount)
+    )
+    const counts = rawCounts.map(Math.floor)
+    let remaining = safeTickCount - counts.reduce((sum, count) => sum + count, 0)
+    const order = rawCounts
+        .map((count, index) => ({ index, fraction: count - Math.floor(count) }))
+        .sort((a, b) => b.fraction - a.fraction)
+
+    for (const item of order) {
+        if (remaining <= 0) break
+        counts[item.index] += 1
+        remaining -= 1
+    }
+
+    return counts.flatMap((count, segmentIndex) =>
+        Array.from({ length: count }, (_, tickIndex) => ({
+            segmentIndex,
+            tickIndex,
+        }))
+    )
+}
+
+const MiniDistributionBarCard = React.forwardRef<
+    HTMLDivElement,
+    MiniDistributionBarCardProps
+>(
+    (
+        {
+            className,
+            segments,
+            title = "Product categories",
+            description,
+            value,
+            delta,
+            deltaDescription,
+            selectedIndex,
+            tickCount = 32,
+            max,
+            caption,
+            variant = miniDistributionBarCardDefaultVariantKey,
+            formatValue = defaultChartValueFormatter,
+            totalLabel = "Total",
+            onSegmentSelect,
+            ...props
+        },
+        ref
+    ) => {
+        const styles = variantClasses[variant]
+        const total = getTotal(segments, max)
+        const ticks = buildTicks(segments, tickCount, total)
+        const selectedSegment =
+            selectedIndex === undefined ? undefined : segments[selectedIndex]
+        const selectedPercent =
+            selectedSegment === undefined
+                ? undefined
+                : `${defaultChartValueFormatter(
+                      normalizeChartValue(getPositiveValue(selectedSegment.value), total)
+                  )}%`
+
+        return (
+            <Card
+                ref={ref}
+                className={cn("w-full min-w-0 overflow-hidden p-0", styles.card, className)}
+                {...props}
+            >
+                <CardHeader className={styles.header}>
+                    <div className="flex min-w-0 items-start justify-between gap-3">
+                        <div className="min-w-0 space-y-1">
+                            <CardTitle className={cn("truncate", styles.title)}>
+                                {title}
+                            </CardTitle>
+                            {description ? (
+                                <CardDescription className="text-xs">
+                                    {description}
+                                </CardDescription>
+                            ) : null}
+                        </div>
+                        {delta !== undefined && delta !== null ? (
+                            <div
+                                className="shrink-0 text-right text-sm font-semibold text-success-strong tabular-nums"
+                                title={chartLabelToString(
+                                    deltaDescription,
+                                    "Delta description"
+                                )}
+                            >
+                                {delta}
+                            </div>
+                        ) : null}
+                    </div>
+                </CardHeader>
+                <CardContent className={cn("space-y-4", styles.content)}>
+                    <div className="flex min-w-0 items-end justify-between gap-4">
+                        <div className="min-w-0">
+                            {value !== undefined ? (
+                                <div className="truncate text-3xl font-semibold tracking-tight tabular-nums">
+                                    {value}
+                                </div>
+                            ) : null}
+                            {selectedSegment ? (
+                                <div className="mt-1 truncate text-xs text-muted-foreground">
+                                    {selectedSegment.label}
+                                    {selectedPercent ? ` · ${selectedPercent}` : ""}
+                                </div>
+                            ) : null}
+                        </div>
+                    </div>
+
+                    <div
+                        className="grid min-w-0 gap-1"
+                        style={{
+                            gridTemplateColumns: `repeat(${Math.max(
+                                ticks.length,
+                                1
+                            )}, minmax(0, 1fr))`,
+                        }}
+                    >
+                        {ticks.map(({ segmentIndex, tickIndex }, index) => {
+                            const segment = segments[segmentIndex]
+                            const percent = normalizeChartValue(
+                                getPositiveValue(segment.value),
+                                total
+                            )
+                            const percentLabel = `${defaultChartValueFormatter(percent)}%`
+                            const isSelected = selectedIndex === segmentIndex
+
+                            return (
+                                <ChartTooltip
+                                    key={`${segmentIndex}-${tickIndex}-${index}`}
+                                    label={segment.label}
+                                    value={percentLabel}
+                                    description={
+                                        segment.description ?? [
+                                            totalLabel,
+                                            ": ",
+                                            formatValue(segment.value),
+                                        ]
+                                    }
+                                >
+                                    <button
+                                        type="button"
+                                        className={cn(
+                                            "min-w-0 transition-opacity focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+                                            styles.tick,
+                                            selectedIndex !== undefined &&
+                                                !isSelected &&
+                                                "opacity-45"
+                                        )}
+                                        style={{
+                                            backgroundColor: getChartColor(
+                                                segment.color,
+                                                segmentIndex
+                                            ),
+                                        }}
+                                        onClick={() => onSegmentSelect?.(segment, segmentIndex)}
+                                        aria-label={`${chartLabelToString(segment.label, "Segment")}: ${percentLabel}`}
+                                    />
+                                </ChartTooltip>
+                            )
+                        })}
+                    </div>
+
+                    <div className="grid min-w-0 gap-2 sm:grid-cols-3">
+                        {segments.map((segment, index) => {
+                            const percent = `${defaultChartValueFormatter(
+                                normalizeChartValue(getPositiveValue(segment.value), total)
+                            )}%`
+                            const isSelected = selectedIndex === index
+
+                            return (
+                                <ChartTooltip
+                                    key={`${chartLabelToString(segment.label, "Segment")}-row-${index}`}
+                                    label={segment.label}
+                                    value={formatValue(segment.value)}
+                                    description={segment.description ?? percent}
+                                >
+                                    <button
+                                        type="button"
+                                        className={cn(
+                                            "grid min-w-0 grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-x-2 rounded-md border bg-card px-3 py-2 text-left transition-colors",
+                                            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+                                            isSelected && "border-foreground shadow-sm"
+                                        )}
+                                        onClick={() => onSegmentSelect?.(segment, index)}
+                                    >
+                                        <span
+                                            className="h-2.5 w-2.5 rounded-full"
+                                            style={{
+                                                backgroundColor: getChartColor(
+                                                    segment.color,
+                                                    index
+                                                ),
+                                            }}
+                                            aria-hidden="true"
+                                        />
+                                        <span className="min-w-0 truncate text-xs text-muted-foreground">
+                                            {segment.label}
+                                        </span>
+                                        <span className="text-sm font-semibold tabular-nums">
+                                            {percent}
+                                        </span>
+                                        {segment.detail ? (
+                                            <span className="col-span-3 truncate text-xs text-muted-foreground">
+                                                {segment.detail}
+                                            </span>
+                                        ) : null}
+                                    </button>
+                                </ChartTooltip>
+                            )
+                        })}
+                    </div>
+
+                    {caption ? (
+                        <div className="rounded-md border bg-muted/30 px-3 py-2 text-xs text-muted-foreground">
+                            {caption}
+                        </div>
+                    ) : null}
+                </CardContent>
+            </Card>
+        )
+    }
+)
+MiniDistributionBarCard.displayName = "MiniDistributionBarCard"
+
+export { MiniDistributionBarCard }