@a-type/ui 0.3.2 → 0.3.3

package/src/components/dialog/Dialog.tsx

@@ -0,0 +1,267 @@
+'use client';
+
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import {
+	ComponentPropsWithoutRef,
+	createContext,
+	forwardRef,
+	useCallback,
+	useContext,
+	useRef,
+	useState,
+} from 'react';
+import { withClassName } from '../../hooks/withClassName.js';
+import useMergedRef from '../../hooks/useMergedRef.js';
+import { useParticles } from '../particles.js';
+import classNames from 'classnames';
+import { CheckIcon, ChevronDownIcon } from '@radix-ui/react-icons';
+import { selectTriggerClassName } from '../select.js';
+import { useDrag } from '@use-gesture/react';
+
+const StyledOverlay = withClassName(
+	DialogPrimitive.Overlay,
+	'layer-components(bg-overlay fixed inset-0 z-dialog-backdrop animate-fade-in animate-duration-200)',
+	'layer-components:[&[data-state=closed]]:animate-fade-out',
+	'motion-reduce:animate-none',
+);
+
+const StyledContent = withClassName(
+	DialogPrimitive.Content,
+	'layer-components:(translate-0 z-dialog fixed bottom-[calc(var(--viewport-bottom-offset,0px)+var(--gesture-y,0px))] left-0 right-0 h-min-content max-h-[calc(0.85*var(--viewport-height,100vh))])',
+	'transform-gpu',
+	'animate-ease-out',
+	'layer-components:(shadow-xl bg-white rounded-tl-xl rounded-tr-xl p-6 pt-8 border-default border-b-0 overflow-y-auto flex flex-col pb-[calc(3rem+env(safe-area-inset-bottom,0px))])',
+	'animate-fade-in-up-big animate-duration-200 [&[data-state=closed]]:animate-fade-out-down-big animate-ease-in motion-reduce:animate-none',
+	'layer-components:sm:(left-50% top-50% translate-[-50%] w-90vw max-w-450px max-h-85vh pb-6 rounded-lg border-b-1 pt-6)',
+	'sm:(animate-dialog-in [&[data-state=closed]]:animate-dialog-out motion-reduce:animate-none)',
+);
+
+export const Content = forwardRef<
+	HTMLDivElement,
+	ComponentPropsWithoutRef<typeof StyledContent> & {
+		outerClassName?: string;
+		width?: 'lg' | 'md' | 'sm';
+	}
+>(function Content(
+	{ children, width, outerClassName, className, ...props },
+	ref,
+) {
+	const particles = useParticles();
+	const wasOpenRef = useRef(false);
+	const openRef = useCallback(
+		(element: HTMLDivElement | null) => {
+			if (
+				!wasOpenRef.current &&
+				element?.getAttribute('data-state') === 'open'
+			) {
+				wasOpenRef.current = true;
+
+				const matchesSmall = !window.matchMedia('(min-width:600px)').matches;
+				if (!matchesSmall) return;
+
+				setTimeout(() => {
+					particles?.addParticles(
+						particles.elementExplosion({
+							count: 20,
+							borders: ['top'],
+							color: [
+								{
+									space: 'rgb',
+									values: [0, 0, 0],
+									opacity: 0.02,
+								},
+								{
+									space: 'rgb',
+									values: [0, 0, 0],
+									opacity: 0,
+								},
+							],
+							element,
+							startRadius: 15,
+							endRadius: 0,
+							lifespan: 1000,
+							force: 0.5,
+							drag: 0.01,
+							forceFuzz: 0.5,
+							angleFuzz: 0.1,
+						}),
+					);
+				}, 180);
+			} else if (element?.getAttribute('data-state') === 'closed') {
+				wasOpenRef.current = false;
+			}
+		},
+		[particles],
+	);
+
+	const gestureRef = useRef<HTMLDivElement>(null);
+
+	const finalRef = useMergedRef(ref, openRef, gestureRef);
+
+	return (
+		<DialogPrimitive.Portal>
+			<StyledOverlay />
+			<StyledContent
+				data-dialog-content
+				ref={finalRef}
+				{...props}
+				className={classNames(
+					{
+						'md:max-w-800px': width === 'lg',
+						'max-w-600px': width === 'md',
+						'max-w-300px': width === 'sm',
+					},
+					outerClassName || className,
+				)}
+			>
+				<DialogSwipeHandle />
+				{children}
+			</StyledContent>
+		</DialogPrimitive.Portal>
+	);
+});
+
+export const DialogSwipeHandle = forwardRef<
+	HTMLDivElement,
+	ComponentPropsWithoutRef<'div'>
+>(function DialogSwipeHandle({ className, ...props }, ref) {
+	const close = useContext(DialogCloseContext);
+	const innerRef = useRef<HTMLDivElement>(null);
+	useDrag(
+		({ swipe: [, swipeY], movement: [, dy], velocity: [, vy], last }) => {
+			const content = findParentDialogContent(innerRef.current);
+			if (!content) return;
+
+			const contentHeight = content.clientHeight;
+
+			if (last) console.log(swipeY, dy, contentHeight);
+
+			if (last && (swipeY === 1 || dy > contentHeight / 2)) {
+				console.log('close');
+				close();
+			}
+			const gestureY = last ? 0 : -Math.max(0, dy);
+			content.style.setProperty('--gesture-y', `${gestureY}px`);
+			content.style.setProperty('transition', last ? 'bottom 0.2s' : '');
+		},
+		{
+			target: innerRef,
+			axis: 'y',
+		},
+	);
+	const finalRef = useMergedRef(ref, innerRef);
+	return (
+		<div
+			ref={finalRef}
+			{...props}
+			className={classNames(
+				'absolute top-0 left-50% transform-gpu -translate-x-1/2 w-20% py-2 rounded-full cursor-grab sm:display-none touch-none',
+				className,
+			)}
+		>
+			<div className="w-full h-[4px] bg-gray-4 rounded-full" />
+		</div>
+	);
+});
+
+function findParentDialogContent(
+	element: HTMLElement | null,
+): HTMLElement | null {
+	if (!element) return null;
+	if (element.getAttribute('data-dialog-content')) return element;
+	return findParentDialogContent(element.parentElement);
+}
+
+const DialogCloseContext = createContext<() => void>(() => {});
+
+const StyledTitle = withClassName(
+	DialogPrimitive.Title,
+	'font-title color-black text-3xl mb-4 mt-0',
+);
+
+const StyledDescription = withClassName(
+	DialogPrimitive.Description,
+	'mt-3 mb-6 color-gray8 text-md leading-6',
+);
+
+// Exports
+export const Dialog = (props: DialogPrimitive.DialogProps) => {
+	const [innerOpen, innerOnOpenChange] = useState(props.defaultOpen);
+	const open = props.open ?? innerOpen;
+	const onOpenChange = useCallback(
+		(open: boolean) => {
+			innerOnOpenChange(open);
+			props.onOpenChange?.(open);
+		},
+		[props.onOpenChange],
+	);
+
+	const close = useCallback(() => {
+		onOpenChange(false);
+	}, [onOpenChange]);
+
+	return (
+		<DialogCloseContext.Provider value={close}>
+			<DialogPrimitive.Root
+				{...props}
+				open={open}
+				onOpenChange={onOpenChange}
+			/>
+		</DialogCloseContext.Provider>
+	);
+};
+export const DialogTrigger = DialogPrimitive.Trigger;
+export const DialogContent = Content;
+export const DialogTitle = StyledTitle;
+export const DialogDescription = StyledDescription;
+export const DialogClose = DialogPrimitive.Close;
+
+export type { DialogProps } from '@radix-ui/react-dialog';
+
+export const DialogActions = withClassName(
+	'div',
+	'flex justify-end sticky w-full gap-3 items-center bg-white py-3 translate-y-6 flex-wrap',
+	'bottom--6',
+	'sm:(bottom-0)',
+);
+
+export const DialogSelectTrigger = forwardRef<
+	HTMLButtonElement,
+	DialogPrimitive.DialogTriggerProps
+>(function DialogSelectTrigger({ children, className, ...props }, ref) {
+	return (
+		<DialogPrimitive.Trigger
+			className={classNames(selectTriggerClassName, className)}
+			{...props}
+		>
+			<span>{children}</span>
+			<ChevronDownIcon />
+		</DialogPrimitive.Trigger>
+	);
+});
+
+export const DialogSelectList = withClassName(
+	RadioGroupPrimitive.Root,
+	'flex flex-col gap-2 overflow-y-auto p-2',
+);
+
+export const DialogSelectItemRoot = withClassName(
+	RadioGroupPrimitive.Item,
+	'flex items-center gap-3 w-full py-3 px-4 text-left border-none rounded-lg font-normal bg-transparent [&:nth-child(2n+1)]:bg-gray-blend cursor-pointer transition-all',
+	'[&[data-state=checked]]:(bg-primary-wash text-primary-dark)',
+);
+
+export const DialogSelectItem = forwardRef<
+	HTMLButtonElement,
+	ComponentPropsWithoutRef<typeof DialogSelectItemRoot>
+>(function DialogSelectItem({ children, ...props }, ref) {
+	return (
+		<DialogSelectItemRoot {...props}>
+			<span className="flex-1">{children}</span>
+			<RadioGroupPrimitive.Indicator className="flex-0-0-auto">
+				<CheckIcon />
+			</RadioGroupPrimitive.Indicator>
+		</DialogSelectItemRoot>
+	);
+});

