create-foldkit-app 0.32.1 → 0.33.0

package/dist/templates/examples/job-application/src/step/coverLetter/story.test.ts

@@ -0,0 +1,19 @@
+import { given, message, model, story } from 'foldkit/story'
+import { describe, expect, test } from 'vitest'
+
+import { Message, init, update } from './coverLetter'
+
+describe('coverLetter', () => {
+  test('UpdatedContent replaces the letter text', () => {
+    story(
+      update,
+      given(init()),
+      message(
+        Message.UpdatedContent({ value: 'I love the Elm Architecture.' }),
+      ),
+      model(model => {
+        expect(model.content).toBe('I love the Elm Architecture.')
+      }),
+    )
+  })
+})

package/dist/templates/examples/job-application/src/step/education/{entry.ts → entry/entry.ts}

@@ -13,7 +13,7 @@ import { evo } from 'foldkit/struct'
 
 import { Listbox } from '@foldkit/ui'
 
-import { revealFieldErrors } from '../validation'
+import { revealFieldErrors } from '../../validation'
 
 // FIELD VALIDATION
 
@@ -46,7 +46,7 @@ export const Model = Schema.Struct({
 })
 export type Model = typeof Model.Type
 
-const GraduationYearListbox = Listbox.create<string>()
+export const GraduationYearListbox = Listbox.create<string>()
 
 // MESSAGE
 

package/dist/templates/examples/job-application/src/step/education/entry/index.ts

@@ -0,0 +1,11 @@
+export {
+  Model,
+  Message,
+  OutMessage,
+  init,
+  update,
+  hasErrors,
+  isComplete,
+  revealErrors,
+} from './entry'
+export { type ViewInputs, view } from './view'

package/dist/templates/examples/job-application/src/step/education/entry/story.test.ts

@@ -0,0 +1,39 @@
+import { expectOutMessage, given, message, model, story } from 'foldkit/story'
+import { describe, expect, test } from 'vitest'
+
+import { Message, OutMessage, init, update } from './entry'
+
+describe('education entry', () => {
+  test('UpdatedSchool stores a valid school', () => {
+    story(
+      update,
+      given(init('entry-1')),
+      message(Message.UpdatedSchool({ value: 'MIT' })),
+      model(model => {
+        expect(model.school.value).toBe('MIT')
+        expect(model.school._tag).toBe('Valid')
+      }),
+    )
+  })
+
+  test('clearing school after a value makes the field Invalid', () => {
+    story(
+      update,
+      given(init('entry-1')),
+      message(Message.UpdatedSchool({ value: 'MIT' })),
+      message(Message.UpdatedSchool({ value: '' })),
+      model(model => {
+        expect(model.school._tag).toBe('Invalid')
+      }),
+    )
+  })
+
+  test('ClickedRemoveSelf emits Removed', () => {
+    story(
+      update,
+      given(init('entry-1')),
+      message(Message.ClickedRemoveSelf()),
+      expectOutMessage(OutMessage.Removed()),
+    )
+  })
+})

package/dist/templates/examples/job-application/src/step/education/entry/view.ts

