@a-type/ui 0.3.2 → 0.3.3

package/src/components/particles/particlesState.ts

@@ -0,0 +1,502 @@
+export class Particles {
+	private canvas: HTMLCanvasElement | null = null;
+	private ctx: CanvasRenderingContext2D | null = null;
+	private state: 'paused' | 'running' = 'paused';
+	private lastFrameTimestamp = 0;
+	private disabled = false;
+
+	// an object pool of Particles
+	private particles: Particle[];
+	private freeParticles: Particle[] = [];
+
+	// keep canvas render size the same as its actual size
+	private resizeObserver = new ResizeObserver((entries) => {
+		for (const entry of entries) {
+			const { width, height } = entry.contentRect;
+			if (this.canvas) {
+				this.canvas.width = width;
+				this.canvas.height = height;
+			}
+		}
+	});
+
+	constructor({ initialPoolSize }: { initialPoolSize: number }) {
+		// if prefers-reduced-motion is set, disable particles
+		this.disabled = window.matchMedia(
+			'(prefers-reduced-motion: reduce)',
+		).matches;
+		if (this.disabled) {
+			initialPoolSize = 0;
+		}
+		this.particles = new Array(initialPoolSize);
+		for (let i = 0; i < initialPoolSize; i++) {
+			this.particles[i] = new Particle();
+			this.freeParticles.push(this.particles[i]);
+		}
+	}
+
+	setCanvas = (canvas: HTMLCanvasElement | null) => {
+		if (this.disabled) {
+			return;
+		}
+
+		if (this.canvas) {
+			this.resizeObserver.unobserve(this.canvas);
+		}
+		this.canvas = canvas;
+		this.ctx = canvas ? canvas.getContext('2d') : null;
+		if (!canvas) {
+			this.pause();
+		} else {
+			this.resume();
+			this.resizeObserver.observe(canvas);
+		}
+	};
+
+	private resume = () => {
+		if (this.disabled) {
+			return;
+		}
+
+		this.state = 'running';
+		this.lastFrameTimestamp = performance.now();
+		requestAnimationFrame(this.draw);
+	};
+
+	private pause = () => {
+		this.state = 'paused';
+	};
+
+	private draw = (timestamp: number) => {
+		if (this.state === 'paused') {
+			return;
+		}
+		const ctx = this.ctx;
+
+		if (!ctx || !this.canvas) {
+			console.warn('No canvas context');
+			this.pause();
+			return;
+		}
+
+		const delta = timestamp - this.lastFrameTimestamp;
+
+		ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+
+		this.renderParticles(ctx, delta);
+
+		requestAnimationFrame(this.draw);
+		this.lastFrameTimestamp = timestamp;
+	};
+
+	private renderParticles = (ctx: CanvasRenderingContext2D, delta: number) => {
+		let freed = 0;
+		for (let i = 0; i < this.particles.length; i++) {
+			const particle = this.particles[i];
+			if (particle.render(ctx, delta)) {
+				particle.dispose();
+				this.freeParticles.push(particle);
+				freed++;
+			}
+		}
+		if (freed) {
+			console.log('Freed particles', freed);
+		}
+	};
+
+	addParticles = (spawn: ParticleSpawn) => {
+		// wrap in RAF because initializers often use element dimensions
+		requestAnimationFrame(() => {
+			if (this.freeParticles.length < spawn.count) {
+				this.extendPool(spawn.count - this.freeParticles.length);
+			}
+			for (let i = 0; i < spawn.count; i++) {
+				const particle = this.freeParticles.pop();
+				const initials = spawn.initializer(i);
+				if (!particle) {
+					throw new Error('Particle allocation failed');
+				}
+				particle.allocate(
+					initials.x,
+					initials.y,
+					initials.velocityX,
+					initials.velocityY,
+					initials.drag,
+					initials.lifespan,
+					spawn.behavior,
+				);
+			}
+			console.log('Allocated particles', spawn.count);
+		});
+	};
+
+	private extendPool = (size: number) => {
+		for (let i = 0; i < size; i++) {
+			const particle = new Particle();
+			this.particles.push(particle);
+			this.freeParticles.push(particle);
+		}
+	};
+
+	elementExplosion = elementExplosion;
+	windowBorderExplosion = windowBorderExplosion;
+}
+
+class Particle {
+	disposed = true;
+	lifetime = 0;
+	lifespan = 0;
+	x = -1;
+	y = -1;
+	behavior: ParticleBehavior = nullBehavior;
+	velocityX = 0;
+	velocityY = 0;
+	drag = 0;
+
+	constructor() {}
+
+	allocate = (
+		x: number,
+		y: number,
+		velocityX: number,
+		velocityY: number,
+		drag: number,
+		lifespan: number,
+		behavior: ParticleBehavior,
+	) => {
+		this.disposed = false;
+		this.lifetime = 0;
+		this.lifespan = lifespan;
+		this.x = x;
+		this.y = y;
+		this.velocityX = velocityX;
+		this.velocityY = velocityY;
+		this.drag = drag;
+		this.behavior = behavior;
+	};
+
+	dispose = () => {
+		this.disposed = true;
+	};
+
+	render = (ctx: CanvasRenderingContext2D, delta: number) => {
+		if (this.disposed) {
+			return;
+		}
+		this.lifetime += delta;
+		this.x += this.velocityX * delta;
+		this.y += this.velocityY * delta;
+		this.velocityX *= 1 - this.drag * delta;
+		this.velocityY *= 1 - this.drag * delta;
+		this.behavior(ctx, this.x, this.y, this.lifetime, this.lifespan);
+		return this.lifetime >= this.lifespan;
+	};
+}
+
+type ParticleBehavior = (
+	ctx: CanvasRenderingContext2D,
+	x: number,
+	y: number,
+	lifetime: number,
+	lifespan: number,
+) => void;
+const nullBehavior = () => {};
+
+type ParticleSpawn = {
+	count: number;
+	behavior: ParticleBehavior;
+	initializer: ParticleInitializer;
+};
+type ParticleInitializer = (index: number) => {
+	x: number;
+	y: number;
+	lifespan: number;
+	velocityX: number;
+	velocityY: number;
+	drag: number;
+};
+
+export function createCircleParticles({
+	count,
+	startRadius = 4,
+	endRadius = 0,
+	initializer,
+	color = YELLOW,
+}: {
+	count: number;
+	startRadius?: number;
+	endRadius?: number;
+	initializer: ParticleInitializer;
+	color?: Color | [Color, Color];
+}): ParticleSpawn {
+	const colorMixer = Array.isArray(color)
+		? colorInterpolate(color)
+		: colorInterpolate([color, color]);
+	return {
+		count,
+		behavior: (ctx, x, y, lifetime, lifespan) => {
+			const lifetimePercentage = Math.max(0, Math.min(1, lifetime / lifespan));
+			const finalColor = colorMixer(lifetimePercentage);
+			const radius = Math.max(
+				0,
+				startRadius + (endRadius - startRadius) * lifetimePercentage,
+			);
+			ctx.beginPath();
+			ctx.fillStyle = colorToString(finalColor);
+			ctx.arc(x, y, radius, 0, 2 * Math.PI);
+			ctx.fill();
+		},
+		initializer,
+	};
+}
+
+function fuzz(value: number, fuzz: number) {
+	return value + (Math.random() - 0.5) * fuzz;
+}
+
+type BorderName = 'top' | 'right' | 'bottom' | 'left';
+export const createElementBorderInitializer = ({
+	element,
+	borders = ['top', 'right', 'bottom', 'left'],
+	force = 0.1,
+	drag = 0.001,
+	lifespan = 2000,
+	forceFuzz = 0.05,
+	angleFuzz = 0.02,
+}: {
+	element: HTMLElement;
+	borders?: BorderName[];
+	force?: number;
+	drag?: number;
+	lifespan?: number;
+	forceFuzz?: number;
+	angleFuzz?: number;
+}): ParticleInitializer => {
+	// randomly spawn particles around the border of the element by 'unwrapping' the selected borders as
+	// a single theoretical line, picking a random point on the line, and then converting that point
+	// back to a point on the border.
+	return (index: number) => {
+		const rect = element.getBoundingClientRect();
+
+		const borderLengths = borders.map((border) => {
+			switch (border) {
+				case 'top':
+				case 'bottom':
+					return rect.width;
+				case 'left':
+				case 'right':
+					return rect.height;
+			}
+		});
+		const totalBorderLength = borderLengths.reduce((a, b) => a + b, 0);
+		const randomPoint = Math.random() * totalBorderLength;
+		let borderIndex = 0;
+		let borderLength = borderLengths[0];
+		while (randomPoint > borderLength) {
+			borderIndex++;
+			borderLength += borderLengths[borderIndex];
+		}
+		const border = borders[borderIndex];
+		const borderOffset =
+			randomPoint - (borderLength - borderLengths[borderIndex]);
+
+		let x = 0;
+		let y = 0;
+		let velocityX = 0;
+		let velocityY = 0;
+		switch (border) {
+			case 'top':
+				x = rect.left + borderOffset;
+				y = rect.top;
+				break;
+			case 'right':
+				x = rect.right;
+				y = rect.top + borderOffset;
+				break;
+			case 'bottom':
+				x = rect.left + borderOffset;
+				y = rect.bottom;
+				break;
+			case 'left':
+				x = rect.left;
+				y = rect.top + borderOffset;
+				break;
+		}
+
+		// velocity is away from the center of the element
+		const center = {
+			x: rect.left + rect.width / 2,
+			y: rect.top + rect.height / 2,
+		};
+
+		// special case: width/height is 0
+		let angle =
+			rect.width === 0 || rect.height === 0
+				? Math.random() * (Math.PI * 2)
+				: Math.atan2(y - center.y, x - center.x);
+		angle = fuzz(angle, angleFuzz);
+
+		const totalForce = fuzz(force, forceFuzz);
+		velocityX = Math.cos(angle) * totalForce;
+		velocityY = Math.sin(angle) * totalForce;
+
+		return { x, y, velocityX, velocityY, drag, lifespan };
+	};
+};
+
+export type Color = {
+	space: 'rgb';
+	values: [number, number, number];
+	opacity: number;
+};
+
+const YELLOW: Color = {
+	space: 'rgb',
+	values: [249, 231, 148],
+	opacity: 1,
+};
+const TRANSPARENT: Color = {
+	space: 'rgb',
+	values: [255, 255, 255],
+	opacity: 0,
+};
+
+export const elementExplosion = ({
+	element,
+	color = [YELLOW, TRANSPARENT],
+	borders,
+	lifespan,
+	force,
+	drag,
+	forceFuzz,
+	angleFuzz,
+	...rest
+}: {
+	element: HTMLElement;
+	color?: Color | [Color, Color];
+	count: number;
+	startRadius?: number;
+	endRadius?: number;
+	borders?: BorderName[];
+	lifespan?: number;
+	force?: number;
+	drag?: number;
+	forceFuzz?: number;
+	angleFuzz?: number;
+}) =>
+	createCircleParticles({
+		initializer: createElementBorderInitializer({
+			element,
+			borders,
+			lifespan,
+			force,
+			drag,
+			forceFuzz,
+			angleFuzz,
+		}),
+		color,
+		...rest,
+	});
+
+export const createWindowBorderInitializer = ({
+	force = 0.1,
+	drag = 0.001,
+	border = 'top',
+	lifespan = 2000,
+}: {
+	force?: number;
+	drag?: number;
+	border?: BorderName;
+	lifespan?: number;
+}): ParticleInitializer => {
+	return (index: number) => {
+		const rect = document.body.getBoundingClientRect();
+		let x = 0;
+		let y = 0;
+		let velocityX = 0;
+		let velocityY = 0;
+		switch (border) {
+			case 'top':
+				velocityY = force * (Math.random() + 0.25);
+				x = rect.left + Math.random() * rect.width;
+				y = rect.top;
+				break;
+			case 'right':
+				velocityX = -force * (Math.random() + 0.25);
+				x = rect.right;
+				y = rect.top + Math.random() * rect.height;
+				break;
+			case 'bottom':
+				velocityY = -force * (Math.random() + 0.25);
+				x = rect.left + Math.random() * rect.width;
+				y = rect.bottom;
+				break;
+			case 'left':
+				velocityX = force * (Math.random() + 0.25);
+				x = rect.left;
+				y = rect.top + Math.random() * rect.height;
+				break;
+		}
+		return { x, y, velocityX, velocityY, drag, lifespan };
+	};
+};
+
+export const windowBorderExplosion = ({
+	color = [YELLOW, TRANSPARENT],
+	border = 'top',
+	lifespan,
+	...rest
+}: {
+	color?: Color | [Color, Color];
+	count: number;
+	startRadius?: number;
+	endRadius?: number;
+	border?: BorderName;
+	lifespan?: number;
+}) =>
+	createCircleParticles({
+		initializer: createWindowBorderInitializer({
+			border,
+			lifespan,
+		}),
+		color,
+		...rest,
+	});
+
+function colorInterpolate(colors: [Color, Color]) {
+	return function interpolate(value: number): Color {
+		if (colors[0].space !== colors[1].space) {
+			throw new Error('Cannot interpolate between colors of different spaces');
+		}
+		if (colors[0].space === 'rgb') {
+			return interpolateRgb(colors[0], colors[1], value);
+		} else {
+			throw new Error(`Unsupported color space ${colors[0].space}`);
+		}
+	};
+}
+
+function interpolateRgb(color1: Color, color2: Color, value: number): Color {
+	const result: Color = {
+		space: 'rgb' as const,
+		values: [0, 0, 0],
+		opacity: 0,
+	};
+	for (let i = 0; i < 3; i++) {
+		result.values[i] =
+			color1.values[i] + (color2.values[i] - color1.values[i]) * value;
+	}
+	result.opacity = color1.opacity + (color2.opacity - color1.opacity) * value;
+	return result;
+}
+
+function colorToString(color: Color): string {
+	if (color.space === 'rgb') {
+		return colorRgbToString(color);
+	}
+	throw new Error(`Unsupported color space ${color.space}`);
+}
+
+function colorRgbToString(color: Color) {
+	return `rgb(${color.values[0]}, ${color.values[1]}, ${color.values[2]})`;
+}

