@mizen-labs/ui 0.0.0-stage → 0.1.0

package/src/components/funnel/funnel-flow.tsx

@@ -0,0 +1,198 @@
+import { create, props } from "@stylexjs/stylex";
+import { colors } from "../../styles/colors.stylex";
+import { shape } from "../../styles/shape.stylex";
+import { space } from "../../styles/spacing.stylex";
+import { typeRoles } from "../../styles/typography.styles";
+import { fontWeight } from "../../styles/typography.stylex";
+import { chartColors } from "../chart-frame/chart-colors";
+import { ChartHoverTooltip, useChartHover } from "../chart-frame/chart-hover";
+import type { PlacedFunnelStage } from "./funnel";
+
+const HEIGHT = 160;
+const STAGE = 100;
+// Each stage holds its height for 60% of its width, then eases to the next.
+const HOLD = 0.6;
+const HALO_OPACITY = 0.16;
+
+const styles = create({
+	figure: { blockSize: HEIGHT, position: "relative" },
+	pill: (left: string) => ({
+		backgroundColor: colors.surface,
+		borderRadius: "999px",
+		color: colors.content,
+		fontVariantNumeric: "tabular-nums",
+		fontWeight: fontWeight.medium,
+		insetBlockStart: "50%",
+		insetInlineStart: left,
+		paddingBlock: "0.125rem",
+		paddingInline: space["2"],
+		position: "absolute",
+		transform: "translate(-50%, -50%)",
+	}),
+	root: {
+		display: "flex",
+		flexDirection: "column",
+		gap: space["3"],
+		minWidth: 0,
+	},
+	svg: { blockSize: HEIGHT, display: "block", inlineSize: "100%" },
+	swatch: (backgroundColor: string) => ({
+		backgroundColor,
+		blockSize: "0.625rem",
+		borderRadius: 3,
+		flexShrink: 0,
+		inlineSize: "0.625rem",
+	}),
+	tile: {
+		backgroundColor: colors.surface,
+		borderRadius: shape.controlRadius,
+		display: "flex",
+		flexDirection: "column",
+		gap: space["1"],
+		minWidth: 0,
+		paddingBlock: space["2"],
+		paddingInline: space["3"],
+	},
+	tileLabel: { color: colors.mutedContent },
+	tileName: { alignItems: "center", display: "flex", gap: space["2"] },
+	tiles: (count: number) => ({
+		display: "grid",
+		gap: space["2"],
+		// One column per stage when each gets 7rem; fewer, wrapped, below that.
+		gridTemplateColumns: `repeat(auto-fit, minmax(max(7rem, (100% - ${count - 1} * ${space["2"]}) / ${count}), 1fr))`,
+		listStyle: "none",
+		margin: 0,
+		padding: 0,
+	}),
+	value: {
+		color: colors.content,
+		fontVariantNumeric: "tabular-nums",
+		fontWeight: fontWeight.medium,
+	},
+});
+
+// One stage's shape: it holds its height, then eases to the next stage's.
+function stagePath(heights: readonly number[], index: number) {
+	const center = HEIGHT / 2;
+	const x0 = index * STAGE;
+	const x1 = x0 + STAGE;
+	const hold = x0 + STAGE * HOLD;
+	const mid = (hold + x1) / 2;
+	const half = heights[index] / 2;
+	const next = (heights[index + 1] ?? heights[index]) / 2;
+	return [
+		`M${x0},${center - half} L${hold},${center - half}`,
+		`C${mid},${center - half} ${mid},${center - next} ${x1},${center - next}`,
+		`L${x1},${center + next}`,
+		`C${mid},${center + next} ${mid},${center + half} ${hold},${center + half}`,
+		`L${x0},${center + half} Z`,
+	].join(" ");
+}
+
+export function FunnelFlow({
+	"aria-label": ariaLabel,
+	format,
+	share,
+	stages,
+}: {
+	"aria-label": string;
+	format: (value: number) => string;
+	share: Intl.NumberFormat;
+	stages: readonly PlacedFunnelStage[];
+}) {
+	const { fade, hostRef, hostStyle, hover, linkProps, markProps } =
+		useChartHover();
+	const heights = stages.map(({ share: stageShare }) =>
+		Math.max(4, stageShare * HEIGHT * 0.78)
+	);
+	const halo = heights.map((height) => Math.min(HEIGHT, height * 1.12 + 10));
+	return (
+		<div data-slot="funnel-flow" {...props(styles.root)}>
+			<div ref={hostRef} {...props(styles.figure, hostStyle)}>
+				<svg
+					aria-hidden="true"
+					preserveAspectRatio="none"
+					viewBox={`0 0 ${stages.length * STAGE} ${HEIGHT}`}
+					{...props(styles.svg)}
+				>
+					{stages.map(
+						({ id, label, share: stageShare, tone, value }, index) => (
+							<g
+								key={id}
+								{...markProps(id, {
+									items: [
+										{
+											id,
+											label,
+											tone,
+											value: `${format(value)} · ${share.format(stageShare)}`,
+										},
+									],
+								})}
+								{...props(...fade(id))}
+							>
+								<path
+									d={stagePath(halo, index)}
+									fill={chartColors[tone]}
+									fillOpacity={HALO_OPACITY}
+								/>
+								<path d={stagePath(heights, index)} fill={chartColors[tone]} />
+							</g>
+						)
+					)}
+					{/* Thin surface lines mark where each stage begins. */}
+					{stages.slice(1).map(({ id }, index) => (
+						<line
+							key={id}
+							stroke={colors.surface}
+							strokeWidth={2}
+							vectorEffect="non-scaling-stroke"
+							x1={(index + 1) * STAGE}
+							x2={(index + 1) * STAGE}
+							y1={0}
+							y2={HEIGHT}
+						/>
+					))}
+				</svg>
+				{stages.map(({ id, share: stageShare }, index) => (
+					<span
+						aria-hidden="true"
+						key={id}
+						{...props(
+							styles.pill(`${((index + HOLD / 2) / stages.length) * 100}%`),
+							typeRoles.caption
+						)}
+					>
+						{share.format(stageShare)}
+					</span>
+				))}
+				<ChartHoverTooltip hover={hover} />
+			</div>
+			<ol aria-label={ariaLabel} {...props(styles.tiles(stages.length))}>
+				{stages.map(({ id, label, share: stageShare, tone, value }) => (
+					<li
+						data-slot="funnel-stage"
+						key={id}
+						{...linkProps(id)}
+						{...props(styles.tile, ...fade(id))}
+					>
+						<span {...props(styles.tileName, styles.tileLabel)}>
+							<span
+								aria-hidden="true"
+								{...props(styles.swatch(chartColors[tone]))}
+							/>
+							{label}
+						</span>
+						<span>
+							<span {...props(styles.value)}>{format(value)}</span>
+							<span {...props(styles.tileLabel, typeRoles.caption)}>
+								{" "}
+								{share.format(stageShare)}
+							</span>
+						</span>
+					</li>
+				))}
+			</ol>
+		</div>
+	);
+}

