create-foldkit-app 0.27.3 → 0.28.0

package/dist/templates/examples/web-components/src/main.ts

@@ -0,0 +1,327 @@
+import { clsx } from 'clsx'
+import { Schema as S } from 'effect'
+import { Command, CustomElement, Runtime } from 'foldkit'
+import { Document, Html, HtmlBuilder } from 'foldkit/html'
+import { defineMessageUnion } from 'foldkit/message'
+import { evo } from 'foldkit/struct'
+import 'vanilla-colorful/hex-color-picker.js'
+
+import { Button, Input } from '@foldkit/ui'
+import '@shoelace-style/shoelace/dist/components/qr-code/qr-code.js'
+
+// MODEL
+
+export const Model = S.Struct({
+  content: S.String,
+  fillColor: S.String,
+  backgroundColor: S.String,
+})
+export type Model = typeof Model.Type
+
+// MESSAGE
+
+export const Message = defineMessageUnion({
+  UpdatedContent: { value: S.String },
+  ChangedFillColor: { value: S.String },
+  ChangedBackgroundColor: { value: S.String },
+})
+
+export type Message = typeof Message.Type
+
+// INIT
+
+const DEFAULT_CONTENT = 'https://foldkit.dev'
+const DEFAULT_FILL_COLOR = '#1e1b4b'
+const DEFAULT_BACKGROUND_COLOR = '#fef3c7'
+
+export const init: Runtime.ApplicationInit<Model, Message> = () => [
+  {
+    content: DEFAULT_CONTENT,
+    fillColor: DEFAULT_FILL_COLOR,
+    backgroundColor: DEFAULT_BACKGROUND_COLOR,
+  },
+  [],
+]
+
+// UPDATE
+
+type UpdateReturn = readonly [Model, ReadonlyArray<Command.Command<Message>>]
+
+export const update = (model: Model, message: Message) =>
+  Message.match<UpdateReturn>(message, {
+    UpdatedContent: ({ value }) => [evo(model, { content: () => value }), []],
+    ChangedFillColor: ({ value }) => [
+      evo(model, { fillColor: () => value }),
+      [],
+    ],
+    ChangedBackgroundColor: ({ value }) => [
+      evo(model, { backgroundColor: () => value }),
+      [],
+    ],
+  })
+
+// WEB COMPONENT
+
+export const hexColorPicker = CustomElement.define({
+  tag: 'hex-color-picker',
+  properties: {
+    color: S.String,
+  },
+  events: {
+    'color-changed': S.Struct({ value: S.String }),
+  },
+})
+
+const qrCode = CustomElement.define({
+  tag: 'sl-qr-code',
+  properties: {
+    value: S.String,
+    label: S.String,
+    size: S.Number,
+    fill: S.String,
+    background: S.String,
+    radius: S.Number,
+  },
+  events: {},
+})
+
+// VIEW
+
+export const view = (model: Model, h: HtmlBuilder<Message>): Document => ({
+  title: 'Foldkit QR Designer',
+  body: h.div(
+    [
+      h.Class(
+        'min-h-screen bg-slate-50 text-slate-900 px-6 py-10 flex flex-col items-center',
+      ),
+    ],
+    [
+      h.div(
+        [h.Class('w-full max-w-3xl flex flex-col gap-8')],
+        [headerView(h), designerView(model, h)],
+      ),
+    ],
+  ),
+})
+
+const codeView = (text: string, h: HtmlBuilder<Message>): Html =>
+  h.code([h.Class('px-1 py-0.5 rounded bg-slate-200 text-[0.8em]')], [text])
+
+const headerView = (h: HtmlBuilder<Message>): Html =>
+  h.header(
+    [h.Class('flex flex-col gap-2')],
+    [
+      h.h1([h.Class('text-3xl font-bold tracking-tight')], ['QR Designer']),
+      h.p(
+        [h.Class('text-sm text-slate-600 leading-relaxed')],
+        [
+          'Two third-party web components, both bound to Foldkit through ',
+          codeView('CustomElement.define', h),
+          '. ',
+          codeView('<hex-color-picker>', h),
+          ' from ',
+          codeView('vanilla-colorful', h),
+          ' emits ',
+          codeView('color-changed', h),
+          ' CustomEvents that flow back as Messages. ',
+          codeView('<sl-qr-code>', h),
+          ' from ',
+          codeView('@shoelace-style/shoelace', h),
+          ' accepts typed properties (',
+          codeView('value', h),
+          ', ',
+          codeView('fill', h),
+          ', ',
+          codeView('background', h),
+          ', ',
+          codeView('size', h),
+          ', ',
+          codeView('radius', h),
+          ') that the runtime diffs through Snabbdom’s propsModule. The pickers and the QR never touch each other directly; they share state through the Model.',
+        ],
+      ),
+    ],
+  )
+
+const FIELD_LABEL_CLASS =
+  'text-xs font-semibold uppercase tracking-wide text-slate-600'
+const FIELD_CONTROL_CLASS =
+  'px-3 py-2 text-sm rounded-md border border-slate-300 outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200'
+
+const designerView = (model: Model, h: HtmlBuilder<Message>): Html =>
+  h.div(
+    [
+      h.Class(
+        'grid grid-cols-1 md:grid-cols-[1fr_auto] gap-6 bg-white rounded-xl shadow-sm border border-slate-200 p-6',
+      ),
+    ],
+    [controlsView(model, h), previewView(model, h)],
+  )
+
+const controlsView = (model: Model, h: HtmlBuilder<Message>): Html =>
+  h.div(
+    [h.Class('flex flex-col gap-5')],
+    [
+      contentFieldView(model, h),
+      colorFieldView(
+        {
+          id: 'fill-color',
+          label: 'Fill color',
+          value: model.fillColor,
+          onChange: value => Message.ChangedFillColor({ value }),
+        },
+        h,
+      ),
+      colorFieldView(
+        {
+          id: 'background-color',
+          label: 'Background color',
+          value: model.backgroundColor,
+          onChange: value => Message.ChangedBackgroundColor({ value }),
+        },
+        h,
+      ),
+    ],
+  )
+
+const contentFieldView = (model: Model, h: HtmlBuilder<Message>): Html =>
+  Input.view(
+    {
+      id: 'qr-content',
+      value: model.content,
+      onInput: value => Message.UpdatedContent({ value }),
+      placeholder: 'https://foldkit.dev',
+      toView: attributes =>
+        h.div(
+          [h.Class('flex flex-col gap-1.5')],
+          [
+            h.label(
+              [...attributes.label, h.Class(FIELD_LABEL_CLASS)],
+              ['Encoded value'],
+            ),
+            h.input([...attributes.input, h.Class(FIELD_CONTROL_CLASS)]),
+            h.p(
+              [h.Class('text-xs text-slate-500')],
+              [
+                'Anything the QR spec accepts: a URL, plain text, a Wi-Fi config, a payment URI.',
+              ],
+            ),
+          ],
+        ),
+    },
+    h,
+  )
+
+const colorFieldView = (
+  config: Readonly<{
+    id: string
+    label: string
+    value: string
+    onChange: (value: string) => Message
+  }>,
+  h: HtmlBuilder<Message>,
+): Html => {
+  const colorPicker = hexColorPicker.withMessage(h)
+
+  return h.div(
+    [h.Class('flex flex-col gap-1.5')],
+    [
+      h.label([h.For(config.id), h.Class(FIELD_LABEL_CLASS)], [config.label]),
+      h.div(
+        [h.Class('flex items-center gap-3')],
+        [
+          colorPicker([
+            colorPicker.Color(config.value),
+            colorPicker.OnColorChanged(detail => config.onChange(detail.value)),
+            h.Class('w-40 h-40 rounded-md shadow-inner'),
+            h.Id(config.id),
+          ]),
+          h.div(
+            [h.Class('flex flex-col gap-1')],
+            [
+              h.span(
+                [h.Class('text-sm font-mono text-slate-800')],
+                [config.value.toUpperCase()],
+              ),
+              swatchRow(config.value, config.onChange, h),
+            ],
+          ),
+        ],
+      ),
+    ],
+  )
+}
+
+const PRESET_COLORS: ReadonlyArray<string> = [
+  '#1e1b4b',
+  '#9d174d',
+  '#0f766e',
+  '#b45309',
+  '#fef3c7',
+  '#ffffff',
+]
+
+const swatchClass = (isActive: boolean): string =>
+  clsx('w-5 h-5 rounded-full cursor-pointer transition', {
+    'border-2 border-indigo-600 shadow-sm': isActive,
+    'border border-slate-300 hover:border-slate-500': !isActive,
+  })
+
+const swatchRow = (
+  active: string,
+  onChange: (value: string) => Message,
+  h: HtmlBuilder<Message>,
+): Html =>
+  h.div(
+    [h.Class('flex flex-wrap gap-1.5 max-w-[10rem]')],
+    PRESET_COLORS.map(color =>
+      Button.view(
+        {
+          onClick: onChange(color),
+          toView: attributes =>
+            h.button([
+              ...attributes.button,
+              h.Title(color),
+              h.AriaLabel(`Use ${color}`),
+              h.Class(
+                swatchClass(color.toLowerCase() === active.toLowerCase()),
+              ),
+              h.Style({ backgroundColor: color }),
+            ]),
+        },
+        h,
+      ),
+    ),
+  )
+
+const QR_SIZE = 220
+
+const previewView = (model: Model, h: HtmlBuilder<Message>): Html => {
+  const qr = qrCode.withMessage(h)
+
+  return h.div(
+    [
+      h.Class(
+        'flex flex-col items-center gap-3 self-start p-4 rounded-md bg-slate-50 border border-slate-200',
+      ),
+    ],
+    [
+      qr([
+        qr.Value(model.content),
+        qr.Label(`QR code for ${model.content}`),
+        qr.Size(QR_SIZE),
+        qr.Fill(model.fillColor),
+        qr.Background(model.backgroundColor),
+        qr.Radius(0),
+      ]),
+      h.p(
+        [h.Class('text-xs text-slate-500 max-w-[14rem] text-center')],
+        [
+          'Live ',
+          codeView('<sl-qr-code>', h),
+          '. Property writes diff through Snabbdom; the canvas redraws when the Model changes.',
+        ],
+      ),
+    ],
+  )
+}

