@weft-js/create 0.1.1 → 0.1.3

package/templates/admin/files/src/routes/_error.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: 'Something went wrong' }
+
+export default function ServerError() {
+  return (
+    <main class="system-page">
+      <Center max="narrow" gutter>
+        <Stack gap="group" align="center">
+          <Heading level={1} role="title">
+            Something went wrong on our side
+          </Heading>
+          <Text subtle>Your orders are safe. Give it a minute and try again.</Text>
+          <Link href="/admin">Back to the overview</Link>
+        </Stack>
+      </Center>
+    </main>
+  )
+}

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

@@ -0,0 +1,6 @@
+import '../theme.css'
+import type { RouteProps } from '@weft-js/start'
+
+export default function Root(props: RouteProps) {
+  return <>{props.children}</>
+}

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

@@ -0,0 +1,89 @@
+import {
+  BarChartIcon,
+  ClipboardListIcon,
+  HomeIcon,
+  ListIcon,
+  LogOutIcon,
+  StoreIcon,
+} from '@weft-js/warp-icons'
+import { redirect, type LoadArgs, type RouteProps } from '@weft-js/start'
+import { Shell, Toaster, toast } from '@weft-js/warp'
+import { Logo } from '#/components/Logo'
+import { signOut } from '#/server/session'
+
+const pages = {
+  '/admin': { id: 'overview', label: 'Overview' },
+  '/admin/orders': { id: 'orders', label: 'Orders' },
+  '/admin/nested': { id: 'regions', label: 'Regions' },
+  '/admin/per-row': { id: 'buyers', label: 'Order feed' },
+  '/admin/slow': { id: 'report', label: 'Year report' },
+}
+
+// The guard for every page under /admin; each page's own queries are `auth: 'user'` as well.
+export const load = ({ ctx, request }: LoadArgs) => {
+  if (!ctx.user) redirect('/login')
+  const path = new URL(request.url).pathname.replace(/\/$/, '')
+  const detail = path.match(/^\/admin\/orders\/(.+)$/)
+  const page = pages[(detail ? '/admin/orders' : path) as keyof typeof pages] ?? pages['/admin']
+  const crumbs = [
+    { label: 'Backroom', href: '/admin' },
+    ...(detail
+      ? [{ label: 'Orders', href: '/admin/orders' }, { label: `#${detail[1]}` }]
+      : [{ label: page.label }]),
+  ]
+  return { name: ctx.user.name, email: ctx.user.email, current: page.id, crumbs }
+}
+
+const nav = [
+  {
+    items: [
+      { id: 'overview', label: 'Overview', href: '/admin', icon: HomeIcon },
+      { id: 'orders', label: 'Orders', href: '/admin/orders', icon: ClipboardListIcon },
+    ],
+  },
+  {
+    label: 'Reports',
+    items: [
+      { id: 'regions', label: 'Regions', href: '/admin/nested', icon: StoreIcon },
+      { id: 'buyers', label: 'Order feed', href: '/admin/per-row', icon: ListIcon },
+      { id: 'report', label: 'Year report', href: '/admin/slow', icon: BarChartIcon },
+    ],
+  },
+]
+
+const leave = () =>
+  signOut().catch(() =>
+    toast.show({
+      tone: 'critical',
+      title: "You're still signed in",
+      description: "That didn't go through. Try again in a moment.",
+    }),
+  )
+const initials = (name: string) =>
+  name
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((word) => word[0])
+    .join('')
+    .toUpperCase()
+
+export default function Admin(props: RouteProps<typeof load>) {
+  return (
+    <Shell
+      brand={{ name: 'Backroom', href: '/admin', mark: <Logo /> }}
+      nav={nav}
+      current={props.data.current}
+      crumbs={props.data.crumbs}
+      account={{
+        name: props.data.name,
+        email: props.data.email,
+        initials: initials(props.data.name),
+        items: [{ label: 'Sign out', icon: LogOutIcon, onSelect: leave }],
+      }}
+      overlays={<Toaster />}
+    >
+      <div class="page">{props.children}</div>
+    </Shell>
+  )
+}

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

