@a-type/ui 0.3.2 → 0.4.0

package/src/components/imageUploader/ImageUploader.tsx

@@ -0,0 +1,203 @@
+'use client';
+
+import classNames from 'classnames';
+import { useCallback, useId, useState } from 'react';
+import { Icon } from '../icon.js';
+import { Button } from '../button.js';
+import {
+	CameraDeviceSelector,
+	CameraRoot,
+	CameraShutterButton,
+} from '../camera.js';
+
+export interface ImageUploaderProps {
+	value: string | null;
+	onChange: (value: File | null) => void;
+	className?: string;
+	maxDimension?: number;
+}
+
+/**
+ * Renders an image if one is already set, and allows either clicking
+ * on the image to select a new one, or dragging a new image onto the
+ * component to replace the existing one.
+ */
+export function ImageUploader({
+	value,
+	onChange: handleChange,
+	maxDimension,
+	...rest
+}: ImageUploaderProps) {
+	const inputId = useId();
+	const [dragging, setDragging] = useState(false);
+	const [draggingOver, setDraggingOver] = useState(false);
+
+	const onDragEnter = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+		e.preventDefault();
+		e.stopPropagation();
+		setDraggingOver(true);
+	}, []);
+
+	const onDragLeave = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+		e.preventDefault();
+		e.stopPropagation();
+		setDraggingOver(false);
+	}, []);
+
+	const onDragOver = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+		e.preventDefault();
+		e.stopPropagation();
+		setDraggingOver(true);
+	}, []);
+
+	const onChange = useCallback(
+		async (file: File | null) => {
+			if (!file) {
+				handleChange(null);
+			} else if (maxDimension) {
+				const { readAndCompressImage } = await import('browser-image-resizer');
+				const resizedImage = await readAndCompressImage(file, {
+					maxWidth: maxDimension,
+					maxHeight: maxDimension,
+					mimeType: file.type,
+				});
+				handleChange(new File([resizedImage], file.name, { type: file.type }));
+			} else {
+				handleChange(file);
+			}
+		},
+		[handleChange, maxDimension],
+	);
+
+	const onDrop = useCallback(
+		(e: React.DragEvent<HTMLDivElement>) => {
+			e.preventDefault();
+			e.stopPropagation();
+			setDraggingOver(false);
+			if (e.dataTransfer.files.length > 0) {
+				onChange(e.dataTransfer.files[0]);
+			}
+		},
+		[onChange],
+	);
+
+	const onDragStart = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+		e.preventDefault();
+		e.stopPropagation();
+		setDragging(true);
+	}, []);
+
+	const onDragEnd = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+		e.preventDefault();
+		e.stopPropagation();
+		setDragging(false);
+	}, []);
+
+	const onFileChange = useCallback(
+		(e: React.ChangeEvent<HTMLInputElement>) => {
+			if (e.target.files && e.target.files.length > 0) {
+				onChange(e.target.files[0]);
+			}
+		},
+		[onChange],
+	);
+
+	const onFileClick = useCallback((e: React.MouseEvent<HTMLInputElement>) => {
+		e.stopPropagation();
+	}, []);
+
+	const [cameraOpen, setCameraOpen] = useState(false);
+	const openCamera = () => setCameraOpen(true);
+
+	return (
+		<div
+			className={classNames('relative overflow-hidden', rest.className)}
+			onDragEnter={onDragEnter}
+			onDragLeave={onDragLeave}
+			onDragOver={onDragOver}
+			onDrop={onDrop}
+			onDragStart={onDragStart}
+			onDragEnd={onDragEnd}
+		>
+			{value ? (
+				<img src={value} className="w-full h-full object-cover object-center" />
+			) : null}
+			{!value && (
+				<div
+					className={classNames(
+						'absolute inset-0 flex flex-col items-center justify-center gap-3 bg-[rgba(0,0,0,0.05)]',
+						{
+							'!bg-[rgba(0,0,0,0.1)]': draggingOver,
+						},
+					)}
+				>
+					<input
+						type="file"
+						accept="image/*"
+						onChange={onFileChange}
+						onClick={onFileClick}
+						className="absolute inset--99999 op-0"
+						id={inputId}
+					/>
+					<Button color="ghost" asChild>
+						<label htmlFor={inputId}>
+							<Icon name="upload" />
+							<span>{dragging ? 'Drop' : 'Upload'}</span>
+						</label>
+					</Button>
+					<Button color="ghost" onClick={openCamera}>
+						<Icon name="camera" />
+						<span>Camera</span>
+					</Button>
+				</div>
+			)}
+			{!value && cameraOpen && (
+				<CameraRoot
+					className="absolute w-full h-full z-1"
+					format="image/png"
+					onCapture={(dataUrl) => {
+						onChange(dataURItoBlob(dataUrl));
+						setCameraOpen(false);
+					}}
+				>
+					<CameraShutterButton />
+					<CameraDeviceSelector />
+					<Button
+						onClick={() => setCameraOpen(false)}
+						color="ghost"
+						size="icon"
+						className="text-white absolute top-2 right-2"
+					>
+						<Icon name="x" />
+					</Button>
+				</CameraRoot>
+			)}
+			{value && (
+				<Button
+					color="ghost"
+					size="icon"
+					className="absolute top-2 right-2 w-32px h-32px border-none p-2 cursor-pointer bg-white color-black rounded-full transition-colors shadow-sm"
+					onClick={() => onChange(null)}
+				>
+					<Icon name="x" />
+				</Button>
+			)}
+		</div>
+	);
+}
+
+function dataURItoBlob(dataURI: string) {
+	// convert base64/URLEncoded data component to raw binary data held in a string
+	var byteString;
+	if (dataURI.split(',')[0].indexOf('base64') >= 0)
+		byteString = atob(dataURI.split(',')[1]);
+	else byteString = unescape(dataURI.split(',')[1]);
+	// separate out the mime component
+	var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
+	// write the bytes of the string to a typed array
+	var ia = new Uint8Array(byteString.length);
+	for (var i = 0; i < byteString.length; i++) {
+		ia[i] = byteString.charCodeAt(i);
+	}
+	return new File([ia], 'image.png', { type: mimeString });
+}

