@jarwizz/create-jarshop 0.1.1 → 0.1.2

package/dist/template/storefront/app/[locale]/layout.tsx

@@ -0,0 +1,48 @@
+import Link from "next/link";
+import type { ReactNode } from "react";
+
+import { getCart } from "../../lib/cart";
+import { formatMessage, parseLocale } from "../../lib/i18n";
+
+interface LocaleLayoutProps {
+  readonly children: ReactNode;
+  readonly params: Promise<{ locale: string }>;
+}
+
+export default async function LocaleLayout({
+  children,
+  params,
+}: LocaleLayoutProps) {
+  const { locale } = await params;
+  const language = parseLocale(locale);
+  const cart = await getCart(language);
+  const itemCount =
+    cart?.lines.reduce((total, line) => total + line.quantity, 0) ?? 0;
+
+  return (
+    <>
+      <header className="site-header">
+        <div className="site-header__inner">
+          <Link className="brand" href={`/${language}`}>
+            JarShop <span>Starter</span>
+          </Link>
+          <nav aria-label="Storefront navigation" className="site-nav">
+            <Link href={`/${language}`}>
+              {formatMessage(language, "nav.catalog", {})}
+            </Link>
+            <Link className="cart-link" href={`/${language}/cart`}>
+              {formatMessage(language, "nav.cart", {})}
+              <span>
+                {formatMessage(language, "nav.cartItems", { count: itemCount })}
+              </span>
+            </Link>
+            <Link href={`/${language}/account`}>
+              {formatMessage(language, "nav.account", {})}
+            </Link>
+          </nav>
+        </div>
+      </header>
+      {children}
+    </>
+  );
+}

package/dist/template/storefront/app/[locale]/page.tsx

@@ -1,27 +1,26 @@
 import { getCatalog } from "../../lib/commerce";
+import { createTranslator, parseLocale } from "../../lib/i18n";
 
 interface LocalePageProps {
   params: Promise<{ locale: string }>;
 }
 
