@mizen-labs/ui 0.0.0-stage → 0.1.0

package/src/components/dialog/dialog.tsx

@@ -0,0 +1,227 @@
+"use client";
+
+import {
+	Dialog as BaseDialog,
+	type DialogCloseProps as BaseDialogCloseProps,
+	type DialogDescriptionProps as BaseDialogDescriptionProps,
+	type DialogPopupProps as BaseDialogPopupProps,
+	type DialogPortalProps as BaseDialogPortalProps,
+	type DialogRootProps as BaseDialogRootProps,
+	type DialogTitleProps as BaseDialogTitleProps,
+	type DialogTriggerProps as BaseDialogTriggerProps,
+} from "@base-ui/react/dialog";
+import { props } from "@stylexjs/stylex";
+import type { ComponentPropsWithRef } from "react";
+import { IconX } from "../../icons";
+import { overlayLayerStyles } from "../../styles/overlay-layers.styles";
+import { dialogStyles } from "./dialog.styles";
+
+type Closed<T> = Omit<T, "className" | "style">;
+type DivProps = Omit<ComponentPropsWithRef<"div">, "className" | "style">;
+type DialogTriggerRef = ComponentPropsWithRef<typeof BaseDialog.Trigger>["ref"];
+type DialogPopupRef = ComponentPropsWithRef<typeof BaseDialog.Popup>["ref"];
+
+export type DialogSize = "sm" | "md" | "lg" | "xl";
+export type DialogProps<Payload = unknown> = BaseDialogRootProps<Payload>;
+export type DialogTriggerProps<Payload = unknown> = Omit<
+	BaseDialogTriggerProps<Payload>,
+	"className" | "ref" | "style"
+> & {
+	ref?: DialogTriggerRef;
+};
+export type DialogPopupProps = Omit<
+	BaseDialogPopupProps,
+	"className" | "ref" | "render" | "style"
+> & {
+	portalProps?: Omit<
+		BaseDialogPortalProps,
+		"children" | "className" | "ref" | "render" | "style"
+	>;
+	ref?: DialogPopupRef;
+	showCloseButton?: boolean;
+	size?: DialogSize;
+};
+export type DialogTitleProps = Closed<BaseDialogTitleProps>;
+export type DialogDescriptionProps = Closed<BaseDialogDescriptionProps>;
+export type DialogCloseProps = Omit<
+	BaseDialogCloseProps,
+	"className" | "style"
+>;
+export type DialogHeaderProps = DivProps;
+export type DialogPanelProps = DivProps;
+export type DialogFooterProps = DivProps;
+
+const sizeStyles = {
+	lg: dialogStyles.popupLg,
+	md: dialogStyles.popupMd,
+	sm: dialogStyles.popupSm,
+	xl: dialogStyles.popupXl,
+};
+
+function CloseIcon() {
+	return <IconX aria-hidden="true" focusable="false" size="16" />;
+}
+
+export const DialogCreateHandle = BaseDialog.createHandle;
+
+export function Dialog<Payload = unknown>(rootProps: DialogProps<Payload>) {
+	return <BaseDialog.Root {...rootProps} />;
+}
+
+export function DialogTrigger<Payload = unknown>({
+	ref: forwardedRef = undefined,
+	render,
+	type,
+	...rest
+}: DialogTriggerProps<Payload>) {
+	return (
+		<BaseDialog.Trigger
+			{...rest}
+			ref={forwardedRef}
+			render={render}
+			type={render ? type : (type ?? "button")}
+		/>
+	);
+}
+
+export function DialogPopup({
+	children,
+	portalProps,
+	ref: forwardedRef = undefined,
+	showCloseButton = true,
+	size = "md",
+	...rest
+}: DialogPopupProps) {
+	return (
+		<BaseDialog.Portal
+			{...portalProps}
+			{...props(overlayLayerStyles.modalPortal)}
+		>
+			<BaseDialog.Backdrop
+				data-slot="dialog-backdrop"
+				{...props(dialogStyles.backdrop, overlayLayerStyles.backdrop)}
+			/>
+			<BaseDialog.Viewport
+				data-slot="dialog-viewport"
+				{...props(dialogStyles.viewport, overlayLayerStyles.modalViewport)}
+			>
+				<BaseDialog.Popup
+					{...rest}
+					data-slot="dialog-popup"
+					ref={forwardedRef}
+					{...props(dialogStyles.popup, sizeStyles[size])}
+				>
+					{showCloseButton ? (
+						<BaseDialog.Close
+							aria-label="Close"
+							data-slot="dialog-default-close"
+							{...props(dialogStyles.close)}
+						>
+							<CloseIcon />
+						</BaseDialog.Close>
+					) : null}
+					{children}
+				</BaseDialog.Popup>
+			</BaseDialog.Viewport>
+		</BaseDialog.Portal>
+	);
+}
+
+export function DialogTitle({
+	children,
+	ref: forwardedRef,
+	...rest
+}: DialogTitleProps) {
+	return (
+		<BaseDialog.Title
+			{...rest}
+			ref={forwardedRef}
+			{...props(dialogStyles.title)}
+		>
+			{children}
+		</BaseDialog.Title>
+	);
+}
+
+export function DialogDescription({
+	children,
+	ref: forwardedRef,
+	...rest
+}: DialogDescriptionProps) {
+	return (
+		<BaseDialog.Description
+			{...rest}
+			ref={forwardedRef}
+			{...props(dialogStyles.description)}
+		>
+			{children}
+		</BaseDialog.Description>
+	);
+}
+
+export function DialogClose({
+	ref: forwardedRef,
+	render,
+	type,
+	...rest
+}: DialogCloseProps) {
+	return (
+		<BaseDialog.Close
+			{...rest}
+			ref={forwardedRef}
+			render={render}
+			type={render ? type : (type ?? "button")}
+		/>
+	);
+}
+
+export function DialogHeader({
+	children,
+	ref: forwardedRef,
+	...rest
+}: DialogHeaderProps) {
+	return (
+		<div
+			{...rest}
+			data-slot="dialog-header"
+			ref={forwardedRef}
+			{...props(dialogStyles.header)}
+		>
+			{children}
+		</div>
+	);
+}
+
+export function DialogPanel({
+	children,
+	ref: forwardedRef,
+	...rest
+}: DialogPanelProps) {
+	return (
+		<div
+			{...rest}
+			data-slot="dialog-panel"
+			ref={forwardedRef}
+			{...props(dialogStyles.panel)}
+		>
+			{children}
+		</div>
+	);
+}
+
+export function DialogFooter({
+	children,
+	ref: forwardedRef,
+	...rest
+}: DialogFooterProps) {
+	return (
+		<div
+			{...rest}
+			data-slot="dialog-footer"
+			ref={forwardedRef}
+			{...props(dialogStyles.footer)}
+		>
+			{children}
+		</div>
+	);
+}

