create-foldkit-app 0.27.3 → 0.28.0

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

@@ -0,0 +1,149 @@
+import { generateKeyBetween } from 'fractional-indexing'
+
+export const STORAGE_KEY = 'kanban-board'
+export const ADD_CARD_INPUT_ID = 'add-card-input'
+
+const key1 = generateKeyBetween(null, null)
+const key2 = generateKeyBetween(key1, null)
+const key3 = generateKeyBetween(key2, null)
+const key4 = generateKeyBetween(key3, null)
+const key5 = generateKeyBetween(key4, null)
+const key6 = generateKeyBetween(key5, null)
+
+export const DEFAULT_COLUMNS = [
+  {
+    id: 'todo',
+    name: 'To Do',
+    cards: [
+      {
+        id: 'card-1',
+        title: 'Research drag-and-drop patterns',
+        description:
+          'Review dnd-kit, elm-draggable, and annaghi/dnd-list for inspiration.',
+        sortKey: key1,
+      },
+      {
+        id: 'card-2',
+        title: 'Design the data model',
+        description:
+          'Card, Column, and Board schemas with fractional indexing for sort order.',
+        sortKey: key2,
+      },
+      {
+        id: 'card-3',
+        title: 'Write collision detection',
+        description:
+          'elementsFromPoint + getBoundingClientRect for drop target resolution.',
+        sortKey: key3,
+      },
+      {
+        id: 'card-4',
+        title: 'Add keyboard accessibility',
+        description:
+          'Space to pick up, arrow keys to move, Space to drop, Escape to cancel.',
+        sortKey: key4,
+      },
+      {
+        id: 'card-5',
+        title: 'Handle touch vs pointer',
+        description:
+          'Activation threshold distinguishes taps from drags on mobile devices.',
+        sortKey: key5,
+      },
+      {
+        id: 'card-6',
+        title: 'Add ARIA attributes',
+        description:
+          'role=option on draggables, role=listbox on containers, aria-roledescription=sortable.',
+        sortKey: key6,
+      },
+    ],
+  },
+  {
+    id: 'in-progress',
+    name: 'In Progress',
+    cards: [
+      {
+        id: 'card-7',
+        title: 'Build the DragAndDrop component',
+        description:
+          'Three-state state machine with collision detection and OutMessage support.',
+        sortKey: key1,
+      },
+      {
+        id: 'card-8',
+        title: 'Create kanban example',
+        description:
+          'Responsive grid layout with fractional indexing and localStorage persistence.',
+        sortKey: key2,
+      },
+      {
+        id: 'card-9',
+        title: 'Live reorder preview',
+        description:
+          'Cards shift to make room for the dragged item. Blue placeholder for pointer, actual card for keyboard.',
+        sortKey: key3,
+      },
+      {
+        id: 'card-10',
+        title: 'Cross-container movement',
+        description:
+          'Drag cards between columns. Collision detection finds any droppable container.',
+        sortKey: key4,
+      },
+      {
+        id: 'card-11',
+        title: 'Ghost element positioning',
+        description:
+          'position: fixed + translate3d with clientX/clientY for viewport-relative placement.',
+        sortKey: key5,
+      },
+    ],
+  },
+  {
+    id: 'done',
+    name: 'Done',
+    cards: [
+      {
+        id: 'card-12',
+        title: 'Set up the monorepo',
+        description: 'Turborepo with foldkit core, website, and examples.',
+        sortKey: key1,
+      },
+      {
+        id: 'card-13',
+        title: 'Write the pixel art example',
+        description:
+          'Undo/redo, UI components, subscriptions, and localStorage persistence.',
+        sortKey: key2,
+      },
+      {
+        id: 'card-14',
+        title: 'Publish to npm',
+        description: 'Changesets, CI/CD pipeline, and automated releases.',
+        sortKey: key3,
+      },
+      {
+        id: 'card-15',
+        title: 'Build the subscription system',
+        description:
+          'modelToDependencies + dependenciesToStream with Stream.when gating.',
+        sortKey: key4,
+      },
+      {
+        id: 'card-16',
+        title: 'Ship DevTools',
+        description:
+          'Message inspector, Model viewer, time-travel debugging overlay.',
+        sortKey: key5,
+      },
+      {
+        id: 'card-17',
+        title: 'Write the auth example',
+        description:
+          'Login/signup with OutMessage pattern, session persistence, route protection.',
+        sortKey: key6,
+      },
+    ],
+  },
+]

