create-foldkit-app 0.27.3 → 0.28.0

package/dist/templates/examples/auth/src/page/loggedIn/model.ts

@@ -0,0 +1,21 @@
+import { ts } from 'foldkit/schema'
+
+import { Session } from '../../domain/session'
+import { LoggedInRoute } from '../../route'
+
+// MODEL
+
+export const Model = ts('LoggedIn', {
+  route: LoggedInRoute,
+  session: Session,
+})
+
+export type Model = typeof Model.Type
+
+// INIT
+
+export const init = (route: LoggedInRoute, session: Session): Model =>
+  Model({
+    route,
+    session,
+  })

package/dist/templates/examples/auth/src/page/loggedIn/page/dashboard.ts

@@ -0,0 +1,40 @@
+import { Html, HtmlBuilder } from 'foldkit/html'
+
+import { Session } from '../../../domain/session'
+import type { Message } from '../message'
+
+export const view = (session: Session, 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-6')],
+        [`Welcome back, ${session.name}!`],
+      ),
+      h.p([h.Class('text-lg text-gray-600 mb-8')], ['Here is your dashboard.']),
+      h.div(
+        [h.Class('grid grid-cols-1 md:grid-cols-3 gap-6')],
+        [
+          statCard('Total Sessions', '42', h),
+          statCard('Active Projects', '7', h),
+          statCard('Tasks Completed', '128', h),
+        ],
+      ),
+    ],
+  )
+
+const statCard = (
+  title: string,
+  value: string,
+  h: HtmlBuilder<Message>,
+): Html =>
+  h.div(
+    [h.Class('bg-white rounded-lg shadow-md p-6')],
+    [
+      h.h2(
+        [h.Class('text-sm font-medium text-gray-500 uppercase mb-1')],
+        [title],
+      ),
+      h.p([h.Class('text-3xl font-bold text-gray-800')], [value]),
+    ],
+  )

package/dist/templates/examples/auth/src/page/loggedIn/page/settings.ts

@@ -0,0 +1,71 @@
+import { Html, HtmlBuilder } from 'foldkit/html'
+
+import { Button } from '@foldkit/ui'
+
+import { Session } from '../../../domain/session'
+import { Message } from '../message'
+
+// VIEW
+
+const infoRow = (label: string, value: string, h: HtmlBuilder<Message>): Html =>
+  h.div(
+    [
+      h.Class(
+        'flex justify-between items-center py-2 border-b border-gray-100',
+      ),
+    ],
+    [
+      h.p([h.Class('text-gray-600')], [label]),
+      h.p([h.Class('font-medium text-gray-800')], [value]),
+    ],
+  )
+
+export const view = (session: Session, 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-6')], ['Settings']),
+      h.div(
+        [h.Class('bg-white rounded-lg shadow-md p-6 mb-6')],
+        [
+          h.h2(
+            [h.Class('text-xl font-semibold text-gray-800 mb-4')],
+            ['Account Information'],
+          ),
+          h.div(
+            [h.Class('space-y-4')],
+            [
+              infoRow('User ID', session.userId, h),
+              infoRow('Email', session.email, h),
+              infoRow('Name', session.name, h),
+            ],
+          ),
+        ],
+      ),
+      h.div(
+        [h.Class('bg-white rounded-lg shadow-md p-6')],
+        [
+          h.h2(
+            [h.Class('text-xl font-semibold text-gray-800 mb-4')],
+            ['Actions'],
+          ),
+          Button.view(
+            {
+              onClick: Message.ClickedLogout(),
+              toView: attributes =>
+                h.button(
+                  [
+                    ...attributes.button,
+                    h.Class(
+                      'px-6 py-3 bg-red-500 text-white font-medium rounded-lg hover:bg-red-600 transition cursor-pointer',
+                    ),
+                  ],
+                  ['Sign Out'],
+                ),
+            },
+            h,
+          ),
+        ],
+      ),
+    ],
+  )

package/dist/templates/examples/auth/src/page/loggedIn/update.ts

@@ -0,0 +1,16 @@
+import { Option } from 'effect'
+import { Command } from 'foldkit'
+
+import { Message, OutMessage } from './message'
+import { Model } from './model'
+
+type UpdateReturn = readonly [
+  Model,
+  ReadonlyArray<Command.Command<Message>>,
+  Option.Option<OutMessage>,
+]
+
+export const update = (model: Model, message: Message) =>
+  Message.match<UpdateReturn>(message, {
+    ClickedLogout: () => [model, [], Option.some(OutMessage.RequestedLogout())],
+  })

