create-foldkit-app 0.27.3 → 0.28.0

package/dist/templates/examples/job-application/src/command.ts

@@ -0,0 +1,23 @@
+import { Duration, Effect } from 'effect'
+import { Command } from 'foldkit'
+
+import { Message } from './message'
+
+// COMMAND
+
+export const SubmitApplication = Command.define('SubmitApplication', {
+  messages: [
+    Message.SucceededSubmitApplication,
+    Message.FailedSubmitApplication,
+  ],
+  execute: Effect.gen(function* () {
+    yield* Effect.sleep(Duration.millis(1500))
+    return Message.SucceededSubmitApplication()
+  }).pipe(
+    Effect.catch(() =>
+      Effect.succeed(
+        Message.FailedSubmitApplication({ error: 'Submission failed' }),
+      ),
+    ),
+  ),
+})

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

@@ -0,0 +1,3 @@
+export * as PronounOption from './pronounOption'
+export * as ProficiencyLevel from './proficiencyLevel'
+export * as Step from './step'

package/dist/templates/examples/job-application/src/domain/proficiencyLevel.ts

@@ -0,0 +1,11 @@
+import { Schema as S } from 'effect'
+
+export const ProficiencyLevel = S.Literals([
+  'Beginner',
+  'Intermediate',
+  'Advanced',
+  'Expert',
+])
+export type ProficiencyLevel = typeof ProficiencyLevel.Type
+
+export const all: ReadonlyArray<ProficiencyLevel> = ProficiencyLevel.literals

package/dist/templates/examples/job-application/src/domain/pronounOption.ts

@@ -0,0 +1,13 @@
+import { Schema as S } from 'effect'
+
+export const PronounOption = S.Literals([
+  'He/Him',
+  'She/Her',
+  'They/Them',
+  'He/They',
+  'She/They',
+  'Other',
+])
+export type PronounOption = typeof PronounOption.Type
+
+export const all: ReadonlyArray<PronounOption> = PronounOption.literals

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

@@ -0,0 +1,28 @@
+import { Match as M, Schema as S } from 'effect'
+
+export const Step = S.Literals([
+  'PersonalInfo',
+  'WorkHistory',
+  'Education',
+  'Skills',
+  'CoverLetter',
+  'Attachments',
+  'Review',
+])
+export type Step = typeof Step.Type
+
+export const all = Step.literals
+
+export const indexOf = (step: Step): number => all.indexOf(step)
+
+export const show = (step: Step): string =>
+  M.value(step).pipe(
+    M.when('PersonalInfo', () => 'Personal Info'),
+    M.when('WorkHistory', () => 'Work History'),
+    M.when('Education', () => 'Education'),
+    M.when('Skills', () => 'Skills'),
+    M.when('CoverLetter', () => 'Cover Letter'),
+    M.when('Attachments', () => 'Attachments'),
+    M.when('Review', () => 'Review'),
+    M.exhaustive,
+  )

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

@@ -0,0 +1,17 @@
+import { Runtime } from 'foldkit'
+
+import { Flags, Message, Model, flags, init, update, view } from './main'
+
+const application = Runtime.makeApplication({
+  Model,
+  Flags,
+  init,
+  update,
+  view,
+  container: document.getElementById('root'),
+  devTools: {
+    Message,
+  },
+})
+
+Runtime.run(application, { flags })

package/dist/templates/examples/job-application/src/main.ts

