@a-type/ui 0.3.1 → 0.3.3

package/src/components/button/Button.stories.tsx

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

package/src/components/button/Button.tsx

@@ -0,0 +1,66 @@
+import classNames from 'classnames';
+import { forwardRef, ButtonHTMLAttributes } from 'react';
+import { Spinner } from '../spinner.js';
+import { getButtonClassName } from './classes.js';
+import { Slot } from '@radix-ui/react-slot';
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+	color?:
+		| 'primary'
+		| 'default'
+		| 'ghost'
+		| 'destructive'
+		| 'ghostDestructive'
+		| 'accent'
+		| 'contrast';
+	size?: 'default' | 'small' | 'icon';
+	toggled?: boolean;
+	align?: 'start' | 'stretch' | 'end';
+	visuallyDisabled?: boolean;
+	loading?: boolean;
+	asChild?: boolean;
+}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+	function Button(
+		{
+			className,
+			color,
+			size,
+			toggled,
+			align,
+			visuallyDisabled,
+			loading,
+			children,
+			disabled,
+			asChild,
+			...props
+		},
+		ref,
+	) {
+		const Comp = asChild ? Slot : 'button';
+		const buttonProps = {
+			ref: ref,
+			...props,
+			disabled: disabled || loading,
+			'data-disabled': visuallyDisabled,
+			tabIndex: visuallyDisabled ? -1 : undefined,
+			className: classNames(
+				getButtonClassName({ color, size, toggled, align }),
+				className,
+			),
+		};
+
+		if (asChild) {
+			// avoid rendering loading spinner with asChild
+			return <Comp {...buttonProps}>{children}</Comp>;
+		}
+
+		return (
+			<Comp {...buttonProps}>
+				{loading && <Spinner size={16} className="inline-block w-1em h-1em" />}
+				{children}
+			</Comp>
+		);
+	},
+);

package/src/components/button/ConfirmedButton.tsx

@@ -0,0 +1,66 @@
+import { useCallback, useState } from 'react';
+import {
+	Dialog,
+	DialogActions,
+	DialogClose,
+	DialogContent,
+	DialogTitle,
+	DialogTrigger,
+} from '../dialog.js';
+import { P } from '../typography.js';
+import { Button, ButtonProps } from './Button.js';
+
+export interface ConfirmedButtonProps extends Omit<ButtonProps, 'onClick'> {
+	confirmText: string;
+	confirmTitle?: string;
+	confirmAction?: string;
+	cancelAction?: string;
+	onConfirm: () => void | Promise<any>;
+	skip?: boolean;
+}
+
+export function ConfirmedButton({
+	confirmText,
+	confirmTitle = 'Are you sure?',
+	confirmAction = 'OK',
+	cancelAction = 'Nevermind',
+	onConfirm,
+	skip,
+	...rest
+}: ConfirmedButtonProps) {
+	const [open, setOpen] = useState(false);
+	const [loading, setLoading] = useState(false);
+	const confirm = useCallback(async () => {
+		setLoading(true);
+		try {
+			await onConfirm();
+			setOpen(false);
+		} finally {
+			setLoading(false);
+		}
+	}, [onConfirm]);
+
+	if (skip) {
+		return <Button {...rest} />;
+	}
+
+	return (
+		<Dialog open={open} onOpenChange={setOpen}>
+			<DialogTrigger asChild>
+				<Button {...rest} />
+			</DialogTrigger>
+			<DialogContent>
+				<DialogTitle>{confirmTitle}</DialogTitle>
+				<P>{confirmText}</P>
+				<DialogActions>
+					<DialogClose asChild>
+						<Button>{cancelAction}</Button>
+					</DialogClose>
+					<Button loading={loading} onClick={confirm} color="primary">
+						{confirmAction}
+					</Button>
+				</DialogActions>
+			</DialogContent>
+		</Dialog>
+	);
+}

package/src/components/button/classes.tsx