package/src/components/imageUploader/UploadIcon.tsx

@@ -0,0 +1,23 @@
+export interface UploadIconProps {
+	className?: string;
+}
+
+export function UploadIcon(props: UploadIconProps) {
+	return (
+		<svg
+			width="15"
+			height="15"
+			viewBox="0 0 15 15"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			{...props}
+		>
+			<path
+				d="M1.5 10V11.5C1.5 12.6046 2.39543 13.5 3.5 13.5H11.5C12.6046 13.5 13.5 12.6046 13.5 11.5V10M7.5 10.5V1M7.5 1L4 4M7.5 1L11 4"
+				stroke="currentColor"
+				strokeLinecap="round"
+				strokeLinejoin="round"
+			/>
+		</svg>
+	);
+}

package/src/components/imageUploader/index.ts

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

package/src/components/imageUploader.ts

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

package/src/components/infiniteLoadTrigger/InfiniteLoadTrigger.tsx

@@ -0,0 +1,38 @@
+import { ReactNode, forwardRef, useEffect, useRef } from 'react';
+import classNames from 'classnames';
+import useMergedRef from '../../hooks/useMergedRef.js';
+import { useStableCallback } from '../../hooks.js';
+
+export interface InfiniteLoadTriggerProps {
+	className?: string;
+	children?: ReactNode;
+	onVisible?: () => void;
+}
+
+export const InfiniteLoadTrigger = forwardRef<
+	HTMLDivElement,
+	InfiniteLoadTriggerProps
+>(function InfiniteLoadTrigger({ className, onVisible, ...rest }, ref) {
+	const innerRef = useRef<HTMLDivElement>(null);
+
+	const stableOnVisible = useStableCallback(onVisible);
+	useEffect(() => {
+		const observer = new IntersectionObserver((entries) => {
+			if (entries[0].isIntersecting) {
+				stableOnVisible();
+			}
+		});
+		observer.observe(innerRef.current!);
+		return () => {
+			observer.disconnect();
+		};
+	}, [stableOnVisible]);
+
+	return (
+		<div
+			ref={useMergedRef(ref, innerRef)}
+			className={classNames('flex flex-col items-center', className)}
+			{...rest}
+		/>
+	);
+});

