create-foldkit-app 0.27.3 → 0.28.0

package/dist/templates/examples/charting/src/weeks.ts

@@ -0,0 +1,105 @@
+import { Array, Option } from 'effect'
+
+// CONSTANT
+
+const DAYS_PER_WEEK = 7
+const HOURS_PER_DAY = 24
+const MINUTES_PER_HOUR = 60
+const SECONDS_PER_MINUTE = 60
+const MILLISECONDS_PER_SECOND = 1_000
+const MILLISECONDS_PER_DAY =
+  HOURS_PER_DAY *
+  MINUTES_PER_HOUR *
+  SECONDS_PER_MINUTE *
+  MILLISECONDS_PER_SECOND
+const MILLISECONDS_PER_WEEK = DAYS_PER_WEEK * MILLISECONDS_PER_DAY
+const ISO_DATE_LENGTH = 10
+
+const LAST_YEAR_WEEKS = 52
+
+// WEEKS
+
+export type WeeklyCount = Readonly<{ weekStart: string; count: number }>
+
+export const toIsoDate = (milliseconds: number): string =>
+  new Date(milliseconds).toISOString().slice(0, ISO_DATE_LENGTH)
+
+export const dateStringToMilliseconds = (dateString: string): number =>
+  new Date(`${dateString}T00:00:00.000Z`).getTime()
+
+export const utcWeekStartMilliseconds = (milliseconds: number): number => {
+  const date = new Date(milliseconds)
+  const dayOffset = (date.getUTCDay() + DAYS_PER_WEEK - 1) % DAYS_PER_WEEK
+  return Date.UTC(
+    date.getUTCFullYear(),
+    date.getUTCMonth(),
+    date.getUTCDate() - dayOffset,
+  )
+}
+
+export const weekStartForMilliseconds = (milliseconds: number): string =>
+  toIsoDate(utcWeekStartMilliseconds(milliseconds))
+
+export const weekStartsForLastYear = (now: number): ReadonlyArray<string> => {
+  const currentWeekStart = utcWeekStartMilliseconds(now)
+  return Array.makeBy(LAST_YEAR_WEEKS, weekIndex =>
+    toIsoDate(
+      currentWeekStart -
+        (LAST_YEAR_WEEKS - weekIndex - 1) * MILLISECONDS_PER_WEEK,
+    ),
+  )
+}
+
+export const countByWeek = <A>(
+  values: ReadonlyArray<A>,
+  weekStarts: ReadonlyArray<string>,
+  toWeekStart: (value: A) => Option.Option<string>,
+): ReadonlyArray<WeeklyCount> =>
+  Array.map(weekStarts, weekStart => ({
+    weekStart,
+    count: Array.length(
+      Array.filter(
+        values,
+        value => Option.getOrElse(toWeekStart(value), () => '') === weekStart,
+      ),
+    ),
+  }))
+
+export const sumByWeek = <A>(
+  values: ReadonlyArray<A>,
+  weekStarts: ReadonlyArray<string>,
+  toWeekStart: (value: A) => string,
+  toAmount: (value: A) => number,
+): ReadonlyArray<Readonly<{ weekStart: string; amount: number }>> =>
+  Array.map(weekStarts, weekStart => ({
+    weekStart,
+    amount: Array.reduce(
+      Array.filter(values, value => toWeekStart(value) === weekStart),
+      0,
+      (total, value) => total + toAmount(value),
+    ),
+  }))
+
+export const valueForWeek = (
+  values: ReadonlyArray<Readonly<{ weekStart: string; amount: number }>>,
+  weekStart: string,
+): number =>
+  Option.getOrElse(
+    Option.map(
+      Array.findFirst(values, value => value.weekStart === weekStart),
+      ({ amount }) => amount,
+    ),
+    () => 0,
+  )
+
+export const countForWeek = (
+  values: ReadonlyArray<WeeklyCount>,
+  weekStart: string,
+): number =>
+  Option.getOrElse(
+    Option.map(
+      Array.findFirst(values, value => value.weekStart === weekStart),
+      ({ count }) => count,
+    ),
+    () => 0,
+  )

package/dist/templates/examples/counter/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "counter-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",
+    "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/counter/src/entry.ts

@@ -0,0 +1,16 @@
+import { Runtime } from 'foldkit'
+
+import { Message, Model, init, update, view } from './main'
+
+const application = Runtime.makeApplication({
+  Model,
+  init,
+  update,
+  view,
+  container: document.getElementById('root'),
+  devTools: {
+    Message,
+  },
+})
+
+Runtime.run(application)

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