package/src/components/particles.ts

@@ -0,0 +1 @@
+export * from './particles/index.js';

package/src/components/peek/Peek.tsx

@@ -0,0 +1,74 @@
+import { debounce } from '@a-type/utils';
+import classNames from 'classnames';
+import { ReactNode, useEffect, useId, useMemo, useRef, useState } from 'react';
+import { useSize } from '../../hooks/useSize.js';
+import { useToggle } from '../../hooks/useToggle.js';
+
+export interface PeekProps {
+  peekHeight?: number;
+  children: ReactNode;
+  className?: string;
+}
+
+export function Peek({ peekHeight = 120, children, className }: PeekProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [isPeekable, setIsPeekable] = useState(false);
+  const contentRef = useSize<HTMLDivElement>(
+    useMemo(
+      () =>
+        debounce(({ height }) => {
+          setIsPeekable(height > peekHeight);
+          if (containerRef.current) {
+            containerRef.current.style.setProperty(
+              '--collapsible-height',
+              `${height}px`,
+            );
+          }
+        }, 300),
+      [],
+    ),
+  );
+
+  const [open, toggle] = useToggle(false);
+
+  useEffect(() => {
+    if (containerRef.current) {
+      containerRef.current.style.setProperty(
+        '--peek-height',
+        `${peekHeight}px`,
+      );
+    }
+  }, [peekHeight]);
+
+  const id = useId();
+
+  return (
+    <div
+      className={classNames(
+        'relative animate-ease-default animate-forwards overflow-hidden [&[data-state=closed]]:(animate-keyframes-peek-close animate-duration-300 max-h-[var(--peek-height,120px)]) [&[data-state=open]]:(animate-keyframes-peek-open animate-duration-600)',
+        className,
+      )}
+      ref={containerRef}
+      data-state={isPeekable ? (open ? 'open' : 'closed') : undefined}
+    >
+      <div ref={contentRef} id={id}>
+        {children}
+      </div>
+      {isPeekable && (
+        <button
+          data-state={open ? 'open' : 'closed'}
+          className={classNames(
+            'h-80px absolute bottom-0 z-1 bg-transparent border-none w-full cursor-pointer border-b border-solid border-white',
+            'focus-visible:(outline-none bg-gradient-to-b from-transparent to-primary-wash border-b border-solid border-primary',
+            'after:(content-["-_tap_to_expand_-"] p-3 color-gray9 text-xs flex flex-col justify-end items-center absolute inset-0 top-auto h-80px bg-gradient-to-b from-transparent to-white)',
+            'after:[&[data-state=open]]:content-["-_tap_to_collapse_-"]',
+          )}
+          onClick={toggle}
+          aria-label="Toggle show description"
+          aria-expanded={open}
+          aria-controls={id}
+        />
+      )}
+    </div>
+  );
+}

