create-foldkit-app 0.30.1 → 0.31.0

package/dist/templates/examples/job-application/src/view/review.ts

@@ -1,4 +1,4 @@
-import { Array, Match as M, Option, pipe } from 'effect'
+import { Array, Option, pipe } from 'effect'
 import { File } from 'foldkit'
 import type { Html, HtmlBuilder } from 'foldkit/html'
 
@@ -6,7 +6,7 @@ import { Button } from '@foldkit/ui'
 
 import { Step } from '../domain'
 import { Message } from '../message'
-import type { Model } from '../model'
+import { type Model, Submission } from '../model'
 import { Education, PersonalInfo, Skills, WorkHistory } from '../step'
 import { employmentRange, pluralize } from './format'
 
@@ -257,99 +257,97 @@ const submissionSection = (
   attentionSteps: ReadonlyArray<Step.Step>,
   h: HtmlBuilder<Message>,
 ): Html =>
-  M.value(submission).pipe(
-    M.tagsExhaustive({
-      NotSubmitted: () =>
-        h.div(
-          [h.Class('pt-4 space-y-2')],
-          [
-            ...(shouldShowBlockedNotice
-              ? [blockedNotice(attentionSteps, h)]
-              : []),
-            Button.view(
-              {
-                onClick: Message.ClickedSubmit(),
-                toView: attributes =>
-                  h.button(
-                    [...attributes.button, h.Class(submitButtonClass)],
-                    ['Submit Application'],
-                  ),
-              },
-              h,
-            ),
-          ],
-        ),
-      Submitting: () =>
-        h.div(
-          [h.Class('pt-4')],
-          [
-            Button.view(
-              {
-                toView: attributes =>
-                  h.button(
-                    [
-                      ...attributes.button,
-                      h.Class(
-                        'w-full rounded-lg bg-indigo-400 px-4 py-3 text-sm font-semibold text-white cursor-wait',
-                      ),
-                    ],
-                    ['Submitting...'],
-                  ),
-              },
-              h,
-            ),
-          ],
-        ),
-      SubmitSuccess: () =>
-        h.div(
-          [
-            h.Role('status'),
-            h.Class(
-              'mt-4 rounded-lg border border-green-200 bg-green-50 p-4 text-center',
-            ),
-          ],
-          [
-            h.p(
-              [h.Class('text-lg font-semibold text-green-800')],
-              ['Application Submitted!'],
-            ),
-            h.p(
-              [h.Class('text-sm text-green-600 mt-1')],
-              ["Thank you for applying to work on Foldkit. We'll be in touch!"],
-            ),
-          ],
-        ),
-      SubmitError: ({ error }) =>
-        h.div(
-          [h.Class('space-y-3 pt-4')],
-          [
-            h.div(
-              [
-                h.Role('alert'),
-                h.Class(
-                  'rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-700',
+  Submission.match(submission, {
+    NotSubmitted: () =>
+      h.div(
+        [h.Class('pt-4 space-y-2')],
+        [
+          ...(shouldShowBlockedNotice
+            ? [blockedNotice(attentionSteps, h)]
+            : []),
+          Button.view(
+            {
+              onClick: Message.ClickedSubmit(),
+              toView: attributes =>
+                h.button(
+                  [...attributes.button, h.Class(submitButtonClass)],
+                  ['Submit Application'],
                 ),
-              ],
-              [error],
-            ),
-            ...(shouldShowBlockedNotice
-              ? [blockedNotice(attentionSteps, h)]
-              : []),
-            Button.view(
-              {
-                onClick: Message.ClickedSubmit(),
-                toView: attributes =>
-                  h.button(
-                    [...attributes.button, h.Class(submitButtonClass)],
-                    ['Try Again'],
-                  ),
-              },
-              h,
-            ),
-          ],
-        ),
-    }),
-  )
+            },
+            h,
+          ),
+        ],
+      ),
+    Submitting: () =>
+      h.div(
+        [h.Class('pt-4')],
+        [
+          Button.view(
+            {
+              toView: attributes =>
+                h.button(
+                  [
+                    ...attributes.button,
+                    h.Class(
+                      'w-full rounded-lg bg-indigo-400 px-4 py-3 text-sm font-semibold text-white cursor-wait',
+                    ),
+                  ],
+                  ['Submitting...'],
+                ),
+            },
+            h,
+          ),
+        ],
+      ),
+    SubmitSuccess: () =>
+      h.div(
+        [
+          h.Role('status'),
+          h.Class(
+            'mt-4 rounded-lg border border-green-200 bg-green-50 p-4 text-center',
+          ),
+        ],
+        [
+          h.p(
+            [h.Class('text-lg font-semibold text-green-800')],
+            ['Application Submitted!'],
+          ),
+          h.p(
+            [h.Class('text-sm text-green-600 mt-1')],
+            ["Thank you for applying to work on Foldkit. We'll be in touch!"],
+          ),
+        ],
+      ),
+    SubmitError: ({ error }) =>
+      h.div(
+        [h.Class('space-y-3 pt-4')],
+        [
+          h.div(
+            [
+              h.Role('alert'),
+              h.Class(
+                'rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-700',
+              ),
+            ],
+            [error],
+          ),
+          ...(shouldShowBlockedNotice
+            ? [blockedNotice(attentionSteps, h)]
+            : []),
+          Button.view(
+            {
+              onClick: Message.ClickedSubmit(),
+              toView: attributes =>
+                h.button(
+                  [...attributes.button, h.Class(submitButtonClass)],
+                  ['Try Again'],
+                ),
+            },
+            h,
+          ),
+        ],
+      ),
+  })
 
 export const review = (
   model: Model,

package/dist/templates/examples/managed-resource-layer/src/main.ts

@@ -11,7 +11,7 @@ import {
 import { Command, ManagedResource, Runtime, type Update } from 'foldkit'
 import { Document, Html, HtmlBuilder } from 'foldkit/html'
 import { defineMessageUnion } from 'foldkit/message'
-import { ts } from 'foldkit/schema'
+import { defineTaggedUnion } from 'foldkit/schema'
 import { evo } from 'foldkit/struct'
 
 import { BrowserCrypto } from '@effect/platform-browser'
@@ -47,17 +47,12 @@ type EngineService = ManagedResource.ServiceOf<typeof Engine>
 
 // MODEL
 
-export const EngineOff = ts('EngineOff')
-export const EngineBooting = ts('EngineBooting')
-export const EngineReady = ts('EngineReady', { engineId: S.String })
-export const EngineFailed = ts('EngineFailed', { reason: S.String })
-
-const EngineState = S.Union([
-  EngineOff,
-  EngineBooting,
-  EngineReady,
-  EngineFailed,
-])
+export const EngineState = defineTaggedUnion({
+  Off: {},
+  Booting: {},
+  Ready: { engineId: S.String },
+  Failed: { reason: S.String },
+})
 type EngineState = typeof EngineState.Type
 
 export const Model = S.Struct({
@@ -103,21 +98,23 @@ export const Compute = Command.define('Compute', {
 export const update = (model: Model, message: Message) =>
   Message.match<Update.Return<Model, Message, EngineService>>(message, {
     ClickedStartEngine: () => ({
-      model: evo(model, { engine: () => EngineBooting() }),
+      model: evo(model, { engine: () => EngineState.Booting() }),
     }),
 
     ClickedStopEngine: () => ({
-      model: evo(model, { engine: () => EngineOff() }),
+      model: evo(model, { engine: () => EngineState.Off() }),
     }),
 
     StartedEngine: ({ engineId }) => ({
-      model: evo(model, { engine: () => EngineReady({ engineId }) }),
+      model: evo(model, {
+        engine: () => EngineState.Ready({ engineId }),
+      }),
     }),
 
     StoppedEngine: () => ({ model }),
 
     FailedStartEngine: ({ reason }) => ({
-      model: evo(model, { engine: () => EngineFailed({ reason }) }),
+      model: evo(model, { engine: () => EngineState.Failed({ reason }) }),
     }),
 
     ClickedCompute: () => {
@@ -139,7 +136,7 @@ export const update = (model: Model, message: Message) =>
 
 export const init: Runtime.ApplicationInit<Model, Message> = () => ({
   model: {
-    engine: EngineOff(),
+    engine: EngineState.Off(),
     computeCount: 0,
     maybeSquareResult: Option.none(),
   },
@@ -153,8 +150,8 @@ export const managedResources = ManagedResource.make<Model, Message>()(
       resource: Engine,
       modelToMaybeRequirements: model =>
         M.value(model.engine).pipe(
-          M.tag('EngineBooting', 'EngineReady', () => Option.some(null)),
-          M.tag('EngineOff', 'EngineFailed', () => Option.none()),
+          M.tag('Booting', 'Ready', () => Option.some(null)),
+          M.tag('Off', 'Failed', () => Option.none()),
           M.exhaustive,
         ),
       acquire: () =>
@@ -203,19 +200,19 @@ const engineStatusView = (
   h: HtmlBuilder<Message>,
 ): Html => {
   const status = M.value(engine).pipe(
-    M.tag('EngineOff', () => ({
+    M.tag('Off', () => ({
       colorClassName: 'text-gray-500',
       text: 'Engine is off.',
     })),
-    M.tag('EngineBooting', () => ({
+    M.tag('Booting', () => ({
       colorClassName: 'text-amber-600',
       text: 'Booting engine...',
     })),
-    M.tag('EngineReady', ({ engineId }) => ({
+    M.tag('Ready', ({ engineId }) => ({
       colorClassName: 'text-green-600',
       text: `Engine ready: ${engineId}`,
     })),
-    M.tag('EngineFailed', ({ reason }) => ({
+    M.tag('Failed', ({ reason }) => ({
       colorClassName: 'text-red-600',
       text: `Engine failed: ${reason}`,
     })),
@@ -230,12 +227,12 @@ const engineControlsView = (
   h: HtmlBuilder<Message>,
 ): Html => {
   const controls = M.value(engine).pipe(
-    M.tag('EngineBooting', 'EngineReady', () => ({
+    M.tag('Booting', 'Ready', () => ({
       label: 'Stop engine',
       message: Message.ClickedStopEngine(),
       colorClassName: 'bg-red-500 hover:bg-red-600',
     })),
-    M.tag('EngineOff', 'EngineFailed', () => ({
+    M.tag('Off', 'Failed', () => ({
       label: 'Start engine',
       message: Message.ClickedStartEngine(),
       colorClassName: 'bg-green-500 hover:bg-green-600',
@@ -269,8 +266,7 @@ const squareResultView = (
   return h.div([h.Class('text-gray-800')], [text])
 }
 
-const isEngineReady = (engine: EngineState): boolean =>
-  engine._tag === 'EngineReady'
+const isEngineReady = (engine: EngineState): boolean => engine._tag === 'Ready'
 
 export const view = (model: Model, h: HtmlBuilder<Message>): Document => {
   const isComputeDisabled = !isEngineReady(model.engine)

package/dist/templates/examples/managed-resource-layer/src/scene.test.ts

@@ -13,8 +13,7 @@ import { describe, test } from 'vitest'
 
 import {
   Compute,
-  EngineOff,
-  EngineReady,
+  EngineState,
   Message,
   Model,
   managedResources,
@@ -23,13 +22,13 @@ import {
 } from './main'
 
 const offModel = Model.make({
-  engine: EngineOff(),
+  engine: EngineState.Off(),
   computeCount: 0,
   maybeSquareResult: Option.none(),
 })
 
 const readyModel = Model.make({
-  engine: EngineReady({ engineId: 'engine-1' }),
+  engine: EngineState.Ready({ engineId: 'engine-1' }),
   computeCount: 2,
   maybeSquareResult: Option.none(),
 })

package/dist/templates/examples/managed-resource-layer/src/story.test.ts

@@ -2,38 +2,29 @@ import { Option } from 'effect'
 import { Command, given, message, model, story } from 'foldkit/story'
 import { describe, expect, test } from 'vitest'
 
-import {
-  Compute,
-  EngineBooting,
-  EngineFailed,
-  EngineOff,
-  EngineReady,
-  Message,
-  type Model,
-  update,
-} from './main'
+import { Compute, EngineState, Message, type Model, update } from './main'
 
 const offModel: Model = {
-  engine: EngineOff(),
+  engine: EngineState.Off(),
   computeCount: 0,
   maybeSquareResult: Option.none(),
 }
 
 const readyModel: Model = {
-  engine: EngineReady({ engineId: 'engine-1' }),
+  engine: EngineState.Ready({ engineId: 'engine-1' }),
   computeCount: 2,
   maybeSquareResult: Option.none(),
 }
 
 describe('update', () => {
   describe('engine lifecycle', () => {
-    test('ClickedStartEngine requests the engine by entering EngineBooting', () => {
+    test('ClickedStartEngine requests the engine by entering Booting', () => {
       story(
         update,
         given(offModel),
         message(Message.ClickedStartEngine()),
         model(model => {
-          expect(model.engine._tag).toBe('EngineBooting')
+          expect(model.engine._tag).toBe('Booting')
         }),
       )
     })
@@ -41,23 +32,23 @@ describe('update', () => {
     test('StartedEngine marks the engine ready with its id', () => {
       story(
         update,
-        given({ ...offModel, engine: EngineBooting() }),
+        given({ ...offModel, engine: EngineState.Booting() }),
         message(Message.StartedEngine({ engineId: 'engine-7' })),
         model(model => {
           expect(model.engine).toStrictEqual(
-            EngineReady({ engineId: 'engine-7' }),
+            EngineState.Ready({ engineId: 'engine-7' }),
           )
         }),
       )
     })
 
-    test('ClickedStopEngine releases the engine by entering EngineOff', () => {
+    test('ClickedStopEngine releases the engine by entering Off', () => {
       story(
         update,
         given(readyModel),
         message(Message.ClickedStopEngine()),
         model(model => {
-          expect(model.engine._tag).toBe('EngineOff')
+          expect(model.engine._tag).toBe('Off')
         }),
       )
     })
@@ -76,11 +67,11 @@ describe('update', () => {
     test('FailedStartEngine records the failure reason', () => {
       story(
         update,
-        given({ ...offModel, engine: EngineBooting() }),
+        given({ ...offModel, engine: EngineState.Booting() }),
         message(Message.FailedStartEngine({ reason: 'boot timeout' })),
         model(model => {
           expect(model.engine).toStrictEqual(
-            EngineFailed({ reason: 'boot timeout' }),
+            EngineState.Failed({ reason: 'boot timeout' }),
           )
         }),
       )

package/dist/templates/examples/map/src/main.fixtures.ts

@@ -1,7 +1,7 @@
 import { Option } from 'effect'
 
 import { Location, featuredLocations } from './locations'
-import { GeolocateIdle, type Model } from './main'
+import { GeolocateState, type Model } from './main'
 
 export const initialModel: Model = {
   locations: featuredLocations,
@@ -11,7 +11,7 @@ export const initialModel: Model = {
   maybeBounds: Option.none(),
   maybeSelectedLocationId: Option.none(),
   maybeUserLocation: Option.none(),
-  geolocateState: GeolocateIdle(),
+  geolocateState: GeolocateState.Idle(),
 }
 
 export const mountedModel: Model = {

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

@@ -11,12 +11,12 @@ import {
   Stream,
   String,
 } from 'effect'
-import { Command, Mount, Runtime, Subscription, type Update } from 'foldkit'
+import { Command, Mount, Runtime, Subscription, Update } from 'foldkit'
 import * as Dom from 'foldkit/dom'
 import type { Document, Html } from 'foldkit/html'
 import { HtmlBuilder } from 'foldkit/html'
 import { defineMessageUnion } from 'foldkit/message'
-import { ts } from 'foldkit/schema'
+import { defineTaggedUnion } from 'foldkit/schema'
 import { evo } from 'foldkit/struct'
 import type { Map as MapInstance } from 'maplibre-gl'
 
@@ -45,16 +45,12 @@ type Bounds = typeof Bounds.Type
 const LngLat = S.Struct({ lng: S.Number, lat: S.Number })
 type LngLat = typeof LngLat.Type
 
-export const GeolocateIdle = ts('GeolocateIdle')
-export const GeolocateLocating = ts('GeolocateLocating')
-export const GeolocateFailed = ts('GeolocateFailed', { reason: S.String })
-
-const GeolocateState = S.Union([
-  GeolocateIdle,
-  GeolocateLocating,
-  GeolocateFailed,
-])
-type GeolocateState = typeof GeolocateState.Type
+export const GeolocateState = defineTaggedUnion({
+  Idle: {},
+  Locating: {},
+  Failed: { reason: S.String },
+})
+export type GeolocateState = typeof GeolocateState.Type
 
 export const Model = S.Struct({
   locations: S.Array(Location),
@@ -254,19 +250,23 @@ export const update = (model: Model, message: Message) =>
     }),
 
     ClickedFindMe: () => ({
-      model: evo(model, { geolocateState: () => GeolocateLocating() }),
+      model: evo(model, {
+        geolocateState: () => GeolocateState.Locating(),
+      }),
       commands: [LockBodyScroll(), Geolocate()],
     }),
 
     DismissedGeolocate: () => ({
-      model: evo(model, { geolocateState: () => GeolocateIdle() }),
+      model: evo(model, {
+        geolocateState: () => GeolocateState.Idle(),
+      }),
       commands: [UnlockBodyScroll()],
     }),
 
     SucceededGeolocate: ({ lng, lat }) => ({
       model: evo(model, {
         maybeUserLocation: () => Option.some({ lng, lat }),
-        geolocateState: () => GeolocateIdle(),
+        geolocateState: () => GeolocateState.Idle(),
       }),
       commands: [
         UnlockBodyScroll(),
@@ -280,7 +280,9 @@ export const update = (model: Model, message: Message) =>
     }),
 
     FailedGeolocate: ({ reason }) => ({
-      model: evo(model, { geolocateState: () => GeolocateFailed({ reason }) }),
+      model: evo(model, {
+        geolocateState: () => GeolocateState.Failed({ reason }),
+      }),
     }),
 
     SucceededFlyTo: () => ({ model }),
@@ -301,7 +303,7 @@ export const init: Runtime.ApplicationInit<Model, Message> = () => ({
     maybeBounds: Option.none(),
     maybeSelectedLocationId: Option.none(),
     maybeUserLocation: Option.none(),
-    geolocateState: GeolocateIdle(),
+    geolocateState: GeolocateState.Idle(),
   },
   commands: [FocusSearchInput()],
 })
@@ -584,7 +586,7 @@ const locationListItemView =
   }
 
 const footerView = (model: Model, h: HtmlBuilder<Message>): Html => {
-  const isLocating = model.geolocateState._tag === 'GeolocateLocating'
+  const isLocating = model.geolocateState._tag === 'Locating'
   return h.div(
     [h.Class('border-t border-slate-200 px-5 py-3 space-y-2')],
     [
@@ -680,10 +682,10 @@ const geolocateOverlayView = (
 ): Html =>
   M.value(state).pipe(
     M.tagsExhaustive({
-      GeolocateIdle: () => h.empty,
-      GeolocateLocating: () =>
+      Idle: () => h.empty,
+      Locating: () =>
         geolocateOverlayShellView(geolocateLocatingContentView(h), h),
-      GeolocateFailed: ({ reason }) =>
+      Failed: ({ reason }) =>
         geolocateOverlayShellView(geolocateFailedContentView(reason, h), h),
     }),
   )

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

@@ -16,7 +16,7 @@ import { describe, test } from 'vitest'
 import {
   FlyTo,
   Geolocate,
-  GeolocateFailed,
+  GeolocateState,
   LockBodyScroll,
   Message,
   MountMap,
@@ -93,7 +93,9 @@ describe('view', () => {
       { update, view },
       given({
         ...mountedModel,
-        geolocateState: GeolocateFailed({ reason: 'Permission denied' }),
+        geolocateState: GeolocateState.Failed({
+          reason: 'Permission denied',
+        }),
       }),
       acknowledgeMapMount,
       expect(role('button', { name: 'Dismiss' })).toExist(),

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

@@ -5,8 +5,7 @@ import { expect, test } from 'vitest'
 import {
   FlyTo,
   Geolocate,
-  GeolocateFailed,
-  GeolocateLocating,
+  GeolocateState,
   LockBodyScroll,
   Message,
   UnlockBodyScroll,
@@ -126,7 +125,7 @@ test('clicking find-me transitions to the locating state and emits Geolocate', (
     given(initialModel),
     message(Message.ClickedFindMe()),
     model(model => {
-      expect(model.geolocateState._tag).toBe('GeolocateLocating')
+      expect(model.geolocateState._tag).toBe('Locating')
     }),
     Command.expectHas(LockBodyScroll, Geolocate),
     Command.resolve(LockBodyScroll, Message.CompletedLockBodyScroll()),
@@ -142,11 +141,11 @@ test('a successful geolocation result clears the locating state and flies the ma
     update,
     given({
       ...mountedModel,
-      geolocateState: GeolocateLocating(),
+      geolocateState: GeolocateState.Locating(),
     }),
     message(Message.SucceededGeolocate({ lng: 2.35, lat: 48.85 })),
     model(model => {
-      expect(model.geolocateState._tag).toBe('GeolocateIdle')
+      expect(model.geolocateState._tag).toBe('Idle')
       expect(model.maybeUserLocation).toStrictEqual(
         Option.some({ lng: 2.35, lat: 48.85 }),
       )
@@ -162,12 +161,12 @@ test('a failed geolocation result surfaces the reason in the geolocate state', (
     update,
     given({
       ...initialModel,
-      geolocateState: GeolocateLocating(),
+      geolocateState: GeolocateState.Locating(),
     }),
     message(Message.FailedGeolocate({ reason: 'Permission denied' })),
     model(model => {
-      expect(model.geolocateState._tag).toBe('GeolocateFailed')
-      if (model.geolocateState._tag === 'GeolocateFailed') {
+      expect(model.geolocateState._tag).toBe('Failed')
+      if (model.geolocateState._tag === 'Failed') {
         expect(model.geolocateState.reason).toBe('Permission denied')
       }
     }),
@@ -179,11 +178,11 @@ test('dismissing the geolocate overlay returns to idle', () => {
     update,
     given({
       ...initialModel,
-      geolocateState: GeolocateFailed({ reason: 'Timed out' }),
+      geolocateState: GeolocateState.Failed({ reason: 'Timed out' }),
     }),
     message(Message.DismissedGeolocate()),
     model(model => {
-      expect(model.geolocateState._tag).toBe('GeolocateIdle')
+      expect(model.geolocateState._tag).toBe('Idle')
     }),
     Command.resolve(UnlockBodyScroll, Message.CompletedUnlockBodyScroll()),
   )