@weft-js/create 0.1.1 → 0.1.2

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

@@ -0,0 +1,462 @@
+{
+  "id": "9dc5327c-fae6-40d0-8aff-8ef8bd46fd13",
+  "prevId": "00000000-0000-0000-0000-000000000000",
+  "version": "7",
+  "dialect": "postgresql",
+  "tables": {
+    "public.todos": {
+      "name": "todos",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "title": {
+          "name": "title",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "done": {
+          "name": "done",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {
+        "todos_user": {
+          "name": "todos_user",
+          "columns": [
+            {
+              "expression": "user_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            },
+            {
+              "expression": "created_at",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            },
+            {
+              "expression": "id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "todos_user_id_user_id_fk": {
+          "name": "todos_user_id_user_id_fk",
+          "tableFrom": "todos",
+          "tableTo": "user",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.account": {
+      "name": "account",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "accountId": {
+          "name": "accountId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "providerId": {
+          "name": "providerId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "userId": {
+          "name": "userId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "accessToken": {
+          "name": "accessToken",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "refreshToken": {
+          "name": "refreshToken",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "idToken": {
+          "name": "idToken",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "accessTokenExpiresAt": {
+          "name": "accessTokenExpiresAt",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "refreshTokenExpiresAt": {
+          "name": "refreshTokenExpiresAt",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "scope": {
+          "name": "scope",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "password": {
+          "name": "password",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "createdAt": {
+          "name": "createdAt",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "updatedAt": {
+          "name": "updatedAt",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "account_userId_user_id_fk": {
+          "name": "account_userId_user_id_fk",
+          "tableFrom": "account",
+          "tableTo": "user",
+          "columnsFrom": [
+            "userId"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.jwks": {
+      "name": "jwks",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "publicKey": {
+          "name": "publicKey",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "privateKey": {
+          "name": "privateKey",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "createdAt": {
+          "name": "createdAt",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "expiresAt": {
+          "name": "expiresAt",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "alg": {
+          "name": "alg",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "crv": {
+          "name": "crv",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.session": {
+      "name": "session",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "expiresAt": {
+          "name": "expiresAt",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "token": {
+          "name": "token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "createdAt": {
+          "name": "createdAt",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "updatedAt": {
+          "name": "updatedAt",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "ipAddress": {
+          "name": "ipAddress",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "userAgent": {
+          "name": "userAgent",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "userId": {
+          "name": "userId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "session_userId_user_id_fk": {
+          "name": "session_userId_user_id_fk",
+          "tableFrom": "session",
+          "tableTo": "user",
+          "columnsFrom": [
+            "userId"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "session_token_unique": {
+          "name": "session_token_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "token"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.user": {
+      "name": "user",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "email": {
+          "name": "email",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "emailVerified": {
+          "name": "emailVerified",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "image": {
+          "name": "image",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "createdAt": {
+          "name": "createdAt",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "updatedAt": {
+          "name": "updatedAt",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "user_email_unique": {
+          "name": "user_email_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "email"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.verification": {
+      "name": "verification",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "identifier": {
+          "name": "identifier",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "value": {
+          "name": "value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "expiresAt": {
+          "name": "expiresAt",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "createdAt": {
+          "name": "createdAt",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "updatedAt": {
+          "name": "updatedAt",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    }
+  },
+  "enums": {},
+  "schemas": {},
+  "sequences": {},
+  "roles": {},
+  "policies": {},
+  "views": {},
+  "_meta": {
+    "columns": {},
+    "schemas": {},
+    "tables": {}
+  }
+}

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

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

package/templates/todo/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" fill="#1f6f5c"/><path d="M8 17l5.5 5.5L24 10" fill="none" stroke="#fff" stroke-width="3.5"/></svg>

package/templates/todo/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="Daybook"
+      logo={<Logo />}
+      quote="A short list, kept honestly, beats a long one kept in your head."
+    >
+      <Stack gap="group">
+        <span class="auth-mark">
+          <Logo /> Daybook
+        </span>
+        <Stack gap="tight">
+          <Heading level={1} role="title">
+            {title}
+          </Heading>
+          <Text subtle>{lede}</Text>
+        </Stack>
+        {children}
+      </Stack>
+    </AuthScreen>
+  )
+}

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

@@ -0,0 +1,14 @@
+/** Daybook's mark: a tick on a ruled square. */
+export function Logo() {
+  return (
+    <svg class="logo" viewBox="0 0 32 32" aria-hidden="true">
+      <rect width="32" height="32" fill="var(--warp-color-accent-solid)" />
+      <path
+        d="M8 17l5.5 5.5L24 10"
+        fill="none"
+        stroke="var(--warp-color-accent-on-solid)"
+        stroke-width="3.5"
+      />
+    </svg>
+  )
+}

package/templates/todo/files/src/components/NewTodo.tsx

@@ -0,0 +1,27 @@
+import { Form, type FormApi } from '@weft-js/start'
+import { Alert, Button, Input } from '@weft-js/warp'
+import { state } from '@weft-js/core'
+import { addTodo } from '#/server/todos'
+
+export function NewTodo() {
+  const id = state(crypto.randomUUID())
+  return (
+    <Form of={addTodo} class="new-todo" onSuccess={() => (id.value = crypto.randomUUID())}>
+      {(form: FormApi) => (
+        <>
+          <input type="hidden" name="id" value={id.value} />
+          <div class="new-todo-row">
+            <Input label="New todo" autocomplete="off" required {...form.field('title', 'text')} />
+            <Button type="submit">Add</Button>
+          </div>
+          <form.Error name="title" class="form-error" />
+          {form.message.value && (
+            <Alert tone="critical" title="That wasn't saved" live>
+              Your todo is still in the box. Try adding it again in a moment.
+            </Alert>
+          )}
+        </>
+      )}
+    </Form>
+  )
+}

package/templates/todo/files/src/components/TodoList.tsx

@@ -0,0 +1,101 @@
+import { CheckCircleIcon, InboxIcon, XIcon } from '@weft-js/warp-icons'
+import { Button, Checkbox, Heading, Progress, Skeleton, Stack, Text, toast } from '@weft-js/warp'
+import { derived } from '@weft-js/core'
+import type { View } from '#/lib/views'
+import { deleteTodo, listTodos, toggleTodo } from '#/server/todos'
+
+const unsaved = () =>
+  toast.show({
+    tone: 'critical',
+    title: "That didn't save",
+    description: 'Your list is back as it was. Try again in a moment.',
+  })
+
+const blank = {
+  all: {
+    icon: InboxIcon,
+    title: 'Nothing here yet',
+    body: 'Add the first thing on your mind above.',
+  },
+  active: {
+    icon: CheckCircleIcon,
+    title: 'All caught up',
+    body: 'Nothing left to do. Enjoy it, or add something new.',
+  },
+  done: {
+    icon: InboxIcon,
+    title: 'Nothing finished yet',
+    body: 'Tick something off and it will land here.',
+  },
+}
+
+function TodoRow({ todo }: { todo: { id: string; title: string; done: boolean } }) {
+  return (
+    <li class="todo">
+      <Checkbox
+        checked={todo.done}
+        onChange={(e: Event) =>
+          toggleTodo({ id: todo.id, done: (e.currentTarget as HTMLInputElement).checked }).catch(
+            unsaved,
+          )
+        }
+      >
+        {todo.title}
+      </Checkbox>
+      <Button
+        emphasis="ghost"
+        tone="neutral"
+        size="sm"
+        icon={XIcon}
+        label={`Delete ${todo.title}`}
+        onClick={() => deleteTodo({ id: todo.id }).catch(unsaved)}
+      />
+    </li>
+  )
+}
+
+export function TodoList({ view }: { view: View }) {
+  const list = listTodos(() => ({ view }))
+  const shown = derived(() => list.value?.rows ?? [])
+  const left = derived(() => list.value?.left ?? 0)
+  const empty = derived(() => blank[view])
+
+  // Another tab, or another device, may have changed the list while this one was in the background.
+  return (
+    <Stack gap="group">
+      <div class="tally">
+        <Text>{left.value} left</Text>
+        {view === 'all' && shown.value.length > 0 && (
+          <Progress
+            label="Done so far"
+            value={((shown.value.length - left.value) / shown.value.length) * 100}
+          />
+        )}
+      </div>
+      {shown.value.length > 0 ? (
+        <ul class="todos" aria-label="Todos">
+          {shown.value.map((todo) => (
+            <TodoRow key={todo.id} todo={todo} />
+          ))}
+        </ul>
+      ) : (
+        <div class="blank">
+          <empty.value.icon />
+          <Heading level={2}>{empty.value.title}</Heading>
+          <Text subtle>{empty.value.body}</Text>
+        </div>
+      )}
+    </Stack>
+  )
+}
+
+export function TodoListLoading() {
+  return (
+    <Stack gap="group" aria-busy="true" aria-label="Loading your list">
+      <Skeleton width="5rem" />
+      <div class="todos">
+        <Skeleton lines={6} height="1.5rem" />
+      </div>
+    </Stack>
+  )
+}

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

@@ -0,0 +1,18 @@
+import { boolean, index, pgTable, text, timestamp, uuid, varchar } from 'drizzle-orm/pg-core'
+import { user } from './auth'
+
+export * from './auth'
+
+export const todos = pgTable(
+  'todos',
+  {
+    id: uuid('id').primaryKey().defaultRandom(),
+    userId: varchar('user_id', { length: 255 })
+      .notNull()
+      .references(() => user.id, { onDelete: 'cascade' }),
+    title: text('title').notNull(),
+    done: boolean('done').notNull().default(false),
+    createdAt: timestamp('created_at', { withTimezone: true }).notNull().defaultNow(),
+  },
+  (table) => [index('todos_user').on(table.userId, table.createdAt, table.id)],
+)

package/templates/todo/files/src/lib/views.ts

@@ -0,0 +1,13 @@
+export const views = {
+  all: { label: 'All', title: 'Everything', href: '/todos' },
+  active: { label: 'Active', title: 'Still to do', href: '/todos?filter=active' },
+  done: { label: 'Done', title: 'Finished', href: '/todos?filter=done' },
+}
+
+export type View = keyof typeof views
+export const viewNames = ['all', 'active', 'done'] as const
+
+export const viewOf = (url: string): View => {
+  const filter = new URL(url).searchParams.get('filter')
+  return filter === 'active' || filter === 'done' ? filter : 'all'
+}