@weft-js/create 0.1.0 → 0.1.2

package/templates/catalog/files/src/components/ProductList.tsx

@@ -0,0 +1,65 @@
+import { Grid, Heading, Link, Stack, Text } from '@weft-js/warp'
+import { derived } from '@weft-js/core'
+import { ProductCard } from '#/components/ProductCard'
+import { PAGE_SIZE, viewHref, type View } from '#/lib/catalog'
+import { listProducts } from '#/server/catalog'
+
+export function ProductList({
+  categoryId,
+  slug,
+  view,
+}: {
+  categoryId: number
+  slug: string
+  view: View
+}) {
+  const products = listProducts(() => ({ categoryId, ...view }))
+  const rows = derived(() => products.value?.rows ?? [])
+  const total = derived(() => products.value?.total ?? 0)
+  const pages = derived(() => Math.max(1, Math.ceil(total.value / PAGE_SIZE)))
+  const filtered = () => view.min !== null || view.max !== null || view.stock
+  return (
+    <Stack gap="group">
+      <Text subtle aria-live="polite">
+        {total.value.toLocaleString('en-US')} {total.value === 1 ? 'piece' : 'pieces'}, lowest price
+        first
+      </Text>
+      {rows.value.length === 0 ? (
+        <Stack gap="tight" class="blank">
+          <Heading level={2}>
+            {filtered() ? 'Nothing fits those filters' : 'This aisle is empty for now'}
+          </Heading>
+          <Text subtle>
+            {filtered()
+              ? "Widen the price range, or include what's sold out."
+              : "New pieces land here as soon as they're made."}
+          </Text>
+          {filtered() && <Link href={`/c/${slug}`}>Clear the filters</Link>}
+        </Stack>
+      ) : (
+        <Grid min="xs" cols={3} gap="group">
+          {rows.value.map((product) => (
+            <ProductCard key={product.slug} product={product} />
+          ))}
+        </Grid>
+      )}
+      {pages.value > 1 && (
+        <nav class="pager" aria-label="Pages">
+          {view.page > 1 ? (
+            <Link href={viewHref(slug, { ...view, page: view.page - 1 })}>Previous</Link>
+          ) : (
+            <span aria-disabled="true">Previous</span>
+          )}
+          <Text subtle>
+            Page {view.page} of {pages.value}
+          </Text>
+          {view.page < pages.value ? (
+            <Link href={viewHref(slug, { ...view, page: view.page + 1 })}>Next</Link>
+          ) : (
+            <span aria-disabled="true">Next</span>
+          )}
+        </nav>
+      )}
+    </Stack>
+  )
+}

package/templates/catalog/files/src/components/Related.tsx

@@ -0,0 +1,19 @@
+import { Grid, Text } from '@weft-js/warp'
+import { ProductCard } from '#/components/ProductCard'
+import { relatedProducts } from '#/server/catalog'
+
+export function Related({ id, categoryId }: { id: number; categoryId: number }) {
+  const related = relatedProducts(() => ({ id, categoryId }))
+  return (
+    <>
+      {related.value?.length === 0 && (
+        <Text subtle>This is the only piece in its aisle for now.</Text>
+      )}
+      <Grid min="xs" cols={4} gap="group">
+        {related.value?.map((product) => (
+          <ProductCard key={product.slug} product={product} />
+        ))}
+      </Grid>
+    </>
+  )
+}

package/templates/catalog/files/src/components/SiteFooter.tsx

@@ -0,0 +1,9 @@
+// Plain elements, like the header: nothing here runs, so nothing here has to ship.
+export function SiteFooter() {
+  return (
+    <footer class="site-foot">
+      <p>Mendwell. Goods made to be used hard and fixed when they wear.</p>
+      <p>Free repairs for the first ten years.</p>
+    </footer>
+  )
+}

package/templates/catalog/files/src/components/SiteHeader.tsx

