create-foldkit-app 0.27.3 → 0.28.0

package/dist/templates/examples/job-application/src/step/education/education.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,
+})
+
+// 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/education/entry.ts

@@ -0,0 +1,168 @@
+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 { Listbox } from '@foldkit/ui'
+
+import { revealFieldErrors } from '../validation'
+
+// FIELD VALIDATION
+
+export const schoolRules = makeRules({
+  required: 'School is required',
+})
+
+export const degreeRules = makeRules({
+  required: 'Degree is required',
+})
+
+export const fieldOfStudyRules = makeRules({
+  required: 'Field of study is required',
+})
+
+const validateSchool = validate(schoolRules)
+const validateDegree = validate(degreeRules)
+const validateFieldOfStudy = validate(fieldOfStudyRules)
+
+// MODEL
+
+export const Model = S.Struct({
+  id: S.String,
+  school: Field(S.String),
+  degree: Field(S.String),
+  fieldOfStudy: Field(S.String),
+  maybeGraduationYear: S.Option(S.String),
+  graduationYearListbox: Listbox.Model,
+  isCurrentlyEnrolled: S.Boolean,
+})
+export type Model = typeof Model.Type
+
+const GraduationYearListbox = Listbox.create<string>()
+
+// MESSAGE
+
+export const Message = defineMessageUnion({
+  UpdatedSchool: { value: S.String },
+  UpdatedDegree: { value: S.String },
+  UpdatedFieldOfStudy: { value: S.String },
+  GotGraduationYearListboxMessage: { message: Listbox.Message },
+  ToggledCurrentlyEnrolled: { isChecked: S.Boolean },
+  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,
+  school: NotValidated({ value: '' }),
+  degree: NotValidated({ value: '' }),
+  fieldOfStudy: NotValidated({ value: '' }),
+  maybeGraduationYear: Option.none(),
+  graduationYearListbox: Listbox.init({
+    id: `${entryId}-graduation-year`,
+  }),
+  isCurrentlyEnrolled: false,
+})
+
+// UPDATE
+
+type UpdateReturn = readonly [
+  Model,
+  ReadonlyArray<Command.Command<Message>>,
+  Option.Option<OutMessage>,
+]
+
+const foldGraduationYearListboxOutMessage = M.type<Listbox.OutMessage>().pipe(
+  M.withReturnType<Update.Step<Model, Message>>(),
+  M.tagsExhaustive({
+    Selected:
+      ({ value }) =>
+      model => [
+        evo(model, { maybeGraduationYear: () => Option.some(value) }),
+        [],
+      ],
+  }),
+)
+
+const foldGraduationYearListbox = Update.foldChild({
+  update: GraduationYearListbox.update,
+  read: (model: Model) => Option.some(model.graduationYearListbox),
+  write: (model, nextGraduationYearListbox) =>
+    evo(model, { graduationYearListbox: () => nextGraduationYearListbox }),
+  toParentMessage: message =>
+    Message.GotGraduationYearListboxMessage({ message }),
+  toParentOutMessage: () => Option.none(),
+  foldOutMessage: foldGraduationYearListboxOutMessage,
+})
+
+export const update = (model: Model, message: Message) =>
+  Message.match<UpdateReturn>(message, {
+    UpdatedSchool: ({ value }) => [
+      evo(model, { school: () => validateSchool(value) }),
+      [],
+      Option.none(),
+    ],
+
+    UpdatedDegree: ({ value }) => [
+      evo(model, { degree: () => validateDegree(value) }),
+      [],
+      Option.none(),
+    ],
+
+    UpdatedFieldOfStudy: ({ value }) => [
+      evo(model, { fieldOfStudy: () => validateFieldOfStudy(value) }),
+      [],
+      Option.none(),
+    ],
+
+    GotGraduationYearListboxMessage: ({ message }) =>
+      foldGraduationYearListbox(model, message),
+
+    ToggledCurrentlyEnrolled: ({ isChecked }) => [
+      evo(model, { isCurrentlyEnrolled: () => isChecked }),
+      [],
+      Option.none(),
+    ],
+
+    ClickedRemoveSelf: () => [model, [], Option.some(OutMessage.Removed())],
+  })
+
+// VALIDATION SUMMARY
+
+export const hasErrors = (entry: Model): boolean =>
+  anyInvalid([entry.school, entry.degree, entry.fieldOfStudy])
+
+export const isComplete = (entry: Model): boolean =>
+  allValid([
+    [entry.school, schoolRules],
+    [entry.degree, degreeRules],
+    [entry.fieldOfStudy, fieldOfStudyRules],
+  ])
+
+export const revealErrors = (entry: Model): Model =>
+  evo(entry, {
+    school: revealFieldErrors(schoolRules),
+    degree: revealFieldErrors(degreeRules),
+    fieldOfStudy: revealFieldErrors(fieldOfStudyRules),
+  })

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

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

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

@@ -0,0 +1,6 @@
+export * as Attachments from './attachments'
+export * as CoverLetter from './coverLetter'
+export * as Education from './education'
+export * as PersonalInfo from './personalInfo'
+export * as Skills from './skills'
+export * as WorkHistory from './workHistory'

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