package/src/components/infiniteLoadTrigger.ts

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

package/src/components/input/Input.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Input } from './Input.js';
+
+const meta = {
+	title: 'Input',
+	component: Input,
+	argTypes: {},
+	parameters: {
+		controls: { expanded: true },
+	},
+} satisfies Meta<typeof Input>;
+
+export default meta;
+
+type Story = StoryObj<typeof Input>;
+
+export const Default: Story = {};

package/src/components/input/Input.tsx

@@ -0,0 +1,32 @@
+import classNames from 'classnames';
+import { ComponentProps, ComponentPropsWithRef, forwardRef } from 'react';
+
+export const inputClassName = classNames(
+	'layer-components:(px-4 py-2 text-md font-sans rounded-lg bg-gray-blend select-auto min-w-60px color-black border-default)',
+	'layer-components:focus:(outline-none bg-gray2)',
+	'layer-components:focus-visible:(outline-none shadow-focus)',
+	'layer-components:md:(min-w-120px)',
+);
+
+export const Input = forwardRef<
+	HTMLInputElement,
+	ComponentProps<'input'> & {
+		variant?: 'default' | 'primary';
+	}
+>(function Input({ className, variant = 'default', ...props }, ref) {
+	return (
+		<input
+			{...props}
+			className={classNames(
+				inputClassName,
+				{
+					'rounded-full': variant === 'primary',
+				},
+				className,
+			)}
+			ref={ref}
+		/>
+	);
+});
+
+export type InputProps = ComponentPropsWithRef<'input'>;

package/src/components/input/index.ts

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

package/src/components/input.ts

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

package/src/components/layouts/PageContent.tsx

@@ -0,0 +1,51 @@
+'use client';
+import classNames from 'classnames';
+import { HTMLAttributes } from 'react';
+import { useBoundsCssVars } from '../../hooks/useSize.js';
+
+export function PageContent({
+	children,
+	fullHeight,
+	noPadding,
+	innerProps,
+	className,
+	...rest
+}: HTMLAttributes<HTMLDivElement> & {
+	fullHeight?: boolean;
+	noPadding?: boolean;
+	innerProps?: HTMLAttributes<HTMLDivElement>;
+}) {
+	const innerRef = useBoundsCssVars<HTMLDivElement>(200, undefined, {
+		left: '--content-left',
+		top: '--content-top',
+		width: '--content-width',
+		height: '--content-height',
+		ready: '--content-ready',
+	});
+
+	return (
+		<div
+			className={classNames(
+				'[grid-area:content] max-w-full min-w-0 w-full flex flex-col items-start relative flex-1 gap-3',
+				className,
+			)}
+			{...rest}
+		>
+			<div
+				{...innerProps}
+				className={classNames(
+					'w-full min-w-0 flex flex-col mb-120px px-4 py-4',
+					'sm:(max-w-700px w-full)',
+					{
+						'flex-1': fullHeight,
+						'important:(p-0 sm:p-4)': noPadding,
+					},
+					innerProps?.className,
+				)}
+				ref={innerRef}
+			>
+				{children}
+			</div>
+		</div>
+	);
+}

package/src/components/layouts/PageFixedArea.tsx

