@weft-js/create 0.1.1 → 0.1.2

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

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

package/templates/admin/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="8" fill="#4f46e5"/><path d="M10 25V7h12v18" fill="none" stroke="#fff" stroke-width="2.5" stroke-linejoin="round"/><path d="M10 7l8 3v15h-8z" fill="#fff"/></svg>

package/templates/admin/files/src/auth.server.ts

@@ -0,0 +1,24 @@
+import { createAuth } from '@weft-js/start/auth/better-auth'
+import { drizzleAuth } from '@weft-js/start/auth/drizzle'
+import { APIError } from 'better-auth/api'
+import { db } from '#/db/index.server'
+import { user } from './db/auth'
+import * as schema from './db/schema'
+import { env } from './env.server'
+
+// Everyone signed in can see every order, so the first account is the owner and sign-up closes behind it.
+const firstAccountOnly = async () => {
+  if (await db.$count(user))
+    throw new APIError('FORBIDDEN', {
+      message: 'This store already has an owner. Ask them to add you.',
+    })
+}
+
+export default createAuth({
+  db,
+  secret: env.BETTER_AUTH_SECRET,
+  options: {
+    database: drizzleAuth(db, schema),
+    databaseHooks: { user: { create: { before: firstAccountOnly } } },
+  },
+})

package/templates/admin/files/src/components/AuthPage.tsx

@@ -0,0 +1,33 @@
+import { AuthScreen, Heading, Stack, Text } from '@weft-js/warp'
+import { Logo } from '#/components/Logo'
+
+export function AuthPage({
+  title,
+  lede,
+  children,
+}: {
+  title: string
+  lede: string
+  children?: unknown
+}) {
+  return (
+    <AuthScreen
+      name="Backroom"
+      logo={<Logo />}
+      quote="Every order, every customer, one quiet room behind the shop."
+    >
+      <Stack gap="group">
+        <span class="auth-mark">
+          <Logo /> Backroom
+        </span>
+        <Stack gap="tight">
+          <Heading level={1} role="title">
+            {title}
+          </Heading>
+          <Text subtle>{lede}</Text>
+        </Stack>
+        {children}
+      </Stack>
+    </AuthScreen>
+  )
+}

package/templates/admin/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>
+      }
+    >
+      Nothing's lost. The connection to the store dropped for a moment.
+    </Alert>
+  )
+}

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

@@ -0,0 +1,16 @@
+/** Backroom's mark: a door left ajar, with light coming through. */
+export function Logo() {
+  return (
+    <svg class="logo" viewBox="0 0 32 32" aria-hidden="true">
+      <rect width="32" height="32" rx="8" fill="var(--warp-color-accent-solid)" />
+      <path
+        d="M10 25V7h12v18"
+        fill="none"
+        stroke="var(--warp-color-accent-on-solid)"
+        stroke-width="2.5"
+        stroke-linejoin="round"
+      />
+      <path d="M10 7l8 3v15h-8z" fill="var(--warp-color-accent-on-solid)" />
+    </svg>
+  )
+}

package/templates/admin/files/src/components/OrderDetail.tsx

