@a-type/ui 3.0.26 → 3.0.28

package/src/components/pwaInstall/PwaInstallTrigger.tsx

@@ -0,0 +1,227 @@
+import { DialogTriggerProps } from '@radix-ui/react-dialog';
+import { useState } from 'react';
+import {
+	getIsSafari,
+	getOS,
+	getSupportsPWAInstallPrompt,
+} from '../../platform.js';
+import { Box } from '../box/Box.js';
+import { Button } from '../button/Button.js';
+import { Dialog } from '../dialog/Dialog.js';
+import { Icon } from '../icon/Icon.js';
+import { Lightbox } from '../lightbox/Lightbox.js';
+import { Ol } from '../lists/lists.js';
+import { P } from '../typography/typography.js';
+import {
+	AndroidAddToHomeIcon,
+	SafariAddToDockIcon,
+	SafariIcon,
+	SafariPlusSquareIcon,
+	SafariShareIcon,
+} from './PlatformIcons.js';
+import {
+	triggerDeferredInstall,
+	useIsInstalled,
+	useIsInstallReady,
+} from './useIsInstallReady.js';
+import { useWebManifest } from './useWebManifest.js';
+
+export interface PwaInstallTriggerProps extends DialogTriggerProps {
+	manifestPath?: string;
+}
+
+export function PwaInstallTrigger({
+	children,
+	manifestPath,
+	asChild: _,
+	...rest
+}: PwaInstallTriggerProps) {
+	const installed = useIsInstalled();
+	const manifest = useWebManifest(manifestPath);
+
+	const [showInstructions, setShowInstructions] = useState(false);
+
+	if (installed) {
+		return null;
+	}
+
+	const primaryIcon = manifest?.icons?.[0];
+
+	return (
+		<Dialog>
+			<Dialog.Trigger {...rest} asChild>
+				{children ?? (
+					<Button color="primary" emphasis="light">
+						<Icon name="star" /> Install
+					</Button>
+				)}
+			</Dialog.Trigger>
+			<Dialog.Content className="flex flex-col gap-xs">
+				<Dialog.Title className="flex flex-row gap-md items-center">
+					{primaryIcon && (
+						<img
+							src={primaryIcon.src}
+							alt={
+								primaryIcon.label ??
+								manifest?.short_name ??
+								manifest?.name ??
+								'App Icon'
+							}
+							className="inline-block w-1em h-1em rounded"
+						/>
+					)}
+					Install {manifest?.short_name ?? manifest?.name ?? 'App'}
+				</Dialog.Title>
+				{showInstructions ? (
+					<>
+						<Dialog.Description>
+							Follow the instructions below to install this app on your device.
+						</Dialog.Description>
+						<InstallInstructions />
+						<Dialog.Actions>
+							<Dialog.Close asChild>
+								<Button emphasis="ghost">Close</Button>
+							</Dialog.Close>
+							<Button onClick={() => setShowInstructions(false)}>
+								<Icon name="arrowLeft" /> Back
+							</Button>
+						</Dialog.Actions>
+					</>
+				) : (
+					<>
+						<Dialog.Description>
+							This site is also an app. You can install it right now for easier
+							access and more features.
+						</Dialog.Description>
+						{manifest?.description && (
+							<P className="mb-sm">{manifest.description}</P>
+						)}
+						<ManifestImageGallery manifestPath={manifestPath} />
+						<Dialog.Actions>
+							<Dialog.Close asChild>
+								<Button emphasis="ghost">Close</Button>
+							</Dialog.Close>
+							<InstallDeviceActions
+								showInstructions={() => setShowInstructions(true)}
+							/>
+						</Dialog.Actions>
+					</>
+				)}
+			</Dialog.Content>
+		</Dialog>
+	);
+}
+
+const supportsDirectInstall = getSupportsPWAInstallPrompt();
+
+function InstallInstructions() {
+	const os = getOS();
+	if (os === 'iOS' || os === 'Mac OS') {
+		if (getIsSafari()) {
+			if (os === 'iOS') {
+				return (
+					<Ol>
+						<Ol.Item>
+							<SafariShareIcon /> Tap the Share button in the toolbar.
+						</Ol.Item>
+						<Ol.Item>
+							<SafariPlusSquareIcon /> Scroll down and tap "Add to Home Screen".
+						</Ol.Item>
+					</Ol>
+				);
+			} else {
+				return (
+					<Ol>
+						<Ol.Item>
+							<SafariShareIcon /> Tap the Share button in the toolbar.
+						</Ol.Item>
+						<Ol.Item>
+							<SafariAddToDockIcon /> Tap "Add to Dock".
+						</Ol.Item>
+					</Ol>
+				);
+			}
+		} else {
+			return (
+				<>
+					<Ol>
+						<Ol.Item>
+							<SafariIcon /> Open this site in Safari to continue.
+						</Ol.Item>
+					</Ol>
+					<Box surface p>
+						Apple does not allow non-Safari browsers to install web apps.
+					</Box>
+				</>
+			);
+		}
+	}
+
+	return (
+		<Ol>
+			<Ol.Item>
+				<Icon name="dots" className="rotate-90" /> Tap the menu button in the
+				toolbar.
+			</Ol.Item>
+			<Ol.Item>
+				<AndroidAddToHomeIcon /> Tap "Add to Home Screen."
+			</Ol.Item>
+		</Ol>
+	);
+}
+
+function ManifestImageGallery({ manifestPath }: { manifestPath?: string }) {
+	const manifest = useWebManifest(manifestPath);
+
+	if (!manifest?.screenshots?.length) {
+		return null;
+	}
+
+	return (
+		<Box overflow="auto-x" p="sm" gap className="h-240px">
+			{manifest.screenshots?.map((screenshot, index) => (
+				<Lightbox.Root key={screenshot.src}>
+					<Lightbox.Trigger asChild>
+						<Lightbox.Image
+							tabIndex={0}
+							key={index}
+							src={screenshot.src}
+							alt={screenshot.label || `Screenshot ${index + 1}`}
+							className="border border-default rounded-xs"
+						/>
+					</Lightbox.Trigger>
+					<Lightbox.Portal>
+						<Lightbox.Overlay className="z-10000" />
+						<Lightbox.Content className="z-10001">
+							<Lightbox.Image
+								src={screenshot.src}
+								alt={screenshot.label || `Screenshot ${index + 1}`}
+							/>
+						</Lightbox.Content>
+					</Lightbox.Portal>
+				</Lightbox.Root>
+			))}
+		</Box>
+	);
+}
+
+function InstallDeviceActions({
+	showInstructions,
+}: {
+	showInstructions: () => void;
+}) {
+	const ready = useIsInstallReady();
+	if (supportsDirectInstall && ready) {
+		return (
+			<Button onClick={() => triggerDeferredInstall()} emphasis="primary">
+				<Icon name="download" /> Install now
+			</Button>
+		);
+	}
+
+	return (
+		<Button onClick={() => showInstructions()} emphasis="primary">
+			<Icon name="arrowRight" /> Add to Home
+		</Button>
+	);
+}

