npm - create-foldkit-app - Versions diffs - 0.27.3 → 0.28.0 - Mend

create-foldkit-app 0.27.3 → 0.28.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (460) hide show

package/dist/templates/examples/job-application/src/view/preview.ts ADDED Viewed

@@ -0,0 +1,265 @@
+import { Array, Equal, Option, Order, Record, String, pipe } from 'effect'
+import { type Html, inertHtml as ih } from 'foldkit/html'
+import type { Model } from '../model'
+import type { Education, Skills, WorkHistory } from '../step'
+import { employmentRange } from './format'
+const COVER_LETTER_PREVIEW_MAX_CHARS = 200
+const truncate = (value: string, max: number): string =>
+  value.length > max ? `${value.slice(0, max)}...` : value
+const sectionHeading = (title: string): Html =>
+  ih.h3(
+    [
+      ih.Class(
+        'text-xs font-bold uppercase tracking-wider text-gray-400 border-b border-gray-200 pb-1 mb-2',
+      ),
+    ],
+    [title],
+  )
+const headerSection = (
+  fullName: string,
+  pronounLabel: string,
+  email: string,
+  phone: string,
+  portfolio: string,
+): Html => {
+  const contacts = Array.filter([email, phone, portfolio], String.isNonEmpty)
+  return ih.div(
+    [ih.Class('text-center mb-4 pb-4 border-b border-gray-200')],
+    [
+      ih.h2([ih.Class('text-xl font-bold text-gray-900')], [fullName]),
+      ...(String.isNonEmpty(pronounLabel)
+        ? [ih.p([ih.Class('text-xs text-gray-500 italic')], [pronounLabel])]
+        : []),
+      ...(Array.isReadonlyArrayNonEmpty(contacts)
+        ? [
+            ih.p(
+              [ih.Class('text-xs text-gray-500 mt-1 break-words')],
+              [contacts.join(' · ')],
+            ),
+          ]
+        : []),
+    ],
+  )
+}
+const workEntryView = (entry: WorkHistory.Entry.Model): Html =>
+  ih.keyed('div')(
+    `work-${entry.id}`,
+    [ih.Class('mb-3')],
+    [
+      ...(String.isNonEmpty(entry.title.value)
+        ? [
+            ih.strong(
+              [ih.Class('block text-sm text-gray-900')],
+              [entry.title.value],
+            ),
+          ]
+        : []),
+      ...(String.isNonEmpty(entry.company.value)
+        ? [ih.p([ih.Class('text-xs text-gray-600')], [entry.company.value])]
+        : []),
+      ...Option.match(entry.maybeStartDate, {
+        onNone: () => [],
+        onSome: start => [
+          ih.p(
+            [ih.Class('text-xs text-gray-400 mt-0.5')],
+            [
+              employmentRange(
+                start,
+                entry.isCurrentlyEmployed,
+                entry.maybeEndDate,
+              ),
+            ],
+          ),
+        ],
+      }),
+      ...(String.isNonEmpty(entry.description)
+        ? [ih.p([ih.Class('text-xs text-gray-600 mt-1')], [entry.description])]
+        : []),
+    ],
+  )
+const experienceSection = (workHistory: WorkHistory.Model): Html =>
+  ih.section(
+    [ih.Class('mb-4')],
+    [
+      sectionHeading('Experience'),
+      ...Array.filter(
+        workHistory.entries,
+        entry =>
+          String.isNonEmpty(entry.company.value) ||
+          String.isNonEmpty(entry.title.value),
+      ).map(entry => workEntryView(entry)),
+    ],
+  )
+const educationTimelineLine = (
+  entry: Education.Entry.Model,
+): ReadonlyArray<Html> => {
+  if (entry.isCurrentlyEnrolled) {
+    return [
+      ih.p([ih.Class('text-xs text-gray-400 mt-0.5')], ['Currently enrolled']),
+    ]
+  }
+  return Option.match(entry.maybeGraduationYear, {
+    onNone: () => [],
+    onSome: graduationYear => [
+      ih.p(
+        [ih.Class('text-xs text-gray-400 mt-0.5')],
+        [`Class of ${graduationYear}`],
+      ),
+    ],
+  })
+}
+const educationEntryView = (entry: Education.Entry.Model): Html => {
+  const degreeLine = Array.filter(
+    [entry.degree.value, entry.fieldOfStudy.value],
+    String.isNonEmpty,
+  ).join(', ')
+  return ih.keyed('div')(
+    `education-${entry.id}`,
+    [ih.Class('mb-3')],
+    [
+      ...(String.isNonEmpty(degreeLine)
+        ? [ih.strong([ih.Class('block text-sm text-gray-900')], [degreeLine])]
+        : []),
+      ...(String.isNonEmpty(entry.school.value)
+        ? [ih.p([ih.Class('text-xs text-gray-600')], [entry.school.value])]
+        : []),
+      ...educationTimelineLine(entry),
+    ],
+  )
+}
+const educationSection = (education: Education.Model): Html =>
+  ih.section(
+    [ih.Class('mb-4')],
+    [
+      sectionHeading('Education'),
+      ...Array.filter(education.entries, entry =>
+        String.isNonEmpty(entry.school.value),
+      ).map(entry => educationEntryView(entry)),
+    ],
+  )
+type SkillsByProficiency = ReadonlyArray<
+  Readonly<{ level: string; names: ReadonlyArray<string> }>
+>
+const PROFICIENCY_ORDER = ['Expert', 'Advanced', 'Intermediate', 'Beginner']
+const proficiencyRank = (level: string): number =>
+  pipe(
+    PROFICIENCY_ORDER,
+    Array.findFirstIndex(Equal.equals(level)),
+    Option.getOrElse(() => PROFICIENCY_ORDER.length),
+  )
+const proficiencyOrder = Order.mapInput(
+  Order.Number,
+  ([level]: readonly [string, unknown]) => proficiencyRank(level),
+)
+const groupSkillsByProficiency = (
+  entries: ReadonlyArray<Skills.Entry.Model>,
+): SkillsByProficiency =>
+  pipe(
+    entries,
+    Array.filter(entry => String.isNonEmpty(entry.name.value)),
+    Array.groupBy(entry => entry.proficiency),
+    Record.toEntries,
+    Array.sort(proficiencyOrder),
+    Array.map(([level, grouped]) => ({
+      level,
+      names: Array.map(grouped, entry => entry.name.value),
+    })),
+  )
+const skillGroupView = (
+  group: Readonly<{ level: string; names: ReadonlyArray<string> }>,
+): Html =>
+  ih.p(
+    [ih.Class('text-xs text-gray-700 mb-1')],
+    [
+      ih.strong([ih.Class('text-gray-900')], [`${group.level}:`]),
+      ` ${group.names.join(', ')}`,
+    ],
+  )
+const skillsSection = (skills: Skills.Model): Html => {
+  const grouped = groupSkillsByProficiency(skills.entries)
+  return ih.section(
+    [ih.Class('mb-4')],
+    [sectionHeading('Skills'), ...grouped.map(group => skillGroupView(group))],
+  )
+}
+const coverLetterSection = (content: string): Html =>
+  ih.section(
+    [],
+    [
+      sectionHeading('Cover Letter'),
+      ih.p(
+        [ih.Class('text-xs text-gray-600 whitespace-pre-wrap')],
+        [truncate(content, COVER_LETTER_PREVIEW_MAX_CHARS)],
+      ),
+    ],
+  )
+export const preview = ({
+  personalInfo: {
+    firstName: { value: firstName },
+    lastName: { value: lastName },
+    email: { value: email },
+    phone: { value: phone },
+    portfolioUrl: { value: portfolio },
+    maybeSelectedPronoun,
+    customPronouns,
+  },
+  workHistory,
+  education,
+  skills,
+  coverLetter,
+}: Model): Html => {
+  const fullName =
+    String.isNonEmpty(firstName) || String.isNonEmpty(lastName)
+      ? `${firstName} ${lastName}`.trim()
+      : 'Your Name'
+  const pronounLabel = Option.match(maybeSelectedPronoun, {
+    onNone: () => '',
+    onSome: value => (value === 'Other' ? customPronouns : value),
+  })
+  const hasExperience = Array.some(
+    workHistory.entries,
+    entry =>
+      String.isNonEmpty(entry.company.value) ||
+      String.isNonEmpty(entry.title.value),
+  )
+  const hasEducation = Array.some(education.entries, entry =>
+    String.isNonEmpty(entry.school.value),
+  )
+  const hasSkills = Array.some(skills.entries, entry =>
+    String.isNonEmpty(entry.name.value),
+  )
+  return ih.div(
+    [ih.Class('font-serif')],
+    [
+      headerSection(fullName, pronounLabel, email, phone, portfolio),
+      ...(hasExperience ? [experienceSection(workHistory)] : []),
+      ...(hasEducation ? [educationSection(education)] : []),
+      ...(hasSkills ? [skillsSection(skills)] : []),
+      ...(String.isNonEmpty(coverLetter.content)
+        ? [coverLetterSection(coverLetter.content)]
+        : []),
+    ],
+  )
+}

