create-foldkit-app 0.27.3 → 0.28.0

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

@@ -0,0 +1,346 @@
+import { clsx } from 'clsx'
+import {
+  Array,
+  Duration,
+  Effect,
+  Match as M,
+  Option,
+  Schema as S,
+  String,
+  pipe,
+} from 'effect'
+import { Command, Submodel } from 'foldkit'
+import {
+  Field,
+  Invalid,
+  NotValidated,
+  Rule,
+  allValid,
+  makeRules,
+  validate,
+} from 'foldkit/fieldValidation'
+import { Html, HtmlBuilder } from 'foldkit/html'
+import { defineMessageUnion } from 'foldkit/message'
+import { evo } from 'foldkit/struct'
+
+import { Button, Input } from '@foldkit/ui'
+
+import { Session } from '../../../domain/session'
+import { homeRouter } from '../../../route'
+
+// MODEL
+
+export const Model = S.Struct({
+  email: Field(S.String),
+  password: Field(S.String),
+  isSubmitting: S.Boolean,
+})
+
+export type Model = typeof Model.Type
+
+export const initModel = (): Model => ({
+  email: NotValidated({ value: '' }),
+  password: NotValidated({ value: '' }),
+  isSubmitting: false,
+})
+
+// MESSAGE
+
+export const Message = defineMessageUnion({
+  ChangedEmail: { value: S.String },
+  ChangedPassword: { value: S.String },
+  SubmittedForm: {},
+  SucceededSimulateAuthRequest: { session: Session },
+  FailedSimulateAuthRequest: { error: S.String },
+})
+
+export type Message = typeof Message.Type
+
+// OUT MESSAGE
+
+export const OutMessage = defineMessageUnion({
+  SucceededLogin: { session: Session },
+})
+
+export type OutMessage = typeof OutMessage.Type
+
+// VALIDATION
+
+const emailRules = makeRules({
+  required: 'Email is required',
+  rules: [Rule.email('Please enter a valid email')],
+})
+
+const passwordRules = makeRules({
+  required: 'Password is required',
+})
+
+const validateEmail = validate(emailRules)
+const validatePassword = validate(passwordRules)
+
+const isFormValid = (model: Model): boolean =>
+  allValid([
+    [model.email, emailRules],
+    [model.password, passwordRules],
+  ])
+
+// UPDATE
+
+type UpdateReturn = readonly [
+  Model,
+  ReadonlyArray<Command.Command<Message>>,
+  Option.Option<OutMessage>,
+]
+
+export const SimulateAuthRequest = Command.define('SimulateAuthRequest', {
+  args: { email: S.String, password: S.String },
+  messages: [
+    Message.SucceededSimulateAuthRequest,
+    Message.FailedSimulateAuthRequest,
+  ],
+  execute: ({ email, password }) =>
+    Effect.gen(function* () {
+      yield* Effect.sleep(Duration.seconds(1))
+
+      if (password !== 'password') {
+        return Message.FailedSimulateAuthRequest({
+          error: 'Invalid credentials',
+        })
+      }
+
+      const name = pipe(
+        email,
+        String.split('@'),
+        Array.head,
+        Option.getOrElse(() => email),
+      )
+
+      const session: Session = { userId: '1', email, name }
+
+      return Message.SucceededSimulateAuthRequest({ session })
+    }),
+})
+
+export const update = (model: Model, message: Message) =>
+  Message.match<UpdateReturn>(message, {
+    ChangedEmail: ({ value }) => [
+      evo(model, { email: () => validateEmail(value) }),
+      [],
+      Option.none(),
+    ],
+
+    ChangedPassword: ({ value }) => [
+      evo(model, { password: () => validatePassword(value) }),
+      [],
+      Option.none(),
+    ],
+
+    SubmittedForm: () => {
+      if (model.isSubmitting) {
+        return [model, [], Option.none()]
+      }
+
+      if (!isFormValid(model)) {
+        return [model, [], Option.none()]
+      }
+
+      return [
+        evo(model, { isSubmitting: () => true }),
+        [
+          SimulateAuthRequest({
+            email: model.email.value,
+            password: model.password.value,
+          }),
+        ],
+        Option.none(),
+      ]
+    },
+
+    SucceededSimulateAuthRequest: ({ session }) => [
+      model,
+      [],
+      Option.some(OutMessage.SucceededLogin({ session })),
+    ],
+
+    FailedSimulateAuthRequest: ({ error }) => [
+      evo(model, {
+        password: () =>
+          Invalid({
+            value: model.password.value,
+            errors: [error],
+          }),
+        isSubmitting: () => false,
+      }),
+      [],
+      Option.none(),
+    ],
+  })
+
+// VIEW
+
+const fieldToBorderClass = (field: Field<string>) =>
+  M.value(field).pipe(
+    M.tagsExhaustive({
+      NotValidated: () => 'border-gray-300',
+      Validating: () => 'border-blue-300',
+      Valid: () => 'border-green-500',
+      Invalid: () => 'border-red-500',
+    }),
+  )
+
+const fieldView = (
+  id: string,
+  labelText: string,
+  field: Field<string>,
+  onUpdate: (value: string) => Message,
+  type: 'text' | 'email' | 'password',
+  placeholder: string,
+  h: HtmlBuilder<Message>,
+): Html => {
+  const inputClass = clsx(
+    'w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500',
+    fieldToBorderClass(field),
+  )
+
+  return Input.view(
+    {
+      id,
+      type,
+      value: field.value,
+      placeholder,
+      onInput: onUpdate,
+      isInvalid: field._tag === 'Invalid',
+      toView: attributes =>
+        h.div(
+          [],
+          [
+            h.div(
+              [h.Class('flex items-center gap-2 mb-1')],
+              [
+                h.label(
+                  [
+                    ...attributes.label,
+                    h.Class('block text-sm font-medium text-gray-700'),
+                  ],
+                  [labelText],
+                ),
+                M.value(field).pipe(
+                  M.tagsExhaustive({
+                    NotValidated: () => h.empty,
+                    Validating: () =>
+                      h.span([h.Class('text-blue-600 text-sm')], ['...']),
+                    Valid: () =>
+                      h.span([h.Class('text-green-600 text-sm')], ['✓']),
+                    Invalid: () => h.empty,
+                  }),
+                ),
+              ],
+            ),
+            h.input([...attributes.input, h.Class(inputClass)]),
+            M.value(field).pipe(
+              M.tagsExhaustive({
+                NotValidated: () => h.empty,
+                Validating: () => h.empty,
+                Valid: () => h.empty,
+                Invalid: ({ errors }) =>
+                  h.div(
+                    [
+                      ...attributes.description,
+                      h.Class('text-red-600 text-sm mt-1'),
+                    ],
+                    [Array.headNonEmpty(errors)],
+                  ),
+              }),
+            ),
+          ],
+        ),
+    },
+    h,
+  )
+}
+
+export const view = Submodel.defineView<Model, Message>((model, h) => {
+  const canSubmit = isFormValid(model) && !model.isSubmitting
+
+  return h.div(
+    [h.Class('max-w-md mx-auto px-4')],
+    [
+      h.div(
+        [h.Class('bg-white rounded-xl shadow-lg p-8')],
+        [
+          h.h1(
+            [h.Class('text-3xl font-bold text-gray-800 text-center mb-8')],
+            ['Sign In'],
+          ),
+          h.div(
+            [h.Class('mb-6 p-3 bg-blue-50 border border-blue-200 rounded-lg')],
+            [
+              h.p(
+                [h.Class('text-sm text-blue-700')],
+                ['Hint: Use any email with password "password"'],
+              ),
+            ],
+          ),
+          h.form(
+            [h.Class('space-y-6'), h.OnSubmit(Message.SubmittedForm())],
+            [
+              fieldView(
+                'email',
+                'Email',
+                model.email,
+                value => Message.ChangedEmail({ value }),
+                'email',
+                'you@example.com',
+                h,
+              ),
+              fieldView(
+                'password',
+                'Password',
+                model.password,
+                value => Message.ChangedPassword({ value }),
+                'password',
+                'Enter your password',
+                h,
+              ),
+              Button.view(
+                {
+                  type: 'submit',
+                  isDisabled: !canSubmit,
+                  toView: attributes =>
+                    h.button(
+                      [
+                        ...attributes.button,
+                        h.Class(
+                          clsx(
+                            'w-full py-3 font-medium rounded-lg transition',
+                            canSubmit
+                              ? 'bg-blue-500 text-white hover:bg-blue-600 cursor-pointer'
+                              : 'bg-gray-300 text-gray-500 cursor-not-allowed',
+                          ),
+                        ),
+                      ],
+                      [model.isSubmitting ? 'Signing in...' : 'Sign In'],
+                    ),
+                },
+                h,
+              ),
+            ],
+          ),
+          h.div(
+            [h.Class('mt-6 text-center')],
+            [
+              h.span([h.Class('text-gray-600')], ['Back to ']),
+              h.a(
+                [
+                  h.Href(homeRouter()),
+                  h.Class('text-blue-500 hover:underline'),
+                ],
+                ['Home'],
+              ),
+            ],
+          ),
+        ],
+      ),
+    ],
+  )
+})

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