@@ -0,0 +1,93 @@
+import {
+  Card,
+  Grid,
+  Heading,
+  Select,
+  Skeleton,
+  Stack,
+  Table,
+  Text,
+  toast,
+  type Column,
+} from '@weft-js/warp'
+import { derived } from '@weft-js/core'
+import { StatusBadge } from '#/components/StatusBadge'
+import { date, money, statuses, type Status } from '#/lib/orders'
+import { getOrder, setOrderStatus } from '#/server/orders'
+
+type Item = { id: number; product: string; quantity: number; priceCents: number }
+
+const options = statuses.map((status) => ({ value: status, label: status }))
+
+const columns: Column<Item>[] = [
+  { id: 'product', header: 'Product', rowHeader: true },
+  { id: 'quantity', header: 'Quantity', numeric: true },
+  { id: 'price', header: 'Price', numeric: true, value: (item) => money(item.priceCents) },
+  {
+    id: 'line',
+    header: 'Line total',
+    numeric: true,
+    value: (item) => money(item.priceCents * item.quantity),
+  },
+]
+
+export function OrderDetail({ id }: { id: number }) {
+  const order = getOrder(() => ({ id }))
+  const items = derived(() => order.value?.items ?? [])
+  const save = (status: Status) =>
+    setOrderStatus({ id, status })
+      .then(() => toast.show({ tone: 'positive', title: `Order #${id} is now ${status}` }))
+      .catch(() =>
+        toast.show({
+          tone: 'critical',
+          title: "That status wasn't saved",
+          description: 'The order is as it was. Try again in a moment.',
+        }),
+      )
+
+  return (
+    <Stack gap="group">
+      <div class="section-head">
+        <Heading level={1} role="title">
+          Order #{id}
+        </Heading>
+        {order.value && <StatusBadge status={order.value.status} />}
+      </div>
+      <Grid min="16rem" gap="related">
+        <Card eyebrow="Customer">
+          <Stack gap="tight">
+            <strong>{order.value?.customer}</strong>
+            <Text subtle>{order.value?.email}</Text>
+            <Text subtle>{order.value?.city}</Text>
+          </Stack>
+        </Card>
+        <Card eyebrow="Order">
+          <Stack gap="tight">
+            <strong>{money(order.value?.totalCents ?? 0)}</strong>
+            <Text subtle>Placed {order.value ? date(order.value.createdAt) : ''}</Text>
+          </Stack>
+        </Card>
+        <Card eyebrow="Fulfilment">
+          <Select
+            label="Status"
+            options={options}
+            value={order.value?.status}
+            disabled={setOrderStatus.pending.value}
+            onChange={(e) => save((e.currentTarget as HTMLSelectElement).value as Status)}
+          />
+        </Card>
+      </Grid>
+      <Table
+        caption="Items"
+        rows={items}
+        columns={columns}
+        picker={false}
+        empty={{ title: 'No items', text: 'This order has no line items.' }}
+      />
+    </Stack>
+  )
+}
+
+export const OrderLoading = () => (
+  <Skeleton lines={8} height="2rem" aria-label="Loading the order" />
+)

package/templates/admin/files/src/components/OrdersFilters.tsx

@@ -0,0 +1,44 @@
+import { navigate } from '@weft-js/start'
+import { Input, Select } from '@weft-js/warp'
+import { defaultView, statuses, viewHref, type OrderView } from '#/lib/orders'
+
+const options = [
+  { value: '', label: 'all' },
+  ...statuses.map((status) => ({ value: status, label: status })),
+]
+
+/** A real GET form, so filters work before the page has hydrated. */
+export function OrdersFilters({ view }: { view: OrderView }) {
+  const show = (change: Partial<OrderView>) => navigate(viewHref({ ...view, page: 1, ...change }))
+  const search = (e: SubmitEvent) => {
+    e.preventDefault()
+    const q = new FormData(e.currentTarget as HTMLFormElement).get('q')
+    show({ q: typeof q === 'string' ? q.trim() : '' })
+  }
+  return (
+    <form class="filters" method="get" action="/admin/orders" onSubmit={search}>
+      {view.sort !== defaultView.sort || view.dir !== defaultView.dir ? (
+        <>
+          <input type="hidden" name="sort" value={view.sort} />
+          <input type="hidden" name="dir" value={view.dir} />
+        </>
+      ) : null}
+      <Input
+        label="Search"
+        name="q"
+        placeholder="Customer name"
+        autocomplete="off"
+        value={view.q}
+      />
+      <Select
+        label="Status"
+        name="status"
+        options={options}
+        value={view.status}
+        onChange={(e) =>
+          show({ status: (e.currentTarget as HTMLSelectElement).value as OrderView['status'] })
+        }
+      />
+    </form>
+  )
+}

package/templates/admin/files/src/components/OrdersTable.tsx

