create-foldkit-app 0.27.3 → 0.28.0

package/dist/templates/examples/query-sync/src/scene.test.ts

@@ -0,0 +1,89 @@
+import { Option } from 'effect'
+import { expect, given, placeholder, role, scene, text } from 'foldkit/scene'
+import { describe, test } from 'vitest'
+
+import { Listbox } from '@foldkit/ui'
+
+import {
+  BrowseRoute,
+  type Model,
+  NotFoundRoute,
+  Unsorted,
+  update,
+  view,
+} from './main'
+
+const browseModel: Model = {
+  route: BrowseRoute({
+    search: Option.none(),
+    sorting: Unsorted(),
+    diet: Option.none(),
+    period: Option.none(),
+  }),
+  dietListbox: Listbox.init({ id: 'diet-filter' }),
+  periodListbox: Listbox.init({ id: 'period-filter' }),
+}
+
+describe('view', () => {
+  test('the Browse route renders the heading and search input', () => {
+    scene(
+      { update, view },
+      given(browseModel),
+      expect(role('heading', { name: 'Dinosaur Explorer' })).toExist(),
+      expect(placeholder('Search by name…')).toExist(),
+    )
+  })
+
+  test('rendering shows the total dinosaur count', () => {
+    scene(
+      { update, view },
+      given(browseModel),
+      expect(text('Showing', { exact: false })).toContainText('dinosaurs'),
+    )
+  })
+
+  test('typing in the search input updates its rendered value', () => {
+    scene(
+      { update, view },
+      given({
+        ...browseModel,
+        route: BrowseRoute({
+          search: Option.some('Tyranno'),
+          sorting: Unsorted(),
+          diet: Option.none(),
+          period: Option.none(),
+        }),
+      }),
+      expect(placeholder('Search by name…')).toHaveValue('Tyranno'),
+    )
+  })
+
+  test('a search with no matches shows the empty-state copy', () => {
+    scene(
+      { update, view },
+      given({
+        ...browseModel,
+        route: BrowseRoute({
+          search: Option.some('zzzNoMatch'),
+          sorting: Unsorted(),
+          diet: Option.none(),
+          period: Option.none(),
+        }),
+      }),
+      expect(text('No dinosaurs match your filters.')).toExist(),
+    )
+  })
+
+  test('NotFound shows a friendly 404 and a back link', () => {
+    scene(
+      { update, view },
+      given({
+        ...browseModel,
+        route: NotFoundRoute({ path: '/oops' }),
+      }),
+      expect(role('heading', { name: '404 — Page Not Found' })).toExist(),
+      expect(text('The path "/oops" was not found.')).toExist(),
+      expect(role('link', { name: '← Back to Dinosaur Explorer' })).toExist(),
+    )
+  })
+})

package/dist/templates/examples/query-sync/src/story.test.ts

