@weft-js/create 0.1.1 → 0.1.3

package/templates/todo/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">
+            That page isn't in the book
+          </Heading>
+          <Text subtle>The link may be old, or the address mistyped.</Text>
+          <Link href="/todos">Back to your list</Link>
+        </Stack>
+      </Center>
+    </main>
+  )
+}

package/templates/todo/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 list is safe. Give it a minute and try again.</Text>
+          <Link href="/todos">Back to your list</Link>
+        </Stack>
+      </Center>
+    </main>
+  )
+}

package/templates/todo/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/todo/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: 'Daybook',
+  description: 'Daybook is a plain, private list of what you mean to get done.',
+}
+
+export const load = () => redirect('/todos')
+
+export default function Home() {
+  return null
+}

package/templates/todo/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('/todos')
+}
+
+export const meta: Meta = {
+  title: 'Sign in',
+  description: 'Daybook is a plain, private list of what you mean to get done.',
+}
+
+export default function Login() {
+  return (
+    <AuthPage title="Welcome back" lede="Sign in to pick up where you left off.">
+      <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>
+        New to Daybook? <Link href="/signup">Create an account</Link>
+      </Text>
+    </AuthPage>
+  )
+}

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

@@ -0,0 +1,57 @@
+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('/todos')
+}
+
+export const meta: Meta = {
+  title: 'Create an account',
+  description: "An email and a password. That's all it takes.",
+}
+
+export default function Signup() {
+  return (
+    <AuthPage title="Start your daybook" lede="An email and a password. That's all it takes.">
+      <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>
+  )
+}

package/templates/todo/files/src/routes/todos.tsx

@@ -0,0 +1,87 @@
+import { ChecksIcon, CircleIcon, ClipboardListIcon, LogOutIcon } from '@weft-js/warp-icons'
+import { redirect, type LoadArgs, type Meta, type RouteProps } from '@weft-js/start'
+import { Alert, Button, Heading, Shell, Stack, Toaster, toast } from '@weft-js/warp'
+import { Boundary } from '@weft-js/core'
+import { Logo } from '#/components/Logo'
+import { NewTodo } from '#/components/NewTodo'
+import { TodoList, TodoListLoading } from '#/components/TodoList'
+import { viewOf, views } from '#/lib/views'
+import { signOut } from '#/server/session'
+
+export const load = ({ ctx, request }: LoadArgs) => {
+  if (!ctx.user) redirect('/login')
+  return { view: viewOf(request.url), name: ctx.user.name, email: ctx.user.email }
+}
+
+export const meta: Meta<typeof load> = ({ data }) => ({ title: views[data.view].title })
+
+const nav = [
+  {
+    items: [
+      { id: 'all', label: views.all.label, href: views.all.href, icon: ClipboardListIcon },
+      { id: 'active', label: views.active.label, href: views.active.href, icon: CircleIcon },
+      { id: 'done', label: views.done.label, href: views.done.href, icon: ChecksIcon },
+    ],
+  },
+]
+
+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 Todos(props: RouteProps<typeof load>) {
+  return (
+    <Shell
+      brand={{ name: 'Daybook', href: '/todos', mark: <Logo /> }}
+      nav={nav}
+      navLabel="Views"
+      current={props.data.view}
+      account={{
+        name: props.data.name,
+        email: props.data.email,
+        initials: initials(props.data.name),
+        items: [{ label: 'Sign out', icon: LogOutIcon, onSelect: leave }],
+      }}
+      overlays={<Toaster />}
+    >
+      <Stack gap="group" class="day">
+        <Heading level={1} role="title">
+          {views[props.data.view].title}
+        </Heading>
+        <NewTodo />
+        <Boundary
+          pending={<TodoListLoading />}
+          error={(_, retry) => (
+            <Alert
+              tone="critical"
+              title="Your list didn't load"
+              live
+              actions={
+                <Button emphasis="outline" onClick={retry}>
+                  Try again
+                </Button>
+              }
+            >
+              Nothing's lost. It's the connection to your list that failed.
+            </Alert>
+          )}
+        >
+          <TodoList view={props.data.view} />
+        </Boundary>
+      </Stack>
+    </Shell>
+  )
+}

package/templates/todo/files/src/server/todos.ts

