create-foldkit-app 0.27.3 → 0.28.0

package/dist/templates/examples/shopping-cart/src/page/index.ts

@@ -0,0 +1,3 @@
+export * as Products from './products'
+export * as Cart from './cart'
+export * as Checkout from './checkout'

package/dist/templates/examples/shopping-cart/src/page/products.ts

@@ -0,0 +1,267 @@
+import { Array, Effect, Option, Schema as S } from 'effect'
+import { Command, Submodel } from 'foldkit'
+import { defineMessageUnion } from 'foldkit/message'
+import { replaceUrl } from 'foldkit/navigation'
+import { evo } from 'foldkit/struct'
+
+import { Button, Input } from '@foldkit/ui'
+
+import { Cart, Item } from '../domain'
+import { cartRouter, productsRouter } from '../route'
+
+// MODEL
+
+export const Model = S.Struct({
+  products: S.Array(Item.Item),
+  searchText: S.String,
+})
+export type Model = typeof Model.Type
+
+// MESSAGE
+
+export const Message = defineMessageUnion({
+  CompletedReplaceSearchUrl: {},
+  ChangedSearchInput: { value: S.String },
+  ClickedAddToCart: { item: Item.Item },
+  ClickedIncrementQuantity: { itemId: S.String },
+  ClickedDecrementQuantity: { itemId: S.String },
+})
+
+export type Message = typeof Message.Type
+
+// OUT MESSAGE
+
+export const OutMessage = defineMessageUnion({
+  AddedToCart: { item: Item.Item },
+  IncrementedQuantity: { itemId: S.String },
+  DecrementedQuantity: { itemId: S.String },
+})
+
+export type OutMessage = typeof OutMessage.Type
+
+export type AddedToCart = typeof OutMessage.AddedToCart.Type
+export type IncrementedQuantity = typeof OutMessage.IncrementedQuantity.Type
+export type DecrementedQuantity = typeof OutMessage.DecrementedQuantity.Type
+
+// INIT
+
+export const init = (products: ReadonlyArray<Item.Item>): Model => ({
+  products,
+  searchText: '',
+})
+
+// COMMAND
+
+const ReplaceSearchUrl = Command.define('ReplaceSearchUrl', {
+  args: { url: S.String },
+  messages: [Message.CompletedReplaceSearchUrl],
+  execute: ({ url }) =>
+    replaceUrl(url).pipe(Effect.as(Message.CompletedReplaceSearchUrl())),
+})
+
+// UPDATE
+
+type UpdateReturn = readonly [
+  Model,
+  ReadonlyArray<Command.Command<Message>>,
+  Option.Option<OutMessage>,
+]
+
+export const update = (model: Model, message: Message) =>
+  Message.match<UpdateReturn>(message, {
+    CompletedReplaceSearchUrl: () => [model, [], Option.none()],
+
+    ChangedSearchInput: ({ value }) => [
+      evo(model, { searchText: () => value }),
+      [
+        ReplaceSearchUrl({
+          url: productsRouter({
+            searchText: Option.fromNullishOr(value || null),
+          }),
+        }),
+      ],
+      Option.none(),
+    ],
+
+    ClickedAddToCart: ({ item }) => [
+      model,
+      [],
+      Option.some(OutMessage.AddedToCart({ item })),
+    ],
+
+    ClickedIncrementQuantity: ({ itemId }) => [
+      model,
+      [],
+      Option.some(OutMessage.IncrementedQuantity({ itemId })),
+    ],
+
+    ClickedDecrementQuantity: ({ itemId }) => [
+      model,
+      [],
+      Option.some(OutMessage.DecrementedQuantity({ itemId })),
+    ],
+  })
+
+// VIEW
+
+export type ViewInputs = Readonly<{
+  cart: Cart.Cart
+}>
+
+export const view = Submodel.defineView<Model, Message, ViewInputs>(
+  (model, { cart }, h) => {
+    const filteredProducts = model.searchText
+      ? model.products.filter(product =>
+          product.name.toLowerCase().includes(model.searchText.toLowerCase()),
+        )
+      : model.products
+
+    return h.div(
+      [h.Class('max-w-4xl mx-auto px-4')],
+      [
+        h.h1([h.Class('text-4xl font-bold text-gray-800 mb-8')], ['Products']),
+        h.div(
+          [h.Class('bg-white rounded-lg shadow p-6')],
+          [
+            h.search(
+              [h.Class('mb-6')],
+              [
+                Input.view(
+                  {
+                    id: 'product-search',
+                    value: model.searchText,
+                    placeholder: 'Search products...',
+                    onInput: value => Message.ChangedSearchInput({ value }),
+                    toView: attributes =>
+                      h.input([
+                        ...attributes.input,
+                        h.AriaLabel('Search products'),
+                        h.Class(
+                          'w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500',
+                        ),
+                      ]),
+                  },
+                  h,
+                ),
+              ],
+            ),
+            h.section(
+              [h.Class('grid gap-4')],
+              filteredProducts.map(product =>
+                h.keyed('article')(
+                  product.id,
+                  [
+                    h.Class(
+                      'flex items-center justify-between p-4 border rounded-lg hover:bg-gray-50',
+                    ),
+                  ],
+                  [
+                    h.div(
+                      [],
+                      [
+                        h.h3(
+                          [h.Class('font-semibold text-gray-800')],
+                          [product.name],
+                        ),
+                        h.p(
+                          [h.Class('text-gray-600')],
+                          [`$${product.price.toFixed(2)}`],
+                        ),
+                      ],
+                    ),
+                    Cart.itemQuantity(product.id)(cart) === 0
+                      ? Button.view(
+                          {
+                            onClick: Message.ClickedAddToCart({
+                              item: product,
+                            }),
+                            toView: attributes =>
+                              h.button(
+                                [
+                                  ...attributes.button,
+                                  h.Class(
+                                    'bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg font-medium',
+                                  ),
+                                ],
+                                ['Add to Cart'],
+                              ),
+                          },
+                          h,
+                        )
+                      : h.div(
+                          [h.Class('flex items-center gap-2')],
+                          [
+                            Button.view(
+                              {
+                                onClick: Message.ClickedDecrementQuantity({
+                                  itemId: product.id,
+                                }),
+                                toView: attributes =>
+                                  h.button(
+                                    [
+                                      ...attributes.button,
+                                      h.Class(
+                                        'bg-gray-200 hover:bg-gray-300 text-gray-800 w-8 h-8 rounded flex items-center justify-center',
+                                      ),
+                                    ],
+                                    ['-'],
+                                  ),
+                              },
+                              h,
+                            ),
+                            h.span(
+                              [
+                                h.Class(
+                                  'px-3 py-1 font-medium min-w-[2rem] text-center font-mono',
+                                ),
+                              ],
+                              [String(Cart.itemQuantity(product.id)(cart))],
+                            ),
+                            Button.view(
+                              {
+                                onClick: Message.ClickedIncrementQuantity({
+                                  itemId: product.id,
+                                }),
+                                toView: attributes =>
+                                  h.button(
+                                    [
+                                      ...attributes.button,
+                                      h.Class(
+                                        'bg-gray-200 hover:bg-gray-300 text-gray-800 w-8 h-8 rounded flex items-center justify-center',
+                                      ),
+                                    ],
+                                    ['+'],
+                                  ),
+                              },
+                              h,
+                            ),
+                          ],
+                        ),
+                  ],
+                ),
+              ),
+            ),
+            Array.match(cart, {
+              onEmpty: () => h.empty,
+              onNonEmpty: cart =>
+                h.div(
+                  [h.Class('mt-6 text-center')],
+                  [
+                    h.a(
+                      [
+                        h.Href(cartRouter()),
+                        h.Class(
+                          'bg-green-500 hover:bg-green-600 text-white px-6 py-2 rounded-lg font-medium inline-block',
+                        ),
+                      ],
+                      [`Go to Cart (${Cart.totalItems(cart)})`],
+                    ),
+                  ],
+                ),
+            }),
+          ],
+        ),
+      ],
+    )
+  },
+)