@@ -0,0 +1,144 @@
+import { navigate } from '@weft-js/start'
+import {
+  Button,
+  Link,
+  Skeleton,
+  Table,
+  Text,
+  toast,
+  type Column,
+  type TableSort,
+} from '@weft-js/warp'
+import { derived, state, watch, type State } from '@weft-js/core'
+import { StatusBadge } from '#/components/StatusBadge'
+import { count, date, money, PAGE_SIZE, viewHref, type OrderView, type SortKey } from '#/lib/orders'
+import { listOrders, markShipped, type OrderRow } from '#/server/orders'
+
+const columns: Column<OrderRow>[] = [
+  {
+    id: 'id',
+    header: 'Order',
+    sort: true,
+    rowHeader: true,
+    value: (row) => `Order ${row.id}`,
+    cell: (row) => <Link href={`/admin/orders/${row.id}`}>#{row.id}</Link>,
+  },
+  { id: 'customer', header: 'Customer', sort: true },
+  {
+    id: 'status',
+    header: 'Status',
+    sort: true,
+    card: 'badge',
+    cell: (row) => <StatusBadge status={row.status} />,
+  },
+  {
+    id: 'total',
+    header: 'Total',
+    sort: true,
+    numeric: true,
+    value: (row) => money(row.totalCents),
+  },
+  { id: 'created', header: 'Date', sort: true, value: (row) => date(row.createdAt) },
+]
+
+const tableSort = (view: OrderView): TableSort => ({
+  id: view.sort,
+  dir: view.dir === 'asc' ? 'ascending' : 'descending',
+})
+
+async function shipOrders(
+  keys: string[],
+  view: () => OrderView,
+  selected: State<Record<string, boolean>>,
+) {
+  try {
+    await markShipped({ ids: keys.map(Number), view: { ...view() } })
+    selected.value = {}
+    toast.show({
+      tone: 'positive',
+      title: keys.length === 1 ? '1 order marked shipped' : `${keys.length} orders marked shipped`,
+    })
+  } catch {
+    toast.show({
+      tone: 'critical',
+      title: "Those orders weren't updated",
+      description: 'Your selection is still here. Try again in a moment.',
+    })
+  }
+}
+
+export function OrdersTable({ view }: { view: OrderView }) {
+  const orders = listOrders(() => ({ ...view }))
+  const rows = derived(() => orders.value?.rows ?? [])
+  const total = derived(() => orders.value?.total ?? 0)
+  const pages = derived(() => Math.max(1, Math.ceil(total.value / PAGE_SIZE)))
+  const selected = state<Record<string, boolean>>({})
+  const sort = state.linked(() => tableSort(view))
+
+  // A ticked row off screen shouldn't be shipped by accident.
+  watch(
+    () => viewHref(view),
+    () => {
+      selected.value = {}
+    },
+  )
+
+  const sortBy = (next: TableSort) =>
+    navigate(
+      viewHref({
+        ...view,
+        page: 1,
+        sort: next.id as SortKey,
+        dir: next.dir === 'ascending' ? 'asc' : 'desc',
+      }),
+    )
+
+  const currentView = () => view
+  const ship = (keys: string[]) => shipOrders(keys, currentView, selected)
+
+  return (
+    <>
+      <Table
+        caption="Orders"
+        captionHidden
+        rows={rows}
+        columns={columns}
+        server
+        sort={sort}
+        onSortChange={sortBy}
+        selection={selected}
+        bulk={(keys) => (
+          <Button loading={markShipped.pending.value} onClick={() => ship(keys)}>
+            Mark shipped
+          </Button>
+        )}
+        empty={{
+          title: 'No orders match',
+          text:
+            view.q || view.status
+              ? 'Try another name, or a different status.'
+              : 'New orders land here the moment a customer checks out.',
+        }}
+      />
+      <nav class="pager" aria-label="Pages">
+        {view.page > 1 ? (
+          <Link href={viewHref({ ...view, page: view.page - 1 })}>Previous</Link>
+        ) : (
+          <span aria-disabled="true">Previous</span>
+        )}
+        <Text subtle>
+          Page {view.page} of {count(pages.value)}, {count(total.value)} orders
+        </Text>
+        {view.page < pages.value ? (
+          <Link href={viewHref({ ...view, page: view.page + 1 })}>Next</Link>
+        ) : (
+          <span aria-disabled="true">Next</span>
+        )}
+      </nav>
+    </>
+  )
+}
+
+export const OrdersLoading = () => (
+  <Skeleton lines={12} height="1.75rem" aria-label="Loading orders" />
+)

package/templates/admin/files/src/components/Overview.tsx

