create-foldkit-app 0.27.3 → 0.28.0

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

@@ -0,0 +1,177 @@
+import {
+  Command,
+  click,
+  expect,
+  given,
+  label,
+  role,
+  scene,
+  submit,
+  text,
+  type,
+} from 'foldkit/scene'
+import { describe, test } from 'vitest'
+
+import {
+  GenerateTodo,
+  Message,
+  type Model,
+  NotEditing,
+  SaveTodos,
+  update,
+  view,
+} from './main'
+
+const emptyModel: Model = {
+  todos: [],
+  newTodoText: '',
+  filter: 'All',
+  editing: NotEditing(),
+}
+
+const modelWithTodos: Model = {
+  ...emptyModel,
+  todos: [
+    { id: 'abc', text: 'Buy milk', completed: false, createdAt: 1000 },
+    { id: 'def', text: 'Walk the dog', completed: false, createdAt: 2000 },
+    { id: 'ghi', text: 'Done task', completed: true, createdAt: 3000 },
+  ],
+}
+
+describe('view', () => {
+  test('empty state shows heading and placeholder message', () => {
+    scene(
+      { update, view },
+      given(emptyModel),
+      expect(role('heading', { name: 'Todo App' })).toExist(),
+      expect(text('No todos yet. Add one above!')).toExist(),
+    )
+  })
+
+  test('renders existing todos', () => {
+    scene(
+      { update, view },
+      given(modelWithTodos),
+      expect(text('Buy milk')).toExist(),
+      expect(text('Walk the dog')).toExist(),
+      expect(text('Done task')).toExist(),
+      expect(role('status')).toContainText('2 active, 1 completed'),
+    )
+  })
+
+  test('add a todo through the form', () => {
+    const addedTodo = {
+      id: 'new-1',
+      text: 'Write tests',
+      completed: false,
+      createdAt: 5000,
+    }
+
+    scene(
+      { update, view },
+      given(emptyModel),
+      type(label('New todo'), 'Write tests'),
+      submit(role('form')),
+      Command.expectExact(GenerateTodo),
+      Command.resolve(
+        GenerateTodo,
+        Message.CompletedGenerateTodo({
+          id: 'new-1',
+          timestamp: 5000,
+          text: 'Write tests',
+        }),
+      ),
+      Command.expectExact(SaveTodos),
+      Command.resolve(
+        SaveTodos,
+        Message.SucceededSaveTodos({ todos: [addedTodo] }),
+      ),
+      expect(text('Write tests')).toExist(),
+      expect(label('New todo')).toHaveValue(''),
+    )
+  })
+
+  test('toggle a todo by clicking its checkbox', () => {
+    const toggledTodos = modelWithTodos.todos.map(todo =>
+      todo.id === 'abc' ? { ...todo, completed: true } : todo,
+    )
+
+    scene(
+      { update, view },
+      given(modelWithTodos),
+      click(label('Buy milk')),
+      Command.expectExact(SaveTodos),
+      Command.resolve(
+        SaveTodos,
+        Message.SucceededSaveTodos({ todos: toggledTodos }),
+      ),
+      expect(role('status')).toContainText('1 active, 2 completed'),
+    )
+  })
+
+  test('delete a todo', () => {
+    const remainingTodos = modelWithTodos.todos.filter(({ id }) => id !== 'abc')
+
+    scene(
+      { update, view },
+      given(modelWithTodos),
+      click(role('button', { name: 'Delete Buy milk' })),
+      Command.expectExact(SaveTodos),
+      Command.resolve(
+        SaveTodos,
+        Message.SucceededSaveTodos({ todos: remainingTodos }),
+      ),
+      expect(text('Buy milk')).toBeAbsent(),
+      expect(text('Walk the dog')).toExist(),
+    )
+  })
+
+  test('clear completed removes done todos', () => {
+    const activeTodos = modelWithTodos.todos.filter(
+      ({ completed }) => !completed,
+    )
+
+    scene(
+      { update, view },
+      given(modelWithTodos),
+      click(role('button', { name: 'Clear 1 completed' })),
+      Command.expectExact(SaveTodos),
+      Command.resolve(
+        SaveTodos,
+        Message.SucceededSaveTodos({ todos: activeTodos }),
+      ),
+      expect(text('Done task')).toBeAbsent(),
+      expect(role('status')).toContainText('2 active, 0 completed'),
+    )
+  })
+
+  test('mark all complete toggles all todos', () => {
+    const allCompletedTodos = modelWithTodos.todos.map(todo => ({
+      ...todo,
+      completed: true,
+    }))
+
+    scene(
+      { update, view },
+      given(modelWithTodos),
+      click(role('button', { name: 'Mark all complete' })),
+      Command.expectExact(SaveTodos),
+      Command.resolve(
+        SaveTodos,
+        Message.SucceededSaveTodos({ todos: allCompletedTodos }),
+      ),
+      expect(role('status')).toContainText('0 active, 3 completed'),
+    )
+  })
+
+  test('keeps in-memory changes when saving fails', () => {
+    scene(
+      { update, view },
+      given(modelWithTodos),
+      click(label('Buy milk')),
+      Command.expectExact(SaveTodos),
+      Command.resolve(SaveTodos, Message.FailedSaveTodos()),
+      expect(role('status')).toContainText('1 active, 2 completed'),
+    )
+  })
+})

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

