create-foldkit-app 0.27.3 → 0.28.0

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

@@ -0,0 +1,102 @@
+import clsx from 'clsx'
+import { Option } from 'effect'
+import { Submodel } from 'foldkit'
+import type { Html } from 'foldkit/html'
+
+import { Button } from '@foldkit/ui'
+
+import { ProficiencyLevel } from '../domain'
+import { Skills } from '../step'
+import { inputField } from './field'
+
+export const skillEntryView = Submodel.defineView<
+  Skills.Entry.Model,
+  Skills.Entry.Message
+>((model, h): Html => {
+  const nameView = inputField(
+    {
+      id: `${model.id}-name`,
+      label: 'Skill',
+      field: model.name,
+      onInput: value => Skills.Entry.Message.UpdatedName({ value }),
+      placeholder: 'e.g. TypeScript, React, Effect-TS',
+    },
+    h,
+  )
+
+  const proficiencyView = h.submodel({
+    slotId: model.proficiencyRadioGroup.id,
+    model: model.proficiencyRadioGroup,
+    view: Skills.Entry.ProficiencyRadioGroup.view,
+    viewInputs: {
+      selectedValue: Option.some(model.proficiency),
+      options: ProficiencyLevel.all,
+      orientation: 'Horizontal',
+      ariaLabel: 'Proficiency level',
+      toView: attributes =>
+        h.div(
+          [...attributes.group, h.Class('inline-flex flex-wrap gap-2')],
+          attributes.options.map(option =>
+            h.div(
+              [
+                ...option.option,
+                h.Class(
+                  clsx(
+                    'cursor-pointer rounded-full border px-3 py-1 text-sm transition select-none',
+                    option.isSelected
+                      ? 'border-indigo-600 bg-indigo-50 text-indigo-700'
+                      : 'border-gray-300 text-gray-600 hover:border-gray-400',
+                  ),
+                ),
+              ],
+              [
+                h.input([...option.label, h.Class('sr-only')]),
+                h.span([], [option.value]),
+              ],
+            ),
+          ),
+        ),
+    },
+    toParentMessage: message =>
+      Skills.Entry.Message.GotProficiencyRadioGroupMessage({ message }),
+  })
+
+  return h.keyed('div')(
+    model.id,
+    [h.Class('py-6 space-y-4 first:pt-0')],
+    [
+      nameView,
+      h.div(
+        [h.Class('space-y-2')],
+        [
+          h.span(
+            [h.Class('block text-sm font-medium text-gray-700')],
+            ['Proficiency'],
+          ),
+          proficiencyView,
+        ],
+      ),
+      h.div(
+        [h.Class('flex justify-end')],
+        [
+          Button.view(
+            {
+              onClick: Skills.Entry.Message.ClickedRemoveSelf(),
+              toView: attributes =>
+                h.button(
+                  [
+                    ...attributes.button,
+                    h.Class(
+                      'text-sm text-gray-400 hover:text-red-500 transition cursor-pointer',
+                    ),
+                  ],
+                  ['Remove skill'],
+                ),
+            },
+            h,
+          ),
+        ],
+      ),
+    ],
+  )
+})

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

@@ -0,0 +1,49 @@
+import { Submodel } from 'foldkit'
+import type { Html } from 'foldkit/html'
+
+import { Button } from '@foldkit/ui'
+
+import { Skills } from '../step'
+import { Message } from '../step/skills'
+import { skillEntryView } from './skillEntry'
+
+export const skillsView = Submodel.defineView<Skills.Model, Skills.Message>(
+  (model, h): Html =>
+    h.div(
+      [h.Class('space-y-6')],
+      [
+        h.p(
+          [h.Class('text-sm text-gray-500')],
+          ['Add your technical and professional skills.'],
+        ),
+        h.div(
+          [h.Class('divide-y divide-gray-200')],
+          model.entries.map(entry =>
+            h.submodel({
+              slotId: entry.id,
+              model: entry,
+              view: skillEntryView,
+              toParentMessage: message =>
+                Message.GotEntryMessage({ entryId: entry.id, message }),
+            }),
+          ),
+        ),
+        Button.view(
+          {
+            onClick: Message.ClickedAddEntry(),
+            toView: attributes =>
+              h.button(
+                [
+                  ...attributes.button,
+                  h.Class(
+                    'w-full rounded-lg border-2 border-dashed border-gray-300 px-4 py-3 text-sm font-medium text-gray-600 hover:border-indigo-400 hover:text-indigo-600 transition cursor-pointer',
+                  ),
+                ],
+                ['+ Add Skill'],
+              ),
+          },
+          h,
+        ),
+      ],
+    ),
+)

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

