create-foldkit-app 0.27.3 → 0.28.0

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

@@ -0,0 +1,242 @@
+import { Array, Option, String } from 'effect'
+import { Command, given, message, model, story } from 'foldkit/story'
+import { fromString } from 'foldkit/url'
+import { describe, expect, test } from 'vitest'
+
+import { HomeRoute, Message, Model, PeopleRoute, update } from './main'
+import { People } from './page'
+import { Message as PeopleMessage } from './page/people'
+
+const peoplePageWith = (searchInput: string) =>
+  People.Model.make({
+    searchInput,
+    searchHistory: Array.liftPredicate(String.isNonEmpty)(searchInput),
+    results: People.SearchLoaded({
+      query: searchInput,
+      people: People.searchPeople(searchInput),
+    }),
+  })
+
+const initialPeoplePage = peoplePageWith('')
+
+const home = Model.make({ route: HomeRoute(), peoplePage: initialPeoplePage })
+
+const onPeople = (searchInput: string) =>
+  Model.make({
+    route: PeopleRoute({
+      searchText: Option.liftPredicate(String.isNonEmpty)(searchInput),
+    }),
+    peoplePage: peoplePageWith(searchInput),
+  })
+
+const urlOrThrow = (raw: string) =>
+  Option.getOrThrowWith(
+    fromString(raw),
+    () => new Error(`Failed to parse url: ${raw}`),
+  )
+
+const resolveFetch = (searchText: string) =>
+  Command.resolve(
+    People.FetchPeople,
+    PeopleMessage.SucceededFetchPeople({
+      query: searchText,
+      people: People.searchPeople(searchText),
+    }),
+  )
+
+describe('update', () => {
+  describe('ChangedUrl', () => {
+    test('navigating to /people parses to a People route', () => {
+      story(
+        update,
+        given(home),
+        message(
+          Message.ChangedUrl({ url: urlOrThrow('http://localhost/people') }),
+        ),
+        model(model => {
+          if (model.route._tag === 'People') {
+            expect(model.route.searchText).toStrictEqual(Option.none())
+          } else {
+            throw new Error('Expected People route')
+          }
+        }),
+        resolveFetch(''),
+      )
+    })
+
+    test('navigating to /people?searchText=foo captures the query parameter', () => {
+      story(
+        update,
+        given(home),
+        message(
+          Message.ChangedUrl({
+            url: urlOrThrow('http://localhost/people?searchText=foo'),
+          }),
+        ),
+        model(model => {
+          if (model.route._tag === 'People') {
+            expect(model.route.searchText).toStrictEqual(Option.some('foo'))
+          } else {
+            throw new Error('Expected People route')
+          }
+        }),
+        resolveFetch('foo'),
+      )
+    })
+
+    test('navigating to /people/3 parses to a Person route with numeric id', () => {
+      story(
+        update,
+        given(home),
+        message(
+          Message.ChangedUrl({ url: urlOrThrow('http://localhost/people/3') }),
+        ),
+        model(model => {
+          if (model.route._tag === 'Person') {
+            expect(model.route.personId).toBe(3)
+          } else {
+            throw new Error('Expected Person route')
+          }
+        }),
+      )
+    })
+
+    test('an unknown path falls through to NotFound with the path captured', () => {
+      story(
+        update,
+        given(home),
+        message(
+          Message.ChangedUrl({ url: urlOrThrow('http://localhost/missing') }),
+        ),
+        model(model => {
+          if (model.route._tag === 'NotFound') {
+            expect(model.route.path).toBe('/missing')
+          } else {
+            throw new Error('Expected NotFound route')
+          }
+        }),
+      )
+    })
+
+    test('the deep nested path resolves to Nested', () => {
+      story(
+        update,
+        given(home),
+        message(
+          Message.ChangedUrl({
+            url: urlOrThrow('http://localhost/nested/route/is/very/nested'),
+          }),
+        ),
+        model(model => {
+          expect(model.route._tag).toBe('Nested')
+        }),
+      )
+    })
+
+    test('navigating to /files parses to the FilesIndex route', () => {
+      story(
+        update,
+        given(home),
+        message(
+          Message.ChangedUrl({ url: urlOrThrow('http://localhost/files') }),
+        ),
+        model(model => {
+          expect(model.route._tag).toBe('FilesIndex')
+        }),
+      )
+    })
+
+    test('navigating under /files captures the remaining segments', () => {
+      story(
+        update,
+        given(home),
+        message(
+          Message.ChangedUrl({
+            url: urlOrThrow('http://localhost/files/documents/taxes'),
+          }),
+        ),
+        model(model => {
+          if (model.route._tag === 'Files') {
+            expect(model.route.path).toStrictEqual(['documents', 'taxes'])
+          } else {
+            throw new Error('Expected Files route')
+          }
+        }),
+      )
+    })
+
+    test('a same-page URL change syncs the input, records history, and refetches', () => {
+      story(
+        update,
+        given(onPeople('')),
+        message(
+          Message.ChangedUrl({
+            url: urlOrThrow('http://localhost/people?searchText=designer'),
+          }),
+        ),
+        model(model => {
+          expect(model.peoplePage.searchInput).toBe('designer')
+          expect(model.peoplePage.searchHistory).toStrictEqual(['designer'])
+          expect(model.peoplePage.results._tag).toBe('SearchLoading')
+        }),
+        Command.expectHas(People.FetchPeople),
+        resolveFetch('designer'),
+        model(model => {
+          if (model.peoplePage.results._tag === 'SearchLoaded') {
+            expect(
+              model.peoplePage.results.people.map(person => person.name),
+            ).toStrictEqual(['Alice Johnson', 'Eva Brown'])
+          } else {
+            throw new Error('Expected SearchLoaded')
+          }
+        }),
+      )
+    })
+  })
+
+  describe('GotPeopleMessage', () => {
+    test('typing updates the input without recording history or firing a command', () => {
+      story(
+        update,
+        given(onPeople('')),
+        message(
+          Message.GotPeopleMessage({
+            message: PeopleMessage.ChangedSearchInput({ value: 'd' }),
+          }),
+        ),
+        message(
+          Message.GotPeopleMessage({
+            message: PeopleMessage.ChangedSearchInput({ value: 'de' }),
+          }),
+        ),
+        message(
+          Message.GotPeopleMessage({
+            message: PeopleMessage.ChangedSearchInput({ value: 'designer' }),
+          }),
+        ),
+        Command.expectNone(),
+        model(model => {
+          expect(model.peoplePage.searchInput).toBe('designer')
+          expect(model.peoplePage.searchHistory).toStrictEqual([])
+        }),
+      )
+    })
+
+    test('submitting the search pushes the current input to the URL', () => {
+      story(
+        update,
+        given(onPeople('designer')),
+        message(
+          Message.GotPeopleMessage({
+            message: PeopleMessage.SubmittedSearch(),
+          }),
+        ),
+        Command.expectHas(People.PushSearchUrl),
+        Command.resolve(
+          People.PushSearchUrl,
+          PeopleMessage.CompletedPushSearchUrl(),
+        ),
+      )
+    })
+  })
+})