@@ -0,0 +1,32 @@
+import { Match as M, Option } from 'effect'
+import { Command, Update } from 'foldkit'
+import { evo } from 'foldkit/struct'
+
+import { Message, OutMessage } from './message'
+import { Model } from './model'
+import * as Login from './page/login'
+
+type UpdateReturn = readonly [
+  Model,
+  ReadonlyArray<Command.Command<Message>>,
+  Option.Option<OutMessage>,
+]
+
+const foldLogin = Update.foldChild({
+  update: Login.update,
+  read: (model: Model) => Option.some(model.loginModel),
+  write: (model, nextLoginModel) =>
+    evo(model, { loginModel: () => nextLoginModel }),
+  toParentMessage: message => Message.GotLoginMessage({ message }),
+  toParentOutMessage: M.type<Login.OutMessage>().pipe(
+    M.tagsExhaustive({
+      SucceededLogin: ({ session }) =>
+        Option.some(OutMessage.SucceededLogin({ session })),
+    }),
+  ),
+})
+
+export const update = (model: Model, message: Message) =>
+  Message.match<UpdateReturn>(message, {
+    GotLoginMessage: ({ message }) => foldLogin(model, message),
+  })

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

@@ -0,0 +1,31 @@
+import { Match as M } from 'effect'
+import { Submodel } from 'foldkit'
+
+import { notFoundView } from '../../notFoundView'
+import { homeRouter } from '../../route'
+import { Message } from './message'
+import { Model } from './model'
+import * as Home from './page/home'
+import * as Login from './page/login'
+
+export const view = Submodel.defineView<Model, Message>((model, h) =>
+  h.div(
+    [h.Class('py-8')],
+    [
+      M.value(model.route).pipe(
+        M.tagsExhaustive({
+          Home: () => Home.view(h),
+          Login: () =>
+            h.submodel({
+              slotId: 'login',
+              model: model.loginModel,
+              view: Login.view,
+              toParentMessage: message => Message.GotLoginMessage({ message }),
+            }),
+          NotFound: ({ path }) =>
+            notFoundView(path, homeRouter(), 'Go Home', h),
+        }),
+      ),
+    ],
+  ),
+)