@@ -0,0 +1,98 @@
+import { mutation, query, type OptimisticCache } from '@weft-js/start'
+import { and, desc, eq } from 'drizzle-orm'
+import { z } from 'zod'
+import { todos } from '#/db/schema'
+import { viewNames, type View } from '#/lib/views'
+
+const byId = z.object({ id: z.guid() })
+const shown = { all: undefined, active: eq(todos.done, false), done: eq(todos.done, true) }
+
+type List = { rows: { id: string; title: string; done: boolean }[]; left: number }
+
+// Rows are per user and change from anywhere, so each view reads what it shows, with the count every view needs.
+export const listTodos = query({
+  input: z.object({ view: z.enum(viewNames) }),
+  tags: ['todos'],
+  auth: 'user',
+  run: async ({ input, ctx }): Promise<List> => {
+    const mine = eq(todos.userId, ctx.user.id)
+    const [rows, left] = await Promise.all([
+      ctx.db
+        .select({ id: todos.id, title: todos.title, done: todos.done })
+        .from(todos)
+        .where(and(mine, shown[input.view]))
+        .orderBy(desc(todos.createdAt), desc(todos.id)),
+      ctx.db.$count(todos, and(mine, eq(todos.done, false))),
+    ])
+    return { rows, left }
+  },
+})
+
+/** A change to the views already in the cache: only those are drawn, and any of them can come back into sight. */
+function inViews(cache: OptimisticCache, change: (list: List, view: View) => void) {
+  for (const view of viewNames)
+    if (cache.get(listTodos, { view }))
+      cache.update(listTodos, { view }, (list) => change(list, view))
+}
+
+// The client picks the id, so the row it draws is the row that lands, and sending the same add again can't make a second one.
+export const addTodo = mutation({
+  input: byId.extend({
+    title: z
+      .string()
+      .trim()
+      .min(1, 'Write something first.')
+      .max(200, 'Keep it under 200 characters.'),
+  }),
+  auth: 'user',
+  invalidates: ['todos'],
+  optimistic: ({ input }, cache) =>
+    inViews(cache, (list, view) => {
+      list.left++
+      if (view !== 'done')
+        list.rows.unshift({ id: input.id, title: input.title.trim(), done: false })
+    }),
+  run: async ({ input, ctx }) => {
+    await ctx.db
+      .insert(todos)
+      .values({ ...input, userId: ctx.user.id })
+      .onConflictDoNothing()
+  },
+})
+
+// `done` is the state asked for, not a flip: a repeated or reordered request still ends where the last click left it.
+export const toggleTodo = mutation({
+  input: byId.extend({ done: z.boolean() }),
+  auth: 'user',
+  invalidates: ['todos'],
+  optimistic: ({ input }, cache) =>
+    inViews(cache, (list, view) => {
+      const row = list.rows.find((t) => t.id === input.id)
+      if (!row || row.done === input.done) return
+      list.left += input.done ? -1 : 1
+      if (view === 'all') row.done = input.done
+      else list.rows.splice(list.rows.indexOf(row), 1)
+    }),
+  run: async ({ input, ctx }) => {
+    await ctx.db
+      .update(todos)
+      .set({ done: input.done })
+      .where(and(eq(todos.id, input.id), eq(todos.userId, ctx.user.id)))
+  },
+})
+
+export const deleteTodo = mutation({
+  input: byId,
+  auth: 'user',
+  invalidates: ['todos'],
+  optimistic: ({ input }, cache) =>
+    inViews(cache, (list) => {
+      const row = list.rows.find((t) => t.id === input.id)
+      if (!row) return
+      if (!row.done) list.left--
+      list.rows.splice(list.rows.indexOf(row), 1)
+    }),
+  run: async ({ input, ctx }) => {
+    await ctx.db.delete(todos).where(and(eq(todos.id, input.id), eq(todos.userId, ctx.user.id)))
+  },
+})

package/templates/todo/files/src/theme.css