@@ -0,0 +1,151 @@
+import { Option } from 'effect'
+import { Command, given, message, model, story } from 'foldkit/story'
+import { fromString } from 'foldkit/url'
+import { describe, expect, test } from 'vitest'
+
+import { Listbox } from '@foldkit/ui'
+import { Message as ListboxMessage } from '@foldkit/ui/listbox'
+
+import {
+  Ascending,
+  BrowseRoute,
+  Message,
+  type Model,
+  ReplaceFilters,
+  Unsorted,
+  update,
+} from './main'
+
+const browseModel: Model = {
+  route: BrowseRoute({
+    search: Option.none(),
+    sorting: Unsorted(),
+    diet: Option.none(),
+    period: Option.none(),
+  }),
+  dietListbox: Listbox.init({ id: 'diet-filter' }),
+  periodListbox: Listbox.init({ id: 'period-filter' }),
+}
+
+const urlOrThrow = (raw: string) =>
+  Option.getOrThrowWith(
+    fromString(raw),
+    () => new Error(`Failed to parse url: ${raw}`),
+  )
+
+describe('update', () => {
+  describe('ChangedUrl', () => {
+    test('parses search, sorting, diet, and period from the URL', () => {
+      story(
+        update,
+        given(browseModel),
+        message(
+          Message.ChangedUrl({
+            url: urlOrThrow(
+              'http://localhost/?search=raptor&sorting=Length:Ascending&diet=Carnivore&period=Cretaceous',
+            ),
+          }),
+        ),
+        model(model => {
+          if (model.route._tag !== 'Browse') {
+            throw new Error('Expected Browse route')
+          }
+          expect(model.route.search).toStrictEqual(Option.some('raptor'))
+          expect(model.route.sorting).toStrictEqual(
+            Ascending({ column: 'Length' }),
+          )
+          expect(model.route.diet).toStrictEqual(Option.some('Carnivore'))
+          expect(model.route.period).toStrictEqual(Option.some('Cretaceous'))
+        }),
+      )
+    })
+
+    test('an unknown path falls through to NotFound', () => {
+      story(
+        update,
+        given(browseModel),
+        message(
+          Message.ChangedUrl({
+            url: urlOrThrow('http://localhost/somewhere/else'),
+          }),
+        ),
+        model(model => {
+          expect(model.route._tag).toBe('NotFound')
+        }),
+      )
+    })
+  })
+
+  describe('ChangedSearchInput', () => {
+    test('typing search text fires a URL replacement with the new value', () => {
+      story(
+        update,
+        given(browseModel),
+        message(Message.ChangedSearchInput({ value: 'rex' })),
+        Command.expectHas(ReplaceFilters),
+        Command.resolve(ReplaceFilters, Message.CompletedReplaceFilters()),
+      )
+    })
+
+    test('clearing the search input fires a replacement', () => {
+      story(
+        update,
+        given({
+          ...browseModel,
+          route: BrowseRoute({
+            search: Option.some('foo'),
+            sorting: Unsorted(),
+            diet: Option.none(),
+            period: Option.none(),
+          }),
+        }),
+        message(Message.ChangedSearchInput({ value: '' })),
+        Command.expectHas(ReplaceFilters),
+        Command.resolve(ReplaceFilters, Message.CompletedReplaceFilters()),
+      )
+    })
+  })
+
+  describe('ClickedColumnHeader', () => {
+    test('first click on an Unsorted column produces an Ascending sort', () => {
+      story(
+        update,
+        given(browseModel),
+        message(Message.ClickedColumnHeader({ column: 'Name' })),
+        Command.expectHas(ReplaceFilters),
+        Command.resolve(ReplaceFilters, Message.CompletedReplaceFilters()),
+      )
+    })
+  })
+
+  describe('Listbox SelectedItem', () => {
+    test('selecting a diet refocuses the listbox button and replaces the URL', () => {
+      story(
+        update,
+        given(browseModel),
+        message(
+          Message.GotDietListboxMessage({
+            message: ListboxMessage.Opened({
+              maybeActiveItemIndex: Option.none(),
+            }),
+          }),
+        ),
+        Command.resolve(
+          Listbox.FocusItems,
+          ListboxMessage.CompletedFocusItems(),
+        ),
+        message(
+          Message.GotDietListboxMessage({
+            message: ListboxMessage.SelectedItem({ item: 'Carnivore' }),
+          }),
+        ),
+        Command.resolve(
+          Listbox.FocusButton,
+          ListboxMessage.CompletedFocusButton(),
+        ),
+        Command.expectHas(ReplaceFilters),
+        Command.resolve(ReplaceFilters, Message.CompletedReplaceFilters()),
+      )
+    })
+  })
+})

package/dist/templates/examples/query-sync/src/styles.css

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

package/dist/templates/examples/query-sync/src/vitest-setup.ts

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

package/dist/templates/examples/route-transitions/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "route-transitions-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",
+    "@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/route-transitions/src/data.ts

@@ -0,0 +1,61 @@
+import { Array, Option, Schema as S, pipe } from 'effect'
+
+export const Painting = S.Struct({
+  id: S.Number,
+  title: S.String,
+  artist: S.String,
+  gradient: S.String,
+})
+export type Painting = typeof Painting.Type
+
+export const paintings: ReadonlyArray<Painting> = [
+  {
+    id: 1,
+    title: 'Dawn Over the Harbor',
+    artist: 'Mara Ellsworth',
+    gradient: 'from-rose-300 via-amber-200 to-sky-300',
+  },
+  {
+    id: 2,
+    title: 'Static in Bloom',
+    artist: 'Jun Okabe',
+    gradient: 'from-fuchsia-400 via-purple-300 to-indigo-400',
+  },
+  {
+    id: 3,
+    title: 'Winter Circuit',
+    artist: 'Ada Lindqvist',
+    gradient: 'from-slate-300 via-cyan-200 to-blue-400',
+  },
+  {
+    id: 4,
+    title: 'Ferric Meadow',
+    artist: 'Tomás Reyes',
+    gradient: 'from-lime-300 via-emerald-300 to-teal-400',
+  },
+  {
+    id: 5,
+    title: 'Ultraviolet Tide',
+    artist: 'Nadia Boulos',
+    gradient: 'from-indigo-400 via-violet-400 to-pink-300',
+  },
+  {
+    id: 6,
+    title: 'Ember Study No. 4',
+    artist: 'Hal Whitaker',
+    gradient: 'from-orange-400 via-red-300 to-rose-400',
+  },
+]
+
+export const findPaintingWithIndex = (
+  paintingId: number,
+): Option.Option<Readonly<{ painting: Painting; paintingIndex: number }>> =>
+  pipe(
+    Array.findFirstIndex(paintings, painting => painting.id === paintingId),
+    Option.flatMap(paintingIndex =>
+      Option.map(Array.get(paintings, paintingIndex), painting => ({
+        painting,
+        paintingIndex,
+      })),
+    ),
+  )

package/dist/templates/examples/route-transitions/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)