@a-type/ui 6.1.16 → 6.1.18

package/src/components/drawer/Drawer.stories.tsx

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from '../button/index.js';
+import { H1, P } from '../typography/index.js';
+import { Drawer } from './Drawer.js';
+
+const meta: any = {
+	title: 'Components/Drawer',
+	component: Drawer,
+	argTypes: {},
+	parameters: {
+		controls: { expanded: true },
+	},
+} satisfies Meta<typeof Drawer>;
+
+export default meta;
+
+type Story = StoryObj<typeof Drawer>;
+
+function DummyContent() {
+	return (
+		<div style={{ display: 'flex', flexDirection: 'column' }}>
+			<H1>Some content</H1>
+			<P>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at
+				porttitor sem. Aliquam erat volutpat. Donec fermentum tortor eget ligula
+				accumsan, sit amet ullamcorper nunc ultricies. Nulla facilisi.
+			</P>
+			<Button disabled color="primary">
+				Click me
+			</Button>
+		</div>
+	);
+}
+
+export const Default: Story = {
+	args: {
+		children: (
+			<>
+				<Drawer.Trigger render={<Button />}>Open</Drawer.Trigger>
+				<Drawer.Content>
+					<Drawer.Title>Hello world</Drawer.Title>
+					<DummyContent />
+					<Drawer.Actions>
+						<Drawer.Close />
+						<Button emphasis="primary">Accept</Button>
+					</Drawer.Actions>
+				</Drawer.Content>
+			</>
+		),
+	},
+};
+
+export const NoDefaultClose: Story = {
+	args: {
+		children: (
+			<>
+				<Drawer.Trigger render={<Button />}>Open</Drawer.Trigger>
+				<Drawer.Content disableDefaultClose>
+					<Drawer.Title>No default close</Drawer.Title>
+					<DummyContent />
+					<Drawer.Actions>
+						<Drawer.Close />
+					</Drawer.Actions>
+				</Drawer.Content>
+			</>
+		),
+	},
+};

package/src/components/drawer/Drawer.tsx

