create-hyper-effect 0.0.0-stage → 0.1.0-alpha.0

package/template/src/ui/card.ts

@@ -0,0 +1,102 @@
+import type { Html, HtmlBuilder } from 'foldkit/html'
+
+import { cn } from '@/lib/utils'
+
+/* Ported from shadcn/ui card.tsx. Class strings copied verbatim, including the
+   data-slot attributes shadcn uses for structural selectors
+   (has-data-[slot=card-action]). Card has no behavior, so there is no foldkit
+   UI primitive underneath — these are plain view functions. */
+
+type Slot = Readonly<{
+  class?: string
+  children: ReadonlyArray<Html | string>
+}>
+
+export type CardProps = Slot &
+  Readonly<{
+    id?: string
+    element?: 'div' | 'section' | 'article'
+    size?: 'default' | 'sm'
+  }>
+
+const slotDiv =
+  (slot: string, baseClass: string) =>
+  <Msg>(props: Slot, h: HtmlBuilder<Msg>): Html => {
+    return h.div(
+      [h.DataAttribute('slot', slot), h.Class(cn(baseClass, props.class))],
+      [...props.children],
+    )
+  }
+
+export const card = <Msg>(props: CardProps, h: HtmlBuilder<Msg>): Html => {
+  const attributes = [
+    ...(props.id === undefined ? [] : [h.Id(props.id)]),
+    h.DataAttribute('slot', 'card'),
+    h.DataAttribute('size', props.size ?? 'default'),
+    h.Class(
+      cn(
+        'group/card bg-card text-card-foreground flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl border py-(--card-spacing) text-sm shadow-sm [--card-spacing:--spacing(6)] has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(4)] *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl',
+        props.class,
+      ),
+    ),
+  ]
+  const children = [...props.children]
+
+  switch (props.element ?? 'div') {
+    case 'section':
+      return h.section(attributes, children)
+    case 'article':
+      return h.article(attributes, children)
+    default:
+      return h.div(attributes, children)
+  }
+}
+
+export const cardHeader = slotDiv(
+  'card-header',
+  '@container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)',
+)
+
+export type CardTitleProps = Slot & Readonly<{ element?: 'h2' | 'h3' | 'h4' }>
+export const cardTitle = <Msg>(
+  props: CardTitleProps,
+  h: HtmlBuilder<Msg>,
+): Html => {
+  const attributes = [
+    h.DataAttribute('slot', 'card-title'),
+    h.Class(
+      cn(
+        'text-base leading-normal font-medium group-data-[size=sm]/card:text-sm',
+        props.class,
+      ),
+    ),
+  ]
+  switch (props.element ?? 'h3') {
+    case 'h2':
+      return h.h2(attributes, [...props.children])
+    case 'h4':
+      return h.h4(attributes, [...props.children])
+    default:
+      return h.h3(attributes, [...props.children])
+  }
+}
+
+export const cardDescription = slotDiv(
+  'card-description',
+  'text-muted-foreground text-sm',
+)
+
+export const cardAction = slotDiv(
+  'card-action',
+  'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
+)
+
+export const cardContent = slotDiv(
+  'card-content',
+  'flex flex-col gap-3 px-(--card-spacing)',
+)
+
+export const cardFooter = slotDiv(
+  'card-footer',
+  'flex items-center rounded-b-xl px-(--card-spacing) [.border-t]:pt-(--card-spacing)',
+)

package/template/src/ui/input.ts

@@ -0,0 +1,38 @@
+import type { Html, HtmlBuilder } from 'foldkit/html'
+
+import { type InputBehaviorProps, renderInput } from '@/lib/input'
+import { cn } from '@/lib/utils'
+
+/* Ported from shadcn/ui input.tsx + label.tsx. Class strings verbatim — the
+   foldkit Input primitive sets the native disabled attribute as well as
+   data-disabled, so shadcn's `disabled:` variants work unchanged. The primitive
+   also wires label/description ids for free via its attribute groups. */
+
+const INPUT_CLASS =
+  'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-8 w-full min-w-0 rounded-md border bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive'
+
+const LABEL_CLASS =
+  'flex items-center gap-2 text-sm leading-none font-medium select-none'
+
+const DESCRIPTION_CLASS = 'text-muted-foreground text-sm'
+
+export type InputProps<Msg> = InputBehaviorProps<Msg> &
+  Readonly<{
+    class?: string
+  }>
+
+export const input = <Msg>(
+  props: InputProps<Msg>,
+  h: HtmlBuilder<Msg>,
+): Html => {
+  return renderInput(
+    props,
+    {
+      field: [h.Class('grid gap-2')],
+      label: [h.Class(LABEL_CLASS)],
+      input: [h.Class(cn(INPUT_CLASS, props.class))],
+      description: [h.Class(DESCRIPTION_CLASS)],
+    },
+    h,
+  )
+}