package/src/components/funnel/funnel.styles.ts

@@ -0,0 +1,73 @@
+import { create } from "@stylexjs/stylex";
+import { colors } from "../../styles/colors.stylex";
+import { space } from "../../styles/spacing.stylex";
+import { fontWeight } from "../../styles/typography.stylex";
+
+const PILL = "1.25rem";
+
+export const funnelStyles = create({
+	// The fill never shrinks below a circle, so tiny stages stay visible.
+	fill: (inlineSize: string, backgroundColor: string) => ({
+		alignItems: "center",
+		backgroundColor,
+		borderRadius: "999px",
+		color: colors.accentContent,
+		display: "flex",
+		inlineSize,
+		minInlineSize: PILL,
+		paddingInlineStart: "0.1875rem",
+	}),
+	icon: {
+		display: "inline-flex",
+		height: { ":is(*) > svg": "0.875rem", default: "auto" },
+		width: { ":is(*) > svg": "0.875rem", default: "auto" },
+	},
+	label: {
+		color: colors.mutedContent,
+		overflow: "hidden",
+		textAlign: "end",
+		textOverflow: "ellipsis",
+		whiteSpace: "nowrap",
+	},
+	list: {
+		alignItems: "center",
+		columnGap: space["3"],
+		display: "grid",
+		gridTemplateColumns: "minmax(0, max-content) minmax(4rem, 1fr) max-content",
+		listStyle: "none",
+		margin: 0,
+		padding: 0,
+		rowGap: space["3"],
+	},
+	root: {
+		minWidth: 0,
+	},
+	// Each stage spans the list's three columns so they align across stages.
+	row: {
+		display: "grid",
+		gridColumnEnd: -1,
+		gridColumnStart: 1,
+		gridTemplateColumns: "subgrid",
+	},
+	share: {
+		color: colors.mutedContent,
+		display: "inline-block",
+		fontVariantNumeric: "tabular-nums",
+		marginInlineStart: space["2"],
+		minInlineSize: "2.5rem",
+		textAlign: "end",
+	},
+	track: {
+		backgroundColor: colors.controlSurface,
+		blockSize: PILL,
+		borderRadius: "999px",
+		display: "flex",
+		overflow: "hidden",
+	},
+	value: {
+		color: colors.content,
+		fontVariantNumeric: "tabular-nums",
+		fontWeight: fontWeight.medium,
+		textAlign: "end",
+	},
+});