@@ -0,0 +1,71 @@
+/*
+ * Daybook's own CSS, over warp's tokens. The ink, paper, serif and square corners are warp() options in weft.config.ts;
+ * this file is the ruled page. Change those options first, then the rules here.
+ */
+body { margin: 0; }
+
+/* AuthScreen fills its parent, and here its parent is the page */
+[data-scope="auth"], [data-scope="auth"] > [data-part="layout"] { min-block-size: 100dvh; }
+
+/* the brand panel only shows from 1000 up, so narrower pages carry the name themselves */
+.auth-mark { display: flex; align-items: center; gap: var(--warp-space-tight); font-weight: var(--warp-text-heading-weight); }
+@container auth (min-width: 1000px) { .auth-mark { display: none; } }
+
+.logo { display: block; inline-size: 1.5rem; block-size: 1.5rem; flex: none; }
+
+.day {
+  inline-size: 100%;
+  max-inline-size: 40rem;
+  margin-inline: auto;
+  padding-block: var(--warp-space-page);
+}
+
+.new-todo { display: grid; gap: var(--warp-space-tight); }
+.new-todo-row { display: flex; align-items: end; gap: var(--warp-space-related); }
+.new-todo-row [data-scope="field"] { flex: 1; min-inline-size: 0; }
+.new-todo-row > [data-scope="button"] { block-size: var(--warp-field-height); }
+
+.form-error { margin: 0; color: var(--warp-color-critical-text); font-size: var(--warp-text-caption-size); }
+.form-error:empty { display: none; }
+
+.tally { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--warp-space-group); }
+.tally [data-part="label-row"] { display: none; }
+
+/* the ruled page: a hairline under each entry, and a margin rule down the left */
+.todos {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  background: var(--warp-color-surface);
+  border-block-start: 2px solid var(--warp-color-accent-solid);
+  box-shadow: inset 2.75rem 0 0 -2.6875rem var(--warp-color-accent-border);
+}
+.todo {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--warp-space-related);
+  padding: var(--warp-space-tight) var(--warp-space-related);
+  border-block-end: 1px solid var(--warp-color-border);
+  /* A row off screen isn't laid out until it nears the view: a list of 200 costs the few that show. */
+  content-visibility: auto;
+  contain-intrinsic-size: auto 3rem;
+}
+.todo [data-scope="checkbox"] { flex: 1; min-inline-size: 0; overflow-wrap: anywhere; }
+.todo:has(input:checked) [data-part="label"] { color: var(--warp-color-text-subtle); text-decoration: line-through; }
+@media (hover: hover) {
+  .todo > [data-scope="button"] { opacity: 0; }
+  .todo:hover > [data-scope="button"], .todo:focus-within > [data-scope="button"] { opacity: 1; }
+}
+
+.blank {
+  display: grid;
+  justify-items: center;
+  gap: var(--warp-space-tight);
+  padding: var(--warp-space-page) var(--warp-space-group);
+  text-align: center;
+  border: 1px dashed var(--warp-color-border-strong);
+}
+.blank > [data-icon] { inline-size: 2rem; block-size: 2rem; color: var(--warp-color-accent-text); }
+
+.system-page { display: grid; place-items: center; min-block-size: 100dvh; background: var(--warp-color-page); }

package/templates/todo/files/weft.config.ts

@@ -0,0 +1,30 @@
+import { defineConfig } from '@weft-js/core/config'
+import { warp } from '@weft-js/warp/plugin'
+
+export default defineConfig({
+  site: {
+    name: 'Daybook',
+    locale: 'en_US',
+    title: '%s · Daybook',
+    description: 'Daybook is a plain, private list of what you mean to get done.',
+    head: '<link rel="icon" href="/favicon.svg" type="image/svg+xml">',
+  },
+  plugins: [
+    warp({
+      seed: { accent: '#1f6f5c' },
+      dials: { expression: 'quiet', density: 'cozy' },
+      radius: 'sharp',
+      fields: 'classic',
+      fonts: {
+        display: '"Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif',
+        body: 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif',
+      },
+      tokens: {
+        '--warp-color-page': 'light-dark(#f2f4ef, #121815)',
+        '--warp-color-surface': 'light-dark(#f9faf7, #18201c)',
+        '--warp-color-surface-raised': 'light-dark(#fcfdfb, #1a221f)',
+        '--warp-color-surface-sunken': 'light-dark(#eef1eb, #0e1311)',
+      },
+    }),
+  ],
+})

package/templates/todo/template.json

@@ -0,0 +1,18 @@
+{
+  "requires": { "db": "postgres", "auth": true },
+  "pages": ["/", "/login", "/signup", "/todos"],
+  "dependencies": { "@weft-js/warp-icons": "0.0.0" },
+  "warp": {
+    "seed": { "accent": "#1f6f5c" },
+    "dials": { "expression": "quiet", "density": "cozy" },
+    "radius": "sharp",
+    "fields": "classic",
+    "fonts": { "display": "\"Iowan Old Style\", \"Palatino Linotype\", Palatino, Georgia, serif", "body": "ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif" },
+    "tokens": {
+      "--warp-color-page": "light-dark(#f2f4ef, #121815)",
+      "--warp-color-surface": "light-dark(#f9faf7, #18201c)",
+      "--warp-color-surface-raised": "light-dark(#fcfdfb, #1a221f)",
+      "--warp-color-surface-sunken": "light-dark(#eef1eb, #0e1311)"
+    }
+  }
+}