package/dist/templates/examples/shopping-cart/src/route.ts

@@ -0,0 +1,43 @@
+import { Schema as S, pipe } from 'effect'
+import { Route } from 'foldkit'
+import { literal, r } from 'foldkit/route'
+
+// ROUTE
+
+export const ProductsRoute = r('Products', { searchText: S.Option(S.String) })
+export const CartRoute = r('Cart')
+export const CheckoutRoute = r('Checkout')
+export const NotFoundRoute = r('NotFound', { path: S.String })
+export const AppRoute = S.Union([
+  ProductsRoute,
+  CartRoute,
+  CheckoutRoute,
+  NotFoundRoute,
+])
+
+export type ProductsRoute = typeof ProductsRoute.Type
+export type CartRoute = typeof CartRoute.Type
+export type CheckoutRoute = typeof CheckoutRoute.Type
+export type NotFoundRoute = typeof NotFoundRoute.Type
+export type AppRoute = typeof AppRoute.Type
+
+// ROUTERS
+
+export const productsRouter = pipe(
+  Route.root,
+  Route.query(S.Struct({ searchText: S.OptionFromOptional(S.String) })),
+  Route.mapTo(ProductsRoute),
+)
+export const cartRouter = pipe(literal('cart'), Route.mapTo(CartRoute))
+export const checkoutRouter = pipe(
+  literal('checkout'),
+  Route.mapTo(CheckoutRoute),
+)
+
+// PARSER
+
+const routeParser = Route.oneOf(checkoutRouter, cartRouter, productsRouter)
+export const urlToAppRoute = Route.parseUrlWithFallback(
+  routeParser,
+  NotFoundRoute,
+)

