@a-type/ui 0.3.2 → 0.3.3

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';

package/src/components/collapsible/Collapsible.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { withClassName } from '../../hooks/withClassName.js';
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+
+export const CollapsibleRoot = CollapsiblePrimitive.Root;
+const CollapsibleContentBase = withClassName(
+	CollapsiblePrimitive.Content,
+	'overflow-hidden animate-forwards',
+	'layer-components:[&[data-state=open]]:(animate-radix-collapsible-open-vertical animate-duration-300 animate-ease-springy) layer-components:[&[data-state=closed]]:(animate-radix-collapsible-close-vertical animate-duration-300 animate-ease-springy)',
+	'layer-variants:[&[data-horizontal][data-state=open]]:(animate-radix-collapsible-open-horizontal animate-duration-300 animate-ease-springy) layer-variants:[&[data-horizontal][data-state=closed]]:(animate-radix-collapsible-close-horizontal animate-duration-300 animate-ease-springy)',
+	'layer-variants:[&[data-both][data-state=open]]:(animate-radix-collapsible-open-both animate-duration-300 animate-ease-springy) layer-variants:[&[data-both][data-state=closed]]:(animate-radix-collapsible-close-both animate-duration-300 animate-ease-springy)',
+);
+// specifically removing className... it's causing problems?
+export const CollapsibleContent = forwardRef<
+	HTMLDivElement,
+	CollapsiblePrimitive.CollapsibleContentProps & {
+		horizontal?: boolean;
+		both?: boolean;
+	}
+>(function CollapsibleContent({ horizontal, both, ...props }, ref) {
+	return (
+		<CollapsibleContentBase
+			data-horizontal={horizontal}
+			data-both={both}
+			{...props}
+			ref={ref}
+		/>
+	);
+});
+export const CollapsibleTrigger = CollapsiblePrimitive.Trigger;
+
+export const CollapsibleSimple = ({
+	horizontal,
+	both,
+	children,
+	...props
+}: CollapsiblePrimitive.CollapsibleProps & {
+	horizontal?: boolean;
+	both?: boolean;
+}) => (
+	<CollapsibleRoot {...props}>
+		<CollapsibleContent horizontal={horizontal} both={both}>
+			{children}
+		</CollapsibleContent>
+	</CollapsibleRoot>
+);

package/src/components/collapsible/index.ts

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

package/src/components/collapsible.ts

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

package/src/components/colorPicker/ColorPicker.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../select/Select.js';
+import classNames from 'classnames';
+import { ReactNode } from 'react';
+import { withClassName } from '../../hooks/withClassName.js';
+
+export type ThemeName = 'lemon' | 'tomato' | 'leek' | 'blueberry' | 'eggplant';
+
+export interface ColorPickerProps {
+  value: ThemeName | null;
+  onChange: (value: ThemeName) => void;
+}
+
+export function ColorPicker({ value, onChange }: ColorPickerProps) {
+  const resolvedValue = [
+    'lemon',
+    'tomato',
+    'leek',
+    'blueberry',
+    'eggplant',
+  ].includes(value || '')
+    ? (value as ThemeName)
+    : 'lemon';
+
+  return (
+    <Select value={resolvedValue} onValueChange={onChange}>
+      <SelectTrigger>
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent className="z-[calc(var(--z-dialog)+1)]">
+        <SelectItem value="lemon">
+          <ColorSwatch value="lemon" />
+          <ItemLabel>Lemon</ItemLabel>
+        </SelectItem>
+        <SelectItem value="tomato">
+          <ColorSwatch value="tomato" />
+          <ItemLabel>Tomato</ItemLabel>
+        </SelectItem>
+        <SelectItem value="leek">
+          <ColorSwatch value="leek" />
+          <ItemLabel>Leek</ItemLabel>
+        </SelectItem>
+        <SelectItem value="blueberry">
+          <ColorSwatch value="blueberry" />
+          <ItemLabel>Blueberry</ItemLabel>
+        </SelectItem>
+        <SelectItem value="eggplant">
+          <ColorSwatch value="eggplant" />
+          <ItemLabel>Eggplant</ItemLabel>
+        </SelectItem>
+      </SelectContent>
+    </Select>
+  );
+}
+
+const ItemLabel = withClassName('span', 'display-none');
+
+export function ColorSwatch({
+  value,
+  children,
+}: {
+  value: ThemeName;
+  children?: ReactNode;
+}) {
+  return (
+    <div
+      className={classNames(
+        'bg-primary w-16px h-16px rounded-sm',
+        `theme-${value ?? 'lemon'}`,
+      )}
+    >
+      {children}
+    </div>
+  );
+}

package/src/components/colorPicker/index.ts

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

package/src/components/colorPicker.ts

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

package/src/components/contextMenu/contextMenu.tsx

@@ -0,0 +1,43 @@
+import * as ContextMenu from '@radix-ui/react-context-menu';
+import { ComponentPropsWithoutRef, forwardRef } from 'react';
+import { withClassName } from '../../hooks/withClassName.js';
+import classNames from 'classnames';
+
+export const ContextMenuRoot = ContextMenu.Root;
+
+export const ContextMenuContent = forwardRef<
+	HTMLDivElement,
+	ComponentPropsWithoutRef<typeof ContextMenu.Content>
+>(function Content({ className, onClick, ...props }, ref) {
+	return (
+		<ContextMenu.Portal>
+			<ContextMenu.Content
+				className={classNames(
+					'layer-components:(min-w-120px bg-white rounded-md border-default overflow-hidden p-2 shadow-md z-menu)',
+					'layer-components:transform-origin-[var(--radix-context-menu-transform-origin)]',
+					'layer-components:[&[data-state=open]]:animate-popover-in',
+					'layer-components:[&[data-state=closed]]:animate-popover-out',
+					'layer-components:(max-h-[var(--radix-context-menu-content-available-height)] overflow-y-auto)',
+					'important:motion-reduce:animate-none',
+					className,
+				)}
+				onClick={(ev) => {
+					ev.stopPropagation();
+					onClick?.(ev);
+				}}
+				ref={ref}
+				{...props}
+			/>
+		</ContextMenu.Portal>
+	);
+});
+
+export const ContextMenuArrow = withClassName(ContextMenu.Arrow, 'fill-white');
+
+export const ContextMenuItem = withClassName(
+	ContextMenu.Item,
+	'flex items-center py-1 px-2 relative pl-25px select-none outline-none cursor-pointer',
+	'hover:bg-gray2 [&[data-highlighted=true]]:bg-gray2 [&[data-disabled=true]]:(opacity-50 cursor-default) disabled:(opacity-50 cursor-default)',
+);
+
+export const ContextMenuTrigger = withClassName(ContextMenu.Trigger, '');

package/src/components/contextMenu.ts

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

package/src/components/dialog/Dialog.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+	Dialog,
+	DialogContent,
+	DialogTrigger,
+	DialogActions,
+	DialogClose,
+	DialogTitle,
+} from './Dialog.js';
+
+const meta = {
+	title: 'Dialog',
+	component: Dialog,
+	argTypes: {},
+	parameters: {
+		controls: { expanded: true },
+	},
+} satisfies Meta<typeof Dialog>;
+
+export default meta;
+
+type Story = StoryObj<typeof Dialog>;
+
+export const Default: Story = {
+	args: {
+		children: (
+			<>
+				<DialogTrigger>Open</DialogTrigger>
+				<DialogContent>
+					<DialogTitle>Hello world</DialogTitle>
+					<DialogActions>
+						<DialogClose>Close</DialogClose>
+					</DialogActions>
+				</DialogContent>
+			</>
+		),
+	},
+};