@@ -0,0 +1,56 @@
+import classNames from 'classnames';
+import type { ButtonProps } from './Button.jsx';
+
+export function getButtonClassName({
+	color,
+	size,
+	toggled,
+	align,
+}: {
+	color?: ButtonProps['color'];
+	size?: ButtonProps['size'];
+	toggled?: boolean;
+	align?: ButtonProps['align'];
+}) {
+	return classNames(
+		'layer-components:(px-4 py-2 bg-[var(--bg)] [--webkit-tap-highlight-color:transparent] [line-height:1] text-size-md font-sans border border-solid border-transparent rounded-full cursor-pointer font-bold flex flex-row gap-1 items-center relative overflow-visible select-none all:transition duration-200 shadow-none whitespace-nowrap)',
+		'layer-components:hover:(bg-[var(--hover)] shadow-[0_0_0_6px_var(--hover)])',
+		'layer-components:focus:outline-off',
+		'layer-components:focus-visible:(outline-off shadow-[0_0_0_6px_var(--focus,var(--hover))])',
+		'layer-components:active:(shadow-[0_0_0_6px_var(--active)] bg-[var(--active)])',
+		'important:disabled:(opacity-50 cursor-default bg-[(--var-bg)] shadow-none)',
+		'important:[&[data-disabled=true]]:(opacity-50 cursor-default bg-[(--var-bg)] shadow-none)',
+		colors[color ?? 'default'],
+		`btn-color-${color ?? 'default'}`,
+		sizes[size ?? 'default'],
+		`size-${size ?? 'default'}`,
+		toggled && toggledClass,
+		align && aligns[align],
+		// compound variants
+		color === 'ghost' && toggled && 'layer-variants:bg-primary-wash',
+	);
+}
+
+const colors = {
+	primary: `layer-variants:[&.btn-color-primary]:([--bg:var(--color-primary-light)] [--hover:var(--color-primary)] [--focus:var(--color-primary)] [--active:var(--color-primary)] color-black border-black focus-visible:([--bg:var(--color-primary)]))`,
+	accent: `layer-variants:[&.btn-color-accent]:([--bg:var(--color-accent-wash)] [--hover:var(--color-accent-light)] [--focus:var(--color-accent-light)] [--active:var(--color-accent-light)] color-black border-black focus-visible:([--bg:var(--color-accent-light)]))`,
+	default: `layer-variants:[&.btn-color-default]:([--bg:var(--color-white)] [--hover:var(--color-gray-2)] [--focus:var(--color-gray-7)] [--active:var(--color-gray-3)] color-black border-black)`,
+	ghost: `layer-variants:[&.btn-color-ghost]:([--bg:transparent] [--hover:var(--color-gray-blend)] [--focus:var(--color-gray-7)] [--active:var(--color-gray-dark-blend)] color-dark-blend hover:([--bg:var(--color-gray-blend)]) focus-visible:([--bg:var(--color-gray-blend)] [--hover:var(--color-gray-7)]))`,
+	destructive: `layer-variants:[&.btn-color-destructive]:([--bg:var(--color-attention-light)] [--hover:var(--color-attention-light)] [--focus:var(--color-attention-light)] [--active:var(--color-attention-light)] border-black color-black hover:([--bg:var(--colors-attention)]))`,
+	ghostDestructive: `layer-variants:[&.btn-color-ghostDestructive]:([--bg:transparent] [--hover:var(--color-attention-light)] [--focus:var(--color-attention-light)] [--active:var(-color-attention-light)] color-attention-dark)`,
+	contrast: `layer-variants:[&.btn-color-contrast]:([--bg:var(--color-black)] [--hover:var(--color-gray-7)] [--focus:var(--color-gray-7)] [--active:var(--color-gray-6)] color-white border-black)`,
+};
+
+const sizes = {
+	default: '',
+	small: 'layer-variants:[&.size-small]:(px-4 py-1 text-sm rounded-full)',
+	icon: 'layer-variants:[&.size-icon]:(p-2 text-sm rounded-full) layer-variants:focus-visible:shadow-[0_0_0_2px_var(--focus,var(--hover))]',
+};
+
+const toggledClass = 'hover:(filter-brightness-[1.1])';
+
+const aligns = {
+	start: 'self-start',
+	stretch: 'self-stretch',
+	end: 'self-end',
+};

package/src/components/button/index.ts

@@ -0,0 +1,3 @@
+export * from './Button.js';
+export * from './ConfirmedButton.js';
+export * from './classes.js';

package/src/components/button.ts

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

package/src/components/camera/Camera.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+	CameraDeviceSelector,
+	CameraRoot,
+	CameraShutterButton,
+} from './Camera.js';
+import { useEffect, useState } from 'react';
+
+const meta = {
+	title: 'Camera',
+	argTypes: {},
+	parameters: {
+		controls: { expanded: true },
+	},
+	args: {},
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+	render() {
+		return <CameraDemo />;
+	},
+};
+
+function CameraDemo() {
+	const [latest, setLatest] = useState<string | undefined>();
+
+	return (
+		<div>
+			<CameraRoot onCapture={setLatest} className="w-64 h-64">
+				<CameraShutterButton />
+				<CameraDeviceSelector />
+			</CameraRoot>
+			{latest && <img src={latest} className="w-full" />}
+		</div>
+	);
+}

