@inkra/react 0.1.0 → 0.3.0

package/dist/sparkline/index.js

@@ -0,0 +1,240 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo, useRef, useState } from 'react';
+import { PencilText } from '../PencilText.js';
+import { useBrowserLayoutEffect } from '../internal/useBrowserLayoutEffect.js';
+import { effectiveDpr } from '../internal/cache.js';
+import { observeCanvasRecovery } from '../internal/recovery.js';
+import { seedToNumber } from '../internal/random.js';
+import { pencilStroke } from '../internal/stroke.js';
+import { drawPencilWash } from '../internal/wash.js';
+import { pencilRenderDefaults, readRenderToken } from '../internal/renderTokens.js';
+import { createSparklineGeometry, normalizeSparklineData, sparklineDomain } from './model.js';
+function defaultLabel(value, index) {
+    return value === null ? `Point ${index + 1}: missing` : `Point ${index + 1}: ${value}`;
+}
+function resolveCssColor(host, style, token, fallback) {
+    const value = style.getPropertyValue(token).trim();
+    if (!value || !value.includes('var('))
+        return value || fallback;
+    const probe = document.createElement('span');
+    probe.style.color = `var(${token})`;
+    host.appendChild(probe);
+    const resolved = getComputedStyle(probe).color;
+    probe.remove();
+    return resolved || fallback;
+}
+export const Sparkline = forwardRef(function Sparkline({ data, type = 'line', width = 180, height = 56, min, max, label = 'Sparkline', showPoints = true, showArea = true, showSummary = true, getLabel = defaultLabel, className, ...props }, ref) {
+    const canvasRef = useRef(null);
+    const interactionCanvasRef = useRef(null);
+    const [pencilReady, setPencilReady] = useState(false);
+    const [interactionReady, setInteractionReady] = useState(false);
+    const points = useMemo(() => normalizeSparklineData(data), [data]);
+    const values = useMemo(() => points.flatMap(point => point.value === null ? [] : [point.value]), [points]);
+    const domain = useMemo(() => sparklineDomain(points), [points]);
+    const boundedPoints = useMemo(() => points.map(point => ({
+        ...point,
+        value: point.value === null ? null : Math.min(max ?? Infinity, Math.max(min ?? -Infinity, point.value)),
+    })), [max, min, points]);
+    const geometry = useMemo(() => createSparklineGeometry(boundedPoints, width, height), [boundedPoints, height, width]);
+    const [activeIndex, setActiveIndex] = useState(values.length ? [...points].reverse().find(point => point.value !== null)?.index ?? null : null);
+    const activePoint = activeIndex === null ? null : points[activeIndex] ?? null;
+    const effectiveShowPoints = showPoints || values.length === 1;
+    const summary = values.length === 0 ? 'No data' : `Current ${values[values.length - 1]}, min ${Math.min(...values)}, max ${Math.max(...values)}`;
+    const onKeyDown = (event) => {
+        if (!points.length || !['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key))
+            return;
+        event.preventDefault();
+        const current = activeIndex ?? 0;
+        const next = event.key === 'Home' ? 0 : event.key === 'End' ? points.length - 1 : Math.min(points.length - 1, Math.max(0, current + (event.key === 'ArrowRight' ? 1 : -1)));
+        setActiveIndex(next);
+    };
+    const classes = ['inkra-sparkline', `inkra-sparkline--${type}`, className].filter(Boolean).join(' ');
+    useBrowserLayoutEffect(() => {
+        const canvas = canvasRef.current;
+        if (!canvas || typeof window === 'undefined')
+            return undefined;
+        let frame = 0;
+        let disposed = false;
+        const paint = () => {
+            frame = 0;
+            if (disposed)
+                return;
+            const cssWidth = canvas.clientWidth;
+            const cssHeight = canvas.clientHeight;
+            const clear = () => { canvas.width = 1; canvas.height = 1; setPencilReady(false); };
+            if (!values.length || cssWidth < 4 || cssHeight < 4) {
+                clear();
+                return;
+            }
+            const dpr = effectiveDpr(2);
+            const context = canvas.getContext('2d');
+            if (!context || context.isContextLost?.()) {
+                clear();
+                return;
+            }
+            const style = getComputedStyle(canvas);
+            const lineColor = resolveCssColor(canvas, style, '--inkra-accent-strong', style.color);
+            const washColor = resolveCssColor(canvas, style, '--inkra-accent', lineColor);
+            const strokeWidth = readRenderToken(style, '--inkra-stroke-width', pencilRenderDefaults.strokeWidth, 0.3, 3);
+            const roughness = readRenderToken(style, '--inkra-stroke-amplitude', pencilRenderDefaults.strokeRoughness, 0, 4);
+            const washStrength = readRenderToken(style, '--inkra-wash-strength', pencilRenderDefaults.washStrength, 0, 1) / 0.48;
+            const washSpacing = readRenderToken(style, '--inkra-wash-spacing', pencilRenderDefaults.washSpacing, 1, 6);
+            const washRoughness = readRenderToken(style, '--inkra-wash-roughness', pencilRenderDefaults.washRoughness, 0, 6);
+            const washAngle = readRenderToken(style, '--inkra-wash-angle', pencilRenderDefaults.washAngle, -85, 85);
+            canvas.width = Math.ceil(cssWidth * dpr);
+            canvas.height = Math.ceil(cssHeight * dpr);
+            context.setTransform(dpr, 0, 0, dpr, 0, 0);
+            context.clearRect(0, 0, cssWidth, cssHeight);
+            const scaleX = cssWidth / width;
+            const scaleY = cssHeight / height;
+            const segments = [];
+            let segment = [];
+            boundedPoints.forEach(point => {
+                if (point.value === null) {
+                    if (segment.length)
+                        segments.push(segment);
+                    segment = [];
+                    return;
+                }
+                segment.push([geometry.x(point.index) * scaleX, geometry.y(point.value) * scaleY]);
+            });
+            if (segment.length)
+                segments.push(segment);
+            const seed = seedToNumber(`sparkline-${type}-${data.length}`);
+            if (type === 'line' && segments.some(points => points.length > 1)) {
+                if (showArea && typeof Path2D !== 'undefined' && geometry.areaPath) {
+                    context.save();
+                    context.scale(scaleX, scaleY);
+                    context.clip(new Path2D(geometry.areaPath));
+                    context.setTransform(dpr, 0, 0, dpr, 0, 0);
+                    drawPencilWash(context, { x: 0, y: 0, width: cssWidth, height: cssHeight }, washColor, seed + 17, { strength: washStrength * 0.22, spacing: washSpacing, roughness: washRoughness, angle: washAngle, inset: 2, radius: 2, dpr });
+                    context.restore();
+                }
+                segments.forEach((points, index) => {
+                    if (points.length > 1)
+                        pencilStroke(context, points, lineColor, strokeWidth, seed + index * 47, roughness, 2, false, { variation: 0.82, breaks: 0.25, grain: 0.62, gain: 2.1, step: 0.8 });
+                });
+            }
+            else if (type === 'bar') {
+                const baseline = geometry.y(0) * scaleY;
+                const barWidth = Math.max(2, cssWidth / Math.max(16, points.length * 2));
+                boundedPoints.forEach(point => {
+                    if (point.value === null)
+                        return;
+                    const y = geometry.y(point.value) * scaleY;
+                    drawPencilWash(context, { x: geometry.x(point.index) * scaleX - barWidth / 2, y: Math.min(y, baseline), width: barWidth, height: Math.max(2, Math.abs(baseline - y)) }, washColor, seed + point.index * 31, { strength: washStrength * 0.34, spacing: washSpacing, roughness: washRoughness, angle: washAngle, inset: 1, radius: 1, dpr });
+                    pencilStroke(context, [[geometry.x(point.index) * scaleX - barWidth / 2, Math.min(y, baseline)], [geometry.x(point.index) * scaleX + barWidth / 2, Math.min(y, baseline)]], lineColor, strokeWidth * 0.55, seed + point.index * 43, roughness, 1, false, { variation: 0.8, breaks: 0.2, grain: 0.65, step: 0.8 });
+                });
+            }
+            if (!disposed)
+                setPencilReady(true);
+        };
+        const schedule = () => {
+            if (frame)
+                return;
+            frame = requestAnimationFrame(() => {
+                try {
+                    paint();
+                }
+                catch {
+                    canvas.width = 1;
+                    canvas.height = 1;
+                    setPencilReady(false);
+                }
+            });
+        };
+        const resize = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(schedule);
+        resize?.observe(canvas);
+        const media = window.matchMedia('(prefers-color-scheme: dark)');
+        media.addEventListener('change', schedule);
+        const inheritedStyle = new MutationObserver(schedule);
+        for (let element = canvas; element; element = element.parentElement)
+            inheritedStyle.observe(element, { attributes: true, attributeFilter: ['style', 'class', 'data-theme', 'data-inkra-theme'] });
+        const stopRecovery = observeCanvasRecovery(() => { setPencilReady(false); schedule(); });
+        try {
+            paint();
+        }
+        catch {
+            canvas.width = 1;
+            canvas.height = 1;
+            setPencilReady(false);
+        }
+        return () => { disposed = true; setPencilReady(false); resize?.disconnect(); inheritedStyle.disconnect(); stopRecovery(); media.removeEventListener('change', schedule); cancelAnimationFrame(frame); };
+    }, [boundedPoints, data.length, geometry, height, showArea, type, values.length, width]);
+    useBrowserLayoutEffect(() => {
+        const canvas = interactionCanvasRef.current;
+        if (!canvas || typeof window === 'undefined')
+            return undefined;
+        let frame = 0;
+        const paint = () => {
+            frame = 0;
+            const cssWidth = canvas.clientWidth;
+            const cssHeight = canvas.clientHeight;
+            const context = canvas.getContext('2d');
+            const clearInteraction = () => { canvas.width = 1; canvas.height = 1; setInteractionReady(false); };
+            if (!context || cssWidth < 4 || cssHeight < 4 || !values.length) {
+                clearInteraction();
+                return;
+            }
+            const dpr = effectiveDpr(2);
+            const style = getComputedStyle(canvas);
+            const lineColor = resolveCssColor(canvas, style, '--inkra-accent-strong', style.color);
+            const strokeWidth = readRenderToken(style, '--inkra-stroke-width', pencilRenderDefaults.strokeWidth, 0.3, 3);
+            const roughness = readRenderToken(style, '--inkra-stroke-amplitude', pencilRenderDefaults.strokeRoughness, 0, 4);
+            canvas.width = Math.ceil(cssWidth * dpr);
+            canvas.height = Math.ceil(cssHeight * dpr);
+            context.setTransform(dpr, 0, 0, dpr, 0, 0);
+            context.clearRect(0, 0, cssWidth, cssHeight);
+            const scaleX = cssWidth / width;
+            const scaleY = cssHeight / height;
+            const seed = seedToNumber(`sparkline-interaction-${type}-${data.length}`);
+            if (type === 'line' && effectiveShowPoints)
+                boundedPoints.forEach(point => {
+                    if (point.value === null)
+                        return;
+                    const x = geometry.x(point.index) * scaleX;
+                    const y = geometry.y(point.value) * scaleY;
+                    pencilStroke(context, [[x - 2.8, y], [x, y - 2.8], [x + 2.8, y], [x, y + 2.8], [x - 2.8, y]], lineColor, strokeWidth * 0.7, seed + point.index * 61, roughness, 1, true, { variation: 0.75, breaks: 0.12, grain: 0.62, gain: 1.8, step: 0.8 });
+                });
+            if (activePoint && activePoint.value !== null) {
+                const x = geometry.x(activePoint.index) * scaleX;
+                pencilStroke(context, [[x, 2], [x, cssHeight - 2]], lineColor, strokeWidth * 0.18, seed + 401, roughness, 1, false, { variation: 0.55, breaks: 0.45, grain: 0.5, gain: 1.1, step: 1.2 });
+            }
+            setInteractionReady(true);
+        };
+        const schedule = () => { if (!frame)
+            frame = requestAnimationFrame(() => { try {
+                paint();
+            }
+            catch {
+                canvas.width = 1;
+                canvas.height = 1;
+                setInteractionReady(false);
+            } }); };
+        const resize = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(schedule);
+        resize?.observe(canvas);
+        const media = window.matchMedia('(prefers-color-scheme: dark)');
+        media.addEventListener('change', schedule);
+        const inheritedStyle = new MutationObserver(schedule);
+        for (let element = canvas; element; element = element.parentElement)
+            inheritedStyle.observe(element, { attributes: true, attributeFilter: ['style', 'class', 'data-theme', 'data-inkra-theme'] });
+        const stopRecovery = observeCanvasRecovery(() => { setInteractionReady(false); schedule(); });
+        try {
+            paint();
+        }
+        catch {
+            canvas.width = 1;
+            canvas.height = 1;
+            setInteractionReady(false);
+        }
+        return () => { setInteractionReady(false); resize?.disconnect(); inheritedStyle.disconnect(); stopRecovery(); media.removeEventListener('change', schedule); cancelAnimationFrame(frame); };
+    }, [activeIndex, activePoint, boundedPoints, data.length, effectiveShowPoints, geometry, height, type, values.length, width]);
+    return _jsxs("div", { ...props, ref: ref, className: `${classes}${pencilReady ? ' inkra-sparkline--pencil-ready' : ''}${interactionReady ? ' inkra-sparkline--interaction-ready' : ''}`, "data-empty": values.length === 0 || undefined, "data-show-points": effectiveShowPoints || undefined, children: [_jsxs("svg", { className: "inkra-sparkline__svg", viewBox: `0 0 ${width} ${height}`, role: "img", "aria-label": label, tabIndex: 0, onKeyDown: onKeyDown, children: [showArea && type === 'line' && geometry.areaPath && _jsx("path", { className: "inkra-sparkline__area", d: geometry.areaPath, "aria-hidden": "true" }), type === 'line' && geometry.linePath && _jsx("path", { className: "inkra-sparkline__line", d: geometry.linePath, "aria-hidden": "true" }), type === 'bar' && boundedPoints.map(point => {
+                        if (point.value === null)
+                            return null;
+                        const baseline = geometry.y(0);
+                        const valueY = geometry.y(point.value);
+                        return _jsx("rect", { className: "inkra-sparkline__bar", x: geometry.x(point.index) - Math.max(2, width / Math.max(16, points.length * 2)) / 2, width: Math.max(2, width / Math.max(16, points.length * 2)), y: Math.min(baseline, valueY), height: Math.max(1, Math.abs(baseline - valueY)), "data-index": point.index, "data-active": activeIndex === point.index || undefined, onMouseEnter: () => setActiveIndex(point.index) }, point.index);
+                    }), (showPoints || values.length === 1) && type === 'line' && boundedPoints.map(point => point.value === null ? null : _jsx("circle", { className: "inkra-sparkline__point", cx: geometry.x(point.index), cy: geometry.y(point.value), r: activeIndex === point.index ? 3.5 : 2, "data-active": activeIndex === point.index || undefined, onMouseEnter: () => setActiveIndex(point.index) }, point.index)), activePoint && activePoint.value !== null && _jsx("line", { className: "inkra-sparkline__guide", x1: geometry.x(activePoint.index), x2: geometry.x(activePoint.index), y1: 4, y2: height - 4, "aria-hidden": "true" })] }), _jsx("canvas", { ref: canvasRef, className: "inkra-sparkline__pencil inkra-sparkline__pencil--static", style: { aspectRatio: `${width} / ${height}` }, "aria-hidden": "true" }), _jsx("canvas", { ref: interactionCanvasRef, className: "inkra-sparkline__pencil inkra-sparkline__pencil--interaction", style: { aspectRatio: `${width} / ${height}` }, "aria-hidden": "true" }), activePoint && _jsx("div", { className: "inkra-sparkline__tooltip", "aria-hidden": "true", children: _jsx(PencilText, { children: getLabel(activePoint.value, activePoint.index) }) }), showSummary && _jsxs("p", { className: "inkra-sparkline__summary", children: [_jsxs("span", { className: "visually-hidden", children: [label, ": "] }), _jsx(PencilText, { seed: `sparkline-summary-${label}-${summary}`, children: summary })] }), _jsx("div", { className: "inkra-sparkline__data", "aria-label": `${label} data`, children: points.map(point => _jsx("span", { children: getLabel(point.value, point.index) }, point.index)) }), _jsxs("span", { className: "visually-hidden", children: ["Domain ", domain[0], " to ", domain[1]] })] });
+});
+export { createSparklineGeometry, normalizeSparklineData, sparklineDomain } from './model.js';

package/dist/sparkline/model.d.ts

@@ -0,0 +1,16 @@
+export type SparklineDatum = number | null | undefined;
+export type SparklinePoint = {
+    index: number;
+    value: number | null;
+};
+export type SparklineScale = (value: number | {
+    valueOf(): number;
+}) => number;
+export declare function normalizeSparklineData(data: readonly SparklineDatum[]): SparklinePoint[];
+export declare function sparklineDomain(points: readonly SparklinePoint[]): [number, number];
+export declare function createSparklineGeometry(points: readonly SparklinePoint[], width: number, height: number, padding?: number): {
+    x: SparklineScale;
+    y: SparklineScale;
+    linePath: string;
+    areaPath: string;
+};

package/dist/sparkline/model.js

@@ -0,0 +1,28 @@
+import { scaleLinear } from 'd3-scale';
+import { area, line } from 'd3-shape';
+export function normalizeSparklineData(data) {
+    return data.map((value, index) => ({ index, value: typeof value === 'number' && Number.isFinite(value) ? value : null }));
+}
+export function sparklineDomain(points) {
+    const values = points.flatMap(point => point.value === null ? [] : [point.value]);
+    if (values.length === 0)
+        return [0, 1];
+    const min = Math.min(...values);
+    const max = Math.max(...values);
+    if (min === max) {
+        const pad = Math.abs(min) * 0.12 || 1;
+        return [min - pad, max + pad];
+    }
+    const pad = (max - min) * 0.08;
+    return [min - pad, max + pad];
+}
+export function createSparklineGeometry(points, width, height, padding = 4) {
+    const innerWidth = Math.max(1, width - padding * 2);
+    const innerHeight = Math.max(1, height - padding * 2);
+    const x = scaleLinear().domain([0, Math.max(1, points.length - 1)]).range([padding, padding + innerWidth]);
+    const y = scaleLinear().domain(sparklineDomain(points)).range([padding + innerHeight, padding]);
+    const defined = (point) => point.value !== null;
+    const linePath = line().defined(defined).x(point => x(point.index)).y(point => y(point.value));
+    const areaPath = area().defined(defined).x(point => x(point.index)).y0(padding + innerHeight).y1(point => y(point.value));
+    return { x, y, linePath: linePath(points) ?? '', areaPath: areaPath(points) ?? '' };
+}

package/dist/steps/index.d.ts

@@ -0,0 +1,16 @@
+import { type OlHTMLAttributes, type ReactNode } from 'react';
+export type StepStatus = 'upcoming' | 'current' | 'complete' | 'error';
+export interface StepItem {
+    id: string;
+    title: ReactNode;
+    description?: ReactNode;
+    status?: StepStatus;
+    disabled?: boolean;
+}
+export interface StepsProps extends Omit<OlHTMLAttributes<HTMLOListElement>, 'children'> {
+    current?: number;
+    items: readonly StepItem[];
+    onStepChange?: (index: number, item: StepItem) => void;
+    orientation?: 'horizontal' | 'vertical';
+}
+export declare const Steps: import("react").ForwardRefExoticComponent<StepsProps & import("react").RefAttributes<HTMLOListElement>>;

package/dist/steps/index.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PencilIcon } from '../PencilIcon.js';
+import { PencilLine } from '../PencilLine.js';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+const markerPaths = {
+    upcoming: [{ d: 'M16 6a10 10 0 1 0 0 20 10 10 0 0 0 0-20Z' }],
+    current: [{ d: 'M16 6a10 10 0 1 0 0 20 10 10 0 0 0 0-20Z' }, { d: 'M16 12a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z', mode: 'wash' }],
+    complete: [{ d: 'M6 17l6 6L27 8' }],
+    error: [{ d: 'M16 6a10 10 0 1 0 0 20 10 10 0 0 0 0-20ZM16 10v8M16 22v1' }],
+};
+const copy = (value) => typeof value === 'string' ? _jsx(PencilText, { children: value }) : value;
+function resolvedStatus(item, index, current) {
+    if (item.status)
+        return item.status;
+    if (index < current)
+        return 'complete';
+    if (index === current)
+        return 'current';
+    return 'upcoming';
+}
+export const Steps = forwardRef(function Steps({ 'aria-label': ariaLabel = 'Progress', className, current = 0, items, onStepChange, orientation = 'horizontal', ...props }, ref) {
+    return _jsx("ol", { ...props, ref: ref, "aria-label": ariaLabel, className: ['inkra-steps', className].filter(Boolean).join(' '), "data-orientation": orientation, children: items.map((item, index) => {
+            const status = resolvedStatus(item, index, current);
+            const interactive = onStepChange !== undefined;
+            const content = _jsxs(_Fragment, { children: [status === 'current' && _jsx(PencilSurface, { "aria-hidden": "true", className: "inkra-steps__selection", variant: "selection", seed: `step-${item.id}` }), _jsx("span", { className: "inkra-steps__marker", "aria-hidden": "true", children: _jsx(PencilIcon, { paths: markerPaths[status], size: 28, sourceSize: 32, active: status === 'current' }) }), _jsxs("span", { className: "inkra-steps__copy", children: [_jsx("span", { className: "inkra-steps__title", children: copy(item.title) }), item.description != null && _jsx("span", { className: "inkra-steps__description", children: copy(item.description) })] })] });
+            const shared = {
+                className: 'inkra-steps__control',
+                'aria-current': status === 'current' ? 'step' : undefined,
+                'aria-disabled': item.disabled || undefined,
+            };
+            return _jsxs("li", { className: "inkra-steps__item", "data-status": status, "data-disabled": item.disabled || undefined, children: [interactive
+                        ? _jsx("button", { ...shared, type: "button", disabled: item.disabled, onClick: () => onStepChange(index, item), children: content })
+                        : _jsx("div", { ...shared, children: content }), index < items.length - 1 && _jsx(PencilLine, { className: "inkra-steps__connector", orientation: orientation === 'horizontal' ? 'horizontal' : 'vertical', seed: `step-line-${item.id}` })] }, item.id);
+        }) });
+});