create-foldkit-app 0.27.3 → 0.28.0

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

@@ -0,0 +1,352 @@
+import clsx from 'clsx'
+import { Array, Equal, HashSet, Match as M, Option, pipe } from 'effect'
+import type { ChildAttribute, Document, Html, HtmlBuilder } from 'foldkit/html'
+
+import { Button, Tabs } from '@foldkit/ui'
+
+import { Step } from '../domain'
+import { Message } from '../message'
+import { type Model } from '../model'
+import { Education, PersonalInfo, Skills, WorkHistory } from '../step'
+import { attachmentsView } from './attachments'
+import { coverLetterView } from './coverLetter'
+import { educationView } from './education'
+import { personalInfoView } from './personalInfo'
+import { preview } from './preview'
+import { review } from './review'
+import { skillsView } from './skills'
+import { stepMenu, stepTabButton } from './stepNav'
+import { workHistoryView } from './workHistory'
+
+const StepTabs = Tabs.create<Step.Step>()
+
+const stepHasErrors =
+  (model: Model) =>
+  (step: Step.Step): boolean =>
+    M.value(step).pipe(
+      M.when('PersonalInfo', () => PersonalInfo.hasErrors(model.personalInfo)),
+      M.when('WorkHistory', () => WorkHistory.hasErrors(model.workHistory)),
+      M.when('Education', () => Education.hasErrors(model.education)),
+      M.when('Skills', () => Skills.hasErrors(model.skills)),
+      M.orElse(() => false),
+    )
+
+const stepIsComplete =
+  (model: Model) =>
+  (step: Step.Step): boolean =>
+    M.value(step).pipe(
+      M.when('PersonalInfo', () => PersonalInfo.isComplete(model.personalInfo)),
+      M.when('WorkHistory', () => WorkHistory.isComplete(model.workHistory)),
+      M.when('Education', () => Education.isComplete(model.education)),
+      M.when('Skills', () => Skills.isComplete(model.skills)),
+      M.orElse(() => true),
+    )
+
+const stepNeedsAttention =
+  (model: Model) =>
+  (step: Step.Step): boolean =>
+    stepHasErrors(model)(step) ||
+    (model.isSubmitAttempted && !stepIsComplete(model)(step))
+
+const stepsNeedingAttention = (model: Model): ReadonlyArray<Step.Step> =>
+  Array.filter(Step.all, stepNeedsAttention(model))
+
+const stepContent = (
+  model: Model,
+  attentionSteps: ReadonlyArray<Step.Step>,
+  h: HtmlBuilder<Message>,
+): Html =>
+  M.value(model.currentStep).pipe(
+    M.when('PersonalInfo', () =>
+      h.submodel({
+        slotId: 'personal-info',
+        model: model.personalInfo,
+        view: personalInfoView,
+        toParentMessage: message => Message.GotPersonalInfoMessage({ message }),
+      }),
+    ),
+    M.when('WorkHistory', () =>
+      h.submodel({
+        slotId: 'work-history',
+        model: model.workHistory,
+        view: workHistoryView,
+        toParentMessage: message => Message.GotWorkHistoryMessage({ message }),
+      }),
+    ),
+    M.when('Education', () =>
+      h.submodel({
+        slotId: 'education',
+        model: model.education,
+        view: educationView,
+        toParentMessage: message => Message.GotEducationMessage({ message }),
+      }),
+    ),
+    M.when('Skills', () =>
+      h.submodel({
+        slotId: 'skills',
+        model: model.skills,
+        view: skillsView,
+        toParentMessage: message => Message.GotSkillsMessage({ message }),
+      }),
+    ),
+    M.when('CoverLetter', () =>
+      h.submodel({
+        slotId: 'cover-letter',
+        model: model.coverLetter,
+        view: coverLetterView,
+        toParentMessage: message => Message.GotCoverLetterMessage({ message }),
+      }),
+    ),
+    M.when('Attachments', () =>
+      h.submodel({
+        slotId: 'attachments',
+        model: model.attachments,
+        view: attachmentsView,
+        toParentMessage: message => Message.GotAttachmentsMessage({ message }),
+      }),
+    ),
+    M.when('Review', () => review(model, attentionSteps, h)),
+    M.exhaustive,
+  )
+
+const isFirstStep = (model: Model): boolean =>
+  pipe(Step.all, Array.head, Option.exists(Equal.equals(model.currentStep)))
+
+const isLastStep = (model: Model): boolean =>
+  pipe(Step.all, Array.last, Option.exists(Equal.equals(model.currentStep)))
+
+const navigationButtons = (model: Model, h: HtmlBuilder<Message>): Html =>
+  h.div(
+    [h.Class('flex justify-between pt-6 mt-8 border-t border-gray-200')],
+    [
+      ...(isFirstStep(model)
+        ? [h.empty]
+        : [
+            Button.view(
+              {
+                onClick: Message.ClickedPrevious(),
+                toView: attributes =>
+                  h.button(
+                    [
+                      ...attributes.button,
+                      h.Class(
+                        'rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition cursor-pointer',
+                      ),
+                    ],
+                    ['← Previous'],
+                  ),
+              },
+              h,
+            ),
+          ]),
+      ...(isLastStep(model)
+        ? []
+        : [
+            Button.view(
+              {
+                onClick: Message.ClickedNext(),
+                toView: attributes =>
+                  h.button(
+                    [
+                      ...attributes.button,
+                      h.Class(
+                        'rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 transition cursor-pointer',
+                      ),
+                    ],
+                    ['Next →'],
+                  ),
+              },
+              h,
+            ),
+          ]),
+    ],
+  )
+
+const pageHeader = (h: HtmlBuilder<Message>): Html =>
+  h.div(
+    [h.Class('mb-6')],
+    [
+      h.h1(
+        [h.Class('text-2xl font-bold text-gray-900')],
+        ['Apply to Work on Foldkit'],
+      ),
+      h.p(
+        [h.Class('text-sm text-gray-500 mt-1')],
+        ['Fill out the form below and watch your resume build in real time.'],
+      ),
+    ],
+  )
+
+const stepContentPanel = (
+  model: Model,
+  attentionSteps: ReadonlyArray<Step.Step>,
+  panelAttributes: ReadonlyArray<ChildAttribute>,
+  h: HtmlBuilder<Message>,
+): Html =>
+  h.div(
+    [...panelAttributes, h.Class('flex-1 min-w-0')],
+    [
+      h.h2(
+        [h.Class('text-lg font-semibold text-gray-900 mb-6')],
+        [Step.show(model.currentStep)],
+      ),
+      h.div(
+        [h.Class('min-h-[400px]')],
+        [stepContent(model, attentionSteps, h)],
+      ),
+      ...(model.currentStep !== 'Review' ? [navigationButtons(model, h)] : []),
+    ],
+  )
+
+const stepTabsLayout = (
+  model: Model,
+  attentionSteps: ReadonlyArray<Step.Step>,
+  attentionStepSet: HashSet.HashSet<Step.Step>,
+  h: HtmlBuilder<Message>,
+): Html =>
+  h.submodel({
+    slotId: model.stepTabs.id,
+    model: model.stepTabs,
+    view: StepTabs.view,
+    viewInputs: {
+      tabs: Step.all,
+      selectedValue: model.currentStep,
+      ariaLabel: 'Application steps',
+      orientation: 'Vertical',
+      toView: ({ tablist, tabs, activeIndex }) =>
+        h.div(
+          [h.Class('lg:flex lg:gap-8')],
+          [
+            h.div(
+              [h.Class('hidden w-60 shrink-0 lg:block')],
+              [
+                h.div(
+                  [h.Class('sticky top-8')],
+                  [
+                    h.div(
+                      [...tablist, h.Class('space-y-0.5')],
+                      Array.map(tabs, tab =>
+                        stepTabButton(
+                          tab,
+                          model.currentStep,
+                          attentionStepSet,
+                          h,
+                        ),
+                      ),
+                    ),
+                  ],
+                ),
+              ],
+            ),
+            ...pipe(
+              tabs,
+              Array.filter(tab => tab.index === activeIndex),
+              Array.map(tab =>
+                stepContentPanel(model, attentionSteps, tab.panel, h),
+              ),
+            ),
+            desktopPreviewSidebar(model, h),
+            mobilePreviewToggle(model, h),
+            ...(model.isPreviewVisible ? [mobilePreviewOverlay(model, h)] : []),
+          ],
+        ),
+    },
+    toParentMessage: message => Message.GotStepTabsMessage({ message }),
+  })
+
+const desktopPreviewSidebar = (model: Model, h: HtmlBuilder<Message>): Html =>
+  h.div(
+    [h.Class('hidden w-80 shrink-0 xl:block')],
+    [
+      h.div(
+        [h.Class('sticky top-8')],
+        [
+          h.div(
+            [h.Class('mb-2 flex items-center justify-between')],
+            [
+              h.h2(
+                [h.Class('text-sm font-semibold text-gray-700')],
+                ['Live Preview'],
+              ),
+            ],
+          ),
+          h.div(
+            [
+              h.Class(
+                'rounded-xl border border-gray-200 bg-white p-6 shadow-sm',
+              ),
+            ],
+            [preview(model)],
+          ),
+        ],
+      ),
+    ],
+  )
+
+const mobilePreviewToggle = (model: Model, h: HtmlBuilder<Message>): Html =>
+  h.div(
+    [h.Class('fixed top-4 right-4 xl:hidden')],
+    [
+      Button.view(
+        {
+          onClick: Message.ToggledPreview(),
+          toView: attributes =>
+            h.button(
+              [
+                ...attributes.button,
+                h.Class(
+                  clsx(
+                    'rounded-full px-4 py-2 text-sm font-medium shadow-lg transition cursor-pointer',
+                    model.isPreviewVisible
+                      ? 'bg-gray-800 text-white'
+                      : 'bg-indigo-600 text-white',
+                  ),
+                ),
+              ],
+              [model.isPreviewVisible ? 'Hide Preview' : 'Preview'],
+            ),
+        },
+        h,
+      ),
+    ],
+  )
+
+const mobilePreviewOverlay = (model: Model, h: HtmlBuilder<Message>): Html =>
+  h.div(
+    [
+      h.Class(
+        'fixed inset-x-4 top-16 bottom-4 overflow-y-auto rounded-xl border border-gray-200 bg-white p-6 shadow-2xl xl:hidden',
+      ),
+    ],
+    [preview(model)],
+  )
+
+export const view = (model: Model, h: HtmlBuilder<Message>): Document => {
+  const attentionSteps = stepsNeedingAttention(model)
+  const attentionStepSet = HashSet.fromIterable(attentionSteps)
+  const body = h.div(
+    [h.Class('min-h-screen bg-gray-50')],
+    [
+      h.div(
+        [h.Class('mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8')],
+        [
+          pageHeader(h),
+          h.div(
+            [h.Class('mb-6 lg:hidden')],
+            [
+              stepMenu(
+                model,
+                attentionStepSet,
+                message => Message.GotStepMenuMessage({ message }),
+                h,
+              ),
+            ],
+          ),
+          stepTabsLayout(model, attentionSteps, attentionStepSet, h),
+        ],
+      ),
+    ],
+  )
+
+  return { title: 'Job Application', body }
+}

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