package/src/components/camera/Camera.tsx

@@ -0,0 +1,215 @@
+import classNames from 'classnames';
+import {
+	MouseEvent,
+	ReactNode,
+	createContext,
+	forwardRef,
+	useContext,
+	useEffect,
+	useRef,
+	useState,
+} from 'react';
+import { Button } from '../button.js';
+import { Icon } from '../icon.js';
+import { Select, SelectContent, SelectItem, SelectTrigger } from '../select.js';
+import { Slot } from '@radix-ui/react-slot';
+import { withClassName } from '../../hooks.js';
+
+const CameraContext = createContext<{
+	triggerCapture: () => void;
+	selectedDeviceId: string | undefined;
+	selectDeviceId: (id: string) => void;
+	devices: MediaDeviceInfo[];
+}>({
+	triggerCapture: () => {},
+	selectedDeviceId: 'default',
+	selectDeviceId: () => {},
+	devices: [],
+});
+
+export interface CameraRootProps {
+	className?: string;
+	onCapture?: (data: string) => void;
+	children?: ReactNode;
+	format?: 'image/png' | 'image/jpeg';
+}
+
+export const CameraRoot = forwardRef<HTMLDivElement, CameraRootProps>(
+	function Camera(
+		{ className, onCapture, children, format = 'image/png', ...rest },
+		ref,
+	) {
+		const videoRef = useRef<HTMLVideoElement>(null);
+
+		const triggerCapture = () => {
+			const video = videoRef.current;
+			if (video) {
+				const canvas = document.createElement('canvas');
+				canvas.width = video.videoWidth;
+				canvas.height = video.videoHeight;
+				canvas.getContext('2d')?.drawImage(video, 0, 0);
+				const data = canvas.toDataURL(format);
+				onCapture?.(data);
+			}
+		};
+
+		const [devices, setDevices] = useState<MediaDeviceInfo[]>([]);
+		useEffect(() => {
+			navigator.mediaDevices.enumerateDevices().then((devices): void => {
+				setDevices(devices.filter((device) => device.kind === 'videoinput'));
+			});
+		}, []);
+		const [selectedDeviceId, setSelectedDeviceId] = useState<
+			string | undefined
+		>();
+		const [stream, setStream] = useState<MediaStream | undefined>();
+		useEffect(() => {
+			navigator.mediaDevices
+				.getUserMedia({
+					video: {
+						deviceId: selectedDeviceId,
+					},
+				})
+				.then((s) => {
+					setStream(s);
+				});
+		}, [selectedDeviceId]);
+		useEffect(() => {
+			return () => {
+				stream?.getTracks().forEach((track) => track.stop());
+			};
+		}, [stream]);
+
+		useEffect(() => {
+			const video = videoRef.current;
+			if (video && stream) {
+				video.srcObject = stream;
+				return () => {
+					video.srcObject = null;
+				};
+			}
+		}, [stream]);
+
+		return (
+			<CameraContext.Provider
+				value={{
+					devices,
+					triggerCapture,
+					selectedDeviceId,
+					selectDeviceId: setSelectedDeviceId,
+				}}
+			>
+				<div
+					ref={ref}
+					className={classNames(
+						'layer-components:([font-family:inherit] text-white bg-black rounded-lg overflow-hidden min-w-4 min-h-4 relative)',
+						className,
+					)}
+					{...rest}
+				>
+					<video
+						ref={videoRef}
+						className="w-full h-full object-cover"
+						autoPlay
+						muted
+						playsInline
+					></video>
+					{children}
+				</div>
+			</CameraContext.Provider>
+		);
+	},
+);
+
+export interface CameraShutterButtonProps {
+	className?: string;
+	asChild?: boolean;
+	onClick?: (ev: MouseEvent<HTMLButtonElement>) => void;
+}
+
+export const CameraShutterButton = forwardRef<
+	HTMLButtonElement,
+	CameraShutterButtonProps
+>(function CameraShutterButton({ asChild, onClick, ...rest }, ref) {
+	const Comp = asChild ? Slot : StyledShutterButton;
+	const { triggerCapture } = useContext(CameraContext);
+
+	return (
+		<Comp
+			ref={ref}
+			aria-label={asChild ? undefined : 'Capture photo'}
+			onClick={(ev) => {
+				triggerCapture();
+				onClick?.(ev);
+			}}
+			{...rest}
+		/>
+	);
+});
+
+const StyledShutterButton = withClassName(
+	'button',
+	'absolute bottom-3 left-1/2 -translate-x-1/2 w-16 h-16 bg-white rounded-full cursor-pointer border-2 border-black border-solid ring-2 ring-white opacity-80',
+	'hover:bg-gray-1 hover:opacity-100',
+	'focus-visible:bg-gray-2',
+	'focus:ring-primary focus:outline-none focus:opacity-100',
+	'sm:w-8 sm:h-8',
+);
+
+export interface CameraDeviceSelectorProps {}
+
+export const CameraDeviceSelector = (props: CameraDeviceSelectorProps) => {
+	const { devices, selectDeviceId, selectedDeviceId } =
+		useContext(CameraContext);
+	const swapCamera = () => {
+		if (selectedDeviceId) {
+			const index = devices.findIndex(
+				(device) => device.deviceId === selectedDeviceId,
+			);
+			if (index === -1) {
+				return;
+			}
+			selectDeviceId(devices[(index + 1) % devices.length].deviceId);
+		} else {
+			selectDeviceId(devices[0].deviceId);
+		}
+	};
+
+	if (!devices.length || devices.length === 1) return null;
+	if (devices.length === 2) {
+		return (
+			<Button
+				size="icon"
+				color="ghost"
+				className="absolute bottom-2 left-2 text-white"
+				onClick={swapCamera}
+			>
+				<Icon name="refresh" />
+			</Button>
+		);
+	}
+
+	return (
+		<Select
+			value={selectedDeviceId || 'default'}
+			onValueChange={selectDeviceId}
+		>
+			<SelectTrigger asChild>
+				<Button
+					size="icon"
+					color="ghost"
+					className="absolute bottom-2 left-2 text-white"
+				>
+					<Icon name="refresh" />
+				</Button>
+			</SelectTrigger>
+			<SelectContent>
+				{devices.map((device) => (
+					<SelectItem key={device.deviceId} value={device.deviceId}>
+						{device.label}
+					</SelectItem>
+				))}
+			</SelectContent>
+		</Select>
+	);
+};

