create-foldkit-app 0.27.3 → 0.28.0

package/dist/templates/examples/auth/src/view.ts

@@ -0,0 +1,40 @@
+import { Match as M } from 'effect'
+import { type Document, HtmlBuilder } from 'foldkit/html'
+
+import { Message } from './message'
+import { LoggedIn, LoggedOut, Model } from './model'
+
+const title = (model: Model): string =>
+  M.value(model.route).pipe(
+    M.tag('Home', () => 'Auth'),
+    M.orElse(({ _tag }) => `${_tag} | Auth`),
+  )
+
+export const view = (model: Model, h: HtmlBuilder<Message>): Document => ({
+  title: title(model),
+  body: h.div(
+    [h.Class('min-h-screen bg-gray-100')],
+    [
+      M.value(model).pipe(
+        M.tagsExhaustive({
+          LoggedOut: loggedOutModel =>
+            h.submodel({
+              slotId: 'logged-out',
+              model: loggedOutModel,
+              view: LoggedOut.view,
+              toParentMessage: message =>
+                Message.GotLoggedOutMessage({ message }),
+            }),
+          LoggedIn: loggedInModel =>
+            h.submodel({
+              slotId: 'logged-in',
+              model: loggedInModel,
+              view: LoggedIn.view,
+              toParentMessage: message =>
+                Message.GotLoggedInMessage({ message }),
+            }),
+        }),
+      ),
+    ],
+  ),
+})

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

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

package/dist/templates/examples/canvas-art/package.json

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

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

package/dist/templates/examples/canvas-art/src/main.ts