@@ -0,0 +1,45 @@
+import type { Meta } from '@weft-js/start'
+import { Heading, Stack, Text } from '@weft-js/warp'
+import { Boundary } from '@weft-js/core'
+import { Failed } from '#/components/Failed'
+import {
+  LatestOrders,
+  LatestOrdersLoading,
+  RevenueChart,
+  RevenueChartLoading,
+  Stats,
+  StatsLoading,
+} from '#/components/Overview'
+
+export const meta: Meta = { title: 'Overview' }
+
+export default function Overview() {
+  return (
+    <Stack gap="group">
+      <Stack gap="tight">
+        <Heading level={1} role="title">
+          Overview
+        </Heading>
+        <Text subtle>How the shop is doing, all time.</Text>
+      </Stack>
+      <Boundary
+        pending={<StatsLoading />}
+        error={(_, retry) => <Failed what="The totals" retry={retry} />}
+      >
+        <Stats />
+      </Boundary>
+      <Boundary
+        pending={<RevenueChartLoading />}
+        error={(_, retry) => <Failed what="The chart" retry={retry} />}
+      >
+        <RevenueChart />
+      </Boundary>
+      <Boundary
+        pending={<LatestOrdersLoading />}
+        error={(_, retry) => <Failed what="The latest orders" retry={retry} />}
+      >
+        <LatestOrders />
+      </Boundary>
+    </Stack>
+  )
+}

package/templates/admin/files/src/routes/admin/nested/_layout.tsx

@@ -0,0 +1,35 @@
+import type { RouteProps } from '@weft-js/start'
+import { Heading, Skeleton, Stack, Text } from '@weft-js/warp'
+import { Boundary } from '@weft-js/core'
+import { Failed } from '#/components/Failed'
+import { count } from '#/lib/orders'
+import { reach } from '#/server/reports'
+
+function Reach() {
+  const store = reach()
+  return (
+    <Text subtle>
+      {count(store.value?.customers ?? 0)} customers across {count(store.value?.cities ?? 0)}{' '}
+      cities.
+    </Text>
+  )
+}
+
+export default function Regions(props: RouteProps) {
+  return (
+    <Stack gap="group">
+      <Stack gap="tight">
+        <Heading level={1} role="title">
+          Regions
+        </Heading>
+        <Boundary
+          pending={<Skeleton width="16rem" aria-label="Loading the reach" />}
+          error={(_, retry) => <Failed what="The reach" retry={retry} />}
+        >
+          <Reach />
+        </Boundary>
+      </Stack>
+      {props.children}
+    </Stack>
+  )
+}

package/templates/admin/files/src/routes/admin/nested/index.tsx

@@ -0,0 +1,77 @@
+import type { Meta } from '@weft-js/start'
+import { Card, Grid, Heading, Skeleton, Stack, Table, Text, type Column } from '@weft-js/warp'
+import { Boundary, derived } from '@weft-js/core'
+import { Failed } from '#/components/Failed'
+import { count, money } from '#/lib/orders'
+import { biggestCustomers, topCities } from '#/server/reports'
+
+export const meta: Meta = { title: 'Regions' }
+
+type City = { city: string; orders: number; revenue: number }
+
+const columns: Column<City>[] = [
+  { id: 'city', header: 'City', rowHeader: true },
+  { id: 'orders', header: 'Orders', numeric: true, value: (row) => count(row.orders) },
+  { id: 'revenue', header: 'Revenue', numeric: true, value: (row) => money(row.revenue) },
+]
+
+function Cities() {
+  const cities = topCities()
+  const rows = derived(() => cities.value ?? [])
+  return (
+    <Table
+      caption="Cities"
+      rows={rows}
+      columns={columns}
+      rowKey="city"
+      picker={false}
+      empty={{ title: 'No cities yet', text: 'Each city appears with its first order.' }}
+    />
+  )
+}
+
+function BiggestCustomers() {
+  const biggest = biggestCustomers()
+  const people = derived(() => biggest.value ?? [])
+  return (
+    <div>
+      {people.value.length > 0 ? (
+        <Grid min="12rem" gap="related">
+          {people.value.map((person) => (
+            <Card key={person.id} eyebrow={person.city}>
+              <Stack gap="tight">
+                <strong>{person.name}</strong>
+                <Text subtle>{money(person.revenue)}</Text>
+              </Stack>
+            </Card>
+          ))}
+        </Grid>
+      ) : (
+        <Text subtle>Your best customers will show up here once orders come in.</Text>
+      )}
+    </div>
+  )
+}
+
+// Each part reads its own data inside a Boundary, so the page's first byte waits for none of them.
+export default function RegionTable() {
+  return (
+    <Stack gap="group">
+      <Boundary
+        pending={<Skeleton lines={6} height="1.75rem" aria-label="Loading the cities" />}
+        error={(_, retry) => <Failed what="The cities" retry={retry} />}
+      >
+        <Cities />
+      </Boundary>
+      <Stack gap="related">
+        <Heading level={2}>Biggest customers</Heading>
+        <Boundary
+          pending={<Skeleton height="5.25rem" aria-label="Loading the biggest customers" />}
+          error={(_, retry) => <Failed what="The biggest customers" retry={retry} />}
+        >
+          <BiggestCustomers />
+        </Boundary>
+      </Stack>
+    </Stack>
+  )
+}

