@a-type/ui 0.3.2 → 0.4.0

package/src/components/relativeTime/index.ts

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

package/src/components/relativeTime.ts

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

package/src/components/richEditor/EditorContent.tsx

@@ -0,0 +1,4 @@
+// @ts-nocheck
+import { EditorContent } from '@tiptap/react';
+
+export default EditorContent;

package/src/components/richEditor/RichEditor.tsx

@@ -0,0 +1,38 @@
+'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(
+				'layer-components:(w-full rounded-lg)',
+				!rest.readOnly &&
+					'bg-gray-blend [&_.ProseMirror:focus]:(outline-none bg-gray-1 shadow-focus)',
+				'[&_.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)',
+				'[&_.ProseMirror_a]:underline',
+				className,
+			)}
+			{...rest}
+		/>
+	);
+});

package/src/components/richEditor/index.ts

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

package/src/components/richEditor.ts

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

package/src/components/select/Select.tsx

@@ -0,0 +1,247 @@
+'use client';
+
+import {
+	CheckIcon,
+	ChevronDownIcon,
+	ChevronUpIcon,
+} from '@radix-ui/react-icons';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import {
+	ComponentPropsWithRef,
+	ComponentType,
+	ElementType,
+	FunctionComponent,
+	ReactNode,
+	createContext,
+	forwardRef,
+	useContext,
+} from 'react';
+import classNames from 'classnames';
+import { withClassName } from '../../hooks/withClassName.js';
+
+export const SelectItem = forwardRef<
+	HTMLDivElement,
+	SelectPrimitive.SelectItemProps
+>(({ children, className, ...props }, forwardedRef) => {
+	const isNative = useContext(IsNativeContext);
+
+	if (isNative) {
+		return <option value={props.value}>{children}</option>;
+	}
+
+	return (
+		<SelectItemRoot className={className} {...props} ref={forwardedRef}>
+			<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+			<SelectItemIndicator />
+		</SelectItemRoot>
+	);
+});
+
+export const SelectItemRoot = withClassName(
+	SelectPrimitive.Item,
+	'text-md leading-4 color-black rounded-sm flex items-center flex-row h-36px pr-4 pl-35px relative select-none',
+	'[&[data-disabled]]:(color-gray5 pointer-events-none) [&[data-highlighted]]:(outline-none bg-primary-wash color-black)',
+);
+export const SelectItemIndicatorRoot = withClassName(
+	SelectPrimitive.ItemIndicator,
+	'absolute left-0 w-25px inline-flex items-center justify-center',
+);
+export const SelectItemIndicator = withNoNativeRender(
+	(props: SelectPrimitive.SelectItemIndicatorProps) => (
+		<SelectItemIndicatorRoot {...props}>
+			<CheckIcon />
+		</SelectItemIndicatorRoot>
+	),
+);
+export const SelectItemText = withClassName(SelectPrimitive.ItemText, '');
+export const SelectGroup = (props: SelectPrimitive.SelectGroupProps) => {
+	const isNative = useContext(IsNativeContext);
+
+	if (isNative) {
+		return (
+			<optgroup id={props.id} className={props.className}>
+				{props.children}
+			</optgroup>
+		);
+	}
+
+	return <SelectPrimitive.Group {...props} />;
+};
+
+export const SelectRoot = SelectPrimitive.Root;
+export const selectTriggerClassName =
+	'layer-components:([all:unset] inline-flex items-center justify-center rounded-full px-3 py-1 text-sm gap-2 color-black border-solid border border-gray5 hover:border-gray7 focus:shadow-focus [&[data-placeholder]]:color-gray8) select-none';
+export const SelectTrigger = withNoNativeRender(
+	withClassName(SelectPrimitive.Trigger, selectTriggerClassName),
+);
+export const UnstyledSelectTrigger = withNoNativeRender(
+	SelectPrimitive.Trigger,
+);
+
+export const SelectValue = withNoNativeRender(
+	withClassName(SelectPrimitive.Value, 'flex flex-row'),
+);
+export const SelectLabel = withNoNativeRender(
+	withClassName(
+		SelectPrimitive.Label,
+		'px-25px text-xs leading-6 color-black select-none',
+	),
+);
+export const SelectSeparator = withNoNativeRender(
+	withClassName(SelectPrimitive.Separator, 'h-1px bg-gray50 m-1'),
+);
+export const SelectIcon = withNoNativeRender(
+	forwardRef<HTMLDivElement, SelectPrimitive.SelectIconProps>(
+		({ className, ...props }, forwardedRef) => {
+			return (
+				<SelectPrimitive.Icon
+					className={classNames('color-inherit', className)}
+					{...props}
+					ref={forwardedRef}
+				>
+					<ChevronDownIcon />
+				</SelectPrimitive.Icon>
+			);
+		},
+	),
+);
+
+const zIndex = { zIndex: 1001 };
+export const SelectContent = withPassthroughNativeRender(
+	forwardRef<
+		HTMLDivElement,
+		SelectPrimitive.SelectContentProps & { inDialog?: boolean }
+	>(({ children, inDialog, className, ...props }, forwardedRef) => {
+		return (
+			<SelectPrimitive.Portal className={className} style={zIndex}>
+				<SelectPrimitive.Content
+					className={classNames(
+						'layer-components:(overflow-hidden bg-white rounded-lg border border-solid border-1 border-black z-menu shadow-lg)',
+						'layer-components:transform-origin-[var(--radix-select-content-transform-origin)]',
+						'layer-components:[&[data-state=open]]:animate-popover-in',
+						'layer-components:[&[data-state=closed]]:animate-popover-out',
+						'layer-components:(min-w-[var(--radix-select-trigger-width)] max-h-[var(--radix-select-content-available-height)])',
+						inDialog && 'z-[calc(var(--z-dialog)+1)]',
+					)}
+					{...props}
+					ref={forwardedRef}
+				>
+					<SelectPrimitive.ScrollUpButton className="flex items-center justify-center h-25px bg-white color-primary-dark cursor-default">
+						<ChevronUpIcon />
+					</SelectPrimitive.ScrollUpButton>
+					<SelectPrimitive.Viewport className="p-1">
+						{children}
+					</SelectPrimitive.Viewport>
+					<SelectPrimitive.ScrollDownButton className="flex items-center justify-center h-25px bg-white color-primary-dark cursor-default">
+						<ChevronDownIcon />
+					</SelectPrimitive.ScrollDownButton>
+				</SelectPrimitive.Content>
+			</SelectPrimitive.Portal>
+		);
+	}),
+);
+
+export const NativeSelect = forwardRef<
+	HTMLSelectElement,
+	React.SelectHTMLAttributes<HTMLSelectElement>
+>(({ className, ...props }, forwardedRef) => {
+	return (
+		<div className={classNames('relative', className)}>
+			<select
+				className={classNames(
+					'appearance-none font-inherit bg-white inline-flex items-center justify-center rounded-full px-3 py-1 pr-8 text-sm gap-2 color-black border-solid border border-gray5 hover:border-gray7 focus:outline-none focus-visible:shadow-focus [&[data-placeholder]]:color-gray8',
+				)}
+				{...props}
+				ref={forwardedRef}
+			/>
+			<div className="absolute right-1 top-50% translate-y-[-50%] pointer-events-none">
+				<ChevronDownIcon className="w-4 h-4 m-2" />
+			</div>
+		</div>
+	);
+});
+
+export type SelectProps<T extends string = string> = {
+	children?: ReactNode;
+	value: T;
+	onValueChange?: (value: T) => void;
+	className?: string;
+	id?: string;
+	/** Native on mobile; otherwise use custom select impl */
+	mobileNative?: boolean;
+	/** won't work on mobile and mobileNative=true */
+	open?: boolean;
+	/** won't work on mobile and mobileNative=true */
+	onOpenChange?: (open: boolean) => void;
+};
+/**
+ * A high-level Select which converts to native on mobile. Use with SelectItem.
+ */
+export const Select = <T extends string = string>({
+	children,
+	value,
+	onValueChange,
+	mobileNative,
+	...rest
+}: SelectProps<T>) => {
+	const mobile = isMobile();
+
+	if (mobile && mobileNative) {
+		return (
+			<IsNativeContext.Provider value={true}>
+				<NativeSelect
+					onChange={(ev) => {
+						onValueChange?.(ev.target.value as any);
+					}}
+					value={value}
+					{...rest}
+				>
+					{children}
+				</NativeSelect>
+			</IsNativeContext.Provider>
+		);
+	}
+
+	return (
+		<SelectRoot value={value} onValueChange={onValueChange}>
+			{children}
+		</SelectRoot>
+	);
+};
+
+function isMobile() {
+	return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+		navigator.userAgent,
+	);
+}
+
+// facilitate the auto native switching
+const IsNativeContext = createContext(false);
+
+function withNoNativeRender<T extends ComponentType<any> | ElementType<any>>(
+	Component: T,
+): FunctionComponent<ComponentPropsWithRef<T>> {
+	const WithNoNativeRender = forwardRef<any, any>((props, ref) => {
+		const isNative = useContext(IsNativeContext);
+
+		if (isNative) return null;
+
+		return <Component ref={ref} {...props} />;
+	});
+	return WithNoNativeRender as any;
+}
+
+function withPassthroughNativeRender<
+	T extends ComponentType<any> | ElementType<any>,
+>(Component: T): FunctionComponent<ComponentPropsWithRef<T>> {
+	const WithPassthroughNativeRender = forwardRef<any, any>((props, ref) => {
+		const isNative = useContext(IsNativeContext);
+
+		if (isNative) {
+			return <>{props.children}</>;
+		}
+
+		return <Component ref={ref} {...props} />;
+	});
+	return WithPassthroughNativeRender as any;
+}