@@ -0,0 +1,160 @@
+import clsx from 'clsx'
+import { Array, Option } from 'effect'
+import { Submodel } from 'foldkit'
+import { type CalendarDate } from 'foldkit/calendar'
+import type { Html } from 'foldkit/html'
+
+import { Button } from '@foldkit/ui'
+
+import { Field, Icon } from '../../../view'
+import { GraduationYearListbox, Message, type Model } from './entry'
+
+const GRADUATION_YEAR_WINDOW_SIZE = 30
+const GRADUATION_YEAR_FORWARD_OFFSET = 6
+
+const graduationYears = (today: CalendarDate): ReadonlyArray<string> =>
+  Array.makeBy(GRADUATION_YEAR_WINDOW_SIZE, index =>
+    String(today.year + GRADUATION_YEAR_FORWARD_OFFSET - index),
+  )
+
+export type ViewInputs = Readonly<{
+  today: CalendarDate
+}>
+
+export const view = Submodel.defineView<Model, Message, ViewInputs>(
+  (model, viewInputs, h): Html => {
+    const { today } = viewInputs
+
+    const showGraduationYear = !model.isCurrentlyEnrolled
+
+    const graduationYearField = h.keyed('div')(
+      `${model.id}-graduation-year`,
+      [h.Class('space-y-1')],
+      [
+        h.label(
+          [h.Class('block text-sm font-medium text-gray-700')],
+          ['Graduation Year'],
+        ),
+        h.submodel({
+          slotId: model.graduationYearListbox.id,
+          model: model.graduationYearListbox,
+          view: GraduationYearListbox.view,
+          viewInputs: {
+            items: graduationYears(today),
+            maybeSelectedValue: model.maybeGraduationYear,
+            buttonContent: h.div(
+              [h.Class('flex w-full items-center justify-between gap-2')],
+              [
+                Option.match(model.maybeGraduationYear, {
+                  onNone: () =>
+                    h.span([h.Class('text-gray-400')], ['Select year']),
+                  onSome: graduationYear => h.span([], [graduationYear]),
+                }),
+                h.span(
+                  [h.Class('text-gray-400 shrink-0')],
+                  [Icon.chevronDown()],
+                ),
+              ],
+            ),
+            buttonClassName:
+              'w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-left cursor-pointer focus:outline-none focus:ring-2 focus:ring-indigo-500',
+            itemsClassName:
+              'rounded-lg border border-gray-200 bg-white shadow-lg py-1 max-h-64 overflow-y-auto w-(--button-width)',
+            itemToConfig: (year, { isActive, isSelected }) => ({
+              className: clsx(
+                'flex items-center gap-2 px-4 py-2 text-sm cursor-pointer',
+                isActive && 'bg-gray-50',
+                isSelected && 'text-indigo-700 font-semibold',
+              ),
+              content: h.div(
+                [h.Class('flex items-center gap-2 w-full')],
+                [
+                  isSelected ? h.span([], ['✓']) : h.span([h.Class('w-4')]),
+                  h.span([], [year]),
+                ],
+              ),
+            }),
+            backdropClassName: 'fixed inset-0',
+            anchor: { placement: 'bottom-start', gap: 4, padding: 8 },
+          },
+          toParentMessage: message =>
+            Message.GotGraduationYearListboxMessage({ message }),
+        }),
+      ],
+    )
+
+    return h.keyed('div')(
+      model.id,
+      [h.Class('py-6 space-y-4 first:pt-0')],
+      [
+        h.div(
+          [h.Class('grid grid-cols-2 gap-3')],
+          [
+            Field.input(
+              {
+                id: `${model.id}-school`,
+                label: 'School',
+                field: model.school,
+                onInput: value => Message.UpdatedSchool({ value }),
+                placeholder: 'e.g. MIT',
+              },
+              h,
+            ),
+            Field.input(
+              {
+                id: `${model.id}-degree`,
+                label: 'Degree',
+                field: model.degree,
+                onInput: value => Message.UpdatedDegree({ value }),
+                placeholder: "e.g. Bachelor's, Master's",
+              },
+              h,
+            ),
+          ],
+        ),
+        Field.input(
+          {
+            id: `${model.id}-field`,
+            label: 'Field of Study',
+            field: model.fieldOfStudy,
+            onInput: value => Message.UpdatedFieldOfStudy({ value }),
+            placeholder: 'e.g. Computer Science',
+          },
+          h,
+        ),
+        Field.checkbox(
+          {
+            id: `${model.id}-enrolled`,
+            label: 'I’m currently enrolled',
+            isChecked: model.isCurrentlyEnrolled,
+            onToggle: isChecked =>
+              Message.ToggledCurrentlyEnrolled({ isChecked }),
+          },
+          h,
+        ),
+        ...(showGraduationYear ? [graduationYearField] : []),
+        h.div(
+          [h.Class('flex justify-end')],
+          [
+            Button.view(
+              {
+                onClick: Message.ClickedRemoveSelf(),
+                toView: attributes =>
+                  h.button(
+                    [
+                      ...attributes.button,
+                      h.Class(
+                        'text-sm text-gray-400 hover:text-red-500 transition cursor-pointer',
+                      ),
+                    ],
+                    ['Remove education'],
+                  ),
+              },
+              h,
+            ),
+          ],
+        ),
+      ],
+    )
+  },
+)

package/dist/templates/examples/job-application/src/step/education/index.ts

@@ -1,2 +1,12 @@
-export * from './education'
+export {
+  Model,
+  Message,
+  init,
+  update,
+  GenerateEntryId,
+  hasErrors,
+  isComplete,
+  revealErrors,
+} from './education'
 export * as Entry from './entry'
+export { view } from './view'

package/dist/templates/examples/job-application/src/step/education/scene.test.ts

