create-foldkit-app 0.27.3 → 0.28.0

package/dist/templates/examples/job-application/src/styles.css

@@ -0,0 +1 @@
+@import 'tailwindcss';

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

@@ -0,0 +1,183 @@
+import { Array, Match as M, Option, pipe } from 'effect'
+import { Command, Update } from 'foldkit'
+import { evo } from 'foldkit/struct'
+
+import { Menu, Tabs } from '@foldkit/ui'
+
+import { SubmitApplication } from './command'
+import { Step } from './domain'
+import { Message } from './message'
+import { type Model, SubmitError, SubmitSuccess, Submitting } from './model'
+import {
+  Attachments,
+  CoverLetter,
+  Education,
+  PersonalInfo,
+  Skills,
+  WorkHistory,
+} from './step'
+
+const StepMenu = Menu.create<Step.Step>()
+const StepTabs = Tabs.create<Step.Step>()
+
+const isApplicationComplete = (model: Model): boolean =>
+  PersonalInfo.isComplete(model.personalInfo) &&
+  WorkHistory.isComplete(model.workHistory) &&
+  Education.isComplete(model.education) &&
+  Skills.isComplete(model.skills)
+
+type UpdateReturn = readonly [Model, ReadonlyArray<Command.Command<Message>>]
+
+const toNextStep = (current: Step.Step): Step.Step =>
+  pipe(
+    Step.all,
+    Array.get(Step.indexOf(current) + 1),
+    Option.getOrElse(() => current),
+  )
+
+const toPreviousStep = (current: Step.Step): Step.Step =>
+  pipe(
+    Step.all,
+    Array.get(Step.indexOf(current) - 1),
+    Option.getOrElse(() => current),
+  )
+
+const foldPersonalInfo = Update.foldChild({
+  update: PersonalInfo.update,
+  read: (model: Model) => Option.some(model.personalInfo),
+  write: (model, nextPersonalInfo) =>
+    evo(model, { personalInfo: () => nextPersonalInfo }),
+  toParentMessage: message => Message.GotPersonalInfoMessage({ message }),
+})
+
+const foldWorkHistory = Update.foldChild({
+  update: WorkHistory.update,
+  read: (model: Model) => Option.some(model.workHistory),
+  write: (model, nextWorkHistory) =>
+    evo(model, { workHistory: () => nextWorkHistory }),
+  toParentMessage: message => Message.GotWorkHistoryMessage({ message }),
+})
+
+const foldEducation = Update.foldChild({
+  update: Education.update,
+  read: (model: Model) => Option.some(model.education),
+  write: (model, nextEducation) =>
+    evo(model, { education: () => nextEducation }),
+  toParentMessage: message => Message.GotEducationMessage({ message }),
+})
+
+const foldSkills = Update.foldChild({
+  update: Skills.update,
+  read: (model: Model) => Option.some(model.skills),
+  write: (model, nextSkills) => evo(model, { skills: () => nextSkills }),
+  toParentMessage: message => Message.GotSkillsMessage({ message }),
+})
+
+const foldCoverLetter = Update.foldChild({
+  update: CoverLetter.update,
+  read: (model: Model) => Option.some(model.coverLetter),
+  write: (model, nextCoverLetter) =>
+    evo(model, { coverLetter: () => nextCoverLetter }),
+  toParentMessage: message => Message.GotCoverLetterMessage({ message }),
+})
+
+const foldAttachments = Update.foldChild({
+  update: Attachments.update,
+  read: (model: Model) => Option.some(model.attachments),
+  write: (model, nextAttachments) =>
+    evo(model, { attachments: () => nextAttachments }),
+  toParentMessage: message => Message.GotAttachmentsMessage({ message }),
+})
+
+const foldStepMenuOutMessage = M.type<Menu.OutMessage<Step.Step>>().pipe(
+  M.withReturnType<Update.Step<Model, Message>>(),
+  M.tagsExhaustive({
+    Selected:
+      ({ value }) =>
+      model => [evo(model, { currentStep: () => value }), []],
+  }),
+)
+
+const foldStepMenu = Update.foldChild({
+  update: StepMenu.update,
+  read: (model: Model) => Option.some(model.stepMenu),
+  write: (model, nextStepMenu) => evo(model, { stepMenu: () => nextStepMenu }),
+  toParentMessage: message => Message.GotStepMenuMessage({ message }),
+  foldOutMessage: foldStepMenuOutMessage,
+})
+
+const foldStepTabsOutMessage = M.type<Tabs.OutMessage<Step.Step>>().pipe(
+  M.withReturnType<Update.Step<Model, Message>>(),
+  M.tagsExhaustive({
+    Selected:
+      ({ value }) =>
+      model => [evo(model, { currentStep: () => value }), []],
+  }),
+)
+
+const foldStepTabs = Update.foldChild({
+  update: StepTabs.update,
+  read: (model: Model) => Option.some(model.stepTabs),
+  write: (model, nextStepTabs) => evo(model, { stepTabs: () => nextStepTabs }),
+  toParentMessage: message => Message.GotStepTabsMessage({ message }),
+  foldOutMessage: foldStepTabsOutMessage,
+})
+
+export const update = (model: Model, message: Message) =>
+  Message.match<UpdateReturn>(message, {
+    GotPersonalInfoMessage: ({ message }) => foldPersonalInfo(model, message),
+
+    GotWorkHistoryMessage: ({ message }) => foldWorkHistory(model, message),
+
+    GotEducationMessage: ({ message }) => foldEducation(model, message),
+
+    GotSkillsMessage: ({ message }) => foldSkills(model, message),
+
+    GotCoverLetterMessage: ({ message }) => foldCoverLetter(model, message),
+
+    GotAttachmentsMessage: ({ message }) => foldAttachments(model, message),
+
+    GotStepMenuMessage: ({ message }) => foldStepMenu(model, message),
+
+    GotStepTabsMessage: ({ message }) => foldStepTabs(model, message),
+
+    NavigatedToStep: ({ step }) => [
+      evo(model, { currentStep: () => step }),
+      [],
+    ],
+
+    ClickedNext: () => [evo(model, { currentStep: toNextStep }), []],
+
+    ClickedPrevious: () => [evo(model, { currentStep: toPreviousStep }), []],
+    ToggledPreview: () => [
+      evo(model, { isPreviewVisible: isVisible => !isVisible }),
+      [],
+    ],
+
+    ClickedSubmit: () => {
+      const revealedModel = evo(model, {
+        personalInfo: PersonalInfo.revealErrors,
+        workHistory: WorkHistory.revealErrors,
+        education: Education.revealErrors,
+        skills: Skills.revealErrors,
+        isSubmitAttempted: () => true,
+      })
+      if (isApplicationComplete(revealedModel)) {
+        return [
+          evo(revealedModel, { submission: () => Submitting() }),
+          [SubmitApplication()],
+        ]
+      }
+      return [revealedModel, []]
+    },
+
+    SucceededSubmitApplication: () => [
+      evo(model, { submission: () => SubmitSuccess() }),
+      [],
+    ],
+
+    FailedSubmitApplication: ({ error }) => [
+      evo(model, { submission: () => SubmitError({ error }) }),
+      [],
+    ],
+  })

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