package/dist/templates/examples/kanban/src/domain/card.ts

@@ -0,0 +1,10 @@
+import { Schema as S } from 'effect'
+
+export const Card = S.Struct({
+  id: S.String,
+  title: S.String,
+  description: S.String,
+  sortKey: S.String,
+})
+
+export type Card = typeof Card.Type

package/dist/templates/examples/kanban/src/domain/column.ts

@@ -0,0 +1,115 @@
+import { Array, Match as M, Option, Schema as S, pipe } from 'effect'
+import { evo } from 'foldkit/struct'
+import { generateKeyBetween } from 'fractional-indexing'
+
+import type { Card } from './card'
+import { Card as CardSchema } from './card'
+
+export const Column = S.Struct({
+  id: S.String,
+  name: S.String,
+  cards: S.Array(CardSchema),
+})
+
+export type Column = typeof Column.Type
+
+const generateSortKeyAtIndex = (
+  cards: ReadonlyArray<Card>,
+  targetIndex: number,
+): string => {
+  const maybeBefore = Array.get(cards, targetIndex - 1)
+  const maybeAfter = Array.get(cards, targetIndex)
+  return generateKeyBetween(
+    Option.match(maybeBefore, {
+      onNone: () => null,
+      onSome: ({ sortKey }) => sortKey,
+    }),
+    Option.match(maybeAfter, {
+      onNone: () => null,
+      onSome: ({ sortKey }) => sortKey,
+    }),
+  )
+}
+
+export const removeCard = (
+  column: Column,
+  cardId: string,
+): { readonly column: Column; readonly maybeCard: Option.Option<Card> } => {
+  const maybeCard = Array.findFirst(column.cards, ({ id }) => id === cardId)
+  return {
+    column: evo(column, {
+      cards: () => Array.filter(column.cards, ({ id }) => id !== cardId),
+    }),
+    maybeCard,
+  }
+}
+
+export const insertCard = (
+  column: Column,
+  card: Card,
+  targetIndex: number,
+): Column => {
+  const sortKey = generateSortKeyAtIndex(column.cards, targetIndex)
+  const updatedCard = evo(card, { sortKey: () => sortKey })
+  return evo(column, {
+    cards: () =>
+      pipe(
+        column.cards,
+        Array.insertAt(targetIndex, updatedCard),
+        Option.getOrElse(() => [...column.cards, updatedCard]),
+      ),
+  })
+}
+
+export const appendCard = (column: Column, card: Card): Column => {
+  const sortKey = generateSortKeyAtIndex(column.cards, column.cards.length)
+  return evo(column, {
+    cards: () => [...column.cards, evo(card, { sortKey: () => sortKey })],
+  })
+}
+
+const findCard = (
+  columns: ReadonlyArray<Column>,
+  containerId: string,
+  cardId: string,
+): Option.Option<Card> =>
+  pipe(
+    columns,
+    Array.findFirst(({ id }) => id === containerId),
+    Option.flatMap(({ cards }) =>
+      Array.findFirst(cards, ({ id }) => id === cardId),
+    ),
+  )
+
+export const reorder = (
+  columns: ReadonlyArray<Column>,
+  itemId: string,
+  fromContainerId: string,
+  toContainerId: string,
+  toIndex: number,
+): ReadonlyArray<Column> => {
+  if (fromContainerId === toContainerId) {
+    return Array.map(columns, column => {
+      if (column.id !== fromContainerId) {
+        return column
+      }
+      const { column: withoutCard, maybeCard } = removeCard(column, itemId)
+      return Option.match(maybeCard, {
+        onNone: () => column,
+        onSome: card => insertCard(withoutCard, card, toIndex),
+      })
+    })
+  }
+
+  return Option.match(findCard(columns, fromContainerId, itemId), {
+    onNone: () => columns,
+    onSome: card =>
+      Array.map(columns, column =>
+        M.value(column.id).pipe(
+          M.when(fromContainerId, () => removeCard(column, itemId).column),
+          M.when(toContainerId, () => insertCard(column, card, toIndex)),
+          M.orElse(() => column),
+        ),
+      ),
+  })
+}

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