@@ -0,0 +1,113 @@
+import {
+  BarChart,
+  Card,
+  Grid,
+  Heading,
+  Link,
+  Skeleton,
+  Stack,
+  Table,
+  Text,
+  type Column,
+} from '@weft-js/warp'
+import { derived } from '@weft-js/core'
+import { StatusBadge } from '#/components/StatusBadge'
+import { count, date, money, roundMoney } from '#/lib/orders'
+import { latestOrders, revenueByMonth, storeStats, type OrderRow } from '#/server/orders'
+
+const dollars = (n: number) => roundMoney(n * 100)
+
+function Stat({ label, value }: { label: string; value: string }) {
+  return (
+    <Card eyebrow={label} class="stat">
+      <Text role="title">{value}</Text>
+    </Card>
+  )
+}
+
+export function Stats() {
+  const stats = storeStats()
+  return (
+    <Grid min="12rem" gap="related">
+      <Stat label="Revenue" value={roundMoney(stats.value?.revenue ?? 0)} />
+      <Stat label="Orders" value={count(stats.value?.orders ?? 0)} />
+      <Stat label="Customers" value={count(stats.value?.customers ?? 0)} />
+      <Stat label="Refunded" value={roundMoney(stats.value?.refunded ?? 0)} />
+    </Grid>
+  )
+}
+
+export const StatsLoading = () => (
+  <Grid min="12rem" gap="related" aria-busy="true" aria-label="Loading the totals">
+    <Skeleton height="5.25rem" />
+    <Skeleton height="5.25rem" />
+    <Skeleton height="5.25rem" />
+    <Skeleton height="5.25rem" />
+  </Grid>
+)
+
+/* @weft visible */
+export function RevenueChart() {
+  const months = revenueByMonth()
+  return (
+    <BarChart
+      title="Revenue by month"
+      description="Everything sold in each of the last twelve months, less refunds."
+      data={months.value ?? []}
+      x="month"
+      series={[{ key: 'revenue', name: 'Revenue', color: 'var(--warp-color-accent-solid)' }]}
+      format={dollars}
+      axisFormat={dollars}
+      empty={{
+        title: 'No sales yet',
+        detail: 'Your first month will show up here as soon as an order comes in.',
+      }}
+    />
+  )
+}
+
+export const RevenueChartLoading = () => <Skeleton height="24rem" aria-label="Loading the chart" />
+
+const columns: Column<OrderRow>[] = [
+  {
+    id: 'id',
+    header: 'Order',
+    rowHeader: true,
+    value: (row) => `Order ${row.id}`,
+    cell: (row) => <Link href={`/admin/orders/${row.id}`}>#{row.id}</Link>,
+  },
+  { id: 'customer', header: 'Customer' },
+  {
+    id: 'status',
+    header: 'Status',
+    card: 'badge',
+    cell: (row) => <StatusBadge status={row.status} />,
+  },
+  { id: 'total', header: 'Total', numeric: true, value: (row) => money(row.totalCents) },
+  { id: 'date', header: 'Date', value: (row) => date(row.createdAt) },
+]
+
+export function LatestOrders() {
+  const latest = latestOrders()
+  const rows = derived(() => latest.value ?? [])
+  return (
+    <Stack gap="related">
+      <div class="section-head">
+        <Heading level={2}>Latest orders</Heading>
+        <Link href="/admin/orders">See all orders</Link>
+      </div>
+      <Table
+        caption="Latest orders"
+        captionHidden
+        rows={rows}
+        columns={columns}
+        picker={false}
+        empty={{ title: 'No orders yet', text: 'They land here the moment a customer checks out.' }}
+      />
+    </Stack>
+  )
+}
+
+export const LatestOrdersLoading = () => (
+  <Skeleton lines={10} height="1.75rem" aria-label="Loading the latest orders" />
+)

package/templates/admin/files/src/components/StatusBadge.tsx

@@ -0,0 +1,12 @@
+import { Badge, type Tone } from '@weft-js/warp'
+
+const tones: Record<string, Tone> = {
+  pending: 'caution',
+  paid: 'info',
+  shipped: 'positive',
+  refunded: 'critical',
+}
+
+export function StatusBadge({ status }: { status: string }) {
+  return <Badge tone={tones[status]}>{status}</Badge>
+}

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