package/dist/templates/examples/shopping-cart/src/scene.test.ts

@@ -0,0 +1,138 @@
+import { Option } from 'effect'
+import { click, expect, given, role, scene, text } from 'foldkit/scene'
+import { describe, test } from 'vitest'
+
+import { products } from './data/products'
+import { Cart } from './domain'
+import { type Model, update, view } from './main'
+import { Products } from './page'
+import { CartRoute, CheckoutRoute, NotFoundRoute, ProductsRoute } from './route'
+
+const apple = { id: '1', name: 'Apple', price: 1.5 }
+const banana = { id: '2', name: 'Banana', price: 0.75 }
+
+const baseModel: Model = {
+  route: ProductsRoute({ searchText: Option.none() }),
+  cart: [],
+  deliveryInstructions: '',
+  orderPlaced: false,
+  productsPage: Products.init(products),
+}
+
+const withCart = (cart: Cart.Cart, overrides: Partial<Model> = {}): Model => ({
+  ...baseModel,
+  cart,
+  ...overrides,
+})
+
+describe('view', () => {
+  test('the nav bar lists every section', () => {
+    scene(
+      { update, view },
+      given(baseModel),
+      expect(role('link', { name: 'Products' })).toExist(),
+      expect(role('link', { name: 'Cart' })).toExist(),
+      expect(role('link', { name: 'Checkout' })).toExist(),
+    )
+  })
+
+  test('the Cart link displays the item count when the cart has items', () => {
+    scene(
+      { update, view },
+      given(
+        withCart([
+          { item: apple, quantity: 2 },
+          { item: banana, quantity: 3 },
+        ]),
+      ),
+      expect(role('link', { name: 'Cart (5)' })).toExist(),
+    )
+  })
+
+  test('the Products route lists every product with an Add to Cart button', () => {
+    scene(
+      { update, view },
+      given(baseModel),
+      expect(role('heading', { name: 'Products' })).toExist(),
+      expect(text('Apple')).toExist(),
+      expect(text('Banana')).toExist(),
+      expect(role('button', { name: 'Add to Cart' })).toExist(),
+    )
+  })
+
+  test('the Cart route shows the empty state when no items have been added', () => {
+    scene(
+      { update, view },
+      given({
+        ...baseModel,
+        route: CartRoute(),
+      }),
+      expect(role('heading', { name: 'Shopping Cart' })).toExist(),
+      expect(text('Your cart is empty')).toExist(),
+    )
+  })
+
+  test('the Cart route renders items and the running total', () => {
+    scene(
+      { update, view },
+      given(withCart([{ item: apple, quantity: 2 }], { route: CartRoute() })),
+      expect(text('Apple')).toExist(),
+      expect(text('$1.50 each')).toExist(),
+      expect(text('$3.00')).toExist(),
+      expect(role('button', { name: 'Remove' })).toExist(),
+      expect(role('button', { name: 'Clear Cart' })).toExist(),
+    )
+  })
+
+  test('the Checkout route shows the empty state when the cart is empty', () => {
+    scene(
+      { update, view },
+      given({
+        ...baseModel,
+        route: CheckoutRoute(),
+      }),
+      expect(role('heading', { name: 'Checkout' })).toExist(),
+      expect(text('Your cart is empty')).toExist(),
+    )
+  })
+
+  test('the Checkout route renders the order summary and a Place Order button', () => {
+    scene(
+      { update, view },
+      given(
+        withCart([{ item: apple, quantity: 2 }], {
+          route: CheckoutRoute(),
+        }),
+      ),
+      expect(role('heading', { name: 'Order Summary' })).toExist(),
+      expect(text('× 2')).toExist(),
+      expect(text('$3.00')).toExist(),
+      expect(role('button', { name: 'Place Order' })).toExist(),
+    )
+  })
+
+  test('placing an order swaps the form for the success panel', () => {
+    scene(
+      { update, view },
+      given(
+        withCart([{ item: apple, quantity: 1 }], {
+          route: CheckoutRoute(),
+        }),
+      ),
+      click(role('button', { name: 'Place Order' })),
+      expect(role('heading', { name: 'Order placed successfully!' })).toExist(),
+    )
+  })
+
+  test('an unmatched route renders 404 NotFound', () => {
+    scene(
+      { update, view },
+      given({
+        ...baseModel,
+        route: NotFoundRoute({ path: '/oops' }),
+      }),
+      expect(role('heading', { name: '404 - Page Not Found' })).toExist(),
+      expect(text('The path "/oops" was not found.')).toExist(),
+    )
+  })
+})