@@ -0,0 +1,95 @@
+import { Schema as S } from 'effect'
+import { Command, Runtime } from 'foldkit'
+import { Document, HtmlBuilder } from 'foldkit/html'
+import { defineMessageUnion } from 'foldkit/message'
+import { evo } from 'foldkit/struct'
+
+import { Button } from '@foldkit/ui'
+
+// MODEL
+
+export const Model = S.Struct({ count: S.Number })
+export type Model = typeof Model.Type
+
+// MESSAGE
+
+export const Message = defineMessageUnion({
+  ClickedDecrement: {},
+  ClickedIncrement: {},
+  ClickedReset: {},
+})
+export type Message = typeof Message.Type
+
+// UPDATE
+
+export const update = (model: Model, message: Message) =>
+  Message.match<readonly [Model, ReadonlyArray<Command.Command<Message>>]>(
+    message,
+    {
+      ClickedDecrement: () => [evo(model, { count: count => count - 1 }), []],
+      ClickedIncrement: () => [evo(model, { count: count => count + 1 }), []],
+      ClickedReset: () => [evo(model, { count: () => 0 }), []],
+    },
+  )
+
+// INIT
+
+export const init: Runtime.ApplicationInit<Model, Message> = () => [
+  { count: 0 },
+  [],
+]
+
+// VIEW
+
+export const view = (model: Model, h: HtmlBuilder<Message>): Document => ({
+  title: `Counter: ${model.count}`,
+  body: h.div(
+    [
+      h.Class(
+        'min-h-screen bg-white flex flex-col items-center justify-center gap-6 p-6',
+      ),
+    ],
+    [
+      h.p(
+        [h.Class('text-6xl font-bold text-gray-800')],
+        [model.count.toString()],
+      ),
+      h.div(
+        [h.Class('flex flex-wrap justify-center gap-4')],
+        [
+          Button.view(
+            {
+              onClick: Message.ClickedDecrement(),
+              toView: attributes =>
+                h.button([...attributes.button, h.Class(buttonStyle)], ['-']),
+            },
+            h,
+          ),
+          Button.view(
+            {
+              onClick: Message.ClickedReset(),
+              toView: attributes =>
+                h.button(
+                  [...attributes.button, h.Class(buttonStyle)],
+                  ['Reset'],
+                ),
+            },
+            h,
+          ),
+          Button.view(
+            {
+              onClick: Message.ClickedIncrement(),
+              toView: attributes =>
+                h.button([...attributes.button, h.Class(buttonStyle)], ['+']),
+            },
+            h,
+          ),
+        ],
+      ),
+    ],
+  ),
+})
+
+// STYLE
+
+const buttonStyle = 'bg-black text-white hover:bg-gray-700 px-4 py-2 transition'

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

@@ -0,0 +1,57 @@
+import { click, expect, given, role, scene, text } from 'foldkit/scene'
+import { describe, test } from 'vitest'
+
+import { type Model, update, view } from './main'
+
+const initialModel: Model = { count: 0 }
+
+describe('view', () => {
+  test('renders the initial count and three buttons', () => {
+    scene(
+      { update, view },
+      given(initialModel),
+      expect(text('0')).toExist(),
+      expect(role('button', { name: '+' })).toExist(),
+      expect(role('button', { name: '-' })).toExist(),
+      expect(role('button', { name: 'Reset' })).toExist(),
+    )
+  })
+
+  test('clicking + increments the displayed count', () => {
+    scene(
+      { update, view },
+      given(initialModel),
+      click(role('button', { name: '+' })),
+      expect(text('1')).toExist(),
+      click(role('button', { name: '+' })),
+      expect(text('2')).toExist(),
+    )
+  })
+
+  test('clicking - decrements the displayed count', () => {
+    scene(
+      { update, view },
+      given({ count: 3 }),
+      click(role('button', { name: '-' })),
+      expect(text('2')).toExist(),
+    )
+  })
+
+  test('clicking - past zero produces a negative count', () => {
+    scene(
+      { update, view },
+      given(initialModel),
+      click(role('button', { name: '-' })),
+      expect(text('-1')).toExist(),
+    )
+  })
+
+  test('Reset returns the count to zero', () => {
+    scene(
+      { update, view },
+      given({ count: 42 }),
+      click(role('button', { name: 'Reset' })),
+      expect(text('0')).toExist(),
+    )
+  })
+})

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