@@ -0,0 +1,215 @@
+import clsx from 'clsx'
+import { Array, Match as M, Number, Option } from 'effect'
+import { File, Submodel } from 'foldkit'
+import type { Html, HtmlBuilder } from 'foldkit/html'
+
+import { Button, FileDrop } from '@foldkit/ui'
+
+import { Attachments } from '../step'
+import { Message } from '../step/attachments'
+
+const BYTES_PER_KB = 1024
+const BYTES_PER_MB = BYTES_PER_KB * BYTES_PER_KB
+
+const formatFileSize = (bytes: number): string =>
+  M.value(bytes).pipe(
+    M.when(Number.isLessThan(BYTES_PER_KB), () => `${bytes} B`),
+    M.when(
+      Number.isLessThan(BYTES_PER_MB),
+      () => `${(bytes / BYTES_PER_KB).toFixed(1)} KB`,
+    ),
+    M.orElse(() => `${(bytes / BYTES_PER_MB).toFixed(1)} MB`),
+  )
+
+const dropZoneClassName =
+  'block cursor-pointer rounded-lg border-2 border-dashed px-4 py-6 text-center transition border-gray-300 hover:border-indigo-400 hover:bg-indigo-50/50 data-[drag-over]:border-indigo-500 data-[drag-over]:bg-indigo-50'
+
+const fileKey = (file: File.File): string =>
+  `${File.name(file)}:${File.size(file)}:${file.lastModified}`
+
+const resumeView = (
+  resume: File.File,
+  h: HtmlBuilder<Attachments.Message>,
+): Html =>
+  h.div(
+    [
+      h.Class(
+        'flex items-center justify-between rounded-lg border border-gray-200 px-4 py-3',
+      ),
+    ],
+    [
+      h.div(
+        [h.Class('flex items-center gap-3')],
+        [
+          h.span([h.Class('text-lg')], ['📄']),
+          h.div(
+            [],
+            [
+              h.p(
+                [h.Class('text-sm font-medium text-gray-900')],
+                [File.name(resume)],
+              ),
+              h.p(
+                [h.Class('text-xs text-gray-500')],
+                [formatFileSize(File.size(resume))],
+              ),
+            ],
+          ),
+        ],
+      ),
+      Button.view(
+        {
+          onClick: Message.RemovedResume(),
+          toView: attributes =>
+            h.button(
+              [
+                ...attributes.button,
+                h.Class(
+                  'text-sm text-gray-400 hover:text-red-500 transition cursor-pointer',
+                ),
+              ],
+              ['Remove'],
+            ),
+        },
+        h,
+      ),
+    ],
+  )
+
+const additionalFileView = (
+  file: File.File,
+  fileIndex: number,
+  h: HtmlBuilder<Attachments.Message>,
+): Html =>
+  h.keyed('div')(
+    fileKey(file),
+    [
+      h.Class(
+        'flex items-center justify-between rounded-lg border border-gray-200 px-3 py-2',
+      ),
+    ],
+    [
+      h.div(
+        [h.Class('flex items-center gap-2')],
+        [
+          h.span([h.Class('text-sm')], ['📎']),
+          h.span([h.Class('text-sm text-gray-700')], [File.name(file)]),
+          h.span(
+            [h.Class('text-xs text-gray-400')],
+            [formatFileSize(File.size(file))],
+          ),
+        ],
+      ),
+      Button.view(
+        {
+          onClick: Message.RemovedAdditionalFile({ fileIndex }),
+          toView: attributes =>
+            h.button(
+              [
+                ...attributes.button,
+                h.Class(
+                  'text-xs text-gray-400 hover:text-red-500 transition cursor-pointer',
+                ),
+              ],
+              ['Remove'],
+            ),
+        },
+        h,
+      ),
+    ],
+  )
+
+export const attachmentsView = Submodel.defineView<
+  Attachments.Model,
+  Attachments.Message
+>((model, h): Html => {
+  const { resumeDrop, maybeResume, additionalFilesDrop, additionalFiles } =
+    model
+
+  const resumeSection = h.div(
+    [h.Class('space-y-2')],
+    [
+      h.h3([h.Class('text-sm font-medium text-gray-700')], ['Resume (PDF)']),
+      Option.match(maybeResume, {
+        onNone: () =>
+          h.submodel({
+            slotId: resumeDrop.id,
+            model: resumeDrop,
+            view: FileDrop.view,
+            viewInputs: {
+              accept: ['application/pdf', '.doc', '.docx'],
+              toView: attributes =>
+                h.label(
+                  [
+                    ...attributes.root,
+                    h.Class(clsx(dropZoneClassName, 'py-6')),
+                  ],
+                  [
+                    h.p(
+                      [h.Class('text-sm text-gray-600')],
+                      ['Drop your resume or click to upload'],
+                    ),
+                    h.p(
+                      [h.Class('text-xs text-gray-400 mt-1')],
+                      ['PDF, DOC, or DOCX up to 10MB'],
+                    ),
+                    h.input(attributes.input),
+                  ],
+                ),
+            },
+            toParentMessage: message =>
+              Message.GotResumeDropMessage({ message }),
+          }),
+        onSome: resume => resumeView(resume, h),
+      }),
+    ],
+  )
+
+  const additionalSection = h.div(
+    [h.Class('space-y-2')],
+    [
+      h.h3(
+        [h.Class('text-sm font-medium text-gray-700')],
+        ['Additional Files (optional)'],
+      ),
+      h.submodel({
+        slotId: additionalFilesDrop.id,
+        model: additionalFilesDrop,
+        view: FileDrop.view,
+        viewInputs: {
+          multiple: true,
+          toView: attributes =>
+            h.label(
+              [...attributes.root, h.Class(clsx(dropZoneClassName, 'py-8'))],
+              [
+                h.p(
+                  [h.Class('text-sm text-gray-500')],
+                  ['Drag and drop files here, or click to browse'],
+                ),
+                h.p(
+                  [h.Class('text-xs text-gray-400 mt-1')],
+                  ['Cover letters, certifications, portfolios, etc.'],
+                ),
+                h.input(attributes.input),
+              ],
+            ),
+        },
+        toParentMessage: message =>
+          Message.GotAdditionalFilesDropMessage({ message }),
+      }),
+      ...Array.match(additionalFiles, {
+        onEmpty: () => [],
+        onNonEmpty: files => [
+          h.div(
+            [h.Class('space-y-2')],
+            files.map((file, fileIndex) =>
+              additionalFileView(file, fileIndex, h),
+            ),
+          ),
+        ],
+      }),
+    ],
+  )
+
+  return h.div([h.Class('space-y-6')], [resumeSection, additionalSection])
+})

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