@@ -0,0 +1,181 @@
+import clsx from 'clsx'
+import { Equal, HashSet, Match, Number, flow } from 'effect'
+import type { Html, HtmlBuilder } from 'foldkit/html'
+
+import { Menu, Tabs } from '@foldkit/ui'
+
+import { Step } from '../domain'
+import type { Message } from '../message'
+import { type Model } from '../model'
+import { chevronDown } from './icon'
+
+const StepMenu = Menu.create<Step.Step>()
+
+type StepStatus = 'Current' | 'Completed' | 'Upcoming'
+
+const stepToStatus = (step: Step.Step, currentStep: Step.Step): StepStatus =>
+  Match.value(step).pipe(
+    Match.withReturnType<StepStatus>(),
+    Match.when(Equal.equals(currentStep), () => 'Current'),
+    Match.when(
+      flow(Step.indexOf, Number.isLessThan(Step.indexOf(currentStep))),
+      () => 'Completed',
+    ),
+    Match.orElse(() => 'Upcoming'),
+  )
+
+const stepMarkerGlyph = (
+  status: StepStatus,
+  index: number,
+  needsAttention: boolean,
+): string => {
+  if (needsAttention) {
+    return '!'
+  } else if (status === 'Completed') {
+    return '✓'
+  } else {
+    return String(Number.increment(index))
+  }
+}
+
+const stepMarker = (
+  status: StepStatus,
+  index: number,
+  needsAttention: boolean,
+  h: HtmlBuilder<Message>,
+): Html =>
+  h.span(
+    [
+      h.Class(
+        clsx(
+          'flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-[11px] font-semibold',
+          needsAttention
+            ? 'bg-red-100 text-red-700'
+            : Match.value(status).pipe(
+                Match.withReturnType<string>(),
+                Match.when('Current', () => 'bg-indigo-600 text-white'),
+                Match.when('Completed', () => 'bg-indigo-100 text-indigo-700'),
+                Match.when('Upcoming', () => 'bg-gray-100 text-gray-400'),
+                Match.exhaustive,
+              ),
+        ),
+      ),
+    ],
+    [stepMarkerGlyph(status, index, needsAttention)],
+  )
+
+const stepButtonClass = (status: StepStatus, needsAttention: boolean): string =>
+  clsx(
+    'flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition',
+    needsAttention
+      ? 'text-red-700 hover:bg-red-50 cursor-pointer'
+      : Match.value(status).pipe(
+          Match.withReturnType<string>(),
+          Match.when('Current', () => 'bg-indigo-50 text-indigo-700'),
+          Match.when(
+            'Completed',
+            () => 'text-gray-700 hover:bg-gray-100 cursor-pointer',
+          ),
+          Match.when(
+            'Upcoming',
+            () => 'text-gray-600 hover:bg-gray-100 cursor-pointer',
+          ),
+          Match.exhaustive,
+        ),
+  )
+
+export const stepTabButton = (
+  tab: Tabs.TabInfo<Step.Step>,
+  currentStep: Step.Step,
+  stepsNeedingAttention: HashSet.HashSet<Step.Step>,
+  h: HtmlBuilder<Message>,
+): Html => {
+  const status = stepToStatus(tab.value, currentStep)
+  const needsAttention = HashSet.has(stepsNeedingAttention, tab.value)
+
+  return h.keyed('button')(
+    tab.value,
+    [...tab.tab, h.Class(stepButtonClass(status, needsAttention))],
+    [
+      stepMarker(status, tab.index, needsAttention, h),
+      h.span([], [Step.show(tab.value)]),
+    ],
+  )
+}
+
+const stepMenuTrigger = (
+  currentStep: Step.Step,
+  h: HtmlBuilder<Message>,
+): Html =>
+  h.div(
+    [h.Class('flex items-center justify-between w-full gap-3')],
+    [
+      h.div(
+        [h.Class('flex items-center gap-2 min-w-0')],
+        [
+          h.span(
+            [h.Class('text-xs font-medium text-gray-500 shrink-0')],
+            [
+              `Step ${Number.increment(Step.indexOf(currentStep))} of ${Step.all.length}`,
+            ],
+          ),
+          h.span(
+            [h.Class('text-sm font-semibold text-gray-900 truncate')],
+            [Step.show(currentStep)],
+          ),
+        ],
+      ),
+      h.span([h.Class('text-gray-400 shrink-0')], [chevronDown()]),
+    ],
+  )
+
+export const stepMenu = (
+  model: Model,
+  stepsNeedingAttention: HashSet.HashSet<Step.Step>,
+  toParentMessage: (message: Menu.Message) => Message,
+  h: HtmlBuilder<Message>,
+): Html =>
+  h.submodel({
+    slotId: model.stepMenu.id,
+    model: model.stepMenu,
+    view: StepMenu.view,
+    viewInputs: {
+      items: Step.all,
+      buttonContent: stepMenuTrigger(model.currentStep, h),
+      buttonClassName:
+        'flex items-center w-full rounded-lg border border-gray-200 bg-white px-4 py-3 text-left shadow-sm transition hover:border-gray-300 cursor-pointer',
+      itemsClassName:
+        'rounded-lg border border-gray-200 bg-white shadow-lg py-1 w-(--button-width)',
+      itemToConfig: (step, { isActive }) => {
+        const status = stepToStatus(step, model.currentStep)
+        const needsAttention = HashSet.has(stepsNeedingAttention, step)
+        const index = Step.indexOf(step)
+        return {
+          className: clsx(
+            'flex items-center gap-3 px-4 py-2.5 text-sm',
+            isActive && 'bg-gray-50',
+            'cursor-pointer',
+            needsAttention
+              ? 'text-red-700 font-semibold'
+              : Match.value(status).pipe(
+                  Match.withReturnType<string>(),
+                  Match.when('Current', () => 'text-indigo-700 font-semibold'),
+                  Match.when('Completed', () => 'text-gray-700'),
+                  Match.when('Upcoming', () => 'text-gray-600'),
+                  Match.exhaustive,
+                ),
+          ),
+          content: h.div(
+            [h.Class('flex items-center gap-3')],
+            [
+              stepMarker(status, index, needsAttention, h),
+              h.span([], [Step.show(step)]),
+            ],
+          ),
+        }
+      },
+      backdropClassName: 'fixed inset-0',
+      anchor: { placement: 'bottom-start', gap: 4, padding: 8 },
+    },
+    toParentMessage,
+  })

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

