create-foldkit-app 0.32.1 → 0.33.0

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

@@ -0,0 +1,359 @@
+import clsx from 'clsx'
+import { Array, Equal, HashSet, Match, 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 {
+  Attachments,
+  CoverLetter,
+  Education,
+  PersonalInfo,
+  Skills,
+  WorkHistory,
+} from '../step'
+import { preview } from './preview'
+import { review } from './review'
+import { stepMenu, stepTabButton } from './stepNav'
+
+const StepTabs = Tabs.create<Step.Step>()
+
+const stepHasErrors =
+  (model: Model) =>
+  (step: Step.Step): boolean =>
+    Match.value(step).pipe(
+      Match.when('PersonalInfo', () =>
+        PersonalInfo.hasErrors(model.personalInfo),
+      ),
+      Match.when('WorkHistory', () => WorkHistory.hasErrors(model.workHistory)),
+      Match.when('Education', () => Education.hasErrors(model.education)),
+      Match.when('Skills', () => Skills.hasErrors(model.skills)),
+      Match.orElse(() => false),
+    )
+
+const stepIsComplete =
+  (model: Model) =>
+  (step: Step.Step): boolean =>
+    Match.value(step).pipe(
+      Match.when('PersonalInfo', () =>
+        PersonalInfo.isComplete(model.personalInfo),
+      ),
+      Match.when('WorkHistory', () =>
+        WorkHistory.isComplete(model.workHistory),
+      ),
+      Match.when('Education', () => Education.isComplete(model.education)),
+      Match.when('Skills', () => Skills.isComplete(model.skills)),
+      Match.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 =>
+  Match.value(model.currentStep).pipe(
+    Match.when('PersonalInfo', () =>
+      h.submodel({
+        slotId: 'personal-info',
+        model: model.personalInfo,
+        view: PersonalInfo.view,
+        toParentMessage: message => Message.GotPersonalInfoMessage({ message }),
+      }),
+    ),
+    Match.when('WorkHistory', () =>
+      h.submodel({
+        slotId: 'work-history',
+        model: model.workHistory,
+        view: WorkHistory.view,
+        toParentMessage: message => Message.GotWorkHistoryMessage({ message }),
+      }),
+    ),
+    Match.when('Education', () =>
+      h.submodel({
+        slotId: 'education',
+        model: model.education,
+        view: Education.view,
+        toParentMessage: message => Message.GotEducationMessage({ message }),
+      }),
+    ),
+    Match.when('Skills', () =>
+      h.submodel({
+        slotId: 'skills',
+        model: model.skills,
+        view: Skills.view,
+        toParentMessage: message => Message.GotSkillsMessage({ message }),
+      }),
+    ),
+    Match.when('CoverLetter', () =>
+      h.submodel({
+        slotId: 'cover-letter',
+        model: model.coverLetter,
+        view: CoverLetter.view,
+        toParentMessage: message => Message.GotCoverLetterMessage({ message }),
+      }),
+    ),
+    Match.when('Attachments', () =>
+      h.submodel({
+        slotId: 'attachments',
+        model: model.attachments,
+        view: Attachments.view,
+        toParentMessage: message => Message.GotAttachmentsMessage({ message }),
+      }),
+    ),
+    Match.when('Review', () => review(model, attentionSteps, h)),
+    Match.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/kanban/package.json

@@ -20,9 +20,7 @@
     "@foldkit/devtools": "workspace:*",
     "@foldkit/vite-plugin": "workspace:*",
     "@tailwindcss/vite": "^4.3.3",
-    "@trivago/prettier-plugin-sort-imports": "^6.0.2",
     "happy-dom": "^20.11.13",
-    "prettier": "^3.9.6",
     "tailwindcss": "^4.3.3",
     "typescript": "^7.0.2",
     "vite": "^8.2.2",

package/dist/templates/examples/kanban/src/scene.test.ts

@@ -23,7 +23,7 @@ import type { Column } from './domain/column'
 import { Message } from './message'
 import type { Model } from './model'
 import { update } from './update'
-import { view } from './view/index'
+import { view } from './view'
 
 const card = (id: string, title: string, sortKey: string): Card => ({
   id,

package/dist/templates/examples/kanban/src/story.test.ts

@@ -4,7 +4,6 @@ import { generateKeyBetween } from 'fractional-indexing'
 import { describe, expect, test } from 'vitest'
 
 import { DragAndDrop } from '@foldkit/ui'
-import { Message as DragAndDropMessage } from '@foldkit/ui/dragAndDrop'
 
 import { FocusAddCardInput, GenerateCardId, SaveBoard } from './command'
 import { Column } from './domain'
@@ -156,7 +155,7 @@ describe('update', () => {
         given(emptyModel),
         message(
           Message.GotDragAndDropMessage({
-            message: DragAndDropMessage.PressedDraggable({
+            message: DragAndDrop.Message.PressedDraggable({
               itemId: firstCardId,
               containerId: 'todo',
               index: 0,
@@ -167,7 +166,7 @@ describe('update', () => {
         ),
         message(
           Message.GotDragAndDropMessage({
-            message: DragAndDropMessage.MovedPointer({
+            message: DragAndDrop.Message.MovedPointer({
               screenX: 100,
               screenY: 200,
               clientX: 100,
@@ -178,7 +177,7 @@ describe('update', () => {
         ),
         message(
           Message.GotDragAndDropMessage({
-            message: DragAndDropMessage.ReleasedPointer(),
+            message: DragAndDrop.Message.ReleasedPointer(),
           }),
         ),
         Command.resolve(SaveBoard, Message.CompletedSaveBoard()),
@@ -197,7 +196,7 @@ describe('update', () => {
         given(emptyModel),
         message(
           Message.GotDragAndDropMessage({
-            message: DragAndDropMessage.PressedDraggable({
+            message: DragAndDrop.Message.PressedDraggable({
               itemId: cardId,
               containerId: 'todo',
               index: 0,
@@ -208,7 +207,7 @@ describe('update', () => {
         ),
         message(
           Message.GotDragAndDropMessage({
-            message: DragAndDropMessage.MovedPointer({
+            message: DragAndDrop.Message.MovedPointer({
               screenX: 300,
               screenY: 100,
               clientX: 300,
@@ -222,7 +221,7 @@ describe('update', () => {
         ),
         message(
           Message.GotDragAndDropMessage({
-            message: DragAndDropMessage.ReleasedPointer(),
+            message: DragAndDrop.Message.ReleasedPointer(),
           }),
         ),
         Command.resolve(SaveBoard, Message.CompletedSaveBoard()),
@@ -246,7 +245,7 @@ describe('update', () => {
         given(emptyModel),
         message(
           Message.GotDragAndDropMessage({
-            message: DragAndDropMessage.ActivatedKeyboardDrag({
+            message: DragAndDrop.Message.ActivatedKeyboardDrag({
               itemId: firstCardId,
               containerId: 'todo',
               index: 0,
@@ -255,7 +254,7 @@ describe('update', () => {
         ),
         message(
           Message.GotDragAndDropMessage({
-            message: DragAndDropMessage.CompletedResolveKeyboardMove({
+            message: DragAndDrop.Message.CompletedResolveKeyboardMove({
               targetContainerId: 'todo',
               targetIndex: 2,
             }),
@@ -263,16 +262,16 @@ describe('update', () => {
         ),
         Command.resolve(
           DragAndDrop.FocusItem({ itemId: firstCardId }),
-          DragAndDropMessage.CompletedFocusItem(),
+          DragAndDrop.Message.CompletedFocusItem(),
         ),
         message(
           Message.GotDragAndDropMessage({
-            message: DragAndDropMessage.ConfirmedKeyboardDrop(),
+            message: DragAndDrop.Message.ConfirmedKeyboardDrop(),
           }),
         ),
         Command.resolve(
           DragAndDrop.FocusItem,
-          DragAndDropMessage.CompletedFocusItem(),
+          DragAndDrop.Message.CompletedFocusItem(),
         ),
         Command.resolve(SaveBoard, Message.CompletedSaveBoard()),
         model(model => {
@@ -290,7 +289,7 @@ describe('update', () => {
         given(emptyModel),
         message(
           Message.GotDragAndDropMessage({
-            message: DragAndDropMessage.ActivatedKeyboardDrag({
+            message: DragAndDrop.Message.ActivatedKeyboardDrag({
               itemId: cardId,
               containerId: 'todo',
               index: 0,
@@ -299,7 +298,7 @@ describe('update', () => {
         ),
         message(
           Message.GotDragAndDropMessage({
-            message: DragAndDropMessage.CompletedResolveKeyboardMove({
+            message: DragAndDrop.Message.CompletedResolveKeyboardMove({
               targetContainerId: 'in-progress',
               targetIndex: 0,
             }),
@@ -307,16 +306,16 @@ describe('update', () => {
         ),
         Command.resolve(
           DragAndDrop.FocusItem({ itemId: cardId }),
-          DragAndDropMessage.CompletedFocusItem(),
+          DragAndDrop.Message.CompletedFocusItem(),
         ),
         message(
           Message.GotDragAndDropMessage({
-            message: DragAndDropMessage.ConfirmedKeyboardDrop(),
+            message: DragAndDrop.Message.ConfirmedKeyboardDrop(),
           }),
         ),
         Command.resolve(
           DragAndDrop.FocusItem,
-          DragAndDropMessage.CompletedFocusItem(),
+          DragAndDrop.Message.CompletedFocusItem(),
         ),
         Command.resolve(SaveBoard, Message.CompletedSaveBoard()),
         model(model => {
@@ -338,7 +337,7 @@ describe('update', () => {
         given(emptyModel),
         message(
           Message.GotDragAndDropMessage({
-            message: DragAndDropMessage.ActivatedKeyboardDrag({
+            message: DragAndDrop.Message.ActivatedKeyboardDrag({
               itemId: emptyModel.columns[0]!.cards[0]!.id,
               containerId: 'todo',
               index: 0,
@@ -347,12 +346,12 @@ describe('update', () => {
         ),
         message(
           Message.GotDragAndDropMessage({
-            message: DragAndDropMessage.CancelledDrag(),
+            message: DragAndDrop.Message.CancelledDrag(),
           }),
         ),
         Command.resolve(
           DragAndDrop.FocusItem,
-          DragAndDropMessage.CompletedFocusItem(),
+          DragAndDrop.Message.CompletedFocusItem(),
         ),
         model(model => {
           expect(model.columns).toStrictEqual(emptyModel.columns)
@@ -366,7 +365,7 @@ describe('update', () => {
         given(emptyModel),
         message(
           Message.GotDragAndDropMessage({
-            message: DragAndDropMessage.PressedDraggable({
+            message: DragAndDrop.Message.PressedDraggable({
               itemId: emptyModel.columns[0]!.cards[0]!.id,
               containerId: 'todo',
               index: 0,
@@ -377,7 +376,7 @@ describe('update', () => {
         ),
         message(
           Message.GotDragAndDropMessage({
-            message: DragAndDropMessage.MovedPointer({
+            message: DragAndDrop.Message.MovedPointer({
               screenX: 100,
               screenY: 200,
               clientX: 100,
@@ -388,7 +387,7 @@ describe('update', () => {
         ),
         message(
           Message.GotDragAndDropMessage({
-            message: DragAndDropMessage.CancelledDrag(),
+            message: DragAndDrop.Message.CancelledDrag(),
           }),
         ),
         model(model => {

package/dist/templates/examples/kanban/src/view/index.ts

@@ -1,71 +1 @@
-import { Array, Option, pipe } from 'effect'
-import { type Document, HtmlBuilder } from 'foldkit/html'
-
-import { DragAndDrop } from '@foldkit/ui'
-
-import { Message } from '../message'
-import type { Model } from '../model'
-import { ghostCardView } from './card'
-import { columnView } from './column'
-
-const findDraggedCard = (model: Model) =>
-  pipe(
-    model.dragAndDrop,
-    DragAndDrop.maybeDraggedItemId,
-    Option.flatMap(cardId =>
-      pipe(
-        model.columns,
-        Array.flatMap(({ cards }) => cards),
-        Array.findFirst(({ id }) => id === cardId),
-      ),
-    ),
-  )
-
-const ghostElement = (model: Model, h: HtmlBuilder<Message>) =>
-  pipe(
-    DragAndDrop.ghostStyle(model.dragAndDrop),
-    Option.flatMap(ghostStyle =>
-      Option.map(findDraggedCard(model), card => ({ ghostStyle, card })),
-    ),
-    Option.match({
-      onNone: () => h.empty,
-      onSome: ({ ghostStyle, card }) =>
-        h.div(
-          [h.Style(ghostStyle), h.Class('w-64'), h.AriaHidden(true)],
-          [ghostCardView(card, h)],
-        ),
-    }),
-  )
-
-export const view = (model: Model, h: HtmlBuilder<Message>): Document => ({
-  title: 'Kanban Board',
-  body: h.div(
-    [h.Class('flex flex-col min-h-screen bg-gray-100')],
-    [
-      h.div(
-        [h.Class('px-6 py-4 bg-white border-b border-gray-200')],
-        [
-          h.h1(
-            [h.Class('text-lg font-semibold text-gray-900')],
-            ['Kanban Board'],
-          ),
-        ],
-      ),
-      h.div(
-        [
-          h.Class(
-            'flex-1 p-6 grid grid-cols-[repeat(auto-fit,minmax(16rem,1fr))] gap-6 items-start',
-          ),
-        ],
-        Array.map(model.columns, column =>
-          columnView(model, column, message => message, h),
-        ),
-      ),
-      ghostElement(model, h),
-      h.div(
-        [h.Class('sr-only'), h.AriaLive('assertive')],
-        [model.announcement],
-      ),
-    ],
-  ),
-})
+export { view } from './view'