package/dist/templates/examples/auth/src/page/loggedIn/view.ts

@@ -0,0 +1,87 @@
+import { clsx } from 'clsx'
+import { Match as M } from 'effect'
+import { Submodel } from 'foldkit'
+import { Html, HtmlBuilder } from 'foldkit/html'
+
+import { Session } from '../../domain/session'
+import { notFoundView } from '../../notFoundView'
+import { dashboardRouter, settingsRouter } from '../../route'
+import { Message } from './message'
+import { Model } from './model'
+import * as Dashboard from './page/dashboard'
+import * as Settings from './page/settings'
+
+const navLinkClassName = (isActive: boolean) =>
+  clsx('hover:bg-blue-600 font-medium px-3 py-1 rounded transition', {
+    'bg-blue-700 bg-opacity-50': isActive,
+  })
+
+const navigationView = (
+  session: Session,
+  currentRouteTag: string,
+  h: HtmlBuilder<Message>,
+): Html =>
+  h.nav(
+    [h.Class('bg-blue-500 text-white p-4')],
+    [
+      h.div(
+        [h.Class('max-w-4xl mx-auto flex justify-between items-center')],
+        [
+          h.ul(
+            [h.Class('flex gap-6 list-none')],
+            [
+              h.li(
+                [],
+                [
+                  h.a(
+                    [
+                      h.Href(dashboardRouter()),
+                      h.Class(
+                        navLinkClassName(currentRouteTag === 'Dashboard'),
+                      ),
+                    ],
+                    ['Dashboard'],
+                  ),
+                ],
+              ),
+              h.li(
+                [],
+                [
+                  h.a(
+                    [
+                      h.Href(settingsRouter()),
+                      h.Class(navLinkClassName(currentRouteTag === 'Settings')),
+                    ],
+                    ['Settings'],
+                  ),
+                ],
+              ),
+            ],
+          ),
+          h.div([h.Class('text-sm')], [`Signed in as ${session.email}`]),
+        ],
+      ),
+    ],
+  )
+
+export const view = Submodel.defineView<Model, Message>((model, h) =>
+  h.div(
+    [h.Class('min-h-screen')],
+    [
+      navigationView(model.session, model.route._tag, h),
+      h.main(
+        [h.Class('py-8')],
+        [
+          M.value(model.route).pipe(
+            M.tagsExhaustive({
+              Dashboard: () => Dashboard.view(model.session, h),
+              Settings: () => Settings.view(model.session, h),
+              NotFound: ({ path }) =>
+                notFoundView(path, dashboardRouter(), 'Go to Dashboard', h),
+            }),
+          ),
+        ],
+      ),
+    ],
+  ),
+)

package/dist/templates/examples/auth/src/page/loggedOut/index.ts

@@ -0,0 +1,4 @@
+export { Model, init } from './model'
+export { Message, type OutMessage } from './message'
+export { update } from './update'
+export { view } from './view'

package/dist/templates/examples/auth/src/page/loggedOut/message.ts

@@ -0,0 +1,20 @@
+import { defineMessageUnion } from 'foldkit/message'
+
+import { Session } from '../../domain/session'
+import * as Login from './page/login'
+
+// MESSAGE
+
+export const Message = defineMessageUnion({
+  GotLoginMessage: { message: Login.Message },
+})
+
+export type Message = typeof Message.Type
+
+// OUT MESSAGE
+
+export const OutMessage = defineMessageUnion({
+  SucceededLogin: { session: Session },
+})
+
+export type OutMessage = typeof OutMessage.Type

package/dist/templates/examples/auth/src/page/loggedOut/model.ts

@@ -0,0 +1,21 @@
+import { ts } from 'foldkit/schema'
+
+import { LoggedOutRoute } from '../../route'
+import * as Login from './page/login'
+
+// MODEL
+
+export const Model = ts('LoggedOut', {
+  route: LoggedOutRoute,
+  loginModel: Login.Model,
+})
+
+export type Model = typeof Model.Type
+
+// INIT
+
+export const init = (route: LoggedOutRoute): Model =>
+  Model({
+    route,
+    loginModel: Login.initModel(),
+  })

package/dist/templates/examples/auth/src/page/loggedOut/page/home.ts

