create-foldkit-app 0.27.3 → 0.28.0

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

@@ -0,0 +1,126 @@
+import { Match as M, Option, Schema as S } from 'effect'
+import { Command, Update } from 'foldkit'
+import {
+  Field,
+  NotValidated,
+  allValid,
+  anyInvalid,
+  makeRules,
+  validate,
+} from 'foldkit/fieldValidation'
+import { defineMessageUnion } from 'foldkit/message'
+import { evo } from 'foldkit/struct'
+
+import { RadioGroup } from '@foldkit/ui'
+
+import { ProficiencyLevel } from '../../domain'
+import { revealFieldErrors } from '../validation'
+
+// FIELD VALIDATION
+
+export const nameRules = makeRules({
+  required: 'Skill name is required',
+})
+
+const validateName = validate(nameRules)
+
+// MODEL
+
+export const proficiencyRadioGroupId = (entryId: string): string =>
+  `${entryId}-proficiency`
+
+export const ProficiencyRadioGroup =
+  RadioGroup.create<ProficiencyLevel.ProficiencyLevel>()
+
+export const Model = S.Struct({
+  id: S.String,
+  name: Field(S.String),
+  proficiency: ProficiencyLevel.ProficiencyLevel,
+  proficiencyRadioGroup: RadioGroup.Model,
+})
+export type Model = typeof Model.Type
+
+// MESSAGE
+
+export const Message = defineMessageUnion({
+  UpdatedName: { value: S.String },
+  GotProficiencyRadioGroupMessage: { message: RadioGroup.Message },
+  ClickedRemoveSelf: {},
+})
+
+export type Message = typeof Message.Type
+
+// OUT MESSAGE
+
+export const OutMessage = defineMessageUnion({
+  Removed: {},
+})
+
+export type OutMessage = typeof OutMessage.Type
+
+export type Removed = typeof OutMessage.Removed.Type
+
+// INIT
+
+export const init = (entryId: string): Model => ({
+  id: entryId,
+  name: NotValidated({ value: '' }),
+  proficiency: 'Intermediate',
+  proficiencyRadioGroup: RadioGroup.init({
+    id: proficiencyRadioGroupId(entryId),
+  }),
+})
+
+// UPDATE
+
+type UpdateReturn = readonly [
+  Model,
+  ReadonlyArray<Command.Command<Message>>,
+  Option.Option<OutMessage>,
+]
+
+const foldProficiencyRadioGroupOutMessage = M.type<
+  RadioGroup.OutMessage<ProficiencyLevel.ProficiencyLevel>
+>().pipe(
+  M.withReturnType<Update.Step<Model, Message>>(),
+  M.tagsExhaustive({
+    Selected:
+      ({ value }) =>
+      model => [evo(model, { proficiency: () => value }), []],
+  }),
+)
+
+const foldProficiencyRadioGroup = Update.foldChild({
+  update: ProficiencyRadioGroup.update,
+  read: (model: Model) => Option.some(model.proficiencyRadioGroup),
+  write: (model, nextProficiencyRadioGroup) =>
+    evo(model, { proficiencyRadioGroup: () => nextProficiencyRadioGroup }),
+  toParentMessage: message =>
+    Message.GotProficiencyRadioGroupMessage({ message }),
+  foldOutMessage: foldProficiencyRadioGroupOutMessage,
+  toParentOutMessage: () => Option.none(),
+})
+
+export const update = (model: Model, message: Message) =>
+  Message.match<UpdateReturn>(message, {
+    UpdatedName: ({ value }) => [
+      evo(model, { name: () => validateName(value) }),
+      [],
+      Option.none(),
+    ],
+
+    GotProficiencyRadioGroupMessage: ({ message }) =>
+      foldProficiencyRadioGroup(model, message),
+
+    ClickedRemoveSelf: () => [model, [], Option.some(OutMessage.Removed())],
+  })
+
+// VALIDATION SUMMARY
+
+export const hasErrors = (entry: Model): boolean => anyInvalid([entry.name])
+
+export const isComplete = (entry: Model): boolean =>
+  allValid([[entry.name, nameRules]])
+
+export const revealErrors = (entry: Model): Model =>
+  evo(entry, { name: revealFieldErrors(nameRules) })

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