package/src/components/peek/index.ts

@@ -0,0 +1 @@
+export * from './Peek.js';

package/src/components/peek.ts

@@ -0,0 +1 @@
+export * from './peek/index.js';

package/src/components/popover/Popover.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { ComponentPropsWithoutRef, forwardRef } from 'react';
+
+import { withClassName } from '../../hooks/withClassName.js';
+import classNames from 'classnames';
+
+const StyledContent = withClassName(
+	PopoverPrimitive.Content,
+	'layer-components:(rounded-xl min-w-120px bg-white z-menu shadow-lg border-default op-0 display-none max-w-90vw)',
+	'will-change-transform',
+	'layer-components:transform-origin-[var(--radix-popover-transform-origin)]',
+	'layer-components:[&[data-state=open]]:animate-popover-in',
+	'layer-components:[&[data-state=closed]]:animate-popover-out',
+	'important:motion-reduce:animate-none',
+	'layer-components:(max-h-[var(--radix-popover-content-available-height)] overflow-y-auto)',
+	'layer-components:[&[data-state=open]]:(opacity-100 flex flex-col)',
+	'layer-components:[&[data-state=closed]]:pointer-events-none',
+);
+
+const StyledArrow = withClassName(
+	PopoverPrimitive.Arrow,
+	'fill-white stroke-black',
+);
+
+const StyledClose = withClassName(
+	PopoverPrimitive.Close,
+	'[all:unset] [font-family:inherit] rounded-full h-25px w-25px inline-flex items-center justify-center color-dark-blend absolute top-5px right-5px hover:bg-light-blend focus:shadow-focus',
+);
+
+// Exports
+export const Popover = PopoverPrimitive.Root;
+export const PopoverTrigger = PopoverPrimitive.Trigger;
+export const PopoverArrow = StyledArrow;
+export const PopoverClose = StyledClose;
+export const PopoverAnchor = PopoverPrimitive.Anchor;
+
+export const PopoverContent = forwardRef<
+	HTMLDivElement,
+	ComponentPropsWithoutRef<typeof StyledContent> & {
+		disableBlur?: boolean;
+		containerClassName?: string;
+		padding?: 'none' | 'default';
+		radius?: 'none' | 'default' | 'md';
+	}
+>(function PopoverContent(
+	{
+		children,
+		forceMount,
+		disableBlur,
+		containerClassName,
+		className,
+		radius = 'default',
+		padding = 'default',
+		...props
+	},
+	ref,
+) {
+	return (
+		<PopoverPrimitive.Portal
+			forceMount={forceMount}
+			className={containerClassName}
+		>
+			<StyledContent
+				{...props}
+				forceMount={forceMount}
+				ref={ref}
+				className={classNames(
+					{
+						'layer-variants:important:p-0': padding === 'none',
+						'layer-variants:p-5': padding === 'default',
+						'layer-variants:rounded-none': radius === 'none',
+						'layer-variants:rounded-lg': radius === 'default',
+						'layer-variants:rounded-md': radius === 'md',
+					},
+					className,
+				)}
+			>
+				{children}
+			</StyledContent>
+		</PopoverPrimitive.Portal>
+	);
+});

