@a-type/ui 0.1.2 → 0.1.4

package/src/components/divider/Divider.tsx

@@ -1,26 +0,0 @@
-import { HTMLAttributes, forwardRef } from 'react';
-import { withClassName } from '../../hooks/withClassName.js';
-import classNames from 'classnames';
-
-const DividerBase = withClassName('div', 'w-full h-1px bg-black relative');
-
-export interface DividerProps extends HTMLAttributes<HTMLDivElement> {
-	compensate?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
-	padded?: boolean;
-}
-
-export const Divider = forwardRef<HTMLDivElement, DividerProps>(
-	function Divider({ compensate, padded, className, ...props }, ref) {
-		return (
-			<DividerBase
-				ref={ref}
-				style={{
-					left: compensate ? `calc(${compensate} * 0.25rem)` : undefined,
-					width: compensate ? `calc(100% - ${compensate} * 0.5rem)` : undefined,
-				}}
-				{...props}
-				className={classNames(padded && 'my-4', className)}
-			/>
-		);
-	},
-);

package/src/components/dropdownMenu/DropdownMenu.tsx

@@ -1,85 +0,0 @@
-'use client';
-
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import { withClassName } from '../../hooks/withClassName.js';
-import classNames from 'classnames';
-
-const StyledContent = withClassName(
-	DropdownMenuPrimitive.Content,
-	'min-w-220px bg-white z-menu shadow-lg rounded-xl p-2 border-default',
-	'[&[data-state=open][data-side=top]]animate-fade-in-up',
-	'[&[data-state=open][data-side=right]]animate-fade-in-right',
-	'[&[data-state=open][data-side=bottom]]animate-fade-in-down',
-	'[&[data-state=open][data-side=left]]animate-fade-in-left',
-	'important:motion-reduce:animate-none',
-	'will-change-transform',
-);
-const itemClassName = classNames(
-	'text-md leading-4 color-black rounded-sm flex items-center h-36px pr-1 pl-6 relative text-left select-none cursor-pointer',
-	'[&[data-disabled]]:(color-gray9 pointer-events-none)',
-	'focus-visible:(bg-gray2 color-gray9)',
-);
-const StyledItem = withClassName(DropdownMenuPrimitive.Item, itemClassName);
-const StyledCheckboxItem = withClassName(
-	DropdownMenuPrimitive.CheckboxItem,
-	itemClassName,
-);
-const StyledRadioItem = withClassName(
-	DropdownMenuPrimitive.RadioItem,
-	itemClassName,
-);
-
-const StyledLabel = withClassName(
-	DropdownMenuPrimitive.Label,
-	'pl-25px text-12px leading-6 color-gray7',
-);
-
-const StyledSeparator = withClassName(
-	DropdownMenuPrimitive.Separator,
-	'h-1px bg-gray5 m-5px',
-);
-
-const StyledItemIndicator = withClassName(
-	DropdownMenuPrimitive.ItemIndicator,
-	'absolute left-0 w-25px inline-flex items-center justify-center',
-);
-
-const StyledArrow = withClassName(
-	DropdownMenuPrimitive.Arrow,
-	'fill-white stroke-black',
-);
-
-const StyledTrigger = withClassName(
-	DropdownMenuPrimitive.Trigger,
-	'select-none',
-);
-
-const StyledPortal = DropdownMenuPrimitive.Portal;
-
-// Exports
-export const DropdownMenu = DropdownMenuPrimitive.Root;
-export const DropdownMenuTrigger = StyledTrigger;
-export const DropdownMenuItem = StyledItem;
-export const DropdownMenuCheckboxItem = StyledCheckboxItem;
-export const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-export const DropdownMenuRadioItem = StyledRadioItem;
-export const DropdownMenuItemIndicator = StyledItemIndicator;
-export const DropdownMenuLabel = StyledLabel;
-export const DropdownMenuSeparator = StyledSeparator;
-export const DropdownMenuArrow = StyledArrow;
-
-export const DropdownMenuContent = ({
-	children,
-	forceMount,
-	...props
-}: DropdownMenuPrimitive.DropdownMenuContentProps & {
-	forceMount?: boolean;
-}) => {
-	return (
-		<StyledPortal forceMount={forceMount}>
-			<StyledContent {...props}>{children}</StyledContent>
-		</StyledPortal>
-	);
-};
-
-export const DropdownMenuItemRightSlot = withClassName('div', 'ml-auto');