package/dist/templates/examples/auth/src/route.ts

@@ -0,0 +1,56 @@
+import { Schema as S, pipe } from 'effect'
+import { Route } from 'foldkit'
+import { literal, r } from 'foldkit/route'
+
+export const HomeRoute = r('Home')
+export const LoginRoute = r('Login')
+export const DashboardRoute = r('Dashboard')
+export const SettingsRoute = r('Settings')
+export const NotFoundRoute = r('NotFound', { path: S.String })
+
+export type HomeRoute = typeof HomeRoute.Type
+export type LoginRoute = typeof LoginRoute.Type
+export type DashboardRoute = typeof DashboardRoute.Type
+export type SettingsRoute = typeof SettingsRoute.Type
+export type NotFoundRoute = typeof NotFoundRoute.Type
+
+export const LoggedOutRoute = S.Union([HomeRoute, LoginRoute, NotFoundRoute])
+export const LoggedInRoute = S.Union([
+  DashboardRoute,
+  SettingsRoute,
+  NotFoundRoute,
+])
+export const AppRoute = S.Union([
+  HomeRoute,
+  LoginRoute,
+  DashboardRoute,
+  SettingsRoute,
+  NotFoundRoute,
+])
+
+export type LoggedOutRoute = typeof LoggedOutRoute.Type
+export type LoggedInRoute = typeof LoggedInRoute.Type
+export type AppRoute = typeof AppRoute.Type
+
+export const homeRouter = pipe(Route.root, Route.mapTo(HomeRoute))
+export const loginRouter = pipe(literal('login'), Route.mapTo(LoginRoute))
+export const dashboardRouter = pipe(
+  literal('dashboard'),
+  Route.mapTo(DashboardRoute),
+)
+export const settingsRouter = pipe(
+  literal('settings'),
+  Route.mapTo(SettingsRoute),
+)
+
+const routeParser = Route.oneOf(
+  loginRouter,
+  dashboardRouter,
+  settingsRouter,
+  homeRouter,
+)
+
+export const urlToAppRoute = Route.parseUrlWithFallback(
+  routeParser,
+  NotFoundRoute,
+)