package/dist/templates/examples/web-components/src/scene.test.ts

@@ -0,0 +1,90 @@
+import {
+  CustomElement,
+  click,
+  expect,
+  given,
+  label,
+  role,
+  scene,
+  selector,
+  text,
+  type,
+} from 'foldkit/scene'
+import { describe, test } from 'vitest'
+
+import { Model, hexColorPicker, update, view } from './main'
+
+const initialModel = Model.make({
+  content: 'https://foldkit.dev',
+  fillColor: '#1e1b4b',
+  backgroundColor: '#fef3c7',
+})
+
+describe('view', () => {
+  test('initial view shows the page heading and field labels', () => {
+    scene(
+      { update, view },
+      given(initialModel),
+      expect(role('heading', { name: 'QR Designer' })).toExist(),
+      expect(label('Encoded value')).toExist(),
+      expect(text('Fill color')).toExist(),
+      expect(text('Background color')).toExist(),
+    )
+  })
+
+  test('the encoded-value input reflects the Model content', () => {
+    scene(
+      { update, view },
+      given(initialModel),
+      expect(label('Encoded value')).toHaveValue('https://foldkit.dev'),
+    )
+  })
+
+  test('typing into the input updates the rendered value', () => {
+    scene(
+      { update, view },
+      given(initialModel),
+      type(label('Encoded value'), 'WIFI:S:Net;P:secret;;'),
+      expect(label('Encoded value')).toHaveValue('WIFI:S:Net;P:secret;;'),
+    )
+  })
+
+  test('clicking the first preset swatch updates the fill color hex readout', () => {
+    scene(
+      { update, view },
+      given(initialModel),
+      expect(text('#1E1B4B')).toExist(),
+      click(role('button', { name: 'Use #0f766e' })),
+      expect(text('#0F766E')).toExist(),
+    )
+  })
+
+  test('a color-changed CustomEvent from the fill picker updates the hex readout', () => {
+    scene(
+      { update, view },
+      given(initialModel),
+      CustomElement.emit(
+        hexColorPicker,
+        selector('#fill-color'),
+        'color-changed',
+        { value: '#ff8800' },
+      ),
+      expect(text('#FF8800')).toExist(),
+    )
+  })
+
+  test('a color-changed CustomEvent from the background picker leaves the fill readout alone', () => {
+    scene(
+      { update, view },
+      given(initialModel),
+      CustomElement.emit(
+        hexColorPicker,
+        selector('#background-color'),
+        'color-changed',
+        { value: '#222222' },
+      ),
+      expect(text('#222222')).toExist(),
+      expect(text('#1E1B4B')).toExist(),
+    )
+  })
+})