@@ -0,0 +1,68 @@
+import { desc } from 'drizzle-orm'
+import { boolean, index, integer, pgTable, serial, text, timestamp } from 'drizzle-orm/pg-core'
+
+export * from './auth'
+
+export const customers = pgTable('customers', {
+  id: serial('id').primaryKey(),
+  name: text('name').notNull(),
+  email: text('email').notNull().unique(),
+  city: text('city').notNull(),
+})
+
+export const orders = pgTable(
+  'orders',
+  {
+    id: serial('id').primaryKey(),
+    customerId: integer('customer_id')
+      .notNull()
+      .references(() => customers.id),
+    status: text('status').notNull(),
+    totalCents: integer('total_cents').notNull(),
+    createdAt: timestamp('created_at', { withTimezone: true }).notNull(),
+  },
+  (table) => [
+    index('orders_created').on(desc(table.createdAt), desc(table.id)),
+    index('orders_status').on(table.status, desc(table.createdAt)),
+    index('orders_customer').on(table.customerId),
+  ],
+)
+
+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 orderItems = pgTable(
+  'order_items',
+  {
+    id: serial('id').primaryKey(),
+    orderId: integer('order_id')
+      .notNull()
+      .references(() => orders.id, { onDelete: 'cascade' }),
+    productId: integer('product_id')
+      .notNull()
+      .references(() => products.id),
+    quantity: integer('quantity').notNull(),
+    priceCents: integer('price_cents').notNull(),
+  },
+  (table) => [index('order_items_order').on(table.orderId)],
+)

package/templates/admin/files/src/lib/orders.ts

@@ -0,0 +1,60 @@
+export const PAGE_SIZE = 50
+
+export const statuses = ['pending', 'paid', 'shipped', 'refunded'] as const
+export type Status = (typeof statuses)[number]
+
+export const sortKeys = ['id', 'customer', 'status', 'total', 'created'] as const
+export type SortKey = (typeof sortKeys)[number]
+export type Dir = 'asc' | 'desc'
+
+/** What `/admin/orders` is showing. It all lives in the URL, so a view can be reloaded, shared and gone back to. */
+export interface OrderView {
+  page: number
+  sort: SortKey
+  dir: Dir
+  status: Status | ''
+  q: string
+}
+
+export const defaultView: OrderView = { page: 1, sort: 'created', dir: 'desc', status: '', q: '' }
+
+export function viewOf(url: string): OrderView {
+  const asked = new URL(url).searchParams
+  const page = Number(asked.get('page'))
+  const sort = sortKeys.find((key) => key === asked.get('sort'))
+  const status = statuses.find((key) => key === asked.get('status'))
+  return {
+    page: Number.isSafeInteger(page) && page > 0 && page < 1e6 ? page : 1,
+    sort: sort ?? defaultView.sort,
+    dir: asked.get('dir') === 'asc' ? 'asc' : 'desc',
+    status: status ?? '',
+    q: (asked.get('q') ?? '').trim().slice(0, 100),
+  }
+}
+
+export function viewHref(view: OrderView) {
+  const query = new URLSearchParams()
+  if (view.status) query.set('status', view.status)
+  if (view.q) query.set('q', view.q)
+  if (view.sort !== defaultView.sort || view.dir !== defaultView.dir) {
+    query.set('sort', view.sort)
+    query.set('dir', view.dir)
+  }
+  if (view.page > 1) query.set('page', String(view.page))
+  const search = query.toString()
+  return search ? `/admin/orders?${search}` : '/admin/orders'
+}
+
+const dollars = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' })
+const wholeDollars = new Intl.NumberFormat('en-US', {
+  style: 'currency',
+  currency: 'USD',
+  maximumFractionDigits: 0,
+})
+const day = new Intl.DateTimeFormat('en-US', { dateStyle: 'medium', timeZone: 'UTC' })
+
+export const money = (cents: number) => dollars.format(cents / 100)
+export const roundMoney = (cents: number) => wholeDollars.format(cents / 100)
+const number = new Intl.NumberFormat('en-US')
+export const count = (n: number) => number.format(n)
+export const date = (iso: string) => day.format(new Date(iso))

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

@@ -0,0 +1,20 @@
+import { Link, type Meta } from '@weft-js/start'
+import { Center, Heading, Stack, Text } from '@weft-js/warp'
+
+export const meta: Meta = { title: 'Page not found' }
+
+export default function NotFound() {
+  return (
+    <main class="system-page">
+      <Center max="narrow" gutter>
+        <Stack gap="group" align="center">
+          <Heading level={1} role="title">
+            Nothing on this shelf
+          </Heading>
+          <Text subtle>The order may be gone, or the address mistyped.</Text>
+          <Link href="/admin">Back to the overview</Link>
+        </Stack>
+      </Center>
+    </main>
+  )
+}