package/src/components/camera/index.ts

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

package/src/components/camera.ts

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

package/src/components/card/Card.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+	CardActions,
+	CardFooter,
+	CardMain,
+	CardRoot,
+	CardTitle,
+} from './Card.js';
+import { Button } from '../button.js';
+import { Icon } from '../icon.js';
+
+const meta = {
+	title: 'Card',
+	component: CardRoot,
+	argTypes: {},
+	parameters: {
+		controls: { expanded: true },
+	},
+} satisfies Meta<typeof CardRoot>;
+
+export default meta;
+
+type Story = StoryObj<typeof CardRoot>;
+
+export const Default: Story = {
+	render: () => (
+		<CardRoot>
+			<CardMain>
+				<CardTitle>Card Title</CardTitle>
+			</CardMain>
+			<CardFooter>
+				<CardActions>
+					<Button size="small">Button</Button>
+					<Button size="icon" color="ghost">
+						<Icon name="placeholder" />
+					</Button>
+				</CardActions>
+			</CardFooter>
+		</CardRoot>
+	),
+};

package/src/components/card/Card.tsx

@@ -0,0 +1,68 @@
+import { MouseEvent, ReactNode, forwardRef } from 'react';
+import { withClassName } from '../../hooks.js';
+import { Slot } from '@radix-ui/react-slot';
+import classNames from 'classnames';
+
+export const CardRoot = withClassName(
+	'div',
+	'layer-components:(flex flex-col border-light rounded-lg text-lg overflow-hidden h-max-content relative bg-gray-1)',
+);
+
+export const CardMain = forwardRef<
+	any,
+	{
+		asChild?: boolean;
+		className?: string;
+		onClick?: (ev: MouseEvent) => void;
+		children?: ReactNode;
+		compact?: boolean;
+	}
+>(function CardMain({ asChild, className, compact, ...rest }, ref) {
+	const Comp = asChild ? Slot : 'button';
+	return (
+		<Comp
+			ref={ref}
+			className={classNames(
+				'layer-components:(flex flex-col gap-1 cursor-pointer transition p-4 pb-2 flex-1 relative z-1 bg-transparent border-none text-start)',
+				'layer-components:hover:(bg-lightBlend color-black)',
+				'layer-components:md:pt-4',
+				compact && 'layer-variants:(p-1 bg-white gap-0)',
+				className,
+			)}
+			data-compact={compact}
+			{...rest}
+		/>
+	);
+});
+
+export const CardTitle = withClassName(
+	'div',
+	'layer-components:(flex flex-col gap-1 mt-auto bg-white p-2 rounded-lg w-auto mr-auto border border-solid border-grayDarkBlend text-md max-h-80px overflow-hidden text-ellipsis max-w-full)',
+	'[data-compact=true]>&:(bg-transparent border-none p-2 whitespace-nowrap text-ellipsis overflow-hidden)',
+);
+
+export const CardImage = withClassName(
+	'div',
+	'layer-components:(absolute z-0 right-0 top-0 bottom-0 w-full h-full)',
+);
+
+export const CardFooter = withClassName(
+	'div',
+	'layer-components:(flex flex-row p-2 bg-white relative z-1 border-0 border-t border-t-grayDarkBlend border-solid)',
+);
+
+export const CardActions = withClassName(
+	'div',
+	'layer-components:(ml-0 mr-auto flex flex-row gap-1 items-center)',
+);
+
+export const CardMenu = withClassName(
+	'div',
+	'layer-components:(mr-0 ml-auto flex flex-row gap-1 items-center)',
+);
+
+export const CardGrid = withClassName(
+	'div',
+	'layer-components:(grid grid-cols-[1fr] [grid-auto-rows:auto] gap-4 p-0 m-0)',
+	'layer-components:md:(grid-cols-[repeat(2,1fr)] [grid-auto-rows:1fr] items-end)',
+);