@@ -0,0 +1,2 @@
+export * as Card from './card'
+export * as Column from './column'

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

@@ -0,0 +1,27 @@
+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'),
+  devTools: {
+    Message,
+  },
+})
+
+Runtime.run(application, { flags })

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

@@ -0,0 +1,56 @@
+import { Effect, Option, Schema as S } from 'effect'
+import { KeyValueStore } from 'effect/unstable/persistence'
+import { Runtime } from 'foldkit'
+
+import { BrowserKeyValueStore } from '@effect/platform-browser'
+import { DragAndDrop } from '@foldkit/ui'
+
+import { DEFAULT_COLUMNS, STORAGE_KEY } from './constant'
+import { Message } from './message'
+import { Model, SavedBoard } from './model'
+import { subscriptions } from './subscription'
+import { update } from './update'
+import { view } from './view'
+
+// FLAGS
+
+export const Flags = S.Struct({
+  maybeSavedBoard: S.Option(SavedBoard),
+})
+export type Flags = typeof Flags.Type
+
+export const flags: Effect.Effect<Flags> = Effect.gen(function* () {
+  const store = yield* KeyValueStore.KeyValueStore
+  const json = yield* Effect.fromOption(
+    Option.fromNullishOr(yield* store.get(STORAGE_KEY)),
+  )
+  const decoded = yield* S.decodeEffect(S.fromJsonString(SavedBoard))(json)
+  return Flags.make({ maybeSavedBoard: Option.some(decoded) })
+}).pipe(
+  Effect.catch(() =>
+    Effect.succeed(Flags.make({ maybeSavedBoard: Option.none() })),
+  ),
+  Effect.provide(BrowserKeyValueStore.layerLocalStorage),
+)
+
+// INIT
+
+export const init: Runtime.ApplicationInit<Model, Message, Flags> = flags => {
+  const columns = Option.match(flags.maybeSavedBoard, {
+    onNone: () => DEFAULT_COLUMNS,
+    onSome: ({ columns }) => columns,
+  })
+
+  return [
+    {
+      columns,
+      dragAndDrop: DragAndDrop.init({ id: 'kanban' }),
+      maybeNewCardColumnId: Option.none(),
+      newCardTitle: '',
+      announcement: '',
+    },
+    [],
+  ]
+}
+
+export { Message, Model, subscriptions, update, view }

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

@@ -0,0 +1,21 @@
+import { Schema as S } from 'effect'
+import { defineMessageUnion } from 'foldkit/message'
+
+import { DragAndDrop } from '@foldkit/ui'
+
+export const Message = defineMessageUnion({
+  GotDragAndDropMessage: { message: DragAndDrop.Message },
+  ClickedAddCard: { columnId: S.String },
+  ChangedNewCardTitle: { value: S.String },
+  SubmittedNewCard: {},
+  CancelledNewCard: {},
+  CompletedGenerateCardId: {
+    cardId: S.String,
+    columnId: S.String,
+    title: S.String,
+  },
+  CompletedSaveBoard: {},
+  CompletedFocusAddCardInput: {},
+})
+
+export type Message = typeof Message.Type

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

@@ -0,0 +1,21 @@
+import { Schema as S } from 'effect'
+
+import { DragAndDrop } from '@foldkit/ui'
+
+import { Column } from './domain'
+
+export const SavedBoard = S.Struct({
+  columns: S.Array(Column.Column),
+})
+
+export type SavedBoard = typeof SavedBoard.Type
+
+export const Model = S.Struct({
+  columns: S.Array(Column.Column),
+  dragAndDrop: DragAndDrop.Model,
+  maybeNewCardColumnId: S.Option(S.String),
+  newCardTitle: S.String,
+  announcement: S.String,
+})
+
+export type Model = typeof Model.Type

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