@@ -0,0 +1,159 @@
+import { Submodel } from 'foldkit'
+import type { Html } from 'foldkit/html'
+
+import { Button, DatePicker } from '@foldkit/ui'
+
+import { WorkHistory } from '../step'
+import {
+  backdropClassName,
+  calendarView,
+  panelClassName,
+  triggerClassName,
+  triggerContent,
+} from './datePicker'
+import { checkboxField, inputField, textareaField } from './field'
+
+const ANCHOR = { placement: 'bottom-start' as const, gap: 4, padding: 8 }
+
+export const workEntryView = Submodel.defineView<
+  WorkHistory.Entry.Model,
+  WorkHistory.Entry.Message
+>((model, h): Html => {
+  const showEndDate = !model.isCurrentlyEmployed
+
+  const startDatePicker = h.div(
+    [h.Class('space-y-1')],
+    [
+      h.label(
+        [h.Class('block text-sm font-medium text-gray-700')],
+        ['Start Date'],
+      ),
+      h.submodel({
+        slotId: model.startDate.id,
+        model: model.startDate,
+        view: DatePicker.view,
+        viewInputs: {
+          anchor: ANCHOR,
+          maybeSelectedDate: model.maybeStartDate,
+          triggerContent: maybeDate =>
+            triggerContent(maybeDate, 'Select start date'),
+          toCalendarView: calendarView,
+          triggerClassName,
+          panelClassName,
+          backdropClassName,
+        },
+        toParentMessage: message =>
+          WorkHistory.Entry.Message.GotStartDateMessage({ message }),
+      }),
+    ],
+  )
+
+  const endDatePicker = h.keyed('div')(
+    `${model.id}-end-date`,
+    [h.Class('space-y-1')],
+    [
+      h.label(
+        [h.Class('block text-sm font-medium text-gray-700')],
+        ['End Date'],
+      ),
+      h.submodel({
+        slotId: model.endDate.id,
+        model: model.endDate,
+        view: DatePicker.view,
+        viewInputs: {
+          anchor: ANCHOR,
+          maybeSelectedDate: model.maybeEndDate,
+          triggerContent: maybeDate =>
+            triggerContent(maybeDate, 'Select end date'),
+          toCalendarView: calendarView,
+          triggerClassName,
+          panelClassName,
+          backdropClassName,
+        },
+        toParentMessage: message =>
+          WorkHistory.Entry.Message.GotEndDateMessage({ message }),
+      }),
+    ],
+  )
+
+  return h.keyed('div')(
+    model.id,
+    [h.Class('py-6 space-y-4 first:pt-0')],
+    [
+      h.div(
+        [h.Class('grid grid-cols-2 gap-3')],
+        [
+          inputField(
+            {
+              id: `${model.id}-company`,
+              label: 'Company',
+              field: model.company,
+              onInput: value =>
+                WorkHistory.Entry.Message.UpdatedCompany({ value }),
+              placeholder: 'e.g. Acme Corp',
+            },
+            h,
+          ),
+          inputField(
+            {
+              id: `${model.id}-title`,
+              label: 'Job Title',
+              field: model.title,
+              onInput: value =>
+                WorkHistory.Entry.Message.UpdatedTitle({ value }),
+              placeholder: 'e.g. Senior Engineer',
+            },
+            h,
+          ),
+        ],
+      ),
+      h.div(
+        [h.Class('grid grid-cols-2 gap-3')],
+        [startDatePicker, ...(showEndDate ? [endDatePicker] : [])],
+      ),
+      checkboxField(
+        {
+          id: `${model.id}-current`,
+          label: 'I currently work here',
+          isChecked: model.isCurrentlyEmployed,
+          onToggle: isChecked =>
+            WorkHistory.Entry.Message.ToggledCurrentlyEmployed({ isChecked }),
+        },
+        h,
+      ),
+      textareaField(
+        {
+          id: `${model.id}-description`,
+          label: 'Description',
+          value: model.description,
+          onInput: value =>
+            WorkHistory.Entry.Message.UpdatedDescription({ value }),
+          rows: 3,
+          placeholder: 'Describe your role and key accomplishments...',
+        },
+        h,
+      ),
+      h.div(
+        [h.Class('flex justify-end')],
+        [
+          Button.view(
+            {
+              onClick: WorkHistory.Entry.Message.ClickedRemoveSelf(),
+              toView: attributes =>
+                h.button(
+                  [
+                    ...attributes.button,
+                    h.Class(
+                      'text-sm text-gray-400 hover:text-red-500 transition cursor-pointer',
+                    ),
+                  ],
+                  ['Remove position'],
+                ),
+            },
+            h,
+          ),
+        ],
+      ),
+    ],
+  )
+})

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