@@ -0,0 +1,68 @@
+import { Html, HtmlBuilder } from 'foldkit/html'
+
+import { loginRouter } from '../../../route'
+import type { Message } from '../message'
+
+export const view = (h: HtmlBuilder<Message>): Html =>
+  h.div(
+    [h.Class('max-w-4xl mx-auto px-4')],
+    [
+      h.div(
+        [h.Class('text-center py-16')],
+        [
+          h.h1(
+            [h.Class('text-5xl font-bold text-gray-800 mb-6')],
+            ['Welcome to Auth Example'],
+          ),
+          h.p(
+            [h.Class('text-xl text-gray-600 mb-8')],
+            [
+              'A demonstration of authentication with Submodels and OutMessage in Foldkit.',
+            ],
+          ),
+          h.a(
+            [
+              h.Href(loginRouter()),
+              h.Class(
+                'inline-block px-8 py-3 bg-blue-500 text-white font-medium rounded-lg hover:bg-blue-600 transition',
+              ),
+            ],
+            ['Sign In'],
+          ),
+        ],
+      ),
+      h.div(
+        [h.Class('grid grid-cols-1 md:grid-cols-3 gap-8 mt-16')],
+        [
+          featureCard(
+            'Model as Union',
+            'App state is fundamentally LoggedOut | LoggedIn, not a flat struct with optional session.',
+            h,
+          ),
+          featureCard(
+            'Route Guards',
+            'Protected routes redirect to login. Auth routes redirect to dashboard when logged in.',
+            h,
+          ),
+          featureCard(
+            'Session Persistence',
+            'Session survives page refresh via localStorage and the Flags pattern.',
+            h,
+          ),
+        ],
+      ),
+    ],
+  )
+
+const featureCard = (
+  title: string,
+  description: string,
+  h: HtmlBuilder<Message>,
+): Html =>
+  h.div(
+    [h.Class('bg-white rounded-lg shadow-md p-6')],
+    [
+      h.h2([h.Class('text-xl font-semibold text-gray-800 mb-3')], [title]),
+      h.p([h.Class('text-gray-600')], [description]),
+    ],
+  )

package/dist/templates/examples/auth/src/page/loggedOut/page/login.scene.test.ts

@@ -0,0 +1,116 @@
+import { Valid } from 'foldkit/fieldValidation'
+import {
+  Command,
+  expect,
+  given,
+  label,
+  role,
+  scene,
+  submit,
+  text,
+  type,
+  within,
+} from 'foldkit/scene'
+import { describe, test } from 'vitest'
+
+import {
+  Message,
+  Model,
+  SimulateAuthRequest,
+  initModel,
+  update,
+  view,
+} from './login'
+
+const validModel = Model.make({
+  ...initModel(),
+  email: Valid({ value: 'alice@example.com' }),
+  password: Valid({ value: 'password' }),
+})
+
+const heading = role('heading', { name: 'Sign In' })
+const emailField = label('Email')
+const passwordField = label('Password')
+const submitButton = role('button', { name: 'Sign In' })
+const submittingButton = role('button', { name: 'Signing in...' })
+
+describe('login', () => {
+  test('renders the heading, both fields, and the submit button', () => {
+    scene(
+      { update, view },
+      given(initModel()),
+      expect(heading).toExist(),
+      expect(emailField).toExist(),
+      expect(passwordField).toExist(),
+      expect(submitButton).toExist(),
+    )
+  })
+
+  test('submit button starts disabled', () => {
+    scene(
+      { update, view },
+      given(initModel()),
+      expect(submitButton).toBeDisabled(),
+    )
+  })
+
+  test('typing a valid email shows the checkmark', () => {
+    scene(
+      { update, view },
+      given(initModel()),
+      type(emailField, 'alice@example.com'),
+      expect(text('✓')).toExist(),
+    )
+  })
+
+  test('typing an invalid email shows the error message', () => {
+    scene(
+      { update, view },
+      given(initModel()),
+      type(emailField, 'notanemail'),
+      expect(text('Please enter a valid email')).toExist(),
+    )
+  })
+
+  test('submit button is enabled after typing a valid email and password', () => {
+    scene(
+      { update, view },
+      given(initModel()),
+      type(emailField, 'alice@example.com'),
+      type(passwordField, 'password'),
+      expect(submitButton).toBeEnabled(),
+    )
+  })
+
+  test('submitting with valid fields shows the loading state and requests auth', () => {
+    scene(
+      { update, view },
+      given(validModel),
+      submit(role('form')),
+      expect(submittingButton).toExist(),
+      expect(submittingButton).toBeDisabled(),
+      Command.expectExact(SimulateAuthRequest),
+      Command.resolve(
+        SimulateAuthRequest,
+        Message.FailedSimulateAuthRequest({ error: 'Invalid credentials' }),
+      ),
+    )
+  })
+
+  test('failed auth shows the error and leaves submit disabled until the password changes', () => {
+    scene(
+      { update, view },
+      given(validModel),
+      submit(role('form')),
+      Command.expectExact(SimulateAuthRequest),
+      Command.resolve(
+        SimulateAuthRequest,
+        Message.FailedSimulateAuthRequest({ error: 'Invalid credentials' }),
+      ),
+      expect(within(role('form'), text('Invalid credentials'))).toExist(),
+      expect(submitButton).toBeDisabled(),
+      type(passwordField, 'correcthorse'),
+      expect(submitButton).toBeEnabled(),
+    )
+  })
+})