@@ -0,0 +1,374 @@
+import { Array, Option } from 'effect'
+import { Command, given, message, model, story } from 'foldkit/story'
+import { describe, expect, test } from 'vitest'
+
+import {
+  Editing,
+  GenerateTodo,
+  Message,
+  type Model,
+  NotEditing,
+  SaveTodos,
+  update,
+} from './main'
+
+const emptyModel: Model = {
+  todos: [],
+  newTodoText: '',
+  filter: 'All',
+  editing: NotEditing(),
+}
+
+const buyMilk = {
+  id: 'abc',
+  text: 'Buy milk',
+  completed: false,
+  createdAt: 1000,
+}
+
+const walkDog = {
+  id: 'def',
+  text: 'Walk the dog',
+  completed: false,
+  createdAt: 2000,
+}
+
+const doneTask = {
+  id: 'ghi',
+  text: 'Done task',
+  completed: true,
+  createdAt: 3000,
+}
+
+const modelWithTodos: Model = {
+  ...emptyModel,
+  todos: [buyMilk, walkDog, doneTask],
+}
+
+describe('update', () => {
+  describe('add todo', () => {
+    test('AddedTodo with text produces a GenerateTodo Command', () => {
+      story(
+        update,
+        given({ ...emptyModel, newTodoText: 'Buy milk' }),
+        message(Message.AddedTodo()),
+        Command.expectHas(GenerateTodo),
+        Command.resolve(
+          GenerateTodo,
+          Message.CompletedGenerateTodo({
+            id: 'abc',
+            timestamp: 1000,
+            text: 'Buy milk',
+          }),
+        ),
+        Command.resolve(
+          SaveTodos,
+          Message.SucceededSaveTodos({
+            todos: [
+              {
+                id: 'abc',
+                text: 'Buy milk',
+                completed: false,
+                createdAt: 1000,
+              },
+            ],
+          }),
+        ),
+        model(model => {
+          expect(model.todos).toHaveLength(1)
+          expect(model.todos[0]?.text).toBe('Buy milk')
+          expect(model.todos[0]?.completed).toBe(false)
+          expect(model.newTodoText).toBe('')
+        }),
+      )
+    })
+
+    test('AddedTodo with empty text is ignored', () => {
+      story(
+        update,
+        given({ ...emptyModel, newTodoText: '' }),
+        message(Message.AddedTodo()),
+        Command.expectNone(),
+      )
+    })
+
+    test('AddedTodo with whitespace-only text is ignored', () => {
+      story(
+        update,
+        given({ ...emptyModel, newTodoText: '   ' }),
+        message(Message.AddedTodo()),
+        Command.expectNone(),
+      )
+    })
+
+    test('UpdatedNewTodo updates the input text', () => {
+      story(
+        update,
+        given(emptyModel),
+        message(Message.UpdatedNewTodo({ text: 'Walk' })),
+        model(model => {
+          expect(model.newTodoText).toBe('Walk')
+        }),
+      )
+    })
+  })
+
+  describe('toggle and delete', () => {
+    test('ToggledTodo flips the completed state', () => {
+      const toggledTodos = modelWithTodos.todos.map(todo =>
+        todo.id === 'abc' ? { ...todo, completed: true } : todo,
+      )
+
+      story(
+        update,
+        given(modelWithTodos),
+        message(Message.ToggledTodo({ id: 'abc' })),
+        Command.resolve(
+          SaveTodos,
+          Message.SucceededSaveTodos({ todos: toggledTodos }),
+        ),
+        model(model => {
+          const todo = Array.findFirst(model.todos, ({ id }) => id === 'abc')
+          expect(Option.map(todo, ({ completed }) => completed)).toStrictEqual(
+            Option.some(true),
+          )
+        }),
+      )
+    })
+
+    test('ToggledTodo on completed todo marks it active', () => {
+      const toggledTodos = modelWithTodos.todos.map(todo =>
+        todo.id === 'ghi' ? { ...todo, completed: false } : todo,
+      )
+
+      story(
+        update,
+        given(modelWithTodos),
+        message(Message.ToggledTodo({ id: 'ghi' })),
+        Command.resolve(
+          SaveTodos,
+          Message.SucceededSaveTodos({ todos: toggledTodos }),
+        ),
+        model(model => {
+          const todo = Array.findFirst(model.todos, ({ id }) => id === 'ghi')
+          expect(Option.map(todo, ({ completed }) => completed)).toStrictEqual(
+            Option.some(false),
+          )
+        }),
+      )
+    })
+
+    test('DeletedTodo removes the todo and saves', () => {
+      const remainingTodos = modelWithTodos.todos.filter(
+        ({ id }) => id !== 'abc',
+      )
+
+      story(
+        update,
+        given(modelWithTodos),
+        message(Message.DeletedTodo({ id: 'abc' })),
+        Command.resolve(
+          SaveTodos,
+          Message.SucceededSaveTodos({ todos: remainingTodos }),
+        ),
+        model(model => {
+          expect(model.todos).toHaveLength(2)
+          expect(
+            Array.findFirst(model.todos, ({ id }) => id === 'abc'),
+          ).toStrictEqual(Option.none())
+        }),
+      )
+    })
+  })
+
+  describe('editing', () => {
+    test('StartedEditing enters editing state with the todo text', () => {
+      story(
+        update,
+        given(modelWithTodos),
+        message(Message.StartedEditing({ id: 'abc' })),
+        model(model => {
+          expect(model.editing).toStrictEqual(
+            Editing({ id: 'abc', text: 'Buy milk' }),
+          )
+        }),
+      )
+    })
+
+    test('UpdatedEditingTodo updates the editing text', () => {
+      const editingModel: Model = {
+        ...modelWithTodos,
+        editing: Editing({ id: 'abc', text: 'Buy milk' }),
+      }
+
+      story(
+        update,
+        given(editingModel),
+        message(Message.UpdatedEditingTodo({ text: 'Buy oat milk' })),
+        model(model => {
+          expect(model.editing).toStrictEqual(
+            Editing({ id: 'abc', text: 'Buy oat milk' }),
+          )
+        }),
+      )
+    })
+
+    test('SavedEdit updates the todo text and exits editing', () => {
+      const editingModel: Model = {
+        ...modelWithTodos,
+        editing: Editing({ id: 'abc', text: 'Buy oat milk' }),
+      }
+
+      const editedTodos = modelWithTodos.todos.map(todo =>
+        todo.id === 'abc' ? { ...todo, text: 'Buy oat milk' } : todo,
+      )
+
+      story(
+        update,
+        given(editingModel),
+        message(Message.SavedEdit()),
+        Command.resolve(
+          SaveTodos,
+          Message.SucceededSaveTodos({ todos: editedTodos }),
+        ),
+        model(model => {
+          const todo = Array.findFirst(model.todos, ({ id }) => id === 'abc')
+          expect(Option.map(todo, ({ text }) => text)).toStrictEqual(
+            Option.some('Buy oat milk'),
+          )
+          expect(model.editing).toStrictEqual(NotEditing())
+        }),
+      )
+    })
+
+    test('SavedEdit with empty text exits editing without saving', () => {
+      const editingModel: Model = {
+        ...modelWithTodos,
+        editing: Editing({ id: 'abc', text: '   ' }),
+      }
+
+      story(
+        update,
+        given(editingModel),
+        message(Message.SavedEdit()),
+        model(model => {
+          const todo = Array.findFirst(model.todos, ({ id }) => id === 'abc')
+          expect(Option.map(todo, ({ text }) => text)).toStrictEqual(
+            Option.some('Buy milk'),
+          )
+          expect(model.editing).toStrictEqual(NotEditing())
+        }),
+        Command.expectNone(),
+      )
+    })
+
+    test('CancelledEdit exits editing without changes', () => {
+      const editingModel: Model = {
+        ...modelWithTodos,
+        editing: Editing({ id: 'abc', text: 'Changed text' }),
+      }
+
+      story(
+        update,
+        given(editingModel),
+        message(Message.CancelledEdit()),
+        model(model => {
+          const todo = Array.findFirst(model.todos, ({ id }) => id === 'abc')
+          expect(Option.map(todo, ({ text }) => text)).toStrictEqual(
+            Option.some('Buy milk'),
+          )
+          expect(model.editing).toStrictEqual(NotEditing())
+        }),
+      )
+    })
+  })
+
+  describe('bulk operations', () => {
+    test('ToggledAll marks all todos completed when some are active', () => {
+      const allCompletedTodos = modelWithTodos.todos.map(todo => ({
+        ...todo,
+        completed: true,
+      }))
+
+      story(
+        update,
+        given(modelWithTodos),
+        message(Message.ToggledAll()),
+        Command.resolve(
+          SaveTodos,
+          Message.SucceededSaveTodos({ todos: allCompletedTodos }),
+        ),
+        model(model => {
+          expect(Array.every(model.todos, ({ completed }) => completed)).toBe(
+            true,
+          )
+        }),
+      )
+    })
+
+    test('ToggledAll marks all todos active when all are completed', () => {
+      const allCompletedModel: Model = {
+        ...emptyModel,
+        todos: modelWithTodos.todos.map(todo => ({
+          ...todo,
+          completed: true,
+        })),
+      }
+
+      const allActiveTodos = allCompletedModel.todos.map(todo => ({
+        ...todo,
+        completed: false,
+      }))
+
+      story(
+        update,
+        given(allCompletedModel),
+        message(Message.ToggledAll()),
+        Command.resolve(
+          SaveTodos,
+          Message.SucceededSaveTodos({ todos: allActiveTodos }),
+        ),
+        model(model => {
+          expect(Array.every(model.todos, ({ completed }) => !completed)).toBe(
+            true,
+          )
+        }),
+      )
+    })
+
+    test('ClearedCompleted removes only completed todos', () => {
+      const activeTodos = modelWithTodos.todos.filter(
+        ({ completed }) => !completed,
+      )
+
+      story(
+        update,
+        given(modelWithTodos),
+        message(Message.ClearedCompleted()),
+        Command.resolve(
+          SaveTodos,
+          Message.SucceededSaveTodos({ todos: activeTodos }),
+        ),
+        model(model => {
+          expect(model.todos).toHaveLength(2)
+          expect(Array.every(model.todos, ({ completed }) => !completed)).toBe(
+            true,
+          )
+        }),
+      )
+    })
+  })
+
+  describe('filter', () => {
+    test('SelectedFilter changes the active filter', () => {
+      story(
+        update,
+        given(modelWithTodos),
+        message(Message.SelectedFilter({ filter: 'Active' })),
+        model(model => {
+          expect(model.filter).toBe('Active')
+        }),
+      )
+    })
+  })
+})