package/dist/templates/examples/auth/src/scene.test.ts

@@ -0,0 +1,61 @@
+import { Valid } from 'foldkit/fieldValidation'
+import {
+  Command,
+  expect,
+  given,
+  role,
+  scene,
+  submit,
+  text,
+} from 'foldkit/scene'
+import { describe, test } from 'vitest'
+
+import { SaveSession } from './command'
+import { Session } from './domain/session'
+import { Message } from './message'
+import { LoggedOut } from './model'
+import {
+  Message as LoginMessage,
+  Model as LoginModel,
+  SimulateAuthRequest,
+  initModel as initLoginModel,
+} from './page/loggedOut/page/login'
+import { LoginRoute } from './route'
+import { RedirectToDashboard, update } from './update'
+import { view } from './view'
+
+const validModel = LoggedOut.Model({
+  route: LoginRoute(),
+  loginModel: LoginModel.make({
+    ...initLoginModel(),
+    email: Valid({ value: 'alice@example.com' }),
+    password: Valid({ value: 'password' }),
+  }),
+})
+
+const aliceSession = Session.make({
+  userId: '1',
+  email: 'alice@example.com',
+  name: 'alice',
+})
+
+describe('login flow', () => {
+  test('successful login saves the session and lands on the dashboard', () => {
+    scene(
+      { update, view },
+      given(validModel),
+      submit(role('form')),
+      Command.expectExact(SimulateAuthRequest),
+      Command.resolve(
+        SimulateAuthRequest,
+        LoginMessage.SucceededSimulateAuthRequest({ session: aliceSession }),
+      ),
+      Command.expectExact(SaveSession, RedirectToDashboard),
+      Command.resolveAll(
+        [SaveSession, Message.SucceededSaveSession()],
+        [RedirectToDashboard, Message.CompletedNavigateInternal()],
+      ),
+      expect(text('Welcome back, alice!')).toExist(),
+    )
+  })
+})

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

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

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

