@a-type/ui 2.0.10 → 2.1.0

package/src/components/emojiPicker/EmojiPicker.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { EmojiPicker } from './EmojiPicker.js';
+
+const meta = {
+	title: 'EmojiPicker',
+	component: EmojiPicker,
+	argTypes: {},
+	parameters: {
+		controls: { expanded: true },
+	},
+} satisfies Meta<typeof EmojiPicker>;
+
+export default meta;
+
+type Story = StoryObj<typeof EmojiPicker>;
+
+export const Default: Story = {
+	render(args) {
+		return <EmojiPicker {...args} />;
+	},
+};

package/src/components/emojiPicker/EmojiPicker.tsx

@@ -0,0 +1,170 @@
+import clsx from 'clsx';
+import {
+	EmojiPicker as Core,
+	EmojiPickerListCategoryHeaderProps,
+	EmojiPickerListEmojiProps,
+	EmojiPickerListProps,
+	EmojiPickerRootProps,
+	EmojiPickerViewportProps,
+	useSkinTone,
+} from 'frimousse';
+import { withClassName, withProps } from '../../hooks.js';
+import { useLocalStorage } from '../../hooks/useStorage.js';
+import { Box, BoxProps } from '../box/Box.js';
+import { Button } from '../button/Button.js';
+import { inputClassName } from '../input/Input.js';
+import { Spinner } from '../spinner/Spinner.js';
+
+export const EmojiPickerRoot = withClassName(
+	Core.Root,
+	'layer-components:(isolate flex flex-col w-fit h-368px bg-white gap-sm)',
+);
+export const EmojiPickerSearch = withClassName(
+	Core.Search,
+	'layer-components:(z-10)',
+	inputClassName,
+);
+export const EmojiPickerViewport = ({
+	className,
+	...props
+}: EmojiPickerViewportProps) => (
+	<Box border className="flex-1 min-h-0 overflow-hidden">
+		<Core.Viewport
+			className="layer-components:(relative outline-hidden)"
+			{...props}
+		/>
+	</Box>
+);
+export const EmojiPickerLoading = withClassName(
+	withProps(Core.Loading, {
+		children: <Spinner />,
+	}),
+	'layer-compoennts:(absolute inset-0 flex items-center justify-center bg-inherit)',
+);
+export const EmojiPickerEmpty = withClassName(
+	withProps(Core.Empty, {
+		children: <>No emoji found</>,
+	}),
+	'layer-components:(absolute inset-0 flex items-center justify-center bg-inherit color-gray-dark text-xs)',
+);
+
+export const EmojiPickerCategoryHeader = (
+	props: EmojiPickerListCategoryHeaderProps,
+) => (
+	<div
+		className={clsx(
+			'layer-components:(bg-inherit px-md py-sm text-xs font-semibold text-gray-dark sticky top-0)',
+			props.className,
+		)}
+	>
+		{props.category.label}
+	</div>
+);
+export const EmojiPickerRow = withClassName(
+	'div',
+	'layer-components:(scroll-my-xs px-xs)',
+);
+export const EmojiPickerEmoji = withClassName(
+	(p: EmojiPickerListEmojiProps) => (
+		<Button
+			{...p}
+			color="ghost"
+			toggled={p.emoji.isActive}
+			toggleMode="color"
+			size="icon-small"
+			aria-label={p.emoji.label}
+			className="text-lg p-xs"
+		>
+			{p.emoji.emoji}
+		</Button>
+	),
+	'',
+);
+
+const defaultListComponents = {
+	CategoryHeader: EmojiPickerCategoryHeader,
+	Row: EmojiPickerRow,
+	Emoji: EmojiPickerEmoji,
+};
+
+export const EmojiPickerList = ({
+	className,
+	components,
+}: EmojiPickerListProps) => {
+	return (
+		<Core.List
+			className={clsx('layer-components:(select-none pb-md)', className)}
+			components={
+				components
+					? {
+							...defaultListComponents,
+							...components,
+					  }
+					: defaultListComponents
+			}
+		/>
+	);
+};
+
+export const useEmojiSkinTone = () =>
+	useLocalStorage<SkinTone | undefined>('emoji-skin-tone', undefined, false);
+
+export type SkinTone = ReturnType<typeof useSkinTone>[0];
+export const EmojiPickerSkinToneSelector = (props: BoxProps) => {
+	const [_, __, options] = useSkinTone();
+	const [skinTone, setSkinTone] = useEmojiSkinTone();
+
+	return (
+		<Box d="row" gap border {...props}>
+			{options.map((option) => (
+				<Button
+					key={option.skinTone}
+					color="ghost"
+					toggled={option.skinTone === skinTone}
+					toggleMode="color"
+					size="icon-small"
+					aria-label={`Skin tone ${option}`}
+					className="text-md p-xs"
+					onClick={() => setSkinTone(option.skinTone)}
+				>
+					{option.emoji}
+				</Button>
+			))}
+		</Box>
+	);
+};
+
+export interface EmojiPickerProps
+	extends Omit<EmojiPickerRootProps, 'emoji' | 'onEmojiSelect'> {
+	onValueChange: (value: string, label: string) => void;
+}
+const EmojiPickerPrefab = ({ onValueChange, ...props }: EmojiPickerProps) => {
+	const [skinTone] = useEmojiSkinTone();
+	return (
+		<EmojiPickerRoot
+			{...props}
+			onEmojiSelect={(emoji) => onValueChange(emoji.emoji, emoji.label)}
+			skinTone={skinTone}
+		>
+			<EmojiPickerSearch />
+			<EmojiPickerViewport>
+				<EmojiPickerList />
+				<EmojiPickerLoading />
+				<EmojiPickerEmpty />
+			</EmojiPickerViewport>
+			<EmojiPickerSkinToneSelector className="mr-auto" />
+		</EmojiPickerRoot>
+	);
+};
+
+export const EmojiPicker = Object.assign(EmojiPickerPrefab, {
+	Root: EmojiPickerRoot,
+	Search: EmojiPickerSearch,
+	Viewport: EmojiPickerViewport,
+	List: EmojiPickerList,
+	Loading: EmojiPickerLoading,
+	Empty: EmojiPickerEmpty,
+	CategoryHeader: EmojiPickerCategoryHeader,
+	Row: EmojiPickerRow,
+	Emoji: EmojiPickerEmoji,
+});