package/src/components/select/index.ts

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

package/src/components/select.ts

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

package/src/components/skeletons/skeletons.tsx

@@ -0,0 +1,27 @@
+import { useState } from 'react';
+import classNames from 'classnames';
+
+export const TextSkeleton = ({
+	maxLength,
+	className,
+}: {
+	maxLength: number;
+	className?: string;
+}) => {
+	const [length] = useState(() =>
+		Math.round(Math.random() * (maxLength - 5) + 5),
+	);
+
+	return (
+		<span
+			className={classNames(
+				'w-full h-full rounded-2 bg-gradient-to-r from-gray1 via-gray2 to-gray1 [background-size:400%_400%] max-w-full animate-skeleton animate-duration-1200 animate-ease-in-out animate-iteration-infinite animate-alternate',
+				className,
+			)}
+			style={{
+				width: `${length}ch`,
+				height: '1.2em',
+			}}
+		/>
+	);
+};

package/src/components/skeletons.ts

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

package/src/components/spinner/Spinner.tsx

@@ -0,0 +1,59 @@
+import { HTMLAttributes, forwardRef } from 'react';
+import classNames from 'classnames';
+
+const CIRCLE_SIZE = 44;
+
+export interface SpinnerProps
+	extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+	size?: number;
+	thickness?: number;
+}
+
+export const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(
+	function Spinner(
+		{ size = 40, thickness = 7.2, className, style, ...props },
+		ref,
+	) {
+		return (
+			<div
+				ref={ref}
+				role="progressbar"
+				{...props}
+				className={classNames(
+					'inline-block animate-spin animate-ease-linear animate-iteration-infinite color-inherit animate-duration-1400 transform-origin-[50%_50%]',
+					className,
+				)}
+				style={{ width: size, height: size, ...style }}
+			>
+				<svg
+					className="block"
+					viewBox={`${CIRCLE_SIZE / 2} ${
+						CIRCLE_SIZE / 2
+					} ${CIRCLE_SIZE} ${CIRCLE_SIZE}`}
+				>
+					<circle
+						className="stroke-current animate-spinner-stroke animate-ease-in-out animate-iteration-infinite animate-duration-1400 [stroke-dasharray:80_200] [stroke-dashoffset:0]"
+						cx={CIRCLE_SIZE}
+						cy={CIRCLE_SIZE}
+						r={(CIRCLE_SIZE - thickness) / 2}
+						fill="none"
+						strokeWidth={thickness}
+					/>
+				</svg>
+			</div>
+		);
+	},
+);
+
+export const FullScreenSpinner = forwardRef<HTMLDivElement, SpinnerProps>(
+	function FullScreenSpinner(props, ref) {
+		return (
+			<div
+				ref={ref}
+				className="flex flex-row gap-4 w-full flex-1 justify-center items-center self-stretch"
+			>
+				<Spinner {...props} />
+			</div>
+		);
+	},
+);