@@ -0,0 +1,69 @@
+import { Crypto, Effect, Schema as S } from 'effect'
+import { Calendar, Runtime } from 'foldkit'
+
+import { BrowserCrypto } from '@effect/platform-browser'
+import { Menu, Tabs } from '@foldkit/ui'
+
+import { Message } from './message'
+import { Model, NotSubmitted } from './model'
+import {
+  Attachments,
+  CoverLetter,
+  Education,
+  PersonalInfo,
+  Skills,
+  WorkHistory,
+} from './step'
+import { update } from './update'
+import { view } from './view'
+
+// FLAGS
+
+export const Flags = S.Struct({
+  today: Calendar.CalendarDate,
+  initialWorkHistoryEntryId: S.String,
+  initialEducationEntryId: S.String,
+  initialSkillsEntryId: S.String,
+})
+export type Flags = typeof Flags.Type
+
+export const flags: Effect.Effect<Flags> = Effect.gen(function* () {
+  const today = yield* Calendar.today.local
+  const crypto = yield* Crypto.Crypto
+  const initialWorkHistoryEntryId = yield* Effect.orDie(crypto.randomUUIDv4)
+  const initialEducationEntryId = yield* Effect.orDie(crypto.randomUUIDv4)
+  const initialSkillsEntryId = yield* Effect.orDie(crypto.randomUUIDv4)
+  return {
+    today,
+    initialWorkHistoryEntryId,
+    initialEducationEntryId,
+    initialSkillsEntryId,
+  }
+}).pipe(Effect.provide(BrowserCrypto.layer))
+
+// INIT
+
+export const init: Runtime.ApplicationInit<Model, Message, Flags> = ({
+  today,
+  initialWorkHistoryEntryId,
+  initialEducationEntryId,
+  initialSkillsEntryId,
+}) => [
+  {
+    currentStep: 'PersonalInfo',
+    personalInfo: PersonalInfo.init(today),
+    workHistory: WorkHistory.init(today, initialWorkHistoryEntryId),
+    education: Education.init(today, initialEducationEntryId),
+    skills: Skills.init(initialSkillsEntryId),
+    coverLetter: CoverLetter.init(),
+    attachments: Attachments.init(),
+    isPreviewVisible: false,
+    submission: NotSubmitted(),
+    stepMenu: Menu.init({ id: 'step-menu' }),
+    stepTabs: Tabs.init({ id: 'step-tabs' }),
+    isSubmitAttempted: false,
+  },
+  [],
+]
+
+export { Message, Model, update, view }

package/dist/templates/examples/job-application/src/message.ts

@@ -0,0 +1,44 @@
+import { Schema as S } from 'effect'
+import { defineMessageUnion } from 'foldkit/message'
+
+import { Menu, Tabs } from '@foldkit/ui'
+
+import { Step } from './domain'
+import {
+  Attachments,
+  CoverLetter,
+  Education,
+  PersonalInfo,
+  Skills,
+  WorkHistory,
+} from './step'
+
+// STEP SUBMODELS
+
+// NAVIGATION
+
+// PREVIEW
+
+// SUBMISSION
+
+// UNION
+
+export const Message = defineMessageUnion({
+  GotPersonalInfoMessage: { message: PersonalInfo.Message },
+  GotWorkHistoryMessage: { message: WorkHistory.Message },
+  GotEducationMessage: { message: Education.Message },
+  GotSkillsMessage: { message: Skills.Message },
+  GotCoverLetterMessage: { message: CoverLetter.Message },
+  GotAttachmentsMessage: { message: Attachments.Message },
+  GotStepMenuMessage: { message: Menu.Message },
+  GotStepTabsMessage: { message: Tabs.Message },
+  NavigatedToStep: { step: Step.Step },
+  ClickedNext: {},
+  ClickedPrevious: {},
+  ToggledPreview: {},
+  ClickedSubmit: {},
+  SucceededSubmitApplication: {},
+  FailedSubmitApplication: { error: S.String },
+})
+
+export type Message = typeof Message.Type

package/dist/templates/examples/job-application/src/model.ts

@@ -0,0 +1,47 @@
+import { Schema as S } from 'effect'
+import { ts } from 'foldkit/schema'
+
+import { Menu, Tabs } from '@foldkit/ui'
+
+import { Step } from './domain'
+import {
+  Attachments,
+  CoverLetter,
+  Education,
+  PersonalInfo,
+  Skills,
+  WorkHistory,
+} from './step'
+
+// SUBMISSION
+
+export const NotSubmitted = ts('NotSubmitted')
+export const Submitting = ts('Submitting')
+export const SubmitSuccess = ts('SubmitSuccess')
+export const SubmitError = ts('SubmitError', { error: S.String })
+
+export const Submission = S.Union([
+  NotSubmitted,
+  Submitting,
+  SubmitSuccess,
+  SubmitError,
+])
+export type Submission = typeof Submission.Type
+
+// MODEL
+
+export const Model = S.Struct({
+  currentStep: Step.Step,
+  personalInfo: PersonalInfo.Model,
+  workHistory: WorkHistory.Model,
+  education: Education.Model,
+  skills: Skills.Model,
+  coverLetter: CoverLetter.Model,
+  attachments: Attachments.Model,
+  isPreviewVisible: S.Boolean,
+  submission: Submission,
+  stepMenu: Menu.Model,
+  stepTabs: Tabs.Model,
+  isSubmitAttempted: S.Boolean,
+})
+export type Model = typeof Model.Type

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