package/src/components/index.ts

@@ -15,6 +15,7 @@ export * from './dialog/index.js';
 export * from './divider/index.js';
 export * from './dropdownMenu/index.js';
 export * from './editableText/EditableText.js';
+export * from './emojiPicker/EmojiPicker.js';
 export * from './errorBoundary/index.js';
 export * from './forms/index.js';
 export * from './horizontalList/HorizontalList.js';

package/src/components/relativeTime/RelativeTime.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { RelativeTime } from './RelativeTime.js';
+
+const meta = {
+	title: 'RelativeTime',
+	component: RelativeTime,
+	argTypes: {},
+	args: {
+		value: Date.now() + 60 * 1000 * 2,
+		abbreviate: false,
+	},
+	parameters: {
+		controls: { expanded: true },
+	},
+} satisfies Meta<typeof RelativeTime>;
+
+export default meta;
+
+type Story = StoryObj<typeof RelativeTime>;
+
+export const Default: Story = {};

package/src/components/relativeTime/RelativeTime.tsx

@@ -1,45 +1,68 @@
 'use client';
 
 import { shortenTimeUnits } from '@a-type/utils';
+import { differenceInMinutes } from 'date-fns/differenceInMinutes';
 import { formatDistanceToNowStrict } from 'date-fns/formatDistanceToNowStrict';
 import { useEffect, useMemo, useState } from 'react';
 
 export interface RelativeTimeProps {
 	value: number;
 	abbreviate?: boolean;
+	/**
+	 * Makes it count down seconds for a future date value as it approaches.
+	 * Does not affect past dates.
+	 */
+	countdownSeconds?: boolean;
+	/**
+	 * Remove "from now" or "ago" from the output.
+	 */
+	disableRelativeText?: boolean;
 }
 