@@ -0,0 +1,20 @@
+import { Calendar } from 'foldkit'
+import { expect, given, label, role, scene } from 'foldkit/scene'
+import { describe, test } from 'vitest'
+
+import { init, update } from './education'
+import { view } from './view'
+
+const today = Calendar.make(2026, 4, 16)
+
+describe('education', () => {
+  test('renders the first school fields and the add control', () => {
+    scene(
+      { update, view },
+      given(init(today, 'education-entry-1')),
+      expect(label('School')).toExist(),
+      expect(label('Degree')).toExist(),
+      expect(role('button', { name: '+ Add Education' })).toExist(),
+    )
+  })
+})

package/dist/templates/examples/job-application/src/step/education/story.test.ts

@@ -0,0 +1,87 @@
+import { Array, Option, pipe } from 'effect'
+import { Calendar } from 'foldkit'
+import { Command, given, message, model, story } from 'foldkit/story'
+import { describe, expect, test } from 'vitest'
+
+import { GenerateEntryId, Message, init, update } from './education'
+import * as Entry from './entry'
+
+const today = Calendar.make(2026, 4, 16)
+const givenInitial = given(init(today, 'education-entry-1'))
+
+describe('education', () => {
+  test('ClickedAddEntry generates an id and appends an entry', () => {
+    story(
+      update,
+      givenInitial,
+      message(Message.ClickedAddEntry()),
+      Command.expectHas(GenerateEntryId),
+      Command.resolve(
+        GenerateEntryId,
+        Message.SucceededGenerateEntryId({ entryId: 'test-edu-1' }),
+      ),
+      model(model => {
+        expect(model.entries).toHaveLength(2)
+      }),
+    )
+  })
+
+  test('FailedGenerateEntryId leaves the entries unchanged', () => {
+    story(
+      update,
+      givenInitial,
+      message(Message.FailedGenerateEntryId()),
+      Command.expectNone(),
+      model(model => {
+        expect(model).toEqual(init(today, 'education-entry-1'))
+      }),
+    )
+  })
+
+  test('an entry OutMessage.Removed removes that entry', () => {
+    const firstEntry = Option.getOrThrow(
+      Array.head(init(today, 'education-entry-1').entries),
+    )
+
+    story(
+      update,
+      givenInitial,
+      message(
+        Message.GotEntryMessage({
+          entryId: firstEntry.id,
+          message: Entry.Message.ClickedRemoveSelf(),
+        }),
+      ),
+      model(model => {
+        expect(model.entries).toHaveLength(0)
+      }),
+    )
+  })
+
+  test('GotEntryMessage folds a school update into the matching entry', () => {
+    const firstEntry = Option.getOrThrow(
+      Array.head(init(today, 'education-entry-1').entries),
+    )
+
+    story(
+      update,
+      givenInitial,
+      message(
+        Message.GotEntryMessage({
+          entryId: firstEntry.id,
+          message: Entry.Message.UpdatedSchool({ value: 'MIT' }),
+        }),
+      ),
+      model(model => {
+        expect(
+          pipe(
+            model.entries,
+            Array.head,
+            Option.map(entry => entry.school.value),
+            Option.getOrThrow,
+          ),
+        ).toBe('MIT')
+      }),
+    )
+  })
+})

package/dist/templates/examples/job-application/src/{view/education.ts → step/education/view.ts}

@@ -4,30 +4,26 @@ import { type Html, type HtmlBuilder, createKeyedLazy } from 'foldkit/html'
 
 import { Button } from '@foldkit/ui'
 
-import { Education } from '../step'
-import { Message } from '../step/education'
-import { educationEntryView } from './educationEntry'
+import { Message, type Model } from './education'
+import * as Entry from './entry'
 
 const lazyEntry = createKeyedLazy()
 
 const entryView = (
-  entry: Education.Entry.Model,
+  entry: Entry.Model,
   today: CalendarDate,
-  h: HtmlBuilder<Education.Message>,
+  h: HtmlBuilder<Message>,
 ): Html =>
   h.submodel({
     slotId: entry.id,
     model: entry,
-    view: educationEntryView,
+    view: Entry.view,
     viewInputs: { today },
     toParentMessage: message =>
       Message.GotEntryMessage({ entryId: entry.id, message }),
   })
 
