@siyahi/ui 0.0.0-stage → 0.1.0-next.3

package/dist/components/registry/heatmap/status-heatmap.js

@@ -0,0 +1,330 @@
+import { cn } from "../../../lib/utils.js";
+import { Fragment, createContext, use, useMemo } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { format } from "date-fns";
+//#region src/components/registry/heatmap/status-heatmap.tsx
+const DEFAULT_COLORS = {
+	0: "var(--color-secondary)",
+	1: "var(--negative)",
+	2: "var(--warning)",
+	3: "var(--positive)"
+};
+const SEMANTIC_KEYS = {
+	0: "noData",
+	1: "critical",
+	2: "degraded",
+	3: "healthy"
+};
+const resolveColor = (value, colors) => {
+	const semanticKey = SEMANTIC_KEYS[value];
+	if (colors) {
+		const numeric = colors[value];
+		if (typeof numeric === "string") return numeric;
+		if (semanticKey) {
+			const semantic = colors[semanticKey];
+			if (typeof semantic === "string") return semantic;
+		}
+	}
+	return DEFAULT_COLORS[value] ?? DEFAULT_COLORS[0];
+};
+const resolveStatusLabel = (value, labels) => {
+	if (labels) {
+		const numeric = labels[value];
+		if (typeof numeric === "string") return numeric;
+		const semanticKey = SEMANTIC_KEYS[value];
+		if (semanticKey) {
+			const semantic = labels[semanticKey];
+			if (typeof semantic === "string") return semantic;
+		}
+	}
+	switch (value) {
+		case 0: return "No Data";
+		case 1: return "Critical";
+		case 2: return "Degraded";
+		case 3: return "Healthy";
+		default: return `Status ${value}`;
+	}
+};
+const getStatusFill = (value, colors, highlighted = false) => {
+	const base = resolveColor(value, colors);
+	if (!highlighted) return base;
+	return `color-mix(in oklch, ${base} 60%, transparent)`;
+};
+const EMPTY_STYLE = {};
+const StatusHeatmapContext = createContext(null);
+const useStatusHeatmap = () => {
+	const context = use(StatusHeatmapContext);
+	if (!context) throw new Error("StatusHeatmap components must be used within a StatusHeatmap");
+	return context;
+};
+/**
+* Status Heatmap
+*
+* A timeline indicator showing daily status over a period (e.g., 90 days).
+* Similar to Atlassian Statuspage - each day is represented by a vertical bar.
+* Supports 4 status values: 0=no-data, 1=critical, 2=degraded, 3=healthy
+*
+* @example
+* ```tsx
+* <StatusHeatmap data={data} blockAspectRatio={0.2}>
+*   <StatusHeatmapBody>
+*     {({ activity, dayIndex }) => (
+*       <StatusHeatmapBlock
+*         activity={activity}
+*         dayIndex={dayIndex}
+*       />
+*     )}
+*   </StatusHeatmapBody>
+*   <StatusHeatmapFooter>
+*     <StatusHeatmapStat />
+*     <StatusHeatmapLegend />
+*   </StatusHeatmapFooter>
+* </StatusHeatmap>
+* ```
+*
+* @param data - Array of activities with date (YYYY-MM-DD) and status value (0-3)
+* @param dateFormat - Date format string for tooltips. Default: "MMM d"
+* @param blockAspectRatio - Width/height ratio of blocks. Default: 0.2 (narrow vertical bars)
+* @param colors - Custom colors for critical, degraded, and healthy states
+*/
+const StatusHeatmap = ({ data, dateFormat = "MMM d", blockSize = 40, blockMargin = 2, blockRadius = 2, blockAspectRatio = .2, colors, locale, labels: labelsProp, fontSize = 14, emptyState, statusValues = [
+	0,
+	1,
+	2,
+	3
+], healthyValue = 3, style = EMPTY_STYLE, className, children, ...props }) => {
+	const labels = useMemo(() => ({
+		statuses: {
+			noData: "No Data",
+			critical: "Critical",
+			degraded: "Degraded",
+			healthy: "Healthy"
+		},
+		cellLabel: "{{date}}: {{status}}",
+		heatmapLabel: "Status heatmap",
+		legendLabel: "Status legend",
+		...labelsProp
+	}), [labelsProp]);
+	const dates = useMemo(() => {
+		const uniqueDates = /* @__PURE__ */ new Set();
+		data.forEach((activity) => {
+			uniqueDates.add(activity.date);
+		});
+		return Array.from(uniqueDates).sort();
+	}, [data]);
+	const blockWidth = blockSize * blockAspectRatio;
+	const width = dates.length * (blockWidth + blockMargin) - blockMargin;
+	const height = blockSize;
+	const contextValue = useMemo(() => ({
+		data,
+		dates,
+		blockMargin,
+		blockRadius,
+		blockSize,
+		blockAspectRatio,
+		blockWidth,
+		fontSize,
+		labels,
+		statusValues,
+		healthyValue,
+		width,
+		height,
+		dateFormat,
+		locale,
+		colors
+	}), [
+		data,
+		dates,
+		blockMargin,
+		blockRadius,
+		blockSize,
+		blockAspectRatio,
+		blockWidth,
+		fontSize,
+		labels,
+		statusValues,
+		healthyValue,
+		width,
+		height,
+		dateFormat,
+		locale,
+		colors
+	]);
+	if (data.length === 0 || dates.length === 0) return emptyState ? emptyState : null;
+	return /* @__PURE__ */ jsx(StatusHeatmapContext, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "status-heatmap",
+			className: cn("flex w-max max-w-full flex-col gap-2 p-4", className),
+			style: {
+				fontSize,
+				...style
+			},
+			...props,
+			children
+		})
+	});
+};
+const StatusHeatmapBlock = ({ ref, activity, dayIndex, highlighted = false, onCellClick, onCellHover, onClick, onKeyDown, onMouseEnter, onMouseLeave, className, style: styleProp, ...props }) => {
+	const { blockSize, blockWidth, blockMargin, blockRadius, labels, colors } = useStatusHeatmap();
+	const statusText = resolveStatusLabel(activity.value, labels.statuses);
+	const ariaLabel = (labels.cellLabel ?? "{{date}}: {{status}}").replace("{{date}}", activity.date).replace("{{status}}", statusText);
+	const xPosition = (blockWidth + blockMargin) * dayIndex;
+	return /* @__PURE__ */ jsx("rect", {
+		ref,
+		"data-slot": "status-heatmap-block",
+		role: onCellClick ? "button" : "img",
+		tabIndex: onCellClick ? 0 : -1,
+		"aria-label": ariaLabel,
+		className: cn("motion-safe:transition-opacity motion-safe:hover:opacity-70", onCellClick && "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", className),
+		"data-value": activity.value,
+		"data-date": activity.date,
+		"data-highlighted": highlighted || void 0,
+		height: blockSize,
+		rx: blockRadius,
+		ry: blockRadius,
+		width: blockWidth,
+		x: xPosition,
+		y: 0,
+		style: {
+			fill: getStatusFill(activity.value, colors, highlighted),
+			...styleProp
+		},
+		onClick: (event) => {
+			onCellClick?.(activity);
+			onClick?.(event);
+		},
+		onKeyDown: (event) => {
+			if (onCellClick && (event.key === "Enter" || event.key === " ")) {
+				event.preventDefault();
+				onCellClick(activity);
+			}
+			onKeyDown?.(event);
+		},
+		onMouseEnter: (event) => {
+			onCellHover?.(activity);
+			onMouseEnter?.(event);
+		},
+		onMouseLeave: (event) => {
+			onCellHover?.(null);
+			onMouseLeave?.(event);
+		},
+		...props
+	});
+};
+StatusHeatmapBlock.displayName = "StatusHeatmapBlock";
+const StatusHeatmapBody = ({ hideDateLabels = false, labelInterval = 30, className, labelClassName, children, ...props }) => {
+	const { data, dates, width, height, blockWidth, blockMargin, fontSize, dateFormat, locale, labels } = useStatusHeatmap();
+	const activityMap = useMemo(() => {
+		const map = /* @__PURE__ */ new Map();
+		data.forEach((activity) => {
+			map.set(activity.date, activity);
+		});
+		return map;
+	}, [data]);
+	const allActivities = useMemo(() => {
+		return dates.map((date) => {
+			return activityMap.get(date) || {
+				date,
+				value: 0
+			};
+		});
+	}, [dates, activityMap]);
+	const labelFontSize = fontSize * .75;
+	const labelHeight = hideDateLabels ? 0 : labelFontSize * 2;
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "status-heatmap-body",
+		className: cn("max-w-full overflow-x-auto overflow-y-hidden", className),
+		...props,
+		children: /* @__PURE__ */ jsxs("svg", {
+			role: "img",
+			"aria-label": labels.heatmapLabel ?? "Status heatmap",
+			className: "block overflow-visible rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+			height: height + labelHeight + 40,
+			viewBox: `-20 -20 ${width + 40} ${height + labelHeight + 40}`,
+			width: width + 40,
+			children: [!hideDateLabels && /* @__PURE__ */ jsx("g", {
+				className: cn("fill-current font-mono", labelClassName),
+				children: dates.map((date, dayIndex) => {
+					const isFirst = dayIndex === 0;
+					const isLast = dayIndex === dates.length - 1;
+					if (dayIndex % labelInterval !== 0 && !isLast) return null;
+					const blockLeft = (blockWidth + blockMargin) * dayIndex;
+					const xPosition = isFirst ? blockLeft : isLast ? blockLeft + blockWidth : blockLeft + blockWidth / 2;
+					const anchor = isFirst ? "start" : isLast ? "end" : "middle";
+					return /* @__PURE__ */ jsx("text", {
+						x: xPosition,
+						y: height + labelFontSize,
+						dominantBaseline: "hanging",
+						textAnchor: anchor,
+						style: { fontSize: `${labelFontSize}px` },
+						children: format(new Date(date), dateFormat, { locale })
+					}, `date-${date}`);
+				})
+			}), allActivities.map((activity, dayIndex) => {
+				const key = activity.date;
+				return /* @__PURE__ */ jsx(Fragment, { children: children({
+					activity,
+					dayIndex
+				}) }, key);
+			})]
+		})
+	});
+};
+const StatusHeatmapFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	"data-slot": "status-heatmap-footer",
+	className: cn("flex flex-wrap gap-1 whitespace-nowrap sm:gap-x-4", className),
+	...props
+});
+const StatusHeatmapStat = ({ compute, label, className, children, ...props }) => {
+	const { data, healthyValue, labels } = useStatusHeatmap();
+	const value = compute ? compute(data) : data.filter((a) => a.value === healthyValue).length;
+	if (children) return /* @__PURE__ */ jsx(Fragment$1, { children: children({
+		value,
+		data
+	}) });
+	const template = label ?? labels.stat ?? "{{value}} days healthy";
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "status-heatmap-stat",
+		className: cn("text-muted-foreground tabular-nums", className),
+		...props,
+		children: template.replace("{{value}}", String(value))
+	});
+};
+const StatusHeatmapLegend = ({ labels: labelsProp, className, children, ...props }) => {
+	const { labels, statusValues, blockSize, blockWidth, blockRadius, colors } = useStatusHeatmap();
+	const statuses = statusValues.map((value) => ({
+		value,
+		label: resolveStatusLabel(value, labelsProp ?? labels.statuses)
+	}));
+	return /* @__PURE__ */ jsx("fieldset", {
+		"data-slot": "status-heatmap-legend",
+		"aria-label": labels.legendLabel ?? "Status legend",
+		className: cn("ml-auto flex items-center gap-1", className),
+		...props,
+		children: statuses.map((status) => children ? /* @__PURE__ */ jsx(Fragment, { children: children({
+			value: status.value,
+			label: status.label
+		}) }, `status-${status.value}`) : /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-1",
+			children: [/* @__PURE__ */ jsx("svg", {
+				"aria-hidden": "true",
+				height: blockSize / 2,
+				width: blockWidth,
+				children: /* @__PURE__ */ jsx("rect", {
+					"data-value": status.value,
+					height: blockSize / 2,
+					rx: blockRadius,
+					ry: blockRadius,
+					width: blockWidth,
+					style: { fill: getStatusFill(status.value, colors) }
+				})
+			}), /* @__PURE__ */ jsx("span", {
+				className: "font-medium text-muted-foreground text-xs",
+				children: status.label
+			})]
+		}, `status-${status.value}`))
+	});
+};
+//#endregion
+export { StatusHeatmap, StatusHeatmapBlock, StatusHeatmapBody, StatusHeatmapFooter, StatusHeatmapLegend, StatusHeatmapStat };