@@ -0,0 +1,16 @@
+import { Link } from '@weft-js/start'
+import { CartLink } from '#/components/CartLink'
+import { Logo } from '#/components/Logo'
+
+// Plain elements, not warp's Center and Row: wrapped in those, the cart count becomes part of an island that waits for a click.
+export function SiteHeader() {
+  return (
+    <header class="site-head">
+      <Link href="/" class="brand">
+        <Logo />
+        Mendwell
+      </Link>
+      <CartLink />
+    </header>
+  )
+}

package/templates/catalog/files/src/db/schema.ts

@@ -0,0 +1,53 @@
+import {
+  boolean,
+  index,
+  integer,
+  pgTable,
+  primaryKey,
+  serial,
+  text,
+  timestamp,
+  uuid,
+} from 'drizzle-orm/pg-core'
+
+export const categories = pgTable('categories', {
+  id: serial('id').primaryKey(),
+  slug: text('slug').notNull().unique(),
+  name: text('name').notNull(),
+})
+
+export const products = pgTable(
+  'products',
+  {
+    id: serial('id').primaryKey(),
+    slug: text('slug').notNull().unique(),
+    name: text('name').notNull(),
+    description: text('description').notNull(),
+    categoryId: integer('category_id')
+      .notNull()
+      .references(() => categories.id),
+    priceCents: integer('price_cents').notNull(),
+    stock: integer('stock').notNull(),
+    featured: boolean('featured').notNull().default(false),
+  },
+  (table) => [index('products_category').on(table.categoryId, table.priceCents, table.id)],
+)
+
+export const carts = pgTable('carts', {
+  id: uuid('id').primaryKey().defaultRandom(),
+  createdAt: timestamp('created_at', { withTimezone: true }).notNull().defaultNow(),
+})
+
+export const cartItems = pgTable(
+  'cart_items',
+  {
+    cartId: uuid('cart_id')
+      .notNull()
+      .references(() => carts.id, { onDelete: 'cascade' }),
+    productId: integer('product_id')
+      .notNull()
+      .references(() => products.id),
+    quantity: integer('quantity').notNull(),
+  },
+  (table) => [primaryKey({ columns: [table.cartId, table.productId] })],
+)

package/templates/catalog/files/src/lib/catalog.ts

@@ -0,0 +1,35 @@
+export const PAGE_SIZE = 24
+/** Prices are filtered in whole dollars; past this nothing is for sale, and cents still fit the column. */
+const MOST = 1_000_000
+
+/** A category page's filters: everything lives in the URL, so a filtered page can be shared and works before hydration. */
+export type View = { min: number | null; max: number | null; stock: boolean; page: number }
+
+export const amount = (text: unknown) => {
+  const n = typeof text === 'string' && text.trim() ? Number(text) : NaN
+  return n >= 0 ? Math.min(Math.floor(n), MOST) : null
+}
+
+export function viewOf(url: string): View {
+  const q = new URL(url).searchParams
+  const page = Number(q.get('page'))
+  return {
+    min: amount(q.get('min')),
+    max: amount(q.get('max')),
+    stock: q.has('stock'),
+    page: Number.isSafeInteger(page) && page > 1 && page < 1e6 ? page : 1,
+  }
+}
+
+export function viewHref(slug: string, view: View) {
+  const q = new URLSearchParams()
+  if (view.min !== null) q.set('min', String(view.min))
+  if (view.max !== null) q.set('max', String(view.max))
+  if (view.stock) q.set('stock', '1')
+  if (view.page > 1) q.set('page', String(view.page))
+  const search = q.toString()
+  return `/c/${slug}${search ? `?${search}` : ''}`
+}
+
+const dollars = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' })
+export const money = (cents: number) => dollars.format(cents / 100)

package/templates/catalog/files/src/routes/404.tsx