package/dist/templates/examples/routing/src/styles.css

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

package/dist/templates/examples/routing/src/vitest-setup.ts

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

package/dist/templates/examples/shopping-cart/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "shopping-cart-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/shopping-cart/src/data/products.ts

@@ -0,0 +1,10 @@
+import { Item } from '../domain'
+
+export const products: Item.Item[] = [
+  { id: '1', name: 'Apple', price: 1.5 },
+  { id: '2', name: 'Banana', price: 0.75 },
+  { id: '3', name: 'Orange', price: 2.0 },
+  { id: '4', name: 'Bread', price: 3.25 },
+  { id: '5', name: 'Milk', price: 4.0 },
+  { id: '6', name: 'Eggs', price: 5.5 },
+]

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

@@ -0,0 +1,77 @@
+import { Array, Number, Option, Predicate, Schema, pipe } from 'effect'
+import { evo } from 'foldkit/struct'
+
+import { CartItem, Item } from './item'
+
+export const Cart = Schema.Array(CartItem)
+export type Cart = typeof Cart.Type
+
+const hasItemId =
+  (itemId: string) =>
+  (cartItem: CartItem): boolean =>
+    cartItem.item.id === itemId
+
+const mapCartItem = (itemId: string, f: (cartItem: CartItem) => CartItem) =>
+  Array.map<Cart, CartItem>(cartItem =>
+    hasItemId(itemId)(cartItem) ? f(cartItem) : cartItem,
+  )
+
+export const addItem =
+  (item: Item) =>
+  (cart: Cart): Cart => {
+    const existingCartItem = Array.findFirst(cart, hasItemId(item.id))
+
+    return Option.match(existingCartItem, {
+      onNone: () => [...cart, { item, quantity: 1 }],
+      onSome: () =>
+        mapCartItem(
+          item.id,
+          evo({
+            quantity: Number.increment,
+          }),
+        )(cart),
+    })
+  }
+
+export const removeItem =
+  (itemId: string) =>
+  (cart: Cart): Cart =>
+    Array.filter(cart, Predicate.not(hasItemId(itemId)))
+
+export const changeQuantity = (itemId: string, quantity: number) =>
+  quantity <= 0
+    ? removeItem(itemId)
+    : mapCartItem(
+        itemId,
+        evo({
+          quantity: () => quantity,
+        }),
+      )
+
+export const incrementQuantity = (itemId: string) =>
+  mapCartItem(
+    itemId,
+    evo({
+      quantity: Number.increment,
+    }),
+  )
+
+export const decrementQuantity =
+  (itemId: string) =>
+  (cart: Cart): Cart =>
+    changeQuantity(itemId, itemQuantity(itemId)(cart) - 1)(cart)
+
+export const itemQuantity =
+  (itemId: string) =>
+  (cart: Cart): number =>
+    pipe(
+      cart,
+      Array.findFirst<CartItem>(hasItemId(itemId)),
+      Option.match({
+        onNone: () => 0,
+        onSome: ({ quantity }) => quantity,
+      }),
+    )
+
+export const totalItems = (cart: Cart) =>
+  Array.reduce(cart, 0, (total, { quantity }) => total + quantity)

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

@@ -0,0 +1,2 @@
+export * as Item from './item'
+export * as Cart from './cart'

package/dist/templates/examples/shopping-cart/src/domain/item.ts

@@ -0,0 +1,16 @@
+import { Schema } from 'effect'
+
+export const Item = Schema.Struct({
+  id: Schema.String,
+  name: Schema.String,
+  price: Schema.Number,
+})
+
+export type Item = typeof Item.Type
+
+export const CartItem = Schema.Struct({
+  item: Item,
+  quantity: Schema.Number,
+})
+
+export type CartItem = typeof CartItem.Type

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

@@ -0,0 +1,20 @@
+import { Runtime } from 'foldkit'
+
+import { Message, Model, init, update, view } from './main'
+
+const application = Runtime.makeApplication({
+  Model,
+  init,
+  update,
+  view,
+  container: document.getElementById('root'),
+  routing: {
+    onUrlRequest: request => Message.ClickedLink({ request }),
+    onUrlChange: url => Message.ChangedUrl({ url }),
+  },
+  devTools: {
+    Message,
+  },
+})
+
+Runtime.run(application)