package/src/components/errorBoundary/ErrorBoundary.tsx

@@ -1,23 +0,0 @@
-'use client';
-import React, { Component, ReactNode } from 'react';
-
-export class ErrorBoundary extends Component<
-	{ children: ReactNode; fallback?: ReactNode },
-	{ error: Error | null }
-> {
-	state = {
-		error: null,
-	};
-
-	static getDerivedStateFromError(error: Error) {
-		// Update state so the next render will show the fallback UI.
-		return { error };
-	}
-
-	render() {
-		if (this.state.error) {
-			return this.props.fallback || null;
-		}
-		return this.props.children;
-	}
-}

package/src/components/forms/FormikForm.tsx

@@ -1,41 +0,0 @@
-import { Formik, FormikConfig, FormikHelpers, FormikValues } from 'formik';
-import { Form } from './Form.jsx';
-import { useCallback } from 'react';
-
-export interface FormikFormProps<T extends FormikValues = FormikValues>
-	extends FormikConfig<T> {
-	className?: string;
-}
-
-export function FormikForm<Values extends FormikValues>({
-	className,
-	children,
-	onSubmit,
-	...props
-}: FormikFormProps<Values>) {
-	const wrappedOnSubmit = useCallback(
-		async (values: Values, bag: FormikHelpers<Values>) => {
-			try {
-				bag.setSubmitting(true);
-				return await onSubmit(values, bag);
-			} finally {
-				bag.setSubmitting(false);
-			}
-		},
-		[onSubmit],
-	);
-
-	if (typeof children === 'function') {
-		return (
-			<Formik<Values> onSubmit={wrappedOnSubmit} {...props}>
-				{(formik) => <Form className={className}>{children(formik)}</Form>}
-			</Formik>
-		);
-	}
-
-	return (
-		<Formik<Values> onSubmit={wrappedOnSubmit} {...props}>
-			<Form className={className}>{children}</Form>
-		</Formik>
-	);
-}

package/src/components/forms/SubmitButton.tsx

@@ -1,15 +0,0 @@
-import { useFormikContext } from 'formik';
-import { Button, ButtonProps } from '../button/Button.js';
-
-export function SubmitButton(props: ButtonProps) {
-	const { isSubmitting, isValid } = useFormikContext();
-	return (
-		<Button
-			loading={isSubmitting}
-			disabled={!isValid}
-			color="primary"
-			type="submit"
-			{...props}
-		/>
-	);
-}

package/src/components/forms/TextField.tsx

