@linguanahq/cli 0.1.0

package/dist/templates/saas/solidjs/src/App.tsx

@@ -0,0 +1,629 @@
+import { useTranslation } from "@linguanahq/solid";
+import { createEffect, For, onCleanup, onMount } from "solid-js";
+import { createStore, reconcile } from "solid-js/store";
+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() {
+	const runtime = useTranslation();
+	const locale = runtime.locale;
+	const translate = runtime.translate;
+	const locales = () =>
+		runtime.availableLocales().length
+			? runtime.availableLocales()
+			: demoLocales.filter((item) => item.code === "en");
+	const changeLocale = (value: string) => void runtime.setLocale(value);
+	const [state, setState] = createStore(initialState());
+	const set = <K extends keyof State>(key: K, value: State[K]) =>
+		setState(reconcile({ ...state, [key]: value }));
+	onMount(() => {
+		set("cart", readCart());
+		const pop = () => set("path", window.location.pathname);
+		window.addEventListener("popstate", pop);
+		onCleanup(() => window.removeEventListener("popstate", pop));
+	});
+	createEffect(() => {
+		document.documentElement.lang = locale();
+		document.documentElement.dir = locale().startsWith("ar") ? "rtl" : "ltr";
+	});
+	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 !== "/" && 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 class="site saas">
+			<a href="#main" class="skip-link">
+				<Copy name="skip" />
+			</a>
+			<header class="site-header">
+				<a
+					href="/"
+					class="brand"
+					onClick={(event) => {
+						navigate(event);
+					}}
+					aria-label={`Relay — ${msg("home")}`}
+				>
+					<span class="brand-mark" aria-hidden="true">
+						{"↗"}
+					</span>
+					{"Relay"}
+				</a>
+				<nav aria-label={msg("home")}>
+					<a href="/#preview">
+						<Copy name="product" />
+					</a>
+					<a href="/#pricing">
+						<Copy name="pricing" />
+					</a>
+					<label class="locale-picker">
+						<span class="sr-only">
+							<Copy name="language" />
+						</span>
+						<select
+							value={locale()}
+							aria-label={msg("language")}
+							onChange={(event) => {
+								changeLocale(value(event));
+							}}
+						>
+							<For each={locales()}>
+								{(language) => (
+									<>
+										<option value={language.code}>{language.nativeName}</option>
+									</>
+								)}
+							</For>
+						</select>
+					</label>
+					<a href="/#demo" class="button small">
+						<Copy name="demoCta" />
+					</a>
+				</nav>
+			</header>
+			<main id="main">
+				{state.path === "/" && (
+					<>
+						<section class="hero saas-hero">
+							<div class="hero-copy">
+								<p class="eyebrow">
+									<Copy name="eyebrow" />
+								</p>
+								<h1>
+									<Copy name="headline" />
+								</h1>
+								<p class="intro">
+									<Copy name="intro" />
+								</p>
+								<div class="hero-actions">
+									<a href="#preview" class="button">
+										<Copy name="try" />
+										{" ↗"}
+									</a>
+									<a href="#pricing" class="text-link">
+										<Copy name="pricing" />
+									</a>
+								</div>
+							</div>
+							<div class="handover-art" aria-hidden="true">
+								<span class="orbit-label">{"01 → 02 → 03"}</span>
+								<div class="paper">
+									<div class="avatar">{"A"}</div>
+									<strong>
+										<Copy name="boardTitle" />
+									</strong>
+									<div class="paper-line" />
+									<div class="paper-line short" />
+									<div class="avatars">
+										<span>{"JD"}</span>
+										<span>{"MK"}</span>
+										<span>{"AL"}</span>
+									</div>
+								</div>
+								<div class="art-stamp">{"↗"}</div>
+							</div>
+						</section>
+						<section class="section workflow" id="preview">
+							<div>
+								<p class="eyebrow">
+									<Copy name="live" />
+								</p>
+								<h2>
+									<Copy name="preview" />
+								</h2>
+								<div class="workflow-steps">
+									<button
+										type="button"
+										class={
+											state.step === 0
+												? "workflow-step selected"
+												: "workflow-step"
+										}
+										aria-pressed={state.step === 0}
+										onClick={(_event) => {
+											set("step", 0);
+										}}
+									>
+										<span class="step-number">{"01"}</span>
+										<span>
+											<strong>
+												<Copy name="step0" />
+											</strong>
+											<span>
+												<Copy name="step0Body" />
+											</span>
+										</span>
+									</button>
+									<button
+										type="button"
+										class={
+											state.step === 1
+												? "workflow-step selected"
+												: "workflow-step"
+										}
+										aria-pressed={state.step === 1}
+										onClick={(_event) => {
+											set("step", 1);
+										}}
+									>
+										<span class="step-number">{"02"}</span>
+										<span>
+											<strong>
+												<Copy name="step1" />
+											</strong>
+											<span>
+												<Copy name="step1Body" />
+											</span>
+										</span>
+									</button>
+									<button
+										type="button"
+										class={
+											state.step === 2
+												? "workflow-step selected"
+												: "workflow-step"
+										}
+										aria-pressed={state.step === 2}
+										onClick={(_event) => {
+											set("step", 2);
+										}}
+									>
+										<span class="step-number">{"03"}</span>
+										<span>
+											<strong>
+												<Copy name="step2" />
+											</strong>
+											<span>
+												<Copy name="step2Body" />
+											</span>
+										</span>
+									</button>
+								</div>
+							</div>
+							<div class="preview-board">
+								<div class="board-header">
+									<span class="dot" />
+									{"RELAY / "}
+									<Copy name="boardTitle" />
+								</div>
+								<div class="board-content">
+									<p class="eyebrow">
+										<Copy name={`step${state.step}`} />
+									</p>
+									<h3>
+										<Copy name="boardNote" />
+									</h3>
+									{state.step >= 1 && (
+										<p class="owner">
+											<span class="avatar">{"A"}</span>
+											<Copy name="owner" />
+										</p>
+									)}
+									{state.step === 2 && (
+										<button
+											type="button"
+											class="button"
+											onClick={(_event) => {
+												set("acknowledged", true);
+											}}
+										>
+											<Copy name="acknowledge" />
+										</button>
+									)}
+									{state.acknowledged && (
+										<p role="status" class="success">
+											<Copy name="acknowledged" />
+										</p>
+									)}
+								</div>
+							</div>
+						</section>
+						<section class="section features">
+							<article>
+								<span class="feature-icon" aria-hidden="true">
+									{"↗"}
+								</span>
+								<h2>
+									<Copy name="feature1" />
+								</h2>
+								<p>
+									<Copy name="feature1Body" />
+								</p>
+							</article>
+							<article>
+								<span class="feature-icon" aria-hidden="true">
+									{"◎"}
+								</span>
+								<h2>
+									<Copy name="feature2" />
+								</h2>
+								<p>
+									<Copy name="feature2Body" />
+								</p>
+							</article>
+						</section>
+						<section class="section pricing" id="pricing">
+							<p class="eyebrow">
+								<Copy name="pricing" />
+							</p>
+							<h2>
+								<Copy name="priceHeading" />
+							</h2>
+							<fieldset class="billing-toggle" aria-label={msg("pricing")}>
+								<button
+									type="button"
+									aria-pressed={!state.annual}
+									onClick={(_event) => {
+										set("annual", false);
+									}}
+								>
+									<Copy name="monthly" />
+								</button>
+								<button
+									type="button"
+									aria-pressed={state.annual}
+									onClick={(_event) => {
+										set("annual", true);
+									}}
+								>
+									<Copy name="yearly" />
+								</button>
+							</fieldset>
+							<div class="pricing-grid">
+								<article class="plan">
+									<h3>
+										<Copy name="starter" />
+									</h3>
+									<p>
+										<Copy name="starterDesc" />
+									</p>
+									<p class="plan-price">
+										{money(12 * (state.annual ? 0.8 : 1))}
+									</p>
+									<p class="muted">
+										<Copy name="perMonth" />
+									</p>
+									<p class="billing-note">
+										{state.annual && <Copy name="billed" />}
+									</p>
+									<a href="#demo" class="button">
+										<Copy name="select" />
+									</a>
+									<ul>
+										<li>
+											<Copy name="planFeature1" />
+										</li>
+										<li>
+											<Copy name="planFeature2" />
+										</li>
+									</ul>
+								</article>
+								<article class="plan popular">
+									<span class="plan-badge">
+										<Copy name="popular" />
+									</span>
+									<h3>
+										<Copy name="team" />
+									</h3>
+									<p>
+										<Copy name="teamDesc" />
+									</p>
+									<p class="plan-price">
+										{money(24 * (state.annual ? 0.8 : 1))}
+									</p>
+									<p class="muted">
+										<Copy name="perMonth" />
+									</p>
+									<p class="billing-note">
+										{state.annual && <Copy name="billed" />}
+									</p>
+									<a href="#demo" class="button">
+										<Copy name="select" />
+									</a>
+									<ul>
+										<li>
+											<Copy name="planFeature1" />
+										</li>
+										<li>
+											<Copy name="planFeature2" />
+										</li>
+										<li>
+											<Copy name="planFeature3" />
+										</li>
+									</ul>
+								</article>
+								<article class="plan">
+									<h3>
+										<Copy name="scale" />
+									</h3>
+									<p>
+										<Copy name="scaleDesc" />
+									</p>
+									<p class="plan-price">
+										{money(48 * (state.annual ? 0.8 : 1))}
+									</p>
+									<p class="muted">
+										<Copy name="perMonth" />
+									</p>
+									<p class="billing-note">
+										{state.annual && <Copy name="billed" />}
+									</p>
+									<a href="#demo" class="button">
+										<Copy name="select" />
+									</a>
+									<ul>
+										<li>
+											<Copy name="planFeature1" />
+										</li>
+										<li>
+											<Copy name="planFeature2" />
+										</li>
+										<li>
+											<Copy name="planFeature3" />
+										</li>
+									</ul>
+								</article>
+							</div>
+						</section>
+						<section class="section faq" id="faq">
+							<h2>
+								<Copy name="faq" />
+							</h2>
+							<details>
+								<summary>
+									<Copy name="q1" />
+								</summary>
+								<p>
+									<Copy name="a1" />
+								</p>
+							</details>
+							<details>
+								<summary>
+									<Copy name="q2" />
+								</summary>
+								<p>
+									<Copy name="a2" />
+								</p>
+							</details>
+							<details>
+								<summary>
+									<Copy name="q3" />
+								</summary>
+								<p>
+									<Copy name="a3" />
+								</p>
+							</details>
+						</section>
+						<section class="section contact" id="demo">
+							<div>
+								<p class="eyebrow">
+									<Copy name="demoCta" />
+								</p>
+								<h2>
+									<Copy name="formTitle" />
+								</h2>
+							</div>
+							<form
+								class="demo-form"
+								onSubmit={(event) => {
+									submit(event);
+								}}
+								novalidate
+							>
+								<label>
+									<Copy name="name" />
+									<input
+										name="name"
+										autocomplete="name"
+										required
+										maxlength={80}
+										value={state.name}
+										onInput={(event) => {
+											set("name", value(event));
+										}}
+									/>
+								</label>
+								<label>
+									<Copy name="email" />
+									<input
+										type="email"
+										name="email"
+										autocomplete="email"
+										required
+										value={state.email}
+										onInput={(event) => {
+											set("email", value(event));
+										}}
+									/>
+								</label>
+								<button class="button" type="submit">
+									<Copy name="demoCta" />
+								</button>
+								<p class="muted fine">
+									<Copy name="simulated" />
+								</p>
+								{state.error && (
+									<p role="alert">
+										<Copy name="formError" />
+									</p>
+								)}
+								{state.sent && (
+									<p role="status" class="success">
+										<Copy name="sent" values={{ name: state.name }} />
+									</p>
+								)}
+							</form>
+						</section>
+					</>
+				)}
+				{notFound() && (
+					<section class="section empty">
+						<p class="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 class="site-footer">
+				<div>
+					<a
+						href="/"
+						class="brand"
+						onClick={(event) => {
+							navigate(event);
+						}}
+					>
+						{"Relay"}
+					</a>
+					<p>
+						<Copy name="about" />
+					</p>
+				</div>
+				<p class="fine">
+					<Copy name="demo" />
+					<a href="https://linguana.mohammedibrahim.dev" rel="noreferrer">
+						{"Linguana ↗"}
+					</a>
+				</p>
+			</footer>
+		</div>
+	);
+}