package/templates/admin/files/src/routes/admin/orders/[id].tsx

@@ -0,0 +1,24 @@
+import { notFound, type LoadArgs, type Meta, type RouteProps } from '@weft-js/start'
+import { Boundary } from '@weft-js/core'
+import { Failed } from '#/components/Failed'
+import { OrderDetail, OrderLoading } from '#/components/OrderDetail'
+import { getOrder } from '#/server/orders'
+
+export const load = async ({ params }: LoadArgs<'/admin/orders/[id]'>) => {
+  const id = Number(params.id)
+  if (!Number.isInteger(id) || id < 1) return notFound()
+  return (await getOrder.fetch({ id })) ? { id } : notFound()
+}
+
+export const meta: Meta<typeof load> = ({ data }) => ({ title: `Order #${data.id}` })
+
+export default function Order(props: RouteProps<typeof load, '/admin/orders/[id]'>) {
+  return (
+    <Boundary
+      pending={<OrderLoading />}
+      error={(_, retry) => <Failed what="This order" retry={retry} />}
+    >
+      <OrderDetail id={props.data.id} />
+    </Boundary>
+  )
+}

package/templates/admin/files/src/routes/admin/orders/index.tsx

@@ -0,0 +1,28 @@
+import type { LoadArgs, Meta, RouteProps } from '@weft-js/start'
+import { Heading, Stack } from '@weft-js/warp'
+import { Boundary } from '@weft-js/core'
+import { Failed } from '#/components/Failed'
+import { OrdersFilters } from '#/components/OrdersFilters'
+import { OrdersLoading, OrdersTable } from '#/components/OrdersTable'
+import { viewOf } from '#/lib/orders'
+
+export const load = ({ request }: LoadArgs) => ({ view: viewOf(request.url) })
+
+export const meta: Meta = { title: 'Orders' }
+
+export default function Orders(props: RouteProps<typeof load>) {
+  return (
+    <Stack gap="group">
+      <Heading level={1} role="title">
+        Orders
+      </Heading>
+      <OrdersFilters view={props.data.view} />
+      <Boundary
+        pending={<OrdersLoading />}
+        error={(_, retry) => <Failed what="The orders" retry={retry} />}
+      >
+        <OrdersTable view={props.data.view} />
+      </Boundary>
+    </Stack>
+  )
+}

package/templates/admin/files/src/routes/admin/per-row.tsx