@@ -1,112 +0,0 @@
-'use client';
-
-import { useField } from 'formik';
-import {
-	ComponentProps,
-	InputHTMLAttributes,
-	useEffect,
-	useRef,
-	Ref,
-	forwardRef,
-} from 'react';
-import useMergedRef from '../../hooks/useMergedRef.js';
-import classNames from 'classnames';
-import { Input } from '../input/Input.js';
-import { TextArea, TextAreaProps } from '../textArea/TextArea.jsx';
-import { withClassName } from '../../hooks.js';
-
-export type TextFieldProps = {
-	name: string;
-	label?: string;
-	required?: boolean;
-	type?: InputHTMLAttributes<HTMLInputElement>['type'];
-	className?: string;
-	placeholder?: string;
-	autoComplete?: InputHTMLAttributes<HTMLInputElement>['autoComplete'];
-	autoFocus?: InputHTMLAttributes<HTMLInputElement>['autoFocus'];
-	autoFocusDelay?: number;
-	inputRef?: Ref<HTMLInputElement>;
-} & ComponentProps<typeof Input>;
-
-const emptyRef = (() => {}) as any;
-
-export const TextField = forwardRef<HTMLDivElement, TextFieldProps>(
-	function TextField(
-		{
-			name,
-			label,
-			className,
-			autoFocusDelay,
-			autoFocus,
-			inputRef,
-			onChange,
-			onFocus,
-			onBlur,
-			...rest
-		},
-		ref,
-	) {
-		const [props] = useField({
-			name,
-			onChange,
-			onFocus,
-			onBlur,
-		});
-		const innerInputRef = useRef<HTMLInputElement>(null);
-
-		useEffect(() => {
-			if (autoFocusDelay) {
-				setTimeout(() => {
-					if (innerInputRef.current) innerInputRef.current.focus();
-				}, autoFocusDelay);
-			}
-		}, [autoFocusDelay]);
-
-		return (
-			<FieldRoot className={className} ref={ref}>
-				{label && <FieldLabel>{label}</FieldLabel>}
-				<Input
-					{...props}
-					{...rest}
-					autoFocus={autoFocus}
-					ref={useMergedRef(innerInputRef, inputRef || emptyRef)}
-				/>
-			</FieldRoot>
-		);
-	},
-);
-
-export type TextAreaFieldProps = {
-	name: string;
-	label?: string;
-	required?: boolean;
-	rows?: number;
-	disabled?: boolean;
-	className?: string;
-	inputRef?: Ref<HTMLTextAreaElement>;
-} & TextAreaProps;
-
-export function TextAreaField({
-	name,
-	label,
-	className,
-	inputRef,
-	...rest
-}: TextAreaFieldProps) {
-	const [props] = useField(name);
-	return (
-		<FieldRoot className={className}>
-			{label && <FieldLabel>{label}</FieldLabel>}
-			<TextArea ref={inputRef} {...props} {...rest} />
-		</FieldRoot>
-	);
-}
-
-const FieldRoot = withClassName(
-	'div',
-	'flex flex-col items-stretch gap-1 self-stretch',
-);
-const FieldLabel = withClassName(
-	'label',
-	'inline-flex flex-col gap-1 text-sm font-bold text-dark-blend mb-1',
-);

package/src/components/imageUploader/ImageUploader.tsx

@@ -1,143 +0,0 @@
-'use client';
-
-import classNames from 'classnames';
-import { useCallback, useState } from 'react';
-import { UploadIcon } from './UploadIcon.jsx';
-
-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 [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();
-	}, []);
-
-	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}
-			<input
-				type="file"
-				accept="image/*"
-				onChange={onFileChange}
-				onClick={onFileClick}
-				className="absolute inset-0 op-0 w-full h-full cursor-pointer"
-			/>
-			<div
-				className={classNames(
-					'bg-[rgba(30,20,0,0.1)] flex flex-col items-center justify-center w-full h-full absolute inset-0 gap-3 pointer-events-none',
-					draggingOver && 'bg-[rgba(0,0,0,0.2)]',
-				)}
-			>
-				<UploadIcon className="w-50px h-50px color-white" />
-				<div className="color-white">
-					{dragging ? 'Drop' : 'Tap'} to upload image
-				</div>
-			</div>
-			{value && (
-				<button
-					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 hover:bg-gray2"
-					onClick={() => onChange(null)}
-				>
-					✕
-				</button>
-			)}
-		</div>
-	);
-}

package/src/components/imageUploader/UploadIcon.tsx

@@ -1,23 +0,0 @@
-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/infiniteLoadTrigger/InfiniteLoadTrigger.tsx

@@ -1,38 +0,0 @@
-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/input/Input.tsx

