@a-type/ui 0.1.2 → 0.1.3

package/src/components/particles/particlesState.ts

@@ -1,449 +0,0 @@
-import { MouseEvent } from 'react';
-import mixColor from 'color-interpolate';
-
-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 = 'red',
-}: {
-	count: number;
-	startRadius?: number;
-	endRadius?: number;
-	initializer: ParticleInitializer;
-	color?: string | [string, string];
-}): ParticleSpawn {
-	const colorMixer =
-		typeof color === 'string' ? mixColor([color, color]) : mixColor(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 = 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 const elementExplosion = ({
-	element,
-	color = ['#f9e794', '#f9e79400'],
-	borders,
-	lifespan,
-	force,
-	drag,
-	forceFuzz,
-	angleFuzz,
-	...rest
-}: {
-	element: HTMLElement;
-	color?: string | [string, string];
-	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 = ['#f9e794', '#f9e79400'],
-	border = 'top',
-	lifespan,
-	...rest
-}: {
-	color?: string | [string, string];
-	count: number;
-	startRadius?: number;
-	endRadius?: number;
-	border?: BorderName;
-	lifespan?: number;
-}) =>
-	createCircleParticles({
-		initializer: createWindowBorderInitializer({
-			border,
-			lifespan,
-		}),
-		color,
-		...rest,
-	});

package/src/components/peek/Peek.tsx

@@ -1,74 +0,0 @@
-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.jsx';
-
-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/popover/Popover.tsx

@@ -1,88 +0,0 @@
-'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',
-	'animate-ease-springy animate-duration-200',
-	'important:motion-reduce:animate-none',
-	'[&[data-state=open][data-side=top]]:animate-name-fade-in-down',
-	'[&[data-state=open][data-side=right]]:animate-name-fade-in-left',
-	'[&[data-state=open][data-side=bottom]]:animate-name-fade-in-up',
-	'[&[data-state=open][data-side=left]]:animate-name-fade-in-right',
-	'[&[data-state=closed][data-side=top]]:animate-name-fade-out-up',
-	'[&[data-state=closed][data-side=right]]:animate-name-fade-out-right',
-	'[&[data-state=closed][data-side=bottom]]:animate-name-fade-out-down',
-	'[&[data-state=closed][data-side=left]]:animate-name-fade-out-left',
-	'layer-components:[&[data-state=open]]:(opacity-100 flex flex-col)',
-);
-
-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/relativeTime/RelativeTime.tsx

@@ -1,32 +0,0 @@
-'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;
-}
-
-export function RelativeTime({ value, abbreviate }: RelativeTimeProps) {
-  const asDate = useMemo(() => new Date(value), [value]);
-  const [time, setTime] = useState(() =>
-    abbreviate
-      ? shortenTimeUnits(formatDistanceToNowStrict(asDate))
-      : formatDistanceToNowStrict(asDate),
-  );
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setTime(
-        abbreviate
-          ? shortenTimeUnits(formatDistanceToNowStrict(asDate))
-          : formatDistanceToNowStrict(asDate),
-      );
-    }, 60 * 1000);
-    return () => clearInterval(interval);
-  }, [asDate, abbreviate]);
-
-  return <>{time}</>;
-}

package/src/components/richEditor/RichEditor.tsx

@@ -1,33 +0,0 @@
-'use client';
-
-import classNames from 'classnames';
-import { forwardRef, lazy } from 'react';
-
-const EditorContent = lazy(() => import('./EditorContent.js'));
-
-export interface RichEditorProps {
-	editor: any;
-	className?: string;
-	readOnly?: boolean;
-}
-
-export const RichEditor = forwardRef<any, RichEditorProps>(function RichEditor(
-	{ className, ...rest },
-	ref,
-) {
-	if (typeof ref === 'string') {
-		throw new Error('String ref not supported!');
-	}
-	return (
-		<EditorContent
-			ref={ref as any}
-			className={classNames('w-full',
-			'[&_.ProseMirror:focus]:(outline-none bg-gray1)',
-			'[&_.ProseMirror_h1,h2,h3,p]:mt-0',
-			'[&_.ProseMirror_h1]:(text-xl font-medium)',
-			'[&_.ProseMirror_h2]:(text-lg font-medium mt-4 mb-2)',
-			'[&_.ProseMirror_h3]:(text-md font-extrabold)', className)}
-			{...rest}
-		/>
-	);
-});