package/src/components/pwaInstall/index.ts

@@ -0,0 +1,3 @@
+export * from './PwaInstallTrigger.js';
+export * from './useIsInstallReady.js';
+export * from './useWebManifest.js';

package/src/components/pwaInstall/useIsInstallReady.ts

@@ -0,0 +1,56 @@
+import { proxy, useSnapshot } from 'valtio';
+import { getIsPWAInstalled, PRETEND_INSTALLABLE } from '../../platform.js';
+
+let deferredPrompt: BeforeInstallPromptEvent | null = null;
+const installState = proxy({
+	installReady: false,
+	installed: getIsPWAInstalled(),
+});
+
+if (typeof window !== 'undefined') {
+	window.addEventListener('beforeinstallprompt', (e) => {
+		// Prevent the mini-infobar from appearing on mobile
+		e.preventDefault();
+		e.stopImmediatePropagation();
+		e.stopPropagation();
+		// Stash the event so it can be triggered later.
+		deferredPrompt = e;
+		// Update UI notify the user they can install the PWA
+		installState.installReady = true;
+		// Optionally, send analytics event that PWA install promo was shown.
+		console.log(`Ready to show custom install prompt`);
+	});
+}
+
+if (PRETEND_INSTALLABLE) {
+	installState.installReady = true;
+}
+
+export function useIsInstallReady() {
+	return useSnapshot(installState).installReady;
+}
+
+export function useIsInstalled() {
+	return useSnapshot(installState).installed;
+}
+
+export function triggerDeferredInstall() {
+	if (!deferredPrompt) {
+		return false;
+	}
+	// Show the install prompt
+	deferredPrompt.prompt();
+	// Wait for the user to respond to the prompt
+	deferredPrompt.userChoice.then((choiceResult) => {
+		if (choiceResult.outcome === 'accepted') {
+			console.log('User accepted the install prompt');
+			installState.installed = true;
+		} else {
+			console.log('User dismissed the install prompt');
+		}
+		// Clear the deferredPrompt so it can only be used once.
+		deferredPrompt = null;
+		installState.installReady = false;
+	});
+	return true;
+}