@@ -0,0 +1,81 @@
+import type { Meta } from '@weft-js/start'
+import { Heading, Link, Skeleton, Stack, Table, Text, type Column } from '@weft-js/warp'
+import { Boundary, derived } from '@weft-js/core'
+import { Failed } from '#/components/Failed'
+import { StatusBadge } from '#/components/StatusBadge'
+import { date, money } from '#/lib/orders'
+import { getCustomer, recentOrderIds } from '#/server/reports'
+
+export const meta: Meta = { title: 'Order feed' }
+
+type FeedRow = {
+  id: number
+  customerId: number
+  status: string
+  totalCents: number
+  createdAt: string
+}
+
+function CustomerCell({ id }: { id: number }) {
+  const customer = getCustomer(() => ({ id }))
+  return (
+    <>
+      {customer.value?.name} <Text subtle>{customer.value?.city}</Text>
+    </>
+  )
+}
+
+const columns: Column<FeedRow>[] = [
+  {
+    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', cell: (row) => <CustomerCell id={row.customerId} /> },
+  {
+    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) },
+]
+
+function Feed() {
+  const recent = recentOrderIds()
+  const rows = derived(() => recent.value ?? [])
+  return (
+    <Table
+      caption="Recent orders"
+      captionHidden
+      rows={rows}
+      columns={columns}
+      picker={false}
+      empty={{ title: 'Quiet so far', text: 'New orders land here as they come in.' }}
+    />
+  )
+}
+
+// A plain box, not warp's Stack: there the Boundary would be part of an island that waits for a click, and a stream that stops
+// early would leave the skeleton up. On its own the island runs as the page shows, and fills in from what the page carries.
+export default function OrderFeed() {
+  return (
+    <div class="flow">
+      <Stack gap="tight">
+        <Heading level={1} role="title">
+          Order feed
+        </Heading>
+        <Text subtle>The last 50 orders, each with who placed it.</Text>
+      </Stack>
+      <Boundary
+        pending={<Skeleton lines={12} height="1.75rem" aria-label="Loading the feed" />}
+        error={(_, retry) => <Failed what="The feed" retry={retry} />}
+      >
+        <Feed />
+      </Boundary>
+    </div>
+  )
+}

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

@@ -0,0 +1,74 @@
+import type { Meta } from '@weft-js/start'
+import { Button, Heading, Skeleton, Stack, Table, Text, type Column } from '@weft-js/warp'
+import { Boundary, derived, state } from '@weft-js/core'
+import { Failed } from '#/components/Failed'
+import { StatusBadge } from '#/components/StatusBadge'
+import { count, money } from '#/lib/orders'
+import { yearReport } from '#/server/reports'
+
+export const meta: Meta = { title: 'Year report' }
+
+type Line = { status: string; orders: number; revenue: number }
+
+const columns: Column<Line>[] = [
+  {
+    id: 'status',
+    header: 'Status',
+    rowHeader: true,
+    cell: (row) => <StatusBadge status={row.status} />,
+  },
+  { id: 'orders', header: 'Orders', numeric: true, value: (row) => count(row.orders) },
+  { id: 'revenue', header: 'Revenue', numeric: true, value: (row) => money(row.revenue) },
+]
+
+function Report() {
+  const report = yearReport()
+  const lines = derived(() => report.value ?? [])
+  return (
+    <Table
+      caption="The year by status"
+      captionHidden
+      rows={lines}
+      columns={columns}
+      rowKey="status"
+      picker={false}
+      empty={{ title: 'Nothing to report', text: 'The report fills in once orders come in.' }}
+    />
+  )
+}
+
+function Tally() {
+  const counted = state(0)
+  return (
+    <div class="section-head">
+      <span role="status">Count: {counted.value}</span>
+      <Button emphasis="outline" onClick={() => counted.value++}>
+        Count
+      </Button>
+    </div>
+  )
+}
+
+export default function YearReport() {
+  return (
+    <Stack gap="group">
+      <Stack gap="tight">
+        <Heading level={1} role="title">
+          Year report
+        </Heading>
+        <Text subtle>
+          The books take a moment to add up. Keep working: the page is yours while they do.
+        </Text>
+      </Stack>
+      <Tally />
+      <section aria-label="Report">
+        <Boundary
+          pending={<Skeleton lines={5} height="1.75rem" aria-label="Adding up the year" />}
+          error={(_, retry) => <Failed what="The report" retry={retry} />}
+        >
+          <Report />
+        </Boundary>
+      </section>
+    </Stack>
+  )
+}

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