@@ -0,0 +1,269 @@
+import { Calendar } from 'foldkit'
+import { Valid, Validating } from 'foldkit/fieldValidation'
+import {
+  Command,
+  click,
+  expect,
+  given,
+  inside,
+  role,
+  scene,
+  text,
+} from 'foldkit/scene'
+import { describe, test } from 'vitest'
+
+import { Menu, Tabs } from '@foldkit/ui'
+import { Message as TabsMessage } from '@foldkit/ui/tabs'
+
+import {
+  type Model,
+  NotSubmitted,
+  SubmitError,
+  SubmitSuccess,
+  Submitting,
+} from './model'
+import {
+  Attachments,
+  CoverLetter,
+  Education,
+  PersonalInfo,
+  Skills,
+  WorkHistory,
+} from './step'
+import { update } from './update'
+import { view } from './view'
+
+const today = Calendar.make(2026, 4, 16)
+
+const initialModel: Model = {
+  currentStep: 'PersonalInfo',
+  personalInfo: PersonalInfo.init(today),
+  workHistory: WorkHistory.init(today, 'work-history-entry-1'),
+  education: Education.init(today, 'education-entry-1'),
+  skills: Skills.init('skills-entry-1'),
+  coverLetter: CoverLetter.init(),
+  attachments: Attachments.init(),
+  isPreviewVisible: false,
+  submission: NotSubmitted(),
+  stepMenu: Menu.init({ id: 'step-menu' }),
+  stepTabs: Tabs.init({ id: 'step-tabs' }),
+  isSubmitAttempted: false,
+}
+
+const completeModel: Model = {
+  ...initialModel,
+  personalInfo: {
+    ...initialModel.personalInfo,
+    firstName: Valid({ value: 'Jane' }),
+    lastName: Valid({ value: 'Doe' }),
+    email: Valid({ value: 'jane@example.com' }),
+  },
+  workHistory: {
+    ...initialModel.workHistory,
+    entries: initialModel.workHistory.entries.map(entry => ({
+      ...entry,
+      company: Valid({ value: 'Foldkit' }),
+      title: Valid({ value: 'Engineer' }),
+    })),
+  },
+  education: {
+    ...initialModel.education,
+    entries: initialModel.education.entries.map(entry => ({
+      ...entry,
+      school: Valid({ value: 'MIT' }),
+      degree: Valid({ value: 'BS' }),
+      fieldOfStudy: Valid({ value: 'CS' }),
+    })),
+  },
+  skills: {
+    ...initialModel.skills,
+    entries: initialModel.skills.entries.map(entry => ({
+      ...entry,
+      name: Valid({ value: 'TypeScript' }),
+    })),
+  },
+}
+
+const resolveFocusTab = Command.resolve(
+  Tabs.FocusTab,
+  TabsMessage.CompletedFocusTab(),
+)
+
+describe('view', () => {
+  test('initial view shows the page heading and the PersonalInfo step', () => {
+    scene(
+      { update, view },
+      given(initialModel),
+      expect(role('heading', { name: 'Apply to Work on Foldkit' })).toExist(),
+      expect(role('heading', { name: 'Personal Info' })).toExist(),
+      expect(role('button', { name: 'Next →' })).toExist(),
+    )
+  })
+
+  test('the step nav lists every step', () => {
+    scene(
+      { update, view },
+      given(initialModel),
+      inside(
+        role('tablist', { name: 'Application steps' }),
+        expect(text('Personal Info')).toExist(),
+        expect(text('Work History')).toExist(),
+        expect(text('Education')).toExist(),
+        expect(text('Skills')).toExist(),
+        expect(text('Cover Letter')).toExist(),
+        expect(text('Attachments')).toExist(),
+        expect(text('Review')).toExist(),
+      ),
+    )
+  })
+
+  test('tabs can jump directly to any step', () => {
+    scene(
+      { update, view },
+      given(initialModel),
+      inside(
+        role('tablist', { name: 'Application steps' }),
+        click(role('tab', { name: /Review$/ })),
+      ),
+      resolveFocusTab,
+      expect(role('heading', { name: 'Review' })).toExist(),
+    )
+  })
+
+  test('clicking Next advances to the Work History step', () => {
+    scene(
+      { update, view },
+      given(initialModel),
+      click(role('button', { name: 'Next →' })),
+      expect(role('heading', { name: 'Work History' })).toExist(),
+      expect(role('button', { name: '← Previous' })).toExist(),
+    )
+  })
+
+  test('Previous on a later step returns to the prior step', () => {
+    scene(
+      { update, view },
+      given({ ...initialModel, currentStep: 'Education' }),
+      expect(role('heading', { name: 'Education' })).toExist(),
+      click(role('button', { name: '← Previous' })),
+      expect(role('heading', { name: 'Work History' })).toExist(),
+    )
+  })
+
+  test('the first step does not render a Previous button', () => {
+    scene(
+      { update, view },
+      given(initialModel),
+      expect(role('button', { name: '← Previous' })).toBeAbsent(),
+    )
+  })
+
+  test('the Review step exposes a Submit button and hides Next', () => {
+    scene(
+      { update, view },
+      given({ ...initialModel, currentStep: 'Review' }),
+      expect(role('button', { name: 'Submit Application' })).toExist(),
+      expect(role('button', { name: 'Next →' })).toBeAbsent(),
+    )
+  })
+
+  test('clicking Submit on an incomplete application shows a blocking notice', () => {
+    scene(
+      { update, view },
+      given({ ...initialModel, currentStep: 'Review' }),
+      expect(role('button', { name: 'Submit Application' })).toBeEnabled(),
+      expect(
+        text(
+          'Review Personal Info, Work History, Education, Skills before submitting.',
+        ),
+      ).not.toExist(),
+      click(role('button', { name: 'Submit Application' })),
+      expect(
+        text(
+          'Review Personal Info, Work History, Education, Skills before submitting.',
+        ),
+      ).toExist(),
+    )
+  })
+
+  test('a pending validation notice names the incomplete step', () => {
+    scene(
+      { update, view },
+      given({
+        ...completeModel,
+        currentStep: 'Review',
+        personalInfo: {
+          ...completeModel.personalInfo,
+          email: Validating({ value: 'jane@example.com' }),
+        },
+      }),
+      expect(role('button', { name: 'Submit Application' })).toBeEnabled(),
+      click(role('button', { name: 'Submit Application' })),
+      expect(text('Review Personal Info before submitting.')).toExist(),
+    )
+  })
+
+  test('submit blocking notices include multiple incomplete required steps', () => {
+    scene(
+      { update, view },
+      given({
+        ...completeModel,
+        currentStep: 'Review',
+        workHistory: {
+          ...completeModel.workHistory,
+          entries: [],
+        },
+        education: {
+          ...completeModel.education,
+          entries: [],
+        },
+        skills: {
+          ...completeModel.skills,
+          entries: [],
+        },
+      }),
+      expect(role('button', { name: 'Submit Application' })).toBeEnabled(),
+      click(role('button', { name: 'Submit Application' })),
+      expect(
+        text('Review Work History, Education, Skills before submitting.'),
+      ).toExist(),
+    )
+  })
+
+  test('a submitting application shows a Submitting button', () => {
+    scene(
+      { update, view },
+      given({
+        ...initialModel,
+        currentStep: 'Review',
+        submission: Submitting(),
+      }),
+      expect(role('button', { name: 'Submitting...' })).toExist(),
+    )
+  })
+
+  test('a successful submission swaps the form for a success panel', () => {
+    scene(
+      { update, view },
+      given({
+        ...initialModel,
+        currentStep: 'Review',
+        submission: SubmitSuccess(),
+      }),
+      expect(text('Application Submitted', { exact: false })).toExist(),
+    )
+  })
+
+  test('a failed submission shows the error and a Try Again control', () => {
+    scene(
+      { update, view },
+      given({
+        ...initialModel,
+        currentStep: 'Review',
+        submission: SubmitError({ error: 'Network down' }),
+      }),
+      expect(text('Network down')).toExist(),
+      expect(role('button', { name: 'Try Again' })).toExist(),
+    )
+  })
+})

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