package/src/components/pwaInstall/useWebManifest.ts

@@ -0,0 +1,55 @@
+import { useEffect } from 'react';
+import { proxy, useSnapshot } from 'valtio';
+import { WebAppManifest } from 'web-app-manifest';
+
+async function fetchManifest(
+	manifestPath: string = '/manifest.json',
+	controller?: AbortController,
+): Promise<WebAppManifest | undefined> {
+	const response = await fetch(manifestPath, {
+		signal: controller?.signal,
+	});
+	if (!response.ok) {
+		console.error(
+			`Failed to fetch web manifest: ${response.status} ${response.statusText}`,
+		);
+		return {};
+	}
+
+	const manifest = await response.json();
+	return manifest;
+}
+
+function abortableManifestSync(manifestPath: string) {
+	const controller = new AbortController();
+	fetchManifest(manifestPath, controller).then((manifest) => {
+		if (manifest) {
+			manifestState.value = manifest;
+		}
+	});
+	return controller;
+}
+
+const manifestState = proxy({
+	value: {} as WebAppManifest,
+});
+let abortController: AbortController | null = null;
+
+export function useWebManifest(
+	manifestPath = '/manifest.json',
+): WebAppManifest {
+	useEffect(() => {
+		if (abortController) {
+			abortController.abort();
+		}
+		abortController = abortableManifestSync(manifestPath);
+
+		return () => {
+			if (abortController) {
+				abortController.abort();
+			}
+		};
+	}, [manifestPath]);
+
+	return useSnapshot(manifestState).value as WebAppManifest;
+}

package/src/components/toasts/toasts.stories.tsx

@@ -0,0 +1,83 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { toast } from 'react-hot-toast';
+import { Box } from '../box/Box.js';
+import { Button } from '../button/Button.js';
+
+const meta = {
+	title: 'Components/toasts',
+	argTypes: {},
+	parameters: {
+		controls: { expanded: true },
+	},
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+	render(args) {
+		return (
+			<Box col gap>
+				<Button
+					onClick={() => {
+						toast(
+							'This is a default toast! With a lot of text. Enough to wrap around.',
+							{
+								duration: 10_000,
+							},
+						);
+					}}
+				>
+					Show Default Toast
+				</Button>
+				<Button
+					color="success"
+					onClick={() => {
+						toast.success('This is a success toast!', {
+							duration: 10_000,
+						});
+					}}
+				>
+					Show Success Toast
+				</Button>
+				<Button
+					color="attention"
+					onClick={() => {
+						toast.error('This is an error toast!', {
+							duration: 10_000,
+						});
+					}}
+				>
+					Show Error Toast
+				</Button>
+				<Button
+					onClick={() => {
+						const id = toast.loading('This is a loading toast!');
+						setTimeout(() => {
+							toast.success('Loading complete!', { id, duration: 5000 });
+						}, 3000);
+					}}
+				>
+					Show Loading Toast
+				</Button>
+				<Button
+					onClick={() => {
+						toast.promise(
+							(async () => {
+								await new Promise((resolve) => setTimeout(resolve, 3000));
+							})(),
+							{
+								loading: 'Promise is loading...',
+								success: 'Promise resolved!',
+								error: 'Promise rejected.',
+							},
+						);
+					}}
+				>
+					Show Promise Toast
+				</Button>
+			</Box>
+		);
+	},
+};

package/src/components/toasts/toasts.tsx

@@ -1,2 +1,73 @@
 export type * from 'react-hot-toast';