@@ -0,0 +1,73 @@
+import clsx from 'clsx'
+import { Submodel } from 'foldkit'
+import type { Html } from 'foldkit/html'
+
+import { Textarea } from '@foldkit/ui'
+
+import { CoverLetter } from '../step'
+import { Message } from '../step/coverLetter'
+
+const MAX_COVER_LETTER_LENGTH = 2000
+const WARNING_THRESHOLD_CHARS = 200
+
+export const coverLetterView = Submodel.defineView<
+  CoverLetter.Model,
+  CoverLetter.Message
+>((model, h): Html => {
+  const remaining = MAX_COVER_LETTER_LENGTH - model.content.length
+  const isOverLimit = remaining < 0
+  const isWarning = !isOverLimit && remaining <= WARNING_THRESHOLD_CHARS
+
+  return Textarea.view(
+    {
+      id: 'cover-letter',
+      value: model.content,
+      onInput: value => Message.UpdatedContent({ value }),
+      rows: 12,
+      placeholder:
+        'Tell us why you want to work on Foldkit and what excites you about the Elm Architecture...',
+      isInvalid: isOverLimit,
+      toView: attributes =>
+        h.div(
+          [h.Class('space-y-2')],
+          [
+            h.label(
+              [
+                ...attributes.label,
+                h.Class('block text-sm font-medium text-gray-700'),
+              ],
+              ['Cover Letter'],
+            ),
+            h.textarea([
+              ...attributes.textarea,
+              h.Class(
+                'w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 data-[invalid]:border-red-500',
+              ),
+            ]),
+            h.div(
+              [h.Class('flex justify-between text-sm')],
+              [
+                h.p(
+                  [h.Class('text-gray-500')],
+                  ['A strong cover letter helps your application stand out.'],
+                ),
+                h.span(
+                  [
+                    h.Class(
+                      clsx(
+                        isOverLimit && 'font-medium text-red-600',
+                        isWarning && 'font-medium text-amber-600',
+                        !isOverLimit && !isWarning && 'text-gray-400',
+                      ),
+                    ),
+                  ],
+                  [`${remaining} characters remaining`],
+                ),
+              ],
+            ),
+          ],
+        ),
+    },
+    h,
+  )
+})

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

