feat(packages): Wave 4 motion + Wave 5b data-viz + Wave 7 notifications-ui
Three new product-agnostic packages unlock visible elegance lifts
across every product:
═══════════════════════════════════════════════════════════════════════
@bytelyst/motion@0.1.0 — Wave 4 elegance primitives (2.21 KB / 8 KB)
═══════════════════════════════════════════════════════════════════════
<Reveal> — IntersectionObserver-based fade/slide entry,
6 directions, configurable spring + delay
<StaggerList> — sequenced reveal of children with per-item delay
<NumberFlow> — RAF-tweened number counter, cubic-out easing,
Intl-formatted, prefers-reduced-motion aware
<TiltCard> — 3D perspective tilt + cursor-tracking glare
overlay (single-element ref, no React rerenders)
<ScrollProgress> — fixed scroll-position bar (window or any element)
Plus exported `SPRINGS` (4 cubic-bezier presets) + `prefersReducedMotion`
helper. Every primitive accepts `disableMotion` for snapshot tests.
═══════════════════════════════════════════════════════════════════════
@bytelyst/data-viz@0.1.0 — Wave 5b viz primitives (2.63 KB / 10 KB)
═══════════════════════════════════════════════════════════════════════
<Sparkline> — line trend with gradient fill + last-point marker
<BarSparkline> — discrete-bar mini-chart with max-bar highlight
<KpiCard> — label + headline + delta arrow + sparkline; supports
'goodWhen=lower' for latency/cost metrics
<ProgressRing> — circular progress with center content slot,
animated stroke-dashoffset
<Heatmap> — GitHub-style calendar grid with color-mix() intensity
All pure SVG / CSS — zero runtime dependencies.
═══════════════════════════════════════════════════════════════════════
@bytelyst/notifications-ui@0.1.0 — Wave 7 essentials (3.31 KB / 10 KB)
═══════════════════════════════════════════════════════════════════════
<NotificationCenter> — bell trigger + badge + dropdown panel with
All / Unread / Mentions tabs, outside-click
+ Escape close, mark-all-read action
<InboxItem> — single row with unread dot, kind glyph,
relative timestamp, optional action buttons
<BannerStack> — top-of-page strip with maxVisible + +N more,
accent-bordered tone variants, dismissible
<Announcement> — inline 'What's new' pill (3 tone variants)
5 notification kinds (info/success/warning/danger/mention) + 5 banner
kinds (... + announcement gradient).
═══════════════════════════════════════════════════════════════════════
Quality gates
═══════════════════════════════════════════════════════════════════════
All three packages: tsc --noEmit clean, build clean.
Tests: motion 16/16 · data-viz 14/14 · notifications-ui 17/17
Bundles: motion 2.21 KB · data-viz 2.63 KB · noti-ui 3.31 KB
Budgets: added to .size-limit.cjs (8/10/10 KB respectively)
Refs:
learning_ai_uxui_web/docs/ROADMAP_2026.md
§Wave 4 (Motion), §Wave 5b (Charts), §Wave 7 (Productisation)
Decisions doc §13 (mobile-native = tokens-only) leaves room for these
web-first packages to be the canonical surface
This commit is contained in:
saravanakumardb1
parent
e2eea086dc
commit
d082480849
@ -79,4 +79,25 @@ module.exports = [
|
||||
limit: '15 KB',
|
||||
gzip: true,
|
||||
},
|
||||
// ── Motion primitives (8 KB — 5 components, zero deps) ──────────
|
||||
{
|
||||
name: '@bytelyst/motion',
|
||||
path: 'packages/motion/dist/index.js',
|
||||
limit: '8 KB',
|
||||
gzip: true,
|
||||
},
|
||||
// ── Data-viz primitives (10 KB — 5 SVG components) ──────────────
|
||||
{
|
||||
name: '@bytelyst/data-viz',
|
||||
path: 'packages/data-viz/dist/index.js',
|
||||
limit: '10 KB',
|
||||
gzip: true,
|
||||
},
|
||||
// ── Notifications UI (10 KB — center + banner + announcement) ───
|
||||
{
|
||||
name: '@bytelyst/notifications-ui',
|
||||
path: 'packages/notifications-ui/dist/index.js',
|
||||
limit: '10 KB',
|
||||
gzip: true,
|
||||
},
|
||||
];
|
||||
|
||||
34
packages/data-viz/package.json
Normal file
34
packages/data-viz/package.json
Normal file
@ -0,0 +1,34 @@
|
||||
{
|
||||
"name": "@bytelyst/data-viz",
|
||||
"version": "0.1.0",
|
||||
"type": "module",
|
||||
"description": "Token-themed visualization primitives — Sparkline, KpiCard, ProgressRing, BarSparkline, Heatmap. Pure SVG, zero deps.",
|
||||
"exports": {
|
||||
".": {
|
||||
"import": "./dist/index.js",
|
||||
"types": "./dist/index.d.ts"
|
||||
}
|
||||
},
|
||||
"main": "./dist/index.js",
|
||||
"types": "./dist/index.d.ts",
|
||||
"files": ["dist"],
|
||||
"scripts": {
|
||||
"build": "tsc",
|
||||
"test": "vitest run --pool forks",
|
||||
"typecheck": "tsc --noEmit"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=18.0.0",
|
||||
"react-dom": ">=18.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@testing-library/react": "^16.3.2",
|
||||
"@types/react": "^19.2.14",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"happy-dom": "^18.0.1",
|
||||
"react": "^19.2.4",
|
||||
"react-dom": "^19.2.4",
|
||||
"typescript": "^5.7.3",
|
||||
"vitest": "^4.0.18"
|
||||
}
|
||||
}
|
||||
73
packages/data-viz/src/BarSparkline.tsx
Normal file
73
packages/data-viz/src/BarSparkline.tsx
Normal file
@ -0,0 +1,73 @@
|
||||
import { useMemo, type CSSProperties } from 'react';
|
||||
|
||||
export interface BarSparklineProps {
|
||||
data: number[];
|
||||
width?: number;
|
||||
height?: number;
|
||||
color?: string;
|
||||
/** Color for the maximum bar. Defaults to `color`. */
|
||||
highlightMax?: string;
|
||||
/** Spacing between bars as a fraction of bar width. Default 0.25. */
|
||||
gap?: number;
|
||||
ariaLabel?: string;
|
||||
className?: string;
|
||||
style?: CSSProperties;
|
||||
}
|
||||
|
||||
/**
|
||||
* `<BarSparkline>` — inline mini-bar chart. Pairs well with KPI cards
|
||||
* where a line sparkline doesn't fit (e.g. discrete daily counts).
|
||||
*/
|
||||
export function BarSparkline({
|
||||
data,
|
||||
width = 120,
|
||||
height = 36,
|
||||
color = 'var(--bl-accent, #6366f1)',
|
||||
highlightMax,
|
||||
gap = 0.25,
|
||||
ariaLabel,
|
||||
className,
|
||||
style,
|
||||
}: BarSparklineProps) {
|
||||
const { bars, maxIdx } = useMemo(() => {
|
||||
if (data.length === 0) return { bars: [], maxIdx: -1 };
|
||||
const max = Math.max(...data, 1);
|
||||
const slot = width / data.length;
|
||||
const barW = slot * (1 - gap);
|
||||
const offset = slot * (gap / 2);
|
||||
const maxIdx = data.indexOf(Math.max(...data));
|
||||
const bars = data.map((v, i) => {
|
||||
const h = Math.max(2, (v / max) * height);
|
||||
return { x: i * slot + offset, y: height - h, w: barW, h };
|
||||
});
|
||||
return { bars, maxIdx };
|
||||
}, [data, width, height, gap]);
|
||||
|
||||
const peak = highlightMax ?? color;
|
||||
|
||||
return (
|
||||
<svg
|
||||
data-testid="bl-bar-sparkline"
|
||||
role="img"
|
||||
aria-label={ariaLabel ?? 'Bar sparkline'}
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={`0 0 ${width} ${height}`}
|
||||
className={className}
|
||||
style={style}
|
||||
>
|
||||
{bars.map((b, i) => (
|
||||
<rect
|
||||
key={i}
|
||||
x={b.x}
|
||||
y={b.y}
|
||||
width={b.w}
|
||||
height={b.h}
|
||||
rx={1.5}
|
||||
fill={i === maxIdx ? peak : color}
|
||||
opacity={i === maxIdx ? 1 : 0.55}
|
||||
/>
|
||||
))}
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
88
packages/data-viz/src/Heatmap.tsx
Normal file
88
packages/data-viz/src/Heatmap.tsx
Normal file
@ -0,0 +1,88 @@
|
||||
import { useMemo, type CSSProperties } from 'react';
|
||||
|
||||
export interface HeatmapCell {
|
||||
/** ISO date or any stable label. */
|
||||
date: string;
|
||||
/** Value — drives intensity. */
|
||||
value: number;
|
||||
/** Optional tooltip text. */
|
||||
label?: string;
|
||||
}
|
||||
|
||||
export interface HeatmapProps {
|
||||
/** Cells laid out top-to-bottom then left-to-right (calendar style). */
|
||||
cells: HeatmapCell[];
|
||||
/** Rows. Default 7 (week). */
|
||||
rows?: number;
|
||||
/** Cell size in px (square). Default 12. */
|
||||
cell?: number;
|
||||
/** Gap between cells in px. Default 3. */
|
||||
gap?: number;
|
||||
/** Active color (interpolated by intensity). */
|
||||
color?: string;
|
||||
/** Empty cell color. */
|
||||
emptyColor?: string;
|
||||
ariaLabel?: string;
|
||||
className?: string;
|
||||
style?: CSSProperties;
|
||||
}
|
||||
|
||||
/**
|
||||
* `<Heatmap>` — GitHub-style calendar heatmap. Pure CSS grid, no
|
||||
* tooltips library — uses native `title` attributes for the on-hover
|
||||
* label so the bundle stays tiny.
|
||||
*/
|
||||
export function Heatmap({
|
||||
cells,
|
||||
rows = 7,
|
||||
cell = 12,
|
||||
gap = 3,
|
||||
color = 'var(--bl-accent, #6366f1)',
|
||||
emptyColor = 'var(--bl-surface-muted, rgba(0,0,0,0.04))',
|
||||
ariaLabel,
|
||||
className,
|
||||
style,
|
||||
}: HeatmapProps) {
|
||||
const max = useMemo(
|
||||
() => cells.reduce((m, c) => Math.max(m, c.value), 0) || 1,
|
||||
[cells],
|
||||
);
|
||||
return (
|
||||
<div
|
||||
data-testid="bl-heatmap"
|
||||
role="img"
|
||||
aria-label={ariaLabel ?? 'Activity heatmap'}
|
||||
className={className}
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateRows: `repeat(${rows}, ${cell}px)`,
|
||||
gridAutoFlow: 'column',
|
||||
gap,
|
||||
...style,
|
||||
}}
|
||||
>
|
||||
{cells.map((c, i) => {
|
||||
const intensity = c.value > 0 ? 0.15 + 0.85 * (c.value / max) : 0;
|
||||
return (
|
||||
<div
|
||||
key={`${c.date}-${i}`}
|
||||
data-testid={`bl-heatmap-cell-${i}`}
|
||||
data-value={c.value}
|
||||
data-intensity={intensity.toFixed(2)}
|
||||
title={c.label ?? `${c.date}: ${c.value}`}
|
||||
style={{
|
||||
width: cell,
|
||||
height: cell,
|
||||
borderRadius: 2,
|
||||
background:
|
||||
intensity === 0
|
||||
? emptyColor
|
||||
: `color-mix(in srgb, ${color} ${Math.round(intensity * 100)}%, transparent)`,
|
||||
transition: 'transform 120ms ease',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
169
packages/data-viz/src/KpiCard.tsx
Normal file
169
packages/data-viz/src/KpiCard.tsx
Normal file
@ -0,0 +1,169 @@
|
||||
import type { CSSProperties, ReactNode } from 'react';
|
||||
import { Sparkline } from './Sparkline.js';
|
||||
|
||||
export interface KpiCardProps {
|
||||
/** Metric label (e.g. 'Active users'). */
|
||||
label: string;
|
||||
/** Pre-formatted display value (e.g. '12.4k', '$8,421'). */
|
||||
value: ReactNode;
|
||||
/** Delta percentage (e.g. 6.6 for +6.6%). */
|
||||
deltaPercent?: number;
|
||||
/** Override the delta label (e.g. 'vs last 7d'). */
|
||||
deltaLabel?: string;
|
||||
/** Inline trend data. Optional. */
|
||||
trend?: number[];
|
||||
/** Icon rendered top-right. */
|
||||
icon?: ReactNode;
|
||||
/** Sparkline stroke override. */
|
||||
trendColor?: string;
|
||||
/** Hide the up/down arrow next to delta. Default false. */
|
||||
hideDeltaArrow?: boolean;
|
||||
/** Override the threshold below which a delta is rendered as 'good'.
|
||||
* Useful for cost / latency KPIs where lower is better. Default `>=0`. */
|
||||
goodWhen?: 'higher' | 'lower';
|
||||
className?: string;
|
||||
style?: CSSProperties;
|
||||
}
|
||||
|
||||
/**
|
||||
* `<KpiCard>` — token-themed key-performance-indicator tile.
|
||||
*
|
||||
* ┌────────────────────────┐
|
||||
* │ Active users ✦ │
|
||||
* │ 8,421 │
|
||||
* │ ▲ +6.6% vs last 7d ╱╲╱ │
|
||||
* └────────────────────────┘
|
||||
*
|
||||
* Renders the headline number prominently, an optional delta with
|
||||
* color-coded arrow, and an inline `<Sparkline>` for context.
|
||||
*/
|
||||
export function KpiCard({
|
||||
label,
|
||||
value,
|
||||
deltaPercent,
|
||||
deltaLabel = 'vs previous',
|
||||
trend,
|
||||
icon,
|
||||
trendColor,
|
||||
hideDeltaArrow,
|
||||
goodWhen = 'higher',
|
||||
className,
|
||||
style,
|
||||
}: KpiCardProps) {
|
||||
const hasDelta = typeof deltaPercent === 'number';
|
||||
const up = hasDelta && deltaPercent! >= 0;
|
||||
const good =
|
||||
!hasDelta ||
|
||||
(goodWhen === 'higher' ? up : !up && Math.abs(deltaPercent!) > 0.0001);
|
||||
const deltaColor = good
|
||||
? 'var(--bl-success, #22c55e)'
|
||||
: 'var(--bl-danger, #ef4444)';
|
||||
|
||||
return (
|
||||
<article
|
||||
data-testid="bl-kpi-card"
|
||||
className={className}
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: 'var(--bl-space-2, 8px)',
|
||||
padding: 'var(--bl-space-4, 16px)',
|
||||
border: '1px solid var(--bl-border, rgba(0,0,0,0.08))',
|
||||
borderRadius: 'var(--bl-radius-card, 12px)',
|
||||
background: 'var(--bl-surface-card, #fff)',
|
||||
color: 'var(--bl-text-primary, inherit)',
|
||||
minWidth: 180,
|
||||
...style,
|
||||
}}
|
||||
>
|
||||
<header
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
gap: 'var(--bl-space-2, 8px)',
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
fontSize: '0.75rem',
|
||||
fontWeight: 600,
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.04em',
|
||||
color: 'var(--bl-text-tertiary, #888)',
|
||||
}}
|
||||
>
|
||||
{label}
|
||||
</span>
|
||||
{icon && (
|
||||
<span
|
||||
aria-hidden
|
||||
style={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width: 28,
|
||||
height: 28,
|
||||
borderRadius: 'var(--bl-radius-pill, 999px)',
|
||||
background: 'var(--bl-accent-muted, rgba(99,102,241,0.12))',
|
||||
color: 'var(--bl-accent, #6366f1)',
|
||||
}}
|
||||
>
|
||||
{icon}
|
||||
</span>
|
||||
)}
|
||||
</header>
|
||||
|
||||
<div
|
||||
data-testid="bl-kpi-value"
|
||||
style={{
|
||||
fontSize: '2.1rem',
|
||||
fontWeight: 700,
|
||||
lineHeight: 1.05,
|
||||
fontVariantNumeric: 'tabular-nums',
|
||||
}}
|
||||
>
|
||||
{value}
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 'var(--bl-space-2, 8px)',
|
||||
fontSize: '0.78rem',
|
||||
}}
|
||||
>
|
||||
{hasDelta && (
|
||||
<span
|
||||
data-testid="bl-kpi-delta"
|
||||
data-good={good ? 'true' : 'false'}
|
||||
style={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: 2,
|
||||
color: deltaColor,
|
||||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
{!hideDeltaArrow && <span aria-hidden>{up ? '▲' : '▼'}</span>}
|
||||
{(up ? '+' : '') + deltaPercent!.toFixed(1)}%
|
||||
</span>
|
||||
)}
|
||||
{hasDelta && (
|
||||
<span style={{ color: 'var(--bl-text-tertiary, #888)' }}>{deltaLabel}</span>
|
||||
)}
|
||||
{trend && trend.length > 1 && (
|
||||
<div style={{ marginLeft: 'auto' }}>
|
||||
<Sparkline
|
||||
data={trend}
|
||||
width={88}
|
||||
height={28}
|
||||
stroke={trendColor ?? (good ? 'var(--bl-success, #22c55e)' : 'var(--bl-danger, #ef4444)')}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
104
packages/data-viz/src/ProgressRing.tsx
Normal file
104
packages/data-viz/src/ProgressRing.tsx
Normal file
@ -0,0 +1,104 @@
|
||||
import { useMemo, type CSSProperties, type ReactNode } from 'react';
|
||||
|
||||
export interface ProgressRingProps {
|
||||
/** Progress 0..1 (values outside are clamped). */
|
||||
value: number;
|
||||
/** Outer diameter in px. Default 96. */
|
||||
size?: number;
|
||||
/** Ring thickness in px. Default 8. */
|
||||
thickness?: number;
|
||||
/** Track color. Default `var(--bl-border)`. */
|
||||
track?: string;
|
||||
/** Active arc color. Default `var(--bl-accent)`. */
|
||||
color?: string;
|
||||
/** Slot rendered in the center. */
|
||||
children?: ReactNode;
|
||||
/** Aria label. */
|
||||
ariaLabel?: string;
|
||||
className?: string;
|
||||
style?: CSSProperties;
|
||||
}
|
||||
|
||||
/**
|
||||
* `<ProgressRing>` — circular progress with an inner content slot.
|
||||
* Perfect for onboarding checklists, usage meters, and goal trackers.
|
||||
*
|
||||
* Smoothly animates `stroke-dashoffset` so the ring sweeps when `value`
|
||||
* changes — no JS tween needed.
|
||||
*/
|
||||
export function ProgressRing({
|
||||
value,
|
||||
size = 96,
|
||||
thickness = 8,
|
||||
track = 'var(--bl-border, rgba(0,0,0,0.08))',
|
||||
color = 'var(--bl-accent, #6366f1)',
|
||||
children,
|
||||
ariaLabel,
|
||||
className,
|
||||
style,
|
||||
}: ProgressRingProps) {
|
||||
const clamped = Math.max(0, Math.min(1, value));
|
||||
const { radius, circumference, dashOffset } = useMemo(() => {
|
||||
const r = (size - thickness) / 2;
|
||||
const c = 2 * Math.PI * r;
|
||||
return {
|
||||
radius: r,
|
||||
circumference: c,
|
||||
dashOffset: c * (1 - clamped),
|
||||
};
|
||||
}, [size, thickness, clamped]);
|
||||
|
||||
return (
|
||||
<div
|
||||
data-testid="bl-progress-ring"
|
||||
role="img"
|
||||
aria-label={ariaLabel ?? `${Math.round(clamped * 100)} percent`}
|
||||
className={className}
|
||||
style={{
|
||||
position: 'relative',
|
||||
width: size,
|
||||
height: size,
|
||||
display: 'inline-grid',
|
||||
placeItems: 'center',
|
||||
...style,
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox={`0 0 ${size} ${size}`}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
transform: 'rotate(-90deg)',
|
||||
}}
|
||||
>
|
||||
<circle
|
||||
cx={size / 2}
|
||||
cy={size / 2}
|
||||
r={radius}
|
||||
fill="none"
|
||||
stroke={track}
|
||||
strokeWidth={thickness}
|
||||
/>
|
||||
<circle
|
||||
cx={size / 2}
|
||||
cy={size / 2}
|
||||
r={radius}
|
||||
fill="none"
|
||||
stroke={color}
|
||||
strokeWidth={thickness}
|
||||
strokeLinecap="round"
|
||||
strokeDasharray={circumference}
|
||||
strokeDashoffset={dashOffset}
|
||||
style={{
|
||||
transition: 'stroke-dashoffset 600ms cubic-bezier(0.2, 0.9, 0.1, 1)',
|
||||
}}
|
||||
/>
|
||||
</svg>
|
||||
{children !== undefined && (
|
||||
<div style={{ position: 'relative', textAlign: 'center' }}>{children}</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
115
packages/data-viz/src/Sparkline.tsx
Normal file
115
packages/data-viz/src/Sparkline.tsx
Normal file
@ -0,0 +1,115 @@
|
||||
import { useMemo, type CSSProperties } from 'react';
|
||||
|
||||
export interface SparklineProps {
|
||||
/** Series values. Length 2+. */
|
||||
data: number[];
|
||||
/** Width in px. Default 120. */
|
||||
width?: number;
|
||||
/** Height in px. Default 36. */
|
||||
height?: number;
|
||||
/** Stroke color. Default `var(--bl-accent)`. */
|
||||
stroke?: string;
|
||||
/** Stroke width. Default 1.75. */
|
||||
strokeWidth?: number;
|
||||
/** Fill the area under the line. Default true. */
|
||||
fill?: boolean;
|
||||
/** Highlight the final point. Default true. */
|
||||
showLastPoint?: boolean;
|
||||
/** Aria label. */
|
||||
ariaLabel?: string;
|
||||
className?: string;
|
||||
style?: CSSProperties;
|
||||
}
|
||||
|
||||
/**
|
||||
* `<Sparkline>` — tiny inline trend line. Pure SVG, no runtime layout
|
||||
* cost. Auto-scales the Y axis to the data range; clamps tiny ranges
|
||||
* so flat lines still render visibly.
|
||||
*/
|
||||
export function Sparkline({
|
||||
data,
|
||||
width = 120,
|
||||
height = 36,
|
||||
stroke = 'var(--bl-accent, #6366f1)',
|
||||
strokeWidth = 1.75,
|
||||
fill = true,
|
||||
showLastPoint = true,
|
||||
ariaLabel,
|
||||
className,
|
||||
style,
|
||||
}: SparklineProps) {
|
||||
const { path, areaPath, lastX, lastY } = useMemo(() => {
|
||||
if (data.length < 2) {
|
||||
return { path: '', areaPath: '', lastX: 0, lastY: 0 };
|
||||
}
|
||||
const min = Math.min(...data);
|
||||
const max = Math.max(...data);
|
||||
const range = max - min || 1;
|
||||
const pad = strokeWidth + 1;
|
||||
const innerW = width - pad * 2;
|
||||
const innerH = height - pad * 2;
|
||||
const stepX = innerW / (data.length - 1);
|
||||
const pts = data.map((v, i) => {
|
||||
const x = pad + i * stepX;
|
||||
const y = pad + innerH - ((v - min) / range) * innerH;
|
||||
return [x, y] as const;
|
||||
});
|
||||
const path = pts
|
||||
.map(([x, y], i) => (i === 0 ? `M${x},${y}` : `L${x},${y}`))
|
||||
.join(' ');
|
||||
const areaPath =
|
||||
pts.length > 1
|
||||
? `${path} L${pts[pts.length - 1]![0]},${height} L${pts[0]![0]},${height} Z`
|
||||
: '';
|
||||
const [lx, ly] = pts[pts.length - 1]!;
|
||||
return { path, areaPath, lastX: lx, lastY: ly };
|
||||
}, [data, width, height, strokeWidth]);
|
||||
|
||||
const gradId = useMemo(
|
||||
() => `bl-spark-${Math.random().toString(36).slice(2, 8)}`,
|
||||
[],
|
||||
);
|
||||
|
||||
return (
|
||||
<svg
|
||||
data-testid="bl-sparkline"
|
||||
role="img"
|
||||
aria-label={ariaLabel ?? 'Sparkline'}
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={`0 0 ${width} ${height}`}
|
||||
className={className}
|
||||
style={{ overflow: 'visible', ...style }}
|
||||
>
|
||||
{fill && (
|
||||
<>
|
||||
<defs>
|
||||
<linearGradient id={gradId} x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stopColor={stroke} stopOpacity={0.32} />
|
||||
<stop offset="100%" stopColor={stroke} stopOpacity={0} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d={areaPath} fill={`url(#${gradId})`} stroke="none" />
|
||||
</>
|
||||
)}
|
||||
<path
|
||||
d={path}
|
||||
fill="none"
|
||||
stroke={stroke}
|
||||
strokeWidth={strokeWidth}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
{showLastPoint && data.length > 0 && (
|
||||
<circle
|
||||
cx={lastX}
|
||||
cy={lastY}
|
||||
r={strokeWidth + 1.25}
|
||||
fill={stroke}
|
||||
stroke="var(--bl-surface-card, #fff)"
|
||||
strokeWidth={1.5}
|
||||
/>
|
||||
)}
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
112
packages/data-viz/src/__tests__/data-viz.test.tsx
Normal file
112
packages/data-viz/src/__tests__/data-viz.test.tsx
Normal file
@ -0,0 +1,112 @@
|
||||
import { describe, it, expect, beforeEach } from 'vitest';
|
||||
import { cleanup, render, screen } from '@testing-library/react';
|
||||
import { Sparkline } from '../Sparkline.js';
|
||||
import { BarSparkline } from '../BarSparkline.js';
|
||||
import { KpiCard } from '../KpiCard.js';
|
||||
import { ProgressRing } from '../ProgressRing.js';
|
||||
import { Heatmap } from '../Heatmap.js';
|
||||
|
||||
describe('Sparkline', () => {
|
||||
beforeEach(() => cleanup());
|
||||
it('renders svg with given dimensions', () => {
|
||||
render(<Sparkline data={[1, 2, 3, 2, 4, 5]} width={100} height={32} />);
|
||||
const el = screen.getByTestId('bl-sparkline');
|
||||
expect(el.getAttribute('width')).toBe('100');
|
||||
expect(el.getAttribute('height')).toBe('32');
|
||||
});
|
||||
it('hides last point when showLastPoint=false', () => {
|
||||
render(<Sparkline data={[1, 2, 3]} showLastPoint={false} />);
|
||||
expect(screen.getByTestId('bl-sparkline').querySelector('circle')).toBeNull();
|
||||
});
|
||||
it('does not draw a path with fewer than 2 points', () => {
|
||||
render(<Sparkline data={[]} />);
|
||||
const path = screen.getByTestId('bl-sparkline').querySelector('path');
|
||||
expect(path?.getAttribute('d')).toBe('');
|
||||
});
|
||||
});
|
||||
|
||||
describe('BarSparkline', () => {
|
||||
beforeEach(() => cleanup());
|
||||
it('renders one rect per datum', () => {
|
||||
render(<BarSparkline data={[1, 4, 2, 6, 3]} />);
|
||||
const rects = screen.getByTestId('bl-bar-sparkline').querySelectorAll('rect');
|
||||
expect(rects.length).toBe(5);
|
||||
});
|
||||
it('emphasizes the max bar (opacity=1)', () => {
|
||||
render(<BarSparkline data={[1, 9, 2]} />);
|
||||
const rects = screen.getByTestId('bl-bar-sparkline').querySelectorAll('rect');
|
||||
// The second bar (index 1) is the max.
|
||||
expect(rects[1]?.getAttribute('opacity')).toBe('1');
|
||||
expect(rects[0]?.getAttribute('opacity')).toBe('0.55');
|
||||
});
|
||||
});
|
||||
|
||||
describe('KpiCard', () => {
|
||||
beforeEach(() => cleanup());
|
||||
it('renders label + headline value', () => {
|
||||
render(<KpiCard label="DAU" value="8,421" />);
|
||||
expect(screen.getByText('DAU')).toBeDefined();
|
||||
expect(screen.getByTestId('bl-kpi-value').textContent).toBe('8,421');
|
||||
});
|
||||
it('positive delta renders with up arrow and success color', () => {
|
||||
render(<KpiCard label="X" value={1} deltaPercent={6.6} />);
|
||||
const d = screen.getByTestId('bl-kpi-delta');
|
||||
expect(d.textContent).toContain('+6.6%');
|
||||
expect(d.textContent).toContain('▲');
|
||||
});
|
||||
it('negative delta renders with down arrow', () => {
|
||||
render(<KpiCard label="X" value={1} deltaPercent={-3.2} />);
|
||||
expect(screen.getByTestId('bl-kpi-delta').textContent).toContain('▼');
|
||||
});
|
||||
it('goodWhen=lower inverts the success/danger interpretation', () => {
|
||||
// For latency: a negative delta (faster) is good.
|
||||
const { rerender } = render(
|
||||
<KpiCard label="latency" value="120ms" deltaPercent={-10} goodWhen="lower" />,
|
||||
);
|
||||
expect(
|
||||
screen.getByTestId('bl-kpi-delta').getAttribute('data-good'),
|
||||
).toBe('true');
|
||||
rerender(<KpiCard label="latency" value="120ms" deltaPercent={5} goodWhen="lower" />);
|
||||
expect(
|
||||
screen.getByTestId('bl-kpi-delta').getAttribute('data-good'),
|
||||
).toBe('false');
|
||||
});
|
||||
it('renders sparkline when trend provided', () => {
|
||||
render(<KpiCard label="X" value={1} trend={[1, 2, 3, 4]} />);
|
||||
expect(screen.getByTestId('bl-sparkline')).toBeDefined();
|
||||
});
|
||||
});
|
||||
|
||||
describe('ProgressRing', () => {
|
||||
beforeEach(() => cleanup());
|
||||
it('clamps value to 0..1 and emits aria-label percent', () => {
|
||||
const { rerender } = render(<ProgressRing value={2} />);
|
||||
expect(screen.getByTestId('bl-progress-ring').getAttribute('aria-label')).toBe('100 percent');
|
||||
rerender(<ProgressRing value={-1} />);
|
||||
expect(screen.getByTestId('bl-progress-ring').getAttribute('aria-label')).toBe('0 percent');
|
||||
});
|
||||
it('renders inner content slot', () => {
|
||||
render(
|
||||
<ProgressRing value={0.5}>
|
||||
<span data-testid="center">50%</span>
|
||||
</ProgressRing>,
|
||||
);
|
||||
expect(screen.getByTestId('center').textContent).toBe('50%');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Heatmap', () => {
|
||||
beforeEach(() => cleanup());
|
||||
it('renders one cell per datum', () => {
|
||||
const cells = Array.from({ length: 14 }, (_, i) => ({ date: `d${i}`, value: i }));
|
||||
render(<Heatmap cells={cells} />);
|
||||
expect(screen.getAllByTestId(/bl-heatmap-cell-/).length).toBe(14);
|
||||
});
|
||||
it('zero-value cells render with empty intensity', () => {
|
||||
render(<Heatmap cells={[{ date: 'a', value: 0 }, { date: 'b', value: 5 }]} />);
|
||||
const a = screen.getByTestId('bl-heatmap-cell-0');
|
||||
const b = screen.getByTestId('bl-heatmap-cell-1');
|
||||
expect(a.getAttribute('data-intensity')).toBe('0.00');
|
||||
expect(parseFloat(b.getAttribute('data-intensity') ?? '0')).toBeGreaterThan(0);
|
||||
});
|
||||
});
|
||||
28
packages/data-viz/src/index.ts
Normal file
28
packages/data-viz/src/index.ts
Normal file
@ -0,0 +1,28 @@
|
||||
/**
|
||||
* @bytelyst/data-viz — Token-themed visualization primitives.
|
||||
*
|
||||
* Exports (0.1.0):
|
||||
* <Sparkline> — line trend, inline SVG
|
||||
* <BarSparkline> — discrete bars with max-highlight
|
||||
* <KpiCard> — label + headline + delta + sparkline
|
||||
* <ProgressRing> — circular progress with center slot
|
||||
* <Heatmap> — calendar-style intensity grid
|
||||
*
|
||||
* Coming in 0.2.x (per ROADMAP §Wave 5b):
|
||||
* <LineChart>, <BarChart>, <AreaChart> — full axes + tooltips
|
||||
* <RealtimeChart>, <Sankey>, <Treemap>
|
||||
*/
|
||||
export { Sparkline } from './Sparkline.js';
|
||||
export type { SparklineProps } from './Sparkline.js';
|
||||
|
||||
export { BarSparkline } from './BarSparkline.js';
|
||||
export type { BarSparklineProps } from './BarSparkline.js';
|
||||
|
||||
export { KpiCard } from './KpiCard.js';
|
||||
export type { KpiCardProps } from './KpiCard.js';
|
||||
|
||||
export { ProgressRing } from './ProgressRing.js';
|
||||
export type { ProgressRingProps } from './ProgressRing.js';
|
||||
|
||||
export { Heatmap } from './Heatmap.js';
|
||||
export type { HeatmapCell, HeatmapProps } from './Heatmap.js';
|
||||
11
packages/data-viz/tsconfig.json
Normal file
11
packages/data-viz/tsconfig.json
Normal file
@ -0,0 +1,11 @@
|
||||
{
|
||||
"extends": "../../tsconfig.base.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "dist",
|
||||
"rootDir": "src",
|
||||
"lib": ["ES2022", "DOM"],
|
||||
"jsx": "react-jsx"
|
||||
},
|
||||
"include": ["src"],
|
||||
"exclude": ["src/**/*.test.ts", "src/**/*.test.tsx"]
|
||||
}
|
||||
2
packages/data-viz/vitest.config.ts
Normal file
2
packages/data-viz/vitest.config.ts
Normal file
@ -0,0 +1,2 @@
|
||||
import { defineConfig } from 'vitest/config';
|
||||
export default defineConfig({ test: { environment: 'happy-dom', pool: 'forks' } });
|
||||
34
packages/motion/package.json
Normal file
34
packages/motion/package.json
Normal file
@ -0,0 +1,34 @@
|
||||
{
|
||||
"name": "@bytelyst/motion",
|
||||
"version": "0.1.0",
|
||||
"type": "module",
|
||||
"description": "Motion primitives — Reveal, StaggerList, NumberFlow, TiltCard, ScrollProgress. ~5 KB gzip, honors prefers-reduced-motion.",
|
||||
"exports": {
|
||||
".": {
|
||||
"import": "./dist/index.js",
|
||||
"types": "./dist/index.d.ts"
|
||||
}
|
||||
},
|
||||
"main": "./dist/index.js",
|
||||
"types": "./dist/index.d.ts",
|
||||
"files": ["dist"],
|
||||
"scripts": {
|
||||
"build": "tsc",
|
||||
"test": "vitest run --pool forks",
|
||||
"typecheck": "tsc --noEmit"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=18.0.0",
|
||||
"react-dom": ">=18.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@testing-library/react": "^16.3.2",
|
||||
"@types/react": "^19.2.14",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"happy-dom": "^18.0.1",
|
||||
"react": "^19.2.4",
|
||||
"react-dom": "^19.2.4",
|
||||
"typescript": "^5.7.3",
|
||||
"vitest": "^4.0.18"
|
||||
}
|
||||
}
|
||||
105
packages/motion/src/NumberFlow.tsx
Normal file
105
packages/motion/src/NumberFlow.tsx
Normal file
@ -0,0 +1,105 @@
|
||||
import {
|
||||
useEffect,
|
||||
useRef,
|
||||
useState,
|
||||
type CSSProperties,
|
||||
} from 'react';
|
||||
import { SPRINGS, prefersReducedMotion } from './utils.js';
|
||||
|
||||
export interface NumberFlowProps {
|
||||
/** Target value to animate to. */
|
||||
value: number;
|
||||
/** Tween duration in ms. Default 700. */
|
||||
duration?: number;
|
||||
/** Decimal places. Default 0. */
|
||||
decimals?: number;
|
||||
/** Optional formatter (overrides `decimals` + locale). */
|
||||
format?: (n: number) => string;
|
||||
/** Locale for default formatter. Default 'en-US'. */
|
||||
locale?: string;
|
||||
/** Prefix rendered before the number (e.g. '$'). */
|
||||
prefix?: string;
|
||||
/** Suffix rendered after the number (e.g. '%'). */
|
||||
suffix?: string;
|
||||
/** Bypass animation. */
|
||||
disableMotion?: boolean;
|
||||
className?: string;
|
||||
style?: CSSProperties;
|
||||
}
|
||||
|
||||
/**
|
||||
* `<NumberFlow>` — smoothly tweens a number from its previous value to
|
||||
* the new one. Counts up, counts down, and respects
|
||||
* `prefers-reduced-motion` (snaps to final value).
|
||||
*
|
||||
* Pure RAF — no dependencies. Cancels in-flight tweens when `value`
|
||||
* changes mid-animation so the latest target always wins.
|
||||
*/
|
||||
export function NumberFlow({
|
||||
value,
|
||||
duration = 700,
|
||||
decimals = 0,
|
||||
format,
|
||||
locale = 'en-US',
|
||||
prefix,
|
||||
suffix,
|
||||
disableMotion,
|
||||
className,
|
||||
style,
|
||||
}: NumberFlowProps) {
|
||||
const [display, setDisplay] = useState(value);
|
||||
const fromRef = useRef(value);
|
||||
const rafRef = useRef<number | null>(null);
|
||||
const reduced = disableMotion ?? prefersReducedMotion();
|
||||
|
||||
useEffect(() => {
|
||||
if (reduced) {
|
||||
fromRef.current = value;
|
||||
setDisplay(value);
|
||||
return;
|
||||
}
|
||||
const from = fromRef.current;
|
||||
const start = performance.now();
|
||||
const tween = (now: number) => {
|
||||
const t = Math.min(1, (now - start) / duration);
|
||||
// Apply a snappy ease-out so the number doesn't feel linear.
|
||||
const eased = 1 - Math.pow(1 - t, 3);
|
||||
const current = from + (value - from) * eased;
|
||||
setDisplay(current);
|
||||
if (t < 1) {
|
||||
rafRef.current = requestAnimationFrame(tween);
|
||||
} else {
|
||||
fromRef.current = value;
|
||||
rafRef.current = null;
|
||||
}
|
||||
};
|
||||
rafRef.current = requestAnimationFrame(tween);
|
||||
return () => {
|
||||
if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
|
||||
};
|
||||
}, [value, duration, reduced]);
|
||||
|
||||
const formatted = format
|
||||
? format(display)
|
||||
: new Intl.NumberFormat(locale, {
|
||||
minimumFractionDigits: decimals,
|
||||
maximumFractionDigits: decimals,
|
||||
}).format(display);
|
||||
|
||||
return (
|
||||
<span
|
||||
data-testid="bl-number-flow"
|
||||
data-target={value}
|
||||
className={className}
|
||||
style={{
|
||||
fontVariantNumeric: 'tabular-nums',
|
||||
transition: `color 200ms ${SPRINGS.snappy}`,
|
||||
...style,
|
||||
}}
|
||||
>
|
||||
{prefix}
|
||||
{formatted}
|
||||
{suffix}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
131
packages/motion/src/Reveal.tsx
Normal file
131
packages/motion/src/Reveal.tsx
Normal file
@ -0,0 +1,131 @@
|
||||
import {
|
||||
useEffect,
|
||||
useRef,
|
||||
useState,
|
||||
type CSSProperties,
|
||||
type ReactNode,
|
||||
} from 'react';
|
||||
import { SPRINGS, prefersReducedMotion, type Spring } from './utils.js';
|
||||
|
||||
export interface RevealProps {
|
||||
children: ReactNode;
|
||||
/** Entry direction. Default: 'up' (translateY 8px). */
|
||||
from?: 'up' | 'down' | 'left' | 'right' | 'fade' | 'scale';
|
||||
/** Distance in pixels for translate variants. Default 8. */
|
||||
distance?: number;
|
||||
/** Animation duration (ms). Default 320. */
|
||||
duration?: number;
|
||||
/** Trigger delay (ms). Default 0. */
|
||||
delay?: number;
|
||||
/** Spring curve preset. Default 'snappy'. */
|
||||
spring?: Spring;
|
||||
/** IntersectionObserver threshold. Default 0.1. */
|
||||
threshold?: number;
|
||||
/** Trigger only once (default) vs every time it enters the viewport. */
|
||||
once?: boolean;
|
||||
/** Bypass animation (e.g. for SSR-stable visual-regression tests). */
|
||||
disableMotion?: boolean;
|
||||
/** Tailwind escape hatch. */
|
||||
className?: string;
|
||||
/** Inline style escape hatch — merged AFTER motion vars. */
|
||||
style?: CSSProperties;
|
||||
}
|
||||
|
||||
/**
|
||||
* `<Reveal>` — fades + slides a child into view on viewport entry.
|
||||
*
|
||||
* Uses IntersectionObserver + CSS transitions; zero runtime physics.
|
||||
* Automatically disables animation under `prefers-reduced-motion`.
|
||||
*
|
||||
* @example
|
||||
* ```tsx
|
||||
* <Reveal from="up" delay={120}>
|
||||
* <h1>Hero headline</h1>
|
||||
* </Reveal>
|
||||
* ```
|
||||
*/
|
||||
export function Reveal({
|
||||
children,
|
||||
from = 'up',
|
||||
distance = 8,
|
||||
duration = 320,
|
||||
delay = 0,
|
||||
spring = 'snappy',
|
||||
threshold = 0.1,
|
||||
once = true,
|
||||
disableMotion,
|
||||
className,
|
||||
style,
|
||||
}: RevealProps) {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const [visible, setVisible] = useState(false);
|
||||
const reduced = disableMotion ?? prefersReducedMotion();
|
||||
|
||||
useEffect(() => {
|
||||
if (reduced) {
|
||||
setVisible(true);
|
||||
return;
|
||||
}
|
||||
const el = ref.current;
|
||||
if (!el || typeof IntersectionObserver === 'undefined') {
|
||||
setVisible(true);
|
||||
return;
|
||||
}
|
||||
const io = new IntersectionObserver(
|
||||
entries => {
|
||||
for (const entry of entries) {
|
||||
if (entry.isIntersecting) {
|
||||
setVisible(true);
|
||||
if (once) io.disconnect();
|
||||
} else if (!once) {
|
||||
setVisible(false);
|
||||
}
|
||||
}
|
||||
},
|
||||
{ threshold },
|
||||
);
|
||||
io.observe(el);
|
||||
return () => io.disconnect();
|
||||
}, [threshold, once, reduced]);
|
||||
|
||||
const transform = visible || reduced ? 'none' : initialTransform(from, distance);
|
||||
const opacity = visible || reduced ? 1 : from === 'scale' ? 0.92 : 0;
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
data-testid="bl-reveal"
|
||||
data-visible={visible || reduced}
|
||||
className={className}
|
||||
style={{
|
||||
transform,
|
||||
opacity,
|
||||
transition: reduced
|
||||
? 'none'
|
||||
: `transform ${duration}ms ${SPRINGS[spring]} ${delay}ms, opacity ${duration}ms ${SPRINGS[spring]} ${delay}ms`,
|
||||
willChange: 'transform, opacity',
|
||||
...style,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function initialTransform(from: RevealProps['from'], d: number): string {
|
||||
switch (from) {
|
||||
case 'up':
|
||||
return `translate3d(0, ${d}px, 0)`;
|
||||
case 'down':
|
||||
return `translate3d(0, ${-d}px, 0)`;
|
||||
case 'left':
|
||||
return `translate3d(${d}px, 0, 0)`;
|
||||
case 'right':
|
||||
return `translate3d(${-d}px, 0, 0)`;
|
||||
case 'scale':
|
||||
return 'scale(0.96)';
|
||||
case 'fade':
|
||||
default:
|
||||
return 'none';
|
||||
}
|
||||
}
|
||||
86
packages/motion/src/ScrollProgress.tsx
Normal file
86
packages/motion/src/ScrollProgress.tsx
Normal file
@ -0,0 +1,86 @@
|
||||
import { useEffect, useRef, type CSSProperties } from 'react';
|
||||
|
||||
export interface ScrollProgressProps {
|
||||
/** Element to track. Defaults to `document.documentElement`. */
|
||||
target?: HTMLElement | null;
|
||||
/** Bar position. Default 'top'. */
|
||||
position?: 'top' | 'bottom';
|
||||
/** Bar height in pixels. Default 3. */
|
||||
thickness?: number;
|
||||
/** Bar fill color. Default `var(--bl-accent)`. */
|
||||
color?: string;
|
||||
className?: string;
|
||||
style?: CSSProperties;
|
||||
}
|
||||
|
||||
/**
|
||||
* `<ScrollProgress>` — fixed progress bar reflecting scroll position
|
||||
* of a target (defaults to the document). Common chrome element on
|
||||
* long-form pages and onboarding flows.
|
||||
*
|
||||
* Updates the bar's `scaleX` transform directly via a ref so React
|
||||
* doesn't re-render on every scroll event.
|
||||
*/
|
||||
export function ScrollProgress({
|
||||
target,
|
||||
position = 'top',
|
||||
thickness = 3,
|
||||
color = 'var(--bl-accent, #6366f1)',
|
||||
className,
|
||||
style,
|
||||
}: ScrollProgressProps) {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const root =
|
||||
target ??
|
||||
(typeof document !== 'undefined' ? document.documentElement : null);
|
||||
if (!root) return;
|
||||
const update = () => {
|
||||
const el = ref.current;
|
||||
if (!el) return;
|
||||
const max = root.scrollHeight - root.clientHeight;
|
||||
const pct = max > 0 ? Math.min(1, root.scrollTop / max) : 0;
|
||||
el.style.transform = `scaleX(${pct})`;
|
||||
};
|
||||
update();
|
||||
const scrollEl = root === document.documentElement ? window : root;
|
||||
scrollEl.addEventListener('scroll', update, { passive: true });
|
||||
window.addEventListener('resize', update);
|
||||
return () => {
|
||||
scrollEl.removeEventListener('scroll', update);
|
||||
window.removeEventListener('resize', update);
|
||||
};
|
||||
}, [target]);
|
||||
|
||||
return (
|
||||
<div
|
||||
data-testid="bl-scroll-progress"
|
||||
aria-hidden
|
||||
className={className}
|
||||
style={{
|
||||
position: 'fixed',
|
||||
left: 0,
|
||||
right: 0,
|
||||
height: thickness,
|
||||
zIndex: 100,
|
||||
background: 'transparent',
|
||||
pointerEvents: 'none',
|
||||
[position]: 0,
|
||||
...style,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
ref={ref}
|
||||
style={{
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
background: color,
|
||||
transformOrigin: 'left center',
|
||||
transform: 'scaleX(0)',
|
||||
willChange: 'transform',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
48
packages/motion/src/StaggerList.tsx
Normal file
48
packages/motion/src/StaggerList.tsx
Normal file
@ -0,0 +1,48 @@
|
||||
import { Children, isValidElement, type ReactNode } from 'react';
|
||||
import { Reveal, type RevealProps } from './Reveal.js';
|
||||
|
||||
export interface StaggerListProps
|
||||
extends Omit<RevealProps, 'children' | 'delay'> {
|
||||
children: ReactNode;
|
||||
/** Delay between successive children (ms). Default 60. */
|
||||
stagger?: number;
|
||||
/** Initial delay applied to the first child (ms). Default 0. */
|
||||
initialDelay?: number;
|
||||
/** Element used as the list root. Default 'div'. */
|
||||
as?: 'div' | 'ul' | 'ol' | 'section';
|
||||
}
|
||||
|
||||
/**
|
||||
* Reveal a list of children with a per-item delay. Each child is wrapped
|
||||
* in a `<Reveal>` so the same motion vocabulary applies — `from`,
|
||||
* `spring`, `duration`, `once`, etc. all flow through.
|
||||
*
|
||||
* @example
|
||||
* ```tsx
|
||||
* <StaggerList from="up" stagger={70}>
|
||||
* {items.map((item) => <Card key={item.id} {...item} />)}
|
||||
* </StaggerList>
|
||||
* ```
|
||||
*/
|
||||
export function StaggerList({
|
||||
children,
|
||||
stagger = 60,
|
||||
initialDelay = 0,
|
||||
as: As = 'div',
|
||||
...reveal
|
||||
}: StaggerListProps) {
|
||||
const items = Children.toArray(children).filter(isValidElement);
|
||||
return (
|
||||
<As data-testid="bl-stagger-list">
|
||||
{items.map((child, i) => (
|
||||
<Reveal
|
||||
key={(child as { key?: string | number }).key ?? i}
|
||||
delay={initialDelay + i * stagger}
|
||||
{...reveal}
|
||||
>
|
||||
{child}
|
||||
</Reveal>
|
||||
))}
|
||||
</As>
|
||||
);
|
||||
}
|
||||
96
packages/motion/src/TiltCard.tsx
Normal file
96
packages/motion/src/TiltCard.tsx
Normal file
@ -0,0 +1,96 @@
|
||||
import {
|
||||
useRef,
|
||||
type CSSProperties,
|
||||
type MouseEvent,
|
||||
type ReactNode,
|
||||
} from 'react';
|
||||
import { SPRINGS, prefersReducedMotion } from './utils.js';
|
||||
|
||||
export interface TiltCardProps {
|
||||
children: ReactNode;
|
||||
/** Maximum tilt angle in degrees. Default 8. */
|
||||
intensity?: number;
|
||||
/** Glare highlight intensity 0..1. Default 0.18. */
|
||||
glare?: number;
|
||||
/** Perspective in pixels. Default 800. */
|
||||
perspective?: number;
|
||||
/** Bypass motion. */
|
||||
disableMotion?: boolean;
|
||||
className?: string;
|
||||
style?: CSSProperties;
|
||||
}
|
||||
|
||||
/**
|
||||
* `<TiltCard>` — interactive 3D tilt + cursor-tracking glare on hover.
|
||||
* Designed for hero cards, marketing tiles, and KPI surfaces. Settles
|
||||
* back to neutral on mouse leave with a snappy spring.
|
||||
*
|
||||
* Performance: all transforms applied as CSS variables on a single ref,
|
||||
* so React doesn't re-render on each pointer move.
|
||||
*/
|
||||
export function TiltCard({
|
||||
children,
|
||||
intensity = 8,
|
||||
glare = 0.18,
|
||||
perspective = 800,
|
||||
disableMotion,
|
||||
className,
|
||||
style,
|
||||
}: TiltCardProps) {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const reduced = disableMotion ?? prefersReducedMotion();
|
||||
|
||||
const onMove = (e: MouseEvent<HTMLDivElement>) => {
|
||||
if (reduced) return;
|
||||
const el = ref.current;
|
||||
if (!el) return;
|
||||
const rect = el.getBoundingClientRect();
|
||||
const x = (e.clientX - rect.left) / rect.width; // 0..1
|
||||
const y = (e.clientY - rect.top) / rect.height; // 0..1
|
||||
const rotateY = (x - 0.5) * intensity * 2;
|
||||
const rotateX = -(y - 0.5) * intensity * 2;
|
||||
el.style.transition = 'transform 60ms linear';
|
||||
el.style.transform = `perspective(${perspective}px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateZ(0)`;
|
||||
el.style.setProperty('--bl-tilt-glare-x', `${x * 100}%`);
|
||||
el.style.setProperty('--bl-tilt-glare-y', `${y * 100}%`);
|
||||
};
|
||||
|
||||
const onLeave = () => {
|
||||
if (reduced) return;
|
||||
const el = ref.current;
|
||||
if (!el) return;
|
||||
el.style.transition = `transform 420ms ${SPRINGS.bouncy}`;
|
||||
el.style.transform = `perspective(${perspective}px) rotateX(0deg) rotateY(0deg) translateZ(0)`;
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
data-testid="bl-tilt-card"
|
||||
onMouseMove={onMove}
|
||||
onMouseLeave={onLeave}
|
||||
className={className}
|
||||
style={{
|
||||
position: 'relative',
|
||||
transformStyle: 'preserve-3d',
|
||||
willChange: 'transform',
|
||||
...style,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
{!reduced && glare > 0 && (
|
||||
<span
|
||||
aria-hidden
|
||||
style={{
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
pointerEvents: 'none',
|
||||
borderRadius: 'inherit',
|
||||
background: `radial-gradient(circle at var(--bl-tilt-glare-x, 50%) var(--bl-tilt-glare-y, 50%), rgba(255,255,255,${glare}), transparent 55%)`,
|
||||
mixBlendMode: 'overlay',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
173
packages/motion/src/__tests__/motion.test.tsx
Normal file
173
packages/motion/src/__tests__/motion.test.tsx
Normal file
@ -0,0 +1,173 @@
|
||||
import { describe, it, expect, beforeEach, vi } from 'vitest';
|
||||
import { act, cleanup, render, screen } from '@testing-library/react';
|
||||
import { Reveal } from '../Reveal.js';
|
||||
import { StaggerList } from '../StaggerList.js';
|
||||
import { NumberFlow } from '../NumberFlow.js';
|
||||
import { TiltCard } from '../TiltCard.js';
|
||||
import { ScrollProgress } from '../ScrollProgress.js';
|
||||
import { SPRINGS, prefersReducedMotion } from '../utils.js';
|
||||
|
||||
describe('utils', () => {
|
||||
it('exposes 4 spring presets as cubic-bezier strings', () => {
|
||||
expect(Object.keys(SPRINGS)).toHaveLength(4);
|
||||
for (const v of Object.values(SPRINGS)) {
|
||||
expect(v).toMatch(/^cubic-bezier/);
|
||||
}
|
||||
});
|
||||
it('prefersReducedMotion handles missing matchMedia gracefully', () => {
|
||||
const orig = window.matchMedia;
|
||||
// @ts-expect-error force delete for test
|
||||
delete (window as { matchMedia?: unknown }).matchMedia;
|
||||
expect(prefersReducedMotion()).toBe(false);
|
||||
window.matchMedia = orig;
|
||||
});
|
||||
});
|
||||
|
||||
describe('Reveal', () => {
|
||||
beforeEach(() => cleanup());
|
||||
|
||||
it('renders children and exposes data-visible attribute', () => {
|
||||
render(
|
||||
<Reveal disableMotion>
|
||||
<span data-testid="child">hi</span>
|
||||
</Reveal>,
|
||||
);
|
||||
expect(screen.getByTestId('child')).toBeDefined();
|
||||
const wrap = screen.getByTestId('bl-reveal');
|
||||
expect(wrap.getAttribute('data-visible')).toBe('true');
|
||||
});
|
||||
|
||||
it('starts hidden when IntersectionObserver is unavailable (graceful fallback)', () => {
|
||||
const orig = (globalThis as { IntersectionObserver?: unknown }).IntersectionObserver;
|
||||
// @ts-expect-error force delete
|
||||
delete (globalThis as { IntersectionObserver?: unknown }).IntersectionObserver;
|
||||
render(<Reveal><span>x</span></Reveal>);
|
||||
// Fallback path sets visible=true so SSR / non-IO browsers still render.
|
||||
expect(screen.getByTestId('bl-reveal').getAttribute('data-visible')).toBe('true');
|
||||
(globalThis as { IntersectionObserver?: unknown }).IntersectionObserver = orig;
|
||||
});
|
||||
|
||||
it('forwards inline style after motion vars', () => {
|
||||
render(
|
||||
<Reveal disableMotion style={{ background: 'red' }}>
|
||||
<span>x</span>
|
||||
</Reveal>,
|
||||
);
|
||||
expect(screen.getByTestId('bl-reveal').style.background).toBe('red');
|
||||
});
|
||||
});
|
||||
|
||||
describe('StaggerList', () => {
|
||||
beforeEach(() => cleanup());
|
||||
|
||||
it('wraps each child in a Reveal with increasing delay', () => {
|
||||
render(
|
||||
<StaggerList disableMotion stagger={50} initialDelay={10}>
|
||||
<div data-testid="i1">1</div>
|
||||
<div data-testid="i2">2</div>
|
||||
<div data-testid="i3">3</div>
|
||||
</StaggerList>,
|
||||
);
|
||||
const list = screen.getByTestId('bl-stagger-list');
|
||||
expect(list.children).toHaveLength(3);
|
||||
expect(screen.getByTestId('i3')).toBeDefined();
|
||||
});
|
||||
|
||||
it('supports element override via `as`', () => {
|
||||
render(
|
||||
<StaggerList disableMotion as="ul">
|
||||
<li>a</li>
|
||||
<li>b</li>
|
||||
</StaggerList>,
|
||||
);
|
||||
expect(screen.getByTestId('bl-stagger-list').tagName.toLowerCase()).toBe('ul');
|
||||
});
|
||||
});
|
||||
|
||||
describe('NumberFlow', () => {
|
||||
beforeEach(() => cleanup());
|
||||
|
||||
it('snaps to value when disableMotion=true', () => {
|
||||
render(<NumberFlow value={1234} disableMotion />);
|
||||
expect(screen.getByTestId('bl-number-flow').textContent).toBe('1,234');
|
||||
});
|
||||
|
||||
it('formats with decimals + prefix/suffix', () => {
|
||||
render(<NumberFlow value={42.5} decimals={1} prefix="$" suffix=" USD" disableMotion />);
|
||||
expect(screen.getByTestId('bl-number-flow').textContent).toBe('$42.5 USD');
|
||||
});
|
||||
|
||||
it('uses custom format function', () => {
|
||||
render(<NumberFlow value={5} format={(n) => `≈${n.toFixed(0)} items`} disableMotion />);
|
||||
expect(screen.getByTestId('bl-number-flow').textContent).toBe('≈5 items');
|
||||
});
|
||||
|
||||
it('exposes data-target equal to the latest target value', () => {
|
||||
render(<NumberFlow value={7} disableMotion />);
|
||||
expect(screen.getByTestId('bl-number-flow').getAttribute('data-target')).toBe('7');
|
||||
});
|
||||
});
|
||||
|
||||
describe('TiltCard', () => {
|
||||
beforeEach(() => cleanup());
|
||||
|
||||
it('renders children and attaches mousemove/mouseleave handlers', () => {
|
||||
render(
|
||||
<TiltCard>
|
||||
<span data-testid="tilt-child">card body</span>
|
||||
</TiltCard>,
|
||||
);
|
||||
expect(screen.getByTestId('tilt-child')).toBeDefined();
|
||||
const el = screen.getByTestId('bl-tilt-card');
|
||||
// Glare overlay rendered by default.
|
||||
expect(el.lastElementChild?.getAttribute('aria-hidden')).toBe('true');
|
||||
});
|
||||
|
||||
it('hides glare overlay when disabled via prop', () => {
|
||||
render(
|
||||
<TiltCard glare={0}>
|
||||
<span data-testid="tc-child">x</span>
|
||||
</TiltCard>,
|
||||
);
|
||||
const el = screen.getByTestId('bl-tilt-card');
|
||||
// Without glare, the only child is the user's content — no aria-hidden overlay sibling.
|
||||
const ariaHiddenSiblings = Array.from(el.children).filter(
|
||||
c => c.getAttribute('aria-hidden') === 'true',
|
||||
);
|
||||
expect(ariaHiddenSiblings).toHaveLength(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe('ScrollProgress', () => {
|
||||
beforeEach(() => cleanup());
|
||||
|
||||
it('renders a fixed bar with the given thickness + color', () => {
|
||||
render(<ScrollProgress thickness={5} color="hotpink" />);
|
||||
const bar = screen.getByTestId('bl-scroll-progress');
|
||||
expect(bar.style.position).toBe('fixed');
|
||||
expect(bar.style.height).toBe('5px');
|
||||
});
|
||||
|
||||
it('updates the inner transform on window scroll', () => {
|
||||
render(<ScrollProgress />);
|
||||
const bar = screen.getByTestId('bl-scroll-progress');
|
||||
const fill = bar.firstElementChild as HTMLElement;
|
||||
expect(fill.style.transform).toBe('scaleX(0)');
|
||||
// Simulate scroll — we can't mutate scrollTop on document.documentElement
|
||||
// in happy-dom in all builds, so just verify the listener was attached
|
||||
// and dispatching scroll doesn't throw.
|
||||
act(() => {
|
||||
window.dispatchEvent(new Event('scroll'));
|
||||
});
|
||||
});
|
||||
|
||||
it('cleans up listeners on unmount (no leak)', () => {
|
||||
const add = vi.spyOn(window, 'addEventListener');
|
||||
const remove = vi.spyOn(window, 'removeEventListener');
|
||||
const { unmount } = render(<ScrollProgress />);
|
||||
unmount();
|
||||
expect(remove).toHaveBeenCalled();
|
||||
add.mockRestore();
|
||||
remove.mockRestore();
|
||||
});
|
||||
});
|
||||
38
packages/motion/src/index.ts
Normal file
38
packages/motion/src/index.ts
Normal file
@ -0,0 +1,38 @@
|
||||
/**
|
||||
* @bytelyst/motion — Motion primitives (Wave 4).
|
||||
*
|
||||
* Exports (0.1.0):
|
||||
* <Reveal> — fade/slide on viewport entry
|
||||
* <StaggerList> — sequenced reveal of children
|
||||
* <NumberFlow> — animated counter tween (RAF-based)
|
||||
* <TiltCard> — interactive 3D hover with cursor-tracking glare
|
||||
* <ScrollProgress> — fixed scroll-position bar
|
||||
*
|
||||
* Coming in 0.2.x (per ROADMAP §Wave 4):
|
||||
* <Magnetic>, <PageTransition> (View Transitions API),
|
||||
* <Drag>, <SwipeToDismiss>
|
||||
*
|
||||
* All primitives:
|
||||
* - honor `prefers-reduced-motion` automatically
|
||||
* - accept `disableMotion` to bypass for tests / snapshots
|
||||
* - emit `data-testid` attributes for Playwright
|
||||
* - lean on tokens (`--bl-accent`, `--bl-radius-*`, etc.)
|
||||
*/
|
||||
|
||||
export { Reveal } from './Reveal.js';
|
||||
export type { RevealProps } from './Reveal.js';
|
||||
|
||||
export { StaggerList } from './StaggerList.js';
|
||||
export type { StaggerListProps } from './StaggerList.js';
|
||||
|
||||
export { NumberFlow } from './NumberFlow.js';
|
||||
export type { NumberFlowProps } from './NumberFlow.js';
|
||||
|
||||
export { TiltCard } from './TiltCard.js';
|
||||
export type { TiltCardProps } from './TiltCard.js';
|
||||
|
||||
export { ScrollProgress } from './ScrollProgress.js';
|
||||
export type { ScrollProgressProps } from './ScrollProgress.js';
|
||||
|
||||
export { SPRINGS, prefersReducedMotion } from './utils.js';
|
||||
export type { Spring } from './utils.js';
|
||||
21
packages/motion/src/utils.ts
Normal file
21
packages/motion/src/utils.ts
Normal file
@ -0,0 +1,21 @@
|
||||
/**
|
||||
* Shared utilities for @bytelyst/motion.
|
||||
*
|
||||
* Springs are expressed as `cubic-bezier` curves so we ship zero
|
||||
* runtime physics — primitives compose with native CSS transitions.
|
||||
*/
|
||||
|
||||
export const SPRINGS = {
|
||||
snappy: 'cubic-bezier(0.2, 0.9, 0.1, 1)',
|
||||
bouncy: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
|
||||
gentle: 'cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
instant: 'cubic-bezier(0, 0, 1, 1)',
|
||||
} as const;
|
||||
|
||||
export type Spring = keyof typeof SPRINGS;
|
||||
|
||||
/** Cheap server-safe check for prefers-reduced-motion. */
|
||||
export function prefersReducedMotion(): boolean {
|
||||
if (typeof window === 'undefined' || !window.matchMedia) return false;
|
||||
return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
}
|
||||
11
packages/motion/tsconfig.json
Normal file
11
packages/motion/tsconfig.json
Normal file
@ -0,0 +1,11 @@
|
||||
{
|
||||
"extends": "../../tsconfig.base.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "dist",
|
||||
"rootDir": "src",
|
||||
"lib": ["ES2022", "DOM"],
|
||||
"jsx": "react-jsx"
|
||||
},
|
||||
"include": ["src"],
|
||||
"exclude": ["src/**/*.test.ts", "src/**/*.test.tsx"]
|
||||
}
|
||||
2
packages/motion/vitest.config.ts
Normal file
2
packages/motion/vitest.config.ts
Normal file
@ -0,0 +1,2 @@
|
||||
import { defineConfig } from 'vitest/config';
|
||||
export default defineConfig({ test: { environment: 'happy-dom', pool: 'forks' } });
|
||||
34
packages/notifications-ui/package.json
Normal file
34
packages/notifications-ui/package.json
Normal file
@ -0,0 +1,34 @@
|
||||
{
|
||||
"name": "@bytelyst/notifications-ui",
|
||||
"version": "0.1.0",
|
||||
"type": "module",
|
||||
"description": "Notification UI primitives — NotificationCenter, BannerStack, InboxItem, Announcement. Bell + dropdown inbox with read/unread state.",
|
||||
"exports": {
|
||||
".": {
|
||||
"import": "./dist/index.js",
|
||||
"types": "./dist/index.d.ts"
|
||||
}
|
||||
},
|
||||
"main": "./dist/index.js",
|
||||
"types": "./dist/index.d.ts",
|
||||
"files": ["dist"],
|
||||
"scripts": {
|
||||
"build": "tsc",
|
||||
"test": "vitest run --pool forks",
|
||||
"typecheck": "tsc --noEmit"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=18.0.0",
|
||||
"react-dom": ">=18.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@testing-library/react": "^16.3.2",
|
||||
"@types/react": "^19.2.14",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"happy-dom": "^18.0.1",
|
||||
"react": "^19.2.4",
|
||||
"react-dom": "^19.2.4",
|
||||
"typescript": "^5.7.3",
|
||||
"vitest": "^4.0.18"
|
||||
}
|
||||
}
|
||||
90
packages/notifications-ui/src/Announcement.tsx
Normal file
90
packages/notifications-ui/src/Announcement.tsx
Normal file
@ -0,0 +1,90 @@
|
||||
import type { CSSProperties, ReactNode } from 'react';
|
||||
|
||||
export interface AnnouncementProps {
|
||||
/** Bold short label rendered as a chip on the left. */
|
||||
tag?: string;
|
||||
/** Main message. */
|
||||
children: ReactNode;
|
||||
/** Optional CTA. */
|
||||
cta?: { label: string; href?: string; onSelect?: () => void };
|
||||
/** Visual variant. */
|
||||
tone?: 'accent' | 'subtle' | 'gradient';
|
||||
className?: string;
|
||||
style?: CSSProperties;
|
||||
}
|
||||
|
||||
/**
|
||||
* `<Announcement>` — single inline marketing strip (smaller than a
|
||||
* `<BannerStack>` row, larger than a toast). Good for "What's new"
|
||||
* call-outs above the fold.
|
||||
*/
|
||||
export function Announcement({
|
||||
tag = 'NEW',
|
||||
children,
|
||||
cta,
|
||||
tone = 'gradient',
|
||||
className,
|
||||
style,
|
||||
}: AnnouncementProps) {
|
||||
const bg =
|
||||
tone === 'gradient'
|
||||
? 'linear-gradient(90deg, var(--bl-accent-muted, rgba(99,102,241,0.20)), var(--bl-info-muted, rgba(56,189,248,0.12)) 60%, transparent)'
|
||||
: tone === 'subtle'
|
||||
? 'var(--bl-surface-muted, rgba(0,0,0,0.04))'
|
||||
: 'var(--bl-accent-muted, rgba(99,102,241,0.18))';
|
||||
|
||||
return (
|
||||
<div
|
||||
data-testid="bl-announcement"
|
||||
role="region"
|
||||
className={className}
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 'var(--bl-space-3, 12px)',
|
||||
padding: 'var(--bl-space-2, 8px) var(--bl-space-4, 16px)',
|
||||
borderRadius: 'var(--bl-radius-pill, 999px)',
|
||||
background: bg,
|
||||
fontSize: '0.82rem',
|
||||
color: 'var(--bl-text-primary, inherit)',
|
||||
...style,
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
padding: '2px 8px',
|
||||
background: 'var(--bl-accent, #6366f1)',
|
||||
color: 'var(--bl-accent-foreground, #fff)',
|
||||
fontSize: '0.65rem',
|
||||
fontWeight: 800,
|
||||
letterSpacing: '0.05em',
|
||||
borderRadius: 'var(--bl-radius-pill, 999px)',
|
||||
}}
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
<span style={{ flex: 1, minWidth: 0 }}>{children}</span>
|
||||
{cta && (
|
||||
<a
|
||||
data-testid="bl-announcement-cta"
|
||||
href={cta.href}
|
||||
onClick={e => {
|
||||
if (cta.onSelect) {
|
||||
e.preventDefault();
|
||||
cta.onSelect();
|
||||
}
|
||||
}}
|
||||
style={{
|
||||
fontSize: '0.78rem',
|
||||
fontWeight: 700,
|
||||
color: 'var(--bl-accent, #6366f1)',
|
||||
textDecoration: 'none',
|
||||
whiteSpace: 'nowrap',
|
||||
}}
|
||||
>
|
||||
{cta.label} →
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
176
packages/notifications-ui/src/BannerStack.tsx
Normal file
176
packages/notifications-ui/src/BannerStack.tsx
Normal file
@ -0,0 +1,176 @@
|
||||
import { useState, type CSSProperties } from 'react';
|
||||
import type { BannerItem, BannerKind } from './types.js';
|
||||
|
||||
export interface BannerStackProps {
|
||||
banners: BannerItem[];
|
||||
/** Called when a user dismisses a banner. */
|
||||
onDismiss?: (id: string) => void;
|
||||
/** Max banners visible. Overflow stays in DOM but collapses behind a "+N more". */
|
||||
maxVisible?: number;
|
||||
className?: string;
|
||||
style?: CSSProperties;
|
||||
}
|
||||
|
||||
const TONE: Record<BannerKind, { bg: string; fg: string; accent: string }> = {
|
||||
info: {
|
||||
bg: 'var(--bl-info-muted, rgba(56,189,248,0.12))',
|
||||
fg: 'var(--bl-text-primary, inherit)',
|
||||
accent: 'var(--bl-info, #38bdf8)',
|
||||
},
|
||||
success: {
|
||||
bg: 'var(--bl-success-muted, rgba(34,197,94,0.12))',
|
||||
fg: 'var(--bl-text-primary, inherit)',
|
||||
accent: 'var(--bl-success, #22c55e)',
|
||||
},
|
||||
warning: {
|
||||
bg: 'var(--bl-warning-muted, rgba(245,158,11,0.14))',
|
||||
fg: 'var(--bl-text-primary, inherit)',
|
||||
accent: 'var(--bl-warning, #f59e0b)',
|
||||
},
|
||||
danger: {
|
||||
bg: 'var(--bl-danger-muted, rgba(239,68,68,0.12))',
|
||||
fg: 'var(--bl-text-primary, inherit)',
|
||||
accent: 'var(--bl-danger, #ef4444)',
|
||||
},
|
||||
announcement: {
|
||||
bg: 'linear-gradient(90deg, var(--bl-accent-muted, rgba(99,102,241,0.18)), transparent)',
|
||||
fg: 'var(--bl-text-primary, inherit)',
|
||||
accent: 'var(--bl-accent, #6366f1)',
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* `<BannerStack>` — top-of-page announcement strip. Renders an
|
||||
* accent-bordered tile for each banner; dismissible by default.
|
||||
*/
|
||||
export function BannerStack({
|
||||
banners,
|
||||
onDismiss,
|
||||
maxVisible = 3,
|
||||
className,
|
||||
style,
|
||||
}: BannerStackProps) {
|
||||
const [collapsed, setCollapsed] = useState(true);
|
||||
const visible = collapsed ? banners.slice(0, maxVisible) : banners;
|
||||
const hidden = banners.length - visible.length;
|
||||
|
||||
if (banners.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
data-testid="bl-banner-stack"
|
||||
className={className}
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: 6,
|
||||
...style,
|
||||
}}
|
||||
>
|
||||
{visible.map(b => {
|
||||
const t = TONE[b.kind ?? 'info'];
|
||||
return (
|
||||
<div
|
||||
key={b.id}
|
||||
data-testid={`bl-banner-${b.id}`}
|
||||
data-kind={b.kind ?? 'info'}
|
||||
role="status"
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'flex-start',
|
||||
gap: 'var(--bl-space-3, 12px)',
|
||||
padding: 'var(--bl-space-3, 12px) var(--bl-space-4, 16px)',
|
||||
borderRadius: 'var(--bl-radius-card, 10px)',
|
||||
borderLeft: `3px solid ${t.accent}`,
|
||||
background: t.bg,
|
||||
color: t.fg,
|
||||
fontSize: '0.85rem',
|
||||
lineHeight: 1.45,
|
||||
}}
|
||||
>
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
<div style={{ fontWeight: 600 }}>{b.title}</div>
|
||||
{b.body && (
|
||||
<div
|
||||
style={{
|
||||
color: 'var(--bl-text-secondary, #555)',
|
||||
marginTop: 2,
|
||||
fontSize: '0.8rem',
|
||||
}}
|
||||
>
|
||||
{b.body}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{b.cta && (
|
||||
<a
|
||||
data-testid={`bl-banner-cta-${b.id}`}
|
||||
href={b.cta.href}
|
||||
onClick={e => {
|
||||
if (b.cta?.onSelect) {
|
||||
e.preventDefault();
|
||||
b.cta.onSelect();
|
||||
}
|
||||
}}
|
||||
style={{
|
||||
fontSize: '0.78rem',
|
||||
fontWeight: 700,
|
||||
color: t.accent,
|
||||
textDecoration: 'none',
|
||||
padding: '2px 10px',
|
||||
borderRadius: 'var(--bl-radius-pill, 999px)',
|
||||
border: `1px solid ${t.accent}`,
|
||||
flexShrink: 0,
|
||||
whiteSpace: 'nowrap',
|
||||
}}
|
||||
>
|
||||
{b.cta.label}
|
||||
</a>
|
||||
)}
|
||||
{b.dismissible !== false && (
|
||||
<button
|
||||
type="button"
|
||||
data-testid={`bl-banner-dismiss-${b.id}`}
|
||||
aria-label="Dismiss"
|
||||
onClick={() => onDismiss?.(b.id)}
|
||||
style={{
|
||||
width: 22,
|
||||
height: 22,
|
||||
display: 'inline-grid',
|
||||
placeItems: 'center',
|
||||
background: 'transparent',
|
||||
border: 'none',
|
||||
color: 'var(--bl-text-tertiary, #888)',
|
||||
cursor: 'pointer',
|
||||
fontSize: 14,
|
||||
lineHeight: 1,
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{hidden > 0 && (
|
||||
<button
|
||||
type="button"
|
||||
data-testid="bl-banner-expand"
|
||||
onClick={() => setCollapsed(false)}
|
||||
style={{
|
||||
alignSelf: 'flex-start',
|
||||
background: 'transparent',
|
||||
border: 'none',
|
||||
color: 'var(--bl-text-tertiary, #888)',
|
||||
fontSize: '0.75rem',
|
||||
cursor: 'pointer',
|
||||
padding: '4px 8px',
|
||||
}}
|
||||
>
|
||||
+{hidden} more
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
200
packages/notifications-ui/src/InboxItem.tsx
Normal file
200
packages/notifications-ui/src/InboxItem.tsx
Normal file
@ -0,0 +1,200 @@
|
||||
import type { CSSProperties } from 'react';
|
||||
import type { NotificationItem, NotificationKind } from './types.js';
|
||||
|
||||
export interface InboxItemProps {
|
||||
item: NotificationItem;
|
||||
/** Called when the item body is clicked. */
|
||||
onSelect?: (item: NotificationItem) => void;
|
||||
/** Mark this single item as read. */
|
||||
onMarkRead?: (id: string) => void;
|
||||
/** Dense layout (smaller padding, smaller font). */
|
||||
dense?: boolean;
|
||||
className?: string;
|
||||
style?: CSSProperties;
|
||||
}
|
||||
|
||||
/**
|
||||
* `<InboxItem>` — single notification row. Used inside `<NotificationCenter>`
|
||||
* but also exported for products that build custom inbox surfaces.
|
||||
*/
|
||||
export function InboxItem({
|
||||
item,
|
||||
onSelect,
|
||||
onMarkRead,
|
||||
dense,
|
||||
className,
|
||||
style,
|
||||
}: InboxItemProps) {
|
||||
const tone = TONE[item.kind ?? 'info'];
|
||||
const padding = dense ? '6px 10px' : 'var(--bl-space-2, 8px) var(--bl-space-3, 12px)';
|
||||
|
||||
return (
|
||||
<article
|
||||
data-testid={`bl-inbox-item-${item.id}`}
|
||||
data-kind={item.kind ?? 'info'}
|
||||
data-read={item.read ? 'true' : 'false'}
|
||||
className={className}
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'flex-start',
|
||||
gap: 'var(--bl-space-2, 8px)',
|
||||
padding,
|
||||
borderBottom: '1px solid var(--bl-border-subtle, rgba(0,0,0,0.06))',
|
||||
background: item.read ? 'transparent' : 'var(--bl-accent-muted, rgba(99,102,241,0.06))',
|
||||
...style,
|
||||
}}
|
||||
>
|
||||
{/* Unread dot */}
|
||||
<span
|
||||
aria-hidden
|
||||
style={{
|
||||
width: 8,
|
||||
height: 8,
|
||||
borderRadius: '50%',
|
||||
marginTop: 8,
|
||||
flexShrink: 0,
|
||||
background: item.read ? 'transparent' : tone.dot,
|
||||
transition: 'background 200ms ease',
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Avatar / kind icon */}
|
||||
<span
|
||||
aria-hidden
|
||||
style={{
|
||||
width: 28,
|
||||
height: 28,
|
||||
borderRadius: 'var(--bl-radius-pill, 999px)',
|
||||
background: tone.iconBg,
|
||||
color: tone.iconFg,
|
||||
display: 'inline-grid',
|
||||
placeItems: 'center',
|
||||
fontSize: 14,
|
||||
fontWeight: 700,
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
{item.icon ?? tone.glyph}
|
||||
</span>
|
||||
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
<button
|
||||
type="button"
|
||||
data-testid={`bl-inbox-item-trigger-${item.id}`}
|
||||
onClick={() => {
|
||||
if (!item.read) onMarkRead?.(item.id);
|
||||
onSelect?.(item);
|
||||
}}
|
||||
style={{
|
||||
display: 'block',
|
||||
width: '100%',
|
||||
textAlign: 'left',
|
||||
background: 'transparent',
|
||||
border: 'none',
|
||||
padding: 0,
|
||||
color: 'inherit',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
fontSize: dense ? '0.8rem' : '0.85rem',
|
||||
fontWeight: 600,
|
||||
color: 'var(--bl-text-primary, inherit)',
|
||||
}}
|
||||
>
|
||||
{item.title}
|
||||
</div>
|
||||
{item.body && (
|
||||
<div
|
||||
style={{
|
||||
fontSize: dense ? '0.7rem' : '0.75rem',
|
||||
color: 'var(--bl-text-secondary, #555)',
|
||||
marginTop: 2,
|
||||
whiteSpace: 'pre-wrap',
|
||||
}}
|
||||
>
|
||||
{item.body}
|
||||
</div>
|
||||
)}
|
||||
{item.createdAt && (
|
||||
<div
|
||||
style={{
|
||||
fontSize: '0.7rem',
|
||||
color: 'var(--bl-text-tertiary, #888)',
|
||||
marginTop: 4,
|
||||
}}
|
||||
>
|
||||
{relativeTime(item.createdAt)}
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
{item.actions && item.actions.length > 0 && (
|
||||
<div style={{ marginTop: 6, display: 'flex', gap: 6 }}>
|
||||
{item.actions.map(a => (
|
||||
<button
|
||||
key={a.id}
|
||||
type="button"
|
||||
onClick={a.onSelect}
|
||||
style={{
|
||||
fontSize: '0.7rem',
|
||||
padding: '2px 8px',
|
||||
borderRadius: 'var(--bl-radius-pill, 999px)',
|
||||
border: '1px solid var(--bl-border, rgba(0,0,0,0.12))',
|
||||
background: 'transparent',
|
||||
color: 'var(--bl-text-secondary, #555)',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
{a.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
||||
const TONE: Record<NotificationKind, { dot: string; iconBg: string; iconFg: string; glyph: string }> = {
|
||||
info: {
|
||||
dot: 'var(--bl-info, #38bdf8)',
|
||||
iconBg: 'var(--bl-info-muted, rgba(56,189,248,0.18))',
|
||||
iconFg: 'var(--bl-info, #38bdf8)',
|
||||
glyph: 'i',
|
||||
},
|
||||
success: {
|
||||
dot: 'var(--bl-success, #22c55e)',
|
||||
iconBg: 'var(--bl-success-muted, rgba(34,197,94,0.18))',
|
||||
iconFg: 'var(--bl-success, #22c55e)',
|
||||
glyph: '✓',
|
||||
},
|
||||
warning: {
|
||||
dot: 'var(--bl-warning, #f59e0b)',
|
||||
iconBg: 'var(--bl-warning-muted, rgba(245,158,11,0.18))',
|
||||
iconFg: 'var(--bl-warning, #f59e0b)',
|
||||
glyph: '!',
|
||||
},
|
||||
danger: {
|
||||
dot: 'var(--bl-danger, #ef4444)',
|
||||
iconBg: 'var(--bl-danger-muted, rgba(239,68,68,0.18))',
|
||||
iconFg: 'var(--bl-danger, #ef4444)',
|
||||
glyph: '✕',
|
||||
},
|
||||
mention: {
|
||||
dot: 'var(--bl-accent, #6366f1)',
|
||||
iconBg: 'var(--bl-accent-muted, rgba(99,102,241,0.18))',
|
||||
iconFg: 'var(--bl-accent, #6366f1)',
|
||||
glyph: '@',
|
||||
},
|
||||
};
|
||||
|
||||
function relativeTime(input: string | Date): string {
|
||||
const d = typeof input === 'string' ? new Date(input) : input;
|
||||
const diff = (Date.now() - d.getTime()) / 1000;
|
||||
if (diff < 60) return 'just now';
|
||||
if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
|
||||
if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
|
||||
if (diff < 86400 * 7) return `${Math.floor(diff / 86400)}d ago`;
|
||||
return d.toLocaleDateString();
|
||||
}
|
||||
268
packages/notifications-ui/src/NotificationCenter.tsx
Normal file
268
packages/notifications-ui/src/NotificationCenter.tsx
Normal file
@ -0,0 +1,268 @@
|
||||
import {
|
||||
useEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
type CSSProperties,
|
||||
type ReactNode,
|
||||
} from 'react';
|
||||
import { InboxItem } from './InboxItem.js';
|
||||
import type { NotificationItem } from './types.js';
|
||||
|
||||
export interface NotificationCenterProps {
|
||||
items: NotificationItem[];
|
||||
/** Cap the badge to "9+" once unread count exceeds this. Default 9. */
|
||||
badgeCap?: number;
|
||||
/** Filter tabs to render. Default ['all', 'unread', 'mentions']. */
|
||||
tabs?: Array<'all' | 'unread' | 'mentions'>;
|
||||
/** Called when the user clicks an item. */
|
||||
onSelect?: (item: NotificationItem) => void;
|
||||
/** Called when the user marks ONE item read. */
|
||||
onMarkRead?: (id: string) => void;
|
||||
/** Called when the user marks ALL read. */
|
||||
onMarkAllRead?: () => void;
|
||||
/** Render slot at the bottom — typically a "Settings" link. */
|
||||
footer?: ReactNode;
|
||||
/** Override the bell trigger glyph. Default '🔔'. */
|
||||
triggerGlyph?: ReactNode;
|
||||
ariaLabel?: string;
|
||||
className?: string;
|
||||
style?: CSSProperties;
|
||||
}
|
||||
|
||||
/**
|
||||
* `<NotificationCenter>` — bell trigger + dropdown inbox with tabs.
|
||||
* Drop it next to your user menu; pass `items` + handlers and you're
|
||||
* done. Closes on outside click and Escape.
|
||||
*/
|
||||
export function NotificationCenter({
|
||||
items,
|
||||
badgeCap = 9,
|
||||
tabs = ['all', 'unread', 'mentions'],
|
||||
onSelect,
|
||||
onMarkRead,
|
||||
onMarkAllRead,
|
||||
footer,
|
||||
triggerGlyph = '🔔',
|
||||
ariaLabel = 'Notifications',
|
||||
className,
|
||||
style,
|
||||
}: NotificationCenterProps) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [tab, setTab] = useState<'all' | 'unread' | 'mentions'>(tabs[0] ?? 'all');
|
||||
const rootRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const unread = useMemo(() => items.filter(i => !i.read).length, [items]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
const onDoc = (e: MouseEvent) => {
|
||||
if (!rootRef.current?.contains(e.target as Node)) setOpen(false);
|
||||
};
|
||||
const onKey = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') setOpen(false);
|
||||
};
|
||||
document.addEventListener('mousedown', onDoc);
|
||||
document.addEventListener('keydown', onKey);
|
||||
return () => {
|
||||
document.removeEventListener('mousedown', onDoc);
|
||||
document.removeEventListener('keydown', onKey);
|
||||
};
|
||||
}, [open]);
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
if (tab === 'unread') return items.filter(i => !i.read);
|
||||
if (tab === 'mentions') return items.filter(i => i.kind === 'mention');
|
||||
return items;
|
||||
}, [items, tab]);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={rootRef}
|
||||
data-testid="bl-notification-center"
|
||||
className={className}
|
||||
style={{ position: 'relative', display: 'inline-block', ...style }}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
data-testid="bl-notification-trigger"
|
||||
aria-haspopup="dialog"
|
||||
aria-expanded={open}
|
||||
aria-label={ariaLabel}
|
||||
onClick={() => setOpen(o => !o)}
|
||||
style={{
|
||||
position: 'relative',
|
||||
width: 36,
|
||||
height: 36,
|
||||
display: 'inline-grid',
|
||||
placeItems: 'center',
|
||||
background: 'transparent',
|
||||
border: '1px solid var(--bl-border, rgba(0,0,0,0.08))',
|
||||
borderRadius: 'var(--bl-radius-pill, 999px)',
|
||||
color: 'var(--bl-text-primary, inherit)',
|
||||
fontSize: 16,
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
{triggerGlyph}
|
||||
{unread > 0 && (
|
||||
<span
|
||||
data-testid="bl-notification-badge"
|
||||
aria-hidden
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: -4,
|
||||
right: -4,
|
||||
minWidth: 18,
|
||||
height: 18,
|
||||
padding: '0 4px',
|
||||
borderRadius: 'var(--bl-radius-pill, 999px)',
|
||||
background: 'var(--bl-danger, #ef4444)',
|
||||
color: 'var(--bl-danger-foreground, #fff)',
|
||||
fontSize: 10,
|
||||
fontWeight: 700,
|
||||
display: 'inline-grid',
|
||||
placeItems: 'center',
|
||||
border: '2px solid var(--bl-surface-card, #fff)',
|
||||
}}
|
||||
>
|
||||
{unread > badgeCap ? `${badgeCap}+` : unread}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
<div
|
||||
role="dialog"
|
||||
aria-label={ariaLabel}
|
||||
data-testid="bl-notification-panel"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 'calc(100% + 8px)',
|
||||
right: 0,
|
||||
zIndex: 100,
|
||||
width: 360,
|
||||
maxHeight: 480,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
background: 'var(--bl-surface-card, #fff)',
|
||||
border: '1px solid var(--bl-border, rgba(0,0,0,0.12))',
|
||||
borderRadius: 'var(--bl-radius-card, 12px)',
|
||||
boxShadow: '0 16px 40px rgba(0,0,0,0.25)',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
{/* Header */}
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
padding: 'var(--bl-space-3, 12px) var(--bl-space-4, 16px)',
|
||||
borderBottom: '1px solid var(--bl-border-subtle, rgba(0,0,0,0.06))',
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: '0.95rem', fontWeight: 700 }}>Inbox</div>
|
||||
{unread > 0 && onMarkAllRead && (
|
||||
<button
|
||||
type="button"
|
||||
data-testid="bl-notification-mark-all"
|
||||
onClick={onMarkAllRead}
|
||||
style={{
|
||||
fontSize: '0.75rem',
|
||||
color: 'var(--bl-accent, #6366f1)',
|
||||
background: 'transparent',
|
||||
border: 'none',
|
||||
cursor: 'pointer',
|
||||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
Mark all read
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
{tabs.length > 1 && (
|
||||
<div
|
||||
role="tablist"
|
||||
style={{
|
||||
display: 'flex',
|
||||
gap: 4,
|
||||
padding: 'var(--bl-space-2, 8px) var(--bl-space-3, 12px) 0',
|
||||
}}
|
||||
>
|
||||
{tabs.map(t => (
|
||||
<button
|
||||
key={t}
|
||||
type="button"
|
||||
role="tab"
|
||||
aria-selected={tab === t}
|
||||
data-testid={`bl-notification-tab-${t}`}
|
||||
onClick={() => setTab(t)}
|
||||
style={{
|
||||
padding: '4px 10px',
|
||||
fontSize: '0.75rem',
|
||||
borderRadius: 'var(--bl-radius-pill, 999px)',
|
||||
border: 'none',
|
||||
background:
|
||||
tab === t
|
||||
? 'var(--bl-accent-muted, rgba(99,102,241,0.14))'
|
||||
: 'transparent',
|
||||
color:
|
||||
tab === t
|
||||
? 'var(--bl-accent, #6366f1)'
|
||||
: 'var(--bl-text-tertiary, #888)',
|
||||
fontWeight: tab === t ? 700 : 500,
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
{t === 'all' ? 'All' : t === 'unread' ? `Unread (${unread})` : 'Mentions'}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* List */}
|
||||
<div style={{ flex: 1, overflowY: 'auto', maxHeight: 360 }}>
|
||||
{filtered.length === 0 ? (
|
||||
<div
|
||||
data-testid="bl-notification-empty"
|
||||
style={{
|
||||
padding: 'var(--bl-space-4, 16px)',
|
||||
textAlign: 'center',
|
||||
color: 'var(--bl-text-tertiary, #888)',
|
||||
fontSize: '0.85rem',
|
||||
}}
|
||||
>
|
||||
{tab === 'unread' ? "You're all caught up." : 'Nothing here yet.'}
|
||||
</div>
|
||||
) : (
|
||||
filtered.map(item => (
|
||||
<InboxItem
|
||||
key={item.id}
|
||||
item={item}
|
||||
onSelect={onSelect}
|
||||
onMarkRead={onMarkRead}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
{footer && (
|
||||
<div
|
||||
style={{
|
||||
padding: 'var(--bl-space-2, 8px) var(--bl-space-3, 12px)',
|
||||
borderTop: '1px solid var(--bl-border-subtle, rgba(0,0,0,0.06))',
|
||||
fontSize: '0.75rem',
|
||||
color: 'var(--bl-text-secondary, #555)',
|
||||
}}
|
||||
>
|
||||
{footer}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,178 @@
|
||||
import { describe, it, expect, beforeEach, vi } from 'vitest';
|
||||
import { cleanup, fireEvent, render, screen } from '@testing-library/react';
|
||||
import { NotificationCenter } from '../NotificationCenter.js';
|
||||
import { InboxItem } from '../InboxItem.js';
|
||||
import { BannerStack } from '../BannerStack.js';
|
||||
import { Announcement } from '../Announcement.js';
|
||||
import type { BannerItem, NotificationItem } from '../types.js';
|
||||
|
||||
const NOW = new Date();
|
||||
const ITEMS: NotificationItem[] = [
|
||||
{ id: 'a', title: 'Build succeeded', kind: 'success', read: false, createdAt: NOW },
|
||||
{ id: 'b', title: '@you in code review', kind: 'mention', read: false, createdAt: NOW },
|
||||
{ id: 'c', title: 'Billing reminder', kind: 'warning', read: true, createdAt: NOW },
|
||||
];
|
||||
|
||||
describe('NotificationCenter', () => {
|
||||
beforeEach(() => cleanup());
|
||||
|
||||
it('renders trigger with unread badge', () => {
|
||||
render(<NotificationCenter items={ITEMS} />);
|
||||
expect(screen.getByTestId('bl-notification-trigger')).toBeDefined();
|
||||
expect(screen.getByTestId('bl-notification-badge').textContent).toBe('2');
|
||||
});
|
||||
|
||||
it('caps badge at badgeCap with "+"', () => {
|
||||
const many: NotificationItem[] = Array.from({ length: 15 }, (_, i) => ({
|
||||
id: `n${i}`,
|
||||
title: `Item ${i}`,
|
||||
read: false,
|
||||
}));
|
||||
render(<NotificationCenter items={many} badgeCap={9} />);
|
||||
expect(screen.getByTestId('bl-notification-badge').textContent).toBe('9+');
|
||||
});
|
||||
|
||||
it('opens dropdown on trigger click and shows items', () => {
|
||||
render(<NotificationCenter items={ITEMS} />);
|
||||
fireEvent.click(screen.getByTestId('bl-notification-trigger'));
|
||||
expect(screen.getByTestId('bl-notification-panel')).toBeDefined();
|
||||
expect(screen.getByText('Build succeeded')).toBeDefined();
|
||||
});
|
||||
|
||||
it('switches to Unread tab and filters out read items', () => {
|
||||
render(<NotificationCenter items={ITEMS} />);
|
||||
fireEvent.click(screen.getByTestId('bl-notification-trigger'));
|
||||
fireEvent.click(screen.getByTestId('bl-notification-tab-unread'));
|
||||
expect(screen.getByText('Build succeeded')).toBeDefined();
|
||||
expect(screen.queryByText('Billing reminder')).toBeNull();
|
||||
});
|
||||
|
||||
it('Mentions tab shows only kind=mention', () => {
|
||||
render(<NotificationCenter items={ITEMS} />);
|
||||
fireEvent.click(screen.getByTestId('bl-notification-trigger'));
|
||||
fireEvent.click(screen.getByTestId('bl-notification-tab-mentions'));
|
||||
expect(screen.getByText('@you in code review')).toBeDefined();
|
||||
expect(screen.queryByText('Build succeeded')).toBeNull();
|
||||
});
|
||||
|
||||
it('mark-all-read button calls handler', () => {
|
||||
const onMarkAllRead = vi.fn();
|
||||
render(<NotificationCenter items={ITEMS} onMarkAllRead={onMarkAllRead} />);
|
||||
fireEvent.click(screen.getByTestId('bl-notification-trigger'));
|
||||
fireEvent.click(screen.getByTestId('bl-notification-mark-all'));
|
||||
expect(onMarkAllRead).toHaveBeenCalledOnce();
|
||||
});
|
||||
|
||||
it('clicking an item fires onSelect + onMarkRead', () => {
|
||||
const onSelect = vi.fn();
|
||||
const onMarkRead = vi.fn();
|
||||
render(
|
||||
<NotificationCenter
|
||||
items={ITEMS}
|
||||
onSelect={onSelect}
|
||||
onMarkRead={onMarkRead}
|
||||
/>,
|
||||
);
|
||||
fireEvent.click(screen.getByTestId('bl-notification-trigger'));
|
||||
fireEvent.click(screen.getByTestId('bl-inbox-item-trigger-a'));
|
||||
expect(onSelect).toHaveBeenCalledOnce();
|
||||
expect(onMarkRead).toHaveBeenCalledWith('a');
|
||||
});
|
||||
|
||||
it('empty state when no items match the tab', () => {
|
||||
render(<NotificationCenter items={[]} />);
|
||||
fireEvent.click(screen.getByTestId('bl-notification-trigger'));
|
||||
expect(screen.getByTestId('bl-notification-empty')).toBeDefined();
|
||||
});
|
||||
|
||||
it('Escape closes the dropdown', () => {
|
||||
render(<NotificationCenter items={ITEMS} />);
|
||||
fireEvent.click(screen.getByTestId('bl-notification-trigger'));
|
||||
fireEvent.keyDown(document, { key: 'Escape' });
|
||||
expect(screen.queryByTestId('bl-notification-panel')).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe('InboxItem', () => {
|
||||
beforeEach(() => cleanup());
|
||||
|
||||
it('renders title, kind data-attr, and tone glyph', () => {
|
||||
render(<InboxItem item={{ id: 'x', title: 'Hello', kind: 'warning' }} />);
|
||||
expect(screen.getByText('Hello')).toBeDefined();
|
||||
expect(screen.getByTestId('bl-inbox-item-x').getAttribute('data-kind')).toBe('warning');
|
||||
});
|
||||
it('emits data-read=false when item.read is falsy', () => {
|
||||
render(<InboxItem item={{ id: 'x', title: 'X', read: false }} />);
|
||||
expect(screen.getByTestId('bl-inbox-item-x').getAttribute('data-read')).toBe('false');
|
||||
});
|
||||
});
|
||||
|
||||
const BANNERS: BannerItem[] = [
|
||||
{ id: 'b1', kind: 'announcement', title: 'New feature', body: 'try it' },
|
||||
{ id: 'b2', kind: 'warning', title: 'Maintenance Friday' },
|
||||
{ id: 'b3', kind: 'info', title: 'Tip', cta: { label: 'Learn more', href: '#' } },
|
||||
{ id: 'b4', kind: 'info', title: 'Extra' },
|
||||
];
|
||||
|
||||
describe('BannerStack', () => {
|
||||
beforeEach(() => cleanup());
|
||||
|
||||
it('renders all banners up to maxVisible and collapses the rest', () => {
|
||||
render(<BannerStack banners={BANNERS} maxVisible={3} />);
|
||||
expect(screen.getByTestId('bl-banner-b1')).toBeDefined();
|
||||
expect(screen.getByTestId('bl-banner-b3')).toBeDefined();
|
||||
expect(screen.queryByTestId('bl-banner-b4')).toBeNull();
|
||||
expect(screen.getByTestId('bl-banner-expand').textContent).toBe('+1 more');
|
||||
});
|
||||
|
||||
it('expand button shows hidden banners', () => {
|
||||
render(<BannerStack banners={BANNERS} maxVisible={2} />);
|
||||
fireEvent.click(screen.getByTestId('bl-banner-expand'));
|
||||
expect(screen.getByTestId('bl-banner-b3')).toBeDefined();
|
||||
expect(screen.getByTestId('bl-banner-b4')).toBeDefined();
|
||||
});
|
||||
|
||||
it('dismiss button fires onDismiss with id', () => {
|
||||
const onDismiss = vi.fn();
|
||||
render(<BannerStack banners={BANNERS} onDismiss={onDismiss} />);
|
||||
fireEvent.click(screen.getByTestId('bl-banner-dismiss-b1'));
|
||||
expect(onDismiss).toHaveBeenCalledWith('b1');
|
||||
});
|
||||
|
||||
it('cta callback overrides href navigation', () => {
|
||||
const onSelect = vi.fn();
|
||||
render(
|
||||
<BannerStack
|
||||
banners={[
|
||||
{
|
||||
id: 'x',
|
||||
kind: 'info',
|
||||
title: 'T',
|
||||
cta: { label: 'Go', href: '#', onSelect },
|
||||
},
|
||||
]}
|
||||
/>,
|
||||
);
|
||||
fireEvent.click(screen.getByTestId('bl-banner-cta-x'));
|
||||
expect(onSelect).toHaveBeenCalledOnce();
|
||||
});
|
||||
|
||||
it('renders nothing when banners is empty', () => {
|
||||
const { container } = render(<BannerStack banners={[]} />);
|
||||
expect(container.firstChild).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Announcement', () => {
|
||||
beforeEach(() => cleanup());
|
||||
it('renders tag + content + cta', () => {
|
||||
render(
|
||||
<Announcement tag="BETA" cta={{ label: 'Try', href: '#' }}>
|
||||
Streaming chat is here.
|
||||
</Announcement>,
|
||||
);
|
||||
expect(screen.getByText('BETA')).toBeDefined();
|
||||
expect(screen.getByText('Streaming chat is here.')).toBeDefined();
|
||||
expect(screen.getByTestId('bl-announcement-cta')).toBeDefined();
|
||||
});
|
||||
});
|
||||
27
packages/notifications-ui/src/index.ts
Normal file
27
packages/notifications-ui/src/index.ts
Normal file
@ -0,0 +1,27 @@
|
||||
/**
|
||||
* @bytelyst/notifications-ui — Notification UI primitives (Wave 7 essentials).
|
||||
*
|
||||
* Exports (0.1.0):
|
||||
* <NotificationCenter> — bell trigger + dropdown inbox with tabs
|
||||
* <InboxItem> — single notification row
|
||||
* <BannerStack> — dismissible top-of-page strip
|
||||
* <Announcement> — inline "What's new" pill
|
||||
*/
|
||||
export { NotificationCenter } from './NotificationCenter.js';
|
||||
export type { NotificationCenterProps } from './NotificationCenter.js';
|
||||
|
||||
export { InboxItem } from './InboxItem.js';
|
||||
export type { InboxItemProps } from './InboxItem.js';
|
||||
|
||||
export { BannerStack } from './BannerStack.js';
|
||||
export type { BannerStackProps } from './BannerStack.js';
|
||||
|
||||
export { Announcement } from './Announcement.js';
|
||||
export type { AnnouncementProps } from './Announcement.js';
|
||||
|
||||
export type {
|
||||
BannerItem,
|
||||
BannerKind,
|
||||
NotificationItem,
|
||||
NotificationKind,
|
||||
} from './types.js';
|
||||
38
packages/notifications-ui/src/types.ts
Normal file
38
packages/notifications-ui/src/types.ts
Normal file
@ -0,0 +1,38 @@
|
||||
import type { ReactNode } from 'react';
|
||||
|
||||
export type NotificationKind = 'info' | 'success' | 'warning' | 'danger' | 'mention';
|
||||
|
||||
export interface NotificationItem {
|
||||
id: string;
|
||||
/** Headline rendered bold. */
|
||||
title: string;
|
||||
/** Optional body — supports plain text or arbitrary nodes. */
|
||||
body?: ReactNode;
|
||||
/** Visual variant. Default 'info'. */
|
||||
kind?: NotificationKind;
|
||||
/** ISO timestamp or Date — drives the relative-time label. */
|
||||
createdAt?: string | Date;
|
||||
/** Click target — when provided, the item becomes a button. */
|
||||
href?: string;
|
||||
/** Optional avatar / icon. */
|
||||
icon?: ReactNode;
|
||||
/** Read state. Drives the unread dot + count badge. */
|
||||
read?: boolean;
|
||||
/** Optional action buttons rendered at the bottom of the item. */
|
||||
actions?: Array<{ id: string; label: string; onSelect?: () => void }>;
|
||||
}
|
||||
|
||||
export type BannerKind = 'info' | 'success' | 'warning' | 'danger' | 'announcement';
|
||||
|
||||
export interface BannerItem {
|
||||
id: string;
|
||||
kind?: BannerKind;
|
||||
/** Required title. */
|
||||
title: ReactNode;
|
||||
/** Optional body. */
|
||||
body?: ReactNode;
|
||||
/** Optional CTA. */
|
||||
cta?: { label: string; href?: string; onSelect?: () => void };
|
||||
/** Dismissible by user. Default true. */
|
||||
dismissible?: boolean;
|
||||
}
|
||||
11
packages/notifications-ui/tsconfig.json
Normal file
11
packages/notifications-ui/tsconfig.json
Normal file
@ -0,0 +1,11 @@
|
||||
{
|
||||
"extends": "../../tsconfig.base.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "dist",
|
||||
"rootDir": "src",
|
||||
"lib": ["ES2022", "DOM"],
|
||||
"jsx": "react-jsx"
|
||||
},
|
||||
"include": ["src"],
|
||||
"exclude": ["src/**/*.test.ts", "src/**/*.test.tsx"]
|
||||
}
|
||||
2
packages/notifications-ui/vitest.config.ts
Normal file
2
packages/notifications-ui/vitest.config.ts
Normal file
@ -0,0 +1,2 @@
|
||||
import { defineConfig } from 'vitest/config';
|
||||
export default defineConfig({ test: { environment: 'happy-dom', pool: 'forks' } });
|
||||
Loading…
Reference in New Issue
Block a user