package/src/components/spinner/index.ts

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

package/src/components/spinner.ts

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

package/src/components/switch/Switch.tsx

@@ -0,0 +1,23 @@
+import { withClassName } from '../../hooks/withClassName.js';
+import { Root, SwitchProps, Thumb } from '@radix-ui/react-switch';
+import { forwardRef } from 'react';
+
+const SwitchRoot = withClassName(
+	Root,
+	'unset w-42px h-25px bg-white rounded-full relative transition-color border-default flex-shrink-0 focus-visible:shadow-focus [&[data-state=checked]]:bg-accent',
+);
+
+const SwitchThumb = withClassName(
+	Thumb,
+	'block w-21px h-21px bg-white rounded-full border-default transition-transform will-change-transform [&[data-state=checked]]:translate-x-19px',
+);
+
+export const Switch = forwardRef<HTMLButtonElement, SwitchProps>(
+	function Switch(props, ref) {
+		return (
+			<SwitchRoot {...props} ref={ref}>
+				<SwitchThumb />
+			</SwitchRoot>
+		);
+	},
+);

package/src/components/switch/index.ts

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

package/src/components/switch.ts

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

package/src/components/tabs/tabs.tsx

@@ -0,0 +1,18 @@
+import * as Tabs from '@radix-ui/react-tabs';
+import { withClassName } from '../../hooks/withClassName.js';
+
+export const TabsRoot = withClassName(Tabs.Root, '');
+
+export const TabsList = withClassName(
+	Tabs.List,
+	'flex flex-row py-2 px-2 justify-center',
+);
+
+export const TabsTrigger = withClassName(
+	Tabs.Trigger,
+	'flex flex-row items-center justify-center gap-2 color-black py-1 px-4 bg-wash text-md font-bold min-w-100px border border-solid border-gray-4',
+	'hover:bg-gray-3 focus-visible:(shadow-focus outline-off) [&[data-state=active]]:(bg-primary-wash border-primary hover:bg-primary-wash relative z-1)',
+	'first:rounded-l-full last:rounded-r-full',
+);
+
+export const TabsContent = withClassName(Tabs.Content, '');

