@a-type/ui 1.0.14 → 1.1.1

package/dist/esm/components/masonry/masonry.js

@@ -0,0 +1,133 @@
+// @unocss-include
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+class MasonryLayout {
+    constructor(config) {
+        this.config = config;
+        this.containerResizeObserver = null;
+        this.containerMutationObserver = null;
+        this.container = null;
+        this.columns = 0;
+        this.attach = (container) => {
+            var _a, _b;
+            (_a = this.containerResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+            (_b = this.containerMutationObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+            this.container = container;
+            this.containerResizeObserver = new ResizeObserver(this.handleContainerResize);
+            this.containerMutationObserver = new MutationObserver(this.handleContainerMutation);
+            this.containerResizeObserver.observe(container);
+            this.containerMutationObserver.observe(container, { childList: true });
+            container.style.setProperty('position', 'relative');
+            container.style.setProperty('overflow', 'hidden');
+            container.style.setProperty('visibility', 'visible');
+            container.childNodes.forEach((node) => {
+                if (node instanceof HTMLElement) {
+                    node.style.setProperty('position', 'absolute');
+                    // hide until laid out
+                    node.style.setProperty('visibility', 'hidden');
+                }
+            });
+            this.updateFromContainerSize(container.offsetWidth);
+            this.relayout();
+            return () => {
+                var _a, _b;
+                (_a = this.containerResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+                (_b = this.containerMutationObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+                container.style.removeProperty('position');
+                container.style.removeProperty('overflow');
+                this.container = null;
+            };
+        };
+        this.updateConfig = (config) => {
+            var _a, _b;
+            const gapChanged = config.gap !== this.config.gap;
+            this.config = config;
+            // hacky way to avoid updating twice...
+            if (!this.updateFromContainerSize((_b = (_a = this.container) === null || _a === void 0 ? void 0 : _a.offsetWidth) !== null && _b !== void 0 ? _b : 0) &&
+                gapChanged) {
+                this.relayout();
+            }
+        };
+        this.handleContainerResize = (entries) => {
+            const containerWidth = entries[0].contentRect.width;
+            this.updateFromContainerSize(containerWidth);
+        };
+        this.updateFromContainerSize = (containerWidth) => {
+            if (typeof this.config.columns === 'function') {
+                const newValue = this.config.columns(containerWidth);
+                if (newValue !== this.columns) {
+                    this.columns = newValue;
+                    this.relayout();
+                    return true;
+                }
+            }
+            return false;
+        };
+        this.handleContainerMutation = (entries) => {
+            for (const entry of entries) {
+                entry.addedNodes.forEach((node) => {
+                    if (node instanceof HTMLElement) {
+                        node.style.setProperty('position', 'absolute');
+                        // hide until laid out
+                        node.style.setProperty('visibility', 'hidden');
+                    }
+                });
+            }
+            // TODO: why is this timeout necessary?
+            setTimeout(this.relayout, 100);
+        };
+        this.relayout = () => {
+            if (!this.container) {
+                return;
+            }
+            console.log('relayout');
+            const tracks = new Array(this.columns).fill(0);
+            const gap = this.config.gap;
+            // percentage-based width and x position so that items automatically
+            // layout correctly when the container is resized (as long as columns
+            // are the same)
+            const pixelColumnWidthMinusGap = (this.container.offsetWidth - gap * (this.columns - 1)) / this.columns;
+            const columnPercentageWidth = (pixelColumnWidthMinusGap / this.container.offsetWidth) * 100;
+            const gapPercentageWidth = (gap / this.container.offsetWidth) * 100;
+            const children = Array.from(this.container.children);
+            children.forEach((child) => {
+                const trackIndex = tracks.indexOf(Math.min(...tracks));
+                const x = (columnPercentageWidth + gapPercentageWidth) * trackIndex;
+                const y = tracks[trackIndex];
+                const width = columnPercentageWidth;
+                child.style.setProperty('position', 'absolute');
+                child.style.setProperty('visibility', 'visible');
+                child.style.setProperty('width', `${width}%`);
+                child.style.setProperty('left', `${x}%`);
+                child.style.setProperty('top', `${y}px`);
+                requestAnimationFrame(() => {
+                    child.classList.add('transition-all');
+                });
+                tracks[trackIndex] += child.offsetHeight + gap;
+            });
+            this.container.style.setProperty('height', `${Math.max(...tracks) - gap}px`);
+        };
+        this.columns =
+            typeof config.columns === 'function' ? config.columns(0) : config.columns;
+    }
+}
+const initialStyle = {
+    height: 0,
+    position: 'relative',
+    overflow: 'hidden',
+    visibility: 'hidden',
+};
+export function Masonry({ className, children, columns = 3, gap = 16, }) {
+    const [layout] = useState(() => new MasonryLayout({ columns, gap }));
+    useEffect(() => {
+        layout.updateConfig({ columns, gap });
+    }, [layout, columns, gap]);
+    const ref = useRef(null);
+    useEffect(() => {
+        if (ref.current) {
+            return layout.attach(ref.current);
+        }
+    }, [layout, ref]);
+    return (_jsx("div", Object.assign({ ref: ref, style: initialStyle, className: className }, { children: children })));
+}
+//# sourceMappingURL=masonry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"masonry.js","sourceRoot":"","sources":["../../../../src/components/masonry/masonry.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/masonry/masonry.stories.d.ts

@@ -0,0 +1,15 @@
+import type { StoryObj } from '@storybook/react';
+import { Masonry } from './masonry.js';
+declare const meta: {
+    title: string;
+    component: typeof Masonry;
+    argTypes: {};
+    parameters: {
+        controls: {
+            expanded: boolean;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Masonry>;
+export declare const Default: Story;

package/dist/esm/components/masonry/masonry.stories.js

@@ -0,0 +1,22 @@
+// @unocss-include
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Masonry } from './masonry.js';
+const meta = {
+    title: 'Masonry',
+    component: Masonry,
+    argTypes: {},
+    parameters: {
+        controls: { expanded: true },
+    },
+};
+export default meta;
+const sizes = Array.from({ length: 100 }, (_, i) => {
+    const size = 100 + Math.floor(Math.random() * 100);
+    return (_jsx("div", Object.assign({ className: "bg-gray-5 rounded-lg", style: { height: size } }, { children: size }), i));
+});
+export const Default = {
+    render(props) {
+        return _jsx(Masonry, Object.assign({}, props, { children: sizes }));
+    },
+};
+//# sourceMappingURL=masonry.stories.js.map

package/dist/esm/components/masonry/masonry.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"masonry.stories.js","sourceRoot":"","sources":["../../../../src/components/masonry/masonry.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,SAAS;IAChB,SAAS,EAAE,OAAO;IAClB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CAC8B,CAAC;AAEjC,eAAe,IAAI,CAAC;AAIpB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;IAClD,MAAM,IAAI,GAAG,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,GAAG,CAAC,CAAC;IACnD,OAAO,CACN,4BAAa,SAAS,EAAC,sBAAsB,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,gBACnE,IAAI,KADI,CAAC,CAEL,CACN,CAAC;AACH,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,CAAC,KAAK;QACX,OAAO,KAAC,OAAO,oBAAK,KAAK,cAAG,KAAK,IAAW,CAAC;IAC9C,CAAC;CACD,CAAC"}

package/dist/esm/components/masonry.d.ts

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

package/dist/esm/components/masonry.js

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-type/ui",
-  "version": "1.0.14",
+  "version": "1.1.1",
   "type": "module",
   "files": [
     "/dist",

package/src/components/card/Card.stories.tsx

@@ -1,8 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import {
+	Card,
 	CardActions,
 	CardContent,
 	CardFooter,
+	cardGridColumns,
 	CardImage,
 	CardMain,
 	CardMenu,
@@ -11,6 +13,7 @@ import {
 } from './Card.js';
 import { Button } from '../button.js';
 import { Icon } from '../icon.js';
+import { useState } from 'react';
 
 const meta = {
 	title: 'Card',
@@ -153,3 +156,58 @@ export const AsChildNonInteractive: Story = {
 		</CardRoot>
 	),
 };
+
+export const Grid: Story = {
+	render: () => {
+		const [sizes, setSizes] = useState(() =>
+			Array.from(
+				{ length: 40 },
+				(_, i) => 50 + Math.floor(Math.random() * 300),
+			),
+		);
+		const remove = (index: number) =>
+			setSizes((v) => v.filter((_, i) => i !== index));
+		return (
+			<Card.Grid>
+				{sizes.map((size, i) => (
+					<GridCard key={i} size={size} remove={() => remove(i)} />
+				))}
+			</Card.Grid>
+		);
+	},
+};
+
+export const GridCompact: Story = {
+	render: () => {
+		const [sizes, setSizes] = useState(() =>
+			Array.from(
+				{ length: 40 },
+				(_, i) => 50 + Math.floor(Math.random() * 300),
+			),
+		);
+		const remove = (index: number) =>
+			setSizes((v) => v.filter((_, i) => i !== index));
+		return (
+			<Card.Grid columns={cardGridColumns.small}>
+				{sizes.map((size, i) => (
+					<GridCard key={i} size={size} remove={() => remove(i)} />
+				))}
+			</Card.Grid>
+		);
+	},
+};
+
+function GridCard({ size, remove }: { size: number; remove: () => void }) {
+	return (
+		<CardRoot style={{ height: size }}>
+			<CardMain>
+				<CardTitle>{size}</CardTitle>
+			</CardMain>
+			<CardActions>
+				<Button size="small" onClick={remove}>
+					Delete
+				</Button>
+			</CardActions>
+		</CardRoot>
+	);
+}

package/src/components/card/Card.tsx

@@ -1,8 +1,9 @@
 import { HTMLProps, MouseEvent, ReactNode, forwardRef } from 'react';
-import { withClassName } from '../../hooks.js';
+import { useStableCallback, withClassName } from '../../hooks.js';
 import { Slot } from '@radix-ui/react-slot';
-import classNames from 'clsx';
+import classNames, { clsx } from 'clsx';
 import { SlotDiv } from '../utility/SlotDiv.js';
+import { Masonry, MasonryProps } from '../masonry/masonry.js';
 
 export const CardRoot = withClassName(
 	'div',
@@ -74,11 +75,23 @@ export const CardMenu = withClassName(
 	'layer-components:(mr-0 ml-auto my-auto flex flex-row gap-1 items-center bg-overlay rounded-full p-0)',
 );
 
-export const CardGrid = withClassName(
-	'div',
-	'layer-components:(grid grid-cols-[1fr] [grid-auto-rows:auto] gap-4 p-0 m-0)',
-	'layer-components:md:(grid-cols-[repeat(2,1fr)] [grid-auto-rows:1fr] items-end)',
-);
+export const cardGridColumns = {
+	default: (size: number) => (size < 480 ? 1 : size < 800 ? 2 : 3),
+	small: (size: number) =>
+		size < 320 ? 1 : size < 480 ? 2 : size < 800 ? 3 : 4,
+};
+export const CardGrid = ({
+	children,
+	className,
+	columns = cardGridColumns.default,
+	gap,
+}: MasonryProps) => {
+	return (
+		<Masonry className={className} columns={columns} gap={gap}>
+			{children}
+		</Masonry>
+	);
+};
 
 export const Card = Object.assign(CardRoot, {
 	Main: CardMain,

package/src/components/masonry/masonry.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Masonry } from './masonry.js';
+
+const meta = {
+	title: 'Masonry',
+	component: Masonry,
+	argTypes: {},
+	parameters: {
+		controls: { expanded: true },
+	},
+} satisfies Meta<typeof Masonry>;
+
+export default meta;
+
+type Story = StoryObj<typeof Masonry>;
+
+const sizes = Array.from({ length: 100 }, (_, i) => {
+	const size = 100 + Math.floor(Math.random() * 100);
+	return (
+		<div key={i} className="bg-gray-5 rounded-lg" style={{ height: size }}>
+			{size}
+		</div>
+	);
+});
+
+export const Default: Story = {
+	render(props) {
+		return <Masonry {...props}>{sizes}</Masonry>;
+	},
+};

package/src/components/masonry/masonry.tsx

@@ -0,0 +1,180 @@
+import { CSSProperties, ReactNode, useEffect, useRef, useState } from 'react';
+
+interface MasonryLayoutConfig {
+	columns: number | ((containerWidth: number) => number);
+	gap: number;
+}
+
+class MasonryLayout {
+	private containerResizeObserver: ResizeObserver | null = null;
+	private containerMutationObserver: MutationObserver | null = null;
+
+	private container: HTMLElement | null = null;
+
+	private columns: number = 0;
+
+	constructor(private config: MasonryLayoutConfig) {
+		this.columns =
+			typeof config.columns === 'function' ? config.columns(0) : config.columns;
+	}
+
+	attach = (container: HTMLElement) => {
+		this.containerResizeObserver?.disconnect();
+		this.containerMutationObserver?.disconnect();
+
+		this.container = container;
+
+		this.containerResizeObserver = new ResizeObserver(
+			this.handleContainerResize,
+		);
+		this.containerMutationObserver = new MutationObserver(
+			this.handleContainerMutation,
+		);
+		this.containerResizeObserver.observe(container);
+		this.containerMutationObserver.observe(container, { childList: true });
+
+		container.style.setProperty('position', 'relative');
+		container.style.setProperty('overflow', 'hidden');
+		container.style.setProperty('visibility', 'visible');
+		container.childNodes.forEach((node) => {
+			if (node instanceof HTMLElement) {
+				node.style.setProperty('position', 'absolute');
+				// hide until laid out
+				node.style.setProperty('visibility', 'hidden');
+			}
+		});
+
+		this.updateFromContainerSize(container.offsetWidth);
+
+		this.relayout();
+
+		return () => {
+			this.containerResizeObserver?.disconnect();
+			this.containerMutationObserver?.disconnect();
+			container.style.removeProperty('position');
+			container.style.removeProperty('overflow');
+			this.container = null;
+		};
+	};
+
+	updateConfig = (config: MasonryLayoutConfig) => {
+		const gapChanged = config.gap !== this.config.gap;
+		this.config = config;
+		// hacky way to avoid updating twice...
+		if (
+			!this.updateFromContainerSize(this.container?.offsetWidth ?? 0) &&
+			gapChanged
+		) {
+			this.relayout();
+		}
+	};
+
+	private handleContainerResize = (entries: ResizeObserverEntry[]) => {
+		const containerWidth = entries[0].contentRect.width;
+		this.updateFromContainerSize(containerWidth);
+	};
+
+	private updateFromContainerSize = (containerWidth: number) => {
+		if (typeof this.config.columns === 'function') {
+			const newValue = this.config.columns(containerWidth);
+			if (newValue !== this.columns) {
+				this.columns = newValue;
+				this.relayout();
+				return true;
+			}
+		}
+		return false;
+	};
+
+	private handleContainerMutation = (entries: MutationRecord[]) => {
+		for (const entry of entries) {
+			entry.addedNodes.forEach((node) => {
+				if (node instanceof HTMLElement) {
+					node.style.setProperty('position', 'absolute');
+					// hide until laid out
+					node.style.setProperty('visibility', 'hidden');
+				}
+			});
+		}
+		// TODO: why is this timeout necessary?
+		setTimeout(this.relayout, 100);
+	};
+
+	private relayout = () => {
+		if (!this.container) {
+			return;
+		}
+
+		console.log('relayout');
+
+		const tracks = new Array(this.columns).fill(0);
+		const gap = this.config.gap;
+		// percentage-based width and x position so that items automatically
+		// layout correctly when the container is resized (as long as columns
+		// are the same)
+		const pixelColumnWidthMinusGap =
+			(this.container.offsetWidth - gap * (this.columns - 1)) / this.columns;
+		const columnPercentageWidth =
+			(pixelColumnWidthMinusGap / this.container.offsetWidth) * 100;
+		const gapPercentageWidth = (gap / this.container.offsetWidth) * 100;
+
+		const children = Array.from(this.container.children) as HTMLElement[];
+		children.forEach((child) => {
+			const trackIndex = tracks.indexOf(Math.min(...tracks));
+			const x = (columnPercentageWidth + gapPercentageWidth) * trackIndex;
+			const y = tracks[trackIndex];
+			const width = columnPercentageWidth;
+			child.style.setProperty('position', 'absolute');
+			child.style.setProperty('visibility', 'visible');
+			child.style.setProperty('width', `${width}%`);
+			child.style.setProperty('left', `${x}%`);
+			child.style.setProperty('top', `${y}px`);
+			requestAnimationFrame(() => {
+				child.classList.add('transition-all');
+			});
+			tracks[trackIndex] += child.offsetHeight + gap;
+		});
+		this.container.style.setProperty(
+			'height',
+			`${Math.max(...tracks) - gap}px`,
+		);
+	};
+}
+
+export interface MasonryProps {
+	children: ReactNode;
+	className?: string;
+	columns?: number | ((containerWidth: number) => number);
+	gap?: number;
+}
+
+const initialStyle: CSSProperties = {
+	height: 0,
+	position: 'relative',
+	overflow: 'hidden',
+	visibility: 'hidden',
+};
+
+export function Masonry({
+	className,
+	children,
+	columns = 3,
+	gap = 16,
+}: MasonryProps) {
+	const [layout] = useState(() => new MasonryLayout({ columns, gap }));
+	useEffect(() => {
+		layout.updateConfig({ columns, gap });
+	}, [layout, columns, gap]);
+	const ref = useRef<HTMLDivElement>(null);
+	useEffect(() => {
+		if (ref.current) {
+			return layout.attach(ref.current);
+		}
+	}, [layout, ref]);
+
+	return (
+		<div ref={ref} style={initialStyle} className={className}>
+			{children}
+		</div>
+	);
+}

package/src/components/masonry.ts

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