@@ -0,0 +1,207 @@
+import { Match as M, Option } from 'effect'
+import { type CalendarDate } from 'foldkit/calendar'
+import { type Html, inertHtml as ih } from 'foldkit/html'
+
+import { Calendar } from '@foldkit/ui'
+
+import { fullDate } from './format'
+import { chevronDown } from './icon'
+
+export const triggerClassName =
+  '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'
+
+export const panelClassName =
+  'rounded-xl border border-gray-200 bg-white p-4 shadow-lg z-10 outline-none'
+
+export const backdropClassName = 'fixed inset-0'
+
+export const triggerContent = (
+  maybeDate: Option.Option<CalendarDate>,
+  placeholder: string,
+): Html =>
+  ih.div(
+    [ih.Class('flex w-full items-center justify-between gap-2')],
+    [
+      Option.match(maybeDate, {
+        onNone: () => ih.span([ih.Class('text-gray-400')], [placeholder]),
+        onSome: date => ih.span([], [fullDate(date)]),
+      }),
+      ih.span([ih.Class('text-gray-400 shrink-0')], [chevronDown()]),
+    ],
+  )
+
+const calendarWrapperClassName =
+  'flex flex-col gap-3 select-none min-w-[248px] min-h-[260px]'
+
+const navButtonClassName =
+  'inline-flex h-8 w-8 items-center justify-center rounded-md text-gray-600 hover:bg-gray-100 cursor-pointer'
+
+const headingButtonClassName =
+  'inline-flex items-center gap-2 text-sm font-semibold text-gray-900 tabular-nums px-2 py-1 rounded-md cursor-pointer hover:bg-gray-100'
+
+const headingTextClassName = 'text-sm font-semibold text-gray-900 tabular-nums'
+
+const dayButtonClassName =
+  'flex h-8 w-8 items-center justify-center rounded-full text-sm text-gray-900 tabular-nums cursor-pointer hover:bg-gray-100 group-data-[today]:ring-1 group-data-[today]:ring-gray-400 group-data-[selected]:bg-indigo-600 group-data-[selected]:text-white! group-data-[focused]:outline-2 group-data-[focused]:outline-offset-2 group-data-[focused]:outline-indigo-500 group-data-[outside-month]:text-gray-400 group-data-[disabled]:cursor-not-allowed group-data-[disabled]:opacity-40'
+
+const monthYearGridClassName =
+  'grid grid-cols-3 grid-rows-4 gap-1 outline-none flex-1'
+
+const monthYearButtonClassName =
+  'flex h-full w-full items-center justify-center rounded-md text-sm text-gray-900 tabular-nums cursor-pointer hover:bg-gray-100 group-data-[today]:ring-1 group-data-[today]:ring-gray-400 group-data-[selected]:bg-indigo-600 group-data-[selected]:text-white! group-data-[selected]:hover:bg-indigo-600 group-data-[focused]:outline-2 group-data-[focused]:outline-offset-2 group-data-[focused]:outline-indigo-500 group-data-[disabled]:cursor-not-allowed group-data-[disabled]:opacity-40'
+
+export const calendarView = (attributes: Calendar.CalendarAttributes): Html =>
+  M.value(attributes).pipe(
+    M.tagsExhaustive({
+      Days: days =>
+        ih.div(
+          [...days.root, ih.Class(calendarWrapperClassName)],
+          [
+            ih.div(
+              [ih.Class('flex items-center justify-between gap-2')],
+              [
+                ih.button(
+                  [...days.previousMonthButton, ih.Class(navButtonClassName)],
+                  ['‹'],
+                ),
+                ih.button(
+                  [
+                    ih.Id(days.heading.id),
+                    ...days.headingButton,
+                    ih.Class(headingButtonClassName),
+                  ],
+                  [days.heading.text, chevronDown('w-3 h-3')],
+                ),
+                ih.button(
+                  [...days.nextMonthButton, ih.Class(navButtonClassName)],
+                  ['›'],
+                ),
+              ],
+            ),
+            ih.div(
+              [...days.grid, ih.Class('flex flex-col gap-1 outline-none')],
+              [
+                ih.div(
+                  [...days.headerRow, ih.Class('grid grid-cols-7 gap-1')],
+                  days.columnHeaders.map(header =>
+                    ih.div(
+                      [
+                        ...header.attributes,
+                        ih.Class(
+                          'text-center text-xs font-medium uppercase tracking-wide text-gray-500 py-1',
+                        ),
+                      ],
+                      [header.name],
+                    ),
+                  ),
+                ),
+                ...days.weeks.map(week =>
+                  ih.div(
+                    [...week.attributes, ih.Class('grid grid-cols-7 gap-1')],
+                    week.cells.map(cell =>
+                      ih.div(
+                        [
+                          ...cell.cellAttributes,
+                          ih.Class('group flex items-center justify-center'),
+                        ],
+                        [
+                          ih.button(
+                            [
+                              ...cell.buttonAttributes,
+                              ih.Class(dayButtonClassName),
+                            ],
+                            [cell.label],
+                          ),
+                        ],
+                      ),
+                    ),
+                  ),
+                ),
+              ],
+            ),
+          ],
+        ),
+      Months: months =>
+        ih.div(
+          [...months.root, ih.Class(calendarWrapperClassName)],
+          [
+            ih.div(
+              [ih.Class('flex items-center justify-center gap-2')],
+              [
+                ih.button(
+                  [
+                    ih.Id(months.heading.id),
+                    ...months.headingButton,
+                    ih.Class(headingButtonClassName),
+                  ],
+                  [months.heading.text, chevronDown('w-3 h-3')],
+                ),
+              ],
+            ),
+            ih.div(
+              [...months.grid, ih.Class(monthYearGridClassName)],
+              months.cells.map(cell =>
+                ih.div(
+                  [
+                    ...cell.cellAttributes,
+                    ih.Class('group flex items-center justify-center'),
+                  ],
+                  [
+                    ih.button(
+                      [
+                        ...cell.buttonAttributes,
+                        ih.Class(monthYearButtonClassName),
+                      ],
+                      [cell.shortLabel],
+                    ),
+                  ],
+                ),
+              ),
+            ),
+          ],
+        ),
+      Years: years =>
+        ih.div(
+          [...years.root, ih.Class(calendarWrapperClassName)],
+          [
+            ih.div(
+              [ih.Class('flex items-center justify-between gap-2')],
+              [
+                ih.button(
+                  [...years.previousPageButton, ih.Class(navButtonClassName)],
+                  ['‹'],
+                ),
+                ih.h2(
+                  [ih.Id(years.heading.id), ih.Class(headingTextClassName)],
+                  [years.heading.text],
+                ),
+                ih.button(
+                  [...years.nextPageButton, ih.Class(navButtonClassName)],
+                  ['›'],
+                ),
+              ],
+            ),
+            ih.div(
+              [...years.grid, ih.Class(monthYearGridClassName)],
+              years.cells.map(cell =>
+                ih.div(
+                  [
+                    ...cell.cellAttributes,
+                    ih.Class('group flex items-center justify-center'),
+                  ],
+                  [
+                    ih.button(
+                      [
+                        ...cell.buttonAttributes,
+                        ih.Class(monthYearButtonClassName),
+                      ],
+                      [cell.label],
+                    ),
+                  ],
+                ),
+              ),
+            ),
+          ],
+        ),
+    }),
+  )