create-foldkit-app 0.27.3 → 0.28.0

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

@@ -0,0 +1,307 @@
+import { Effect, Match as M, Option, Schema as S } from 'effect'
+import { Command, Runtime, Update } from 'foldkit'
+import { Document, Html, HtmlBuilder } from 'foldkit/html'
+import { defineMessageUnion } from 'foldkit/message'
+import { UrlRequest, load, pushUrl } from 'foldkit/navigation'
+import { evo } from 'foldkit/struct'
+import { Url, toString as urlToString } from 'foldkit/url'
+
+import { products } from './data/products'
+import { Cart } from './domain'
+import { Cart as CartPage, Checkout, Products } from './page'
+import {
+  AppRoute,
+  cartRouter,
+  checkoutRouter,
+  productsRouter,
+  urlToAppRoute,
+} from './route'
+
+// MODEL
+
+export const Model = S.Struct({
+  route: AppRoute,
+  cart: Cart.Cart,
+  deliveryInstructions: S.String,
+  orderPlaced: S.Boolean,
+  productsPage: Products.Model,
+})
+export type Model = typeof Model.Type
+
+// MESSAGE
+
+export const Message = defineMessageUnion({
+  CompletedNavigateInternal: {},
+  CompletedLoadExternal: {},
+  ClickedLink: { request: UrlRequest },
+  ChangedUrl: { url: Url },
+  GotProductsMessage: { message: Products.Message },
+  ClickedIncrementQuantity: { itemId: S.String },
+  ClickedDecrementQuantity: { itemId: S.String },
+  ClickedRemoveCartItem: { itemId: S.String },
+  ClickedClearCart: {},
+  UpdatedDeliveryInstructions: { value: S.String },
+  ClickedPlaceOrder: {},
+})
+
+export type Message = typeof Message.Type
+
+// INIT
+
+export const init: Runtime.RoutingApplicationInit<Model, Message> = (
+  url: Url,
+) => {
+  return [
+    {
+      route: urlToAppRoute(url),
+      cart: [],
+      deliveryInstructions: '',
+      orderPlaced: false,
+      productsPage: Products.init(products),
+    },
+    [],
+  ]
+}
+
+// COMMAND
+
+const NavigateInternal = Command.define('NavigateInternal', {
+  args: { url: S.String },
+  messages: [Message.CompletedNavigateInternal],
+  execute: ({ url }) =>
+    pushUrl(url).pipe(Effect.as(Message.CompletedNavigateInternal())),
+})
+
+const LoadExternal = Command.define('LoadExternal', {
+  args: { href: S.String },
+  messages: [Message.CompletedLoadExternal],
+  execute: ({ href }) =>
+    load(href).pipe(Effect.as(Message.CompletedLoadExternal())),
+})
+
+// UPDATE
+
+type UpdateReturn = readonly [Model, ReadonlyArray<Command.Command<Message>>]
+const withUpdateReturn = M.withReturnType<UpdateReturn>()
+
+const foldProductsOutMessage = M.type<Products.OutMessage>().pipe(
+  M.withReturnType<Update.Step<Model, Message>>(),
+  M.tagsExhaustive({
+    AddedToCart:
+      ({ item }) =>
+      model => [evo(model, { cart: Cart.addItem(item) }), []],
+    IncrementedQuantity:
+      ({ itemId }) =>
+      model => [evo(model, { cart: Cart.incrementQuantity(itemId) }), []],
+    DecrementedQuantity:
+      ({ itemId }) =>
+      model => [evo(model, { cart: Cart.decrementQuantity(itemId) }), []],
+  }),
+)
+
+const foldProducts = Update.foldChild({
+  update: Products.update,
+  read: (model: Model) => Option.some(model.productsPage),
+  write: (model, nextProductsPage) =>
+    evo(model, { productsPage: () => nextProductsPage }),
+  toParentMessage: message => Message.GotProductsMessage({ message }),
+  foldOutMessage: foldProductsOutMessage,
+})
+
+export const update = (model: Model, message: Message) =>
+  Message.match<UpdateReturn>(message, {
+    CompletedNavigateInternal: () => [model, []],
+    CompletedLoadExternal: () => [model, []],
+
+    ClickedLink: ({ request }) =>
+      M.value(request).pipe(
+        withUpdateReturn,
+        M.tagsExhaustive({
+          Internal: ({ url }) => [
+            model,
+            [NavigateInternal({ url: urlToString(url) })],
+          ],
+
+          External: ({ href }) => [model, [LoadExternal({ href })]],
+        }),
+      ),
+
+    ChangedUrl: ({ url }) => [
+      evo(model, {
+        route: () => urlToAppRoute(url),
+      }),
+      [],
+    ],
+
+    GotProductsMessage: ({ message }) => foldProducts(model, message),
+
+    ClickedIncrementQuantity: ({ itemId }) => [
+      evo(model, {
+        cart: Cart.incrementQuantity(itemId),
+      }),
+      [],
+    ],
+
+    ClickedDecrementQuantity: ({ itemId }) => [
+      evo(model, {
+        cart: Cart.decrementQuantity(itemId),
+      }),
+      [],
+    ],
+
+    ClickedRemoveCartItem: ({ itemId }) => [
+      evo(model, {
+        cart: Cart.removeItem(itemId),
+      }),
+      [],
+    ],
+
+    ClickedClearCart: () => [
+      evo(model, {
+        cart: () => [],
+      }),
+      [],
+    ],
+
+    UpdatedDeliveryInstructions: ({ value }) => [
+      evo(model, {
+        deliveryInstructions: () => value,
+      }),
+      [],
+    ],
+
+    ClickedPlaceOrder: () => [
+      evo(model, {
+        orderPlaced: () => true,
+        cart: () => [],
+        deliveryInstructions: () => '',
+      }),
+      [],
+    ],
+  })
+
+// VIEW
+
+const navigationView = (
+  currentRoute: AppRoute,
+  cartCount: number,
+  h: HtmlBuilder<Message>,
+): Html => {
+  const navLinkClassName = (isActive: boolean) =>
+    `hover:bg-blue-600 font-medium px-3 py-1 rounded transition ${isActive ? 'bg-blue-700 bg-opacity-50' : ''}`
+
+  return h.nav(
+    [h.Class('bg-blue-500 text-white p-4 mb-6')],
+    [
+      h.ul(
+        [h.Class('max-w-6xl mx-auto flex gap-6 justify-center list-none')],
+        [
+          h.li(
+            [],
+            [
+              h.a(
+                [
+                  h.Href(productsRouter({ searchText: Option.none() })),
+                  h.Class(navLinkClassName(currentRoute._tag === 'Products')),
+                ],
+                ['Products'],
+              ),
+            ],
+          ),
+          h.li(
+            [],
+            [
+              h.a(
+                [
+                  h.Href(cartRouter()),
+                  h.Class(navLinkClassName(currentRoute._tag === 'Cart')),
+                ],
+                cartCount > 0 ? [`Cart (${cartCount})`] : ['Cart'],
+              ),
+            ],
+          ),
+          h.li(
+            [],
+            [
+              h.a(
+                [
+                  h.Href(checkoutRouter()),
+                  h.Class(navLinkClassName(currentRoute._tag === 'Checkout')),
+                ],
+                ['Checkout'],
+              ),
+            ],
+          ),
+        ],
+      ),
+    ],
+  )
+}
+
+const productsView = (model: Model, h: HtmlBuilder<Message>): Html =>
+  h.submodel({
+    slotId: 'products',
+    model: model.productsPage,
+    view: Products.view,
+    viewInputs: { cart: model.cart },
+    toParentMessage: message => Message.GotProductsMessage({ message }),
+  })
+
+const cartView = (model: Model, h: HtmlBuilder<Message>): Html =>
+  CartPage.view(model.cart, h)
+
+const checkoutView = (model: Model, h: HtmlBuilder<Message>): Html =>
+  Checkout.view(model.cart, model.deliveryInstructions, model.orderPlaced, h)
+
+const notFoundView = (path: string, h: HtmlBuilder<Message>): Html =>
+  h.div(
+    [h.Class('max-w-4xl mx-auto px-4 text-center')],
+    [
+      h.h1(
+        [h.Class('text-4xl font-bold text-red-600 mb-6')],
+        ['404 - Page Not Found'],
+      ),
+      h.p(
+        [h.Class('text-lg text-gray-600 mb-4')],
+        [`The path "${path}" was not found.`],
+      ),
+      h.a(
+        [
+          h.Href(productsRouter({ searchText: Option.none() })),
+          h.Class('text-blue-500 hover:underline'),
+        ],
+        ['← Go to Products'],
+      ),
+    ],
+  )
+
+const routeTitle = (route: Model['route']): string =>
+  M.value(route).pipe(
+    M.tag('Products', () => 'Shopping Cart'),
+    M.orElse(({ _tag }) => `${_tag} | Shopping Cart`),
+  )
+
+export const view = (model: Model, h: HtmlBuilder<Message>): Document => {
+  const routeContent = M.value(model.route).pipe(
+    M.tagsExhaustive({
+      Products: () => productsView(model, h),
+      Cart: () => cartView(model, h),
+      Checkout: () => checkoutView(model, h),
+      NotFound: ({ path }) => notFoundView(path, h),
+    }),
+  )
+
+  return {
+    title: routeTitle(model.route),
+    body: h.div(
+      [h.Class('min-h-screen bg-gray-100')],
+      [
+        h.header(
+          [],
+          [navigationView(model.route, Cart.totalItems(model.cart), h)],
+        ),
+        h.main([h.Class('py-8')], [routeContent]),
+      ],
+    ),
+  }
+}

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

