create-foldkit-app 0.27.3 → 0.28.0

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

@@ -0,0 +1,102 @@
+import { Calendar } from 'foldkit'
+import { expect, given, role, scene, text } from 'foldkit/scene'
+import { describe, test } from 'vitest'
+
+import {
+  AnimationRoute,
+  ButtonRoute,
+  CheckboxRoute,
+  DisclosureRoute,
+  FieldsetRoute,
+  HomeRoute,
+  InputRoute,
+  type Model,
+  NotFoundRoute,
+  RadioGroupRoute,
+  SelectRoute,
+  SwitchRoute,
+  TextareaRoute,
+  update,
+  view,
+} from './main'
+import { uiInit } from './ui/init'
+
+const today = Calendar.make(2026, 4, 16)
+const [initialUiModel] = uiInit(today)
+
+const modelForRoute = (route: Model['route']): Model => ({
+  route,
+  uiModel: initialUiModel,
+})
+
+const homeModel = modelForRoute(HomeRoute())
+
+describe('view', () => {
+  test('the sidebar nav lists a sample of every component link', () => {
+    scene(
+      { update, view },
+      given(homeModel),
+      expect(role('link', { name: 'Button' })).toExist(),
+      expect(role('link', { name: 'Calendar' })).toExist(),
+      expect(role('link', { name: 'Dialog' })).toExist(),
+      expect(role('link', { name: 'Toast' })).toExist(),
+      expect(role('link', { name: 'Virtual List' })).toExist(),
+    )
+  })
+
+  test('the Home route shows the showcase heading and description', () => {
+    scene(
+      { update, view },
+      given(homeModel),
+      expect(role('heading', { name: 'Foldkit UI Showcase' })).toExist(),
+      expect(
+        text('This is a showcase of every Foldkit UI component.', {
+          exact: false,
+        }),
+      ).toExist(),
+    )
+  })
+
+  test('simple component routes render the sidebar nav', () => {
+    const routes: ReadonlyArray<Model['route']> = [
+      ButtonRoute(),
+      CheckboxRoute(),
+      DisclosureRoute(),
+      FieldsetRoute(),
+      InputRoute(),
+      RadioGroupRoute(),
+      SelectRoute(),
+      SwitchRoute(),
+      TextareaRoute(),
+      AnimationRoute(),
+    ]
+
+    routes.forEach(route => {
+      scene(
+        { update, view },
+        given(modelForRoute(route)),
+        expect(role('link', { name: 'Button' })).toExist(),
+      )
+    })
+  })
+
+  test('the Disclosure panel stays mounted while collapsed so it can animate', () => {
+    scene(
+      { update, view },
+      given(modelForRoute(DisclosureRoute())),
+      expect(
+        text('Foldkit is an Elm-inspired UI framework', { exact: false }),
+      ).toExist(),
+    )
+  })
+
+  test('the NotFound route renders the 404 panel and a Go Home link', () => {
+    scene(
+      { update, view },
+      given(modelForRoute(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: 'Go Home' })).toExist(),
+    )
+  })
+})

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