@@ -0,0 +1,71 @@
+import { Command, given, message, model, story } from 'foldkit/story'
+import { describe, expect, test } from 'vitest'
+
+import { Message, type Model, update } from './main'
+
+const initialModel: Model = { count: 0 }
+
+describe('update', () => {
+  test('ClickedIncrement adds one to the count', () => {
+    story(
+      update,
+      given(initialModel),
+      message(Message.ClickedIncrement()),
+      Command.expectNone(),
+      model(model => {
+        expect(model.count).toBe(1)
+      }),
+    )
+  })
+
+  test('ClickedDecrement subtracts one from the count', () => {
+    story(
+      update,
+      given({ count: 5 }),
+      message(Message.ClickedDecrement()),
+      model(model => {
+        expect(model.count).toBe(4)
+      }),
+    )
+  })
+
+  test('ClickedDecrement past zero produces a negative count', () => {
+    story(
+      update,
+      given(initialModel),
+      message(Message.ClickedDecrement()),
+      model(model => {
+        expect(model.count).toBe(-1)
+      }),
+    )
+  })
+
+  test('ClickedReset sets the count back to zero', () => {
+    story(
+      update,
+      given({ count: 99 }),
+      message(Message.ClickedReset()),
+      model(model => {
+        expect(model.count).toBe(0)
+      }),
+    )
+  })
+
+  test('successive Messages accumulate as expected', () => {
+    story(
+      update,
+      given(initialModel),
+      message(Message.ClickedIncrement()),
+      message(Message.ClickedIncrement()),
+      message(Message.ClickedIncrement()),
+      message(Message.ClickedDecrement()),
+      model(model => {
+        expect(model.count).toBe(2)
+      }),
+      message(Message.ClickedReset()),
+      model(model => {
+        expect(model.count).toBe(0)
+      }),
+    )
+  })
+})

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

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

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

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

package/dist/templates/examples/counters/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "counters-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",
+    "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/counters/src/counter.ts

@@ -0,0 +1,70 @@
+import { Schema as S } from 'effect'
+import { Command, Submodel } from 'foldkit'
+import { defineMessageUnion } from 'foldkit/message'
+import { evo } from 'foldkit/struct'
+
+import { Button } from '@foldkit/ui'
+
+// MODEL
+
+export const Model = S.Struct({ count: S.Number })
+export type Model = typeof Model.Type
+
+export const init: Model = { count: 0 }
+
+// MESSAGE
+
+export const Message = defineMessageUnion({
+  ClickedDecrement: {},
+  ClickedIncrement: {},
+})
+
+export type Message = typeof Message.Type
+
+// UPDATE
+
+export const update = (model: Model, message: Message) =>
+  Message.match<readonly [Model, ReadonlyArray<Command.Command<Message>>]>(
+    message,
+    {
+      ClickedDecrement: () => [evo(model, { count: count => count - 1 }), []],
+      ClickedIncrement: () => [evo(model, { count: count => count + 1 }), []],
+    },
+  )
+
+// VIEW
+
+export const view = Submodel.defineView<Model, Message>((model, h) =>
+  h.div(
+    [
+      h.Class(
+        'flex items-center gap-3 rounded-lg border border-gray-200 px-4 py-3',
+      ),
+    ],
+    [
+      Button.view(
+        {
+          onClick: Message.ClickedDecrement(),
+          toView: attributes =>
+            h.button([...attributes.button, h.Class(buttonStyle)], ['-']),
+        },
+        h,
+      ),
+      h.span(
+        [h.Class('w-12 text-center text-2xl font-mono tabular-nums')],
+        [model.count.toString()],
+      ),
+      Button.view(
+        {
+          onClick: Message.ClickedIncrement(),
+          toView: attributes =>
+            h.button([...attributes.button, h.Class(buttonStyle)], ['+']),
+        },
+        h,
+      ),
+    ],
+  ),
+)
+
+const buttonStyle =
+  'h-9 w-9 rounded bg-gray-900 text-white text-lg leading-none hover:bg-gray-700 transition cursor-pointer'

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

@@ -0,0 +1,16 @@
+import { Runtime } from 'foldkit'
+
+import { Message, Model, init, update, view } from './main'
+
+const application = Runtime.makeApplication({
+  Model,
+  init,
+  update,
+  view,
+  container: document.getElementById('root'),
+  devTools: {
+    Message,
+  },
+})
+
+Runtime.run(application)

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

