@weft-js/create 0.1.0 → 0.1.2

package/templates/catalog/files/drizzle/meta/0000_snapshot.json

@@ -0,0 +1,263 @@
+{
+  "id": "ef9a2192-3d77-49a8-a83b-69fc723129b0",
+  "prevId": "00000000-0000-0000-0000-000000000000",
+  "version": "7",
+  "dialect": "postgresql",
+  "tables": {
+    "public.cart_items": {
+      "name": "cart_items",
+      "schema": "",
+      "columns": {
+        "cart_id": {
+          "name": "cart_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "product_id": {
+          "name": "product_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "quantity": {
+          "name": "quantity",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "cart_items_cart_id_carts_id_fk": {
+          "name": "cart_items_cart_id_carts_id_fk",
+          "tableFrom": "cart_items",
+          "tableTo": "carts",
+          "columnsFrom": [
+            "cart_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "cart_items_product_id_products_id_fk": {
+          "name": "cart_items_product_id_products_id_fk",
+          "tableFrom": "cart_items",
+          "tableTo": "products",
+          "columnsFrom": [
+            "product_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "cart_items_cart_id_product_id_pk": {
+          "name": "cart_items_cart_id_product_id_pk",
+          "columns": [
+            "cart_id",
+            "product_id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.carts": {
+      "name": "carts",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.categories": {
+      "name": "categories",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "serial",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "slug": {
+          "name": "slug",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "categories_slug_unique": {
+          "name": "categories_slug_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "slug"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.products": {
+      "name": "products",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "serial",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "slug": {
+          "name": "slug",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "category_id": {
+          "name": "category_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "price_cents": {
+          "name": "price_cents",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "stock": {
+          "name": "stock",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "featured": {
+          "name": "featured",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": false
+        }
+      },
+      "indexes": {
+        "products_category": {
+          "name": "products_category",
+          "columns": [
+            {
+              "expression": "category_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            },
+            {
+              "expression": "price_cents",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            },
+            {
+              "expression": "id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "products_category_id_categories_id_fk": {
+          "name": "products_category_id_categories_id_fk",
+          "tableFrom": "products",
+          "tableTo": "categories",
+          "columnsFrom": [
+            "category_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "products_slug_unique": {
+          "name": "products_slug_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "slug"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    }
+  },
+  "enums": {},
+  "schemas": {},
+  "sequences": {},
+  "roles": {},
+  "policies": {},
+  "views": {},
+  "_meta": {
+    "columns": {},
+    "schemas": {},
+    "tables": {}
+  }
+}

package/templates/catalog/files/drizzle/meta/_journal.json

@@ -0,0 +1,13 @@
+{
+  "version": "7",
+  "dialect": "postgresql",
+  "entries": [
+    {
+      "idx": 0,
+      "version": "7",
+      "when": 1793567733329,
+      "tag": "0000_catalog",
+      "breakpoints": true
+    }
+  ]
+}

package/templates/catalog/files/public/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="16" fill="#8a2435"/><path d="M8 23V10l8 8 8-8v13" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/templates/catalog/files/seed.sql

@@ -0,0 +1,13 @@
+-- Sample goods, so a new shop has something on its shelves: psql "$DATABASE_URL" -f seed.sql
+insert into categories (slug, name)
+select lower(n), n from unnest(array['Kitchen', 'Garden', 'Office', 'Outdoor', 'Audio', 'Lighting', 'Travel', 'Bath']) as n
+on conflict do nothing;
+
+insert into products (slug, name, description, category_id, price_cents, stock, featured)
+select 'product-' || g,
+  (array['Oak', 'Linen', 'Copper', 'Slate', 'Walnut', 'Cedar', 'Ceramic', 'Brass'])[1 + (g % 8)] || ' ' ||
+  (array['Lamp', 'Stool', 'Kettle', 'Shelf', 'Basket', 'Speaker', 'Tray', 'Planter', 'Satchel', 'Mug'])[1 + (g % 10)] || ' ' || g,
+  'A dependable piece, made to be used every day and repaired when it wears.',
+  (select id from categories order by id offset g % 8 limit 1), 500 + (g * 7919) % 49500, (g * 31) % 40, g % 20 = 0
+from generate_series(1, 400) g
+on conflict do nothing;

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

@@ -0,0 +1,22 @@
+import { Form, type FormApi } from '@weft-js/start'
+import { Button, Stack } from '@weft-js/warp'
+import { addToCart } from '#/server/cart'
+
+export function AddToCart({ slug, soldOut }: { slug: string; soldOut: boolean }) {
+  return (
+    <Form of={addToCart} reset={false}>
+      {(form: FormApi) => (
+        <Stack gap="tight">
+          <input type="hidden" name="slug" value={slug} />
+          <Button type="submit" size="lg" full disabled={soldOut} loading={form.pending.value}>
+            Add to cart
+          </Button>
+          <form.Error name="slug" class="form-error" />
+          <p class="added" role="status">
+            {form.result.value ? 'In your cart.' : ''}
+          </p>
+        </Stack>
+      )}
+    </Form>
+  )
+}

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

@@ -0,0 +1,31 @@
+import { Link } from '@weft-js/start'
+import { Skeleton, Text } from '@weft-js/warp'
+import { listCategories } from '#/server/catalog'
+
+export function Aisles({ current }: { current?: string }) {
+  const aisles = listCategories()
+  return (
+    <>
+      {aisles.value?.length === 0 && (
+        <Text subtle>The aisles are being set up. Check back soon.</Text>
+      )}
+      <nav class="aisles" aria-label="Aisles" data-compact={current !== undefined ? '' : undefined}>
+        {aisles.value?.map((aisle) => (
+          <Link
+            key={aisle.slug}
+            href={`/c/${aisle.slug}`}
+            aria-current={aisle.slug === current ? 'page' : undefined}
+          >
+            {aisle.name}
+          </Link>
+        ))}
+      </nav>
+    </>
+  )
+}
+
+export const AislesLoading = () => (
+  <div role="status" aria-label="Loading aisles">
+    <Skeleton height="3rem" />
+  </div>
+)

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

@@ -0,0 +1,96 @@
+import { Link } from '@weft-js/start'
+import { Button, Heading, Skeleton, Stack, Text, toast } from '@weft-js/warp'
+import { derived } from '@weft-js/core'
+import { ProductArt } from '#/components/ProductArt'
+import { money } from '#/lib/catalog'
+import { listCart, setQuantity } from '#/server/cart'
+
+const unsaved = () =>
+  toast.show({
+    tone: 'critical',
+    title: "That didn't save",
+    description: 'Your cart is back as it was. Try again in a moment.',
+  })
+const change = (slug: string, quantity: number) => setQuantity({ slug, quantity }).catch(unsaved)
+
+export function CartLines() {
+  const cart = listCart()
+  const lines = derived(() => cart.value ?? [])
+  const subtotal = derived(() =>
+    lines.value.reduce((sum, line) => sum + line.priceCents * line.quantity, 0),
+  )
+  // A real element at the root: under a bare fragment hydration misses every key and leaves bare elements with no handlers.
+  return (
+    <div>
+      {lines.value.length === 0 ? (
+        <Stack gap="tight" class="blank">
+          <Heading level={2}>Your cart is empty</Heading>
+          <Text subtle>Everything you add stays here for sixty days.</Text>
+          <Link href="/">Back to the aisles</Link>
+        </Stack>
+      ) : (
+        <Stack gap="group">
+          <ul class="lines" aria-label="Cart">
+            {lines.value.map((line) => (
+              <li key={line.slug} class="line">
+                <ProductArt name={line.name} />
+                <div>
+                  <Link href={`/p/${line.slug}`}>{line.name}</Link>
+                  <Text subtle>{money(line.priceCents)} each</Text>
+                </div>
+                <div class="stepper">
+                  <Button
+                    emphasis="outline"
+                    tone="neutral"
+                    size="sm"
+                    label={`One fewer ${line.name}`}
+                    onClick={() => change(line.slug, line.quantity - 1)}
+                  >
+                    −
+                  </Button>
+                  <span>
+                    <span data-part="sr-only">Quantity of {line.name}: </span>
+                    {line.quantity}
+                  </span>
+                  <Button
+                    emphasis="outline"
+                    tone="neutral"
+                    size="sm"
+                    label={`One more ${line.name}`}
+                    disabled={line.quantity >= Math.min(line.stock, 99)}
+                    onClick={() => change(line.slug, line.quantity + 1)}
+                  >
+                    +
+                  </Button>
+                </div>
+                <span class="price">{money(line.priceCents * line.quantity)}</span>
+                <Button
+                  emphasis="ghost"
+                  tone="neutral"
+                  size="sm"
+                  onClick={() => change(line.slug, 0)}
+                  aria-label={`Remove ${line.name}`}
+                >
+                  Remove
+                </Button>
+              </li>
+            ))}
+          </ul>
+          <div class="total">
+            <Text subtle>Subtotal</Text>
+            <span class="price">{money(subtotal.value)}</span>
+          </div>
+          <Text subtle>Checkout opens soon. Your cart keeps until then.</Text>
+        </Stack>
+      )}
+    </div>
+  )
+}
+
+export const CartLoading = () => (
+  <div role="status" aria-label="Loading your cart">
+    <Stack gap="related">
+      <Skeleton lines={4} height="4rem" />
+    </Stack>
+  </div>
+)

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

@@ -0,0 +1,29 @@
+import { Link } from '@weft-js/start'
+import { Boundary } from '@weft-js/core'
+import { cartCount } from '#/server/cart'
+
+function CartCount() {
+  const cart = cartCount()
+  return (
+    <Link href="/cart" class="cart-link">
+      Cart ({cart.value?.count ?? 0})
+    </Link>
+  )
+}
+
+/** Before the count lands, and if it never does, the way to the cart still works. */
+const CartOnly = () => (
+  <Link href="/cart" class="cart-link">
+    Cart
+  </Link>
+)
+
+// Its own component, so the island is this Boundary: the compiler then sees the count and runs it as the page shows, where
+// from inside the header's <Center> it would wait for a click, and "Add to cart" couldn't reach it.
+export function CartLink() {
+  return (
+    <Boundary pending={<CartOnly />} error={() => <CartOnly />}>
+      <CartCount />
+    </Boundary>
+  )
+}

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

@@ -0,0 +1,19 @@
+import { Alert, Button } from '@weft-js/warp'
+
+/** What a Boundary shows when its data didn't arrive. */
+export function Failed({ what, retry }: { what: string; retry: () => void }) {
+  return (
+    <Alert
+      tone="critical"
+      title={`${what} didn't load`}
+      live
+      actions={
+        <Button emphasis="outline" onClick={retry}>
+          Try again
+        </Button>
+      }
+    >
+      The shop is still here. The connection to the shelves dropped for a moment.
+    </Alert>
+  )
+}

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

@@ -0,0 +1,19 @@
+import { Grid, Text } from '@weft-js/warp'
+import { ProductCard } from '#/components/ProductCard'
+import { featuredProducts } from '#/server/catalog'
+
+export function Featured() {
+  const featured = featuredProducts()
+  return (
+    <>
+      {featured.value?.length === 0 && (
+        <Text subtle>Nothing's on the front table right now. The aisles above are still open.</Text>
+      )}
+      <Grid min="xs" cols={4} gap="group">
+        {featured.value?.map((product) => (
+          <ProductCard key={product.slug} product={product} />
+        ))}
+      </Grid>
+    </>
+  )
+}

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

@@ -0,0 +1,40 @@
+import { navigate } from '@weft-js/start'
+import { Button, Checkbox, NumberField, Stack } from '@weft-js/warp'
+import { amount, viewHref, type View } from '#/lib/catalog'
+
+/** A real GET form, so filters work before the page has hydrated. */
+export function Filters({ slug, view }: { slug: string; view: View }) {
+  const apply = (e: SubmitEvent) => {
+    e.preventDefault()
+    const data = new FormData(e.currentTarget as HTMLFormElement)
+    navigate(
+      viewHref(slug, {
+        min: amount(data.get('min')),
+        max: amount(data.get('max')),
+        stock: data.has('stock'),
+        page: 1,
+      }),
+    )
+  }
+  return (
+    <form class="filters" method="get" action={`/c/${slug}`} onSubmit={apply}>
+      <Stack gap="related">
+        <div class="price-range">
+          <NumberField label="Min price" name="min" min={0} prefix="$" defaultValue={view.min} />
+          <NumberField label="Max price" name="max" min={0} prefix="$" defaultValue={view.max} />
+        </div>
+        <Checkbox
+          name="stock"
+          value="1"
+          checked={view.stock}
+          onChange={(e: Event) => (e.currentTarget as HTMLInputElement).form!.requestSubmit()}
+        >
+          In stock only
+        </Checkbox>
+        <Button type="submit" emphasis="outline" full>
+          Apply
+        </Button>
+      </Stack>
+    </form>
+  )
+}

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

@@ -0,0 +1,16 @@
+/** Mendwell's mark: an M stitched with one line. */
+export function Logo() {
+  return (
+    <svg class="logo" viewBox="0 0 32 32" aria-hidden="true">
+      <circle cx="16" cy="16" r="16" fill="var(--warp-color-accent-solid)" />
+      <path
+        d="M8 23V10l8 8 8-8v13"
+        fill="none"
+        stroke="var(--warp-color-accent-on-solid)"
+        stroke-width="3"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  )
+}

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

@@ -0,0 +1,42 @@
+// There are no product photos yet, so each product draws itself: the object in its name, in its material's colour.
+// Swap this for an `<Image>` when real photography arrives.
+const objects: Record<string, string> = {
+  lamp: 'M44 22h32l12 34H32zM57 56h6v36h-6zM42 92h36a4 4 0 0 1 4 4v2H38v-2a4 4 0 0 1 4-4z',
+  stool:
+    'M30 34h60a6 6 0 0 1 0 12H30a6 6 0 0 1 0-12zM36 46h9l-7 54h-8zM75 46h9l7 54h-8zM42 70h36v6H42z',
+  kettle:
+    'M38 48h44c6 12 10 24 10 38a10 10 0 0 1-10 10H38a10 10 0 0 1-10-10c0-14 4-26 10-38zM52 38h16v10H52zM44 40c0-22 32-22 32 0h-6c0-14-20-14-20 0zM28 60 12 50l-2 6 14 16z',
+  shelf:
+    'M22 30h76v6H22zM22 60h76v6H22zM22 90h76v6H22zM30 22h6v8h-6zM30 36h6v24h-6zM30 66h6v24h-6zM30 96h6v8h-6zM84 22h6v8h-6zM84 36h6v24h-6zM84 66h6v24h-6zM84 96h6v8h-6z',
+  basket:
+    'M24 56h72l-8 42a6 6 0 0 1-6 5H38a6 6 0 0 1-6-5zM34 56c0-40 52-40 52 0h-7c0-30-38-30-38 0z',
+  speaker:
+    'M38 18h44a6 6 0 0 1 6 6v72a6 6 0 0 1-6 6H38a6 6 0 0 1-6-6V24a6 6 0 0 1 6-6zM60 30a8 8 0 1 0 0 16 8 8 0 0 0 0-16zm0 26a16 16 0 1 0 0 32 16 16 0 0 0 0-32z',
+  tray: 'M14 66h92l-6 16a6 6 0 0 1-6 4H26a6 6 0 0 1-6-4zM8 60h22v6H8zM90 60h22v6H90z',
+  planter:
+    'M34 62h52l-6 40a6 6 0 0 1-6 4H46a6 6 0 0 1-6-4zM57 62V38c-16 0-24-8-26-22 16 0 26 8 29 20 3-12 13-20 29-20-2 14-10 22-26 22v24z',
+  satchel:
+    'M26 42h68a6 6 0 0 1 6 6v46a6 6 0 0 1-6 6H26a6 6 0 0 1-6-6V48a6 6 0 0 1 6-6zM42 42c0-24 36-24 36 0h-7c0-14-22-14-22 0zM54 56h12v16H54z',
+  mug: 'M30 34h50v54a10 10 0 0 1-10 10H40a10 10 0 0 1-10-10zM80 46h8a14 14 0 0 1 0 28h-8v-7h8a7 7 0 0 0 0-14h-8z',
+}
+const box = 'M30 40h60v56H30zM24 30h72v10H24z'
+
+const word = (name: string, among: readonly string[]) =>
+  name
+    .toLowerCase()
+    .split(/\s+/)
+    .find((w) => among.includes(w))
+const materials = ['oak', 'linen', 'copper', 'slate', 'walnut', 'cedar', 'ceramic', 'brass']
+const shapes = Object.keys(objects)
+
+export function ProductArt({ name }: { name: string }) {
+  const material = () => word(name, materials) ?? 'plain'
+  const path = () => objects[word(name, shapes) ?? ''] ?? box
+  return (
+    <span class="art" data-material={material()}>
+      <svg viewBox="0 0 120 120" aria-hidden="true">
+        <path fill-rule="evenodd" d={path()} />
+      </svg>
+    </span>
+  )
+}

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

@@ -0,0 +1,42 @@
+import { Link } from '@weft-js/start'
+import { Badge, Grid, Skeleton } from '@weft-js/warp'
+import { ProductArt } from '#/components/ProductArt'
+import { money } from '#/lib/catalog'
+import type { ProductCardRow } from '#/server/catalog'
+
+export function ProductCard({ product }: { product: ProductCardRow }) {
+  return (
+    <Link href={`/p/${product.slug}`} class="product">
+      <ProductArt name={product.name} />
+      <span class="product-name">{product.name}</span>
+      <span class="product-foot">
+        <span class="price">{money(product.priceCents)}</span>
+        {product.stock === 0 && <Badge tone="neutral">Sold out</Badge>}
+      </span>
+    </Link>
+  )
+}
+
+export function ProductGridLoading({
+  count,
+  cols,
+  label,
+}: {
+  count: number
+  cols: 3 | 4
+  label: string
+}) {
+  return (
+    <div role="status" aria-label={label}>
+      <Grid min="xs" cols={cols} gap="group">
+        {Array.from({ length: count }, () => (
+          <div class="product">
+            <Skeleton shape="block" height="auto" width="100%" />
+            <Skeleton />
+            <Skeleton width="30%" />
+          </div>
+        ))}
+      </Grid>
+    </div>
+  )
+}