@@ -0,0 +1,128 @@
+import { Option } from 'effect'
+import { Calendar } from 'foldkit'
+import { Command, given, message, model, story } from 'foldkit/story'
+import { fromString } from 'foldkit/url'
+import { describe, expect, test } from 'vitest'
+
+import { Dialog } from '@foldkit/ui'
+import { Message as DialogMessage } from '@foldkit/ui/dialog'
+
+import { HomeRoute, Message, type Model, update } from './main'
+import { uiInit } from './ui/init'
+
+const today = Calendar.make(2026, 4, 16)
+const [initialUiModel] = uiInit(today)
+
+const initialModel: Model = {
+  route: HomeRoute(),
+  uiModel: initialUiModel,
+}
+
+const urlOrThrow = (raw: string) =>
+  Option.getOrThrowWith(
+    fromString(raw),
+    () => new Error(`Failed to parse url: ${raw}`),
+  )
+
+describe('update', () => {
+  describe('routing', () => {
+    test('the root URL resolves to Home', () => {
+      story(
+        update,
+        given(initialModel),
+        message(Message.ChangedUrl({ url: urlOrThrow('http://localhost/') })),
+        model(model => {
+          expect(model.route._tag).toBe('Home')
+        }),
+      )
+    })
+
+    test('/button resolves to Button', () => {
+      story(
+        update,
+        given(initialModel),
+        message(
+          Message.ChangedUrl({ url: urlOrThrow('http://localhost/button') }),
+        ),
+        model(model => {
+          expect(model.route._tag).toBe('Button')
+        }),
+      )
+    })
+
+    test('/calendar resolves to Calendar', () => {
+      story(
+        update,
+        given(initialModel),
+        message(
+          Message.ChangedUrl({ url: urlOrThrow('http://localhost/calendar') }),
+        ),
+        model(model => {
+          expect(model.route._tag).toBe('Calendar')
+        }),
+      )
+    })
+
+    test('/date-picker resolves to DatePicker', () => {
+      story(
+        update,
+        given(initialModel),
+        message(
+          Message.ChangedUrl({
+            url: urlOrThrow('http://localhost/date-picker'),
+          }),
+        ),
+        model(model => {
+          expect(model.route._tag).toBe('DatePicker')
+        }),
+      )
+    })
+
+    test('an unknown path resolves to NotFound', () => {
+      story(
+        update,
+        given(initialModel),
+        message(
+          Message.ChangedUrl({ url: urlOrThrow('http://localhost/unknown') }),
+        ),
+        model(model => {
+          if (model.route._tag === 'NotFound') {
+            expect(model.route.path).toBe('/unknown')
+          } else {
+            throw new Error('Expected NotFound')
+          }
+        }),
+      )
+    })
+  })
+
+  describe('mobile menu', () => {
+    test('navigating to a new URL closes the mobile menu dialog', () => {
+      const modelWithOpenMenu: Model = {
+        ...initialModel,
+        uiModel: {
+          ...initialModel.uiModel,
+          mobileMenuDialog: Dialog.init({
+            id: 'mobile-menu',
+            isOpen: true,
+          }),
+        },
+      }
+
+      story(
+        update,
+        given(modelWithOpenMenu),
+        message(
+          Message.ChangedUrl({ url: urlOrThrow('http://localhost/button') }),
+        ),
+        Command.resolve(
+          Dialog.CloseDialog,
+          DialogMessage.CompletedCloseDialog(),
+        ),
+        model(model => {
+          expect(model.uiModel.mobileMenuDialog.isOpen).toBe(false)
+        }),
+      )
+    })
+  })
+})

package/dist/templates/examples/ui-showcase/src/styles.css

@@ -0,0 +1,21 @@
+@import 'tailwindcss';
+@source "../../../packages/foldkit/src";
+
+@layer base {
+  [tabindex='-1']:focus {
+    outline: none;
+  }
+}
+
+@theme {
+  --color-accent-50: #eef2ff;
+  --color-accent-100: #e0e7ff;
+  --color-accent-200: #c7d2fe;
+  --color-accent-300: #a5b4fc;
+  --color-accent-400: #818cf8;
+  --color-accent-500: #6366f1;
+  --color-accent-600: #4f46e5;
+  --color-accent-700: #4338ca;
+  --color-accent-800: #3730a3;
+  --color-accent-900: #312e81;
+}

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