@@ -0,0 +1,111 @@
+import { Array, Match as M, Option, Schema as S, pipe } from 'effect'
+import { Command, File, Update } from 'foldkit'
+import { defineMessageUnion } from 'foldkit/message'
+import { evo } from 'foldkit/struct'
+
+import { FileDrop } from '@foldkit/ui'
+
+// MODEL
+
+export const Model = S.Struct({
+  resumeDrop: FileDrop.Model,
+  maybeResume: S.Option(File.File),
+  additionalFilesDrop: FileDrop.Model,
+  additionalFiles: S.Array(File.File),
+})
+export type Model = typeof Model.Type
+
+// MESSAGE
+
+export const Message = defineMessageUnion({
+  GotResumeDropMessage: { message: FileDrop.Message },
+  GotAdditionalFilesDropMessage: { message: FileDrop.Message },
+  RemovedResume: {},
+  RemovedAdditionalFile: { fileIndex: S.Number },
+})
+
+export type Message = typeof Message.Type
+
+// INIT
+
+export const init = (): Model => ({
+  resumeDrop: FileDrop.init({ id: 'attachments-resume' }),
+  maybeResume: Option.none(),
+  additionalFilesDrop: FileDrop.init({ id: 'attachments-additional' }),
+  additionalFiles: [],
+})
+
+// UPDATE
+
+type UpdateReturn = readonly [Model, ReadonlyArray<Command.Command<Message>>]
+
+const foldResumeDropOutMessage = M.type<FileDrop.OutMessage>().pipe(
+  M.withReturnType<Update.Step<Model, Message>>(),
+  M.tagsExhaustive({
+    ReceivedFiles:
+      ({ files }) =>
+      model => [
+        evo(model, {
+          maybeResume: () =>
+            pipe(
+              files,
+              Array.head,
+              Option.orElse(() => model.maybeResume),
+            ),
+        }),
+        [],
+      ],
+    RejectedNonFiles: () => model => [model, []],
+  }),
+)
+
+const foldResumeDrop = Update.foldChild({
+  update: FileDrop.update,
+  read: (model: Model) => Option.some(model.resumeDrop),
+  write: (model, nextResumeDrop) =>
+    evo(model, { resumeDrop: () => nextResumeDrop }),
+  toParentMessage: message => Message.GotResumeDropMessage({ message }),
+  foldOutMessage: foldResumeDropOutMessage,
+})
+
+const foldAdditionalFilesDropOutMessage = M.type<FileDrop.OutMessage>().pipe(
+  M.withReturnType<Update.Step<Model, Message>>(),
+  M.tagsExhaustive({
+    ReceivedFiles:
+      ({ files }) =>
+      model => [
+        evo(model, {
+          additionalFiles: Array.appendAll(files),
+        }),
+        [],
+      ],
+    RejectedNonFiles: () => model => [model, []],
+  }),
+)
+
+const foldAdditionalFilesDrop = Update.foldChild({
+  update: FileDrop.update,
+  read: (model: Model) => Option.some(model.additionalFilesDrop),
+  write: (model, nextAdditionalFilesDrop) =>
+    evo(model, { additionalFilesDrop: () => nextAdditionalFilesDrop }),
+  toParentMessage: message =>
+    Message.GotAdditionalFilesDropMessage({ message }),
+  foldOutMessage: foldAdditionalFilesDropOutMessage,
+})
+
+export const update = (model: Model, message: Message) =>
+  Message.match<UpdateReturn>(message, {
+    GotResumeDropMessage: ({ message }) => foldResumeDrop(model, message),
+
+    GotAdditionalFilesDropMessage: ({ message }) =>
+      foldAdditionalFilesDrop(model, message),
+
+    RemovedResume: () => [evo(model, { maybeResume: () => Option.none() }), []],
+
+    RemovedAdditionalFile: ({ fileIndex }) => [
+      evo(model, {
+        additionalFiles: Array.remove(fileIndex),
+      }),
+      [],
+    ],
+  })

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

@@ -0,0 +1,34 @@
+import { Schema as S } from 'effect'
+import { Command } from 'foldkit'
+import { defineMessageUnion } from 'foldkit/message'
+import { evo } from 'foldkit/struct'
+
+// MODEL
+
+export const Model = S.Struct({
+  content: S.String,
+})
+export type Model = typeof Model.Type
+
+// MESSAGE
+
+export const Message = defineMessageUnion({
+  UpdatedContent: { value: S.String },
+})
+
+export type Message = typeof Message.Type
+
+// INIT
+
+export const init = (): Model => ({
+  content: '',
+})
+
+// UPDATE
+
+type UpdateReturn = readonly [Model, ReadonlyArray<Command.Command<Message>>]
+
+export const update = (model: Model, message: Message) =>
+  Message.match<UpdateReturn>(message, {
+    UpdatedContent: ({ value }) => [evo(model, { content: () => value }), []],
+  })