package/dist/templates/examples/shopping-cart/src/story.test.ts

@@ -0,0 +1,233 @@
+import { Option } from 'effect'
+import { given, message, model, story } from 'foldkit/story'
+import { fromString } from 'foldkit/url'
+import { describe, expect, test } from 'vitest'
+
+import { products } from './data/products'
+import { Message, type Model, update } from './main'
+import { Products } from './page'
+import { Message as ProductsMessage } from './page/products'
+import { ProductsRoute } from './route'
+
+const apple = { id: '1', name: 'Apple', price: 1.5 }
+const banana = { id: '2', name: 'Banana', price: 0.75 }
+
+const baseModel: Model = {
+  route: ProductsRoute({ searchText: Option.none() }),
+  cart: [],
+  deliveryInstructions: '',
+  orderPlaced: false,
+  productsPage: Products.init(products),
+}
+
+const urlOrThrow = (raw: string) =>
+  Option.getOrThrowWith(
+    fromString(raw),
+    () => new Error(`Failed to parse url: ${raw}`),
+  )
+
+describe('update', () => {
+  describe('routing', () => {
+    test('root URL maps to Products with no search', () => {
+      story(
+        update,
+        given(baseModel),
+        message(Message.ChangedUrl({ url: urlOrThrow('http://localhost/') })),
+        model(model => {
+          expect(model.route._tag).toBe('Products')
+        }),
+      )
+    })
+
+    test('/cart maps to Cart', () => {
+      story(
+        update,
+        given(baseModel),
+        message(
+          Message.ChangedUrl({ url: urlOrThrow('http://localhost/cart') }),
+        ),
+        model(model => {
+          expect(model.route._tag).toBe('Cart')
+        }),
+      )
+    })
+
+    test('/checkout maps to Checkout', () => {
+      story(
+        update,
+        given(baseModel),
+        message(
+          Message.ChangedUrl({ url: urlOrThrow('http://localhost/checkout') }),
+        ),
+        model(model => {
+          expect(model.route._tag).toBe('Checkout')
+        }),
+      )
+    })
+
+    test('an unmatched path falls back to NotFound', () => {
+      story(
+        update,
+        given(baseModel),
+        message(
+          Message.ChangedUrl({ url: urlOrThrow('http://localhost/wat') }),
+        ),
+        model(model => {
+          if (model.route._tag === 'NotFound') {
+            expect(model.route.path).toBe('/wat')
+          } else {
+            throw new Error('Expected NotFound')
+          }
+        }),
+      )
+    })
+  })
+
+  describe('cart updates', () => {
+    test('Products.AddedToCart OutMessage adds the item with quantity one', () => {
+      story(
+        update,
+        given(baseModel),
+        message(
+          Message.GotProductsMessage({
+            message: ProductsMessage.ClickedAddToCart({ item: apple }),
+          }),
+        ),
+        model(model => {
+          expect(model.cart).toHaveLength(1)
+          expect(model.cart[0]?.item.id).toBe('1')
+          expect(model.cart[0]?.quantity).toBe(1)
+        }),
+      )
+    })
+
+    test('adding the same item twice increments its quantity', () => {
+      story(
+        update,
+        given(baseModel),
+        message(
+          Message.GotProductsMessage({
+            message: ProductsMessage.ClickedAddToCart({ item: apple }),
+          }),
+        ),
+        message(
+          Message.GotProductsMessage({
+            message: ProductsMessage.ClickedAddToCart({ item: apple }),
+          }),
+        ),
+        model(model => {
+          expect(model.cart).toHaveLength(1)
+          expect(model.cart[0]?.quantity).toBe(2)
+        }),
+      )
+    })
+
+    test('ClickedIncrementQuantity raises the quantity for an item', () => {
+      story(
+        update,
+        given({
+          ...baseModel,
+          cart: [{ item: apple, quantity: 1 }],
+        }),
+        message(Message.ClickedIncrementQuantity({ itemId: '1' })),
+        model(model => {
+          expect(model.cart[0]?.quantity).toBe(2)
+        }),
+      )
+    })
+
+    test('ClickedDecrementQuantity lowers the quantity for an item', () => {
+      story(
+        update,
+        given({
+          ...baseModel,
+          cart: [{ item: apple, quantity: 2 }],
+        }),
+        message(Message.ClickedDecrementQuantity({ itemId: '1' })),
+        model(model => {
+          expect(model.cart[0]?.quantity).toBe(1)
+        }),
+      )
+    })
+
+    test('ClickedDecrementQuantity removes the item when it reaches zero', () => {
+      story(
+        update,
+        given({
+          ...baseModel,
+          cart: [{ item: apple, quantity: 1 }],
+        }),
+        message(Message.ClickedDecrementQuantity({ itemId: '1' })),
+        model(model => {
+          expect(model.cart).toHaveLength(0)
+        }),
+      )
+    })
+
+    test('ClickedRemoveCartItem drops the matching cart entry', () => {
+      story(
+        update,
+        given({
+          ...baseModel,
+          cart: [
+            { item: apple, quantity: 2 },
+            { item: banana, quantity: 1 },
+          ],
+        }),
+        message(Message.ClickedRemoveCartItem({ itemId: '1' })),
+        model(model => {
+          expect(model.cart).toHaveLength(1)
+          expect(model.cart[0]?.item.id).toBe('2')
+        }),
+      )
+    })
+
+    test('ClickedClearCart empties the cart', () => {
+      story(
+        update,
+        given({
+          ...baseModel,
+          cart: [{ item: apple, quantity: 2 }],
+        }),
+        message(Message.ClickedClearCart()),
+        model(model => {
+          expect(model.cart).toHaveLength(0)
+        }),
+      )
+    })
+  })
+
+  describe('checkout', () => {
+    test('UpdatedDeliveryInstructions stores the value', () => {
+      story(
+        update,
+        given(baseModel),
+        message(
+          Message.UpdatedDeliveryInstructions({
+            value: 'Leave at the door',
+          }),
+        ),
+        model(model => {
+          expect(model.deliveryInstructions).toBe('Leave at the door')
+        }),
+      )
+    })
+
+    test('ClickedPlaceOrder sets orderPlaced, clears the cart, and resets instructions', () => {
+      story(
+        update,
+        given({
+          ...baseModel,
+          cart: [{ item: apple, quantity: 2 }],
+          deliveryInstructions: 'Knock loudly',
+        }),
+        message(Message.ClickedPlaceOrder()),
+        model(model => {
+          expect(model.orderPlaced).toBe(true)
+          expect(model.cart).toHaveLength(0)
+          expect(model.deliveryInstructions).toBe('')
+        }),
+      )
+    })
+  })
+})

package/dist/templates/examples/shopping-cart/src/styles.css

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

package/dist/templates/examples/shopping-cart/src/vitest-setup.ts

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