@@ -0,0 +1,179 @@
+import { Effect, Match as M, Option, Schema as S } from 'effect'
+import { Command, Update } from 'foldkit'
+import { load, pushUrl, replaceUrl } from 'foldkit/navigation'
+import { evo } from 'foldkit/struct'
+import { toString as urlToString } from 'foldkit/url'
+
+import { ClearSession, LogError, SaveSession } from './command'
+import { Message } from './message'
+import { LoggedIn, LoggedOut, Model } from './model'
+import {
+  DashboardRoute,
+  HomeRoute,
+  dashboardRouter,
+  homeRouter,
+  loginRouter,
+  urlToAppRoute,
+} from './route'
+
+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())),
+})
+
+export const RedirectToLogin = Command.define('RedirectToLogin', {
+  messages: [Message.CompletedNavigateInternal],
+  execute: replaceUrl(loginRouter()).pipe(
+    Effect.as(Message.CompletedNavigateInternal()),
+  ),
+})
+
+export const RedirectToDashboard = Command.define('RedirectToDashboard', {
+  messages: [Message.CompletedNavigateInternal],
+  execute: replaceUrl(dashboardRouter()).pipe(
+    Effect.as(Message.CompletedNavigateInternal()),
+  ),
+})
+
+const RedirectToHome = Command.define('RedirectToHome', {
+  messages: [Message.CompletedNavigateInternal],
+  execute: replaceUrl(homeRouter()).pipe(
+    Effect.as(Message.CompletedNavigateInternal()),
+  ),
+})
+
+type UpdateReturn = readonly [Model, ReadonlyArray<Command.Command<Message>>]
+const withUpdateReturn = M.withReturnType<UpdateReturn>()
+
+const foldLoggedOutOutMessage: (
+  outMessage: LoggedOut.OutMessage,
+) => Update.Step<Model, Message> = M.type<LoggedOut.OutMessage>().pipe(
+  M.withReturnType<Update.Step<Model, Message>>(),
+  M.tagsExhaustive({
+    SucceededLogin:
+      ({ session }) =>
+      () => [
+        LoggedIn.init(DashboardRoute(), session),
+        [SaveSession({ session }), RedirectToDashboard()],
+      ],
+  }),
+)
+
+const foldLoggedOut = Update.foldChild({
+  update: LoggedOut.update,
+  read: (model: Model) =>
+    M.value(model).pipe(
+      M.tagsExhaustive({
+        LoggedOut: loggedOutModel => Option.some(loggedOutModel),
+        LoggedIn: () => Option.none(),
+      }),
+    ),
+  write: (_model, nextLoggedOut) => nextLoggedOut,
+  toParentMessage: message => Message.GotLoggedOutMessage({ message }),
+  foldOutMessage: foldLoggedOutOutMessage,
+})
+
+const foldLoggedInOutMessage: (
+  outMessage: LoggedIn.OutMessage,
+) => Update.Step<Model, Message> = M.type<LoggedIn.OutMessage>().pipe(
+  M.withReturnType<Update.Step<Model, Message>>(),
+  M.tagsExhaustive({
+    RequestedLogout: () => () => [
+      LoggedOut.init(HomeRoute()),
+      [ClearSession(), RedirectToHome()],
+    ],
+  }),
+)
+
+const foldLoggedIn = Update.foldChild({
+  update: LoggedIn.update,
+  read: (model: Model) =>
+    M.value(model).pipe(
+      M.tagsExhaustive({
+        LoggedOut: () => Option.none(),
+        LoggedIn: loggedInModel => Option.some(loggedInModel),
+      }),
+    ),
+  write: (_model, nextLoggedIn) => nextLoggedIn,
+  toParentMessage: message => Message.GotLoggedInMessage({ message }),
+  foldOutMessage: foldLoggedInOutMessage,
+})
+
+export const update = (model: Model, message: Message): UpdateReturn =>
+  M.value(message).pipe(
+    withUpdateReturn,
+    M.tags({
+      ClickedLink: ({ request }) =>
+        M.value(request).pipe(
+          withUpdateReturn,
+          M.tagsExhaustive({
+            Internal: ({ url }) => [
+              model,
+              [NavigateInternal({ url: urlToString(url) })],
+            ],
+            External: ({ href }) => [model, [LoadExternal({ href })]],
+          }),
+        ),
+
+      ChangedUrl: ({ url }) => {
+        const route = urlToAppRoute(url)
+
+        return M.value(model).pipe(
+          withUpdateReturn,
+          M.tagsExhaustive({
+            LoggedOut: loggedOutModel =>
+              M.value(route).pipe(
+                withUpdateReturn,
+                M.tag('Home', 'Login', 'NotFound', route => [
+                  evo(loggedOutModel, { route: () => route }),
+                  [],
+                ]),
+                M.orElse(() => [model, [RedirectToLogin()]]),
+              ),
+
+            LoggedIn: loggedInModel =>
+              M.value(route).pipe(
+                withUpdateReturn,
+                M.tag('Dashboard', 'Settings', 'NotFound', route => [
+                  evo(loggedInModel, { route: () => route }),
+                  [],
+                ]),
+                M.orElse(() => [model, [RedirectToDashboard()]]),
+              ),
+          }),
+        )
+      },
+
+      FailedSaveSession: ({ error }) => [
+        model,
+        [LogError({ entries: ['Failed to save session:', error] })],
+      ],
+
+      FailedClearSession: ({ error }) => [
+        model,
+        [LogError({ entries: ['Failed to clear session:', error] })],
+      ],
+
+      GotLoggedOutMessage: ({ message }) => foldLoggedOut(model, message),
+
+      GotLoggedInMessage: ({ message }) => foldLoggedIn(model, message),
+    }),
+    M.tag(
+      'CompletedNavigateInternal',
+      'CompletedLoadExternal',
+      'CompletedLogError',
+      'SucceededSaveSession',
+      'SucceededClearSession',
+      () => [model, []],
+    ),
+    M.exhaustive,
+  )