-export { toast, Toaster } from 'react-hot-toast';
+export { toast } from 'react-hot-toast';
+import clsx from 'clsx';
+import { AnimatePresence, motion } from 'motion/react';
+import { DefaultToastOptions, useToaster } from 'react-hot-toast';
+import { useResolvedColorMode } from '../../colorMode.js';
+import { Icon } from '../icon/Icon.js';
+
+const toastOptions: DefaultToastOptions = {};
+
+export const Toaster = (props: { className?: string }) => {
+	const mode = useResolvedColorMode();
+	const { toasts, handlers } = useToaster(toastOptions);
+	const { startPause, endPause } = handlers;
+	const visibleToasts = toasts.filter((t) => t.visible);
+
+	return (
+		<div
+			className={clsx(
+				'fixed z-toast flex flex-col items-center gap-xs left-1/2 center-x top-sm max-w-400px',
+				mode === 'dark' ? 'override-light' : 'override-dark',
+				props.className,
+			)}
+			onMouseEnter={startPause}
+			onMouseLeave={endPause}
+		>
+			<AnimatePresence>
+				{visibleToasts.map((toast) => {
+					const message =
+						typeof toast.message === 'function'
+							? toast.message(toast)
+							: toast.message;
+					return (
+						<motion.div
+							key={toast.id}
+							className={clsx(
+								{
+									'palette-success': toast.type === 'success',
+									'palette-attention': toast.type === 'error',
+									'palette-info': toast.type === 'blank',
+								},
+								'bg-main-wash color-black rounded-md shadow-md px-md py-sm',
+								'flex flex-row gap-sm',
+							)}
+							{...toast.ariaProps}
+							initial={{ scale: 0.8, opacity: 0, y: -20 }}
+							exit={{ scale: 0.8, opacity: 0, y: -20 }}
+							animate={{
+								scale: 1,
+								opacity: 1,
+								y: 0,
+							}}
+							layout
+						>
+							<Icon
+								className="mt-2px"
+								loading={toast.type === 'loading'}
+								name={
+									toast.type === 'success'
+										? 'check'
+										: toast.type === 'error'
+										? 'warning'
+										: 'info'
+								}
+							/>
+							{message}
+						</motion.div>
+					);
+				})}
+			</AnimatePresence>
+		</div>
+	);
+};

package/src/platform.ts

@@ -0,0 +1,103 @@
+export const PRETEND_PWA =
+	(typeof localStorage !== 'undefined' &&
+		localStorage.getItem('pretendPWA')) === 'true';
+
+export const PRETEND_INSTALLABLE =
+	typeof localStorage !== 'undefined' &&
+	localStorage.getItem('pretendInstallable') === 'true';
+
+export const PRETEND_OS =
+	(typeof localStorage !== 'undefined' && localStorage.getItem('pretendOS')) ||
+	null;
+
+export function getIsPWAInstalled() {
+	return (
+		(typeof window !== 'undefined' && PRETEND_PWA) ||
+		window.matchMedia('(display-mode: standalone)').matches
+	);
+}
+
+export function getOS() {
+	if (PRETEND_OS) {
+		return PRETEND_OS;
+	}
+
+	if (typeof window === 'undefined') {
+		return 'Server';
+	}
+
+	const userAgent = window.navigator.userAgent;
+	const platform = window.navigator.platform;
+	const macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K'];
+	const windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE'];
+	const iosPlatforms = ['iPhone', 'iPad', 'iPod'];
+
+	if (macosPlatforms.indexOf(platform) !== -1) {
+		return 'Mac OS';
+	} else if (iosPlatforms.indexOf(platform) !== -1) {
+		return 'iOS';
+	} else if (windowsPlatforms.indexOf(platform) !== -1) {
+		return 'Windows';
+	} else if (/Android/.test(userAgent)) {
+		return 'Android';
+	} else if (!platform && /Linux/.test(userAgent)) {
+		return 'Linux';
+	}
+
+	return 'Other';
+}
+
+export function getIsSafari() {
+	if (typeof window === 'undefined') {
+		return false;
+	}
+
+	const ua = navigator.userAgent.toLowerCase();
+	return !!ua.match(/WebKit/i) && !ua.match(/CriOS/i);
+}
+
+export function getIsFirefox() {
+	if (typeof window === 'undefined') {
+		return false;
+	}
+
+	const ua = navigator.userAgent.toLowerCase();
+	return !!ua.match(/Firefox/i);
+}
+
+export function getIsEdge() {
+	if (typeof window === 'undefined') {
+		return false;
+	}
+
+	const ua = navigator.userAgent.toLowerCase();
+	return !!ua.match(/Edge/i);
+}
+
+export function getIsMobile() {
+	return (
+		typeof window !== 'undefined' &&
+		(/Mobi/.test(navigator.userAgent) ||
+			/Android/i.test(navigator.userAgent) ||
+			/iPhone/i.test(navigator.userAgent) ||
+			/iPad/i.test(navigator.userAgent))
+	);
+}
+
+export function getSupportsPWAInstallPrompt() {
+	if (PRETEND_INSTALLABLE) {
+		return true;
+	}
+	return typeof window !== 'undefined' && 'BeforeInstallPromptEvent' in window;
+}
+
+let isUsingTouch = false;
+if (typeof window !== 'undefined') {
+	window.addEventListener('touchstart', () => {
+		isUsingTouch = true;
+	});
+}
+
+export function getIsTouch() {
+	return isUsingTouch;
+}