package/dist/components/registry/heatmap/weekday-heatmap.d.ts

@@ -0,0 +1,145 @@
+import { CSSProperties, HTMLAttributes, ReactNode } from "react";
+import { Day, Locale } from "date-fns";
+//#region src/components/registry/heatmap/weekday-heatmap.d.ts
+export type WeekdayIndex = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+export type WeekdayHour = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23;
+export type WeekdayHourlyActivity = {
+  weekday: number;
+  hour: number;
+  value: number;
+};
+type WeekdayHourlyActivityWithLevel = WeekdayHourlyActivity & {
+  level: number;
+};
+export type WeekdayExtraRowSpec = {
+  label: ReactNode;
+  compute: (data: WeekdayHourlyActivity[]) => number[];
+};
+export type WeekdayExtraColumnSpec = {
+  label: ReactNode;
+  compute: (data: WeekdayHourlyActivity[]) => number[];
+};
+export type WeekdayHeatmapLabels = {
+  hours?: string[];
+  endHour?: string | null;
+  weekdays?: string[];
+  stat?: string;
+  cellLabel?: string;
+  heatmapLabel?: string;
+  legendLabel?: string;
+  legendLevelLabel?: string;
+};
+export type ColorConfig = {
+  empty?: string;
+  scale?: string;
+};
+export type WeekdayHeatmapProps = HTMLAttributes<HTMLDivElement> & {
+  data: WeekdayHourlyActivity[];
+  weekStart?: Day;
+  use12Hour?: boolean;
+  blockSize?: number;
+  blockMargin?: number;
+  blockRadius?: number;
+  blockAspectRatio?: number;
+  levels?: number;
+  isNormalized?: boolean;
+  colors?: ColorConfig;
+  locale?: Locale;
+  labels?: WeekdayHeatmapLabels;
+  fontSize?: number;
+  emptyState?: ReactNode;
+  totalCount?: number;
+  extraRow?: WeekdayExtraRowSpec;
+  extraColumn?: WeekdayExtraColumnSpec;
+  style?: CSSProperties;
+  className?: string;
+  children: ReactNode;
+};
+/**
+ * Weekday Heatmap
+ *
+ * A GitHub punch card style heatmap showing activity distribution by weekday (rows) and hour (columns).
+ * Renders a 7 × 24 grid with optional extra row (aggregated per hour) and extra column (aggregated per weekday).
+ *
+ * @example
+ * ```tsx
+ * <WeekdayHeatmap data={data} weekStart={1} use12Hour>
+ *   <WeekdayHeatmapBody>
+ *     {({ activity }) => (
+ *       <WeekdayHeatmapBlock activity={activity} />
+ *     )}
+ *   </WeekdayHeatmapBody>
+ *   <WeekdayHeatmapFooter>
+ *     <WeekdayHeatmapStat />
+ *     <WeekdayHeatmapLegend />
+ *   </WeekdayHeatmapFooter>
+ * </WeekdayHeatmap>
+ * ```
+ *
+ * @param data - Array of activities with weekday (0-6 for Sun-Sat), hour (0-23), and numeric value
+ * @param weekStart - First day of week (0=Sunday, 1=Monday). Default: 0
+ * @param use12Hour - Use 12-hour format for hour labels. Default: false
+ * @param blockSize - Block height in pixels. Default: 24
+ * @param blockAspectRatio - Block width/height ratio. Default: 1 (square)
+ * @param levels - Total number of legend cells (including empty when not normalized). Default: 5
+ * @param isNormalized - When true, uses min-max normalization across the dataset (suitable for signed values like temperature). When false (default), treats 0 as empty and scales from 0 to max.
+ * @param extraRow - Appends an aggregated row below the grid. `compute` receives all activities and must return 24 values (one per hour). Rendered through `renderExtraRow` on the body, or falls back to `children`.
+ * @param extraColumn - Appends an aggregated column to the right of the grid. `compute` receives all activities and must return 7 values indexed by weekday 0–6. Rendered through `renderExtraColumn` on the body, or falls back to `children`.
+ */
+export declare const WeekdayHeatmap: ({ data, weekStart, use12Hour, blockSize, blockMargin, blockRadius, blockAspectRatio, levels: levelsProp, isNormalized, colors, locale, labels: labelsProp, fontSize, emptyState, totalCount: totalCountProp, extraRow, extraColumn, style, className, children, ...props }: WeekdayHeatmapProps) => string | number | bigint | true | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null;
+export type WeekdayHeatmapBlockProps = HTMLAttributes<SVGRectElement> & {
+  activity: WeekdayHourlyActivityWithLevel;
+  extra?: "row" | "column";
+  highlighted?: boolean;
+  onCellClick?: (activity: WeekdayHourlyActivityWithLevel) => void;
+  onCellHover?: (activity: WeekdayHourlyActivityWithLevel | null) => void;
+  className?: string;
+};
+export declare function WeekdayHeatmapBlock({ ref, activity, extra, highlighted, onCellClick, onCellHover, onClick, onKeyDown, onMouseEnter, onMouseLeave, className, style: styleProp, ...props }: WeekdayHeatmapBlockProps & {
+  ref?: React.RefObject<SVGRectElement | null>;
+}): import("react").JSX.Element;
+export declare namespace WeekdayHeatmapBlock {
+  var displayName: string;
+}
+export type WeekdayHeatmapBodyProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+  hideHourLabels?: boolean;
+  hideWeekdayLabels?: boolean;
+  className?: string;
+  labelClassName?: string;
+  children: (props: {
+    activity: WeekdayHourlyActivityWithLevel;
+    weekdayIndex: number;
+  }) => ReactNode;
+  renderExtraRow?: (props: {
+    activity: WeekdayHourlyActivityWithLevel;
+    weekdayIndex: number;
+  }) => ReactNode;
+  renderExtraColumn?: (props: {
+    activity: WeekdayHourlyActivityWithLevel;
+    weekdayIndex: number;
+  }) => ReactNode;
+};
+export declare const WeekdayHeatmapBody: ({ hideHourLabels, hideWeekdayLabels, className, labelClassName, children, renderExtraRow, renderExtraColumn, ...props }: WeekdayHeatmapBodyProps) => import("react").JSX.Element;
+export type WeekdayHeatmapFooterProps = HTMLAttributes<HTMLDivElement>;
+export declare const WeekdayHeatmapFooter: ({ className, ...props }: WeekdayHeatmapFooterProps) => import("react").JSX.Element;
+export type WeekdayHeatmapStatProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+  compute?: (data: WeekdayHourlyActivityWithLevel[]) => number | string;
+  label?: string;
+  children?: (result: {
+    value: number | string;
+    data: WeekdayHourlyActivityWithLevel[];
+  }) => ReactNode;
+};
+export declare const WeekdayHeatmapStat: ({ compute, label, className, children, ...props }: WeekdayHeatmapStatProps) => import("react").JSX.Element;
+export type WeekdayHeatmapLegendProps = Omit<HTMLAttributes<HTMLFieldSetElement>, "children"> & {
+  labels?: {
+    less?: string;
+    more?: string;
+  };
+  children?: (props: {
+    level: number;
+  }) => ReactNode;
+};
+export declare const WeekdayHeatmapLegend: ({ labels: labelsProp, className, children, ...props }: WeekdayHeatmapLegendProps) => import("react").JSX.Element;
+//#endregion
+export {};