@@ -0,0 +1,203 @@
+import { Array, Option } from 'effect'
+import { Html, HtmlBuilder } from 'foldkit/html'
+
+import { Button } from '@foldkit/ui'
+
+import { Cart } from '../domain'
+import { Message } from '../main'
+import { checkoutRouter, productsRouter } from '../route'
+
+// VIEW
+
+export const view = (cart: Cart.Cart, h: HtmlBuilder<Message>): Html =>
+  h.div(
+    [h.Class('max-w-4xl mx-auto px-4')],
+    [
+      h.h1(
+        [h.Class('text-4xl font-bold text-gray-800 mb-8')],
+        ['Shopping Cart'],
+      ),
+      h.div(
+        [h.Class('bg-white rounded-lg shadow p-6')],
+        [
+          h.div(
+            [],
+            Array.match(cart, {
+              onEmpty: () => [
+                h.p(
+                  [h.Class('text-gray-500 text-center py-8')],
+                  ['Your cart is empty'],
+                ),
+                h.div(
+                  [h.Class('text-center mt-4')],
+                  [
+                    h.a(
+                      [
+                        h.Href(productsRouter({ searchText: Option.none() })),
+                        h.Class(
+                          'bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded-lg font-medium inline-block',
+                        ),
+                      ],
+                      ['Continue Shopping'],
+                    ),
+                  ],
+                ),
+              ],
+              onNonEmpty: cart => [
+                h.section(
+                  [h.Class('space-y-4 mb-6')],
+                  cart.map(cartItem =>
+                    h.keyed('article')(
+                      cartItem.item.id,
+                      [
+                        h.Class(
+                          'flex items-center justify-between p-4 border rounded-lg',
+                        ),
+                      ],
+                      [
+                        h.div(
+                          [],
+                          [
+                            h.h3(
+                              [h.Class('font-semibold text-gray-800')],
+                              [cartItem.item.name],
+                            ),
+                            h.p(
+                              [h.Class('text-gray-600')],
+                              [`$${cartItem.item.price.toFixed(2)} each`],
+                            ),
+                          ],
+                        ),
+                        h.div(
+                          [h.Class('flex items-center gap-2')],
+                          [
+                            Button.view(
+                              {
+                                onClick: Message.ClickedDecrementQuantity({
+                                  itemId: cartItem.item.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')],
+                              [String(cartItem.quantity)],
+                            ),
+                            Button.view(
+                              {
+                                onClick: Message.ClickedIncrementQuantity({
+                                  itemId: cartItem.item.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,
+                            ),
+                            Button.view(
+                              {
+                                onClick: Message.ClickedRemoveCartItem({
+                                  itemId: cartItem.item.id,
+                                }),
+                                toView: attributes =>
+                                  h.button(
+                                    [
+                                      ...attributes.button,
+                                      h.Class(
+                                        'bg-red-500 hover:bg-red-600 text-white px-3 py-1 rounded ml-2',
+                                      ),
+                                    ],
+                                    ['Remove'],
+                                  ),
+                              },
+                              h,
+                            ),
+                          ],
+                        ),
+                      ],
+                    ),
+                  ),
+                ),
+                h.div(
+                  [h.Class('border-t pt-4 mb-6')],
+                  [
+                    h.div(
+                      [h.Class('flex justify-between items-center')],
+                      [
+                        h.h3(
+                          [h.Class('text-xl font-bold text-gray-800')],
+                          ['Total'],
+                        ),
+                        h.p(
+                          [h.Class('text-xl font-bold text-gray-800')],
+                          [
+                            `$${cart.reduce((total, item) => total + item.item.price * item.quantity, 0).toFixed(2)}`,
+                          ],
+                        ),
+                      ],
+                    ),
+                  ],
+                ),
+                h.div(
+                  [h.Class('flex gap-4 justify-center')],
+                  [
+                    h.a(
+                      [
+                        h.Href(productsRouter({ searchText: Option.none() })),
+                        h.Class(
+                          'bg-gray-500 hover:bg-gray-600 text-white px-6 py-2 rounded-lg font-medium',
+                        ),
+                      ],
+                      ['Continue Shopping'],
+                    ),
+                    Button.view(
+                      {
+                        onClick: Message.ClickedClearCart(),
+                        toView: attributes =>
+                          h.button(
+                            [
+                              ...attributes.button,
+                              h.Class(
+                                'bg-red-500 hover:bg-red-600 text-white px-6 py-2 rounded-lg font-medium',
+                              ),
+                            ],
+                            ['Clear Cart'],
+                          ),
+                      },
+                      h,
+                    ),
+                    h.a(
+                      [
+                        h.Href(checkoutRouter()),
+                        h.Class(
+                          'bg-green-500 hover:bg-green-600 text-white px-6 py-2 rounded-lg font-medium',
+                        ),
+                      ],
+                      ['Proceed to Checkout'],
+                    ),
+                  ],
+                ),
+              ],
+            }),
+          ),
+        ],
+      ),
+    ],
+  )

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

@@ -0,0 +1,205 @@
+import { Array, Option } from 'effect'
+import { Html, HtmlBuilder } from 'foldkit/html'
+
+import { Button, Textarea } from '@foldkit/ui'
+
+import { Cart } from '../domain'
+import { Message } from '../main'
+import { cartRouter, productsRouter } from '../route'
+
+// VIEW
+
+export const view = (
+  cart: Cart.Cart,
+  deliveryInstructions: string,
+  orderPlaced: boolean,
+  h: HtmlBuilder<Message>,
+): Html => {
+  if (orderPlaced) {
+    return h.div(
+      [h.Class('max-w-4xl mx-auto px-4 text-center')],
+      [
+        h.h1(
+          [h.Class('text-4xl font-bold text-green-600 mb-8')],
+          ['Order placed successfully!'],
+        ),
+        h.article(
+          [h.Class('bg-green-50 border border-green-200 rounded-lg p-6 mb-6')],
+          [
+            h.p(
+              [h.Class('text-lg text-gray-700 mb-4')],
+              ["Thank you for your order! We'll deliver it soon."],
+            ),
+            h.p(
+              [h.Class('text-gray-600')],
+              ['You will receive a confirmation email shortly.'],
+            ),
+          ],
+        ),
+        h.a(
+          [
+            h.Href(productsRouter({ searchText: Option.none() })),
+            h.Class(
+              'bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded-lg font-medium inline-block',
+            ),
+          ],
+          ['Continue Shopping'],
+        ),
+      ],
+    )
+  }
+
+  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')], ['Checkout']),
+      h.div(
+        [h.Class('bg-white rounded-lg shadow p-6')],
+        Array.match(cart, {
+          onEmpty: () => [
+            h.p(
+              [h.Class('text-gray-500 text-center py-8')],
+              ['Your cart is empty'],
+            ),
+            h.div(
+              [h.Class('text-center mt-4')],
+              [
+                h.a(
+                  [
+                    h.Href(productsRouter({ searchText: Option.none() })),
+                    h.Class(
+                      'bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded-lg font-medium inline-block',
+                    ),
+                  ],
+                  ['Start Shopping'],
+                ),
+              ],
+            ),
+          ],
+          onNonEmpty: cart => [
+            h.section(
+              [],
+              [
+                h.h2(
+                  [h.Class('text-2xl font-bold text-gray-800 mb-4')],
+                  ['Order Summary'],
+                ),
+                h.div(
+                  [h.Class('space-y-2 mb-6')],
+                  cart.map(cartItem =>
+                    h.keyed('div')(
+                      cartItem.item.id,
+                      [
+                        h.Class(
+                          'flex justify-between items-center py-2 border-b',
+                        ),
+                      ],
+                      [
+                        h.div(
+                          [],
+                          [
+                            h.span(
+                              [h.Class('font-medium')],
+                              [cartItem.item.name],
+                            ),
+                            h.span(
+                              [h.Class('text-gray-600 ml-2')],
+                              [`× ${cartItem.quantity}`],
+                            ),
+                          ],
+                        ),
+                        h.span(
+                          [h.Class('font-medium')],
+                          [
+                            `$${(cartItem.item.price * cartItem.quantity).toFixed(2)}`,
+                          ],
+                        ),
+                      ],
+                    ),
+                  ),
+                ),
+              ],
+            ),
+            h.div(
+              [
+                h.Class(
+                  'flex justify-between items-center text-xl font-bold mb-6',
+                ),
+              ],
+              [
+                h.span([], ['Total']),
+                h.span(
+                  [],
+                  [
+                    `$${cart.reduce((total, item) => total + item.item.price * item.quantity, 0).toFixed(2)}`,
+                  ],
+                ),
+              ],
+            ),
+            Textarea.view(
+              {
+                id: 'delivery-instructions',
+                value: deliveryInstructions,
+                placeholder: 'Special delivery instructions (optional)...',
+                onInput: value =>
+                  Message.UpdatedDeliveryInstructions({ value }),
+                toView: attributes =>
+                  h.div(
+                    [h.Class('mb-6')],
+                    [
+                      h.label(
+                        [
+                          ...attributes.label,
+                          h.Class(
+                            'block text-lg font-semibold text-gray-800 mb-2',
+                          ),
+                        ],
+                        ['Delivery Instructions'],
+                      ),
+                      h.textarea([
+                        ...attributes.textarea,
+                        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-24 resize-none',
+                        ),
+                      ]),
+                    ],
+                  ),
+              },
+              h,
+            ),
+            h.div(
+              [h.Class('flex gap-4 justify-center')],
+              [
+                h.a(
+                  [
+                    h.Href(cartRouter()),
+                    h.Class(
+                      'bg-gray-500 hover:bg-gray-600 text-white px-6 py-2 rounded-lg font-medium',
+                    ),
+                  ],
+                  ['Back to Cart'],
+                ),
+                Button.view(
+                  {
+                    onClick: Message.ClickedPlaceOrder(),
+                    toView: attributes =>
+                      h.button(
+                        [
+                          ...attributes.button,
+                          h.Class(
+                            'bg-green-500 hover:bg-green-600 text-white px-6 py-2 rounded-lg font-medium',
+                          ),
+                        ],
+                        ['Place Order'],
+                      ),
+                  },
+                  h,
+                ),
+              ],
+            ),
+          ],
+        }),
+      ),
+    ],
+  )
+}