package/dist/templates/examples/todo/src/styles.css

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

package/dist/templates/examples/todo/src/vitest-setup.ts

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

package/dist/templates/examples/ui-showcase/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "ui-showcase",
+  "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:*",
+    "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/ui-showcase/src/entry.ts

@@ -0,0 +1,31 @@
+import { Runtime } from 'foldkit'
+
+import {
+  Flags,
+  Message,
+  Model,
+  flags,
+  init,
+  subscriptions,
+  update,
+  view,
+} from './main'
+
+const application = Runtime.makeApplication({
+  Model,
+  Flags,
+  init,
+  update,
+  view,
+  subscriptions,
+  container: document.getElementById('root'),
+  routing: {
+    onUrlRequest: request => Message.ClickedLink({ request }),
+    onUrlChange: url => Message.ChangedUrl({ url }),
+  },
+  devTools: {
+    Message,
+  },
+})
+
+Runtime.run(application, { flags })

package/dist/templates/examples/ui-showcase/src/icon.ts

@@ -0,0 +1,64 @@
+import { Html, inertHtml as ih } from 'foldkit/html'
+
+const heroIcon = (className: string, strokeWidth: string, d: string): Html =>
+  ih.svg(
+    [
+      ih.AriaHidden(true),
+      ih.Class(className),
+      ih.Xmlns('http://www.w3.org/2000/svg'),
+      ih.Fill('none'),
+      ih.ViewBox('0 0 24 24'),
+      ih.StrokeWidth(strokeWidth),
+      ih.Stroke('currentColor'),
+    ],
+    [ih.path([ih.StrokeLinecap('round'), ih.StrokeLinejoin('round'), ih.D(d)])],
+  )
+
+export const chevronDown = (className: string = 'w-6 h-6'): Html =>
+  heroIcon(className, '1.5', 'M19.5 8.25l-7.5 7.5-7.5-7.5')
+
+export const chevronLeft = (className: string = 'w-6 h-6'): Html =>
+  heroIcon(className, '1.5', 'M15.75 19.5L8.25 12l7.5-7.5')
+
+export const chevronRight = (className: string = 'w-6 h-6'): Html =>
+  heroIcon(className, '1.5', 'm8.25 4.5 7.5 7.5-7.5 7.5')
+
+export const check = (className: string = 'w-6 h-6'): Html =>
+  heroIcon(className, '2', 'M4.5 12.75l6 6 9-13.5')
+
+export const pencil = (className: string = 'w-5 h-5'): Html =>
+  heroIcon(
+    className,
+    '1.5',
+    'm16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125',
+  )
+
+export const documentDuplicate = (className: string = 'w-5 h-5'): Html =>
+  heroIcon(
+    className,
+    '1.5',
+    'M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75',
+  )
+
+export const archiveBox = (className: string = 'w-5 h-5'): Html =>
+  heroIcon(
+    className,
+    '1.5',
+    'm20.25 7.5-.625 10.632a2.25 2.25 0 0 1-2.247 2.118H6.622a2.25 2.25 0 0 1-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H2.25c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125Z',
+  )
+
+export const arrowRight = (className: string = 'w-5 h-5'): Html =>
+  heroIcon(className, '1.5', 'M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3')
+
+export const trash = (className: string = 'w-5 h-5'): Html =>
+  heroIcon(
+    className,
+    '1.5',
+    'm14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0',
+  )
+
+export const menu = (className: string = 'w-6 h-6'): Html =>
+  heroIcon(className, '1.5', 'M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5')
+
+export const xMark = (className: string = 'w-6 h-6'): Html =>
+  heroIcon(className, '1.5', 'M6 18 18 6M6 6l12 12')