@@ -0,0 +1,185 @@
+import { Option } from 'effect'
+import { Calendar, Command } from 'foldkit'
+
+import {
+  Animation,
+  Combobox,
+  DatePicker,
+  Dialog,
+  DragAndDrop,
+  FileDrop,
+  Listbox,
+  Menu,
+  Popover,
+  RadioGroup,
+  Slider,
+  Tabs,
+  Tooltip,
+  Calendar as UiCalendar,
+  VirtualList,
+} from '@foldkit/ui'
+
+import type { UiMessage } from './message'
+import type { UiModel } from './model'
+import { Toast } from './toast'
+
+export const uiInit = (
+  today: Calendar.CalendarDate,
+): [UiModel, ReadonlyArray<Command.Command<UiMessage>>] => [
+  {
+    mobileMenuDialog: Dialog.init({ id: 'mobile-menu' }),
+    buttonClickCount: 0,
+    inputDemoValue: '',
+    textareaDemoValue: '',
+    fieldsetInputValue: '',
+    fieldsetTextareaValue: '',
+    isFieldsetCheckboxDemoChecked: false,
+    calendarBasicDemo: UiCalendar.init({
+      id: 'calendar-basic-demo',
+      today,
+      minDate: Calendar.subtractYears(today, 1),
+      maxDate: Calendar.addYears(today, 1),
+    }),
+    maybeCalendarBasicDemoSelectedDate: Option.none(),
+    datePickerBasicDemo: DatePicker.init({
+      id: 'date-picker-basic-demo',
+      today,
+      minDate: Calendar.subtractYears(today, 1),
+      maxDate: Calendar.addYears(today, 1),
+    }),
+    maybeDatePickerBasicDemoSelectedDate: Option.none(),
+    isCheckboxBasicDemoChecked: false,
+    isCheckboxOptionADemoChecked: false,
+    isCheckboxOptionBDemoChecked: false,
+    comboboxDemo: Combobox.init({ id: 'combobox-demo' }),
+    maybeComboboxDemoSelectedCity: Option.none(),
+    comboboxNullableDemo: Combobox.init({
+      id: 'combobox-nullable-demo',
+      nullable: true,
+    }),
+    maybeComboboxNullableDemoSelectedCity: Option.none(),
+    comboboxMultiDemo: Combobox.Multi.init({
+      id: 'combobox-multi-demo',
+    }),
+    comboboxMultiDemoSelectedCities: [],
+    comboboxPlacementLockDemo: Combobox.init({
+      id: 'combobox-placement-lock-demo',
+    }),
+    maybeComboboxPlacementLockDemoSelectedCity: Option.none(),
+    comboboxSelectOnFocusDemo: Combobox.init({
+      id: 'combobox-select-on-focus-demo',
+      selectInputOnFocus: true,
+    }),
+    maybeComboboxSelectOnFocusDemoSelectedCity: Option.none(),
+    dialogDemo: Dialog.init({ id: 'dialog-demo' }),
+    dialogAnimatedDemo: Dialog.init({
+      id: 'dialog-animated-demo',
+      isAnimated: true,
+    }),
+    overlayDialogDemo: Dialog.init({ id: 'overlay-dialog-demo' }),
+    overlayComboboxDemo: Combobox.init({ id: 'overlay-combobox-demo' }),
+    maybeOverlayComboboxDemoSelectedCity: Option.none(),
+    nestedDialogParentDemo: Dialog.init({
+      id: 'nested-dialog-parent-demo',
+    }),
+    nestedDialogChildDemo: Dialog.init({ id: 'nested-dialog-child-demo' }),
+    isDisclosureBasicDemoOpen: false,
+    isDisclosureAnimatedDemoOpen: false,
+    dragAndDropDemo: DragAndDrop.init({ id: 'drag-and-drop-demo' }),
+    dragAndDropDemoColumns: [
+      {
+        id: 'backlog',
+        label: 'Backlog',
+        cards: [
+          { id: 'card-1', label: 'Design API' },
+          { id: 'card-2', label: 'Write tests' },
+          { id: 'card-3', label: 'Build docs' },
+        ],
+      },
+      {
+        id: 'done',
+        label: 'Done',
+        cards: [
+          { id: 'card-4', label: 'Set up repo' },
+          { id: 'card-5', label: 'Add CI' },
+        ],
+      },
+    ],
+    fileDropBasicDemo: FileDrop.init({ id: 'file-drop-basic-demo' }),
+    fileDropBasicDemoFiles: [],
+    listboxDemo: Listbox.init({ id: 'listbox-demo' }),
+    maybeListboxDemoSelectedItem: Option.none(),
+    listboxMultiDemo: Listbox.Multi.init({
+      id: 'listbox-multi-demo',
+    }),
+    listboxMultiDemoSelectedItems: [],
+    listboxGroupedDemo: Listbox.init({
+      id: 'listbox-grouped-demo',
+    }),
+    maybeListboxGroupedDemoSelectedItem: Option.none(),
+    menuBasicDemo: Menu.init({ id: 'menu-basic-demo' }),
+    menuAnimatedDemo: Menu.init({
+      id: 'menu-animated-demo',
+      isAnimated: true,
+    }),
+    popoverBasicDemo: Popover.init({ id: 'popover-basic-demo' }),
+    popoverAnimatedDemo: Popover.init({
+      id: 'popover-animated-demo',
+      isAnimated: true,
+    }),
+    popoverNestedParentDemo: Popover.init({
+      id: 'popover-nested-parent-demo',
+      contentFocus: true,
+    }),
+    popoverNestedChildDemo: Popover.init({
+      id: 'popover-nested-child-demo',
+    }),
+    verticalRadioGroupDemo: RadioGroup.init({
+      id: 'vertical-radio-group-demo',
+    }),
+    verticalRadioGroupDemoValue: Option.none(),
+    horizontalRadioGroupDemo: RadioGroup.init({
+      id: 'horizontal-radio-group-demo',
+    }),
+    horizontalRadioGroupDemoValue: Option.none(),
+    selectDemoValue: 'us',
+    sliderRatingDemo: Slider.init({
+      id: 'slider-rating-demo',
+      min: 0,
+      max: 10,
+      step: 1,
+    }),
+    sliderRatingValue: 3,
+    sliderVolumeDemo: Slider.init({
+      id: 'slider-volume-demo',
+      min: 0,
+      max: 1,
+      step: 0.05,
+    }),
+    sliderVolumeValue: 0.5,
+    isSwitchDemoChecked: false,
+    horizontalTabsDemo: Tabs.init({ id: 'horizontal-tabs-demo' }),
+    horizontalTabsDemoTab: 'Foldkit',
+    verticalTabsDemo: Tabs.init({
+      id: 'vertical-tabs-demo',
+    }),
+    verticalTabsDemoTab: 'Foldkit',
+    toastDemo: Toast.init({ id: 'toast-demo' }),
+    tooltipBasicDemo: Tooltip.init({ id: 'tooltip-basic-demo' }),
+    tooltipNoDelayDemo: Tooltip.init({
+      id: 'tooltip-no-delay-demo',
+      showDelay: 0,
+    }),
+    animationDemo: Animation.init({ id: 'animation-demo' }),
+    isAnimationDemoShowing: false,
+    virtualListDemo: VirtualList.init({
+      id: 'virtual-list-demo',
+      rowHeightPx: 56,
+    }),
+    virtualListVariableDemo: VirtualList.init({
+      id: 'virtual-list-variable-demo',
+      rowHeightPx: 56,
+    }),
+  },
+  [],
+]

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