-function formatDistanceToNow(date: Date) {
+function formatDistanceToNow(date: Date, relativeText = true) {
 	const now = Date.now();
 	if (Math.abs(date.getTime() - now) < 1000) {
 		return 'just now';
 	}
 	return (
 		formatDistanceToNowStrict(date) +
-		(date.getTime() < now ? ' ago' : ' from now')
+		(relativeText ? (date.getTime() < now ? ' ago' : ' from now') : '')
 	);
 }
 
-export function RelativeTime({ value, abbreviate }: RelativeTimeProps) {
+export function RelativeTime({
+	value,
+	abbreviate,
+	countdownSeconds,
+	disableRelativeText,
+}: RelativeTimeProps) {
 	const asDate = useMemo(() => new Date(value), [value]);
 	const [time, setTime] = useState(() =>
 		abbreviate
-			? shortenTimeUnits(formatDistanceToNow(asDate))
-			: formatDistanceToNow(asDate),
+			? shortenTimeUnits(formatDistanceToNow(asDate, !disableRelativeText))
+			: formatDistanceToNow(asDate, !disableRelativeText),
 	);
+	// increase update rate if the date is less than 1 minute away and in the future
+	// (past is ok to just leave ~1 minute)
+	const updateRate =
+		countdownSeconds &&
+		asDate.getTime() > Date.now() &&
+		Math.abs(differenceInMinutes(asDate, new Date())) < 1
+			? 1000
+			: 60 * 1000;
 
 	useEffect(() => {
 		const update = () => {
 			setTime(
 				abbreviate
-					? shortenTimeUnits(formatDistanceToNow(asDate))
-					: formatDistanceToNow(asDate),
+					? shortenTimeUnits(formatDistanceToNow(asDate, !disableRelativeText))
+					: formatDistanceToNow(asDate, !disableRelativeText),
 			);
 		};
-		const interval = setInterval(update, 60 * 1000);
+		const interval = setInterval(update, updateRate);
 		update();
 		return () => clearInterval(interval);
-	}, [asDate, abbreviate]);
+	}, [asDate, abbreviate, updateRate, disableRelativeText]);
 
 	return <>{time}</>;
 }

package/src/hooks/useStorage.ts

@@ -0,0 +1,107 @@
+import { useEffect, useMemo } from 'react';
+import { proxy, useSnapshot } from 'valtio';
+
+function makeUseStorage(
+	storage: Storage,
+	cache: Record<string, any>,
+	name: string = storage.constructor.name,
+) {
+	return function useStorage<T>(
+		key: string,
+		initialValue: T,
+		writeInitialValue = false,
+	) {
+		// using useMemo to execute synchronous code in render just once.
+		// this hook comes before useLocalStorageCache because we want to load
+		// values into the cache before accessing them.
+		useMemo(() => {
+			if (typeof window === 'undefined') return;
+
+			try {
+				const stored = storage.getItem(key);
+				if (stored) {
+					cache[key] = JSON.parse(stored);
+				}
+			} catch (err) {
+				console.error(`Error loading use-${name} value for ${key}: ${err}`);
+				storage.removeItem(key);
+			}
+		}, [key]);
+		const snapshot = useSnapshot(cache);
+		const storedValue = (snapshot[key] ?? initialValue) as T;
+
+		const hasValue = snapshot[key] !== undefined;
+		useEffect(() => {
+			if (!hasValue && writeInitialValue) {
+				storage.setItem(key, JSON.stringify(initialValue));
+			}
+		}, [hasValue, initialValue, writeInitialValue, key]);
+
+		// Return a wrapped version of useState's setter function that
+		// persists the new value to localStorage. It's throttled to prevent
+		// frequent writes to localStorage, which can be costly.
+		const setValue = useMemo(
+			() =>
+				throttle(
+					(value: T | ((current: T) => T)) => {
+						if (typeof window === 'undefined') return;
+
+						try {
+							// Allow value to be a function so we have same API as useState
+							const valueToStore =
+								value instanceof Function ? value(storedValue) : value;
+							// Save to local storage
+							storage.setItem(key, JSON.stringify(valueToStore));
+							// sync it to other instances of the hook via the global cache
+							cache[key] = valueToStore;
+						} catch (error) {
+							console.error(
+								`Error setting use-${name} value for ${key}: ${value}: ${error}`,
+							);
+							throw new Error('Error setting value');
+						}
+					},
+					300,
+					{ trailing: true, leading: true },
+				),
+			[key, storedValue],
+		) as (value: T | ((current: T) => T)) => void;
+
+		return [storedValue, setValue] as const;
+	};
+}
+
+export const useLocalStorage = makeUseStorage(
+	localStorage,
+	proxy({}),
+	'LocalStorage',
+);
+export const useSessionStorage = makeUseStorage(
+	sessionStorage,
+	proxy({}),
+	'SessionStorage',
+);
+
+function throttle(
+	func: (...args: any[]) => any,
+	wait: number,
+	options?: { trailing?: boolean; leading?: boolean },
+): (...args: any[]) => any {
+	let previous = 0;
+	return function (this: any, ...args: any[]) {
+		const now = Date.now();
+		if (!previous && options?.leading === false) previous = now;
+		const remaining = wait - (now - previous);
+		if (remaining <= 0) {
+			if (options?.trailing === false) previous = now;
+			return func(...args);
+		}
+		if (options?.trailing === false) {
+			return func(...args);
+		}
+		return setTimeout(() => {
+			previous = options?.leading === false ? 0 : Date.now();
+			func(...args);
+		}, remaining);
+	};
+}

