@a-type/ui 0.8.27 → 0.8.29

package/dist/esm/components/scrollArea.js

@@ -0,0 +1,3 @@
+// @unocss-include
+export * from './scrollArea/ScrollArea.js';
+//# sourceMappingURL=scrollArea.js.map

package/dist/esm/components/scrollArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrollArea.js","sourceRoot":"","sources":["../../../src/components/scrollArea.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-type/ui",
-  "version": "0.8.27",
+  "version": "0.8.29",
   "type": "module",
   "files": [
     "/dist",
@@ -57,6 +57,7 @@
     "@radix-ui/react-menu": "^2.0.6",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-radio-group": "^1.1.3",
+    "@radix-ui/react-scroll-area": "^1.1.0",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slider": "^1.1.2",
     "@radix-ui/react-slot": "^1.0.2",

package/src/components/horizontalList/HorizontalList.stories.tsx

@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { HorizontalList } from './HorizontalList.js';
+import { Button } from '../button.js';
+import { Icon } from '../icon.js';
+import { useState } from 'react';
+
+const meta = {
+	title: 'HorizontalList',
+	component: HorizontalList,
+	argTypes: {},
+	args: {
+		children: (
+			<>
+				<Button size="small">One</Button>
+				<Button size="small">Two</Button>
+				<Button size="small">Three</Button>
+				<Button size="small">Four but long</Button>
+				<Button size="small">Five</Button>
+				<Button size="small">Six</Button>
+				<Button size="small">Seven</Button>
+				<Button size="small">Eight</Button>
+				<Button size="small">Nine</Button>
+				<Button size="small">Ten</Button>
+				<Button size="small">Eleven</Button>
+				<Button size="small">Twelve</Button>
+				<Button size="small">Thirteen</Button>
+				<Button size="small">Fourteen and long</Button>
+				<Button size="small">Fifteen</Button>
+				<Button size="small">Sixteen</Button>
+				<Button size="small">Seventeen</Button>
+				<Button size="small">Eighteen</Button>
+				<Button size="small">Nineteen</Button>
+				<Button size="small">Twenty</Button>
+				<Button size="small">Twenty one</Button>
+				<Button size="small">Twenty two</Button>
+				<Button size="small">Twenty three</Button>
+				<Button size="small">Twenty four</Button>
+				<Button
+					size="icon"
+					color="primary"
+					className="sticky right-2 bottom-2 flex-shrink-0 shadow-sm ml-auto"
+				>
+					<Icon name="plus" />
+				</Button>
+			</>
+		),
+	},
+	parameters: {
+		controls: { expanded: true },
+	},
+} satisfies Meta<typeof HorizontalList>;
+
+export default meta;
+
+type Story = StoryObj<typeof HorizontalList>;
+
+export const Default: Story = {
+	render: (args) => {
+		const [open, setOpen] = useState(false);
+		return (
+			<div className="bg-black flex flex-col items-center h-full">
+				<div className="bg-white w-400px flex flex-col items-stretch h-full">
+					<Button
+						toggled={open}
+						onClick={() => setOpen(!open)}
+						className="mt-auto mb-1 mr-1 self-end"
+					>
+						{open ? 'Close' : 'Open'}
+					</Button>
+					<HorizontalList
+						className="border-t border-t-solid border-t-black max-h-200px"
+						open={open}
+						{...args}
+					/>
+				</div>
+			</div>
+		);
+	},
+};

package/src/components/horizontalList/HorizontalList.tsx

@@ -0,0 +1,110 @@
+import clsx from 'clsx';
+import { ReactNode, useEffect, useRef } from 'react';
+import {
+	ScrollAreaProps,
+	ScrollAreaRoot,
+	ScrollAreaScrollbar,
+	ScrollAreaViewport,
+} from '../scrollArea/ScrollArea.js';
+
+export interface HorizontalListProps {
+	open?: boolean;
+	children: ReactNode;
+	className?: string;
+	contentClassName?: string;
+	background?: ScrollAreaProps['background'];
+}
+
+export function HorizontalList({
+	open,
+	children,
+	className,
+	contentClassName,
+	background,
+	...rest
+}: HorizontalListProps) {
+	const contentRef = useRef<HTMLDivElement>(null);
+	const containerRef = useRef<HTMLDivElement>(null);
+	const rememberedWidth = useRef<number>(0);
+
+	useEffect(() => {
+		const content = contentRef.current;
+		const container = containerRef.current;
+		if (!content || !container) {
+			return;
+		}
+		const contentWidth = content.offsetWidth;
+		const containerHeight = container.offsetHeight;
+		if (open) {
+			// measure content width and animate to container width
+			const containerWidth = container.offsetWidth;
+			rememberedWidth.current = contentWidth;
+			content.style.setProperty('width', `${containerWidth}px`);
+			content.style.setProperty('flex-wrap', 'wrap');
+			// force measure to get the new height
+			const contentHeight = content.offsetHeight;
+			console.log({ containerHeight, contentHeight });
+			container
+				.animate(
+					[
+						{ height: `${containerHeight}px` },
+						{ height: `${contentHeight}px` },
+					],
+					{
+						easing: 'cubic-bezier(0.64, -0.25, 0.1, 1.4)',
+						duration: 200,
+					},
+				)
+				.finished.then(() => {});
+		} else {
+			content.style.setProperty('width', `auto`);
+			content.style.setProperty('flex-wrap', 'nowrap');
+			// force measure to get new height
+			const contentHeight = content.offsetHeight;
+			container
+				.animate(
+					[
+						{
+							height: `${containerHeight}px`,
+						},
+						{
+							height: `${contentHeight}px`,
+						},
+					],
+					{
+						easing: 'cubic-bezier(0.64, -0.25, 0.1, 1.4)',
+						duration: 200,
+					},
+				)
+				.finished.then(() => {});
+		}
+	}, [open, contentRef, containerRef]);
+
+	return (
+		<ScrollAreaRoot
+			className={clsx(
+				'flex flex-col',
+				'layer-components:max-h-300px',
+				className,
+			)}
+			background={background}
+			data-state={open ? 'open' : 'closed'}
+			{...rest}
+		>
+			<ScrollAreaViewport ref={containerRef}>
+				<div
+					className={clsx(
+						'layer-components:(px-3 pt-3 pb-4 gap-2)',
+						'flex flex-row gap-2 flex-shrink-0 w-max-content w-auto)',
+						contentClassName,
+					)}
+					ref={contentRef}
+				>
+					{children}
+				</div>
+			</ScrollAreaViewport>
+			<ScrollAreaScrollbar />
+			<ScrollAreaScrollbar orientation="horizontal" />
+		</ScrollAreaRoot>
+	);
+}

package/src/components/horizontalList.ts

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

package/src/components/scrollArea/ScrollArea.tsx

@@ -0,0 +1,87 @@
+import * as Primitive from '@radix-ui/react-scroll-area';
+import { withClassName } from '../../hooks.js';
+import { forwardRef, useMemo } from 'react';
+
+const ScrollAreaRootImpl = withClassName(
+	Primitive.Root,
+	'overflow-hidden bg-[var(--bg)]',
+	'layer-components:([--bg:var(--color-wash)] [--shadow:var(--color-shadow-1))])',
+);
+
+export interface ScrollAreaRootProps extends Primitive.ScrollAreaProps {
+	background?: 'white' | 'wash' | 'primary-wash' | 'primary' | 'black';
+}
+
+export const ScrollAreaRoot = forwardRef<any, ScrollAreaRootProps>(
+	function ScrollAreaRoot({ background = 'wash', ...props }, ref) {
+		const bgStyle: any = useMemo(
+			() => ({
+				'--bg': `var(--color-${background})`,
+				'--shadow': `var(--color-${shadowMap[background]})`,
+			}),
+			[background],
+		);
+		return <ScrollAreaRootImpl ref={ref} style={bgStyle} {...props} />;
+	},
+);
+
+export const ScrollAreaViewport = withClassName(
+	Primitive.Viewport,
+	'h-full w-full',
+	'[background:linear-gradient(var(--bg)_30%,rgba(255,255,255,0))_center_top,linear-gradient(rgba(255,255,255,0),var(--bg)_70%)_center_bottom,radial-gradient(farthest-side_at_50%_0,var(--shadow),rgba(0,0,0,0))_center_top,radial-gradient(farthest-side_at_50%_100%,var(--shadow),rgba(0,0,0,0))_center_bottom]',
+	'![background-repeat:no-repeat] ![background-size:100%_40px,100%_40px,100%_14px,100%_14px]',
+	'![background-attachment:local,local,scroll,scroll]',
+);
+
+export const ScrollAreaScrollbarRoot = withClassName(
+	Primitive.Scrollbar,
+	'layer-components:(flex select-none touch-none p-0.5 bg-gray-2 transition-colors duration-160ms ease-out)',
+	'layer-components:hover:bg-gray-3',
+	'layer-components:[&[data-orientation=vertical]]:w-2.5',
+	'layer-components:[&[data-orientation=horizontal]]:(flex-col h-2.5)',
+);
+
+export const ScrollAreaThumb = withClassName(
+	Primitive.Thumb,
+	'layer-components:(flex-1 rounded-lg relative bg-gray-5)',
+	'before:(content-[""] absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-full min-w-44px min-h-44px)',
+);
+
+export const ScrollAreaScrollbar = forwardRef<
+	any,
+	Primitive.ScrollAreaScrollbarProps
+>(function ScrollAreaScrollbar(props, ref) {
+	return (
+		<ScrollAreaScrollbarRoot {...props} ref={ref}>
+			<ScrollAreaThumb />
+		</ScrollAreaScrollbarRoot>
+	);
+});
+
+export interface ScrollAreaProps extends Primitive.ScrollAreaProps {
+	background?: ScrollAreaRootProps['background'];
+	orientation?: 'vertical' | 'both';
+}
+
+export const ScrollArea = forwardRef<any, ScrollAreaProps>(function ScrollArea(
+	{ children, orientation, ...props },
+	ref,
+) {
+	return (
+		<ScrollAreaRoot ref={ref} {...props}>
+			<ScrollAreaViewport>{children}</ScrollAreaViewport>
+			<ScrollAreaScrollbar />
+			{orientation === 'both' && (
+				<ScrollAreaScrollbar orientation="horizontal" />
+			)}
+		</ScrollAreaRoot>
+	);
+});
+
+const shadowMap = {
+	white: 'shadow-1',
+	wash: 'shadow-1',
+	'primary-wash': 'shadow-2',
+	primary: 'shadow-1',
+	black: 'overlay',
+};

package/src/components/scrollArea.ts

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