package/src/components/funnel/funnel.tsx

@@ -0,0 +1,177 @@
+"use client";
+
+import { props } from "@stylexjs/stylex";
+import type { ComponentPropsWithRef, ReactNode } from "react";
+import type { Closed } from "../../closed";
+import { typeRoles } from "../../styles/typography.styles";
+import { assertIdentity, assertNonNegative } from "../chart-frame/chart-assert";
+import { type ChartSeriesTone, chartColors } from "../chart-frame/chart-colors";
+import { useChartHover } from "../chart-frame/chart-hover";
+import { funnelStyles } from "./funnel.styles";
+import { FunnelFlow } from "./funnel-flow";
+
+export interface FunnelStage {
+	/** A decorative glyph at the start of the stage's bar. */
+	icon?: ReactNode;
+	id: string;
+	label: string;
+	value: number;
+}
+
+export type FunnelProps = Omit<
+	Closed<ComponentPropsWithRef<"div">>,
+	"aria-label" | "children" | "data-slot" | "role"
+> & {
+	"aria-label": string;
+	formatValue?: (value: number) => string;
+	locale?: string;
+	/** bars lists stages on a shared track; flow draws one band that narrows. */
+	presentation?: FunnelPresentation;
+	/** Up to six stages, each in its palette color unless `tone` sets one hue. */
+	stages: readonly FunnelStage[];
+	tone?: ChartSeriesTone;
+};
+
+export type FunnelPresentation = "bars" | "flow";
+
+/** A stage with its palette tone and its share of the first stage. */
+export interface PlacedFunnelStage extends FunnelStage {
+	share: number;
+	tone: ChartSeriesTone;
+}
+
+const PALETTE = [
+	"series1",
+	"series2",
+	"series3",
+	"series4",
+	"series5",
+	"series6",
+] as const satisfies readonly ChartSeriesTone[];
+
+function assertStages(
+	stages: readonly FunnelStage[],
+	tone: ChartSeriesTone | undefined
+) {
+	if (!Array.isArray(stages)) {
+		throw new TypeError("Funnel stages must be an array.");
+	}
+	if (tone === undefined && stages.length > PALETTE.length) {
+		throw new RangeError(
+			"Funnel colors up to six stages; set tone for more stages in one hue."
+		);
+	}
+	const ids = new Set<string>();
+	for (const stage of stages) {
+		assertIdentity("Funnel", stage, ids);
+		assertNonNegative("Funnel", stage.value);
+	}
+}
+
+function assertOptions(ariaLabel: string, tone: ChartSeriesTone | undefined) {
+	if (typeof ariaLabel !== "string" || !ariaLabel.trim()) {
+		throw new TypeError("Funnel requires a non-empty aria-label.");
+	}
+	if (tone !== undefined && !Object.hasOwn(chartColors, tone)) {
+		throw new RangeError("Funnel tone is not a supported chart series tone.");
+	}
+}
+
+function FunnelBars({
+	"aria-label": ariaLabel,
+	format,
+	share,
+	stages,
+}: {
+	"aria-label": string;
+	format: (value: number) => string;
+	share: Intl.NumberFormat;
+	stages: readonly PlacedFunnelStage[];
+}) {
+	const { fade, linkProps } = useChartHover();
+	return (
+		<ol aria-label={ariaLabel} {...props(funnelStyles.list)}>
+			{stages.map(({ icon, id, label, share: stageShare, tone, value }) => (
+				<li
+					data-slot="funnel-stage"
+					key={id}
+					{...linkProps(id)}
+					{...props(funnelStyles.row)}
+				>
+					<span data-slot="funnel-label" {...props(funnelStyles.label)}>
+						{label}
+					</span>
+					<span aria-hidden="true" {...props(funnelStyles.track)}>
+						<span
+							data-slot="funnel-bar"
+							{...props(
+								...fade(id),
+								funnelStyles.fill(
+									`${Math.min(stageShare, 1) * 100}%`,
+									chartColors[tone]
+								)
+							)}
+						>
+							{icon ? <span {...props(funnelStyles.icon)}>{icon}</span> : null}
+						</span>
+					</span>
+					<span data-slot="funnel-value" {...props(funnelStyles.value)}>
+						{format(value)}
+						<span {...props(funnelStyles.share, typeRoles.caption)}>
+							{share.format(stageShare)}
+						</span>
+					</span>
+				</li>
+			))}
+		</ol>
+	);
+}
+
+/**
+ * Ordered stages, each with its value and its share of the first stage, as bars
+ * on a shared track or as one band that narrows.
+ */
+export function Funnel({
+	"aria-label": ariaLabel,
+	formatValue,
+	locale = "en-US",
+	presentation = "bars",
+	ref: forwardedRef,
+	stages,
+	tone,
+	...rest
+}: FunnelProps) {
+	assertOptions(ariaLabel, tone);
+	assertStages(stages, tone);
+	for (const name of ["children", "className", "data-slot", "role", "style"]) {
+		Reflect.deleteProperty(rest, name);
+	}
+	const format = formatValue ?? new Intl.NumberFormat(locale).format;
+	const share = new Intl.NumberFormat(locale, {
+		maximumFractionDigits: 0,
+		style: "percent",
+	});
+	const base = stages[0]?.value || 1;
+	const placed = stages.map((stage, index) => ({
+		...stage,
+		share: stage.value / base,
+		tone: tone ?? PALETTE[index],
+	}));
+	const Presentation = presentation === "flow" ? FunnelFlow : FunnelBars;
+
+	return (
+		<div
+			{...rest}
+			data-slot="funnel"
+			ref={forwardedRef}
+			{...props(funnelStyles.root, typeRoles.ui)}
+		>
+			<Presentation
+				aria-label={ariaLabel}
+				format={format}
+				share={share}
+				stages={placed}
+			/>
+		</div>
+	);
+}