package/src/uno/logic/color.test.ts

@@ -50,36 +50,18 @@ describe('oklch color evaluation tools', () => {
 	});
 	it('should evaluate a valid oklch color value using element property values', () => {
 		const context = snapshotColorContext('leek');
-		expect(wash.computeSrgb(context)).toMatchInlineSnapshot(
-			`"rgb(100% 100% 100%)"`,
-		);
-		expect(wash.computeHex(context)).toMatchInlineSnapshot(`"#fff"`);
 		expect(wash.computeOklch(context)).toMatchInlineSnapshot(
 			`"oklch(100% 10% 165.88)"`,
 		);
-
-		expect(DEFAULT.computeSrgb(context)).toMatchInlineSnapshot(
-			`"rgb(40.747% 99.344% 77.98%)"`,
-		);
-		expect(DEFAULT.computeHex(context)).toMatchInlineSnapshot(`"#68fdc7"`);
 		expect(DEFAULT.computeOklch(context)).toMatchInlineSnapshot(
 			`"oklch(90% 37.5% 165.88)"`,
 		);
 	});
 	it('should evaluate different named palettes in addition to main', () => {
 		const context = snapshotColorContext('attention');
-		expect(wash.computeSrgb(context)).toMatchInlineSnapshot(
-			`"rgb(100% 100% 100%)"`,
-		);
-		expect(wash.computeHex(context)).toMatchInlineSnapshot(`"#fff"`);
 		expect(wash.computeOklch(context)).toMatchInlineSnapshot(
 			`"oklch(100% 10% 30)"`,
 		);
-
-		expect(DEFAULT.computeSrgb(context)).toMatchInlineSnapshot(
-			`"rgb(100% 80.069% 75.637%)"`,
-		);
-		expect(DEFAULT.computeHex(context)).toMatchInlineSnapshot(`"#ffccc1"`);
 		expect(DEFAULT.computeOklch(context)).toMatchInlineSnapshot(
 			`"oklch(90% 37.5% 30)"`,
 		);
@@ -89,18 +71,9 @@ describe('oklch color evaluation tools', () => {
 		darkMode.classList.add('override-dark', 'palette-leek');
 		document.body.appendChild(darkMode);
 		const context = snapshotColorContext('leek', 'dark');
-		expect(wash.computeSrgb(context)).toMatchInlineSnapshot(
-			`"rgb(0% 14.06% 7.3466%)"`,
-		);
-		expect(wash.computeHex(context)).toMatchInlineSnapshot(`"#002413"`);
 		expect(wash.computeOklch(context)).toMatchInlineSnapshot(
 			`"oklch(22% 20% 165.88)"`,
 		);
-
-		expect(DEFAULT.computeSrgb(context)).toMatchInlineSnapshot(
-			`"rgb(0% 60.697% 41.999%)"`,
-		);
-		expect(DEFAULT.computeHex(context)).toMatchInlineSnapshot(`"#009b6b"`);
 		expect(DEFAULT.computeOklch(context)).toMatchInlineSnapshot(
 			`"oklch(60% 40% 165.88)"`,
 		);