@@ -0,0 +1,55 @@
+import { Submodel } from 'foldkit'
+import type { Html } from 'foldkit/html'
+
+import { Button } from '@foldkit/ui'
+
+import { WorkHistory } from '../step'
+import { Message } from '../step/workHistory'
+import { workEntryView } from './workEntry'
+
+export const workHistoryView = Submodel.defineView<
+  WorkHistory.Model,
+  WorkHistory.Message
+>(
+  (model, h): Html =>
+    h.div(
+      [h.Class('space-y-6')],
+      [
+        h.p(
+          [h.Class('text-sm text-gray-500')],
+          ['Add your relevant work experience, starting with the most recent.'],
+        ),
+        h.div(
+          [h.Class('divide-y divide-gray-200')],
+          model.entries.map(entry =>
+            h.submodel({
+              slotId: entry.id,
+              model: entry,
+              view: workEntryView,
+              toParentMessage: message =>
+                Message.GotEntryMessage({
+                  entryId: entry.id,
+                  message,
+                }),
+            }),
+          ),
+        ),
+        Button.view(
+          {
+            onClick: Message.ClickedAddEntry(),
+            toView: attributes =>
+              h.button(
+                [
+                  ...attributes.button,
+                  h.Class(
+                    'w-full rounded-lg border-2 border-dashed border-gray-300 px-4 py-3 text-sm font-medium text-gray-600 hover:border-indigo-400 hover:text-indigo-600 transition cursor-pointer',
+                  ),
+                ],
+                ['+ Add Position'],
+              ),
+          },
+          h,
+        ),
+      ],
+    ),
+)