package/src/components/grid/grid.styles.ts

@@ -0,0 +1,15 @@
+import { create } from "@stylexjs/stylex";
+import { conditions } from "../../styles/conditions.stylex";
+import { space } from "../../styles/spacing.stylex";
+
+export const gridStyles = create({
+	base: {
+		display: "grid",
+		gap: space["3"],
+		gridTemplateColumns: {
+			default: "minmax(0, 1fr)",
+			[conditions.sm]: "repeat(2, minmax(0, 1fr))",
+		},
+		minWidth: 0,
+	},
+});

package/src/components/grid/grid.tsx

@@ -0,0 +1,22 @@
+import { props } from "@stylexjs/stylex";
+import type { ComponentPropsWithRef } from "react";
+import { gridStyles } from "./grid.styles";
+
+type NativeDivProps = ComponentPropsWithRef<"div">;
+
+export type GridProps = Omit<NativeDivProps, "className" | "role" | "style">;
+
+export function Grid({ children, ref: forwardedRef, ...rest }: GridProps) {
+	Reflect.deleteProperty(rest, "role");
+
+	return (
+		<div
+			{...rest}
+			data-slot="grid"
+			ref={forwardedRef}
+			{...props(gridStyles.base)}
+		>
+			{children}
+		</div>
+	);
+}

package/src/components/group/group.styles.ts

@@ -0,0 +1,13 @@
+import { create } from "@stylexjs/stylex";
+import { space } from "../../styles/spacing.stylex";
+
+export const groupStyles = create({
+	base: {
+		alignItems: "center",
+		display: "flex",
+		flexDirection: "row",
+		flexWrap: "wrap",
+		gap: space["2"],
+		minWidth: 0,
+	},
+});

package/src/components/group/group.tsx

@@ -0,0 +1,22 @@
+import { props } from "@stylexjs/stylex";
+import type { ComponentPropsWithRef } from "react";
+import { groupStyles } from "./group.styles";
+
+type NativeDivProps = ComponentPropsWithRef<"div">;
+
+export type GroupProps = Omit<NativeDivProps, "className" | "role" | "style">;
+
+export function Group({ children, ref: forwardedRef, ...rest }: GroupProps) {
+	Reflect.deleteProperty(rest, "role");
+
+	return (
+		<div
+			{...rest}
+			data-slot="group"
+			ref={forwardedRef}
+			{...props(groupStyles.base)}
+		>
+			{children}
+		</div>
+	);
+}

package/src/components/heading/heading.styles.ts

@@ -0,0 +1,10 @@
+import { create } from "@stylexjs/stylex";
+import { colors } from "../../styles/colors.stylex";
+
+export const headingStyles = create({
+	base: {
+		color: colors.content,
+		marginBlock: 0,
+		overflowWrap: "anywhere",
+	},
+});

