create-foldkit-app 0.32.1 → 0.33.0

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

@@ -4,27 +4,13 @@ import { type CalendarDate } from 'foldkit/calendar'
 import { Valid } from 'foldkit/fieldValidation'
 import { type Html, type HtmlBuilder, childAttributes } from 'foldkit/html'
 
-import { DatePicker, Listbox } from '@foldkit/ui'
+import { DatePicker as UiDatePicker } from '@foldkit/ui'
 
-import { PronounOption } from '../domain'
-import { PersonalInfo } from '../step'
-import { Message } from '../step/personalInfo'
-import {
-  backdropClassName,
-  calendarView,
-  panelClassName,
-  triggerClassName,
-  triggerContent,
-} from './datePicker'
-import { inputField } from './field'
-import { chevronDown } from './icon'
+import { PronounOption } from '../../domain'
+import { DatePicker, Field, Icon } from '../../view'
+import { Message, type Model, PronounsListbox } from './personalInfo'
 
-const PronounsListbox = Listbox.create<string>()
-
-export const personalInfoView = Submodel.defineView<
-  PersonalInfo.Model,
-  PersonalInfo.Message
->((model, h): Html => {
+export const view = Submodel.defineView<Model, Message>((model, h): Html => {
   const {
     firstName,
     lastName,
@@ -53,7 +39,7 @@ export const personalInfoView = Submodel.defineView<
       h.div(
         [h.Class('grid grid-cols-2 gap-4')],
         [
-          inputField(
+          Field.input(
             {
               id: 'first-name',
               label: 'First Name',
@@ -63,7 +49,7 @@ export const personalInfoView = Submodel.defineView<
             },
             h,
           ),
-          inputField(
+          Field.input(
             {
               id: 'last-name',
               label: 'Last Name',
@@ -75,7 +61,7 @@ export const personalInfoView = Submodel.defineView<
           ),
         ],
       ),
-      inputField(
+      Field.input(
         {
           id: 'email',
           label: 'Email',
@@ -86,7 +72,7 @@ export const personalInfoView = Submodel.defineView<
         },
         h,
       ),
-      inputField(
+      Field.input(
         {
           id: 'phone',
           label: 'Phone (optional)',
@@ -144,7 +130,10 @@ export const personalInfoView = Submodel.defineView<
                     ],
                     [selectedPronounLabel],
                   ),
-                  h.span([h.Class('text-gray-400')], [chevronDown('w-4 h-4')]),
+                  h.span(
+                    [h.Class('text-gray-400')],
+                    [Icon.chevronDown('w-4 h-4')],
+                  ),
                 ],
               ),
               buttonAttributes: childAttributes([
@@ -165,7 +154,7 @@ export const personalInfoView = Submodel.defineView<
       ),
       ...(isOtherSelected
         ? [
-            inputField(
+            Field.input(
               {
                 id: 'custom-pronouns',
                 label: 'Custom Pronouns',
@@ -177,7 +166,7 @@ export const personalInfoView = Submodel.defineView<
             ),
           ]
         : []),
-      inputField(
+      Field.input(
         {
           id: 'portfolio-url',
           label: 'Portfolio URL (optional)',
@@ -193,9 +182,9 @@ export const personalInfoView = Submodel.defineView<
 })
 
 const availableDatePickerView = (
-  model: DatePicker.Model,
+  model: UiDatePicker.Model,
   maybeSelectedDate: Option.Option<CalendarDate>,
-  h: HtmlBuilder<PersonalInfo.Message>,
+  h: HtmlBuilder<Message>,
 ): Html =>
   h.div(
     [h.Class('space-y-1')],
@@ -207,15 +196,16 @@ const availableDatePickerView = (
       h.submodel({
         slotId: model.id,
         model,
-        view: DatePicker.view,
+        view: UiDatePicker.view,
         viewInputs: {
           anchor: { placement: 'bottom-start', gap: 4, padding: 8 },
           maybeSelectedDate,
-          triggerContent: maybeDate => triggerContent(maybeDate, 'Pick a date'),
-          triggerClassName,
-          panelClassName,
-          backdropClassName,
-          toCalendarView: calendarView,
+          triggerContent: maybeDate =>
+            DatePicker.triggerContent(maybeDate, 'Pick a date'),
+          triggerClassName: DatePicker.triggerClassName,
+          panelClassName: DatePicker.panelClassName,
+          backdropClassName: DatePicker.backdropClassName,
+          toCalendarView: DatePicker.calendarView,
         },
         toParentMessage: message =>
           Message.GotAvailableDateMessage({ message }),

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

@@ -13,8 +13,8 @@ import { evo } from 'foldkit/struct'
 
 import { RadioGroup } from '@foldkit/ui'
 
-import { ProficiencyLevel } from '../../domain'
-import { revealFieldErrors } from '../validation'
+import { ProficiencyLevel } from '../../../domain'
+import { revealFieldErrors } from '../../validation'
 
 // FIELD VALIDATION
 

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

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

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

@@ -0,0 +1,27 @@
+import { expectOutMessage, given, message, model, story } from 'foldkit/story'
+import { describe, expect, test } from 'vitest'
+
+import { Message, OutMessage, init, update } from './entry'
+
+describe('skills entry', () => {
+  test('UpdatedName stores a valid skill name', () => {
+    story(
+      update,
+      given(init('entry-1')),
+      message(Message.UpdatedName({ value: 'TypeScript' })),
+      model(model => {
+        expect(model.name.value).toBe('TypeScript')
+        expect(model.name._tag).toBe('Valid')
+      }),
+    )
+  })
+
+  test('ClickedRemoveSelf emits Removed', () => {
+    story(
+      update,
+      given(init('entry-1')),
+      message(Message.ClickedRemoveSelf()),
+      expectOutMessage(OutMessage.Removed()),
+    )
+  })
+})

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

@@ -5,20 +5,17 @@ import type { Html } from 'foldkit/html'
 
 import { Button } from '@foldkit/ui'
 
-import { ProficiencyLevel } from '../domain'
-import { Skills } from '../step'
-import { inputField } from './field'
+import { ProficiencyLevel } from '../../../domain'
+import { Field } from '../../../view'
+import { Message, type Model, ProficiencyRadioGroup } from './entry'
 
-export const skillEntryView = Submodel.defineView<
-  Skills.Entry.Model,
-  Skills.Entry.Message
->((model, h): Html => {
-  const nameView = inputField(
+export const view = Submodel.defineView<Model, Message>((model, h): Html => {
+  const nameView = Field.input(
     {
       id: `${model.id}-name`,
       label: 'Skill',
       field: model.name,
-      onInput: value => Skills.Entry.Message.UpdatedName({ value }),
+      onInput: value => Message.UpdatedName({ value }),
       placeholder: 'e.g. TypeScript, React, Effect-TS',
     },
     h,
@@ -27,7 +24,7 @@ export const skillEntryView = Submodel.defineView<
   const proficiencyView = h.submodel({
     slotId: model.proficiencyRadioGroup.id,
     model: model.proficiencyRadioGroup,
-    view: Skills.Entry.ProficiencyRadioGroup.view,
+    view: ProficiencyRadioGroup.view,
     viewInputs: {
       selectedValue: Option.some(model.proficiency),
       options: ProficiencyLevel.all,
@@ -58,7 +55,7 @@ export const skillEntryView = Submodel.defineView<
         ),
     },
     toParentMessage: message =>
-      Skills.Entry.Message.GotProficiencyRadioGroupMessage({ message }),
+      Message.GotProficiencyRadioGroupMessage({ message }),
   })
 
   return h.keyed('div')(
@@ -81,7 +78,7 @@ export const skillEntryView = Submodel.defineView<
         [
           Button.view(
             {
-              onClick: Skills.Entry.Message.ClickedRemoveSelf(),
+              onClick: Message.ClickedRemoveSelf(),
               toView: attributes =>
                 h.button(
                   [

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

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

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

@@ -0,0 +1,16 @@
+import { expect, given, label, role, scene } from 'foldkit/scene'
+import { describe, test } from 'vitest'
+
+import { init, update } from './skills'
+import { view } from './view'
+
+describe('skills', () => {
+  test('renders the first skill field and the add control', () => {
+    scene(
+      { update, view },
+      given(init('skills-entry-1')),
+      expect(label('Skill')).toExist(),
+      expect(role('button', { name: '+ Add Skill' })).toExist(),
+    )
+  })
+})

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

@@ -0,0 +1,85 @@
+import { Array, Option, pipe } from 'effect'
+import { Command, given, message, model, story } from 'foldkit/story'
+import { describe, expect, test } from 'vitest'
+
+import * as Entry from './entry'
+import { GenerateEntryId, Message, init, update } from './skills'
+
+const givenInitial = given(init('skills-entry-1'))
+
+describe('skills', () => {
+  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-skill-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('skills-entry-1'))
+      }),
+    )
+  })
+
+  test('an entry OutMessage.Removed removes that entry', () => {
+    const firstEntry = Option.getOrThrow(
+      Array.head(init('skills-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 name update into the matching entry', () => {
+    const firstEntry = Option.getOrThrow(
+      Array.head(init('skills-entry-1').entries),
+    )
+
+    story(
+      update,
+      givenInitial,
+      message(
+        Message.GotEntryMessage({
+          entryId: firstEntry.id,
+          message: Entry.Message.UpdatedName({ value: 'TypeScript' }),
+        }),
+      ),
+      model(model => {
+        expect(
+          pipe(
+            model.entries,
+            Array.head,
+            Option.map(entry => entry.name.value),
+            Option.getOrThrow,
+          ),
+        ).toBe('TypeScript')
+      }),
+    )
+  })
+})

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

@@ -0,0 +1,47 @@
+import { Submodel } from 'foldkit'
+import type { Html } from 'foldkit/html'
+
+import { Button } from '@foldkit/ui'
+
+import * as Entry from './entry'
+import { Message, type Model } from './skills'
+
+export const view = Submodel.defineView<Model, Message>((model, h): Html =>
+  h.div(
+    [h.Class('space-y-6')],
+    [
+      h.p(
+        [h.Class('text-sm text-gray-500')],
+        ['Add your technical and professional skills.'],
+      ),
+      h.div(
+        [h.Class('divide-y divide-gray-200')],
+        model.entries.map(entry =>
+          h.submodel({
+            slotId: entry.id,
+            model: entry,
+            view: Entry.view,
+            toParentMessage: message =>
+              Message.GotEntryMessage({ entryId: entry.id, message }),
+          }),
+        ),
+      ),
+      Button.view(
+        {
+          onClick: Message.ClickedAddEntry(),
+          toView: attributes =>
+            h.button(
+              [
+                ...attributes.button,
+                h.Class(
+                  'w-full rounded-lg border-2 border-dashed border-gray-300 px-4 py-3 text-sm font-medium text-gray-600 hover:border-indigo-400 hover:text-indigo-600 transition cursor-pointer',
+                ),
+              ],
+              ['+ Add Skill'],
+            ),
+        },
+        h,
+      ),
+    ],
+  ),
+)

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

@@ -14,7 +14,7 @@ import { evo } from 'foldkit/struct'
 
 import { DatePicker } from '@foldkit/ui'
 
-import { revealFieldErrors } from '../validation'
+import { revealFieldErrors } from '../../validation'
 
 // FIELD VALIDATION
 

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

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

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

@@ -0,0 +1,42 @@
+import { Calendar } from 'foldkit'
+import { expectOutMessage, given, message, model, story } from 'foldkit/story'
+import { describe, expect, test } from 'vitest'
+
+import { Message, OutMessage, init, update } from './entry'
+
+const today = Calendar.make(2026, 4, 16)
+
+describe('workHistory entry', () => {
+  test('UpdatedCompany stores a valid company', () => {
+    story(
+      update,
+      given(init('entry-1', today)),
+      message(Message.UpdatedCompany({ value: 'Foldkit Inc.' })),
+      model(model => {
+        expect(model.company.value).toBe('Foldkit Inc.')
+        expect(model.company._tag).toBe('Valid')
+      }),
+    )
+  })
+
+  test('clearing company after a value makes the field Invalid', () => {
+    story(
+      update,
+      given(init('entry-1', today)),
+      message(Message.UpdatedCompany({ value: 'Foldkit Inc.' })),
+      message(Message.UpdatedCompany({ value: '' })),
+      model(model => {
+        expect(model.company._tag).toBe('Invalid')
+      }),
+    )
+  })
+
+  test('ClickedRemoveSelf emits Removed', () => {
+    story(
+      update,
+      given(init('entry-1', today)),
+      message(Message.ClickedRemoveSelf()),
+      expectOutMessage(OutMessage.Removed()),
+    )
+  })
+})

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

@@ -1,24 +1,14 @@
 import { Submodel } from 'foldkit'
 import type { Html } from 'foldkit/html'
 
-import { Button, DatePicker } from '@foldkit/ui'
+import { Button, DatePicker as UiDatePicker } from '@foldkit/ui'
 
-import { WorkHistory } from '../step'
-import {
-  backdropClassName,
-  calendarView,
-  panelClassName,
-  triggerClassName,
-  triggerContent,
-} from './datePicker'
-import { checkboxField, inputField, textareaField } from './field'
+import { DatePicker, Field } from '../../../view'
+import { Message, type Model } from './entry'
 
 const ANCHOR = { placement: 'bottom-start' as const, gap: 4, padding: 8 }
 
-export const workEntryView = Submodel.defineView<
-  WorkHistory.Entry.Model,
-  WorkHistory.Entry.Message
->((model, h): Html => {
+export const view = Submodel.defineView<Model, Message>((model, h): Html => {
   const showEndDate = !model.isCurrentlyEmployed
 
   const startDatePicker = h.div(
@@ -31,19 +21,18 @@ export const workEntryView = Submodel.defineView<
       h.submodel({
         slotId: model.startDate.id,
         model: model.startDate,
-        view: DatePicker.view,
+        view: UiDatePicker.view,
         viewInputs: {
           anchor: ANCHOR,
           maybeSelectedDate: model.maybeStartDate,
           triggerContent: maybeDate =>
-            triggerContent(maybeDate, 'Select start date'),
-          toCalendarView: calendarView,
-          triggerClassName,
-          panelClassName,
-          backdropClassName,
+            DatePicker.triggerContent(maybeDate, 'Select start date'),
+          toCalendarView: DatePicker.calendarView,
+          triggerClassName: DatePicker.triggerClassName,
+          panelClassName: DatePicker.panelClassName,
+          backdropClassName: DatePicker.backdropClassName,
         },
-        toParentMessage: message =>
-          WorkHistory.Entry.Message.GotStartDateMessage({ message }),
+        toParentMessage: message => Message.GotStartDateMessage({ message }),
       }),
     ],
   )
@@ -59,19 +48,18 @@ export const workEntryView = Submodel.defineView<
       h.submodel({
         slotId: model.endDate.id,
         model: model.endDate,
-        view: DatePicker.view,
+        view: UiDatePicker.view,
         viewInputs: {
           anchor: ANCHOR,
           maybeSelectedDate: model.maybeEndDate,
           triggerContent: maybeDate =>
-            triggerContent(maybeDate, 'Select end date'),
-          toCalendarView: calendarView,
-          triggerClassName,
-          panelClassName,
-          backdropClassName,
+            DatePicker.triggerContent(maybeDate, 'Select end date'),
+          toCalendarView: DatePicker.calendarView,
+          triggerClassName: DatePicker.triggerClassName,
+          panelClassName: DatePicker.panelClassName,
+          backdropClassName: DatePicker.backdropClassName,
         },
-        toParentMessage: message =>
-          WorkHistory.Entry.Message.GotEndDateMessage({ message }),
+        toParentMessage: message => Message.GotEndDateMessage({ message }),
       }),
     ],
   )
@@ -83,24 +71,22 @@ export const workEntryView = Submodel.defineView<
       h.div(
         [h.Class('grid grid-cols-2 gap-3')],
         [
-          inputField(
+          Field.input(
             {
               id: `${model.id}-company`,
               label: 'Company',
               field: model.company,
-              onInput: value =>
-                WorkHistory.Entry.Message.UpdatedCompany({ value }),
+              onInput: value => Message.UpdatedCompany({ value }),
               placeholder: 'e.g. Acme Corp',
             },
             h,
           ),
-          inputField(
+          Field.input(
             {
               id: `${model.id}-title`,
               label: 'Job Title',
               field: model.title,
-              onInput: value =>
-                WorkHistory.Entry.Message.UpdatedTitle({ value }),
+              onInput: value => Message.UpdatedTitle({ value }),
               placeholder: 'e.g. Senior Engineer',
             },
             h,
@@ -111,23 +97,22 @@ export const workEntryView = Submodel.defineView<
         [h.Class('grid grid-cols-2 gap-3')],
         [startDatePicker, ...(showEndDate ? [endDatePicker] : [])],
       ),
-      checkboxField(
+      Field.checkbox(
         {
           id: `${model.id}-current`,
           label: 'I currently work here',
           isChecked: model.isCurrentlyEmployed,
           onToggle: isChecked =>
-            WorkHistory.Entry.Message.ToggledCurrentlyEmployed({ isChecked }),
+            Message.ToggledCurrentlyEmployed({ isChecked }),
         },
         h,
       ),
-      textareaField(
+      Field.textarea(
         {
           id: `${model.id}-description`,
           label: 'Description',
           value: model.description,
-          onInput: value =>
-            WorkHistory.Entry.Message.UpdatedDescription({ value }),
+          onInput: value => Message.UpdatedDescription({ value }),
           rows: 3,
           placeholder: 'Describe your role and key accomplishments...',
         },
@@ -138,7 +123,7 @@ export const workEntryView = Submodel.defineView<
         [
           Button.view(
             {
-              onClick: WorkHistory.Entry.Message.ClickedRemoveSelf(),
+              onClick: Message.ClickedRemoveSelf(),
               toView: attributes =>
                 h.button(
                   [

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

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

package/dist/templates/examples/job-application/src/step/workHistory/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 { view } from './view'
+import { init, update } from './workHistory'
+
+const today = Calendar.make(2026, 4, 16)
+
+describe('workHistory', () => {
+  test('renders the first position fields and the add control', () => {
+    scene(
+      { update, view },
+      given(init(today, 'work-history-entry-1')),
+      expect(label('Company')).toExist(),
+      expect(label('Job Title')).toExist(),
+      expect(role('button', { name: '+ Add Position' })).toExist(),
+    )
+  })
+})