@@ -0,0 +1,18 @@
+import { Link, type Meta } from '@weft-js/start'
+import { Center, Heading, Stack, Text } from '@weft-js/warp'
+
+export const meta: Meta = { title: 'Not on the shelves' }
+
+export default function NotFound() {
+  return (
+    <Center max="narrow" gutter>
+      <Stack gap="group" align="center" class="system-page">
+        <Heading level={1} role="title">
+          Not on the shelves
+        </Heading>
+        <Text subtle>That piece may be gone, or the address mistyped.</Text>
+        <Link href="/">Back to the aisles</Link>
+      </Stack>
+    </Center>
+  )
+}

package/templates/catalog/files/src/routes/_error.tsx

@@ -0,0 +1,18 @@
+import { Link, type Meta } from '@weft-js/start'
+import { Center, Heading, Stack, Text } from '@weft-js/warp'
+
+export const meta: Meta = { title: 'Something went wrong' }
+
+export default function ServerError() {
+  return (
+    <Center max="narrow" gutter>
+      <Stack gap="group" align="center" class="system-page">
+        <Heading level={1} role="title">
+          Something broke on our bench
+        </Heading>
+        <Text subtle>Your cart is safe. Give it a minute and try again.</Text>
+        <Link href="/">Back to the aisles</Link>
+      </Stack>
+    </Center>
+  )
+}

package/templates/catalog/files/src/routes/_layout.tsx

@@ -0,0 +1,14 @@
+import '../theme.css'
+import type { RouteProps } from '@weft-js/start'
+import { SiteFooter } from '#/components/SiteFooter'
+import { SiteHeader } from '#/components/SiteHeader'
+
+export default function Root(props: RouteProps) {
+  return (
+    <div class="site">
+      <SiteHeader />
+      <main id="content">{props.children}</main>
+      <SiteFooter />
+    </div>
+  )
+}

package/templates/catalog/files/src/routes/c/[slug].tsx

@@ -0,0 +1,53 @@
+import { Link, notFound, type LoadArgs, type Meta, type RouteProps } from '@weft-js/start'
+import { Center, Heading, Split, Stack } from '@weft-js/warp'
+import { Boundary } from '@weft-js/core'
+import { Aisles, AislesLoading } from '#/components/Aisles'
+import { Failed } from '#/components/Failed'
+import { Filters } from '#/components/Filters'
+import { ProductGridLoading } from '#/components/ProductCard'
+import { ProductList } from '#/components/ProductList'
+import { viewOf } from '#/lib/catalog'
+import { getCategory } from '#/server/catalog'
+
+export const load = async ({ params, request }: LoadArgs<'/c/[slug]'>) => {
+  const category = await getCategory.fetch({ slug: params.slug })
+  return category ? { category, view: viewOf(request.url) } : notFound()
+}
+
+export const meta: Meta<typeof load> = ({ data }) => ({ title: data.category.name })
+
+export default function Category(props: RouteProps<typeof load, '/c/[slug]'>) {
+  return (
+    <Center max="wide" gutter>
+      <Stack gap="group" class="page">
+        <Stack gap="tight">
+          <Link href="/" class="crumb">
+            All aisles
+          </Link>
+          <Heading level={1} role="title">
+            {props.data.category.name}
+          </Heading>
+        </Stack>
+        <Boundary
+          pending={<AislesLoading />}
+          error={(_, retry) => <Failed what="The aisles" retry={retry} />}
+        >
+          <Aisles current={props.data.category.slug} />
+        </Boundary>
+        <Split side="start" width="nav" gap="section">
+          <Filters slug={props.data.category.slug} view={props.data.view} />
+          <Boundary
+            pending={<ProductGridLoading count={24} cols={3} label="Loading goods" />}
+            error={(_, retry) => <Failed what="This aisle" retry={retry} />}
+          >
+            <ProductList
+              categoryId={props.data.category.id}
+              slug={props.data.category.slug}
+              view={props.data.view}
+            />
+          </Boundary>
+        </Split>
+      </Stack>
+    </Center>
+  )
+}

package/templates/catalog/files/src/routes/cart.tsx