package/dist/templates/examples/job-application/src/vitest-setup.ts

@@ -0,0 +1,3 @@
+import { setup } from 'foldkit/test/vitest'
+
+setup()

package/dist/templates/examples/kanban/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "kanban-example",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@effect/platform-browser": "4.0.0-rc.109",
+    "@foldkit/ui": "workspace:*",
+    "@tailwindcss/vite": "^4.3.1",
+    "clsx": "^2.1.1",
+    "effect": "4.0.0-rc.109",
+    "foldkit": "workspace:*",
+    "fractional-indexing": "^3.2.0",
+    "tailwindcss": "^4.3.1"
+  },
+  "devDependencies": {
+    "@foldkit/devtools": "workspace:*",
+    "@foldkit/vite-plugin": "workspace:*",
+    "@trivago/prettier-plugin-sort-imports": "^6.0.2",
+    "happy-dom": "^20.10.4",
+    "prettier": "^3.8.4",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.16",
+    "vitest": "^4.1.9"
+  }
+}

package/dist/templates/examples/kanban/src/command.ts

@@ -0,0 +1,46 @@
+import { Crypto, Effect, Schema as S } from 'effect'
+import { KeyValueStore } from 'effect/unstable/persistence'
+import { Command, Dom } from 'foldkit'
+
+import { BrowserCrypto, BrowserKeyValueStore } from '@effect/platform-browser'
+
+import { ADD_CARD_INPUT_ID, STORAGE_KEY } from './constant'
+import { Column } from './domain'
+import { Message } from './message'
+import { SavedBoard } from './model'
+
+export const GenerateCardId = Command.define('GenerateCardId', {
+  args: { columnId: S.String, title: S.String },
+  messages: [Message.CompletedGenerateCardId],
+  execute: ({ columnId, title }) =>
+    Effect.gen(function* () {
+      const crypto = yield* Crypto.Crypto
+      const cardId = yield* Effect.orDie(crypto.randomUUIDv4)
+      return Message.CompletedGenerateCardId({ cardId, columnId, title })
+    }).pipe(Effect.provide(BrowserCrypto.layer)),
+})
+
+export const SaveBoard = Command.define('SaveBoard', {
+  args: { columns: S.Array(Column.Column) },
+  messages: [Message.CompletedSaveBoard],
+  execute: ({ columns }) =>
+    Effect.gen(function* () {
+      const store = yield* KeyValueStore.KeyValueStore
+      yield* store.set(
+        STORAGE_KEY,
+        S.encodeSync(S.fromJsonString(SavedBoard))({ columns }),
+      )
+      return Message.CompletedSaveBoard()
+    }).pipe(
+      Effect.catch(() => Effect.succeed(Message.CompletedSaveBoard())),
+      Effect.provide(BrowserKeyValueStore.layerLocalStorage),
+    ),
+})
+
+export const FocusAddCardInput = Command.define('FocusAddCardInput', {
+  messages: [Message.CompletedFocusAddCardInput],
+  execute: Dom.focus(`#${ADD_CARD_INPUT_ID}`).pipe(
+    Effect.ignore,
+    Effect.as(Message.CompletedFocusAddCardInput()),
+  ),
+})