@@ -0,0 +1,164 @@
+import { Schema as S } from 'effect'
+import { defineMessageUnion } from 'foldkit/message'
+
+import {
+  Animation,
+  Calendar,
+  Combobox,
+  DatePicker,
+  Dialog,
+  DragAndDrop,
+  FileDrop,
+  Listbox,
+  Menu,
+  Popover,
+  RadioGroup,
+  Slider,
+  Tabs,
+  Tooltip,
+  VirtualList,
+} from '@foldkit/ui'
+
+import { Toast } from './toast'
+
+export const UiMessage = 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 },
+  GotComboboxDemoMessage: { message: Combobox.Message },
+  GotComboboxNullableDemoMessage: { message: Combobox.Message },
+  GotComboboxMultiDemoMessage: { message: Combobox.Message },
+  GotComboboxPlacementLockDemoMessage: { message: Combobox.Message },
+  GotComboboxSelectOnFocusDemoMessage: { message: Combobox.Message },
+  GotDialogDemoMessage: { message: Dialog.Message },
+  GotDialogAnimatedDemoMessage: { message: Dialog.Message },
+  GotOverlayDialogDemoMessage: { message: Dialog.Message },
+  GotOverlayComboboxDemoMessage: { message: Combobox.Message },
+  GotNestedDialogParentDemoMessage: { message: Dialog.Message },
+  GotNestedDialogChildDemoMessage: { message: Dialog.Message },
+  ClickedDeleteProject: {},
+  ClickedOpenDialog: {},
+  ClickedOpenAnimatedDialog: {},
+  ClickedEditFilters: {},
+  ClickedOpenProjectSettings: {},
+  ToggledDisclosureBasicDemo: { isOpen: S.Boolean },
+  ToggledDisclosureAnimatedDemo: { isOpen: S.Boolean },
+  GotCalendarBasicDemoMessage: { message: Calendar.Message },
+  GotDatePickerBasicDemoMessage: { message: DatePicker.Message },
+  GotDragAndDropDemoMessage: { message: DragAndDrop.Message },
+  GotFileDropBasicDemoMessage: { message: FileDrop.Message },
+  ClickedRemoveFileDropDemoFile: { fileIndex: S.Number },
+  GotListboxDemoMessage: { message: Listbox.Message },
+  GotListboxMultiDemoMessage: { message: Listbox.Message },
+  GotListboxGroupedDemoMessage: { message: Listbox.Message },
+  GotMenuBasicDemoMessage: { message: Menu.Message },
+  GotMenuAnimatedDemoMessage: { message: Menu.Message },
+  GotPopoverBasicDemoMessage: { message: Popover.Message },
+  GotPopoverAnimatedDemoMessage: { message: Popover.Message },
+  GotPopoverNestedParentDemoMessage: { message: Popover.Message },
+  GotPopoverNestedChildDemoMessage: { message: Popover.Message },
+  GotVerticalRadioGroupDemoMessage: { message: RadioGroup.Message },
+  GotHorizontalRadioGroupDemoMessage: { message: RadioGroup.Message },
+  UpdatedSelectDemoValue: { value: S.String },
+  GotSliderRatingDemoMessage: { message: Slider.Message },
+  GotSliderVolumeDemoMessage: { message: Slider.Message },
+  ToggledSwitchDemo: { isChecked: S.Boolean },
+  GotHorizontalTabsDemoMessage: { message: Tabs.Message },
+  GotVerticalTabsDemoMessage: { message: Tabs.Message },
+  GotToastDemoMessage: { message: Toast.Message },
+  ClickedShowInfoToast: {},
+  ClickedShowSuccessToast: {},
+  ClickedShowWarningToast: {},
+  ClickedShowErrorToast: {},
+  ClickedShowStickyToast: {},
+  ClickedDismissAllToasts: {},
+  GotTooltipBasicDemoMessage: { message: Tooltip.Message },
+  GotTooltipNoDelayDemoMessage: { message: Tooltip.Message },
+  GotVirtualListDemoMessage: { message: VirtualList.Message },
+  ClickedVirtualListScrollToMiddle: {},
+  GotVirtualListVariableDemoMessage: { message: VirtualList.Message },
+  ClickedVirtualListVariableScrollToMiddle: {},
+})
+
+export const {
+  GotMobileMenuDialogMessage,
+  ClickedOpenMobileMenu,
+  ClickedButtonDemo,
+  GotAnimationDemoMessage,
+  ToggledAnimationDemo,
+  UpdatedInputDemoValue,
+  UpdatedTextareaDemoValue,
+  UpdatedFieldsetInputValue,
+  UpdatedFieldsetTextareaValue,
+  ToggledFieldsetCheckboxDemo,
+  ToggledCheckboxBasicDemo,
+  ToggledCheckboxAllDemo,
+  ToggledCheckboxOptionADemo,
+  ToggledCheckboxOptionBDemo,
+  GotComboboxDemoMessage,
+  GotComboboxNullableDemoMessage,
+  GotComboboxMultiDemoMessage,
+  GotComboboxPlacementLockDemoMessage,
+  GotComboboxSelectOnFocusDemoMessage,
+  GotDialogDemoMessage,
+  GotDialogAnimatedDemoMessage,
+  GotOverlayDialogDemoMessage,
+  GotOverlayComboboxDemoMessage,
+  GotNestedDialogParentDemoMessage,
+  GotNestedDialogChildDemoMessage,
+  ClickedDeleteProject,
+  ClickedOpenDialog,
+  ClickedOpenAnimatedDialog,
+  ClickedEditFilters,
+  ClickedOpenProjectSettings,
+  ToggledDisclosureBasicDemo,
+  ToggledDisclosureAnimatedDemo,
+  GotCalendarBasicDemoMessage,
+  GotDatePickerBasicDemoMessage,
+  GotDragAndDropDemoMessage,
+  GotFileDropBasicDemoMessage,
+  ClickedRemoveFileDropDemoFile,
+  GotListboxDemoMessage,
+  GotListboxMultiDemoMessage,
+  GotListboxGroupedDemoMessage,
+  GotMenuBasicDemoMessage,
+  GotMenuAnimatedDemoMessage,
+  GotPopoverBasicDemoMessage,
+  GotPopoverAnimatedDemoMessage,
+  GotPopoverNestedParentDemoMessage,
+  GotPopoverNestedChildDemoMessage,
+  GotVerticalRadioGroupDemoMessage,
+  GotHorizontalRadioGroupDemoMessage,
+  UpdatedSelectDemoValue,
+  GotSliderRatingDemoMessage,
+  GotSliderVolumeDemoMessage,
+  ToggledSwitchDemo,
+  GotHorizontalTabsDemoMessage,
+  GotVerticalTabsDemoMessage,
+  GotToastDemoMessage,
+  ClickedShowInfoToast,
+  ClickedShowSuccessToast,
+  ClickedShowWarningToast,
+  ClickedShowErrorToast,
+  ClickedShowStickyToast,
+  ClickedDismissAllToasts,
+  GotTooltipBasicDemoMessage,
+  GotTooltipNoDelayDemoMessage,
+  GotVirtualListDemoMessage,
+  ClickedVirtualListScrollToMiddle,
+  GotVirtualListVariableDemoMessage,
+  ClickedVirtualListVariableScrollToMiddle,
+} = UiMessage
+
+export type UiMessage = typeof UiMessage.Type