@@ -0,0 +1,29 @@
+import type { Meta } from '@weft-js/start'
+import { Center, Heading, Stack, Toaster } from '@weft-js/warp'
+import { Boundary } from '@weft-js/core'
+import { CartLines, CartLoading } from '#/components/CartLines'
+import { Failed } from '#/components/Failed'
+
+export const meta: Meta = {
+  title: 'Your cart',
+  description: 'Review the Mendwell goods in your cart.',
+}
+
+export default function Cart() {
+  return (
+    <Center max="content" gutter>
+      <Stack gap="group" class="page">
+        <Heading level={1} role="title">
+          Your cart
+        </Heading>
+        <Boundary
+          pending={<CartLoading />}
+          error={(_, retry) => <Failed what="Your cart" retry={retry} />}
+        >
+          <CartLines />
+        </Boundary>
+      </Stack>
+      <Toaster />
+    </Center>
+  )
+}

package/templates/catalog/files/src/routes/index.tsx

@@ -0,0 +1,84 @@
+import { Link, type Meta } from '@weft-js/start'
+import { Center, Grid, Heading, Stack, Text } from '@weft-js/warp'
+import { Boundary } from '@weft-js/core'
+import { Aisles, AislesLoading } from '#/components/Aisles'
+import { Failed } from '#/components/Failed'
+import { Featured } from '#/components/Featured'
+import { ProductArt } from '#/components/ProductArt'
+import { ProductGridLoading } from '#/components/ProductCard'
+
+export const meta: Meta = {
+  title: 'Goods made to be mended',
+  description: 'Explore everyday goods made to be repaired and used for years.',
+}
+
+export default function Home() {
+  return (
+    <Center max="wide" gutter>
+      <section class="hero">
+        <Stack gap="related">
+          {/* weft-allow D006: the storefront's one poster headline */}
+          <Heading level={1} role="display">
+            Buy it once. Mend it forever.
+          </Heading>
+          <Text class="lede">
+            Everyday goods in oak, copper, linen and slate, built with screws instead of glue, and
+            repaired free for ten years.
+          </Text>
+          <Link href="#featured" class="cta">
+            See this month's table
+          </Link>
+        </Stack>
+        <div class="hero-art">
+          <ProductArt name="Copper Kettle" />
+          <ProductArt name="Oak Stool" />
+          <ProductArt name="Slate Lamp" />
+        </div>
+      </section>
+      <Stack gap="page">
+        <section aria-labelledby="aisles-title">
+          <Stack gap="related">
+            <Heading level={2} id="aisles-title">
+              Aisles
+            </Heading>
+            <Boundary
+              pending={<AislesLoading />}
+              error={(_, retry) => <Failed what="The aisles" retry={retry} />}
+            >
+              <Aisles />
+            </Boundary>
+          </Stack>
+        </section>
+        <section id="featured" aria-labelledby="featured-title">
+          <Stack gap="related">
+            <Heading level={2} id="featured-title">
+              On the front table
+            </Heading>
+            <Boundary
+              pending={<ProductGridLoading count={12} cols={4} label="Loading featured goods" />}
+              error={(_, retry) => <Failed what="The front table" retry={retry} />}
+            >
+              <Featured />
+            </Boundary>
+          </Stack>
+        </section>
+        <Grid min="md" cols={3} gap="group" class="promises">
+          <Stack gap="tight">
+            <Heading level={3}>Screws, not glue</Heading>
+            <Text subtle>Every piece comes apart with a screwdriver you already own.</Text>
+          </Stack>
+          <Stack gap="tight">
+            <Heading level={3}>Parts on the shelf</Heading>
+            <Text subtle>
+              Handles, hinges and cords are stocked for as long as we sell the piece.
+            </Text>
+          </Stack>
+          <Stack gap="tight">
+            <Heading level={3}>Repairs by post</Heading>
+            <Text subtle>Send it in, and it comes back working. Free for ten years.</Text>
+          </Stack>
+        </Grid>
+      </Stack>
+    </Center>
+  )
+}

