@a-type/ui 3.0.25 → 3.0.28

package/src/components/pwaInstall/PlatformIcons.tsx

@@ -0,0 +1,75 @@
+export function SafariShareIcon() {
+	return (
+		<svg
+			id="pwa-share"
+			width="24"
+			height="24"
+			viewBox="0 0 17.695 26.475"
+			className="v-middle"
+		>
+			<g fill="currentColor">
+				<path d="M17.334 10.762v9.746c0 2.012-1.025 3.027-3.066 3.027H3.066C1.026 23.535 0 22.52 0 20.508v-9.746C0 8.75 1.025 7.734 3.066 7.734h2.94v1.573h-2.92c-.977 0-1.514.527-1.514 1.543v9.57c0 1.015.537 1.543 1.514 1.543h11.152c.967 0 1.524-.527 1.524-1.543v-9.57c0-1.016-.557-1.543-1.524-1.543h-2.91V7.734h2.94c2.04 0 3.066 1.016 3.066 3.028Z" />
+				<path d="M8.662 15.889c.42 0 .781-.352.781-.762V5.097l-.058-1.464.654.693 1.484 1.582a.698.698 0 0 0 .528.235c.4 0 .713-.293.713-.694 0-.205-.088-.361-.235-.508l-3.3-3.183c-.196-.196-.362-.264-.567-.264-.195 0-.361.069-.566.264L4.795 4.94a.681.681 0 0 0-.225.508c0 .4.293.694.703.694.186 0 .4-.079.538-.235l1.474-1.582.664-.693-.058 1.465v10.029c0 .41.351.762.771.762Z" />
+			</g>
+		</svg>
+	);
+}
+
+export function SafariIcon() {
+	return (
+		<svg
+			id="pwa-safari"
+			viewBox="0 0 20.283 19.932"
+			width="25"
+			height="25"
+			className="v-middle"
+		>
+			<g fill="currentColor">
+				<path d="M9.96 19.922c5.45 0 9.962-4.522 9.962-9.961C19.922 4.51 15.4 0 9.952 0 4.511 0 0 4.512 0 9.96c0 5.44 4.521 9.962 9.96 9.962Zm0-1.66A8.26 8.26 0 0 1 1.67 9.96c0-4.61 3.672-8.3 8.281-8.3 4.61 0 8.31 3.69 8.31 8.3 0 4.61-3.69 8.3-8.3 8.3Z" />
+				<path d="m5.87 14.883 5.605-2.735a1.47 1.47 0 0 0 .683-.673l2.725-5.596c.312-.664-.166-1.182-.85-.84L8.447 7.764c-.302.136-.508.341-.674.673L5.03 14.043c-.312.645.196 1.152.84.84Zm4.09-3.72A1.19 1.19 0 0 1 8.77 9.97c0-.664.527-1.201 1.19-1.201a1.2 1.2 0 0 1 1.202 1.2c0 .655-.537 1.192-1.201 1.192Z" />
+			</g>
+		</svg>
+	);
+}
+
+export function SafariPlusSquareIcon() {
+	return (
+		<svg
+			id="pwa-add"
+			width="24"
+			height="24"
+			viewBox="-4 -4 33 33"
+			fill="currentColor"
+			className="v-middle"
+		>
+			<g>
+				<path d="m23.40492,1.60784c-1.32504,-1.32504 -3.19052,-1.56912 -5.59644,-1.56912l-10.65243,0c-2.33622,0 -4.2017,0.24408 -5.5267,1.56912c-1.32504,1.34243 -1.56911,3.17306 -1.56911,5.50924l0,10.5827c0,2.40596 0.22665,4.254 1.55165,5.57902c1.34246,1.32501 3.19052,1.5691 5.59647,1.5691l10.60013,0c2.40592,0 4.2714,-0.24408 5.59644,-1.5691c1.325,-1.34245 1.55166,-3.17306 1.55166,-5.57902l0,-10.51293c0,-2.40596 -0.22666,-4.25401 -1.55166,-5.57901zm-0.38355,5.21289l0,11.24518c0,1.51681 -0.20924,2.94643 -1.02865,3.78327c-0.83683,0.83685 -2.30134,1.0635 -3.81815,1.0635l-11.33234,0c-1.51681,0 -2.96386,-0.22665 -3.80073,-1.0635c-0.83683,-0.83684 -1.04607,-2.26646 -1.04607,-3.78327l0,-11.19288c0,-1.5517 0.20924,-3.01617 1.02865,-3.85304c0.83687,-0.83683 2.31876,-1.04607 3.87042,-1.04607l11.28007,0c1.51681,0 2.98132,0.22666 3.81815,1.06353c0.81941,0.81941 1.02865,2.26645 1.02865,3.78327zm-10.53039,12.08205c0.64506,0 1.02861,-0.43586 1.02861,-1.13326l0,-4.34117l4.53294,0c0.66252,0 1.13326,-0.36613 1.13326,-0.99376c0,-0.64506 -0.43586,-1.02861 -1.13326,-1.02861l-4.53294,0l0,-4.53294c0,-0.6974 -0.38355,-1.13326 -1.02861,-1.13326c-0.62763,0 -0.99376,0.45332 -0.99376,1.13326l0,4.53294l-4.51552,0c-0.69737,0 -1.15069,0.38355 -1.15069,1.02861c0,0.62763 0.48817,0.99376 1.15069,0.99376l4.51552,0l0,4.34117c0,0.66252 0.36613,1.13326 0.99376,1.13326z" />
+			</g>
+		</svg>
+	);
+}
+
+export function SafariAddToDockIcon() {
+	return (
+		<svg
+			id="pwa-add"
+			viewBox="0 0 23.389 17.979"
+			width="24"
+			height="24"
+			className="v-middle"
+		>
+			<g fill="currentColor">
+				<path d="M1.045 3.291v1.377h20.937V3.291Zm2.021 14.688h16.895c2.05 0 3.066-1.006 3.066-3.018V3.027C23.027 1.016 22.012 0 19.961 0H3.066C1.026 0 0 1.016 0 3.027v11.934c0 2.012 1.025 3.018 3.066 3.018Zm.02-1.573c-.977 0-1.514-.517-1.514-1.533V3.115c0-1.015.537-1.543 1.514-1.543H19.94c.967 0 1.514.528 1.514 1.543v11.758c0 1.016-.547 1.533-1.514 1.533Z" />
+				<path d="M4.2 14.014c0 .508.35.85.868.85h12.92c.518 0 .87-.343.87-.85v-1.465c0-.508-.352-.85-.87-.85H5.068c-.517 0-.869.342-.869.85Z" />
+			</g>
+		</svg>
+	);
+}
+
+export function AndroidAddToHomeIcon() {
+	return (
+		<svg height="24" viewBox="0 -960 960 960" width="24" className="v-middle">
+			<path d="M320-40q-33 0-56.5-23.5T240-120v-160h80v40h400v-480H320v40h-80v-160q0-33 23.5-56.5T320-920h400q33 0 56.5 23.5T800-840v720q0 33-23.5 56.5T720-40H320Zm0-120v40h400v-40H320ZM176-280l-56-56 224-224H200v-80h280v280h-80v-144L176-280Zm144-520h400v-40H320v40Zm0 0v-40 40Zm0 640v40-40Z" />
+		</svg>
+	);
+}

package/src/components/pwaInstall/PwaInstallTrigger.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from '../button/Button.js';
+import { Icon } from '../icon/Icon.js';
+import { PwaInstallTrigger } from './PwaInstallTrigger.js';
+
+const meta = {
+	title: 'Components/PwaInstallTrigger',
+	component: PwaInstallTrigger,
+	argTypes: {},
+	parameters: {
+		controls: { expanded: true },
+	},
+} satisfies Meta<typeof PwaInstallTrigger>;
+
+export default meta;
+
+type Story = StoryObj<typeof PwaInstallTrigger>;
+
+export const Default: Story = {
+	render(args) {
+		return (
+			<PwaInstallTrigger {...args} asChild>
+				<Button color="primary" emphasis="light">
+					<Icon name="star" /> Install
+				</Button>
+			</PwaInstallTrigger>
+		);
+	},
+};

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>
+	);
+};