@@ -0,0 +1,17 @@
+import { HTMLAttributes } from 'react';
+import classNames from 'classnames';
+
+export function PageFixedArea({
+	className,
+	...props
+}: HTMLAttributes<HTMLDivElement>) {
+	return (
+		<div
+			{...props}
+			className={classNames(
+				'layer-components:(sticky top-0 z-nav bg-wash w-full items-stretch gap-2 flex flex-col)',
+				className,
+			)}
+		/>
+	);
+}

package/src/components/layouts/PageNav.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import classNames from 'classnames';
+import { HTMLAttributes } from 'react';
+
+export function PageNav({
+	className,
+	children,
+	...props
+}: HTMLAttributes<HTMLDivElement>) {
+	return (
+		<div
+			{...props}
+			className={classNames(
+				'[grid-area:nav] relative z-nav',
+				'sm:([grid-area:nav] sticky top-0 h-auto bottom-auto left-auto right-auto)',
+				className,
+			)}
+		>
+			{children}
+		</div>
+	);
+}

package/src/components/layouts/PageNowPlaying.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import classNames from 'classnames';
+import { HTMLAttributes } from 'react';
+
+export function PageNowPlaying({
+	className,
+	unstyled,
+	...props
+}: HTMLAttributes<HTMLDivElement> & { unstyled?: boolean }) {
+	return (
+		<div
+			{...props}
+			className={classNames(
+				'fixed bottom-[var(--now-playing-bottom,60px)] left-0 right-0 z-now-playing flex flex-col gap-2 items-end',
+				'sm:(fixed bottom-3 left-[var(--content-left,20%)] transition-opacity top-auto items-end w-[var(--content-width,100%)] max-w-80vw p-0 opacity-[var(--content-ready,0)])',
+				unstyled
+					? 'p-2'
+					: 'layer-components:(bg-wash p-2px rounded-xl border-light shadow-md min-w-32px items-center justify-center m-2 w-auto)',
+				className,
+			)}
+		/>
+	);
+}

package/src/components/layouts/PageRoot.tsx

@@ -0,0 +1,29 @@
+import classNames from 'classnames';
+import { forwardRef, ReactNode } from 'react';
+
+export const PageRoot = forwardRef<
+	HTMLDivElement,
+	{
+		color?: 'default' | 'lemon';
+		children?: ReactNode;
+		className?: string;
+	}
+>(function PageRoot({ className, children, ...props }, ref) {
+	return (
+		<div
+			ref={ref}
+			className={classNames(
+				'flex-grow-1 flex-shrink-1 flex-basis-0 min-h-0 h-full',
+				'grid grid-areas-[content]-[nav] grid-cols-[1fr] grid-rows-[1fr] items-start justify-center',
+				'sm:(grid-areas-[gutter1_nav_content_gutter2] grid-cols-[1fr_auto_min(800px,60vw)_1fr] min-h-auto)',
+				{
+					'bg-[var(--palette-yellow-70)]': props.color === 'lemon',
+				},
+				className,
+			)}
+			{...props}
+		>
+			{children}
+		</div>
+	);
+});

package/src/components/layouts/PageSection.tsx

@@ -0,0 +1,23 @@
+import { HTMLAttributes } from 'react';
+import classNames from 'classnames';
+import { withClassName } from '../../hooks/withClassName.js';
+
+export function PageSection({
+	className,
+	...props
+}: HTMLAttributes<HTMLDivElement>) {
+	return (
+		<div
+			{...props}
+			className={classNames(
+				'bg-white rounded-lg border-default p-4 w-full max-w-80vw md:min-w-0',
+				className,
+			)}
+		/>
+	);
+}
+
+export const PageSectionGrid = withClassName(
+	'div',
+	'grid grid-cols-[repeat(auto-fit,minmax(300px,1fr))] gap-4 items-start',
+);

package/src/components/layouts/index.tsx