@@ -0,0 +1,161 @@
+import { Option } from 'effect'
+import {
+  Command,
+  click,
+  expect,
+  given,
+  inside,
+  label,
+  role,
+  scene,
+  submit,
+  text,
+  type,
+  within,
+} from 'foldkit/scene'
+import { describe, test } from 'vitest'
+
+import { DragAndDrop } from '@foldkit/ui'
+
+import { FocusAddCardInput, GenerateCardId, SaveBoard } from './command'
+import type { Card } from './domain/card'
+import type { Column } from './domain/column'
+import { Message } from './message'
+import type { Model } from './model'
+import { update } from './update'
+import { view } from './view/index'
+
+const card = (id: string, title: string, sortKey: string): Card => ({
+  id,
+  title,
+  description: '',
+  sortKey,
+})
+
+const testColumns: ReadonlyArray<Column> = [
+  {
+    id: 'todo',
+    name: 'To Do',
+    cards: [card('1', 'Write tests', 'a0'), card('2', 'Fix bug', 'a1')],
+  },
+  {
+    id: 'in-progress',
+    name: 'In Progress',
+    cards: [card('3', 'Review PR', 'a0')],
+  },
+  { id: 'done', name: 'Done', cards: [] },
+]
+
+const testModel: Model = {
+  columns: testColumns,
+  dragAndDrop: DragAndDrop.init({ id: 'kanban' }),
+  maybeNewCardColumnId: Option.none(),
+  newCardTitle: '',
+  announcement: '',
+}
+
+const toDoColumn = role('region', { name: 'To Do' })
+const inProgressColumn = role('region', { name: 'In Progress' })
+const doneColumn = role('region', { name: 'Done' })
+
+const acknowledgeFocusInput = Command.resolve(
+  FocusAddCardInput,
+  Message.CompletedFocusAddCardInput(),
+)
+
+describe('view', () => {
+  test('board renders columns with correct names', () => {
+    scene(
+      { update, view },
+      given(testModel),
+      expect(role('heading', { name: 'To Do' })).toExist(),
+      expect(role('heading', { name: 'In Progress' })).toExist(),
+      expect(role('heading', { name: 'Done' })).toExist(),
+    )
+  })
+
+  test('columns show card counts from test data', () => {
+    scene(
+      { update, view },
+      given(testModel),
+      expect(toDoColumn).toContainText('2'),
+      expect(inProgressColumn).toContainText('1'),
+      expect(doneColumn).toContainText('0'),
+    )
+  })
+
+  test('card titles are rendered within their columns', () => {
+    scene(
+      { update, view },
+      given(testModel),
+      expect(within(toDoColumn, text('Write tests'))).toExist(),
+      expect(within(toDoColumn, text('Fix bug'))).toExist(),
+      expect(within(inProgressColumn, text('Review PR'))).toExist(),
+    )
+  })
+
+  test('clicking add card shows the form within the column', () => {
+    scene(
+      { update, view },
+      given(testModel),
+      inside(
+        toDoColumn,
+        click(role('button', { name: '+ Add card' })),
+        acknowledgeFocusInput,
+        expect(label('New card title')).toExist(),
+      ),
+    )
+  })
+
+  test('typing a card title updates the input', () => {
+    scene(
+      { update, view },
+      given(testModel),
+      click(within(toDoColumn, role('button', { name: '+ Add card' }))),
+      acknowledgeFocusInput,
+      type(label('New card title'), 'Buy groceries'),
+      expect(label('New card title')).toHaveValue('Buy groceries'),
+    )
+  })
+
+  test('submitting the form adds a card to the column', () => {
+    scene(
+      { update, view },
+      given(testModel),
+      inside(
+        toDoColumn,
+        click(role('button', { name: '+ Add card' })),
+        acknowledgeFocusInput,
+        type(label('New card title'), 'Buy groceries'),
+        submit(role('form')),
+        Command.expectExact(GenerateCardId),
+        Command.resolve(
+          GenerateCardId,
+          Message.CompletedGenerateCardId({
+            cardId: 'test-uuid',
+            columnId: 'todo',
+            title: 'Buy groceries',
+          }),
+        ),
+        Command.expectExact(SaveBoard),
+        Command.resolve(SaveBoard, Message.CompletedSaveBoard()),
+        expect(text('Buy groceries')).toExist(),
+      ),
+    )
+  })
+
+  test('cancelling closes the form and restores the add card button', () => {
+    scene(
+      { update, view },
+      given(testModel),
+      click(within(toDoColumn, role('button', { name: '+ Add card' }))),
+      acknowledgeFocusInput,
+      expect(label('New card title')).toExist(),
+      click(role('button', { name: 'Cancel' })),
+      expect(label('New card title')).toBeAbsent(),
+      expect(
+        within(toDoColumn, role('button', { name: '+ Add card' })),
+      ).toExist(),
+    )
+  })
+})