@@ -0,0 +1,305 @@
+import {
+  Array,
+  Duration,
+  Effect,
+  Match as M,
+  Number,
+  Option,
+  Schema as S,
+} from 'effect'
+import { Command, Update } from 'foldkit'
+import { CalendarDate } from 'foldkit/calendar'
+import {
+  Field,
+  Invalid,
+  NotValidated,
+  Rule,
+  Valid,
+  Validating,
+  allValid,
+  anyInvalid,
+  makeRules,
+  validate,
+} from 'foldkit/fieldValidation'
+import { defineMessageUnion } from 'foldkit/message'
+import { evo } from 'foldkit/struct'
+
+import { DatePicker, Listbox } from '@foldkit/ui'
+
+import { revealFieldErrors } from './validation'
+
+// MODEL
+
+const PronounsListbox = Listbox.create<string>()
+
+export const Model = S.Struct({
+  firstName: Field(S.String),
+  lastName: Field(S.String),
+  email: Field(S.String),
+  emailValidationId: S.Number,
+  phone: Field(S.String),
+  pronouns: Listbox.Model,
+  maybeSelectedPronoun: S.Option(S.String),
+  customPronouns: S.String,
+  portfolioUrl: Field(S.String),
+  availableDate: DatePicker.Model,
+  maybeAvailableDate: S.Option(CalendarDate),
+})
+export type Model = typeof Model.Type
+
+// MESSAGE
+
+export const Message = defineMessageUnion({
+  UpdatedFirstName: { value: S.String },
+  UpdatedLastName: { value: S.String },
+  UpdatedEmail: { value: S.String },
+  CompletedValidateEmailAsync: {
+    validationId: S.Number,
+    field: Field(S.String),
+  },
+  UpdatedPhone: { value: S.String },
+  GotPronounsMessage: { message: Listbox.Message },
+  UpdatedCustomPronouns: { value: S.String },
+  UpdatedPortfolioUrl: { value: S.String },
+  GotAvailableDateMessage: { message: DatePicker.Message },
+})
+
+export type Message = typeof Message.Type
+
+// INIT
+
+export const init = (today: CalendarDate): Model => ({
+  firstName: NotValidated({ value: '' }),
+  lastName: NotValidated({ value: '' }),
+  email: NotValidated({ value: '' }),
+  emailValidationId: 0,
+  phone: NotValidated({ value: '' }),
+  pronouns: Listbox.init({ id: 'pronouns' }),
+  maybeSelectedPronoun: Option.none(),
+  customPronouns: '',
+  portfolioUrl: NotValidated({ value: '' }),
+  availableDate: DatePicker.init({
+    id: 'available-date',
+    today,
+    minDate: today,
+  }),
+  maybeAvailableDate: Option.none(),
+})
+
+// FIELD VALIDATION
+
+const firstNameRules = makeRules({
+  required: 'First name is required',
+  rules: [Rule.minLength(2, 'First name must be at least 2 characters')],
+})
+
+const lastNameRules = makeRules({
+  required: 'Last name is required',
+})
+
+const emailRules = makeRules({
+  required: 'Email is required',
+  rules: [Rule.email('Please enter a valid email address')],
+})
+
+const PHONE_PATTERN = /^\+?[\d\s()-]{7,}$/
+
+const phoneRules = makeRules({
+  rules: [Rule.pattern(PHONE_PATTERN, 'Please enter a valid phone number')],
+})
+
+const portfolioUrlRules = makeRules({
+  rules: [
+    Rule.url({
+      message: 'Please enter a valid URL',
+      requireProtocol: false,
+    }),
+  ],
+})
+
+const validateFirstName = validate(firstNameRules)
+const validateLastName = validate(lastNameRules)
+const validateEmail = validate(emailRules)
+const validatePhone = validate(phoneRules)
+const validatePortfolioUrl = validate(portfolioUrlRules)
+
+// COMMAND
+
+const FAKE_API_DELAY_MS = 600
+
+const TAKEN_EMAILS = [
+  'admin@foldkit.dev',
+  'test@example.com',
+  'demo@foldkit.dev',
+]
+
+const isEmailTaken = (emailInput: string): Effect.Effect<boolean> =>
+  Effect.gen(function* () {
+    yield* Effect.sleep(Duration.millis(FAKE_API_DELAY_MS))
+    return Array.contains(TAKEN_EMAILS, emailInput.toLowerCase())
+  })
+
+export const ValidateEmailAsync = Command.define('ValidateEmailAsync', {
+  args: { emailInput: S.String, validationId: S.Number },
+  messages: [Message.CompletedValidateEmailAsync],
+  execute: ({ emailInput, validationId }) =>
+    Effect.gen(function* () {
+      if (yield* isEmailTaken(emailInput)) {
+        return Message.CompletedValidateEmailAsync({
+          validationId,
+          field: Invalid({
+            value: emailInput,
+            errors: ['This email is already in use'],
+          }),
+        })
+      }
+      return Message.CompletedValidateEmailAsync({
+        validationId,
+        field: Valid({ value: emailInput }),
+      })
+    }),
+})
+
+// UPDATE
+
+type UpdateReturn = readonly [Model, ReadonlyArray<Command.Command<Message>>]
+
+const foldPronounsOutMessage = M.type<Listbox.OutMessage>().pipe(
+  M.withReturnType<Update.Step<Model, Message>>(),
+  M.tagsExhaustive({
+    Selected:
+      ({ value }) =>
+      model => [
+        evo(model, { maybeSelectedPronoun: () => Option.some(value) }),
+        [],
+      ],
+  }),
+)
+
+const foldPronouns = Update.foldChild({
+  update: PronounsListbox.update,
+  read: (model: Model) => Option.some(model.pronouns),
+  write: (model, nextPronouns) => evo(model, { pronouns: () => nextPronouns }),
+  toParentMessage: message => Message.GotPronounsMessage({ message }),
+  foldOutMessage: foldPronounsOutMessage,
+})
+
+const foldAvailableDateOutMessage = M.type<DatePicker.OutMessage>().pipe(
+  M.withReturnType<Update.Step<Model, Message>>(),
+  M.tagsExhaustive({
+    SelectedDate:
+      ({ date }) =>
+      model => [
+        evo(model, { maybeAvailableDate: () => Option.some(date) }),
+        [],
+      ],
+    ClearedDate: () => model => [
+      evo(model, { maybeAvailableDate: () => Option.none() }),
+      [],
+    ],
+    ChangedViewMonth: () => model => [model, []],
+  }),
+)
+
+const foldAvailableDate = Update.foldChild({
+  update: DatePicker.update,
+  read: (model: Model) => Option.some(model.availableDate),
+  write: (model, nextAvailableDate) =>
+    evo(model, { availableDate: () => nextAvailableDate }),
+  toParentMessage: message => Message.GotAvailableDateMessage({ message }),
+  foldOutMessage: foldAvailableDateOutMessage,
+})
+
+export const update = (model: Model, message: Message) =>
+  Message.match<UpdateReturn>(message, {
+    UpdatedFirstName: ({ value }) => [
+      evo(model, { firstName: () => validateFirstName(value) }),
+      [],
+    ],
+
+    UpdatedLastName: ({ value }) => [
+      evo(model, { lastName: () => validateLastName(value) }),
+      [],
+    ],
+
+    UpdatedEmail: ({ value }) => {
+      const validationId = Number.increment(model.emailValidationId)
+      return M.value(validateEmail(value)).pipe(
+        M.withReturnType<UpdateReturn>(),
+        M.tag('Valid', () => [
+          evo(model, {
+            email: () => Validating({ value }),
+            emailValidationId: () => validationId,
+          }),
+          [ValidateEmailAsync({ emailInput: value, validationId })],
+        ]),
+        M.orElse(syncResult => [
+          evo(model, {
+            email: () => syncResult,
+            emailValidationId: () => validationId,
+          }),
+          [],
+        ]),
+      )
+    },
+
+    CompletedValidateEmailAsync: ({ validationId, field }) => {
+      if (validationId === model.emailValidationId) {
+        return [evo(model, { email: () => field }), []]
+      } else {
+        return [model, []]
+      }
+    },
+
+    UpdatedPhone: ({ value }) => [
+      evo(model, { phone: () => validatePhone(value) }),
+      [],
+    ],
+
+    GotPronounsMessage: ({ message }) => foldPronouns(model, message),
+
+    UpdatedCustomPronouns: ({ value }) => [
+      evo(model, { customPronouns: () => value }),
+      [],
+    ],
+
+    UpdatedPortfolioUrl: ({ value }) => [
+      evo(model, {
+        portfolioUrl: () => validatePortfolioUrl(value),
+      }),
+      [],
+    ],
+
+    GotAvailableDateMessage: ({ message }) => foldAvailableDate(model, message),
+  })
+
+// VALIDATION SUMMARY
+
+const validatedFields = (model: Model): ReadonlyArray<Field<string>> => [
+  model.firstName,
+  model.lastName,
+  model.email,
+  model.phone,
+  model.portfolioUrl,
+]
+
+export const hasErrors = (model: Model): boolean =>
+  anyInvalid(validatedFields(model))
+
+export const isComplete = (model: Model): boolean =>
+  allValid([
+    [model.firstName, firstNameRules],
+    [model.lastName, lastNameRules],
+    [model.email, emailRules],
+    [model.phone, phoneRules],
+    [model.portfolioUrl, portfolioUrlRules],
+  ])
+
+export const revealErrors = (model: Model): Model =>
+  evo(model, {
+    firstName: revealFieldErrors(firstNameRules),
+    lastName: revealFieldErrors(lastNameRules),
+    email: revealFieldErrors(emailRules),
+    phone: revealFieldErrors(phoneRules),
+    portfolioUrl: revealFieldErrors(portfolioUrlRules),
+  })