@@ -0,0 +1,6 @@
+export * from './PageRoot.js';
+export * from './PageContent.js';
+export * from './PageFixedArea.js';
+export * from './PageNav.js';
+export * from './PageNowPlaying.js';
+export * from './PageSection.js';

package/src/components/layouts.ts

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

package/src/components/liveUpdateTextField/LiveUpdateTextField.tsx

@@ -0,0 +1,132 @@
+'use client';
+
+import {
+	ChangeEvent,
+	FocusEvent,
+	forwardRef,
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from 'react';
+import { debounce } from '@a-type/utils';
+import { Input, InputProps } from '../input/Input.js';
+import { TextArea } from '../textArea/TextArea.js';
+
+export type LiveUpdateTextFieldProps = {
+	value: string;
+	debounceMs?: number;
+	onChange: (value: string) => void;
+	textArea?: boolean;
+	className?: string;
+	onFocus?: (ev: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+	onBlur?: (ev: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+	autoComplete?: InputProps['autoComplete'];
+	autoFocus?: InputProps['autoFocus'];
+	required?: boolean;
+	placeholder?: string;
+	type?: InputProps['type'];
+	id?: string;
+};
+
+/**
+ * An extension of TextField which keeps a local realtime value in state and
+ * periodically reports changes to the parent. Use this to connect
+ * to the API and update a value from the field directly.
+ *
+ * This component is optimistic and will not respond to external changes while focused.
+ */
+export const LiveUpdateTextField = forwardRef<
+	HTMLInputElement | HTMLTextAreaElement,
+	LiveUpdateTextFieldProps
+>(function LiveUpdateTextField(
+	{
+		value,
+		onChange,
+		debounceMs = 500,
+		onFocus,
+		onBlur,
+		textArea,
+		type,
+		...rest
+	},
+	ref,
+) {
+	const [displayValue, setDisplayValue] = useState(value || '');
+	const ignoreUpdates = useRef(false);
+	const didChange = useRef(false);
+
+	const handleFocus = useCallback(
+		(ev: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+			onFocus?.(ev);
+			ignoreUpdates.current = true;
+		},
+		[onFocus],
+	);
+
+	const handleBlur = useCallback(
+		(ev: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+			onBlur?.(ev);
+			ignoreUpdates.current = false;
+			// immediately send update if the user typed anything.
+			// otherwise pull the latest remote value
+			if (didChange.current) {
+				onChange?.(displayValue);
+			} else {
+				setDisplayValue(value || '');
+			}
+			didChange.current = false;
+		},
+		[onBlur, displayValue, onChange, value],
+	);
+
+	useEffect(() => {
+		if (ignoreUpdates.current) {
+			return;
+		}
+		setDisplayValue(value || '');
+	}, [value]);
+
+	// every once in a while, send an update to parent
+	const debouncedOnChange = useMemo(
+		() => debounce(onChange || (() => {}), debounceMs),
+		[onChange, debounceMs],
+	);
+
+	// update local state instantly and parent eventually
+	const handleChange = useCallback(
+		(ev: ChangeEvent<any>) => {
+			setDisplayValue(ev.target.value);
+			debouncedOnChange(ev.target.value);
+			didChange.current = true;
+		},
+		[debouncedOnChange],
+	);
+
+	if (textArea) {
+		return (
+			<TextArea
+				ref={ref as any}
+				onFocus={handleFocus}
+				onBlur={handleBlur}
+				value={displayValue}
+				onChange={handleChange}
+				autoSize
+				{...rest}
+			/>
+		);
+	} else {
+		return (
+			<Input
+				ref={ref as any}
+				onFocus={handleFocus}
+				onBlur={handleBlur}
+				value={displayValue}
+				onChange={handleChange}
+				type={type}
+				{...rest}
+			/>
+		);
+	}
+});

package/src/components/liveUpdateTextField/index.ts

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

package/src/components/liveUpdateTextField.ts

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