package/src/components/popover/index.ts

@@ -0,0 +1 @@
+export * from './Popover.js';

package/src/components/popover.ts

@@ -0,0 +1 @@
+export * from './popover/index.js';

package/src/components/relativeTime/RelativeTime.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import { useEffect, useState, useMemo } from 'react';
+import { formatDistanceToNowStrict } from 'date-fns';
+import { shortenTimeUnits } from '@a-type/utils';
+
+export interface RelativeTimeProps {
+	value: number;
+	abbreviate?: boolean;
+}
+
+function formatDistanceToNow(date: Date) {
+	const now = Date.now();
+	if (Math.abs(date.getTime() - now) < 1000) {
+		return 'just now';
+	}
+	return (
+		formatDistanceToNowStrict(date) +
+		(date.getTime() < now ? ' ago' : ' from now')
+	);
+}
+
+export function RelativeTime({ value, abbreviate }: RelativeTimeProps) {
+	const asDate = useMemo(() => new Date(value), [value]);
+	const [time, setTime] = useState(() =>
+		abbreviate
+			? shortenTimeUnits(formatDistanceToNow(asDate))
+			: formatDistanceToNow(asDate),
+	);
+
+	useEffect(() => {
+		const interval = setInterval(() => {
+			setTime(
+				abbreviate
+					? shortenTimeUnits(formatDistanceToNow(asDate))
+					: formatDistanceToNow(asDate),
+			);
+		}, 60 * 1000);
+		return () => clearInterval(interval);
+	}, [asDate, abbreviate]);
+
+	return <>{time}</>;
+}