package/src/components/dialog/index.ts

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

package/src/components/dialog.ts

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

package/src/components/divider/Divider.tsx

@@ -0,0 +1,26 @@
+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/divider/index.ts

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

package/src/components/divider.ts

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

package/src/components/dropdownMenu/DropdownMenu.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuItemRightSlot,
+	DropdownMenuTrigger,
+} from './DropdownMenu.js';
+import { Icon } from '../icon.js';
+import { DropdownMenuLabel } from '@radix-ui/react-dropdown-menu';
+
+const meta = {
+	title: 'DropdownMenu',
+	component: DropdownMenu,
+	argTypes: {},
+	parameters: {
+		controls: { expanded: true },
+	},
+} satisfies Meta<typeof DropdownMenu>;
+
+export default meta;
+
+type Story = StoryObj<typeof DropdownMenu>;
+
+export const Default: Story = {
+	args: {
+		children: (
+			<>
+				<DropdownMenuTrigger>Open</DropdownMenuTrigger>
+				<DropdownMenuContent>
+					<DropdownMenuItem>
+						<DropdownMenuLabel>Item 1</DropdownMenuLabel>
+						<DropdownMenuItemRightSlot>
+							<Icon name="flag" />
+						</DropdownMenuItemRightSlot>
+					</DropdownMenuItem>
+					<DropdownMenuItem>
+						<DropdownMenuLabel>Item 2</DropdownMenuLabel>
+						<DropdownMenuItemRightSlot>
+							<Icon name="add_person" />
+						</DropdownMenuItemRightSlot>
+					</DropdownMenuItem>
+				</DropdownMenuContent>
+			</>
+		),
+	},
+};