package/src/components/heading/heading.tsx

@@ -0,0 +1,52 @@
+import { props } from "@stylexjs/stylex";
+import type { ComponentPropsWithRef } from "react";
+import { typeRoles } from "../../styles/typography.styles";
+import { headingStyles } from "./heading.styles";
+
+type NativeHeadingProps = ComponentPropsWithRef<"h2">;
+
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+export type HeadingSize = "display" | "heading" | "subheading" | "title";
+
+export type HeadingProps = Omit<NativeHeadingProps, "className" | "style"> & {
+	level?: HeadingLevel;
+	size?: HeadingSize;
+};
+
+const headingElements = {
+	1: "h1",
+	2: "h2",
+	3: "h3",
+	4: "h4",
+	5: "h5",
+	6: "h6",
+} as const;
+
+const sizeStyles = {
+	display: typeRoles.display,
+	heading: typeRoles.heading,
+	subheading: typeRoles.subheading,
+	title: typeRoles.title,
+};
+
+export function Heading({
+	children,
+	level = 2,
+	ref: forwardedRef,
+	size = "heading",
+	...rest
+}: HeadingProps) {
+	const Component = headingElements[level];
+
+	return (
+		<Component
+			{...rest}
+			data-size={size}
+			data-slot="heading"
+			ref={forwardedRef}
+			{...props(headingStyles.base, sizeStyles[size])}
+		>
+			{children}
+		</Component>
+	);
+}

package/src/components/heatmap/heatmap-scale.tsx

@@ -0,0 +1,92 @@
+import { create, props } from "@stylexjs/stylex";
+import { colors } from "../../styles/colors.stylex";
+import { space } from "../../styles/spacing.stylex";
+import { typeRoles } from "../../styles/typography.styles";
+import { type ChartSeriesTone, chartColors } from "../chart-frame/chart-colors";
+
+// Shared by Heatmap and CalendarHeatmap: six sequential buckets of one hue,
+// mixed from the workarea, plus a separate "missing" color.
+
+const BUCKETS = [0, 1, 2, 3, 4, 5] as const;
+export const COLOR_DOMAIN = ["missing", ...BUCKETS] as const;
+
+const styles = create({
+	group: {
+		alignItems: "center",
+		display: "flex",
+		flexWrap: "wrap",
+		gap: space["1"],
+		minInlineSize: 0,
+	},
+	label: { color: colors.mutedContent },
+	legend: {
+		alignItems: "center",
+		columnGap: space["3"],
+		display: "flex",
+		flexWrap: "wrap",
+		justifyContent: "flex-end",
+		marginBlockStart: space["2"],
+		rowGap: space["1"],
+	},
+	swatch: (backgroundColor: string) => ({
+		backgroundColor,
+		blockSize: space["3"],
+		borderRadius: 3,
+		flexShrink: 0,
+		inlineSize: space["3"],
+	}),
+});
+
+export function getBucket(value: number, maximum: number) {
+	return Math.min(
+		BUCKETS.length - 1,
+		Math.floor((value / (maximum || 1)) * BUCKETS.length)
+	);
+}
+
+export function colorRange(tone: ChartSeriesTone) {
+	return [
+		colors.workarea,
+		...BUCKETS.map(
+			(bucket) =>
+				`color-mix(in oklab, ${colors.workarea} ${100 - ((bucket + 1) / BUCKETS.length) * 100}%, ${chartColors[tone]})`
+		),
+	];
+}
+
+export function HeatmapLegend({
+	high,
+	tone,
+	valueLabel,
+}: {
+	high: string;
+	tone: ChartSeriesTone;
+	valueLabel: string;
+}) {
+	return (
+		<div
+			aria-label={`${valueLabel} range; No data is shown separately`}
+			data-slot="heatmap-legend"
+			role="img"
+			{...props(styles.legend)}
+		>
+			<span {...props(styles.group)}>
+				<span {...props(typeRoles.caption, styles.label)}>Low 0</span>
+				{colorRange(tone)
+					.slice(1)
+					.map((color) => (
+						<span
+							aria-hidden="true"
+							key={color}
+							{...props(styles.swatch(color))}
+						/>
+					))}
+				<span {...props(typeRoles.caption, styles.label)}>High {high}</span>
+			</span>
+			<span {...props(styles.group)}>
+				<span aria-hidden="true" {...props(styles.swatch(colors.workarea))} />
+				<span {...props(typeRoles.caption, styles.label)}>No data</span>
+			</span>
+		</div>
+	);
+}