@@ -0,0 +1,274 @@
+import {
+  Array,
+  Effect,
+  Number,
+  Option,
+  Random,
+  Schema as S,
+  pipe,
+} from 'effect'
+import { Canvas, Command, Runtime, Subscription } from 'foldkit'
+import { Document, Html, HtmlBuilder } from 'foldkit/html'
+import { defineMessageUnion } from 'foldkit/message'
+import { evo } from 'foldkit/struct'
+
+import { Button } from '@foldkit/ui'
+
+// MODEL
+
+const CANVAS_WIDTH = 600
+const CANVAS_HEIGHT = 400
+
+const BALL_RADIUS_MIN = 8
+const BALL_RADIUS_MAX = 24
+const BALL_SPEED_MIN = 80
+const BALL_SPEED_MAX = 240
+const FULL_CIRCLE_RADIANS = Math.PI * 2
+const MS_PER_SECOND = 1000
+
+const PALETTE: ReadonlyArray<string> = [
+  '#ff2d55',
+  '#ffcc00',
+  '#34c759',
+  '#5ac8fa',
+  '#af52de',
+  '#ff9500',
+]
+const FALLBACK_COLOR = '#ffffff'
+
+const Ball = S.Struct({
+  id: S.Number,
+  x: S.Number,
+  y: S.Number,
+  vx: S.Number,
+  vy: S.Number,
+  radius: S.Number,
+  color: S.String,
+})
+type Ball = typeof Ball.Type
+
+export const Model = S.Struct({
+  balls: S.Array(Ball),
+  nextId: S.Number,
+  isRunning: S.Boolean,
+})
+export type Model = typeof Model.Type
+
+// MESSAGE
+
+export const Message = defineMessageUnion({
+  TickedFrame: { deltaTime: S.Number },
+  ClickedCanvas: { x: S.Number, y: S.Number },
+  CompletedGenerateBall: {
+    x: S.Number,
+    y: S.Number,
+    vx: S.Number,
+    vy: S.Number,
+    radius: S.Number,
+    color: S.String,
+  },
+  ClickedClear: {},
+  ClickedTogglePlay: {},
+})
+
+export type Message = typeof Message.Type
+
+// INIT
+
+export const init: Runtime.ApplicationInit<Model, Message> = () => [
+  { balls: [], nextId: 0, isRunning: true },
+  [],
+]
+
+// COMMAND
+
+export const GenerateBall = Command.define('GenerateBall', {
+  args: { x: S.Number, y: S.Number },
+  messages: [Message.CompletedGenerateBall],
+  execute: ({ x, y }) =>
+    Effect.gen(function* () {
+      const angle = yield* Random.nextBetween(0, FULL_CIRCLE_RADIANS)
+      const speed = yield* Random.nextBetween(BALL_SPEED_MIN, BALL_SPEED_MAX)
+      const radius = yield* Random.nextBetween(BALL_RADIUS_MIN, BALL_RADIUS_MAX)
+      const colorIndex = yield* Random.nextIntBetween(0, PALETTE.length, {
+        halfOpen: true,
+      })
+      const color = pipe(
+        PALETTE,
+        Array.get(colorIndex),
+        Option.getOrElse(() => FALLBACK_COLOR),
+      )
+      return Message.CompletedGenerateBall({
+        x,
+        y,
+        vx: Math.cos(angle) * speed,
+        vy: Math.sin(angle) * speed,
+        radius,
+        color,
+      })
+    }),
+})
+
+// UPDATE
+
+const advanceBall =
+  (deltaSeconds: number) =>
+  (ball: Ball): Ball => {
+    const nextX = ball.x + ball.vx * deltaSeconds
+    const nextY = ball.y + ball.vy * deltaSeconds
+    const minX = ball.radius
+    const maxX = CANVAS_WIDTH - ball.radius
+    const minY = ball.radius
+    const maxY = CANVAS_HEIGHT - ball.radius
+    const bouncedX = nextX < minX || nextX > maxX
+    const bouncedY = nextY < minY || nextY > maxY
+    return evo(ball, {
+      x: () => Math.max(minX, Math.min(maxX, nextX)),
+      y: () => Math.max(minY, Math.min(maxY, nextY)),
+      vx: vx => (bouncedX ? -vx : vx),
+      vy: vy => (bouncedY ? -vy : vy),
+    })
+  }
+
+export const update = (model: Model, message: Message) =>
+  Message.match<readonly [Model, ReadonlyArray<Command.Command<Message>>]>(
+    message,
+    {
+      TickedFrame: ({ deltaTime }) => [
+        evo(model, {
+          balls: Array.map(advanceBall(deltaTime / MS_PER_SECOND)),
+        }),
+        [],
+      ],
+
+      ClickedCanvas: ({ x, y }) => [model, [GenerateBall({ x, y })]],
+
+      CompletedGenerateBall: ({ x, y, vx, vy, radius, color }) => [
+        evo(model, {
+          balls: balls => [
+            ...balls,
+            { id: model.nextId, x, y, vx, vy, radius, color },
+          ],
+          nextId: Number.increment,
+        }),
+        [],
+      ],
+
+      ClickedClear: () => [evo(model, { balls: () => [] }), []],
+
+      ClickedTogglePlay: () => [
+        evo(model, { isRunning: running => !running }),
+        [],
+      ],
+    },
+  )
+
+// SUBSCRIPTION
+
+export const subscriptions = Subscription.make<Model, Message>()(_entry => ({
+  frame: Subscription.animationFrame({
+    isActive: model => model.isRunning,
+    toMessage: deltaTime => Message.TickedFrame({ deltaTime }),
+  }),
+}))
+
+// VIEW
+
+const backgroundShape = Canvas.Rect({
+  x: 0,
+  y: 0,
+  width: CANVAS_WIDTH,
+  height: CANVAS_HEIGHT,
+  fill: '#0a0a0f',
+})
+
+const ballShape = (ball: Ball): Canvas.Shape =>
+  Canvas.Circle({
+    x: ball.x,
+    y: ball.y,
+    radius: ball.radius,
+    fill: ball.color,
+  })
+
+const sceneShapes = (model: Model): ReadonlyArray<Canvas.Shape> => [
+  backgroundShape,
+  ...Array.map(model.balls, ballShape),
+]
+
+const controlsView = (model: Model, h: HtmlBuilder<Message>): Html =>
+  h.div(
+    [h.Class('flex gap-3 mt-4')],
+    [
+      Button.view(
+        {
+          onClick: Message.ClickedTogglePlay(),
+          toView: attributes =>
+            h.button(
+              [
+                ...attributes.button,
+                h.Class(
+                  'min-w-20 px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-500',
+                ),
+              ],
+              [model.isRunning ? 'Pause' : 'Play'],
+            ),
+        },
+        h,
+      ),
+      Button.view(
+        {
+          onClick: Message.ClickedClear(),
+          toView: attributes =>
+            h.button(
+              [
+                ...attributes.button,
+                h.Class(
+                  'min-w-20 px-4 py-2 bg-zinc-700 text-white rounded hover:bg-zinc-600',
+                ),
+              ],
+              ['Clear'],
+            ),
+        },
+        h,
+      ),
+      h.p(
+        [h.Class('px-4 py-2 text-zinc-400 text-sm self-center')],
+        [
+          h.span(
+            [h.Class('inline-block tabular-nums text-right min-w-8')],
+            [`${model.balls.length}`],
+          ),
+          ' balls',
+        ],
+      ),
+    ],
+  )
+
+export const view = (model: Model, h: HtmlBuilder<Message>): Document => ({
+  title: `Canvas Art (${model.balls.length} balls)`,
+  body: h.div(
+    [
+      h.Class(
+        'flex flex-col items-center justify-center min-h-screen bg-black text-white p-8',
+      ),
+    ],
+    [
+      h.h1([h.Class('text-4xl font-bold mb-2')], ['Canvas Art']),
+      h.p(
+        [h.Class('text-zinc-400 mb-6')],
+        ['Click the canvas to spawn a ball.'],
+      ),
+      Canvas.view(
+        {
+          width: CANVAS_WIDTH,
+          height: CANVAS_HEIGHT,
+          shapes: sceneShapes(model),
+          className: 'rounded-lg shadow-2xl cursor-crosshair',
+          onPointerDown: ({ x, y }) => Message.ClickedCanvas({ x, y }),
+        },
+        h,
+      ),
+      controlsView(model, h),
+    ],
+  ),
+})