-const labels = {
-  sk: { title: "Produkty", empty: "Produkty sa nepodarilo načítať." },
-  en: { title: "Products", empty: "Products are not available." },
-} as const;
-
 export default async function LocalePage({ params }: LocalePageProps) {
   const { locale } = await params;
-  const language = locale === "en" ? "en" : "sk";
+  const language = parseLocale(locale);
   const result = await getCatalog(language);
-  const copy = labels[language];
+  const t = createTranslator(language);
 
   return (
-    <main lang={language}>
-      <h1>{copy.title}</h1>
+    <main className="page" lang={language}>
+      <div className="page-heading">
+        <p className="eyebrow">JarShop starter</p>
+        <h1>{t("catalog.title")}</h1>
+      </div>
       {!result.ok || result.data.length === 0 ? (
-        <p>{copy.empty}</p>
+        <p>{t("catalog.empty")}</p>
       ) : (
-        <ul>
+        <ul className="product-grid">
           {result.data.map((product) => (
             <li key={product.id}>
               <a href={`/${language}/${product.slug}`}>{product.name}</a>

package/dist/template/storefront/app/globals.css

@@ -1,16 +1,384 @@
 :root {
   color-scheme: light;
-  font-family: system-ui, sans-serif;
+  font-family:
+    Inter,
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    sans-serif;
+  background: #f6f7fb;
+  color: #182033;
 }
 
 body {
   margin: 0;
-  background: #fff;
-  color: #111;
+  min-height: 100vh;
+  background: #f6f7fb;
+}
+
+.site-header {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  border-bottom: 1px solid #e5e7ef;
+  background: rgb(255 255 255 / 92%);
+  backdrop-filter: blur(10px);
 }
 
-main {
+.site-header__inner,
+.page {
   max-width: 72rem;
   margin: 0 auto;
+}
+
+.site-header__inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 4.5rem;
+  padding: 0 2rem;
+}
+
+.brand,
+.site-nav a,
+.product-grid a,
+.back-link,
+.cart-lines a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.brand {
+  font-weight: 800;
+  letter-spacing: -0.04em;
+}
+
+.brand span {
+  color: #6d7390;
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
+.site-nav {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.site-nav a {
+  padding: 0.55rem 0.7rem;
+  border-radius: 0.55rem;
+  font-size: 0.92rem;
+  font-weight: 650;
+}
+
+.site-nav a:hover,
+.site-nav a:focus-visible {
+  background: #eff1f7;
+}
+
+.cart-link span {
+  margin-left: 0.35rem;
+  padding: 0.15rem 0.38rem;
+  border-radius: 999px;
+  background: #182033;
+  color: #fff;
+  font-size: 0.72rem;
+}
+
+.page {
   padding: 2rem;
 }
+
+.page-heading {
+  margin-bottom: 1.5rem;
+}
+
+h1,
+h2,
+p {
+  margin-top: 0;
+}
+
+h1 {
+  margin-bottom: 0.4rem;
+  font-size: clamp(2rem, 5vw, 3.3rem);
+  letter-spacing: -0.055em;
+}
+
+.eyebrow {
+  margin-bottom: 0.45rem;
+  color: #69708b;
+  font-size: 0.75rem;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.product-grid,
+.variant-list,
+.cart-lines {
+  display: grid;
+  gap: 0.85rem;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.product-grid {
+  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+}
+
+.product-grid li,
+.variant-list li,
+.cart-lines li,
+.cart-summary,
+.checkout-form {
+  border: 1px solid #e4e7f0;
+  border-radius: 0.9rem;
+  background: #fff;
+  box-shadow: 0 0.5rem 1.25rem rgb(29 38 61 / 5%);
+}
+
+.product-grid li {
+  padding: 1.25rem;
+}
+
+.product-grid a {
+  display: block;
+  margin-bottom: 0.55rem;
+  font-weight: 750;
+}
+
+.product-grid p {
+  margin: 0;
+  color: #626a82;
+  font-size: 0.93rem;
+  line-height: 1.55;
+}
+
+.back-link {
+  display: inline-block;
+  margin-bottom: 1.35rem;
+  color: #59627b;
+  font-weight: 650;
+}
+
+.product-page__intro {
+  max-width: 42rem;
+  margin-bottom: 1.5rem;
+}
+
+.product-page__intro p {
+  color: #626a82;
+  line-height: 1.6;
+}
+
+.variant-list {
+  max-width: 44rem;
+}
+
+.variant-list li {
+  display: grid;
+  grid-template-columns: 1fr auto auto;
+  gap: 1rem;
+  align-items: center;
+  padding: 1rem 1.1rem;
+}
+
+.price {
+  display: block;
+  margin-top: 0.2rem;
+  color: #626a82;
+  font-size: 0.9rem;
+}
+
+.stock {
+  font-size: 0.85rem;
+  font-weight: 700;
+}
+
+.stock--in {
+  color: #18724c;
+}
+.stock--out {
+  color: #ad3845;
+}
+
+button,
+.button-link,
+.cart-toast a {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 2.45rem;
+  padding: 0.55rem 0.85rem;
+  border: 0;
+  border-radius: 0.6rem;
+  background: #2453eb;
+  color: #fff;
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.9rem;
+  font-weight: 750;
+  text-decoration: none;
+}
+
+button:hover,
+button:focus-visible,
+.button-link:hover,
+.button-link:focus-visible {
+  background: #173fc2;
+}
+
+button:disabled {
+  cursor: wait;
+  opacity: 0.6;
+}
+
+.add-to-cart {
+  min-width: max-content;
+}
+
+.cart-toast {
+  display: flex;
+  gap: 0.65rem;
+  align-items: center;
+  margin-top: 0.7rem;
+  padding: 0.65rem 0.75rem;
+  border: 1px solid #9cdcc0;
+  border-radius: 0.65rem;
+  background: #effaf4;
+  color: #155c3d;
+  font-size: 0.85rem;
+  font-weight: 650;
+}
+
+.cart-toast a {
+  min-height: auto;
+  padding: 0.35rem 0.55rem;
+  background: #167047;
+  font-size: 0.78rem;
+}
+
+.form-error {
+  color: #b32637;
+  font-size: 0.88rem;
+}
+
+.cart-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
+  gap: 1.5rem;
+  align-items: start;
+}
+
+.cart-lines li {
+  padding: 1rem 1.1rem;
+}
+
+.cart-lines form {
+  display: inline-flex;
+  gap: 0.5rem;
+  align-items: end;
+  margin-right: 0.5rem;
+}
+
+.cart-lines label,
+.checkout-form label {
+  display: grid;
+  gap: 0.35rem;
+  font-size: 0.88rem;
+  font-weight: 650;
+}
+
+input,
+select {
+  min-height: 2.35rem;
+  box-sizing: border-box;
+  padding: 0.45rem 0.6rem;
+  border: 1px solid #cbd0df;
+  border-radius: 0.55rem;
+  background: #fff;
+  color: inherit;
+  font: inherit;
+}
+
+input:focus,
+select:focus {
+  outline: 3px solid rgb(36 83 235 / 20%);
+  border-color: #2453eb;
+}
+
+.cart-summary {
+  padding: 1.2rem;
+}
+
+.cart-summary dl {
+  display: grid;
+  gap: 0.7rem;
+  margin: 0 0 1.2rem;
+}
+
+.cart-summary dl div {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.cart-summary dd {
+  margin: 0;
+  font-weight: 750;
+}
+.cart-summary dl div:last-child {
+  padding-top: 0.7rem;
+  border-top: 1px solid #e6e8f0;
+}
+
+.checkout-form {
+  display: grid;
+  gap: 1rem;
+  max-width: 44rem;
+  padding: 1.25rem;
+}
+
+.checkout-form fieldset {
+  display: grid;
+  gap: 0.65rem;
+  margin: 0;
+  padding: 1rem;
+  border: 1px solid #e4e7f0;
+  border-radius: 0.7rem;
+}
+
+.checkout-form fieldset label {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+}
+.checkout-form fieldset input {
+  min-height: auto;
+}
+
+@media (max-width: 42rem) {
+  .site-header__inner,
+  .page {
+    padding-right: 1rem;
+    padding-left: 1rem;
+  }
+  .site-header__inner {
+    min-height: 4rem;
+  }
+  .variant-list li,
+  .cart-layout {
+    grid-template-columns: 1fr;
+  }
+  .cart-lines form {
+    display: flex;
+    margin-top: 0.65rem;
+  }
+}

package/dist/template/storefront/app/layout.tsx

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+
+import "./globals.css";
+
+export default function RootLayout({
+  children,
+}: Readonly<{ children: ReactNode }>) {
+  return (
+    <html lang="sk">
+      <body>{children}</body>
+    </html>
+  );
+}

package/dist/template/storefront/eslint.config.mjs

@@ -5,5 +5,5 @@ import nextTypeScript from "eslint-config-next/typescript";
 export default defineConfig([
   ...nextVitals,
   ...nextTypeScript,
-  globalIgnores([".next/**", "out/**", "build/**", "next-env.d.ts"]),
+  globalIgnores([".next/**", "dist/**", "out/**", "build/**", "next-env.d.ts"]),
 ]);

package/dist/template/storefront/gitignore.template

@@ -0,0 +1 @@
+src/gql/

package/dist/template/storefront/lib/account-security.test.ts

@@ -0,0 +1,74 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  createAccountActionGuard,
+  type AccountRateLimitStore,
+} from "./account-security";
+
+function store(allowed = true): AccountRateLimitStore & { keys: string[][] } {
+  const keys: string[][] = [];
+  return {
+    keys,
+    async consume(buckets) {
+      keys.push(buckets.map((bucket) => bucket.key));
+      return allowed;
+    },
+  };
+}
+
+describe("account action security guard", () => {
+  it("rejects a cross-origin action before it reaches commerce", async () => {
+    const rateLimits = store();
+    const guard = createAccountActionGuard(rateLimits);
+
+    await expect(
+      guard.check({
+        scope: "login",
+        subject: "customer@example.com",
+        origin: "https://attacker.example",
+        host: "shop.example",
+        clientAddress: "203.0.113.10",
+        now: 0,
+      }),
+    ).resolves.toEqual({ allowed: false, reason: "origin" });
+    expect(rateLimits.keys).toEqual([]);
+  });
+
+  it("uses independent client and subject buckets without retaining personal data", async () => {
+    const rateLimits = store();
+    const guard = createAccountActionGuard(rateLimits);
+    const request = {
+      scope: "password-reset",
+      subject: "customer@example.com",
+      origin: "https://shop.example",
+      host: "shop.example",
+      clientAddress: "203.0.113.10",
+    };
+
+    await expect(guard.check({ ...request, now: 0 })).resolves.toEqual({
+      allowed: true,
+    });
+    expect(rateLimits.keys).toHaveLength(1);
+    expect(rateLimits.keys[0]).toHaveLength(2);
+    expect(rateLimits.keys[0]?.join(" ")).not.toContain("customer@example.com");
+  });
+
+  it("fails closed when the shared rate-limit store is unavailable", async () => {
+    const guard = createAccountActionGuard({
+      async consume() {
+        throw new Error("Valkey unavailable");
+      },
+    });
+
+    await expect(
+      guard.check({
+        scope: "login",
+        subject: "customer@example.com",
+        origin: "https://shop.example",
+        host: "shop.example",
+        clientAddress: "203.0.113.10",
+        now: 0,
+      }),
+    ).resolves.toEqual({ allowed: false, reason: "rateLimit" });
+  });
+});

package/dist/template/storefront/lib/account-security.ts

@@ -0,0 +1,81 @@
+import { createHash } from "node:crypto";
+
+export interface AccountActionRequest {
+  scope: string;
+  subject: string;
+  origin: string | null;
+  host: string | null;
+  clientAddress: string | null;
+  now: number;
+}
+
+export type AccountActionSecurityResult =
+  { allowed: true } | { allowed: false; reason: "origin" | "rateLimit" };
+
+export interface AccountRateLimitBucket {
+  key: string;
+  maxAttempts: number;
+}
+
+export interface AccountRateLimitStore {
+  consume(
+    buckets: readonly AccountRateLimitBucket[],
+    windowMs: number,
+  ): Promise<boolean>;
+}
+
+interface AccountActionGuardOptions {
+  subjectMaxAttempts?: number;
+  clientMaxAttempts?: number;
+  windowMs?: number;
+}
+
+function digest(parts: readonly string[]): string {
+  return createHash("sha256").update(parts.join("\u0000")).digest("hex");
+}
+
+export function createAccountActionGuard(
+  store: AccountRateLimitStore,
+  options: AccountActionGuardOptions = {},
+) {
+  const subjectMaxAttempts = options.subjectMaxAttempts ?? 5;
+  const clientMaxAttempts = options.clientMaxAttempts ?? 20;
+  const windowMs = options.windowMs ?? 15 * 60 * 1000;
+
+  return {
+    async check(
+      request: AccountActionRequest,
+    ): Promise<AccountActionSecurityResult> {
+      if (request.origin && request.host) {
+        try {
+          if (new URL(request.origin).host !== request.host) {
+            return { allowed: false, reason: "origin" };
+          }
+        } catch {
+          return { allowed: false, reason: "origin" };
+        }
+      }
+
+      const scope = request.scope.trim().toLowerCase();
+      const client = request.clientAddress?.trim() || "unknown-client";
+      const subject = request.subject.trim().toLowerCase();
+      const buckets = [
+        {
+          key: `jarshop:account:client:${digest([scope, client])}`,
+          maxAttempts: clientMaxAttempts,
+        },
+        {
+          key: `jarshop:account:subject:${digest([scope, client, subject])}`,
+          maxAttempts: subjectMaxAttempts,
+        },
+      ];
+
+      try {
+        if (await store.consume(buckets, windowMs)) return { allowed: true };
+        return { allowed: false, reason: "rateLimit" };
+      } catch {
+        return { allowed: false, reason: "rateLimit" };
+      }
+    },
+  };
+}