package/src/components/distribution/distribution.styles.ts

@@ -0,0 +1,14 @@
+import { create } from "@stylexjs/stylex";
+import { space } from "../../styles/spacing.stylex";
+
+export const distributionStyles = create({
+	empty: {
+		marginBlock: 0,
+	},
+	legend: {
+		marginBlockStart: space["2"],
+	},
+	root: {
+		minWidth: 0,
+	},
+});

package/src/components/distribution/distribution.tsx

@@ -0,0 +1,450 @@
+"use client";
+
+import { props } from "@stylexjs/stylex";
+import { crosshair, defineChart, rect } from "@tanstack/charts";
+import type { ChartTooltipBodyRenderContext } from "@tanstack/charts/react/tooltip";
+import { scaleLinear } from "@tanstack/charts/scales/linear";
+import { tooltip as tooltipFeature } from "@tanstack/charts/tooltip";
+import { binX } from "@tanstack/charts/transform/bin";
+import type { ComponentPropsWithRef } from "react";
+import { useMemo } from "react";
+import type { Closed } from "../../closed";
+import { typeRoles } from "../../styles/typography.styles";
+import { type ChartSeriesTone, chartColors } from "../chart-frame/chart-colors";
+import { ChartFrame } from "../chart-frame/chart-frame";
+import { ChartLegend } from "../chart-legend/chart-legend";
+import { ChartTooltip } from "../chart-tooltip/chart-tooltip";
+import { distributionStyles } from "./distribution.styles";
+
+export type DistributionProps = Omit<
+	Closed<ComponentPropsWithRef<"div">>,
+	"aria-label" | "children" | "data-slot" | "role"
+> & {
+	"aria-description"?: string;
+	"aria-label": string;
+	binCount?: number;
+	domain: readonly [number, number];
+	formatAxisValue?: (value: number) => string;
+	formatValue?: (value: number) => string;
+	locale?: string;
+	seriesLabel: string;
+	tone?: ChartSeriesTone;
+	values: readonly number[];
+};
+
+interface DistributionBin {
+	count: number;
+	x1: number;
+	x2: number;
+}
+
+interface DistributionChartProps {
+	"aria-description"?: string;
+	"aria-label": string;
+	bins: readonly DistributionBin[];
+	domain: readonly [number, number];
+	formatAxisValue?: (value: number) => string;
+	formatValue?: (value: number) => string;
+	locale: string;
+	seriesLabel: string;
+	tone: ChartSeriesTone;
+}
+
+function assertDomain(domain: readonly [number, number]) {
+	if (
+		!Array.isArray(domain) ||
+		domain.length !== 2 ||
+		!domain.every(Number.isFinite) ||
+		domain[0] >= domain[1] ||
+		!Number.isFinite(domain[1] - domain[0])
+	) {
+		throw new RangeError(
+			"Distribution domain must be a finite increasing range."
+		);
+	}
+}
+
+function assertFormatters(
+	formatValue: ((value: number) => string) | undefined,
+	formatAxisValue: ((value: number) => string) | undefined
+) {
+	for (const [name, formatter] of Object.entries({
+		formatAxisValue,
+		formatValue,
+	})) {
+		if (formatter !== undefined && typeof formatter !== "function") {
+			throw new TypeError(`Distribution ${name} must be a function.`);
+		}
+	}
+}
+
+function assertValues(
+	values: readonly number[],
+	domain: readonly [number, number]
+) {
+	if (!Array.isArray(values)) {
+		throw new TypeError("Distribution values must be an array.");
+	}
+	const [minimum, maximum] = domain;
+	for (const value of values) {
+		if (typeof value !== "number" || !Number.isFinite(value)) {
+			throw new RangeError("Distribution values must be finite numbers.");
+		}
+		if (value < minimum || value > maximum) {
+			throw new RangeError("Distribution values must fall within the domain.");
+		}
+	}
+}
+
+function makeBoundaries(domain: readonly [number, number], binCount: number) {
+	if (!Number.isSafeInteger(binCount) || binCount <= 0) {
+		throw new RangeError(
+			"Distribution binCount must be a positive safe integer."
+		);
+	}
+	const [minimum, maximum] = domain;
+	const width = maximum - minimum;
+	if (minimum + width / binCount === minimum) {
+		throw new RangeError(
+			"Distribution domain is too narrow for the requested binCount."
+		);
+	}
+	const boundaries = Array.from({ length: binCount + 1 }, (_, index) => {
+		if (index === 0) {
+			return minimum;
+		}
+		if (index === binCount) {
+			return maximum;
+		}
+		return minimum + width * (index / binCount);
+	});
+	if (
+		boundaries.some(
+			(edge, index) =>
+				index > 0 && (!Number.isFinite(edge) || edge <= boundaries[index - 1])
+		)
+	) {
+		throw new RangeError(
+			"Distribution domain is too narrow for the requested binCount."
+		);
+	}
+	return boundaries;
+}
+
+function prepareValues(
+	values: readonly number[],
+	domain: readonly [number, number],
+	binCount: number
+) {
+	assertDomain(domain);
+	assertValues(values, domain);
+	const boundaries = makeBoundaries(domain, binCount);
+	const bins = binX(values, {
+		domain,
+		outputs: { count: { reduce: "count" } },
+		thresholds: boundaries,
+		value: (value) => value,
+	});
+	return bins.map(({ count, x1, x2 }) => ({ count, x1, x2 }));
+}
+
+function formatNumber(
+	value: number,
+	formatter: ((value: number) => string) | undefined,
+	numberFormat: Intl.NumberFormat,
+	formatterName = "formatValue"
+) {
+	const formatted = formatter ? formatter(value) : numberFormat.format(value);
+	if (typeof formatted !== "string") {
+		throw new TypeError(`Distribution ${formatterName} must return a string.`);
+	}
+	return formatted;
+}
+
+function renderTooltip(
+	context: ChartTooltipBodyRenderContext<DistributionBin, number, number>,
+	seriesLabel: string,
+	tone: ChartSeriesTone,
+	formatStart: (value: number) => string,
+	format: (value: number) => string,
+	countFormat: Intl.NumberFormat
+) {
+	const point = context.primaryPoint ?? context.points[0];
+	if (!point) {
+		return null;
+	}
+	const bin = point.datum;
+	// A plain range such as "10–20 min": the start uses the axis format, so a
+	// unit in the value format appears once.
+	const interval = `${formatStart(bin.x1)}–${format(bin.x2)}`;
+	return (
+		<ChartTooltip
+			items={[
+				{
+					id: `distribution-bin-${bin.x1}`,
+					label: seriesLabel,
+					tone,
+					value: countFormat.format(bin.count),
+				},
+			]}
+			label={interval}
+		/>
+	);
+}
+
+function DistributionChart({
+	"aria-description": ariaDescription,
+	"aria-label": ariaLabel,
+	bins,
+	domain,
+	formatAxisValue,
+	formatValue,
+	locale,
+	seriesLabel,
+	tone,
+}: DistributionChartProps) {
+	const numberFormat = useMemo(
+		() => new Intl.NumberFormat(locale, { maximumSignificantDigits: 21 }),
+		[locale]
+	);
+	const format = useMemo(
+		() => (value: number) => formatNumber(value, formatValue, numberFormat),
+		[formatValue, numberFormat]
+	);
+	const formatStart = useMemo(
+		() =>
+			formatAxisValue
+				? (value: number) =>
+						formatNumber(
+							value,
+							formatAxisValue,
+							numberFormat,
+							"formatAxisValue"
+						)
+				: format,
+		[format, formatAxisValue, numberFormat]
+	);
+	const countFormat = useMemo(
+		() => new Intl.NumberFormat(locale, { maximumFractionDigits: 0 }),
+		[locale]
+	);
+	const definition = useMemo(() => {
+		const maximumCount = bins.reduce(
+			(maximum, { count }) => Math.max(maximum, count),
+			0
+		);
+		const countStep = Math.max(1, Math.ceil(maximumCount / 4));
+		const countTicks = Array.from(
+			{ length: Math.floor(maximumCount / countStep) + 1 },
+			(_, index) => index * countStep
+		);
+		if (countTicks.at(-1) !== maximumCount) {
+			countTicks.push(maximumCount);
+		}
+		return defineChart(
+			{
+				marks: [
+					rect(bins, {
+						fill: chartColors[tone],
+						fillOpacity: 0.82,
+						id: "distribution-bars",
+						inset: 1.25,
+						key: ({ x1, x2 }) => `${x1}:${x2}`,
+						radius: 2,
+						x1: "x1",
+						x2: "x2",
+						y1: () => 0,
+						y2: "count",
+					}),
+					// One ring on the focused bin, drawn over the bars like Chart Frame's ring.
+					crosshair({
+						marker: {
+							fill: "var(--ts-chart-focus-fill, Canvas)",
+							radius: 5,
+							stroke: chartColors[tone],
+							strokeWidth: 2.5,
+						},
+						x: false,
+						y: false,
+					}),
+				],
+				scales: {
+					x: {
+						axis: {
+							ticks: {
+								count: 5,
+								format: (value: number) =>
+									formatNumber(
+										value,
+										formatAxisValue ?? formatValue,
+										numberFormat,
+										formatAxisValue ? "formatAxisValue" : "formatValue"
+									),
+							},
+						},
+						scale: scaleLinear().domain(domain),
+					},
+					y: {
+						axis: {
+							ticks: {
+								format: (value: number) => countFormat.format(value),
+								values: countTicks,
+							},
+						},
+						grid: true,
+						scale: scaleLinear().domain([0, maximumCount]),
+					},
+				},
+			},
+			{
+				focus: "group-x",
+				// The default layer rings every bin of an interval mark at once, so
+				// the crosshair marker above rings only the focused one.
+				focusRing: false,
+				tooltip: tooltipFeature,
+			}
+		);
+	}, [
+		bins,
+		countFormat,
+		domain,
+		formatAxisValue,
+		formatValue,
+		numberFormat,
+		tone,
+	]);
+	const renderTooltipBody = useMemo(
+		() =>
+			(
+				context: ChartTooltipBodyRenderContext<DistributionBin, number, number>
+			) =>
+				renderTooltip(
+					context,
+					seriesLabel,
+					tone,
+					formatStart,
+					format,
+					countFormat
+				),
+		[countFormat, format, formatStart, seriesLabel, tone]
+	);
+
+	return (
+		<div data-slot="distribution-chart">
+			<ChartFrame
+				aria-description={ariaDescription}
+				aria-label={ariaLabel}
+				definition={definition}
+				height={264}
+				renderTooltipBody={renderTooltipBody}
+				tabIndex={0}
+			/>
+			<div
+				data-slot="distribution-legend"
+				{...props(distributionStyles.legend)}
+			>
+				<ChartLegend
+					aria-label={`${seriesLabel} series`}
+					items={[{ id: "distribution-series", label: seriesLabel, tone }]}
+				/>
+			</div>
+		</div>
+	);
+}
+
+function assertOptions(
+	ariaLabel: string,
+	seriesLabel: string,
+	formatValue: ((value: number) => string) | undefined,
+	formatAxisValue: ((value: number) => string) | undefined,
+	locale: string,
+	tone: ChartSeriesTone
+) {
+	if (
+		typeof ariaLabel !== "string" ||
+		typeof seriesLabel !== "string" ||
+		!ariaLabel.trim() ||
+		!seriesLabel.trim()
+	) {
+		throw new TypeError(
+			"Distribution requires non-empty aria-label and seriesLabel values."
+		);
+	}
+	assertFormatters(formatValue, formatAxisValue);
+	if (typeof locale !== "string" || !locale.trim()) {
+		throw new TypeError("Distribution locale must be a non-empty string.");
+	}
+	if (!Object.hasOwn(chartColors, tone)) {
+		throw new RangeError("Distribution tone is not supported.");
+	}
+	new Intl.NumberFormat(locale).format(0);
+}
+
+export function Distribution({
+	"aria-description": ariaDescription,
+	"aria-label": ariaLabel,
+	binCount = 8,
+	domain,
+	formatValue,
+	formatAxisValue,
+	locale = "en-US",
+	ref: forwardedRef,
+	seriesLabel,
+	tone = "series1",
+	values: inputValues,
+	...rest
+}: DistributionProps) {
+	assertOptions(
+		ariaLabel,
+		seriesLabel,
+		formatValue,
+		formatAxisValue,
+		locale,
+		tone
+	);
+	const bins = useMemo(
+		() => prepareValues(inputValues, domain, binCount),
+		[binCount, domain, inputValues]
+	);
+	for (const name of [
+		"aria-label",
+		"children",
+		"className",
+		"data-slot",
+		"role",
+		"style",
+	]) {
+		Reflect.deleteProperty(rest, name);
+	}
+
+	return (
+		<div
+			{...rest}
+			data-slot="distribution"
+			ref={forwardedRef}
+			{...props(distributionStyles.root)}
+		>
+			{inputValues.length === 0 ? (
+				<p
+					aria-label={ariaLabel}
+					role="status"
+					{...props(typeRoles.body, distributionStyles.empty)}
+				>
+					No observations available.
+				</p>
+			) : (
+				<DistributionChart
+					aria-description={ariaDescription}
+					aria-label={ariaLabel}
+					bins={bins}
+					domain={domain}
+					formatAxisValue={formatAxisValue}
+					formatValue={formatValue}
+					locale={locale}
+					seriesLabel={seriesLabel}
+					tone={tone}
+				/>
+			)}
+		</div>
+	);
+}