package/dist/templates/examples/canvas-art/src/scene.test.ts

@@ -0,0 +1,70 @@
+import { click, expect, given, role, scene, text } from 'foldkit/scene'
+import { describe, test } from 'vitest'
+
+import { type Model, update, view } from './main'
+
+const emptyModel: Model = {
+  balls: [],
+  nextId: 0,
+  isRunning: true,
+}
+
+describe('view', () => {
+  test('initial view shows the heading, prompt, and Pause + Clear controls', () => {
+    scene(
+      { update, view },
+      given(emptyModel),
+      expect(role('heading', { name: 'Canvas Art' })).toExist(),
+      expect(text('Click the canvas to spawn a ball.')).toExist(),
+      expect(role('button', { name: 'Pause' })).toExist(),
+      expect(role('button', { name: 'Clear' })).toExist(),
+      expect(text('0 balls')).toExist(),
+    )
+  })
+
+  test('Pause toggles to Play when the simulation is stopped', () => {
+    scene(
+      { update, view },
+      given(emptyModel),
+      click(role('button', { name: 'Pause' })),
+      expect(role('button', { name: 'Play' })).toExist(),
+      expect(role('button', { name: 'Pause' })).toBeAbsent(),
+    )
+  })
+
+  test('the ball count reflects spawned balls in the Model', () => {
+    const populatedModel: Model = {
+      ...emptyModel,
+      balls: [
+        { id: 0, x: 10, y: 20, vx: 1, vy: 1, radius: 8, color: '#ff2d55' },
+        { id: 1, x: 30, y: 40, vx: -1, vy: 1, radius: 12, color: '#5ac8fa' },
+        { id: 2, x: 50, y: 60, vx: 1, vy: -1, radius: 16, color: '#34c759' },
+      ],
+      nextId: 3,
+    }
+
+    scene(
+      { update, view },
+      given(populatedModel),
+      expect(text('3 balls')).toExist(),
+    )
+  })
+
+  test('Clear empties the rendered ball count', () => {
+    const populatedModel: Model = {
+      ...emptyModel,
+      balls: [
+        { id: 0, x: 10, y: 20, vx: 1, vy: 1, radius: 8, color: '#ff2d55' },
+      ],
+      nextId: 1,
+    }
+
+    scene(
+      { update, view },
+      given(populatedModel),
+      expect(text('1 balls')).toExist(),
+      click(role('button', { name: 'Clear' })),
+      expect(text('0 balls')).toExist(),
+    )
+  })
+})

package/dist/templates/examples/canvas-art/src/story.test.ts

