create-foldkit-app 0.32.0 → 0.32.1

package/dist/templates/examples/ui-showcase/src/main.ts

@@ -1,5 +1,5 @@
 import clsx from 'clsx'
-import { Array, Effect, Match as M, Option, Schema as S, pipe } from 'effect'
+import { Array, Effect, Match, Option, Schema, pipe } from 'effect'
 import {
   Calendar,
   Command,
@@ -20,10 +20,10 @@ import { Dialog, Nav } from '@foldkit/ui'
 
 import * as Icon from './icon'
 import { uiInit } from './ui/init'
-import { UiMessage } from './ui/message'
+import { Message as UiMessage } from './ui/message'
 import { UiModel } from './ui/model'
 import * as UiSubscriptions from './ui/subscriptions'
-import { uiUpdate } from './ui/update'
+import { closeMobileMenu, openMobileMenu, uiUpdate } from './ui/update'
 import * as View from './ui/view'
 
 // ROUTE
@@ -55,7 +55,7 @@ export const AppRoute = defineRouteUnion({
   Tooltip: {},
   Animation: {},
   VirtualList: {},
-  NotFound: { path: S.String },
+  NotFound: { path: Schema.String },
 })
 
 export type AppRoute = typeof AppRoute.Type
@@ -144,7 +144,7 @@ const urlToAppRoute = Route.parseUrlWithFallback(routeParser, AppRoute.NotFound)
 
 // MODEL
 
-export const Model = S.Struct({
+export const Model = Schema.Struct({
   route: AppRoute,
   uiModel: UiModel,
 })
@@ -158,6 +158,7 @@ export const Message = defineMessageUnion({
   CompletedLoadExternal: {},
   ClickedLink: { request: UrlRequest },
   ChangedUrl: { url: Url },
+  ClickedOpenMobileMenu: {},
   GotUiMessage: { message: UiMessage },
 })
 
@@ -166,14 +167,14 @@ export type Message = typeof Message.Type
 // COMMAND
 
 const NavigateInternal = Command.define('NavigateInternal', {
-  args: { url: S.String },
+  args: { url: Schema.String },
   messages: [Message.CompletedNavigateInternal],
   execute: ({ url }) =>
     pushUrl(url).pipe(Effect.as(Message.CompletedNavigateInternal())),
 })
 
 const LoadExternal = Command.define('LoadExternal', {
-  args: { href: S.String },
+  args: { href: Schema.String },
   messages: [Message.CompletedLoadExternal],
   execute: ({ href }) =>
     load(href).pipe(Effect.as(Message.CompletedLoadExternal())),
@@ -181,7 +182,7 @@ const LoadExternal = Command.define('LoadExternal', {
 
 // INIT
 
-export const Flags = S.Struct({
+export const Flags = Schema.Struct({
   today: Calendar.CalendarDate,
 })
 
@@ -211,14 +212,9 @@ export const init: Runtime.RoutingApplicationInit<Model, Message, Flags> = (
 
 // UPDATE
 
-const toUiMessage = (message: typeof UiMessage.Type): Message =>
+const toUiMessage = (message: UiMessage): Message =>
   Message.GotUiMessage({ message })
 
-const toMobileMenuDialogMessage = (message: Dialog.Message): Message =>
-  Message.GotUiMessage({
-    message: UiMessage.GotMobileMenuDialogMessage({ message }),
-  })
-
 const foldUi = Update.foldChild({
   update: uiUpdate,
   read: (model: Model) => Option.some(model.uiModel),
@@ -226,23 +222,18 @@ const foldUi = Update.foldChild({
   toParentMessage: toUiMessage,
 })
 
-const foldMobileMenuDialogOutMessage = M.type<Dialog.OutMessage>().pipe(
-  M.withReturnType<Update.Step<Model, Message>>(),
-  M.tagsExhaustive({
-    Opened: () => model => ({ model }),
-    Closed: () => model => ({ model }),
-  }),
-)
+const foldUiOpenMobileMenu = Update.foldChildStep({
+  update: openMobileMenu,
+  read: (model: Model) => Option.some(model.uiModel),
+  write: (model, nextUiModel) => evo(model, { uiModel: () => nextUiModel }),
+  toParentMessage: toUiMessage,
+})
 
-const foldMobileMenuDialogClose = Update.foldChildStep({
-  update: Dialog.close,
-  read: (model: Model) => Option.some(model.uiModel.mobileMenuDialog),
-  write: (model, nextMobileMenuDialog) =>
-    evo(model, {
-      uiModel: evo({ mobileMenuDialog: () => nextMobileMenuDialog }),
-    }),
-  toParentMessage: toMobileMenuDialogMessage,
-  foldOutMessage: foldMobileMenuDialogOutMessage,
+const foldUiCloseMobileMenu = Update.foldChildStep({
+  update: closeMobileMenu,
+  read: (model: Model) => Option.some(model.uiModel),
+  write: (model, nextUiModel) => evo(model, { uiModel: () => nextUiModel }),
+  toParentMessage: toUiMessage,
 })
 
 type UpdateReturn = Update.Return<Model, Message>
@@ -269,9 +260,11 @@ export const update = (model: Model, message: Message) =>
         stepModel => ({
           model: evo(stepModel, { route: () => urlToAppRoute(url) }),
         }),
-        foldMobileMenuDialogClose,
+        foldUiCloseMobileMenu,
       ]),
 
+    ClickedOpenMobileMenu: () => foldUiOpenMobileMenu(model),
+
     GotUiMessage: ({ message }) => foldUi(model, message),
   })
 
@@ -348,7 +341,7 @@ const componentNav = (
     toView,
   })
 
-const navListView = (
+const navListView = <Message>(
   items: ReadonlyArray<Nav.ItemInfo>,
   linkClassName: (isActive: boolean) => string,
   h: HtmlBuilder<Message>,
@@ -421,7 +414,7 @@ const sidebarView = (currentRoute: AppRoute, h: HtmlBuilder<Message>): Html =>
 const mobileMenuContent = (
   currentRoute: AppRoute,
   closeButton: Dialog.RenderInfo['closeButton'],
-  h: HtmlBuilder<Message>,
+  h: HtmlBuilder<UiMessage>,
 ): Html =>
   h.div(
     [h.Class('flex flex-col h-full')],
@@ -510,17 +503,25 @@ const mobileHeaderView = (model: Model, h: HtmlBuilder<Message>): Html =>
           ),
           h.AriaExpanded(model.uiModel.mobileMenuDialog.isOpen),
           h.AriaLabel('Toggle menu'),
-          h.OnClick(toUiMessage(UiMessage.ClickedOpenMobileMenu())),
+          h.OnClick(Message.ClickedOpenMobileMenu()),
         ],
         [Icon.menu('w-6 h-6')],
       ),
     ],
   )
 
-const mobileMenuView = (model: Model, h: HtmlBuilder<Message>): Html =>
+type MobileMenuViewInputs = Readonly<{
+  currentRoute: AppRoute
+}>
+
+const mobileMenuDialogView = Submodel.defineView<
+  UiModel,
+  UiMessage,
+  MobileMenuViewInputs
+>((model, { currentRoute }, h): Html =>
   h.submodel({
-    slotId: model.uiModel.mobileMenuDialog.id,
-    model: model.uiModel.mobileMenuDialog,
+    slotId: model.mobileMenuDialog.id,
+    model: model.mobileMenuDialog,
     view: Dialog.view,
     viewInputs: {
       toView: ({ dialog, backdrop, panel, closeButton, isVisible }) =>
@@ -534,13 +535,24 @@ const mobileMenuView = (model: Model, h: HtmlBuilder<Message>): Html =>
                     ...panel,
                     h.Class('fixed inset-0 z-[60] bg-white flex flex-col'),
                   ],
-                  [mobileMenuContent(model.route, closeButton, h)],
+                  [mobileMenuContent(currentRoute, closeButton, h)],
                 ),
               ]
             : [],
         ),
     },
-    toParentMessage: message => toMobileMenuDialogMessage(message),
+    toParentMessage: message =>
+      UiMessage.GotMobileMenuDialogMessage({ message }),
+  }),
+)
+
+const mobileMenuView = (model: Model, h: HtmlBuilder<Message>): Html =>
+  h.submodel({
+    slotId: 'mobile-menu',
+    model: model.uiModel,
+    view: mobileMenuDialogView,
+    viewInputs: { currentRoute: model.route },
+    toParentMessage: toUiMessage,
   })
 
 const homeView = (h: HtmlBuilder<Message>): Html =>
@@ -626,9 +638,9 @@ const contentView = (model: Model, h: HtmlBuilder<Message>): Html => {
 }
 
 const routeTitle = (route: Model['route']): string =>
-  M.value(route).pipe(
-    M.tag('Home', () => 'Foldkit UI Showcase'),
-    M.orElse(({ _tag }) => `${_tag} | Foldkit UI Showcase`),
+  Match.value(route).pipe(
+    Match.tag('Home', () => 'Foldkit UI Showcase'),
+    Match.orElse(({ _tag }) => `${_tag} | Foldkit UI Showcase`),
   )
 
 export const view = (model: Model, h: HtmlBuilder<Message>): Document => ({

package/dist/templates/examples/ui-showcase/src/scene.test.ts

@@ -71,7 +71,7 @@ describe('view', () => {
       { update, view },
       given(modelForRoute(AppRoute.HoverIntent())),
       expect(role('heading', { name: 'Hover Intent' })).toExist(),
-      expect(role('button', { name: 'Preview account' })).toExist(),
+      expect(role('button', { name: 'More information' })).toExist(),
     )
   })
 

package/dist/templates/examples/ui-showcase/src/ui/init.ts

@@ -20,7 +20,7 @@ import {
   VirtualList,
 } from '@foldkit/ui'
 
-import type { UiMessage } from './message'
+import type { Message as UiMessage } from './message'
 import type { UiModel } from './model'
 import { Toast } from './toast'
 
@@ -173,7 +173,6 @@ export const uiInit = (today: Calendar.CalendarDate): InitReturn => ({
       showDelay: 0,
     }),
     animationDemo: Animation.init({ id: 'animation-demo' }),
-    isAnimationDemoShowing: false,
     virtualListDemo: VirtualList.init({
       id: 'virtual-list-demo',
       rowHeightPx: 56,

package/dist/templates/examples/ui-showcase/src/ui/message.ts

@@ -1,4 +1,4 @@
-import { Schema as S } from 'effect'
+import { Schema } from 'effect'
 import { defineMessageUnion } from 'foldkit/message'
 
 import {
@@ -22,21 +22,20 @@ import {
 
 import { Toast } from './toast'
 
-export const UiMessage = defineMessageUnion({
+export const Message = defineMessageUnion({
   GotMobileMenuDialogMessage: { message: Dialog.Message },
-  ClickedOpenMobileMenu: {},
   ClickedButtonDemo: {},
   GotAnimationDemoMessage: { message: Animation.Message },
   ToggledAnimationDemo: {},
-  UpdatedInputDemoValue: { value: S.String },
-  UpdatedTextareaDemoValue: { value: S.String },
-  UpdatedFieldsetInputValue: { value: S.String },
-  UpdatedFieldsetTextareaValue: { value: S.String },
-  ToggledFieldsetCheckboxDemo: { isChecked: S.Boolean },
-  ToggledCheckboxBasicDemo: { isChecked: S.Boolean },
-  ToggledCheckboxAllDemo: { isChecked: S.Boolean },
-  ToggledCheckboxOptionADemo: { isChecked: S.Boolean },
-  ToggledCheckboxOptionBDemo: { isChecked: S.Boolean },
+  UpdatedInputDemoValue: { value: Schema.String },
+  UpdatedTextareaDemoValue: { value: Schema.String },
+  UpdatedFieldsetInputValue: { value: Schema.String },
+  UpdatedFieldsetTextareaValue: { value: Schema.String },
+  ToggledFieldsetCheckboxDemo: { isChecked: Schema.Boolean },
+  ToggledCheckboxBasicDemo: { isChecked: Schema.Boolean },
+  ToggledCheckboxAllDemo: { isChecked: Schema.Boolean },
+  ToggledCheckboxOptionADemo: { isChecked: Schema.Boolean },
+  ToggledCheckboxOptionBDemo: { isChecked: Schema.Boolean },
   GotComboboxDemoMessage: { message: Combobox.Message },
   GotComboboxNullableDemoMessage: { message: Combobox.Message },
   GotComboboxMultiDemoMessage: { message: Combobox.Message },
@@ -53,13 +52,13 @@ export const UiMessage = defineMessageUnion({
   ClickedOpenAnimatedDialog: {},
   ClickedEditFilters: {},
   ClickedOpenProjectSettings: {},
-  ToggledDisclosureBasicDemo: { isOpen: S.Boolean },
-  ToggledDisclosureAnimatedDemo: { isOpen: S.Boolean },
+  ToggledDisclosureBasicDemo: { isOpen: Schema.Boolean },
+  ToggledDisclosureAnimatedDemo: { isOpen: Schema.Boolean },
   GotCalendarBasicDemoMessage: { message: Calendar.Message },
   GotDatePickerBasicDemoMessage: { message: DatePicker.Message },
   GotDragAndDropDemoMessage: { message: DragAndDrop.Message },
   GotFileDropBasicDemoMessage: { message: FileDrop.Message },
-  ClickedRemoveFileDropDemoFile: { fileIndex: S.Number },
+  ClickedRemoveFileDropDemoFile: { fileIndex: Schema.Number },
   GotHoverIntentDemoMessage: { message: HoverIntent.Message },
   GotListboxDemoMessage: { message: Listbox.Message },
   GotListboxMultiDemoMessage: { message: Listbox.Message },
@@ -72,10 +71,10 @@ export const UiMessage = defineMessageUnion({
   GotPopoverNestedChildDemoMessage: { message: Popover.Message },
   GotVerticalRadioGroupDemoMessage: { message: RadioGroup.Message },
   GotHorizontalRadioGroupDemoMessage: { message: RadioGroup.Message },
-  UpdatedSelectDemoValue: { value: S.String },
+  UpdatedSelectDemoValue: { value: Schema.String },
   GotSliderRatingDemoMessage: { message: Slider.Message },
   GotSliderVolumeDemoMessage: { message: Slider.Message },
-  ToggledSwitchDemo: { isChecked: S.Boolean },
+  ToggledSwitchDemo: { isChecked: Schema.Boolean },
   GotHorizontalTabsDemoMessage: { message: Tabs.Message },
   GotVerticalTabsDemoMessage: { message: Tabs.Message },
   GotToastDemoMessage: { message: Toast.Message },
@@ -93,4 +92,4 @@ export const UiMessage = defineMessageUnion({
   ClickedVirtualListVariableScrollToMiddle: {},
 })
 
-export type UiMessage = typeof UiMessage.Type
+export type Message = typeof Message.Type

package/dist/templates/examples/ui-showcase/src/ui/model.ts

@@ -1,4 +1,4 @@
-import { Schema as S } from 'effect'
+import { Schema } from 'effect'
 import { File, Calendar as FoldkitCalendar } from 'foldkit'
 
 import {
@@ -22,13 +22,13 @@ import {
 
 import { Toast } from './toast'
 
-export const Plan = S.Literals(['Startup', 'Business', 'Enterprise'])
+export const Plan = Schema.Literals(['Startup', 'Business', 'Enterprise'])
 export type Plan = typeof Plan.Type
 
-export const DemoTab = S.Literals(['Foldkit', 'React', 'Elm'])
+export const DemoTab = Schema.Literals(['Foldkit', 'React', 'Elm'])
 export type DemoTab = typeof DemoTab.Type
 
-export const City = S.Literals([
+export const City = Schema.Literals([
   'Johannesburg',
   'Kyiv',
   'Oxford',
@@ -39,7 +39,7 @@ export const City = S.Literals([
 ])
 export type City = typeof City.Type
 
-export const ListboxItem = S.Literals([
+export const ListboxItem = Schema.Literals([
   'Michael Bluth',
   'Lindsay Funke',
   'Gob Bluth',
@@ -51,64 +51,68 @@ export const ListboxItem = S.Literals([
 ])
 export type ListboxItem = typeof ListboxItem.Type
 
-export const DemoCard = S.Struct({
-  id: S.String,
-  label: S.String,
+export const DemoCard = Schema.Struct({
+  id: Schema.String,
+  label: Schema.String,
 })
 export type DemoCard = typeof DemoCard.Type
 
-export const DemoColumn = S.Struct({
-  id: S.String,
-  label: S.String,
-  cards: S.Array(DemoCard),
+export const DemoColumn = Schema.Struct({
+  id: Schema.String,
+  label: Schema.String,
+  cards: Schema.Array(DemoCard),
 })
 export type DemoColumn = typeof DemoColumn.Type
 
-export const UiModel = S.Struct({
+export const UiModel = Schema.Struct({
   mobileMenuDialog: Dialog.Model,
-  buttonClickCount: S.Number,
-  inputDemoValue: S.String,
-  textareaDemoValue: S.String,
-  fieldsetInputValue: S.String,
-  fieldsetTextareaValue: S.String,
-  isFieldsetCheckboxDemoChecked: S.Boolean,
+  buttonClickCount: Schema.Number,
+  inputDemoValue: Schema.String,
+  textareaDemoValue: Schema.String,
+  fieldsetInputValue: Schema.String,
+  fieldsetTextareaValue: Schema.String,
+  isFieldsetCheckboxDemoChecked: Schema.Boolean,
   calendarBasicDemo: Calendar.Model,
-  maybeCalendarBasicDemoSelectedDate: S.Option(FoldkitCalendar.CalendarDate),
+  maybeCalendarBasicDemoSelectedDate: Schema.Option(
+    FoldkitCalendar.CalendarDate,
+  ),
   datePickerBasicDemo: DatePicker.Model,
-  maybeDatePickerBasicDemoSelectedDate: S.Option(FoldkitCalendar.CalendarDate),
-  isCheckboxBasicDemoChecked: S.Boolean,
-  isCheckboxOptionADemoChecked: S.Boolean,
-  isCheckboxOptionBDemoChecked: S.Boolean,
+  maybeDatePickerBasicDemoSelectedDate: Schema.Option(
+    FoldkitCalendar.CalendarDate,
+  ),
+  isCheckboxBasicDemoChecked: Schema.Boolean,
+  isCheckboxOptionADemoChecked: Schema.Boolean,
+  isCheckboxOptionBDemoChecked: Schema.Boolean,
   comboboxDemo: Combobox.Model,
-  maybeComboboxDemoSelectedCity: S.Option(City),
+  maybeComboboxDemoSelectedCity: Schema.Option(City),
   comboboxNullableDemo: Combobox.Model,
-  maybeComboboxNullableDemoSelectedCity: S.Option(City),
+  maybeComboboxNullableDemoSelectedCity: Schema.Option(City),
   comboboxMultiDemo: Combobox.Multi.Model,
-  comboboxMultiDemoSelectedCities: S.Array(City),
+  comboboxMultiDemoSelectedCities: Schema.Array(City),
   comboboxPlacementLockDemo: Combobox.Model,
-  maybeComboboxPlacementLockDemoSelectedCity: S.Option(City),
+  maybeComboboxPlacementLockDemoSelectedCity: Schema.Option(City),
   comboboxSelectOnFocusDemo: Combobox.Model,
-  maybeComboboxSelectOnFocusDemoSelectedCity: S.Option(City),
+  maybeComboboxSelectOnFocusDemoSelectedCity: Schema.Option(City),
   dialogDemo: Dialog.Model,
   dialogAnimatedDemo: Dialog.Model,
   overlayDialogDemo: Dialog.Model,
   overlayComboboxDemo: Combobox.Model,
-  maybeOverlayComboboxDemoSelectedCity: S.Option(City),
+  maybeOverlayComboboxDemoSelectedCity: Schema.Option(City),
   nestedDialogParentDemo: Dialog.Model,
   nestedDialogChildDemo: Dialog.Model,
-  isDisclosureBasicDemoOpen: S.Boolean,
-  isDisclosureAnimatedDemoOpen: S.Boolean,
+  isDisclosureBasicDemoOpen: Schema.Boolean,
+  isDisclosureAnimatedDemoOpen: Schema.Boolean,
   dragAndDropDemo: DragAndDrop.Model,
-  dragAndDropDemoColumns: S.Array(DemoColumn),
+  dragAndDropDemoColumns: Schema.Array(DemoColumn),
   fileDropBasicDemo: FileDrop.Model,
-  fileDropBasicDemoFiles: S.Array(File.File),
+  fileDropBasicDemoFiles: Schema.Array(File.File),
   hoverIntentDemo: HoverIntent.Model,
   listboxDemo: Listbox.Model,
-  maybeListboxDemoSelectedItem: S.Option(ListboxItem),
+  maybeListboxDemoSelectedItem: Schema.Option(ListboxItem),
   listboxMultiDemo: Listbox.Multi.Model,
-  listboxMultiDemoSelectedItems: S.Array(ListboxItem),
+  listboxMultiDemoSelectedItems: Schema.Array(ListboxItem),
   listboxGroupedDemo: Listbox.Model,
-  maybeListboxGroupedDemoSelectedItem: S.Option(S.String),
+  maybeListboxGroupedDemoSelectedItem: Schema.Option(Schema.String),
   menuBasicDemo: Menu.Model,
   menuAnimatedDemo: Menu.Model,
   popoverBasicDemo: Popover.Model,
@@ -116,15 +120,15 @@ export const UiModel = S.Struct({
   popoverNestedParentDemo: Popover.Model,
   popoverNestedChildDemo: Popover.Model,
   verticalRadioGroupDemo: RadioGroup.Model,
-  verticalRadioGroupDemoValue: S.Option(Plan),
+  verticalRadioGroupDemoValue: Schema.Option(Plan),
   horizontalRadioGroupDemo: RadioGroup.Model,
-  horizontalRadioGroupDemoValue: S.Option(Plan),
-  selectDemoValue: S.String,
+  horizontalRadioGroupDemoValue: Schema.Option(Plan),
+  selectDemoValue: Schema.String,
   sliderRatingDemo: Slider.Model,
-  sliderRatingValue: S.Number,
+  sliderRatingValue: Schema.Number,
   sliderVolumeDemo: Slider.Model,
-  sliderVolumeValue: S.Number,
-  isSwitchDemoChecked: S.Boolean,
+  sliderVolumeValue: Schema.Number,
+  isSwitchDemoChecked: Schema.Boolean,
   horizontalTabsDemo: Tabs.Model,
   horizontalTabsDemoTab: DemoTab,
   verticalTabsDemo: Tabs.Model,
@@ -133,7 +137,6 @@ export const UiModel = S.Struct({
   tooltipBasicDemo: Tooltip.Model,
   tooltipNoDelayDemo: Tooltip.Model,
   animationDemo: Animation.Model,
-  isAnimationDemoShowing: S.Boolean,
   virtualListDemo: VirtualList.Model,
   virtualListVariableDemo: VirtualList.Model,
 })

package/dist/templates/examples/ui-showcase/src/ui/subscriptions.ts

@@ -2,7 +2,7 @@ import { Subscription } from 'foldkit'
 
 import { DragAndDrop, Slider, VirtualList } from '@foldkit/ui'
 
-import { UiMessage } from './message'
+import { Message as UiMessage } from './message'
 import type { UiModel } from './model'
 
 const dragAndDropSubscriptions = Subscription.lift({

package/dist/templates/examples/ui-showcase/src/ui/toast.ts

@@ -1,12 +1,12 @@
-import { Schema as S } from 'effect'
+import { Schema } from 'effect'
 
 import { Toast as UiToast } from '@foldkit/ui'
 
 /** Payload shape for the showcase's toast stack. Consumer decides what goes
  *  in each entry; the Toast component owns only lifecycle and a11y. */
-export const ToastPayload = S.Struct({
-  title: S.String,
-  maybeDescription: S.Option(S.String),
+export const ToastPayload = Schema.Struct({
+  title: Schema.String,
+  maybeDescription: Schema.Option(Schema.String),
 })
 export type ToastPayload = typeof ToastPayload.Type