package/templates/catalog/files/src/routes/p/[slug].tsx

@@ -0,0 +1,67 @@
+import { Link, notFound, type LoadArgs, type Meta, type RouteProps } from '@weft-js/start'
+import { Badge, Center, Heading, Row, Stack, Text } from '@weft-js/warp'
+import { Boundary } from '@weft-js/core'
+import { AddToCart } from '#/components/AddToCart'
+import { Failed } from '#/components/Failed'
+import { ProductArt } from '#/components/ProductArt'
+import { ProductGridLoading } from '#/components/ProductCard'
+import { Related } from '#/components/Related'
+import { money } from '#/lib/catalog'
+import { getProduct } from '#/server/catalog'
+
+export const load = async ({ params }: LoadArgs<'/p/[slug]'>) => {
+  const product = await getProduct.fetch({ slug: params.slug })
+  return product ? { product } : notFound()
+}
+
+export const meta: Meta<typeof load> = ({ data }) => ({
+  title: data.product.name,
+  description: data.product.description,
+})
+
+const stockLine = (stock: number) =>
+  stock === 0
+    ? 'Back when the workshop catches up.'
+    : stock < 5
+      ? `Only ${stock} left.`
+      : 'In stock, ships in two days.'
+
+export default function Product(props: RouteProps<typeof load, '/p/[slug]'>) {
+  return (
+    <Center max="wide" gutter>
+      <Stack gap="page" class="page">
+        <article class="detail">
+          <ProductArt name={props.data.product.name} />
+          <Stack gap="related">
+            <Link href={`/c/${props.data.product.categorySlug}`} class="crumb">
+              {props.data.product.categoryName}
+            </Link>
+            <Heading level={1} role="title">
+              {props.data.product.name}
+            </Heading>
+            <Row gap="related">
+              <span class="price price-lg">{money(props.data.product.priceCents)}</span>
+              {props.data.product.stock === 0 && <Badge tone="neutral">Sold out</Badge>}
+            </Row>
+            <Text>{props.data.product.description}</Text>
+            <Text subtle>{stockLine(props.data.product.stock)}</Text>
+            <AddToCart slug={props.data.product.slug} soldOut={props.data.product.stock === 0} />
+          </Stack>
+        </article>
+        <section aria-labelledby="related-title">
+          <Stack gap="related">
+            <Heading level={2} id="related-title">
+              From the same aisle
+            </Heading>
+            <Boundary
+              pending={<ProductGridLoading count={4} cols={4} label="Loading related goods" />}
+              error={(_, retry) => <Failed what="Related goods" retry={retry} />}
+            >
+              <Related id={props.data.product.id} categoryId={props.data.product.categoryId} />
+            </Boundary>
+          </Stack>
+        </section>
+      </Stack>
+    </Center>
+  )
+}

package/templates/catalog/files/src/server/cart.ts