@@ -0,0 +1,13 @@
+import { redirect, type Meta } from '@weft-js/start'
+
+// Only ever seen as a redirect, but a link to the bare domain still gets a title and a card.
+export const meta: Meta = {
+  title: 'Backroom',
+  description: 'Backroom runs the shop: orders, customers and revenue in one place.',
+}
+
+export const load = () => redirect('/admin')
+
+export default function Home() {
+  return null
+}

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

@@ -0,0 +1,53 @@
+import { Form, Link, redirect, type FormApi, type LoadArgs, type Meta } from '@weft-js/start'
+import { Alert, Button, Input, Stack, Text } from '@weft-js/warp'
+import { AuthPage } from '#/components/AuthPage'
+import { signIn } from '#/server/session'
+
+export const load = ({ ctx }: LoadArgs) => {
+  if (ctx.user) redirect('/admin')
+}
+
+export const meta: Meta = {
+  title: 'Sign in',
+  description: 'Backroom is where you run the shop: orders, customers and revenue in one place.',
+}
+
+export default function Login() {
+  return (
+    <AuthPage title="Back to work" lede="Sign in to see what came in overnight.">
+      <Form of={signIn}>
+        {(form: FormApi) => (
+          <Stack gap="related">
+            {form.message.value && (
+              <Alert tone="critical" title="We couldn't sign you in" live>
+                {form.message.value}
+              </Alert>
+            )}
+            <Input
+              label="Email"
+              type="email"
+              autocomplete="username"
+              required
+              {...form.field('email', 'email')}
+            />
+            <form.Error name="email" class="form-error" />
+            <Input
+              label="Password"
+              type="password"
+              name="password"
+              autocomplete="current-password"
+              required
+            />
+            <form.Error name="password" class="form-error" />
+            <Button type="submit" full loading={form.pending.value}>
+              Sign in
+            </Button>
+          </Stack>
+        )}
+      </Form>
+      <Text subtle>
+        Setting up a new store? <Link href="/signup">Create the owner account</Link>
+      </Text>
+    </AuthPage>
+  )
+}

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

@@ -0,0 +1,60 @@
+import { Form, Link, redirect, type FormApi, type LoadArgs, type Meta } from '@weft-js/start'
+import { Alert, Button, Input, Stack, Text } from '@weft-js/warp'
+import { AuthPage } from '#/components/AuthPage'
+import { signUp } from '#/server/session'
+
+export const load = ({ ctx }: LoadArgs) => {
+  if (ctx.user) redirect('/admin')
+}
+
+export const meta: Meta = {
+  title: 'Create the owner account',
+  description: 'The first account owns the store. Sign-up closes after it.',
+}
+
+export default function Signup() {
+  return (
+    <AuthPage
+      title="Open up the backroom"
+      lede="The first account owns the store. Sign-up closes after it."
+    >
+      <Form of={signUp}>
+        {(form: FormApi) => (
+          <Stack gap="related">
+            {form.message.value && (
+              <Alert tone="critical" title="We couldn't create your account" live>
+                {form.message.value}
+              </Alert>
+            )}
+            <Input label="Name" autocomplete="name" required {...form.field('name', 'text')} />
+            <form.Error name="name" class="form-error" />
+            <Input
+              label="Email"
+              type="email"
+              autocomplete="username"
+              required
+              {...form.field('email', 'email')}
+            />
+            <form.Error name="email" class="form-error" />
+            <Input
+              label="Password"
+              type="password"
+              name="password"
+              autocomplete="new-password"
+              required
+              minlength={8}
+              hint="At least 8 characters."
+            />
+            <form.Error name="password" class="form-error" />
+            <Button type="submit" full loading={form.pending.value}>
+              Create account
+            </Button>
+          </Stack>
+        )}
+      </Form>
+      <Text subtle>
+        Already have an account? <Link href="/login">Sign in</Link>
+      </Text>
+    </AuthPage>
+  )
+}