@@ -0,0 +1,204 @@
+import {
+	Drawer as BaseDrawer,
+	DrawerCloseProps,
+	DrawerPopupProps,
+	DrawerRootProps,
+	DrawerTriggerProps,
+} from '@base-ui/react/drawer';
+import clsx from 'clsx';
+import { ComponentPropsWithoutRef, Ref, useCallback, useRef } from 'react';
+import useMergedRef from '../../hooks/useMergedRef.js';
+import { withClassName } from '../../hooks/withClassName.js';
+import { Box } from '../box/Box.js';
+import { Button } from '../button/index.js';
+import { Icon } from '../icon/Icon.js';
+import { useParticles } from '../particles/ParticleContext.js';
+import { ScrollArea } from '../scrollArea/ScrollArea.js';
+import cls from './Drawer.module.css';
+
+const DrawerOverlay = withClassName(BaseDrawer.Backdrop, cls.overlay);
+
+const StyledPopup = withClassName(BaseDrawer.Popup, cls.popup);
+
+export interface DrawerContentProps extends DrawerPopupProps {
+	disableDefaultClose?: boolean;
+	ref?: Ref<HTMLDivElement>;
+	innerClassName?: string;
+}
+
+const DrawerContent = function DrawerContent({
+	ref,
+	children,
+	className,
+	disableDefaultClose,
+	innerClassName,
+	...props
+}: DrawerContentProps) {
+	const particles = useParticles();
+	const wasOpenRef = useRef(false);
+
+	const openRef = useCallback(
+		(element: HTMLDivElement | null) => {
+			if (!wasOpenRef.current && element?.hasAttribute('data-open')) {
+				wasOpenRef.current = true;
+
+				setTimeout(() => {
+					particles?.addParticles(
+						particles.elementExplosion({
+							count: 20,
+							margin: 40,
+							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?.hasAttribute('data-open')) {
+				wasOpenRef.current = false;
+			}
+		},
+		[particles],
+	);
+
+	const finalRef = useMergedRef(ref, openRef);
+
+	return (
+		<BaseDrawer.Portal>
+			<DrawerOverlay />
+			<BaseDrawer.Viewport className={cls.viewport}>
+				<StyledPopup ref={finalRef} {...props} className={className}>
+					{!disableDefaultClose && <DrawerDefaultClose />}
+					<DrawerSwipeHandle />
+					<ScrollArea direction="vertical" className={cls.contentScrollArea}>
+						<ScrollArea.Content
+							className={clsx(cls.contentScrollAreaContent, innerClassName)}
+							style={{ minWidth: undefined }}
+						>
+							{children}
+						</ScrollArea.Content>
+					</ScrollArea>
+				</StyledPopup>
+			</BaseDrawer.Viewport>
+		</BaseDrawer.Portal>
+	);
+};
+
+function DrawerSwipeHandle({
+	ref,
+	className,
+	...props
+}: ComponentPropsWithoutRef<'div'> & {
+	ref?: React.Ref<HTMLDivElement>;
+}) {
+	return (
+		<div ref={ref} {...props} className={clsx(cls.swipeHandle, className)}>
+			<div className={cls.swipeHandleBar} />
+		</div>
+	);
+}
+
+function DrawerDefaultClose({
+	ref,
+	className,
+	...props
+}: DrawerCloseProps & {
+	ref?: React.Ref<HTMLButtonElement>;
+}) {
+	return (
+		<DrawerClose
+			className={clsx(cls.close, className)}
+			aria-label="Close drawer"
+			ref={ref}
+			{...props}
+			render={<Button emphasis="ghost" size="small" />}
+		>
+			<Icon name="x" />
+		</DrawerClose>
+	);
+}
+
+const DrawerTitle = withClassName(BaseDrawer.Title, cls.title);
+const DrawerDescription = withClassName(
+	BaseDrawer.Description,
+	cls.description,
+);
+
+// TODO: support swipeDirection
+export interface DrawerProps
+	extends Omit<DrawerRootProps, 'children' | 'swipeDirection'> {
+	children: React.ReactNode;
+}
+const defaultSnapPoints = [0.75, 1];
+const DrawerRoot = ({
+	children,
+	defaultSnapPoint = 0.5,
+	snapPoints = defaultSnapPoints,
+	...props
+}: DrawerProps) => {
+	return (
+		<BaseDrawer.Root
+			swipeDirection="down"
+			defaultSnapPoint={defaultSnapPoint}
+			snapPoints={snapPoints}
+			{...props}
+		>
+			<BaseDrawer.VirtualKeyboardProvider>
+				{children}
+			</BaseDrawer.VirtualKeyboardProvider>
+		</BaseDrawer.Root>
+	);
+};
+
+const DrawerTrigger = ({ render, ...props }: DrawerTriggerProps) => (
+	<BaseDrawer.Trigger render={render || <Button />} {...props} />
+);
+
+function DrawerClose({
+	children,
+	render,
+	...props
+}: DrawerCloseProps & {
+	ref?: React.Ref<HTMLButtonElement>;
+}) {
+	return (
+		<BaseDrawer.Close
+			render={render ?? <Button emphasis="default" />}
+			{...props}
+		>
+			{children ?? 'Close'}
+		</BaseDrawer.Close>
+	);
+}
+
+const DrawerActions = withClassName(Box, cls.actions);
+
+export const Drawer = Object.assign(DrawerRoot, {
+	Trigger: DrawerTrigger,
+	Content: DrawerContent,
+	Title: DrawerTitle,
+	Description: DrawerDescription,
+	Close: DrawerClose,
+	Actions: DrawerActions,
+	Unstyled: BaseDrawer as DrawerParts,
+	createHandle: BaseDrawer.createHandle,
+});
+
+export type DrawerParts = typeof BaseDrawer;

package/src/components/drawer/index.ts

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

package/src/components/index.ts

@@ -14,6 +14,7 @@ export * from './combobox/Combobox.js';
 export * from './contextMenu/contextMenu.js';
 export * from './datePicker/index.js';
 export * from './dialog/index.js';
+export * from './drawer/index.js';
 export * from './divider/index.js';
 export * from './dropdownMenu/index.js';
 export * from './editableText/EditableText.js';

package/src/hooks/withContextVariant.tsx

@@ -0,0 +1,24 @@
+import { createContext, useContext } from 'react';
+
+/**
+ * Creates a context and HOC which swaps between two components
+ * based on a contextual value
+ */
+export function createWithContextVariant() {
+	const Context = createContext(false);
+	function withContextVariant<P extends object>(
+		TrueComponent: React.ComponentType<P>,
+		FalseComponent: React.ComponentType<P>,
+	) {
+		return function WithContextVariant(props: P) {
+			const contextValue = useContext(Context);
+			const Component = contextValue ? TrueComponent : FalseComponent;
+			return <Component {...props} />;
+		};
+	}
+
+	return {
+		Context,
+		withContextVariant,
+	};
+}