@@ -0,0 +1,125 @@
+import { invalid, mutation, query, type Context } from '@weft-js/start'
+import { and, asc, eq, sql } from 'drizzle-orm'
+import { z } from 'zod'
+import { cartItems, carts, products } from '#/db/schema'
+
+const COOKIE = 'cart'
+const SIXTY_DAYS = 60 * 60 * 24 * 60
+const MOST = 99
+
+/** This visitor's cart. One this same request started is only in the response so far, and the refreshed count has to find it. */
+function cartOf(ctx: Context) {
+  const cookies = [
+    ...ctx.response.headers.getSetCookie(),
+    ctx.request.headers.get('cookie') ?? '',
+  ].join('; ')
+  return cookies.match(
+    /(?:^|;\s*)cart=([0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12})/,
+  )?.[1]
+}
+
+function startCart(ctx: Context) {
+  const id = crypto.randomUUID()
+  const secure = new URL(ctx.request.url).protocol === 'https:' ? '; Secure' : ''
+  ctx.response.headers.append(
+    'set-cookie',
+    `${COOKIE}=${id}; Path=/; Max-Age=${SIXTY_DAYS}; HttpOnly; SameSite=Lax${secure}`,
+  )
+  return id
+}
+
+export const cartCount = query({
+  tags: ['cart_items'],
+  run: async ({ ctx }) => {
+    const cart = cartOf(ctx)
+    if (!cart) return { count: 0 }
+    const [row] = await ctx.db
+      .select({ count: sql<number>`coalesce(sum(${cartItems.quantity}), 0)`.mapWith(Number) })
+      .from(cartItems)
+      .where(eq(cartItems.cartId, cart))
+    return { count: row!.count }
+  },
+})
+
+export const listCart = query({
+  tags: ['cart_items', 'products'],
+  run: async ({ ctx }) => {
+    const cart = cartOf(ctx)
+    if (!cart) return []
+    return await ctx.db
+      .select({
+        slug: products.slug,
+        name: products.name,
+        priceCents: products.priceCents,
+        stock: products.stock,
+        quantity: cartItems.quantity,
+      })
+      .from(cartItems)
+      .innerJoin(products, eq(products.id, cartItems.productId))
+      .where(eq(cartItems.cartId, cart))
+      .orderBy(asc(products.name), asc(products.id))
+  },
+})
+
+export const addToCart = mutation({
+  input: z.object({ slug: z.string().min(1).max(200) }),
+  invalidates: ['carts', 'cart_items'],
+  // Not optimistic: a first add's cart only exists once its cookie lands, so the count waits for the reply, not the click.
+  run: async ({ input, ctx }) => {
+    const [product] = await ctx.db
+      .select({ id: products.id, stock: products.stock })
+      .from(products)
+      .where(eq(products.slug, input.slug))
+    if (!product?.stock) invalid({ slug: 'That one just sold out.' })
+    const cart = cartOf(ctx) ?? startCart(ctx)
+    // The cookie can outlive the row, so the cart is made sure of on every add.
+    await ctx.db.insert(carts).values({ id: cart }).onConflictDoNothing()
+    await ctx.db
+      .insert(cartItems)
+      .values({ cartId: cart, productId: product!.id, quantity: 1 })
+      .onConflictDoUpdate({
+        target: [cartItems.cartId, cartItems.productId],
+        set: { quantity: sql`least(${cartItems.quantity} + 1, ${Math.min(product!.stock, MOST)})` },
+      })
+    return { added: true }
+  },
+})
+
+// `quantity` is the number asked for, not a step, so a repeated press lands in the same place. Zero takes the line out.
+export const setQuantity = mutation({
+  input: z.object({
+    slug: z.string().min(1).max(200),
+    quantity: z.number().int().min(0).max(MOST),
+  }),
+  invalidates: ['cart_items'],
+  optimistic: ({ input }, cache) => {
+    let change = 0
+    cache.update(listCart, undefined, (lines) => {
+      const at = lines.findIndex((line) => line.slug === input.slug)
+      if (at < 0) return
+      change = input.quantity - lines[at]!.quantity
+      if (input.quantity) lines[at]!.quantity = input.quantity
+      else lines.splice(at, 1)
+    })
+    if (cache.get(cartCount))
+      cache.update(cartCount, undefined, (cart) => {
+        cart.count += change
+      })
+  },
+  run: async ({ input, ctx }) => {
+    const cart = cartOf(ctx)
+    if (!cart) return
+    const [product] = await ctx.db
+      .select({ id: products.id, stock: products.stock })
+      .from(products)
+      .where(eq(products.slug, input.slug))
+    if (!product) return
+    const line = and(eq(cartItems.cartId, cart), eq(cartItems.productId, product.id))
+    if (input.quantity)
+      await ctx.db
+        .update(cartItems)
+        .set({ quantity: Math.min(input.quantity, product.stock) })
+        .where(line)
+    else await ctx.db.delete(cartItems).where(line)
+  },
+})