package/dist/templates/examples/web-components/src/story.test.ts

@@ -0,0 +1,90 @@
+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 = {
+  content: 'https://foldkit.dev',
+  fillColor: '#1e1b4b',
+  backgroundColor: '#fef3c7',
+}
+
+describe('update', () => {
+  describe('content', () => {
+    test('UpdatedContent stores the encoded value', () => {
+      story(
+        update,
+        given(initialModel),
+        message(
+          Message.UpdatedContent({
+            value: 'WIFI:S:Network;T:WPA;P:secret;;',
+          }),
+        ),
+        model(model => {
+          expect(model.content).toBe('WIFI:S:Network;T:WPA;P:secret;;')
+        }),
+      )
+    })
+
+    test('clearing the input stores the empty string', () => {
+      story(
+        update,
+        given(initialModel),
+        message(Message.UpdatedContent({ value: '' })),
+        model(model => {
+          expect(model.content).toBe('')
+        }),
+      )
+    })
+  })
+
+  describe('color changes', () => {
+    test('ChangedFillColor replaces only the fill', () => {
+      story(
+        update,
+        given(initialModel),
+        message(Message.ChangedFillColor({ value: '#0f766e' })),
+        model(model => {
+          expect(model.fillColor).toBe('#0f766e')
+          expect(model.backgroundColor).toBe(initialModel.backgroundColor)
+          expect(model.content).toBe(initialModel.content)
+        }),
+      )
+    })
+
+    test('ChangedBackgroundColor replaces only the background', () => {
+      story(
+        update,
+        given(initialModel),
+        message(Message.ChangedBackgroundColor({ value: '#ffffff' })),
+        model(model => {
+          expect(model.backgroundColor).toBe('#ffffff')
+          expect(model.fillColor).toBe(initialModel.fillColor)
+        }),
+      )
+    })
+
+    test('successive color changes accumulate', () => {
+      story(
+        update,
+        given(initialModel),
+        message(Message.ChangedFillColor({ value: '#9d174d' })),
+        message(Message.ChangedBackgroundColor({ value: '#ffffff' })),
+        message(Message.ChangedFillColor({ value: '#0f766e' })),
+        model(model => {
+          expect(model.fillColor).toBe('#0f766e')
+          expect(model.backgroundColor).toBe('#ffffff')
+        }),
+      )
+    })
+
+    test('update never produces Commands', () => {
+      story(
+        update,
+        given(initialModel),
+        message(Message.ChangedFillColor({ value: '#9d174d' })),
+        Command.expectNone(),
+      )
+    })
+  })
+})

package/dist/templates/examples/web-components/src/styles.css

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

package/dist/templates/examples/web-components/src/vitest-setup.ts

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

package/dist/templates/examples/websocket-chat/package.json

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

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