@@ -0,0 +1,2 @@
+export * from './skills'
+export * as Entry from './entry'

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

@@ -0,0 +1,118 @@
+import { Array, Crypto, Effect, Match as M, Schema as S } from 'effect'
+import { Command, Update } from 'foldkit'
+import { defineMessageUnion } from 'foldkit/message'
+import { evo } from 'foldkit/struct'
+
+import { BrowserCrypto } from '@effect/platform-browser'
+
+import * as Entry from './entry'
+
+// MODEL
+
+export const Model = S.Struct({
+  entries: S.Array(Entry.Model),
+})
+export type Model = typeof Model.Type
+
+// MESSAGE
+
+export const Message = defineMessageUnion({
+  ClickedAddEntry: {},
+  SucceededGenerateEntryId: { entryId: S.String },
+  FailedGenerateEntryId: {},
+  RemovedEntry: { entryId: S.String },
+  GotEntryMessage: {
+    entryId: S.String,
+    message: Entry.Message,
+  },
+})
+
+export type Message = typeof Message.Type
+
+// INIT
+
+export const init = (initialEntryId: string): Model => ({
+  entries: [Entry.init(initialEntryId)],
+})
+
+// COMMAND
+
+export const GenerateEntryId = Command.define('GenerateEntryId', {
+  messages: [Message.SucceededGenerateEntryId, Message.FailedGenerateEntryId],
+  execute: Effect.gen(function* () {
+    const crypto = yield* Crypto.Crypto
+    const entryId = yield* crypto.randomUUIDv4
+    return Message.SucceededGenerateEntryId({ entryId })
+  }).pipe(
+    Effect.provide(BrowserCrypto.layer),
+    Effect.catch(() => Effect.succeed(Message.FailedGenerateEntryId())),
+  ),
+})
+
+// UPDATE
+
+type UpdateReturn = readonly [Model, ReadonlyArray<Command.Command<Message>>]
+
+const foldEntryOutMessage: (
+  entryId: string,
+) => (outMessage: Entry.OutMessage) => Update.Step<Model, Message> = entryId =>
+  M.type<Entry.OutMessage>().pipe(
+    M.withReturnType<Update.Step<Model, Message>>(),
+    M.tagsExhaustive({
+      Removed: () => model => [
+        evo(model, {
+          entries: Array.filter(entry => entry.id !== entryId),
+        }),
+        [],
+      ],
+    }),
+  )
+
+const foldEntry = (entryId: string) =>
+  Update.foldChild({
+    update: Entry.update,
+    read: (model: Model) =>
+      Array.findFirst(model.entries, entry => entry.id === entryId),
+    write: (model, nextEntry) =>
+      evo(model, {
+        entries: Array.map(entry => (entry.id === entryId ? nextEntry : entry)),
+      }),
+    toParentMessage: message => Message.GotEntryMessage({ entryId, message }),
+    foldOutMessage: foldEntryOutMessage(entryId),
+  })
+
+export const update = (model: Model, message: Message) =>
+  Message.match<UpdateReturn>(message, {
+    ClickedAddEntry: () => [model, [GenerateEntryId()]],
+
+    SucceededGenerateEntryId: ({ entryId }) => [
+      evo(model, {
+        entries: Array.append(Entry.init(entryId)),
+      }),
+      [],
+    ],
+
+    FailedGenerateEntryId: () => [model, []],
+
+    RemovedEntry: ({ entryId }) => [
+      evo(model, {
+        entries: Array.filter(entry => entry.id !== entryId),
+      }),
+      [],
+    ],
+
+    GotEntryMessage: ({ entryId, message }) =>
+      foldEntry(entryId)(model, message),
+  })
+
+// VALIDATION SUMMARY
+
+export const hasErrors = (model: Model): boolean =>
+  Array.some(model.entries, Entry.hasErrors)
+
+export const isComplete = (model: Model): boolean =>
+  Array.isReadonlyArrayNonEmpty(model.entries) &&
+  Array.every(model.entries, Entry.isComplete)
+
+export const revealErrors = (model: Model): Model =>
+  evo(model, { entries: Array.map(Entry.revealErrors) })

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