@@ -0,0 +1,171 @@
+import { Array, Option, Schema as S, pipe } from 'effect'
+import { Command, Runtime, Update } from 'foldkit'
+import { Document, Html, HtmlBuilder } from 'foldkit/html'
+import { defineMessageUnion } from 'foldkit/message'
+import { evo } from 'foldkit/struct'
+
+import { Button } from '@foldkit/ui'
+
+import * as Counter from './counter'
+
+// MODEL
+
+const Row = S.Struct({
+  id: S.String,
+  counter: Counter.Model,
+})
+type Row = typeof Row.Type
+
+export const Model = S.Struct({
+  rows: S.Array(Row),
+  nextRowId: S.Number,
+})
+export type Model = typeof Model.Type
+
+// MESSAGE
+
+export const Message = defineMessageUnion({
+  ClickedAddRow: {},
+  ClickedRemoveRow: { id: S.String },
+  GotCounterMessage: {
+    id: S.String,
+    message: Counter.Message,
+  },
+})
+
+export type Message = typeof Message.Type
+
+// UPDATE
+
+const foldCounter = (id: string) =>
+  Update.foldChild({
+    update: Counter.update,
+    read: (model: Model) =>
+      pipe(
+        Array.findFirst(model.rows, row => row.id === id),
+        Option.map(row => row.counter),
+      ),
+    write: (model, nextCounter) =>
+      evo(model, {
+        rows: Array.map(row =>
+          row.id === id ? evo(row, { counter: () => nextCounter }) : row,
+        ),
+      }),
+    toParentMessage: message => Message.GotCounterMessage({ id, message }),
+  })
+
+export const update = (model: Model, message: Message) =>
+  Message.match<readonly [Model, ReadonlyArray<Command.Command<Message>>]>(
+    message,
+    {
+      ClickedAddRow: () => [
+        evo(model, {
+          rows: Array.append({
+            id: `counter-${model.nextRowId}`,
+            counter: Counter.init,
+          }),
+          nextRowId: nextRowId => nextRowId + 1,
+        }),
+        [],
+      ],
+      ClickedRemoveRow: ({ id }) => [
+        evo(model, {
+          rows: Array.filter(row => row.id !== id),
+        }),
+        [],
+      ],
+      GotCounterMessage: ({ id, message }) => foldCounter(id)(model, message),
+    },
+  )
+
+// INIT
+
+export const init: Runtime.ApplicationInit<Model, Message> = () => [
+  {
+    rows: [
+      { id: 'counter-0', counter: Counter.init },
+      { id: 'counter-1', counter: Counter.init },
+      { id: 'counter-2', counter: Counter.init },
+    ],
+    nextRowId: 3,
+  },
+  [],
+]
+
+// VIEW
+
+const rowView = (row: Row, h: HtmlBuilder<Message>): Html =>
+  h.keyed('div')(
+    row.id,
+    [h.Class('flex items-center gap-2')],
+    [
+      h.div(
+        [h.Class('flex-1')],
+        [
+          h.submodel({
+            slotId: row.id,
+            model: row.counter,
+            view: Counter.view,
+            toParentMessage: message =>
+              Message.GotCounterMessage({ id: row.id, message }),
+          }),
+        ],
+      ),
+      Button.view(
+        {
+          onClick: Message.ClickedRemoveRow({ id: row.id }),
+          toView: attributes =>
+            h.button(
+              [
+                ...attributes.button,
+                h.Class(
+                  'rounded border border-gray-300 px-3 py-1.5 text-sm text-gray-600 hover:border-red-300 hover:text-red-600 transition cursor-pointer',
+                ),
+              ],
+              ['Remove'],
+            ),
+        },
+        h,
+      ),
+    ],
+  )
+
+export const view = (model: Model, h: HtmlBuilder<Message>): Document => ({
+  title: `Counters (${model.rows.length})`,
+  body: h.div(
+    [
+      h.Class(
+        'min-h-screen bg-white flex flex-col items-center py-12 px-6 gap-6',
+      ),
+    ],
+    [
+      h.h1([h.Class('text-2xl font-semibold text-gray-900')], ['Counters']),
+      h.p(
+        [h.Class('text-sm text-gray-500 max-w-md text-center')],
+        [
+          'Each row is a Counter Submodel. The parent has no awareness of Counter internals; it just embeds the Submodel via h.submodel and routes dispatched messages back to the right row via the GotCounterMessage wrapper.',
+        ],
+      ),
+      h.div(
+        [h.Class('flex flex-col gap-3 w-full max-w-md')],
+        model.rows.map(row => rowView(row, h)),
+      ),
+      Button.view(
+        {
+          onClick: Message.ClickedAddRow(),
+          toView: attributes =>
+            h.button(
+              [
+                ...attributes.button,
+                h.Class(
+                  'rounded-lg bg-gray-900 px-4 py-2 text-sm font-medium text-white hover:bg-gray-700 transition cursor-pointer',
+                ),
+              ],
+              ['+ Add Counter'],
+            ),
+        },
+        h,
+      ),
+    ],
+  ),
+})