package/src/hooks/withProps.tsx

@@ -8,3 +8,15 @@ export const withProps = <T extends {}>(
 		return <Component {...props} {...extras} />;
 	};
 };
+
+type OptionalKeys<T> = {
+	[K in keyof T]-?: undefined extends T[K] ? K : never;
+}[keyof T];
+export const withoutProps = <T extends {}, P extends OptionalKeys<T>>(
+	Component: React.ComponentType<T>,
+	remove: P[],
+) => {
+	return (props: Omit<T, P>) => {
+		return <Component {...(props as any)} />;
+	};
+};

package/src/uno/colors.ts

@@ -7,7 +7,7 @@ export const colorConstants = `
 
 export const dynamicThemeComputedColors = (name: string) => `
 	--color-${name}: oklch(calc(90% - 35% * var(--dyn-source-mode-adjust, 0) - (var(--dyn-mode-sign, 1) * var(--dyn-${name}-base-dim, 0%))) calc(var(--dyn-${name}-sat-mult,1) * (35% - 2% * var(--dyn-source-mode-adjust, 0))) var(--dyn-${name}-source, 0));
-	--color-${name}-wash: oklch(from var(--color-${name}) calc(min(0.999,max(0.15, l + 0.15 * var(--dyn-mode-mult, 1)))) calc(var(--dyn-${name}-sat-mult) * (c * var(--dyn-saturation-x-wash, 1) - 0.03)) calc(h - 5 * var(--dyn-${name}-hue-rotate, 0) * var(--dyn-${name}-hue-rotate-mult, 1)));
+	--color-${name}-wash: oklch(from var(--color-${name}) calc(min(0.999,max(0.15, l + 0.15 * var(--dyn-mode-mult, 1)))) calc(var(--dyn-${name}-sat-mult) * (c * var(--dyn-saturation-x-wash, 1) - 0.06)) calc(h - 5 * var(--dyn-${name}-hue-rotate, 0) * var(--dyn-${name}-hue-rotate-mult, 1)));
 	--color-${name}-light: oklch(from var(--color-${name}) calc(l + 0.08 * var(--dyn-mode-mult, 1)) calc(var(--dyn-${name}-sat-mult) * (c * var(--dyn-saturation-x-light, 1) - 0.03)) calc(h - 0.5 * var(--dyn-${name}-hue-rotate, 0) * var(--dyn-${name}-hue-rotate-mult, 1)));
 	--color-${name}-dark: oklch(from var(--color-${name}) calc(l - 0.26 * var(--dyn-mode-mult, 1)) calc(var(--dyn-${name}-sat-mult) * (c * var(--dyn-saturation-x-dark, 1) + 0.01)) calc(h + 0.2 * var(--dyn-${name}-hue-rotate, 0) * var(--dyn-${name}-hue-rotate-mult, 1)));
 	--color-${name}-ink: oklch(from var(--color-${name}) calc(l - 0.45 * var(--dyn-mode-mult, 1)) calc(var(--dyn-${name}-sat-mult) * (c * var(--dyn-saturation-x-ink, 1) + 0.01)) calc(h + 1 * var(--dyn-${name}-hue-rotate, 0) * var(--dyn-${name}-hue-rotate-mult, 1)));