@@ -0,0 +1,155 @@
+import { Command, given, message, model, story } from 'foldkit/story'
+import { describe, expect, test } from 'vitest'
+
+import { GenerateBall, Message, type Model, update } from './main'
+
+const emptyModel: Model = {
+  balls: [],
+  nextId: 0,
+  isRunning: true,
+}
+
+const populatedModel: Model = {
+  ...emptyModel,
+  balls: [
+    { id: 0, x: 100, y: 100, vx: 50, vy: 50, radius: 10, color: '#ff2d55' },
+    { id: 1, x: 200, y: 200, vx: -50, vy: -50, radius: 15, color: '#5ac8fa' },
+  ],
+  nextId: 2,
+}
+
+describe('update', () => {
+  describe('spawning balls', () => {
+    test('ClickedCanvas fires GenerateBall with the click coordinates', () => {
+      story(
+        update,
+        given(emptyModel),
+        message(Message.ClickedCanvas({ x: 150, y: 200 })),
+        Command.expectHas(GenerateBall),
+        Command.resolve(
+          GenerateBall,
+          Message.CompletedGenerateBall({
+            x: 150,
+            y: 200,
+            vx: 10,
+            vy: -10,
+            radius: 12,
+            color: '#ff2d55',
+          }),
+        ),
+        model(model => {
+          expect(model.balls).toHaveLength(1)
+          expect(model.balls[0]).toMatchObject({
+            id: 0,
+            x: 150,
+            y: 200,
+            radius: 12,
+            color: '#ff2d55',
+          })
+          expect(model.nextId).toBe(1)
+        }),
+      )
+    })
+
+    test('CompletedGenerateBall increments nextId for each ball added', () => {
+      story(
+        update,
+        given(emptyModel),
+        message(
+          Message.CompletedGenerateBall({
+            x: 10,
+            y: 10,
+            vx: 0,
+            vy: 0,
+            radius: 8,
+            color: '#fff',
+          }),
+        ),
+        message(
+          Message.CompletedGenerateBall({
+            x: 20,
+            y: 20,
+            vx: 0,
+            vy: 0,
+            radius: 8,
+            color: '#fff',
+          }),
+        ),
+        model(model => {
+          expect(model.balls.map(({ id }) => id)).toEqual([0, 1])
+          expect(model.nextId).toBe(2)
+        }),
+      )
+    })
+  })
+
+  describe('TickedFrame', () => {
+    test('advances ball positions based on velocity and delta time', () => {
+      story(
+        update,
+        given(populatedModel),
+        message(Message.TickedFrame({ deltaTime: 1000 })),
+        model(model => {
+          expect(model.balls[0]?.x).toBe(150)
+          expect(model.balls[0]?.y).toBe(150)
+        }),
+      )
+    })
+
+    test('bounces a ball off the canvas edges, flipping its velocity', () => {
+      const movingRightModel: Model = {
+        ...emptyModel,
+        balls: [
+          {
+            id: 0,
+            x: 595,
+            y: 200,
+            vx: 100,
+            vy: 0,
+            radius: 10,
+            color: '#fff',
+          },
+        ],
+        nextId: 1,
+      }
+
+      story(
+        update,
+        given(movingRightModel),
+        message(Message.TickedFrame({ deltaTime: 1000 })),
+        model(model => {
+          expect(model.balls[0]?.vx).toBe(-100)
+          expect(model.balls[0]?.x).toBe(590)
+        }),
+      )
+    })
+  })
+
+  describe('controls', () => {
+    test('ClickedClear empties the balls list', () => {
+      story(
+        update,
+        given(populatedModel),
+        message(Message.ClickedClear()),
+        model(model => {
+          expect(model.balls).toHaveLength(0)
+        }),
+      )
+    })
+
+    test('ClickedTogglePlay flips the isRunning flag', () => {
+      story(
+        update,
+        given(emptyModel),
+        message(Message.ClickedTogglePlay()),
+        model(model => {
+          expect(model.isRunning).toBe(false)
+        }),
+        message(Message.ClickedTogglePlay()),
+        model(model => {
+          expect(model.isRunning).toBe(true)
+        }),
+      )
+    })
+  })
+})

package/dist/templates/examples/canvas-art/src/styles.css

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

package/dist/templates/examples/canvas-art/src/vitest-setup.ts

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

package/dist/templates/examples/charting/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "charting-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",
+    "echarts": "^6.1.0",
+    "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/charting/src/chartHost.ts

@@ -0,0 +1,20 @@
+import type { EChartsType } from 'echarts/core'
+import { Option } from 'effect'
+
+const chartsByHostId = new Map<string, EChartsType>()
+
+export const setChart = (hostId: string, chart: EChartsType): void => {
+  chartsByHostId.set(hostId, chart)
+}
+
+export const getChart = (hostId: string): Option.Option<EChartsType> =>
+  Option.fromNullishOr(chartsByHostId.get(hostId))
+
+export const removeChart = (hostId: string): void => {
+  const maybeChart = getChart(hostId)
+
+  if (Option.isSome(maybeChart)) {
+    maybeChart.value.dispose()
+    chartsByHostId.delete(hostId)
+  }
+}