package/dist/templates/examples/auth/src/page/loggedOut/page/login.story.test.ts

@@ -0,0 +1,112 @@
+import { Valid } from 'foldkit/fieldValidation'
+import {
+  Command,
+  expectNoOutMessage,
+  expectOutMessage,
+  given,
+  message,
+  model,
+  story,
+} from 'foldkit/story'
+import { describe, expect, test } from 'vitest'
+
+import {
+  Message,
+  Model,
+  OutMessage,
+  SimulateAuthRequest,
+  initModel,
+  update,
+} from './login'
+
+const validModel = Model.make({
+  ...initModel(),
+  email: Valid({ value: 'alice@example.com' }),
+  password: Valid({ value: 'password' }),
+})
+
+const aliceSession = { userId: '1', email: 'alice@example.com', name: 'alice' }
+
+describe('login', () => {
+  test('typing an email validates the field', () => {
+    story(
+      update,
+      given(initModel()),
+      message(Message.ChangedEmail({ value: '' })),
+      model(model => {
+        expect(model.email._tag).toBe('Invalid')
+      }),
+      message(Message.ChangedEmail({ value: 'alice@example.com' })),
+      model(model => {
+        expect(model.email._tag).toBe('Valid')
+        expect(model.email.value).toBe('alice@example.com')
+      }),
+    )
+  })
+
+  test('typing a password validates the field', () => {
+    story(
+      update,
+      given(initModel()),
+      message(Message.ChangedPassword({ value: '' })),
+      model(model => {
+        expect(model.password._tag).toBe('Invalid')
+      }),
+      message(Message.ChangedPassword({ value: 'secret' })),
+      model(model => {
+        expect(model.password._tag).toBe('Valid')
+      }),
+    )
+  })
+
+  test('submitting with invalid fields does nothing', () => {
+    story(
+      update,
+      given(initModel()),
+      message(Message.SubmittedForm()),
+      model(model => {
+        expect(model.isSubmitting).toBe(false)
+      }),
+      Command.expectNone(),
+    )
+  })
+
+  test('submitting with valid fields sends an auth request', () => {
+    story(
+      update,
+      given(validModel),
+      message(Message.SubmittedForm()),
+      model(model => {
+        expect(model.isSubmitting).toBe(true)
+      }),
+      Command.expectHas(SimulateAuthRequest),
+      Command.resolve(
+        SimulateAuthRequest,
+        Message.SucceededSimulateAuthRequest({ session: aliceSession }),
+      ),
+      expectOutMessage(OutMessage.SucceededLogin({ session: aliceSession })),
+    )
+  })
+
+  test('failed auth marks the password field invalid and stops submitting', () => {
+    story(
+      update,
+      given(validModel),
+      message(Message.SubmittedForm()),
+      model(model => {
+        expect(model.isSubmitting).toBe(true)
+      }),
+      Command.resolve(
+        SimulateAuthRequest,
+        Message.FailedSimulateAuthRequest({
+          error: 'Invalid credentials',
+        }),
+      ),
+      model(model => {
+        expect(model.isSubmitting).toBe(false)
+        expect(model.password._tag).toBe('Invalid')
+      }),
+      expectNoOutMessage(),
+    )
+  })
+})