create-foldkit-app 0.30.1 → 0.31.0

package/dist/templates/examples/state-machine/src/main.ts

@@ -14,7 +14,7 @@ import { Command, Runtime, Update } from 'foldkit'
 import { Machine } from 'foldkit/experimental'
 import { otherwise, to, when } from 'foldkit/experimental/machine'
 import { defineMessageUnion } from 'foldkit/message'
-import { ts } from 'foldkit/schema'
+import { defineTaggedUnion } from 'foldkit/schema'
 import { evo } from 'foldkit/struct'
 
 import { RadioGroup } from '@foldkit/ui'
@@ -26,46 +26,34 @@ export const Discount = S.Struct({
   percentOff: S.Number,
 })
 
-export const NoPromo = ts('NoPromo')
-export const AppliedPromo = ts('AppliedPromo', { discount: Discount })
-export const RejectedPromo = ts('RejectedPromo')
-
-export const Promo = S.Union([NoPromo, AppliedPromo, RejectedPromo])
-
-export const Cart = ts('Cart', { isShippingRequired: S.Boolean })
-export const Shipping = ts('Shipping', { isShippingRequired: S.Boolean })
-export const Payment = ts('Payment', {
-  isPaymentMethodSelected: S.Boolean,
-  isShippingRequired: S.Boolean,
-})
-export const Review = ts('Review', {
-  isPaymentMethodSelected: S.Boolean,
-  isShippingRequired: S.Boolean,
-  isTermsAccepted: S.Boolean,
-  promo: Promo,
-  promoCodeInput: S.String,
+export const Promo = defineTaggedUnion({
+  NoPromo: {},
+  AppliedPromo: { discount: Discount },
+  RejectedPromo: {},
 })
-export const Placing = ts('Placing', {
-  isShippingRequired: S.Boolean,
-  maybeDiscount: S.Option(Discount),
-})
-export const Confirmed = ts('Confirmed', {
-  isShippingRequired: S.Boolean,
-  maybeDiscount: S.Option(Discount),
-  orderId: S.String,
-})
-export const Cancelled = ts('Cancelled', {
-  isShippingRequired: S.Boolean,
+
+export const CheckoutState = defineTaggedUnion({
+  Cart: { isShippingRequired: S.Boolean },
+  Shipping: { isShippingRequired: S.Boolean },
+  Payment: {
+    isPaymentMethodSelected: S.Boolean,
+    isShippingRequired: S.Boolean,
+  },
+  Review: {
+    isPaymentMethodSelected: S.Boolean,
+    isShippingRequired: S.Boolean,
+    isTermsAccepted: S.Boolean,
+    promo: Promo,
+    promoCodeInput: S.String,
+  },
+  Placing: { isShippingRequired: S.Boolean, maybeDiscount: S.Option(Discount) },
+  Confirmed: {
+    isShippingRequired: S.Boolean,
+    maybeDiscount: S.Option(Discount),
+    orderId: S.String,
+  },
+  Cancelled: { isShippingRequired: S.Boolean },
 })
-export const CheckoutState = S.Union([
-  Cart,
-  Shipping,
-  Payment,
-  Review,
-  Placing,
-  Confirmed,
-  Cancelled,
-])
 
 export const TransitionLogEntry = S.Struct({
   id: S.Number,
@@ -146,11 +134,12 @@ export const promoToMaybeDiscount = (
     M.option,
   )
 
-export const isReviewReady = (review: typeof Review.Type): boolean =>
-  review.isPaymentMethodSelected && review.isTermsAccepted
+export const isReviewReady = (
+  review: typeof CheckoutState.Review.Type,
+): boolean => review.isPaymentMethodSelected && review.isTermsAccepted
 
 export const reviewToMaybeDiscount = (
-  review: typeof Review.Type,
+  review: typeof CheckoutState.Review.Type,
 ): Option.Option<typeof Discount.Type> => {
   const normalizedCode = pipe(
     review.promoCodeInput,
@@ -168,7 +157,7 @@ export const checkoutMachine = Machine.define({
   state: CheckoutState,
   message: Message,
 })({
-  initial: Cart({ isShippingRequired: true }),
+  initial: CheckoutState.Cart({ isShippingRequired: true }),
   states: {
     Cart: {
       on: {
@@ -180,11 +169,13 @@ export const checkoutMachine = Machine.define({
             state => state.isShippingRequired,
             'Shipping',
             ({ state }) =>
-              Shipping({ isShippingRequired: state.isShippingRequired }),
+              CheckoutState.Shipping({
+                isShippingRequired: state.isShippingRequired,
+              }),
           ),
           otherwise(
             to('Payment', ({ state }) =>
-              Payment({
+              CheckoutState.Payment({
                 isPaymentMethodSelected: false,
                 isShippingRequired: state.isShippingRequired,
               }),
@@ -192,23 +183,27 @@ export const checkoutMachine = Machine.define({
           ),
         ],
         ClickedCancel: to('Cancelled', ({ state }) =>
-          Cancelled({ isShippingRequired: state.isShippingRequired }),
+          CheckoutState.Cancelled({
+            isShippingRequired: state.isShippingRequired,
+          }),
         ),
       },
     },
     Shipping: {
       on: {
         ClickedContinue: to('Payment', ({ state }) =>
-          Payment({
+          CheckoutState.Payment({
             isPaymentMethodSelected: false,
             isShippingRequired: state.isShippingRequired,
           }),
         ),
         ClickedBack: to('Cart', ({ state }) =>
-          Cart({ isShippingRequired: state.isShippingRequired }),
+          CheckoutState.Cart({ isShippingRequired: state.isShippingRequired }),
         ),
         ClickedCancel: to('Cancelled', ({ state }) =>
-          Cancelled({ isShippingRequired: state.isShippingRequired }),
+          CheckoutState.Cancelled({
+            isShippingRequired: state.isShippingRequired,
+          }),
         ),
       },
     },
@@ -218,11 +213,11 @@ export const checkoutMachine = Machine.define({
           evo(state, { isPaymentMethodSelected: () => message.isSelected }),
         ),
         ClickedContinue: to('Review', ({ state }) =>
-          Review({
+          CheckoutState.Review({
             isPaymentMethodSelected: state.isPaymentMethodSelected,
             isShippingRequired: state.isShippingRequired,
             isTermsAccepted: false,
-            promo: NoPromo(),
+            promo: Promo.NoPromo(),
             promoCodeInput: '',
           }),
         ),
@@ -231,16 +226,22 @@ export const checkoutMachine = Machine.define({
             state => state.isShippingRequired,
             'Shipping',
             ({ state }) =>
-              Shipping({ isShippingRequired: state.isShippingRequired }),
+              CheckoutState.Shipping({
+                isShippingRequired: state.isShippingRequired,
+              }),
           ),
           otherwise(
             to('Cart', ({ state }) =>
-              Cart({ isShippingRequired: state.isShippingRequired }),
+              CheckoutState.Cart({
+                isShippingRequired: state.isShippingRequired,
+              }),
             ),
           ),
         ],
         ClickedCancel: to('Cancelled', ({ state }) =>
-          Cancelled({ isShippingRequired: state.isShippingRequired }),
+          CheckoutState.Cancelled({
+            isShippingRequired: state.isShippingRequired,
+          }),
         ),
       },
     },
@@ -256,7 +257,9 @@ export const checkoutMachine = Machine.define({
           evo(state, {
             promoCodeInput: () => message.value,
             promo: currentPromo =>
-              currentPromo._tag === 'RejectedPromo' ? NoPromo() : currentPromo,
+              currentPromo._tag === 'RejectedPromo'
+                ? Promo.NoPromo()
+                : currentPromo,
           }),
         ),
         SubmittedPromoCode: [
@@ -264,11 +267,11 @@ export const checkoutMachine = Machine.define({
             reviewToMaybeDiscount,
             'Review',
             ({ state, guardValue: discount }) =>
-              evo(state, { promo: () => AppliedPromo({ discount }) }),
+              evo(state, { promo: () => Promo.AppliedPromo({ discount }) }),
           ),
           otherwise(
             to('Review', ({ state }) =>
-              evo(state, { promo: () => RejectedPromo() }),
+              evo(state, { promo: () => Promo.RejectedPromo() }),
             ),
           ),
         ],
@@ -277,7 +280,7 @@ export const checkoutMachine = Machine.define({
             isReviewReady,
             'Placing',
             ({ state }) =>
-              Placing({
+              CheckoutState.Placing({
                 isShippingRequired: state.isShippingRequired,
                 maybeDiscount: promoToMaybeDiscount(state.promo),
               }),
@@ -287,20 +290,22 @@ export const checkoutMachine = Machine.define({
           ),
         ],
         ClickedBack: to('Payment', ({ state }) =>
-          Payment({
+          CheckoutState.Payment({
             isPaymentMethodSelected: state.isPaymentMethodSelected,
             isShippingRequired: state.isShippingRequired,
           }),
         ),
         ClickedCancel: to('Cancelled', ({ state }) =>
-          Cancelled({ isShippingRequired: state.isShippingRequired }),
+          CheckoutState.Cancelled({
+            isShippingRequired: state.isShippingRequired,
+          }),
         ),
       },
     },
     Placing: {
       on: {
         SucceededPlaceOrder: to('Confirmed', ({ state, message }) =>
-          Confirmed({
+          CheckoutState.Confirmed({
             isShippingRequired: state.isShippingRequired,
             maybeDiscount: state.maybeDiscount,
             orderId: message.orderId,
@@ -311,14 +316,14 @@ export const checkoutMachine = Machine.define({
     Confirmed: {
       on: {
         ClickedStartOver: to('Cart', ({ state }) =>
-          Cart({ isShippingRequired: state.isShippingRequired }),
+          CheckoutState.Cart({ isShippingRequired: state.isShippingRequired }),
         ),
       },
     },
     Cancelled: {
       on: {
         ClickedStartOver: to('Cart', ({ state }) =>
-          Cart({ isShippingRequired: state.isShippingRequired }),
+          CheckoutState.Cart({ isShippingRequired: state.isShippingRequired }),
         ),
       },
     },

package/dist/templates/examples/state-machine/src/story.test.ts

@@ -4,16 +4,15 @@ import { Command, given, message, model, story } from 'foldkit/story'
 import { describe, expect, test } from 'vitest'
 
 import {
-  AppliedPromo,
-  Cart,
+  CheckoutState,
   Message,
+  type Model,
   PlaceOrder,
-  RejectedPromo,
+  Promo,
   TRANSITION_LOG_LIMIT,
   initialModel,
   update,
 } from './main'
-import type { Model } from './main'
 
 const maybeLatestTransitionSummary = (model: Model): Option.Option<string> =>
   pipe(
@@ -94,7 +93,7 @@ describe('update', () => {
       message(Message.ClickedStartOver()),
       model(model => {
         expect(model.checkout).toStrictEqual(
-          Cart({ isShippingRequired: false }),
+          CheckoutState.Cart({ isShippingRequired: false }),
         )
       }),
     )
@@ -114,7 +113,9 @@ describe('update', () => {
         expect(model.checkout._tag).toBe('Review')
         if (model.checkout._tag === 'Review') {
           expect(model.checkout.promo).toEqual(
-            AppliedPromo({ discount: { code: 'READER10', percentOff: 10 } }),
+            Promo.AppliedPromo({
+              discount: { code: 'READER10', percentOff: 10 },
+            }),
           )
         }
       }),
@@ -123,7 +124,7 @@ describe('update', () => {
       model(model => {
         expect(model.checkout._tag).toBe('Review')
         if (model.checkout._tag === 'Review') {
-          expect(model.checkout.promo).toEqual(RejectedPromo())
+          expect(model.checkout.promo).toEqual(Promo.RejectedPromo())
         }
         expect(maybeLatestTransitionSummary(model)).toEqual(
           Option.some('Review -> Review on SubmittedPromoCode'),

package/dist/templates/examples/state-machine/src/view.ts

@@ -6,23 +6,17 @@ import { Button, Checkbox, Input, RadioGroup } from '@foldkit/ui'
 
 import * as Icon from './icon'
 import {
+  CheckoutState,
+  Discount,
   EDITIONS,
   EditionRadioGroup,
   Message,
+  type Model,
   checkoutMachine,
   editionName,
   isReviewReady,
   promoToMaybeDiscount,
 } from './main'
-import type {
-  Cart,
-  CheckoutState,
-  Confirmed,
-  Discount,
-  Model,
-  Payment,
-  Review,
-} from './main'
 
 // VIEW
 
@@ -433,7 +427,7 @@ const cancelCheckoutButton = (h: HtmlBuilder<Message>): Html =>
   )
 
 const cartView = (
-  state: typeof Cart.Type,
+  state: typeof CheckoutState.Cart.Type,
   editionRadioGroup: RadioGroup.Model,
   h: HtmlBuilder<Message>,
 ): Html => {
@@ -700,7 +694,7 @@ const shippingView = (h: HtmlBuilder<Message>): Html =>
   )
 
 const paymentView = (
-  state: typeof Payment.Type,
+  state: typeof CheckoutState.Payment.Type,
   h: HtmlBuilder<Message>,
 ): Html =>
   h.div(
@@ -864,7 +858,7 @@ const paymentView = (
   )
 
 const reviewView = (
-  state: typeof Review.Type,
+  state: typeof CheckoutState.Review.Type,
   h: HtmlBuilder<Message>,
 ): Html => {
   const isReadyToPlace = isReviewReady(state)
@@ -1194,7 +1188,7 @@ const placingView = (h: HtmlBuilder<Message>): Html =>
   )
 
 const confirmedView = (
-  state: typeof Confirmed.Type,
+  state: typeof CheckoutState.Confirmed.Type,
   h: HtmlBuilder<Message>,
 ): Html =>
   h.div(

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

@@ -13,7 +13,7 @@ import { KeyValueStore } from 'effect/unstable/persistence'
 import { Command, 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 { BrowserKeyValueStore } from '@effect/platform-browser'
@@ -41,17 +41,11 @@ const TodosJsonString = S.fromJsonString(S.toCodecJson(Todos))
 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,
+export const EditingState = defineTaggedUnion({
+  NotEditing: {},
+  Editing: { id: S.String, text: S.String },
 })
-type Editing = typeof Editing.Type
-
-const EditingState = S.Union([NotEditing, Editing])
-type EditingState = typeof EditingState.Type
+export type EditingState = typeof EditingState.Type
 
 export const Model = S.Struct({
   todos: Todos,
@@ -95,7 +89,7 @@ export const init: Runtime.ApplicationInit<Model, Message, Flags> = flags => ({
     todos: Option.getOrElse(flags.todos, () => []),
     newTodoText: '',
     filter: 'All',
-    editing: NotEditing(),
+    editing: EditingState.NotEditing(),
   },
 })
 
@@ -117,7 +111,7 @@ export const update = (model: Model, message: Message) =>
           M.value(model.editing).pipe(
             M.tagsExhaustive({
               NotEditing: () => model.editing,
-              Editing: ({ id }) => Editing({ id, text }),
+              Editing: ({ id }) => EditingState.Editing({ id, text }),
             }),
           ),
       }),
@@ -184,7 +178,7 @@ export const update = (model: Model, message: Message) =>
       return {
         model: evo(model, {
           editing: () =>
-            Editing({
+            EditingState.Editing({
               id,
               text: Option.match(maybeTodo, {
                 onNone: () => '',
@@ -205,7 +199,7 @@ export const update = (model: Model, message: Message) =>
             if (String.isEmpty(String.trim(text))) {
               return {
                 model: evo(model, {
-                  editing: () => NotEditing(),
+                  editing: () => EditingState.NotEditing(),
                 }),
               }
             }
@@ -219,7 +213,7 @@ export const update = (model: Model, message: Message) =>
             return {
               model: evo(model, {
                 todos: () => updatedTodos,
-                editing: () => NotEditing(),
+                editing: () => EditingState.NotEditing(),
               }),
               commands: [SaveTodos({ todos: updatedTodos })],
             }
@@ -229,7 +223,7 @@ export const update = (model: Model, message: Message) =>
 
     CancelledEdit: () => ({
       model: evo(model, {
-        editing: () => NotEditing(),
+        editing: () => EditingState.NotEditing(),
       }),
     }),
 

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

@@ -13,10 +13,10 @@ import {
 import { describe, test } from 'vitest'
 
 import {
+  EditingState,
   GenerateTodo,
   Message,
   type Model,
-  NotEditing,
   SaveTodos,
   update,
   view,
@@ -26,7 +26,7 @@ const emptyModel: Model = {
   todos: [],
   newTodoText: '',
   filter: 'All',
-  editing: NotEditing(),
+  editing: EditingState.NotEditing(),
 }
 
 const modelWithTodos: Model = {

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

@@ -3,11 +3,10 @@ import { Command, given, message, model, story } from 'foldkit/story'
 import { describe, expect, test } from 'vitest'
 
 import {
-  Editing,
+  EditingState,
   GenerateTodo,
   Message,
   type Model,
-  NotEditing,
   SaveTodos,
   update,
 } from './main'
@@ -16,7 +15,7 @@ const emptyModel: Model = {
   todos: [],
   newTodoText: '',
   filter: 'All',
-  editing: NotEditing(),
+  editing: EditingState.NotEditing(),
 }
 
 const buyMilk = {
@@ -189,7 +188,7 @@ describe('update', () => {
         message(Message.StartedEditing({ id: 'abc' })),
         model(model => {
           expect(model.editing).toStrictEqual(
-            Editing({ id: 'abc', text: 'Buy milk' }),
+            EditingState.Editing({ id: 'abc', text: 'Buy milk' }),
           )
         }),
       )
@@ -198,7 +197,7 @@ describe('update', () => {
     test('UpdatedEditingTodo updates the editing text', () => {
       const editingModel: Model = {
         ...modelWithTodos,
-        editing: Editing({ id: 'abc', text: 'Buy milk' }),
+        editing: EditingState.Editing({ id: 'abc', text: 'Buy milk' }),
       }
 
       story(
@@ -207,7 +206,7 @@ describe('update', () => {
         message(Message.UpdatedEditingTodo({ text: 'Buy oat milk' })),
         model(model => {
           expect(model.editing).toStrictEqual(
-            Editing({ id: 'abc', text: 'Buy oat milk' }),
+            EditingState.Editing({ id: 'abc', text: 'Buy oat milk' }),
           )
         }),
       )
@@ -216,7 +215,7 @@ describe('update', () => {
     test('SavedEdit updates the todo text and exits editing', () => {
       const editingModel: Model = {
         ...modelWithTodos,
-        editing: Editing({ id: 'abc', text: 'Buy oat milk' }),
+        editing: EditingState.Editing({ id: 'abc', text: 'Buy oat milk' }),
       }
 
       const editedTodos = modelWithTodos.todos.map(todo =>
@@ -236,7 +235,7 @@ describe('update', () => {
           expect(Option.map(todo, ({ text }) => text)).toStrictEqual(
             Option.some('Buy oat milk'),
           )
-          expect(model.editing).toStrictEqual(NotEditing())
+          expect(model.editing).toStrictEqual(EditingState.NotEditing())
         }),
       )
     })
@@ -244,7 +243,7 @@ describe('update', () => {
     test('SavedEdit with empty text exits editing without saving', () => {
       const editingModel: Model = {
         ...modelWithTodos,
-        editing: Editing({ id: 'abc', text: '   ' }),
+        editing: EditingState.Editing({ id: 'abc', text: '   ' }),
       }
 
       story(
@@ -256,7 +255,7 @@ describe('update', () => {
           expect(Option.map(todo, ({ text }) => text)).toStrictEqual(
             Option.some('Buy milk'),
           )
-          expect(model.editing).toStrictEqual(NotEditing())
+          expect(model.editing).toStrictEqual(EditingState.NotEditing())
         }),
         Command.expectNone(),
       )
@@ -265,7 +264,7 @@ describe('update', () => {
     test('CancelledEdit exits editing without changes', () => {
       const editingModel: Model = {
         ...modelWithTodos,
-        editing: Editing({ id: 'abc', text: 'Changed text' }),
+        editing: EditingState.Editing({ id: 'abc', text: 'Changed text' }),
       }
 
       story(
@@ -277,7 +276,7 @@ describe('update', () => {
           expect(Option.map(todo, ({ text }) => text)).toStrictEqual(
             Option.some('Buy milk'),
           )
-          expect(model.editing).toStrictEqual(NotEditing())
+          expect(model.editing).toStrictEqual(EditingState.NotEditing())
         }),
       )
     })