-export const educationView = Submodel.defineView<
-  Education.Model,
-  Education.Message
->((model, h): Html =>
+export const view = Submodel.defineView<Model, Message>((model, h): Html =>
   h.div(
     [h.Class('space-y-6')],
     [

package/dist/templates/examples/job-application/src/step/personalInfo/index.ts

@@ -0,0 +1,11 @@
+export {
+  Model,
+  Message,
+  init,
+  update,
+  ValidateEmailAsync,
+  hasErrors,
+  isComplete,
+  revealErrors,
+} from './personalInfo'
+export { view } from './view'

package/dist/templates/examples/job-application/src/step/{personalInfo.ts → personalInfo/personalInfo.ts}

@@ -18,11 +18,11 @@ import { evo } from 'foldkit/struct'
 
 import { DatePicker, Listbox } from '@foldkit/ui'
 
-import { revealFieldErrors } from './validation'
+import { revealFieldErrors } from '../validation'
 
 // MODEL
 
-const PronounsListbox = Listbox.create<string>()
+export const PronounsListbox = Listbox.create<string>()
 
 export const Model = Schema.Struct({
   firstName: Field(Schema.String),

package/dist/templates/examples/job-application/src/step/personalInfo/scene.test.ts

@@ -0,0 +1,38 @@
+import { Calendar } from 'foldkit'
+import { expect, given, label, scene, text, type } from 'foldkit/scene'
+import { describe, test } from 'vitest'
+
+import { init, update } from './personalInfo'
+import { view } from './view'
+
+const today = Calendar.make(2026, 4, 16)
+
+describe('personalInfo', () => {
+  test('renders the name and email fields', () => {
+    scene(
+      { update, view },
+      given(init(today)),
+      expect(label('First Name')).toExist(),
+      expect(label('Last Name')).toExist(),
+      expect(label('Email')).toExist(),
+    )
+  })
+
+  test('a valid first name shows a checkmark', () => {
+    scene(
+      { update, view },
+      given(init(today)),
+      type(label('First Name'), 'Jane'),
+      expect(text('✓')).toExist(),
+    )
+  })
+
+  test('a short first name shows the length error', () => {
+    scene(
+      { update, view },
+      given(init(today)),
+      type(label('First Name'), 'J'),
+      expect(text('First name must be at least 2 characters')).toExist(),
+    )
+  })
+})

package/dist/templates/examples/job-application/src/step/personalInfo/story.test.ts

@@ -0,0 +1,87 @@
+import { Calendar } from 'foldkit'
+import { Valid, Validating } from 'foldkit/fieldValidation'
+import { Command, given, message, model, story } from 'foldkit/story'
+import { describe, expect, test } from 'vitest'
+
+import { Message, ValidateEmailAsync, init, update } from './personalInfo'
+
+const today = Calendar.make(2026, 4, 16)
+const givenInitial = given(init(today))
+
+describe('personalInfo', () => {
+  test('a valid first name is stored as Valid', () => {
+    story(
+      update,
+      givenInitial,
+      message(Message.UpdatedFirstName({ value: 'Jane' })),
+      model(model => {
+        expect(model.firstName.value).toBe('Jane')
+        expect(model.firstName._tag).toBe('Valid')
+      }),
+    )
+  })
+
+  test('a short first name is Invalid', () => {
+    story(
+      update,
+      givenInitial,
+      message(Message.UpdatedFirstName({ value: 'J' })),
+      model(model => {
+        expect(model.firstName._tag).toBe('Invalid')
+      }),
+    )
+  })
+
+  test('a well-formed email starts async uniqueness validation', () => {
+    story(
+      update,
+      givenInitial,
+      message(Message.UpdatedEmail({ value: 'jane@example.com' })),
+      Command.expectHas(ValidateEmailAsync),
+      Command.resolve(
+        ValidateEmailAsync,
+        Message.CompletedValidateEmailAsync({
+          validationId: 1,
+          field: Valid({ value: 'jane@example.com' }),
+        }),
+      ),
+      model(model => {
+        expect(model.email._tag).toBe('Valid')
+      }),
+    )
+  })
+
+  test('a malformed email fails sync validation without an async command', () => {
+    story(
+      update,
+      givenInitial,
+      message(Message.UpdatedEmail({ value: 'not-email' })),
+      Command.expectNone(),
+      model(model => {
+        expect(model.email._tag).toBe('Invalid')
+      }),
+    )
+  })
+
+  test('a stale email async result is discarded', () => {
+    story(
+      update,
+      given({
+        ...init(today),
+        email: Validating({ value: 'jane@example.com' }),
+        emailValidationId: 5,
+      }),
+      message(
+        Message.CompletedValidateEmailAsync({
+          validationId: 3,
+          field: Valid({ value: 'old@example.com' }),
+        }),
+      ),
+      model(model => {
+        expect(model.email._tag).toBe('Validating')
+        expect(model.email.value).toBe('jane@example.com')
+        expect(model.emailValidationId).toBe(5)
+      }),
+    )
+  })
+})