@@ -1,22 +0,0 @@
-import classNames from 'classnames';
-import { withClassName } from '../../hooks/withClassName.js';
-import { ComponentProps, ComponentPropsWithRef, forwardRef } from 'react';
-
-export const inputClassName = classNames(
-	'layer-components:(px-3 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 = withClassName(
-	forwardRef<HTMLInputElement, ComponentProps<'input'>>(function Input(
-		props,
-		ref,
-	) {
-		return <input {...props} ref={ref} />;
-	}),
-	inputClassName,
-);
-
-export type InputProps = ComponentPropsWithRef<'input'>;

package/src/components/layouts/PageContent.tsx

@@ -1,43 +0,0 @@
-import classNames from 'classnames';
-import { HTMLAttributes } from 'react';
-import { NavOutlet } from './PageNav.jsx';
-
-export function PageContent({
-	children,
-	fullHeight,
-	noPadding,
-	innerProps,
-	className,
-	...rest
-}: HTMLAttributes<HTMLDivElement> & {
-	fullHeight?: boolean;
-	noPadding?: boolean;
-	innerProps?: HTMLAttributes<HTMLDivElement>;
-}) {
-	return (
-		<div
-			className={classNames(
-				'grid grid-areas-[innerContent] grid-cols-[1fr] grid-rows-[1fr] items-start justify-center relative flex-1 gap-3 h-max-content',
-				'sm:(grid-areas-[gutter1_nav_innerContent_gutter2] grid-cols-[1fr_auto_min(800px,60vw)_1fr])',
-				className,
-			)}
-			{...rest}
-		>
-			<div
-				{...innerProps}
-				className={classNames(
-					'w-full min-w-0 flex flex-col mb-120px [grid-area:innerContent] px-4 py-6',
-					'sm:(max-w-700px w-full)',
-					{
-						'flex-1': fullHeight,
-						'important:(p-0 sm:p-4)': noPadding,
-					},
-					innerProps?.className,
-				)}
-			>
-				{children}
-			</div>
-			<NavOutlet />
-		</div>
-	);
-}

package/src/components/layouts/PageFixedArea.tsx

@@ -1,17 +0,0 @@
-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

@@ -1,63 +0,0 @@
-'use client';
-
-import {
-	createContext,
-	HTMLAttributes,
-	memo,
-	ReactNode,
-	useContext,
-	useMemo,
-	useState,
-} from 'react';
-import { createPortal } from 'react-dom';
-import { NowPlayingContext } from './PageNowPlayingContext.jsx';
-import classNames from 'classnames';
-
-const NavContext = createContext<{
-	container: HTMLDivElement | null;
-	setContainer: (container: HTMLDivElement) => void;
-}>({ container: null, setContainer: () => {} });
-
-export const NavOutlet = memo(function NavOutlet() {
-	const { setContainer } = useContext(NavContext);
-
-	return (
-		<div
-			className={classNames(
-				'[grid-area:auto] fixed bottom-0 left-0 right-0 z-nav',
-				'sm:([grid-area:nav] sticky top-0 h-auto bottom-auto left-auto right-auto)',
-			)}
-			ref={setContainer}
-		/>
-	);
-});
-
-export function NavContextProvider({ children }: { children: ReactNode }) {
-	const [container, setContainer] = useState<HTMLDivElement | null>(null);
-	const value = useMemo(() => ({ container, setContainer }), [container]);
-
-	return <NavContext.Provider value={value}>{children}</NavContext.Provider>;
-}
-
-export function PageNav({
-	className,
-	innerClassName,
-	children,
-	...props
-}: HTMLAttributes<HTMLDivElement> & { innerClassName?: string }) {
-	const { container } = useContext(NavContext);
-	const { setContainer } = useContext(NowPlayingContext);
-
-	if (!container) return null;
-
-	return createPortal(
-		<>
-			<div className={innerClassName}>{children}</div>
-			<div
-				ref={setContainer}
-				className="absolute bottom-full w-full flex flex-col gap-2 items-end p-2 sm:(fixed bottom-3 left-50% translate-x--50% top-auto items-end w-full max-w-600px p-0) md:(w-80% max-w-800px)"
-			/>
-		</>,
-		container,
-	);
-}