package/src/components/card/index.ts

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

package/src/components/card.ts

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

package/src/components/checkbox/Checkbox.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { ComponentProps, forwardRef } from 'react';
+import { CheckIcon } from '@radix-ui/react-icons';
+import classNames from 'classnames';
+import { withClassName } from '../../hooks/withClassName.js';
+
+export const CheckboxRoot = withClassName(
+	CheckboxPrimitive.Root,
+	classNames(
+		'layer-components:(w-28px h-28px flex-shrink-0 relative bg-white border-default transition rounded-full)',
+		'layer-components:focus-visible:(outline-off shadow-focus)',
+		'layer-components:[&[data-state=checked]]:(bg-primary-light border-primary-dark)',
+		'layer-components:[&:hover:not(:disabled)]:shadow-[0_0_0_1px_var(--color-black)]',
+	),
+);
+
+export function CheckboxIndicator({
+	children,
+	className,
+	...props
+}: CheckboxPrimitive.CheckboxIndicatorProps) {
+	return (
+		<CheckboxPrimitive.Indicator
+			className={classNames(
+				'absolute center translate-[-50%] color-black',
+				className,
+			)}
+			{...props}
+		>
+			{children ?? <CheckIcon width={18} height={18} />}
+		</CheckboxPrimitive.Indicator>
+	);
+}
+
+export const Checkbox = forwardRef<
+	HTMLButtonElement,
+	ComponentProps<typeof CheckboxRoot>
+>(function Checkbox(props, ref) {
+	return (
+		<CheckboxRoot ref={ref} {...props}>
+			<CheckboxIndicator />
+		</CheckboxRoot>
+	);
+});

package/src/components/checkbox/index.ts

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

package/src/components/checkbox.ts

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

package/src/components/chip/Chip.tsx

@@ -0,0 +1,29 @@
+import { Slot } from '@radix-ui/react-slot';
+import classNames from 'classnames';
+import { HTMLAttributes, forwardRef } from 'react';
+
+export interface ChipProps extends HTMLAttributes<HTMLElement> {
+	color?: 'neutral' | 'primary' | 'accent';
+	asChild?: boolean;
+}
+
+export const Chip = forwardRef<any, ChipProps>(function Chip(
+	{ className, color = 'neutral', asChild, ...rest },
+	ref,
+) {
+	const Component = asChild ? Slot : 'div';
+	return (
+		<Component
+			ref={ref}
+			className={classNames(
+				'inline-flex flex-row gap-1 items-center whitespace-nowrap border-light border-solid border-1 rounded-full px-2 py-1',
+				{
+					'bg-primary-wash': color === 'primary',
+					'bg-accent-wash': color === 'accent',
+				},
+				className,
+			)}
+			{...rest}
+		/>
+	);
+});

package/src/components/chip/index.ts

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

package/src/components/chip.ts

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