@@ -0,0 +1,224 @@
+import { Equal, Option } from 'effect'
+import { Submodel } from 'foldkit'
+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 { 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'
+
+const PronounsListbox = Listbox.create<string>()
+
+export const personalInfoView = Submodel.defineView<
+  PersonalInfo.Model,
+  PersonalInfo.Message
+>((model, h): Html => {
+  const {
+    firstName,
+    lastName,
+    email,
+    phone,
+    pronouns,
+    maybeSelectedPronoun,
+    customPronouns,
+    portfolioUrl,
+    availableDate,
+  } = model
+
+  const isOtherSelected = Option.exists(
+    maybeSelectedPronoun,
+    Equal.equals('Other'),
+  )
+
+  const selectedPronounLabel = Option.getOrElse(
+    maybeSelectedPronoun,
+    () => 'Select pronouns',
+  )
+
+  return h.div(
+    [h.Class('space-y-4')],
+    [
+      h.div(
+        [h.Class('grid grid-cols-2 gap-4')],
+        [
+          inputField(
+            {
+              id: 'first-name',
+              label: 'First Name',
+              field: firstName,
+              onInput: value => Message.UpdatedFirstName({ value }),
+              placeholder: 'Jane',
+            },
+            h,
+          ),
+          inputField(
+            {
+              id: 'last-name',
+              label: 'Last Name',
+              field: lastName,
+              onInput: value => Message.UpdatedLastName({ value }),
+              placeholder: 'Doe',
+            },
+            h,
+          ),
+        ],
+      ),
+      inputField(
+        {
+          id: 'email',
+          label: 'Email',
+          field: email,
+          onInput: value => Message.UpdatedEmail({ value }),
+          type: 'email',
+          placeholder: 'jane@example.com',
+        },
+        h,
+      ),
+      inputField(
+        {
+          id: 'phone',
+          label: 'Phone (optional)',
+          field: phone,
+          onInput: value => Message.UpdatedPhone({ value }),
+          type: 'tel',
+          placeholder: '+1 (555) 123-4567',
+        },
+        h,
+      ),
+      h.div(
+        [h.Class('space-y-1')],
+        [
+          h.label(
+            [h.Class('block text-sm font-medium text-gray-700')],
+            ['Pronouns (optional)'],
+          ),
+          h.submodel({
+            slotId: pronouns.id,
+            model: pronouns,
+            view: PronounsListbox.view,
+            viewInputs: {
+              anchor: { placement: 'bottom-start', gap: 4, padding: 8 },
+              items: PronounOption.all,
+              maybeSelectedValue: maybeSelectedPronoun,
+              itemToConfig: (pronoun, { isSelected }) => ({
+                className:
+                  'px-3 py-2 text-sm cursor-pointer hover:bg-indigo-50 data-[active]:bg-indigo-50',
+                content: h.div(
+                  [h.Class('flex items-center gap-2')],
+                  [
+                    h.span(
+                      [
+                        h.Class(
+                          `w-4 text-indigo-600 ${isSelected ? 'visible' : 'invisible'}`,
+                        ),
+                      ],
+                      ['✓'],
+                    ),
+                    h.span([], [pronoun]),
+                  ],
+                ),
+              }),
+              buttonContent: h.div(
+                [h.Class('flex w-full items-center justify-between gap-2')],
+                [
+                  h.span(
+                    [
+                      h.Class(
+                        Option.match(maybeSelectedPronoun, {
+                          onNone: () => 'text-gray-400',
+                          onSome: () => 'text-gray-900',
+                        }),
+                      ),
+                    ],
+                    [selectedPronounLabel],
+                  ),
+                  h.span([h.Class('text-gray-400')], [chevronDown('w-4 h-4')]),
+                ],
+              ),
+              buttonAttributes: childAttributes([
+                h.Class(
+                  'w-full rounded-lg border border-gray-300 px-3 py-2 text-sm text-left focus:outline-none focus:ring-2 focus:ring-indigo-500',
+                ),
+              ]),
+              itemsAttributes: childAttributes([
+                h.Class(
+                  'w-(--button-width) rounded-lg border border-gray-200 bg-white shadow-lg overflow-hidden',
+                ),
+              ]),
+              backdropAttributes: childAttributes([h.Class('fixed inset-0')]),
+            },
+            toParentMessage: message => Message.GotPronounsMessage({ message }),
+          }),
+        ],
+      ),
+      ...(isOtherSelected
+        ? [
+            inputField(
+              {
+                id: 'custom-pronouns',
+                label: 'Custom Pronouns',
+                field: Valid({ value: customPronouns }),
+                onInput: value => Message.UpdatedCustomPronouns({ value }),
+                placeholder: 'Enter your pronouns',
+              },
+              h,
+            ),
+          ]
+        : []),
+      inputField(
+        {
+          id: 'portfolio-url',
+          label: 'Portfolio URL (optional)',
+          field: portfolioUrl,
+          onInput: value => Message.UpdatedPortfolioUrl({ value }),
+          type: 'url',
+        },
+        h,
+      ),
+      availableDatePickerView(availableDate, model.maybeAvailableDate, h),
+    ],
+  )
+})
+
+const availableDatePickerView = (
+  model: DatePicker.Model,
+  maybeSelectedDate: Option.Option<CalendarDate>,
+  h: HtmlBuilder<PersonalInfo.Message>,
+): Html =>
+  h.div(
+    [h.Class('space-y-1')],
+    [
+      h.label(
+        [h.Class('block text-sm font-medium text-gray-700')],
+        ['Available Start Date (optional)'],
+      ),
+      h.submodel({
+        slotId: model.id,
+        model,
+        view: DatePicker.view,
+        viewInputs: {
+          anchor: { placement: 'bottom-start', gap: 4, padding: 8 },
+          maybeSelectedDate,
+          triggerContent: maybeDate => triggerContent(maybeDate, 'Pick a date'),
+          triggerClassName,
+          panelClassName,
+          backdropClassName,
+          toCalendarView: calendarView,
+        },
+        toParentMessage: message =>
+          Message.GotAvailableDateMessage({ message }),
+      }),
+    ],
+  )