package/src/components/dropdownMenu/DropdownMenu.tsx

@@ -0,0 +1,89 @@
+'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 border-default',
+	'layer-components:transform-origin-[var(--radix-dropdown-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-dropdown-menu-content-available-height)])',
+	'important:motion-reduce:animate-none',
+	'will-change-transform',
+);
+const itemClassName = classNames(
+	'text-md leading-4 color-black rounded-sm flex items-center pr-4 pl-8 py-3 relative text-left select-none cursor-pointer',
+	'[&[data-disabled]]:(color-gray9 pointer-events-none)',
+	'focus-visible:(bg-gray2 color-gray9)',
+	'focus:outline-none',
+);
+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 stroke-1',
+);
+
+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}>
+				<div className="overflow-hidden rounded-xl">{children}</div>
+				<StyledArrow />
+			</StyledContent>
+		</StyledPortal>
+	);
+};
+
+export const DropdownMenuItemRightSlot = withClassName('div', 'ml-auto');

package/src/components/dropdownMenu/index.ts

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

package/src/components/dropdownMenu.ts

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

package/src/components/errorBoundary/ErrorBoundary.tsx

@@ -0,0 +1,23 @@
+'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/errorBoundary/index.ts

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

package/src/components/errorBoundary.ts

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

package/src/components/forms/Form.tsx

@@ -0,0 +1,9 @@
+'use client';
+
+import { Form as FormikForm } from 'formik';
+import { withClassName } from '../../hooks/withClassName.js';
+
+export const Form = withClassName(
+	FormikForm,
+	'flex flex-col gap-2 items-start',
+);

package/src/components/forms/FormikForm.tsx

@@ -0,0 +1,41 @@
+import { Formik, FormikConfig, FormikHelpers, FormikValues } from 'formik';
+import { Form } from './Form.js';
+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

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

@@ -0,0 +1,112 @@
+'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.js';
+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/forms/index.tsx

@@ -0,0 +1,4 @@
+export * from './Form.js';
+export * from './SubmitButton.js';
+export * from './TextField.js';
+export * from './FormikForm.js';

package/src/components/forms.ts

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