package/src/components/tabs.ts

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

package/src/components/textArea/TextArea.stories.tsx

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

package/src/components/textArea/TextArea.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import classNames from 'classnames';
+import useMergedRef from '../../hooks/useMergedRef.js';
+import { forwardRef, HTMLProps, useLayoutEffect, useRef } from 'react';
+import { inputClassName } from '../input.js';
+
+export interface TextAreaProps
+	extends Omit<HTMLProps<HTMLTextAreaElement>, 'ref'> {
+	className?: string;
+	autoSize?: boolean;
+	// if auto-size, pad the height by this many px
+	padBottomPixels?: number;
+}
+
+export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
+	function TextArea(
+		{ autoSize, className, rows, padBottomPixels = 0, ...rest },
+		ref,
+	) {
+		const innerRef = useRef<HTMLTextAreaElement>(null);
+		const finalRef = useMergedRef(innerRef, ref);
+
+		useLayoutEffect(() => {
+			if (!autoSize) return;
+			const element = innerRef.current;
+			let valueWasEmpty = false;
+			if (element) {
+				if (
+					element!.value !== '' ||
+					(!valueWasEmpty && element!.value === '') ||
+					padBottomPixels
+				) {
+					element!.style.height = 'auto';
+					const baseHeight = element!.scrollHeight;
+					element!.style.height = baseHeight + padBottomPixels + 'px';
+				}
+				valueWasEmpty = element!.value === '';
+			}
+		}, [autoSize, padBottomPixels, rest.value]);
+
+		return (
+			<textarea
+				ref={finalRef}
+				className={classNames(
+					inputClassName,
+					'layer-components:([font-family:inherit] text-inherit overflow-hidden)',
+					{
+						'layer-components:[resize:vertical]': !autoSize,
+					},
+					className,
+				)}
+				rows={autoSize ? 1 : rows}
+				{...rest}
+			/>
+		);
+	},
+);

package/src/components/textArea/index.ts

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

package/src/components/textArea.ts

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

package/src/components/toggleGroup/toggleGroup.tsx