package/template/test/tasks.test.ts

@@ -0,0 +1,89 @@
+import { assert, describe, it } from '@effect/vitest'
+import { Story } from 'foldkit/test'
+
+import { openPage, openStream, postEvent, readUntil, serve, token } from '@hyper-effect/core/testing'
+
+import { USER_COOKIE_NAME, cookieValue } from '@/app/auth'
+import * as TaskPage from '@/app/tasks/page'
+import { Tasks } from '@/app/tasks/store'
+
+/* Two kinds of tests:
+   - update is a pure Foldkit function: Foldkit's Story runs Messages through
+     it and resolves Commands by hand.
+   - The page over HTTP, as a browser drives it: @hyper-effect/core/testing
+     serves the program with its services and posts events. */
+
+const model: TaskPage.Model = {
+  user: 'ada',
+  tasks: [],
+  filter: 'all',
+  draft: '',
+  draftError: null,
+  isAdding: false,
+  notice: null,
+}
+
+describe('tasks: update (Story)', () => {
+  it('refuses an empty title and adds a valid one', () => {
+    Story.story(
+      TaskPage.update,
+      Story.given({ ...model, draft: '   ' }),
+      Story.message(TaskPage.Message.SubmittedDraft()),
+      Story.model(next => assert.strictEqual(next.draftError, 'Describe the task.')),
+      Story.message(TaskPage.Message.ChangedDraft({ title: '  Water the plants ' })),
+      Story.message(TaskPage.Message.SubmittedDraft()),
+      Story.model(next => {
+        assert.isNull(next.draftError)
+        assert.isTrue(next.isAdding)
+      }),
+      Story.Command.resolve(TaskPage.AddTask, TaskPage.Message.SucceededAdd()),
+      Story.model(next => {
+        assert.strictEqual(next.draft, '')
+        assert.isFalse(next.isAdding)
+      }),
+    )
+  })
+
+  it('shows why a change failed', () => {
+    Story.story(
+      TaskPage.update,
+      Story.given(model),
+      Story.message(TaskPage.Message.ClickedToggle({ id: 'gone' })),
+      Story.Command.resolve(TaskPage.ToggleTask, TaskPage.Message.FailedChange({ reason: 'That task was just deleted.' })),
+      Story.model(next => assert.strictEqual(next.notice, 'That task was just deleted.')),
+    )
+  })
+})
+
+describe('tasks: the page over HTTP', () => {
+  const cookie = `${USER_COOKIE_NAME}=${cookieValue('ada')}`
+
+  it('sends a signed-out visitor to sign in', async () => {
+    const server = serve(TaskPage.program, {}, undefined, Tasks.layer)
+    try {
+      const response = await server.handler(new Request('http://localhost/'))
+      assert.strictEqual(response.status, 303)
+      assert.strictEqual(response.headers.get('location'), '/login?next=%2F')
+    } finally {
+      await server.dispose()
+    }
+  })
+
+  it('adds a task typed into the form', async () => {
+    const server = serve(TaskPage.program, {}, undefined, Tasks.layer)
+    try {
+      const page = await openPage(server.handler, '/', cookie)
+      assert.include(page.html, 'Read the README')
+      // The input is client-owned: what the user types arrives through its
+      // handler, named in the page.
+      const handler = page.html.match(/data-hyper-input="([^"]+)"[^>]*id="task-title"/)?.[1]
+      assert.isDefined(handler)
+      assert.strictEqual((await postEvent(server.handler, page, { h: handler, v: 'Water the plants', q: 1 })).status, 204)
+      assert.strictEqual((await postEvent(server.handler, page, { m: token({ _tag: 'SubmittedDraft' }), q: 2 })).status, 204)
+      const stream = await readUntil(await openStream(server.handler, page), 'Water the plants')
+      assert.include(stream, 'Water the plants')
+    } finally {
+      await server.dispose()
+    }
+  })
+})

package/template/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM"],
+    "moduleResolution": "bundler",
+    "types": ["node"],
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "allowImportingTsExtensions": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src/**/*", "test/**/*", "vitest.config.ts"]
+}

package/template/vitest.config.ts

@@ -0,0 +1,12 @@
+import { fileURLToPath } from 'node:url'
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  resolve: {
+    alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) },
+  },
+  test: {
+    name: '{{name}}',
+    include: ['test/**/*.test.ts'],
+  },
+})