package/dist/templates/examples/job-application/src/view/review.ts ADDED Viewed

@@ -0,0 +1,388 @@
+import { Array, Match as M, Option, pipe } from 'effect'
+import { File } from 'foldkit'
+import type { Html, HtmlBuilder } from 'foldkit/html'
+import { Button } from '@foldkit/ui'
+import { Step } from '../domain'
+import { Message } from '../message'
+import type { Model } from '../model'
+import { Education, PersonalInfo, Skills, WorkHistory } from '../step'
+import { employmentRange, pluralize } from './format'
+const reviewSection = (
+  title: string,
+  content: Html,
+  h: HtmlBuilder<Message>,
+): Html =>
+  h.section(
+    [h.Class('rounded-lg border border-gray-200 p-4')],
+    [
+      h.h3([h.Class('text-sm font-semibold text-gray-900 mb-2')], [title]),
+      content,
+    ],
+  )
+const fieldRow = (
+  label: string,
+  value: string,
+  h: HtmlBuilder<Message>,
+): Html =>
+  value
+    ? h.div(
+        [h.Class('flex justify-between py-1')],
+        [
+          h.span([h.Class('text-sm text-gray-500')], [label]),
+          h.span([h.Class('text-sm text-gray-900')], [value]),
+        ],
+      )
+    : h.empty
+const personalInfoSection = (
+  personalInfo: Model['personalInfo'],
+  pronounLabel: string,
+  h: HtmlBuilder<Message>,
+): Html =>
+  reviewSection(
+    'Personal Information',
+    h.div(
+      [h.Class('divide-y divide-gray-100')],
+      [
+        fieldRow(
+          'Name',
+          `${personalInfo.firstName.value} ${personalInfo.lastName.value}`.trim(),
+          h,
+        ),
+        fieldRow('Email', personalInfo.email.value, h),
+        fieldRow('Phone', personalInfo.phone.value, h),
+        fieldRow('Pronouns', pronounLabel, h),
+        fieldRow('Portfolio', personalInfo.portfolioUrl.value, h),
+      ],
+    ),
+    h,
+  )
+const workEntryReview = (
+  entry: WorkHistory.Entry.Model,
+  h: HtmlBuilder<Message>,
+): Html => {
+  const title = entry.company.value
+    ? `${entry.title.value} at ${entry.company.value}`
+    : entry.title.value
+  return h.keyed('div')(
+    entry.id,
+    [h.Class('py-1')],
+    [
+      h.strong([h.Class('text-sm text-gray-900')], [title]),
+      ...Option.match(entry.maybeStartDate, {
+        onNone: () => [],
+        onSome: start => [
+          h.p(
+            [h.Class('text-xs text-gray-500')],
+            [
+              employmentRange(
+                start,
+                entry.isCurrentlyEmployed,
+                entry.maybeEndDate,
+              ),
+            ],
+          ),
+        ],
+      }),
+    ],
+  )
+}
+const workHistorySection = (
+  workHistory: Model['workHistory'],
+  h: HtmlBuilder<Message>,
+): Html =>
+  reviewSection(
+    `Work History (${pluralize(workHistory.entries.length, 'position', 'positions')})`,
+    h.div(
+      [h.Class('space-y-2')],
+      workHistory.entries.map(entry => workEntryReview(entry, h)),
+    ),
+    h,
+  )
+const educationTimeline = (entry: Education.Entry.Model): string => {
+  if (entry.isCurrentlyEnrolled) {
+    return ' (Currently enrolled)'
+  }
+  return Option.match(entry.maybeGraduationYear, {
+    onNone: () => '',
+    onSome: graduationYear => ` – ${graduationYear}`,
+  })
+}
+const educationEntryReview = (
+  entry: Education.Entry.Model,
+  h: HtmlBuilder<Message>,
+): Html => {
+  const title = entry.fieldOfStudy.value
+    ? `${entry.degree.value} in ${entry.fieldOfStudy.value}`
+    : entry.degree.value
+  return h.keyed('div')(
+    entry.id,
+    [h.Class('py-1')],
+    [
+      h.strong([h.Class('text-sm text-gray-900')], [title]),
+      h.p(
+        [h.Class('text-xs text-gray-500')],
+        [entry.school.value + educationTimeline(entry)],
+      ),
+    ],
+  )
+}
+const educationSection = (
+  education: Model['education'],
+  h: HtmlBuilder<Message>,
+): Html =>
+  reviewSection(
+    `Education (${pluralize(education.entries.length, 'entry', 'entries')})`,
+    h.div(
+      [h.Class('space-y-2')],
+      education.entries.map(entry => educationEntryReview(entry, h)),
+    ),
+    h,
+  )
+const skillsSection = (
+  skills: Model['skills'],
+  h: HtmlBuilder<Message>,
+): Html =>
+  reviewSection(
+    `Skills (${skills.entries.length})`,
+    h.div(
+      [h.Class('flex flex-wrap gap-1.5')],
+      skills.entries
+        .filter(entry => entry.name.value)
+        .map(entry =>
+          h.keyed('span')(
+            entry.id,
+            [
+              h.Class(
+                'rounded-full bg-indigo-50 px-2.5 py-0.5 text-xs font-medium text-indigo-700',
+              ),
+            ],
+            [entry.name.value],
+          ),
+        ),
+    ),
+    h,
+  )
+const coverLetterSection = (
+  coverLetter: Model['coverLetter'],
+  h: HtmlBuilder<Message>,
+): Html =>
+  reviewSection(
+    'Cover Letter',
+    coverLetter.content
+      ? h.p(
+          [h.Class('text-sm text-gray-700 whitespace-pre-wrap')],
+          [coverLetter.content],
+        )
+      : h.p(
+          [h.Class('text-sm text-gray-400 italic')],
+          ['No cover letter provided'],
+        ),
+    h,
+  )
+const attachmentsSection = (
+  attachments: Model['attachments'],
+  h: HtmlBuilder<Message>,
+): Html =>
+  reviewSection(
+    'Attachments',
+    h.div(
+      [h.Class('space-y-1')],
+      [
+        Option.match(attachments.maybeResume, {
+          onNone: () =>
+            h.p(
+              [h.Class('text-sm text-gray-400 italic')],
+              ['No resume uploaded'],
+            ),
+          onSome: resume =>
+            h.div(
+              [h.Class('flex items-center gap-2')],
+              [
+                h.span([], ['📄']),
+                h.span([h.Class('text-sm text-gray-700')], [File.name(resume)]),
+              ],
+            ),
+        }),
+        ...attachments.additionalFiles.map(file =>
+          h.div(
+            [h.Class('flex items-center gap-2')],
+            [
+              h.span([], ['📎']),
+              h.span([h.Class('text-sm text-gray-700')], [File.name(file)]),
+            ],
+          ),
+        ),
+      ],
+    ),
+    h,
+  )
+const submitButtonClass =
+  'w-full rounded-lg bg-indigo-600 px-4 py-3 text-sm font-semibold text-white hover:bg-indigo-700 transition cursor-pointer'
+const blockedNoticeText = (attentionSteps: ReadonlyArray<Step.Step>): string =>
+  Array.match(attentionSteps, {
+    onEmpty: () => 'Review the required fields before submitting.',
+    onNonEmpty: steps =>
+      `Review ${pipe(steps, Array.map(Step.show), Array.join(', '))} before submitting.`,
+  })
+const blockedNotice = (
+  attentionSteps: ReadonlyArray<Step.Step>,
+  h: HtmlBuilder<Message>,
+): Html =>
+  h.p(
+    [h.Class('text-sm text-red-600 text-center')],
+    [blockedNoticeText(attentionSteps)],
+  )
+const submissionSection = (
+  submission: Model['submission'],
+  shouldShowBlockedNotice: boolean,
+  attentionSteps: ReadonlyArray<Step.Step>,
+  h: HtmlBuilder<Message>,
+): Html =>
+  M.value(submission).pipe(
+    M.tagsExhaustive({
+      NotSubmitted: () =>
+        h.div(
+          [h.Class('pt-4 space-y-2')],
+          [
+            ...(shouldShowBlockedNotice
+              ? [blockedNotice(attentionSteps, h)]
+              : []),
+            Button.view(
+              {
+                onClick: Message.ClickedSubmit(),
+                toView: attributes =>
+                  h.button(
+                    [...attributes.button, h.Class(submitButtonClass)],
+                    ['Submit Application'],
+                  ),
+              },
+              h,
+            ),
+          ],
+        ),
+      Submitting: () =>
+        h.div(
+          [h.Class('pt-4')],
+          [
+            Button.view(
+              {
+                toView: attributes =>
+                  h.button(
+                    [
+                      ...attributes.button,
+                      h.Class(
+                        'w-full rounded-lg bg-indigo-400 px-4 py-3 text-sm font-semibold text-white cursor-wait',
+                      ),
+                    ],
+                    ['Submitting...'],
+                  ),
+              },
+              h,
+            ),
+          ],
+        ),
+      SubmitSuccess: () =>
+        h.div(
+          [
+            h.Role('status'),
+            h.Class(
+              'mt-4 rounded-lg border border-green-200 bg-green-50 p-4 text-center',
+            ),
+          ],
+          [
+            h.p(
+              [h.Class('text-lg font-semibold text-green-800')],
+              ['Application Submitted!'],
+            ),
+            h.p(
+              [h.Class('text-sm text-green-600 mt-1')],
+              ["Thank you for applying to work on Foldkit. We'll be in touch!"],
+            ),
+          ],
+        ),
+      SubmitError: ({ error }) =>
+        h.div(
+          [h.Class('space-y-3 pt-4')],
+          [
+            h.div(
+              [
+                h.Role('alert'),
+                h.Class(
+                  'rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-700',
+                ),
+              ],
+              [error],
+            ),
+            ...(shouldShowBlockedNotice
+              ? [blockedNotice(attentionSteps, h)]
+              : []),
+            Button.view(
+              {
+                onClick: Message.ClickedSubmit(),
+                toView: attributes =>
+                  h.button(
+                    [...attributes.button, h.Class(submitButtonClass)],
+                    ['Try Again'],
+                  ),
+              },
+              h,
+            ),
+          ],
+        ),
+    }),
+  )
+export const review = (
+  model: Model,
+  attentionSteps: ReadonlyArray<Step.Step>,
+  h: HtmlBuilder<Message>,
+): Html => {
+  const pronounLabel = Option.match(model.personalInfo.maybeSelectedPronoun, {
+    onNone: () => '',
+    onSome: value =>
+      value === 'Other' ? model.personalInfo.customPronouns : value,
+  })
+  const isApplicationComplete =
+    PersonalInfo.isComplete(model.personalInfo) &&
+    WorkHistory.isComplete(model.workHistory) &&
+    Education.isComplete(model.education) &&
+    Skills.isComplete(model.skills)
+  return h.div(
+    [h.Class('space-y-4')],
+    [
+      personalInfoSection(model.personalInfo, pronounLabel, h),
+      workHistorySection(model.workHistory, h),
+      educationSection(model.education, h),
+      skillsSection(model.skills, h),
+      coverLetterSection(model.coverLetter, h),
+      attachmentsSection(model.attachments, h),
+      submissionSection(
+        model.submission,
+        model.isSubmitAttempted && !isApplicationComplete,
+        attentionSteps,
+        h,
+      ),
+    ],
+  )
+}