@@ -0,0 +1,6 @@
+import { Field, type Rules, validate } from 'foldkit/fieldValidation'
+
+export const revealFieldErrors =
+  <A>(rules: Rules<A>) =>
+  (field: Field<A>): Field<A> =>
+    field._tag === 'NotValidated' ? validate(rules)(field.value) : field

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

@@ -0,0 +1,206 @@
+import { Match as M, Option, Schema as S } from 'effect'
+import { Command, Update } from 'foldkit'
+import { CalendarDate } from 'foldkit/calendar'
+import {
+  Field,
+  NotValidated,
+  allValid,
+  anyInvalid,
+  makeRules,
+  validate,
+} from 'foldkit/fieldValidation'
+import { defineMessageUnion } from 'foldkit/message'
+import { evo } from 'foldkit/struct'
+
+import { DatePicker } from '@foldkit/ui'
+
+import { revealFieldErrors } from '../validation'
+
+// FIELD VALIDATION
+
+export const companyRules = makeRules({
+  required: 'Company is required',
+})
+
+export const titleRules = makeRules({
+  required: 'Job title is required',
+})
+
+const validateCompany = validate(companyRules)
+const validateTitle = validate(titleRules)
+
+// MODEL
+
+export const Model = S.Struct({
+  id: S.String,
+  company: Field(S.String),
+  title: Field(S.String),
+  startDate: DatePicker.Model,
+  maybeStartDate: S.Option(CalendarDate),
+  endDate: DatePicker.Model,
+  maybeEndDate: S.Option(CalendarDate),
+  isCurrentlyEmployed: S.Boolean,
+  description: S.String,
+})
+export type Model = typeof Model.Type
+
+// MESSAGE
+
+export const Message = defineMessageUnion({
+  UpdatedCompany: { value: S.String },
+  UpdatedTitle: { value: S.String },
+  GotStartDateMessage: { message: DatePicker.Message },
+  GotEndDateMessage: { message: DatePicker.Message },
+  ToggledCurrentlyEmployed: { isChecked: S.Boolean },
+  UpdatedDescription: { value: S.String },
+  ClickedRemoveSelf: {},
+})
+
+export type Message = typeof Message.Type
+
+// OUT MESSAGE
+
+export const OutMessage = defineMessageUnion({
+  Removed: {},
+})
+
+export type OutMessage = typeof OutMessage.Type
+
+export type Removed = typeof OutMessage.Removed.Type
+
+// INIT
+
+export const init = (entryId: string, today: CalendarDate): Model => ({
+  id: entryId,
+  company: NotValidated({ value: '' }),
+  title: NotValidated({ value: '' }),
+  startDate: DatePicker.init({ id: `${entryId}-start`, today }),
+  maybeStartDate: Option.none(),
+  endDate: DatePicker.init({ id: `${entryId}-end`, today }),
+  maybeEndDate: Option.none(),
+  isCurrentlyEmployed: false,
+  description: '',
+})
+
+// UPDATE
+
+type UpdateReturn = readonly [
+  Model,
+  ReadonlyArray<Command.Command<Message>>,
+  Option.Option<OutMessage>,
+]
+
+const foldStartDateOutMessage = M.type<DatePicker.OutMessage>().pipe(
+  M.withReturnType<Update.Step<Model, Message>>(),
+  M.tagsExhaustive({
+    ChangedViewMonth: () => model => [model, []],
+    SelectedDate:
+      ({ date }) =>
+      model => [
+        evo(model, {
+          maybeStartDate: () => Option.some(date),
+          endDate: DatePicker.reflectMinDate(Option.some(date)),
+        }),
+        [],
+      ],
+    ClearedDate: () => model => [
+      evo(model, {
+        maybeStartDate: () => Option.none(),
+        endDate: DatePicker.reflectMinDate(Option.none()),
+      }),
+      [],
+    ],
+  }),
+)
+
+const foldStartDate = Update.foldChild({
+  update: DatePicker.update,
+  read: (model: Model) => Option.some(model.startDate),
+  write: (model, nextStartDate) =>
+    evo(model, { startDate: () => nextStartDate }),
+  toParentMessage: message => Message.GotStartDateMessage({ message }),
+  toParentOutMessage: () => Option.none(),
+  foldOutMessage: foldStartDateOutMessage,
+})
+
+const foldEndDateOutMessage = M.type<DatePicker.OutMessage>().pipe(
+  M.withReturnType<Update.Step<Model, Message>>(),
+  M.tagsExhaustive({
+    ChangedViewMonth: () => model => [model, []],
+    SelectedDate:
+      ({ date }) =>
+      model => [
+        evo(model, {
+          maybeEndDate: () => Option.some(date),
+          startDate: DatePicker.reflectMaxDate(Option.some(date)),
+        }),
+        [],
+      ],
+    ClearedDate: () => model => [
+      evo(model, {
+        maybeEndDate: () => Option.none(),
+        startDate: DatePicker.reflectMaxDate(Option.none()),
+      }),
+      [],
+    ],
+  }),
+)
+
+const foldEndDate = Update.foldChild({
+  update: DatePicker.update,
+  read: (model: Model) => Option.some(model.endDate),
+  write: (model, nextEndDate) => evo(model, { endDate: () => nextEndDate }),
+  toParentMessage: message => Message.GotEndDateMessage({ message }),
+  toParentOutMessage: () => Option.none(),
+  foldOutMessage: foldEndDateOutMessage,
+})
+
+export const update = (model: Model, message: Message) =>
+  Message.match<UpdateReturn>(message, {
+    UpdatedCompany: ({ value }) => [
+      evo(model, { company: () => validateCompany(value) }),
+      [],
+      Option.none(),
+    ],
+
+    UpdatedTitle: ({ value }) => [
+      evo(model, { title: () => validateTitle(value) }),
+      [],
+      Option.none(),
+    ],
+
+    GotStartDateMessage: ({ message }) => foldStartDate(model, message),
+
+    GotEndDateMessage: ({ message }) => foldEndDate(model, message),
+
+    ToggledCurrentlyEmployed: ({ isChecked }) => [
+      evo(model, { isCurrentlyEmployed: () => isChecked }),
+      [],
+      Option.none(),
+    ],
+
+    UpdatedDescription: ({ value }) => [
+      evo(model, { description: () => value }),
+      [],
+      Option.none(),
+    ],
+
+    ClickedRemoveSelf: () => [model, [], Option.some(OutMessage.Removed())],
+  })
+
+// VALIDATION SUMMARY
+
+export const hasErrors = (entry: Model): boolean =>
+  anyInvalid([entry.company, entry.title])
+
+export const isComplete = (entry: Model): boolean =>
+  allValid([
+    [entry.company, companyRules],
+    [entry.title, titleRules],
+  ])
+
+export const revealErrors = (entry: Model): Model =>
+  evo(entry, {
+    company: revealFieldErrors(companyRules),
+    title: revealFieldErrors(titleRules),
+  })

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