@@ -0,0 +1,11 @@
+import * as ToggleGroup from '@radix-ui/react-toggle-group';
+import { withClassName } from '../../hooks/withClassName.js';
+
+export const ToggleGroupRoot = withClassName(
+	ToggleGroup.Root,
+	'inline-flex bg-gray1 rounded-lg gap-1',
+);
+export const ToggleGroupItem = withClassName(
+	ToggleGroup.Item,
+	'rounded-xl bg-gray2 py-1 px-2 flex items-center justify-center cursor-pointer hover:bg-gray3 active:bg-gray4 focus-visible:(shadow-focus outline-off) [&[data-state=on]]:(bg-primary-light border-black)',
+);

package/src/components/toggleGroup.ts

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

package/src/components/tooltip/Tooltip.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import React, { ComponentPropsWithoutRef } from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import classNames from 'classnames';
+
+function Content({
+	children,
+	className,
+	...props
+}: TooltipPrimitive.TooltipContentProps) {
+	return (
+		<TooltipPrimitive.Portal>
+			<TooltipPrimitive.Content
+				className={classNames(
+					'layer-components:(relative rounded-lg py-2 px-3 border-default text-sm leading-tight color-inherit bg-white shadow-sm select-none display-none z-tooltip sm:display-initial)',
+					'[&[data-state=delayed-open]]:display-initial',
+					'[&[data-state=instant-open]]:display-initial',
+					'layer-components:transform-origin-[var(--radix-tooltip-content-transform-origin)]',
+					'layer-components:[&[data-state=delayed-open]]:animate-popover-in',
+					className,
+				)}
+				{...props}
+			>
+				{children}
+				<TooltipPrimitive.Arrow className="fill-white stroke-black stroke-1" />
+			</TooltipPrimitive.Content>
+		</TooltipPrimitive.Portal>
+	);
+}
+
+// Exports
+export const TooltipProvider = TooltipPrimitive.Provider;
+
+export function Tooltip({
+	content,
+	children,
+	open,
+	disabled,
+	...rest
+}: { content: React.ReactNode; open?: boolean } & ComponentPropsWithoutRef<
+	typeof TooltipPrimitive.TooltipTrigger
+>) {
+	return (
+		<TooltipPrimitive.Root open={open}>
+			{disabled ? (
+				children
+			) : (
+				<TooltipPrimitive.TooltipTrigger asChild {...rest}>
+					{children}
+				</TooltipPrimitive.TooltipTrigger>
+			)}
+			<Content sideOffset={12}>{content}</Content>
+		</TooltipPrimitive.Root>
+	);
+}

package/src/components/tooltip/index.ts

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

package/src/components/tooltip.ts

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

package/src/components/typography/index.ts

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

package/src/components/typography/typography.tsx

@@ -0,0 +1,18 @@
+import { withClassName } from '../../hooks/withClassName.js';
+
+const baseHeadingClass = 'my-0';
+export const H1 = withClassName(
+	'h1',
+	baseHeadingClass,
+	'font-title text-2xl font-bold',
+);
+export const H2 = withClassName(
+	'h2',
+	baseHeadingClass,
+	'text-lg font-title font-bold color-gray9',
+);
+export const H3 = withClassName('h3', baseHeadingClass, 'font-title text-md');
+export const H4 = withClassName('h4', baseHeadingClass);
+export const H5 = withClassName('h5', baseHeadingClass);
+
+export const P = withClassName('p', 'my-0 leading-normal');

package/src/components/typography.ts

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

package/src/hooks/index.ts

@@ -0,0 +1,7 @@
+export * from './useMergedRef.js';
+export * from './useSize.js';
+export * from './useStableCallback.js';
+export * from './useToggle.js';
+export * from './useVisualViewportOffset.js';
+export * from './useOnUnmount.js';
+export * from './withClassName.js';

package/src/hooks/useMergedRef.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+function useMergedRef<T>(...refs: React.Ref<T>[]): React.RefCallback<T> {
+	return React.useCallback((element: T) => {
+		for (let i = 0; i < refs.length; i++) {
+			const ref = refs[i];
+			if (typeof ref === 'function') ref(element);
+			else if (ref && typeof ref === 'object')
+				(ref as React.MutableRefObject<T>).current = element;
+		}
+	}, refs);
+}
+
+export default useMergedRef;