@a-type/ui 0.3.2 → 0.3.3

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@a-type/ui",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "type": "module",
   "files": [
-    "/dist"
+    "/dist",
+    "/src"
   ],
   "exports": {
     "./components/*": {

package/src/components/actions/ActionBar.tsx

@@ -0,0 +1,38 @@
+import { ReactNode, Suspense } from 'react';
+import classNames from 'classnames';
+
+export interface ActionBarProps {
+	children: ReactNode;
+	className?: string;
+	wrap?: boolean;
+}
+
+export function ActionBar({
+	children,
+	className,
+	wrap,
+	...rest
+}: ActionBarProps) {
+	return (
+		<Suspense fallback={null}>
+			<div
+				className={classNames(
+					'flex flex-row items-center justify-start w-full overflow-hidden relative h-[max-content] transition-[height] springy',
+					'[&:empty]:height-0',
+					'after:(content-[""] absolute right-0 top-0 bottom-0 w-50px z-1 bg-gradient-to-l from-wash to-transparent] pointer-events-none)',
+					className,
+				)}
+				{...rest}
+			>
+				<div
+					className={classNames(
+						'flex flex-row items-center justify-start w-full overflow-y-hidden overflow-x-auto pr-80px relative h-full [&::-webkit-scrollbar]:display-none',
+						wrap && 'flex-wrap',
+					)}
+				>
+					{children}
+				</div>
+			</div>
+		</Suspense>
+	);
+}

package/src/components/actions/ActionButton.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import classNames from 'classnames';
+import { forwardRef, ReactNode, useEffect, useRef, useState } from 'react';
+import { Button, ButtonProps } from '../button/Button.js';
+import { CollapsibleContent, CollapsibleRoot } from '../collapsible.js';
+
+export interface ActionButtonProps extends ButtonProps {
+	icon?: ReactNode;
+	visible?: boolean;
+}
+
+export const ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>(
+	function ActionButton(
+		{ icon, children, className, visible = true, ...rest },
+		ref,
+	) {
+		// this rather convoluted logic is meant to do:
+		// - when button goes invisible, wait for collapse and then
+		//   stop rendering
+		// - when button goes visible, render immediately and
+		//   set collapsible open next frame.
+		const [render, setRender] = useState(visible);
+		useEffect(() => {
+			if (!visible) {
+				const timeout = setTimeout(() => {
+					setRender(visible);
+				}, 300);
+				return () => clearTimeout(timeout);
+			} else {
+				setRender(visible);
+			}
+		}, [visible]);
+
+		if (!render && !visible) {
+			return null;
+		}
+
+		return (
+			<CollapsibleRoot open={!visible ? false : render}>
+				<CollapsibleContent data-horizontal>
+					<Button
+						ref={ref}
+						size="small"
+						className={classNames(
+							'important:(border-gray7 font-normal whitespace-nowrap m-2 flex flex-row gap-2 items-center h-30px rounded-15px mx-1)',
+							'hover:bg-gray2',
+							className,
+						)}
+						{...rest}
+					>
+						{icon}
+						{children}
+					</Button>
+				</CollapsibleContent>
+			</CollapsibleRoot>
+		);
+	},
+);

package/src/components/actions/index.ts

@@ -0,0 +1,2 @@
+export * from './ActionBar.js';
+export * from './ActionButton.js';

package/src/components/actions.ts

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

package/src/components/avatar/Avatar.tsx

@@ -0,0 +1,62 @@
+import classNames from 'classnames';
+import { CSSProperties } from 'react';
+import { Icon } from '../icon.js';
+
+export interface AvatarProps {
+	className?: string;
+	popIn?: boolean;
+	style?: CSSProperties;
+	imageSrc?: string;
+	name?: string;
+}
+
+export function Avatar({
+	className,
+	popIn = true,
+	imageSrc,
+	name,
+	...rest
+}: AvatarProps) {
+	const empty = !name && !imageSrc;
+	return (
+		<div
+			data-pop={popIn}
+			className={classNames(
+				'layer-components:(flex items-center justify-center rounded-full border-default p-2px overflow-hidden w-24px h-24px select-none relative bg-white flex-shrink-0)',
+				popIn &&
+					'layer-variants:(animate-pop-in-from-half animate-ease-springy animate-duration-200)',
+				empty && 'layer-components(border-dashed bg-gray2)',
+				className,
+			)}
+			{...rest}
+		>
+			{!empty && <AvatarContent name={name} imageSrc={imageSrc} />}
+			{empty && <Icon name="profile" />}
+		</div>
+	);
+}
+
+function AvatarContent({
+	name,
+	imageSrc,
+}: {
+	name?: string;
+	imageSrc?: string;
+}) {
+	if (imageSrc) {
+		return (
+			<img
+				className="w-full h-full object-cover rounded-full"
+				referrerPolicy="no-referrer"
+				crossOrigin="anonymous"
+				src={imageSrc}
+				alt={`${name ?? 'user'}'s profile picture`}
+			/>
+		);
+	}
+	return (
+		<div className="color-black items-center justify-center flex text-sm font-bold rounded-full">
+			{name?.charAt(0) || '?'}
+		</div>
+	);
+}

package/src/components/avatar/AvatarList.tsx

@@ -0,0 +1,71 @@
+import { ReactNode, createContext, useContext } from 'react';
+import classNames from 'classnames';
+import { Avatar, AvatarProps } from './Avatar.js';
+
+const AvatarListContext = createContext<{ size: number }>({
+	size: 24,
+});
+
+export function AvatarList({
+	children,
+	count,
+	size = 24,
+}: {
+	children: ReactNode;
+	count: number;
+	size?: number;
+}) {
+	const width = count > 0 ? size + (count - 1) * ((size * 2) / 3) : 0;
+
+	return (
+		<AvatarListContext.Provider value={{ size }}>
+			<div
+				className="relative flex-basis-auto"
+				style={{ width, minWidth: width, height: size }}
+			>
+				{children}
+			</div>
+		</AvatarListContext.Provider>
+	);
+}
+
+export function AvatarListItemRoot({
+	index,
+	children,
+	className,
+}: {
+	index: number;
+	children: ReactNode;
+	className?: string;
+}) {
+	const { size } = useContext(AvatarListContext);
+	return (
+		<div
+			className={classNames('absolute', className)}
+			style={{
+				left: index === 0 ? 0 : index * ((size * 2) / 3),
+				zIndex: index,
+				top: 0,
+			}}
+		>
+			{children}
+		</div>
+	);
+}
+
+export function AvatarListItem({
+	index,
+	className,
+	...rest
+}: {
+	index: number;
+	popIn?: boolean;
+	className?: string;
+} & AvatarProps) {
+	const { size } = useContext(AvatarListContext);
+	return (
+		<AvatarListItemRoot index={index} className={className}>
+			<Avatar style={{ width: size, height: size }} {...rest} />
+		</AvatarListItemRoot>
+	);
+}

package/src/components/avatar/index.ts

@@ -0,0 +1,2 @@
+export * from './Avatar.js';
+export * from './AvatarList.js';

package/src/components/avatar.ts

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

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>
+	);
+}