@@ -0,0 +1,2 @@
+export * from './workHistory'
+export * as Entry from './entry'

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

@@ -0,0 +1,121 @@
+import { Array, Crypto, Effect, Match as M, Schema as S } from 'effect'
+import { Calendar, Command, Update } from 'foldkit'
+import { type CalendarDate } from 'foldkit/calendar'
+import { defineMessageUnion } from 'foldkit/message'
+import { evo } from 'foldkit/struct'
+
+import { BrowserCrypto } from '@effect/platform-browser'
+
+import * as Entry from './entry'
+
+// MODEL
+
+export const Model = S.Struct({
+  entries: S.Array(Entry.Model),
+  today: Calendar.CalendarDate,
+})
+export type Model = typeof Model.Type
+
+// MESSAGE
+
+export const Message = defineMessageUnion({
+  ClickedAddEntry: {},
+  SucceededGenerateEntryId: { entryId: S.String },
+  FailedGenerateEntryId: {},
+  RemovedEntry: { entryId: S.String },
+  GotEntryMessage: {
+    entryId: S.String,
+    message: Entry.Message,
+  },
+})
+
+export type Message = typeof Message.Type
+
+// INIT
+
+export const init = (today: CalendarDate, initialEntryId: string): Model => ({
+  entries: [Entry.init(initialEntryId, today)],
+  today,
+})
+
+// COMMAND
+
+export const GenerateEntryId = Command.define('GenerateEntryId', {
+  messages: [Message.SucceededGenerateEntryId, Message.FailedGenerateEntryId],
+  execute: Effect.gen(function* () {
+    const crypto = yield* Crypto.Crypto
+    const entryId = yield* crypto.randomUUIDv4
+    return Message.SucceededGenerateEntryId({ entryId })
+  }).pipe(
+    Effect.provide(BrowserCrypto.layer),
+    Effect.catch(() => Effect.succeed(Message.FailedGenerateEntryId())),
+  ),
+})
+
+// UPDATE
+
+type UpdateReturn = readonly [Model, ReadonlyArray<Command.Command<Message>>]
+
+const foldEntryOutMessage: (
+  entryId: string,
+) => (outMessage: Entry.OutMessage) => Update.Step<Model, Message> = entryId =>
+  M.type<Entry.OutMessage>().pipe(
+    M.withReturnType<Update.Step<Model, Message>>(),
+    M.tagsExhaustive({
+      Removed: () => model => [
+        evo(model, {
+          entries: Array.filter(entry => entry.id !== entryId),
+        }),
+        [],
+      ],
+    }),
+  )
+
+const foldEntry = (entryId: string) =>
+  Update.foldChild({
+    update: Entry.update,
+    read: (model: Model) =>
+      Array.findFirst(model.entries, entry => entry.id === entryId),
+    write: (model, nextEntry) =>
+      evo(model, {
+        entries: Array.map(entry => (entry.id === entryId ? nextEntry : entry)),
+      }),
+    toParentMessage: message => Message.GotEntryMessage({ entryId, message }),
+    foldOutMessage: foldEntryOutMessage(entryId),
+  })
+
+export const update = (model: Model, message: Message) =>
+  Message.match<UpdateReturn>(message, {
+    ClickedAddEntry: () => [model, [GenerateEntryId()]],
+
+    SucceededGenerateEntryId: ({ entryId }) => [
+      evo(model, {
+        entries: Array.append(Entry.init(entryId, model.today)),
+      }),
+      [],
+    ],
+
+    FailedGenerateEntryId: () => [model, []],
+
+    RemovedEntry: ({ entryId }) => [
+      evo(model, {
+        entries: Array.filter(entry => entry.id !== entryId),
+      }),
+      [],
+    ],
+
+    GotEntryMessage: ({ entryId, message }) =>
+      foldEntry(entryId)(model, message),
+  })
+
+// VALIDATION SUMMARY
+
+export const hasErrors = (model: Model): boolean =>
+  Array.some(model.entries, Entry.hasErrors)
+
+export const isComplete = (model: Model): boolean =>
+  Array.isReadonlyArrayNonEmpty(model.entries) &&
+  Array.every(model.entries, Entry.isComplete)
+
+export const revealErrors = (model: Model): Model =>
+  evo(model, { entries: Array.map(Entry.revealErrors) })