create-foldkit-app 0.27.3 → 0.28.0

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

@@ -0,0 +1,682 @@
+import clsx from 'clsx'
+import {
+  Array,
+  Clock,
+  Effect,
+  Match as M,
+  Option,
+  Random,
+  Schema as S,
+  String,
+} from 'effect'
+import { KeyValueStore } from 'effect/unstable/persistence'
+import { Command, Runtime } from 'foldkit'
+import { Document, Html, HtmlBuilder } from 'foldkit/html'
+import { defineMessageUnion } from 'foldkit/message'
+import { ts } from 'foldkit/schema'
+import { evo } from 'foldkit/struct'
+
+import { BrowserKeyValueStore } from '@effect/platform-browser'
+import { Button, Checkbox, Input } from '@foldkit/ui'
+
+// CONSTANT
+
+const TODOS_STORAGE_KEY = 'todos'
+
+// MODEL
+
+const Todo = S.Struct({
+  id: S.String,
+  text: S.String,
+  completed: S.Boolean,
+  createdAt: S.Number,
+})
+type Todo = typeof Todo.Type
+
+const Todos = S.Array(Todo)
+type Todos = typeof Todos.Type
+
+const Filter = S.Literals(['All', 'Active', 'Completed'])
+type Filter = typeof Filter.Type
+
+export const NotEditing = ts('NotEditing')
+type NotEditing = typeof NotEditing.Type
+
+export const Editing = ts('Editing', {
+  id: S.String,
+  text: S.String,
+})
+type Editing = typeof Editing.Type
+
+const EditingState = S.Union([NotEditing, Editing])
+type EditingState = typeof EditingState.Type
+
+export const Model = S.Struct({
+  todos: Todos,
+  newTodoText: S.String,
+  filter: Filter,
+  editing: EditingState,
+})
+export type Model = typeof Model.Type
+
+// MESSAGE
+
+export const Message = defineMessageUnion({
+  UpdatedNewTodo: { text: S.String },
+  UpdatedEditingTodo: { text: S.String },
+  AddedTodo: {},
+  CompletedGenerateTodo: { id: S.String, timestamp: S.Number, text: S.String },
+  DeletedTodo: { id: S.String },
+  ToggledTodo: { id: S.String },
+  StartedEditing: { id: S.String },
+  SavedEdit: {},
+  CancelledEdit: {},
+  ToggledAll: {},
+  ClearedCompleted: {},
+  SelectedFilter: { filter: Filter },
+  SucceededSaveTodos: { todos: Todos },
+  FailedSaveTodos: {},
+})
+export type Message = typeof Message.Type
+
+// FLAGS
+
+export const Flags = S.Struct({
+  todos: S.Option(Todos),
+})
+export type Flags = typeof Flags.Type
+
+// INIT
+
+export const init: Runtime.ApplicationInit<Model, Message, Flags> = flags => [
+  {
+    todos: Option.getOrElse(flags.todos, () => []),
+    newTodoText: '',
+    filter: 'All',
+    editing: NotEditing(),
+  },
+  [],
+]
+
+// UPDATE
+
+export const update = (model: Model, message: Message) =>
+  Message.match<readonly [Model, ReadonlyArray<Command.Command<Message>>]>(
+    message,
+    {
+      UpdatedNewTodo: ({ text }) => [
+        evo(model, {
+          newTodoText: () => text,
+        }),
+        [],
+      ],
+
+      UpdatedEditingTodo: ({ text }) => [
+        evo(model, {
+          editing: () =>
+            M.value(model.editing).pipe(
+              M.tagsExhaustive({
+                NotEditing: () => model.editing,
+                Editing: ({ id }) => Editing({ id, text }),
+              }),
+            ),
+        }),
+        [],
+      ],
+
+      AddedTodo: () => {
+        if (String.isEmpty(String.trim(model.newTodoText))) {
+          return [model, []]
+        }
+
+        return [model, [GenerateTodo({ text: String.trim(model.newTodoText) })]]
+      },
+
+      CompletedGenerateTodo: ({ id, timestamp, text }) => {
+        const newTodo: Todo = {
+          id,
+          text,
+          completed: false,
+          createdAt: timestamp,
+        }
+
+        const updatedTodos = [...model.todos, newTodo]
+
+        return [
+          evo(model, {
+            todos: () => updatedTodos,
+            newTodoText: () => '',
+          }),
+          [SaveTodos({ todos: updatedTodos })],
+        ]
+      },
+
+      DeletedTodo: ({ id }) => {
+        const updatedTodos = Array.filter(model.todos, todo => todo.id !== id)
+
+        return [
+          evo(model, {
+            todos: () => updatedTodos,
+          }),
+          [SaveTodos({ todos: updatedTodos })],
+        ]
+      },
+
+      ToggledTodo: ({ id }) => {
+        const updatedTodos = Array.map(model.todos, todo =>
+          todo.id === id
+            ? evo(todo, { completed: completed => !completed })
+            : todo,
+        )
+
+        return [
+          evo(model, {
+            todos: () => updatedTodos,
+          }),
+          [SaveTodos({ todos: updatedTodos })],
+        ]
+      },
+
+      StartedEditing: ({ id }) => {
+        const maybeTodo = Array.findFirst(model.todos, todo => todo.id === id)
+        return [
+          evo(model, {
+            editing: () =>
+              Editing({
+                id,
+                text: Option.match(maybeTodo, {
+                  onNone: () => '',
+                  onSome: todo => todo.text,
+                }),
+              }),
+          }),
+          [],
+        ]
+      },
+
+      SavedEdit: () =>
+        M.value(model.editing).pipe(
+          M.withReturnType<
+            readonly [Model, ReadonlyArray<Command.Command<Message>>]
+          >(),
+          M.tagsExhaustive({
+            NotEditing: () => [model, []],
+
+            Editing: ({ id, text }) => {
+              if (String.isEmpty(String.trim(text))) {
+                return [
+                  evo(model, {
+                    editing: () => NotEditing(),
+                  }),
+                  [],
+                ]
+              }
+
+              const updatedTodos = Array.map(model.todos, todo =>
+                todo.id === id
+                  ? evo(todo, { text: () => String.trim(text) })
+                  : todo,
+              )
+
+              return [
+                evo(model, {
+                  todos: () => updatedTodos,
+                  editing: () => NotEditing(),
+                }),
+                [SaveTodos({ todos: updatedTodos })],
+              ]
+            },
+          }),
+        ),
+
+      CancelledEdit: () => [
+        evo(model, {
+          editing: () => NotEditing(),
+        }),
+        [],
+      ],
+
+      ToggledAll: () => {
+        const allCompleted = Array.every(model.todos, todo => todo.completed)
+        const updatedTodos = Array.map(model.todos, todo =>
+          evo(todo, {
+            completed: () => !allCompleted,
+          }),
+        )
+
+        return [
+          evo(model, {
+            todos: () => updatedTodos,
+          }),
+          [SaveTodos({ todos: updatedTodos })],
+        ]
+      },
+
+      ClearedCompleted: () => {
+        const updatedTodos = Array.filter(model.todos, todo => !todo.completed)
+
+        return [
+          evo(model, {
+            todos: () => updatedTodos,
+          }),
+          [SaveTodos({ todos: updatedTodos })],
+        ]
+      },
+
+      SelectedFilter: ({ filter }) => [
+        evo(model, {
+          filter: () => filter,
+        }),
+        [],
+      ],
+
+      SucceededSaveTodos: ({ todos }) => [
+        evo(model, {
+          todos: () => todos,
+        }),
+        [],
+      ],
+
+      FailedSaveTodos: () => [model, []],
+    },
+  )
+
+// COMMAND
+
+export const GenerateTodo = Command.define('GenerateTodo', {
+  args: { text: S.String },
+  messages: [Message.CompletedGenerateTodo],
+  execute: ({ text }) =>
+    Effect.gen(function* () {
+      const id = yield* Random.nextIntBetween(0, Number.MAX_SAFE_INTEGER).pipe(
+        Effect.map(value => value.toString(36)),
+      )
+      const timestamp = yield* Clock.currentTimeMillis
+      return Message.CompletedGenerateTodo({ id, timestamp, text })
+    }),
+})
+
+export const SaveTodos = Command.define('SaveTodos', {
+  args: { todos: Todos },
+  messages: [Message.SucceededSaveTodos, Message.FailedSaveTodos],
+  execute: ({ todos }) =>
+    Effect.gen(function* () {
+      const store = yield* KeyValueStore.KeyValueStore
+      yield* store.set(
+        TODOS_STORAGE_KEY,
+        S.encodeSync(S.fromJsonString(Todos))(todos),
+      )
+      return Message.SucceededSaveTodos({ todos })
+    }).pipe(
+      Effect.catch(() => Effect.succeed(Message.FailedSaveTodos())),
+      Effect.provide(BrowserKeyValueStore.layerLocalStorage),
+    ),
+})
+
+// VIEW
+
+const editingTextFor = (
+  editing: EditingState,
+  todoId: string,
+): Option.Option<string> =>
+  M.value(editing).pipe(
+    M.tagsExhaustive({
+      NotEditing: () => Option.none(),
+      Editing: ({ id, text }) =>
+        Option.liftPredicate(text, () => id === todoId),
+    }),
+  )
+
+const todoItemView = (
+  todo: Todo,
+  maybeEditingText: Option.Option<string>,
+  h: HtmlBuilder<Message>,
+): Html =>
+  Option.match(maybeEditingText, {
+    onNone: () => nonEditingTodoView(todo, h),
+    onSome: text => editingTodoView(todo, text, h),
+  })
+
+const editingTodoView = (
+  todo: Todo,
+  text: string,
+  h: HtmlBuilder<Message>,
+): Html =>
+  h.keyed('li')(
+    todo.id,
+    [h.Class('flex items-center gap-3 p-3 bg-gray-50 rounded-lg')],
+    [
+      Input.view(
+        {
+          id: `edit-${todo.id}`,
+          value: text,
+          onInput: text => Message.UpdatedEditingTodo({ text }),
+          toView: attributes =>
+            h.input([
+              ...attributes.input,
+              h.AriaLabel('Edit todo'),
+              h.Class(
+                'flex-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500',
+              ),
+            ]),
+        },
+        h,
+      ),
+      Button.view(
+        {
+          onClick: Message.SavedEdit(),
+          toView: attributes =>
+            h.button(
+              [
+                ...attributes.button,
+                h.Class(
+                  'px-3 py-1 bg-green-500 text-white rounded hover:bg-green-600',
+                ),
+              ],
+              ['Save'],
+            ),
+        },
+        h,
+      ),
+      Button.view(
+        {
+          onClick: Message.CancelledEdit(),
+          toView: attributes =>
+            h.button(
+              [
+                ...attributes.button,
+                h.Class(
+                  'px-3 py-1 bg-gray-500 text-white rounded hover:bg-gray-600',
+                ),
+              ],
+              ['Cancel'],
+            ),
+        },
+        h,
+      ),
+    ],
+  )
+
+const checkboxBoxClassName = (isChecked: boolean): string =>
+  clsx(
+    'flex h-4 w-4 items-center justify-center rounded border transition cursor-pointer',
+    isChecked ? 'border-blue-600 bg-blue-600' : 'border-gray-300',
+  )
+
+const nonEditingTodoView = (todo: Todo, h: HtmlBuilder<Message>): Html =>
+  h.keyed('li')(
+    todo.id,
+    [h.Class('flex items-center gap-3 p-3 hover:bg-gray-50 rounded-lg group')],
+    [
+      Checkbox.view(
+        {
+          id: `todo-${todo.id}`,
+          isChecked: todo.completed,
+          onToggle: () => Message.ToggledTodo({ id: todo.id }),
+          toView: attributes =>
+            h.div(
+              [h.Class('flex items-center')],
+              [
+                h.div(
+                  [
+                    ...attributes.checkbox,
+                    h.Class(checkboxBoxClassName(todo.completed)),
+                  ],
+                  todo.completed
+                    ? [h.span([h.Class('text-white text-xs')], ['✓'])]
+                    : [],
+                ),
+                h.span([...attributes.label, h.AriaLabel(todo.text)]),
+              ],
+            ),
+        },
+        h,
+      ),
+      h.span(
+        [
+          h.Class(
+            `flex-1 ${todo.completed ? 'line-through text-gray-500' : 'text-gray-900'}`,
+          ),
+          h.OnClick(Message.StartedEditing({ id: todo.id })),
+        ],
+        [todo.text],
+      ),
+      Button.view(
+        {
+          onClick: Message.DeletedTodo({ id: todo.id }),
+          toView: attributes =>
+            h.button(
+              [
+                ...attributes.button,
+                h.AriaLabel(`Delete ${todo.text}`),
+                h.Class(
+                  'px-2 py-1 text-red-600 opacity-0 group-hover:opacity-100 hover:bg-red-100 rounded transition-opacity',
+                ),
+              ],
+              ['×'],
+            ),
+        },
+        h,
+      ),
+    ],
+  )
+
+const filterButtonView =
+  (model: Model) =>
+  (filter: Filter, label: string, h: HtmlBuilder<Message>): Html =>
+    Button.view(
+      {
+        onClick: Message.SelectedFilter({ filter }),
+        toView: attributes =>
+          h.button(
+            [
+              ...attributes.button,
+              h.Class(
+                `px-3 py-1 rounded ${
+                  model.filter === filter
+                    ? 'bg-blue-500 text-white'
+                    : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
+                }`,
+              ),
+            ],
+            [label],
+          ),
+      },
+      h,
+    )
+
+const footerView = (
+  model: Model,
+  activeCount: number,
+  completedCount: number,
+  h: HtmlBuilder<Message>,
+): Html =>
+  Array.match(model.todos, {
+    onEmpty: () => h.empty,
+    onNonEmpty: () =>
+      h.div(
+        [h.Class('flex flex-col gap-4')],
+        [
+          h.div(
+            [h.Class('text-sm text-gray-600 text-center'), h.Role('status')],
+            [`${activeCount} active, ${completedCount} completed`],
+          ),
+
+          h.div(
+            [h.Class('flex justify-center gap-2')],
+            [
+              filterButtonView(model)('All', 'All', h),
+              filterButtonView(model)('Active', 'Active', h),
+              filterButtonView(model)('Completed', 'Completed', h),
+            ],
+          ),
+
+          h.div(
+            [h.Class('flex justify-center gap-2')],
+            [
+              Array.match(model.todos, {
+                onEmpty: () => h.empty,
+                onNonEmpty: todos =>
+                  Button.view(
+                    {
+                      onClick: Message.ToggledAll(),
+                      toView: attributes =>
+                        h.button(
+                          [
+                            ...attributes.button,
+                            h.Class(
+                              'px-3 py-1 text-sm bg-gray-200 text-gray-700 rounded hover:bg-gray-300',
+                            ),
+                          ],
+                          [
+                            Array.every(todos, todo => todo.completed)
+                              ? 'Mark all active'
+                              : 'Mark all complete',
+                          ],
+                        ),
+                    },
+                    h,
+                  ),
+              }),
+
+              completedCount > 0
+                ? Button.view(
+                    {
+                      onClick: Message.ClearedCompleted(),
+                      toView: attributes =>
+                        h.button(
+                          [
+                            ...attributes.button,
+                            h.Class(
+                              'px-3 py-1 text-sm bg-red-100 text-red-700 rounded hover:bg-red-200',
+                            ),
+                          ],
+                          [`Clear ${completedCount} completed`],
+                        ),
+                    },
+                    h,
+                  )
+                : h.empty,
+            ],
+          ),
+        ],
+      ),
+  })
+
+const filterTodos = (todos: Todos, filter: Filter): Todos =>
+  M.value(filter).pipe(
+    M.when('All', () => todos),
+    M.when('Active', () => Array.filter(todos, todo => !todo.completed)),
+    M.when('Completed', () => Array.filter(todos, todo => todo.completed)),
+    M.exhaustive,
+  )
+
+export const view = (model: Model, h: HtmlBuilder<Message>): Document => {
+  const filteredTodos = filterTodos(model.todos, model.filter)
+  const activeCount = Array.length(
+    Array.filter(model.todos, todo => !todo.completed),
+  )
+  const completedCount = Array.length(model.todos) - activeCount
+
+  const body = h.div(
+    [h.Class('min-h-screen bg-gray-100 py-8')],
+    [
+      h.div(
+        [h.Class('max-w-md mx-auto bg-white rounded-xl shadow-lg p-6')],
+        [
+          h.h1(
+            [h.Class('text-3xl font-bold text-gray-800 text-center mb-8')],
+            ['Todo App'],
+          ),
+
+          h.form(
+            [h.Class('mb-6'), h.OnSubmit(Message.AddedTodo())],
+            [
+              h.div(
+                [h.Class('flex gap-3')],
+                [
+                  Input.view(
+                    {
+                      id: 'new-todo',
+                      value: model.newTodoText,
+                      placeholder: 'What needs to be done?',
+                      onInput: text => Message.UpdatedNewTodo({ text }),
+                      toView: attributes =>
+                        h.input([
+                          ...attributes.input,
+                          h.AriaLabel('New todo'),
+                          h.Class(
+                            'flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500',
+                          ),
+                        ]),
+                    },
+                    h,
+                  ),
+                  Button.view(
+                    {
+                      type: 'submit',
+                      toView: attributes =>
+                        h.button(
+                          [
+                            ...attributes.button,
+                            h.Class(
+                              'px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500',
+                            ),
+                          ],
+                          ['Add'],
+                        ),
+                    },
+                    h,
+                  ),
+                ],
+              ),
+            ],
+          ),
+
+          Array.match(filteredTodos, {
+            onEmpty: () =>
+              h.div(
+                [h.Class('text-center text-gray-500 py-8')],
+                [
+                  M.value(model.filter).pipe(
+                    M.when('All', () => 'No todos yet. Add one above!'),
+                    M.when('Active', () => 'No active todos'),
+                    M.when('Completed', () => 'No completed todos'),
+                    M.exhaustive,
+                  ),
+                ],
+              ),
+            onNonEmpty: todos =>
+              h.ul(
+                [h.Class('space-y-2 mb-6')],
+                Array.map(todos, todo =>
+                  todoItemView(todo, editingTextFor(model.editing, todo.id), h),
+                ),
+              ),
+          }),
+
+          footerView(model, activeCount, completedCount, h),
+        ],
+      ),
+    ],
+  )
+
+  return { title: `Todos (${activeCount})`, body }
+}
+
+// FLAG
+
+export const flags: Effect.Effect<Flags> = Effect.gen(function* () {
+  const store = yield* KeyValueStore.KeyValueStore
+  const todosJson = yield* Effect.fromOption(
+    Option.fromNullishOr(yield* store.get(TODOS_STORAGE_KEY)),
+  )
+
+  const decodeTodos = S.decodeEffect(S.fromJsonString(Todos))
+  const todos = yield* decodeTodos(todosJson)
+
+  return { todos: Option.some(todos) }
+}).pipe(
+  Effect.catch(() => Effect.succeed({ todos: Option.none() })),
+  Effect.provide(BrowserKeyValueStore.layerLocalStorage),
+)