@linguanahq/cli 0.1.0

package/dist/templates/storefront/react/src/App.tsx

@@ -0,0 +1,616 @@
+import { useTranslation } from "@linguanahq/react";
+import { Fragment, useCallback, useEffect, useState } from "react";
+import Copy from "./Copy.tsx";
+import { demoLocales } from "./i18n";
+import { messages } from "./messages";
+import {
+	initialState,
+	items,
+	quantity,
+	readCart,
+	type State,
+	saveCart,
+} from "./model";
+
+export default function App({ path }: { path?: string }) {
+	const runtime = useTranslation();
+	const locale = () => runtime.locale;
+	const locales = () =>
+		runtime.availableLocales.length
+			? runtime.availableLocales
+			: demoLocales.filter((item) => item.code === runtime.sourceLocale);
+	const translate = runtime.translate;
+	const changeLocale = (value: string) => void runtime.setLocale(value);
+	const [state, setState] = useState(() => initialState(path));
+	const set = useCallback(
+		<K extends keyof State>(key: K, value: State[K]) =>
+			setState((previous) => ({ ...previous, [key]: value })),
+		[],
+	);
+	useEffect(() => {
+		set("cart", readCart());
+		const pop = () => set("path", window.location.pathname);
+		window.addEventListener("popstate", pop);
+		return () => window.removeEventListener("popstate", pop);
+	}, [set]);
+	useEffect(() => {
+		document.documentElement.lang = runtime.locale;
+		document.documentElement.dir = runtime.locale.startsWith("ar")
+			? "rtl"
+			: "ltr";
+	}, [runtime.locale]);
+	const msg = (id: string, values?: Record<string, string | number>) =>
+		String(translate(id, messages[id] ?? id, values));
+	const value = (event: Event | { currentTarget: EventTarget | null }) =>
+		(event.currentTarget as HTMLInputElement).value;
+	const money = (amount: number) =>
+		new Intl.NumberFormat(locale(), {
+			style: "currency",
+			currency: "USD",
+			maximumFractionDigits: 2,
+		}).format(amount);
+	const _date = (input: string) =>
+		new Intl.DateTimeFormat(locale(), {
+			dateStyle: "medium",
+			timeZone: "UTC",
+		}).format(new Date(input));
+	const visible = () =>
+		items
+			.filter(
+				(item) =>
+					(state.category === "all" || item.category === state.category) &&
+					`${msg(`${item.id}Title`)} ${msg(`${item.id}Summary`)}`
+						.toLocaleLowerCase(locale())
+						.includes(state.query.toLocaleLowerCase(locale()).trim()),
+			)
+			.sort((a, b) =>
+				state.sort === "low"
+					? a.price - b.price
+					: state.sort === "high"
+						? b.price - a.price
+						: 0,
+			);
+	const detailHref = (id: string) =>
+		`/products/${items.find((item) => item.id === id)!.slug}`;
+	const detail = () => items.find((item) => detailHref(item.id) === state.path);
+	const notFound = () =>
+		state.path !== "/" && state.path !== "/cart" && detail() === undefined;
+	const clearFilters = () => {
+		set("query", "");
+		set("category", "all");
+	};
+	const count = () =>
+		Object.values(state.cart).reduce((total, count) => total + count, 0);
+	const cartItems = () =>
+		items.filter((item) => (state.cart[item.id] ?? 0) > 0);
+	const total = () =>
+		cartItems().reduce(
+			(total, item) => total + item.price * state.cart[item.id]!,
+			0,
+		);
+	const updateCart = (id: string, count: number) => {
+		const cart = { ...state.cart };
+		if (count <= 0) delete cart[id];
+		else cart[id] = quantity(count);
+		set("cart", cart);
+		saveCart(cart);
+	};
+	const add = (id: string, count: number) => {
+		updateCart(id, (state.cart[id] ?? 0) + count);
+		set("added", true);
+		set("checkout", false);
+	};
+	const checkout = () => {
+		set("cart", {});
+		saveCart({});
+		set("checkout", true);
+		set("added", false);
+	};
+	const _submit = (event: { preventDefault(): void }) => {
+		event.preventDefault();
+		const valid = Boolean(
+			state.name.trim() && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(state.email),
+		);
+		set("error", !valid);
+		set("sent", valid);
+	};
+	const navigate = (event: {
+		currentTarget: EventTarget | null;
+		preventDefault(): void;
+		metaKey: boolean;
+		ctrlKey: boolean;
+		shiftKey: boolean;
+		altKey: boolean;
+		button: number;
+	}) => {
+		if (
+			event.metaKey ||
+			event.ctrlKey ||
+			event.shiftKey ||
+			event.altKey ||
+			event.button !== 0
+		)
+			return;
+		const target = new URL((event.currentTarget as HTMLAnchorElement).href);
+		if (target.origin !== window.location.origin) return;
+		event.preventDefault();
+		window.history.pushState({}, "", target.pathname);
+		set("path", target.pathname);
+		set("quantity", 1);
+		set("added", false);
+		window.scrollTo(0, 0);
+	};
+
+	return (
+		<div className="site storefront">
+			<a href="#main" className="skip-link">
+				<Copy name="skip" />
+			</a>
+			<header className="site-header">
+				<a
+					href="/"
+					className="brand"
+					onClick={(event) => {
+						navigate(event);
+					}}
+					aria-label={`Common Goods — ${msg("home")}`}
+				>
+					<span className="brand-mark" aria-hidden="true">
+						{"◒"}
+					</span>
+					{"Common Goods"}
+				</a>
+				<nav aria-label={msg("home")}>
+					<a
+						href="/"
+						onClick={(event) => {
+							navigate(event);
+						}}
+					>
+						<Copy name="collection" />
+					</a>
+					<a
+						href="/cart"
+						onClick={(event) => {
+							navigate(event);
+						}}
+					>
+						<Copy name="cart" />
+						<span className="cart-count">{count()}</span>
+					</a>
+					<label className="locale-picker">
+						<span className="sr-only">
+							<Copy name="language" />
+						</span>
+						<select
+							value={locale()}
+							aria-label={msg("language")}
+							onChange={(event) => {
+								changeLocale(value(event));
+							}}
+						>
+							{locales().map((language) => (
+								<Fragment key={language.code}>
+									<option value={language.code}>{language.nativeName}</option>
+								</Fragment>
+							))}
+						</select>
+					</label>
+				</nav>
+			</header>
+			<main id="main">
+				{state.path === "/" && (
+					<>
+						<section className="hero store-hero">
+							<div className="hero-copy">
+								<p className="eyebrow">
+									<Copy name="eyebrow" />
+								</p>
+								<h1>
+									<Copy name="headline" />
+								</h1>
+								<p className="intro">
+									<Copy name="intro" />
+								</p>
+								<a href="#collection" className="button">
+									<Copy name="shop" />
+									{" ↗"}
+								</a>
+							</div>
+							<img
+								src="/assets/collection.svg"
+								alt={msg("collection")}
+								className="hero-image"
+								width={800}
+								height={600}
+								loading="lazy"
+							/>
+						</section>
+						<section className="section" id="collection">
+							<div className="section-heading">
+								<h2>
+									<Copy name="collection" />
+								</h2>
+								<Copy name="count" values={{ count: visible().length }} />
+							</div>
+							<div className="filters">
+								<fieldset
+									className="filter-buttons"
+									aria-label={msg(
+										"collection" in messages ? "collection" : "latest",
+									)}
+								>
+									<button
+										type="button"
+										className={
+											state.category === "all" ? "chip active" : "chip"
+										}
+										aria-pressed={state.category === "all"}
+										onClick={(_event) => {
+											set("category", "all");
+										}}
+									>
+										<Copy name="all" />
+									</button>
+									<button
+										type="button"
+										className={
+											state.category === "homeware" ? "chip active" : "chip"
+										}
+										aria-pressed={state.category === "homeware"}
+										onClick={(_event) => {
+											set("category", "homeware");
+										}}
+									>
+										<Copy name="homeware" />
+									</button>
+									<button
+										type="button"
+										className={
+											state.category === "carry" ? "chip active" : "chip"
+										}
+										aria-pressed={state.category === "carry"}
+										onClick={(_event) => {
+											set("category", "carry");
+										}}
+									>
+										<Copy name="carry" />
+									</button>
+									<button
+										type="button"
+										className={
+											state.category === "desk" ? "chip active" : "chip"
+										}
+										aria-pressed={state.category === "desk"}
+										onClick={(_event) => {
+											set("category", "desk");
+										}}
+									>
+										<Copy name="desk" />
+									</button>
+								</fieldset>
+								<label className="search">
+									<span className="sr-only">
+										<Copy name="search" />
+									</span>
+									<input
+										type="search"
+										placeholder={msg("search")}
+										value={state.query}
+										onInput={(event) => {
+											set("query", value(event));
+										}}
+									/>
+								</label>
+								<label className="sort">
+									<span className="sr-only">
+										<Copy name="sort" />
+									</span>
+									<select
+										value={state.sort}
+										onChange={(event) => {
+											set("sort", value(event));
+										}}
+									>
+										<option value="featured">
+											<Copy name="featured" />
+										</option>
+										<option value="low">
+											<Copy name="low" />
+										</option>
+										<option value="high">
+											<Copy name="high" />
+										</option>
+									</select>
+								</label>
+							</div>
+							<div className="product-grid">
+								{visible().map((item) => (
+									<Fragment key={item.id}>
+										<article className="product-card">
+											<a
+												href={detailHref(item.id)}
+												onClick={(event) => {
+													navigate(event);
+												}}
+											>
+												<img
+													src={item.image}
+													alt={msg(`${item.id}Title`)}
+													className=""
+													width={800}
+													height={600}
+													loading="lazy"
+												/>
+											</a>
+											<div className="product-heading">
+												<h3>
+													<a
+														href={detailHref(item.id)}
+														onClick={(event) => {
+															navigate(event);
+														}}
+													>
+														<Copy name={`${item.id}Title`} />
+													</a>
+												</h3>
+												<span>{money(item.price)}</span>
+											</div>
+											<p className="muted">
+												<Copy name={item.category} />
+											</p>
+											<button
+												type="button"
+												className="add-button"
+												onClick={(_event) => {
+													add(item.id, 1);
+												}}
+											>
+												<Copy name="add" />
+											</button>
+										</article>
+									</Fragment>
+								))}
+							</div>
+							{visible().length === 0 && (
+								<div className="empty" role="status">
+									<h3>
+										<Copy name="empty" />
+									</h3>
+									<p>
+										<Copy name="emptyHint" />
+									</p>
+									<button
+										type="button"
+										className="button"
+										onClick={(_event) => {
+											clearFilters();
+										}}
+									>
+										<Copy name="clear" />
+									</button>
+								</div>
+							)}
+						</section>
+					</>
+				)}
+				{detail() !== undefined && (
+					<section className="product-detail section">
+						<img
+							src={detail()!.image}
+							alt={msg(`${detail()!.id}Title`)}
+							className="detail-image"
+							width={800}
+							height={600}
+							loading="lazy"
+						/>
+						<div>
+							<a
+								href="/"
+								onClick={(event) => {
+									navigate(event);
+								}}
+							>
+								<Copy name="back" />
+							</a>
+							<p className="eyebrow">
+								<Copy name={detail()!.category} />
+							</p>
+							<h1>
+								<Copy name={`${detail()!.id}Title`} />
+							</h1>
+							<p className="price">{money(detail()!.price)}</p>
+							<p className="intro">
+								<Copy name={`${detail()!.id}Summary`} />
+							</p>
+							<label className="quantity">
+								<Copy name="qty" />
+								<input
+									type="number"
+									min={1}
+									max={99}
+									value={state.quantity}
+									onInput={(event) => {
+										set("quantity", quantity(value(event)));
+									}}
+								/>
+							</label>
+							<button
+								type="button"
+								className="button"
+								onClick={(_event) => {
+									add(detail()!.id, state.quantity);
+								}}
+							>
+								<Copy name="add" />
+							</button>
+							<p className="muted fine">
+								<Copy name="shipping" />
+							</p>
+						</div>
+					</section>
+				)}
+				{state.path === "/cart" && (
+					<section className="section basket">
+						<p className="eyebrow">
+							<Copy name="count" values={{ count: count() }} />
+						</p>
+						<h1>
+							<Copy name="cart" />
+						</h1>
+						{count() === 0 && (
+							<div className="empty">
+								<p>
+									<Copy name="emptyCart" />
+								</p>
+								<a
+									href="/"
+									onClick={(event) => {
+										navigate(event);
+									}}
+								>
+									<Copy name="shop" />
+								</a>
+							</div>
+						)}
+						{cartItems().map((item) => (
+							<Fragment key={item.id}>
+								<div className="cart-row">
+									<img
+										src={item.image}
+										alt={msg(`${item.id}Title`)}
+										className=""
+										width={800}
+										height={600}
+										loading="lazy"
+									/>
+									<div>
+										<h2>
+											<a
+												href={detailHref(item.id)}
+												onClick={(event) => {
+													navigate(event);
+												}}
+											>
+												<Copy name={`${item.id}Title`} />
+											</a>
+										</h2>
+										<span>{money(item.price)}</span>
+									</div>
+									<label className="quantity">
+										<span className="sr-only">
+											<Copy name="qty" />
+										</span>
+										<input
+											type="number"
+											min={1}
+											max={99}
+											value={state.cart[item.id]}
+											onInput={(event) => {
+												updateCart(item.id, quantity(value(event)));
+											}}
+											aria-label={`${msg("qty")}: ${msg(`${item.id}Title`)}`}
+										/>
+									</label>
+									<button
+										type="button"
+										className="text-button"
+										onClick={(_event) => {
+											updateCart(item.id, 0);
+										}}
+									>
+										<Copy name="remove" />
+									</button>
+								</div>
+							</Fragment>
+						))}
+						{count() > 0 && (
+							<>
+								<div className="cart-total">
+									<strong>
+										<Copy name="total" />
+									</strong>
+									<strong>{money(total())}</strong>
+								</div>
+								<button
+									type="button"
+									className="button"
+									onClick={(_event) => {
+										checkout();
+									}}
+								>
+									<Copy name="checkout" />
+								</button>
+							</>
+						)}
+						<p className="muted">
+							<Copy name="checkoutNote" />
+						</p>
+						<p className="muted fine">
+							<Copy name="shipping" />
+						</p>
+						{state.checkout && (
+							<p role="status" className="success">
+								<Copy name="checkoutDone" />
+							</p>
+						)}
+					</section>
+				)}
+				{state.added && (
+					<div role="status" className="toast">
+						<Copy name="added" />
+						<a
+							href="/cart"
+							onClick={(event) => {
+								navigate(event);
+							}}
+						>
+							<Copy name="cart" />
+						</a>
+					</div>
+				)}
+				{notFound() && (
+					<section className="section empty">
+						<p className="eyebrow">{"404"}</p>
+						<h1>
+							<Copy name="missing" />
+						</h1>
+						<p>
+							<Copy name="missingHint" />
+						</p>
+						<a
+							href="/"
+							onClick={(event) => {
+								navigate(event);
+							}}
+						>
+							<Copy name="back" />
+						</a>
+					</section>
+				)}
+			</main>
+			<footer className="site-footer">
+				<div>
+					<a
+						href="/"
+						className="brand"
+						onClick={(event) => {
+							navigate(event);
+						}}
+					>
+						{"Common Goods"}
+					</a>
+					<p>
+						<Copy name="about" />
+					</p>
+				</div>
+				<p className="fine">
+					<Copy name="demo" />
+					<a href="https://linguana.mohammedibrahim.dev" rel="noreferrer">
+						{"Linguana ↗"}
+					</a>
+				</p>
+			</footer>
+		</div>
+	);
+}