create-foldkit-app 0.27.3 → 0.28.0

package/dist/templates/examples/ui-showcase/src/ui/view/slider.ts

@@ -0,0 +1,135 @@
+import { Submodel } from 'foldkit'
+import type { Html } from 'foldkit/html'
+
+import { Slider } from '@foldkit/ui'
+
+import { UiMessage } from '../message'
+import type { UiModel } from '../model'
+
+const rowClassName = 'flex flex-col gap-2 w-full max-w-sm'
+
+const headerClassName =
+  'flex items-center justify-between text-sm text-gray-900'
+
+const labelClassName = 'font-medium cursor-pointer select-none'
+
+const valueClassName = 'tabular-nums text-gray-600'
+
+const rootClassName =
+  'relative h-6 w-full flex items-center select-none touch-none'
+
+const trackClassName = 'h-1.5 w-full rounded-full bg-gray-200'
+
+const filledTrackClassName = 'h-full rounded-full bg-accent-600'
+
+const thumbClassName =
+  'h-5 w-5 rounded-full bg-white border-2 border-accent-600 shadow cursor-grab focus:outline-none focus-visible:ring-2 focus-visible:ring-accent-600 focus-visible:ring-offset-2 data-[dragging]:cursor-grabbing'
+
+const ratingFormatted = (value: number): string => `${value} of 10`
+const volumeFormatted = (value: number): string => `${Math.round(value * 100)}%`
+
+export const view = Submodel.defineView<UiModel, UiMessage>(
+  (model, h): Html => {
+    return h.div(
+      [],
+      [
+        h.h2([h.Class('text-2xl font-bold text-gray-900 mb-6')], ['Slider']),
+        h.div(
+          [h.Class('flex flex-col gap-8 max-w-sm')],
+          [
+            h.submodel({
+              slotId: model.sliderRatingDemo.id,
+              model: model.sliderRatingDemo,
+              view: Slider.view,
+              viewInputs: {
+                value: model.sliderRatingValue,
+                formatValue: value => `${value} of 10`,
+                toView: attributes =>
+                  h.div(
+                    [h.Class(rowClassName)],
+                    [
+                      h.div(
+                        [h.Class(headerClassName)],
+                        [
+                          h.label(
+                            [...attributes.label, h.Class(labelClassName)],
+                            ['Rating'],
+                          ),
+                          h.span(
+                            [h.Class(valueClassName)],
+                            [ratingFormatted(model.sliderRatingValue)],
+                          ),
+                        ],
+                      ),
+                      h.div(
+                        [...attributes.root, h.Class(rootClassName)],
+                        [
+                          h.div(
+                            [...attributes.track, h.Class(trackClassName)],
+                            [
+                              h.div([
+                                ...attributes.filledTrack,
+                                h.Class(filledTrackClassName),
+                              ]),
+                            ],
+                          ),
+                          h.div([...attributes.thumb, h.Class(thumbClassName)]),
+                        ],
+                      ),
+                    ],
+                  ),
+              },
+              toParentMessage: message =>
+                UiMessage.GotSliderRatingDemoMessage({ message }),
+            }),
+            h.submodel({
+              slotId: model.sliderVolumeDemo.id,
+              model: model.sliderVolumeDemo,
+              view: Slider.view,
+              viewInputs: {
+                value: model.sliderVolumeValue,
+                formatValue: value => `${Math.round(value * 100)} percent`,
+                toView: attributes =>
+                  h.div(
+                    [h.Class(rowClassName)],
+                    [
+                      h.div(
+                        [h.Class(headerClassName)],
+                        [
+                          h.label(
+                            [...attributes.label, h.Class(labelClassName)],
+                            ['Volume'],
+                          ),
+                          h.span(
+                            [h.Class(valueClassName)],
+                            [volumeFormatted(model.sliderVolumeValue)],
+                          ),
+                        ],
+                      ),
+                      h.div(
+                        [...attributes.root, h.Class(rootClassName)],
+                        [
+                          h.div(
+                            [...attributes.track, h.Class(trackClassName)],
+                            [
+                              h.div([
+                                ...attributes.filledTrack,
+                                h.Class(filledTrackClassName),
+                              ]),
+                            ],
+                          ),
+                          h.div([...attributes.thumb, h.Class(thumbClassName)]),
+                        ],
+                      ),
+                    ],
+                  ),
+              },
+              toParentMessage: message =>
+                UiMessage.GotSliderVolumeDemoMessage({ message }),
+            }),
+          ],
+        ),
+      ],
+    )
+  },
+)

package/dist/templates/examples/ui-showcase/src/ui/view/switch.ts

@@ -0,0 +1,82 @@
+import clsx from 'clsx'
+import { Submodel } from 'foldkit'
+import type { Html, HtmlBuilder } from 'foldkit/html'
+
+import { Switch } from '@foldkit/ui'
+
+import { UiMessage } from '../message'
+import type { UiModel } from '../model'
+
+const SWITCH_DEMO_ID = 'switch-demo'
+
+const wrapperClassName = 'flex items-center gap-3'
+
+const buttonClassName =
+  'relative inline-flex h-6 w-11 shrink-0 items-center rounded-full transition-colors cursor-pointer bg-gray-300 data-[checked]:bg-accent-600 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50'
+
+const labelClassName =
+  'text-sm font-normal text-gray-900 cursor-pointer select-none'
+
+const descriptionClassName = 'text-sm text-gray-500'
+
+const knob = (isChecked: boolean, h: HtmlBuilder<UiMessage>): Html => {
+  return h.span([
+    h.Class(
+      clsx(
+        'pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow transition-transform',
+        isChecked ? 'translate-x-6' : 'translate-x-1',
+      ),
+    ),
+  ])
+}
+
+export const view = Submodel.defineView<UiModel, UiMessage>(
+  (model, h): Html => {
+    return h.div(
+      [],
+      [
+        h.h2([h.Class('text-2xl font-bold text-gray-900 mb-6')], ['Switch']),
+        h.div(
+          [h.Class('mt-4')],
+          [
+            Switch.view(
+              {
+                id: SWITCH_DEMO_ID,
+                isChecked: model.isSwitchDemoChecked,
+                onToggle: isChecked =>
+                  UiMessage.ToggledSwitchDemo({ isChecked }),
+                toView: attributes =>
+                  h.div(
+                    [h.Class(wrapperClassName)],
+                    [
+                      h.button(
+                        [...attributes.button, h.Class(buttonClassName)],
+                        [knob(model.isSwitchDemoChecked, h)],
+                      ),
+                      h.div(
+                        [],
+                        [
+                          h.label(
+                            [...attributes.label, h.Class(labelClassName)],
+                            ['Enable notifications'],
+                          ),
+                          h.p(
+                            [
+                              ...attributes.description,
+                              h.Class(descriptionClassName),
+                            ],
+                            ['Get notified when something important happens.'],
+                          ),
+                        ],
+                      ),
+                    ],
+                  ),
+              },
+              h,
+            ),
+          ],
+        ),
+      ],
+    )
+  },
+)

package/dist/templates/examples/ui-showcase/src/ui/view/tabs.ts

@@ -0,0 +1,187 @@
+import { Array, Match as M } from 'effect'
+import { Submodel } from 'foldkit'
+import type { Html, HtmlBuilder } from 'foldkit/html'
+
+import { Tabs } from '@foldkit/ui'
+
+import { UiMessage } from '../message'
+import { type DemoTab, type UiModel } from '../model'
+
+const demoTabs: ReadonlyArray<DemoTab> = ['Foldkit', 'React', 'Elm']
+
+export const DemoTabs = Tabs.create<DemoTab>()
+
+const horizontalButtonClassName =
+  'px-4 py-2 text-base font-normal cursor-pointer transition rounded-t-lg border border-gray-200 bg-gray-100 text-gray-500 hover:text-gray-700 hover:bg-gray-50 mb-[-1px] data-[selected]:relative data-[selected]:z-10 data-[selected]:bg-white data-[selected]:text-gray-900 data-[selected]:border-b-0'
+
+const horizontalPanelClassName =
+  'p-6 bg-white rounded-b-lg rounded-tr-lg border border-gray-200'
+
+const verticalButtonClassName =
+  'px-4 py-2 text-base font-normal text-left cursor-pointer transition rounded-l-lg border border-gray-200 bg-gray-100 text-gray-500 hover:text-gray-700 hover:bg-gray-50 mr-[-1px] data-[selected]:relative data-[selected]:z-10 data-[selected]:bg-white data-[selected]:text-gray-900 data-[selected]:border-r-0'
+
+const verticalPanelClassName =
+  'flex-1 p-6 bg-white rounded-r-lg rounded-bl-lg border border-gray-200'
+
+const foldkitPanel = (h: HtmlBuilder<UiMessage>): Html => {
+  return h.div(
+    [],
+    [
+      h.p(
+        [h.Class('text-gray-700 mb-3')],
+        [
+          h.span([h.Class('text-gray-900')], ['Model-View-Update']),
+          ' with Effect. A single immutable model holds all state, messages describe what happened, and a pure update function produces the next state.',
+        ],
+      ),
+      h.p(
+        [h.Class('text-gray-500 text-sm')],
+        [
+          'Composable Elm Architecture modules, Schema-typed state, and controlled side effects via Effect.',
+        ],
+      ),
+    ],
+  )
+}
+
+const reactPanel = (h: HtmlBuilder<UiMessage>): Html => {
+  return h.div(
+    [],
+    [
+      h.p(
+        [h.Class('text-gray-700 mb-3')],
+        [
+          h.span([h.Class('text-gray-900')], ['Component-based']),
+          ' with hooks for state and effects. Each component manages its own local state via useState and useReducer.',
+        ],
+      ),
+      h.p(
+        [h.Class('text-gray-500 text-sm')],
+        [
+          'JSX views, hooks-driven state, and implicit side effects via useEffect.',
+        ],
+      ),
+    ],
+  )
+}
+
+const elmPanel = (h: HtmlBuilder<UiMessage>): Html => {
+  return h.div(
+    [],
+    [
+      h.p(
+        [h.Class('text-gray-700 mb-3')],
+        [
+          h.span([h.Class('text-gray-900')], ['The original Elm Architecture']),
+          '. Elm pioneered the Model-View-Update architecture with a pure functional language. Foldkit brings these ideas to TypeScript.',
+        ],
+      ),
+      h.p(
+        [h.Class('text-gray-500 text-sm')],
+        [
+          'Pure functional language, Cmd/Sub for effects, and compiler-guaranteed correctness.',
+        ],
+      ),
+    ],
+  )
+}
+
+const panelFor = (tab: DemoTab, h: HtmlBuilder<UiMessage>): Html =>
+  M.value(tab).pipe(
+    M.when('Foldkit', () => foldkitPanel(h)),
+    M.when('React', () => reactPanel(h)),
+    M.when('Elm', () => elmPanel(h)),
+    M.exhaustive,
+  )
+
+export const view = Submodel.defineView<UiModel, UiMessage>(
+  (model, h): Html => {
+    return h.div(
+      [],
+      [
+        h.h2([h.Class('text-2xl font-bold text-gray-900 mb-6')], ['Tabs']),
+
+        h.h3(
+          [h.Class('text-lg font-semibold text-gray-900 mt-8 mb-4')],
+          ['Horizontal'],
+        ),
+        h.submodel({
+          slotId: 'horizontal-tabs-demo',
+          model: model.horizontalTabsDemo,
+          view: DemoTabs.view,
+          viewInputs: {
+            tabs: demoTabs,
+            selectedValue: model.horizontalTabsDemoTab,
+            ariaLabel: 'Framework comparison tabs',
+            toView: ({ tablist, tabs, activeIndex }) =>
+              h.div(
+                [],
+                [
+                  h.div(
+                    [...tablist, h.Class('flex')],
+                    tabs.map(tab =>
+                      h.button(
+                        [...tab.tab, h.Class(horizontalButtonClassName)],
+                        [h.span([], [tab.value])],
+                      ),
+                    ),
+                  ),
+                  ...Array.map(
+                    Array.filter(tabs, tab => tab.index === activeIndex),
+                    tab =>
+                      h.div(
+                        [...tab.panel, h.Class(horizontalPanelClassName)],
+                        [panelFor(tab.value, h)],
+                      ),
+                  ),
+                ],
+              ),
+          },
+          toParentMessage: message =>
+            UiMessage.GotHorizontalTabsDemoMessage({ message }),
+        }),
+
+        h.h3(
+          [h.Class('text-lg font-semibold text-gray-900 mt-8 mb-4')],
+          ['Vertical'],
+        ),
+        h.submodel({
+          slotId: 'vertical-tabs-demo',
+          model: model.verticalTabsDemo,
+          view: DemoTabs.view,
+          viewInputs: {
+            tabs: demoTabs,
+            selectedValue: model.verticalTabsDemoTab,
+            ariaLabel: 'Framework comparison tabs',
+            orientation: 'Vertical',
+            toView: ({ tablist, tabs, activeIndex }) =>
+              h.div(
+                [h.Class('flex')],
+                [
+                  h.div(
+                    [...tablist, h.Class('flex flex-col')],
+                    tabs.map(tab =>
+                      h.button(
+                        [...tab.tab, h.Class(verticalButtonClassName)],
+                        [h.span([], [tab.value])],
+                      ),
+                    ),
+                  ),
+                  ...Array.map(
+                    Array.filter(tabs, tab => tab.index === activeIndex),
+                    tab =>
+                      h.div(
+                        [...tab.panel, h.Class(verticalPanelClassName)],
+                        [panelFor(tab.value, h)],
+                      ),
+                  ),
+                ],
+              ),
+          },
+          toParentMessage: message =>
+            UiMessage.GotVerticalTabsDemoMessage({ message }),
+        }),
+      ],
+    )
+  },
+)

package/dist/templates/examples/ui-showcase/src/ui/view/textarea.ts

@@ -0,0 +1,99 @@
+import { Submodel } from 'foldkit'
+import type { Html } from 'foldkit/html'
+
+import { Textarea } from '@foldkit/ui'
+
+import { UiMessage } from '../message'
+import type { UiModel } from '../model'
+
+const textareaClassName =
+  'block w-full rounded-lg border border-gray-300 bg-white px-3 py-2.5 text-base text-gray-900 transition-colors placeholder:text-gray-400 focus:border-accent-500 focus:outline-none focus:ring-1 focus:ring-accent-500 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50'
+
+const labelClassName = 'block text-sm font-medium text-gray-700'
+
+const descriptionClassName = 'text-sm text-gray-500'
+
+export const view = Submodel.defineView<UiModel, UiMessage>(
+  (model, h): Html => {
+    return h.div(
+      [],
+      [
+        h.h2([h.Class('text-2xl font-bold text-gray-900 mb-6')], ['Textarea']),
+
+        h.h3(
+          [h.Class('text-lg font-semibold text-gray-900 mt-8 mb-4')],
+          ['Basic'],
+        ),
+        h.div(
+          [h.Class('flex flex-col items-start gap-2 max-w-sm')],
+          [
+            Textarea.view(
+              {
+                id: 'textarea-basic-demo',
+                value: model.textareaDemoValue,
+                onInput: value => UiMessage.UpdatedTextareaDemoValue({ value }),
+                placeholder: 'Tell us about yourself...',
+                rows: 4,
+                toView: attributes =>
+                  h.div(
+                    [h.Class('flex flex-col gap-1.5 w-full')],
+                    [
+                      h.label(
+                        [...attributes.label, h.Class(labelClassName)],
+                        ['Bio'],
+                      ),
+                      h.textarea([
+                        ...attributes.textarea,
+                        h.Class(textareaClassName),
+                      ]),
+                      h.span(
+                        [
+                          ...attributes.description,
+                          h.Class(descriptionClassName),
+                        ],
+                        ['A brief introduction about yourself.'],
+                      ),
+                    ],
+                  ),
+              },
+              h,
+            ),
+          ],
+        ),
+
+        h.h3(
+          [h.Class('text-lg font-semibold text-gray-900 mt-8 mb-4')],
+          ['Disabled'],
+        ),
+        Textarea.view(
+          {
+            id: 'textarea-disabled-demo',
+            isDisabled: true,
+            value:
+              "Mathematician and writer, known for work on Charles Babbage's Analytical Engine.",
+            rows: 3,
+            toView: attributes =>
+              h.div(
+                [h.Class('flex flex-col gap-1.5 max-w-sm')],
+                [
+                  h.label(
+                    [...attributes.label, h.Class(labelClassName)],
+                    ['Bio'],
+                  ),
+                  h.textarea([
+                    ...attributes.textarea,
+                    h.Class(textareaClassName),
+                  ]),
+                  h.span(
+                    [...attributes.description, h.Class(descriptionClassName)],
+                    ['This textarea is disabled.'],
+                  ),
+                ],
+              ),
+          },
+          h,
+        ),
+      ],
+    )
+  },
+)

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

@@ -0,0 +1,165 @@
+import { Match as M, Option } from 'effect'
+import { Submodel } from 'foldkit'
+import type { Html, HtmlBuilder } from 'foldkit/html'
+
+import type { EntryHandlers, Variant } from '@foldkit/ui/toast'
+
+import * as Icon from '../../icon'
+import { UiMessage } from '../message'
+import type { UiModel } from '../model'
+import { Toast } from '../toast'
+
+type Entry = typeof Toast.Entry.Type
+
+const variantClassName = (variant: Variant): string =>
+  M.value(variant).pipe(
+    M.when('Info', () => 'border-gray-300 bg-white text-gray-900'),
+    M.when(
+      'Success',
+      () => 'border-emerald-300 bg-emerald-50 text-emerald-900',
+    ),
+    M.when('Warning', () => 'border-amber-300 bg-amber-50 text-amber-900'),
+    M.when('Error', () => 'border-red-300 bg-red-50 text-red-900'),
+    M.exhaustive,
+  )
+
+const entryClassName = 'w-80'
+
+const renderToastEntry = (
+  entry: Entry,
+  handlers: EntryHandlers,
+  h: HtmlBuilder<UiMessage>,
+): Html => {
+  return h.div(
+    [
+      h.Class(
+        `relative rounded-lg border shadow-sm p-3 pr-9 ${variantClassName(entry.variant)}`,
+      ),
+    ],
+    [
+      h.p([h.Class('font-semibold text-sm')], [entry.payload.title]),
+      ...Option.match(entry.payload.maybeDescription, {
+        onNone: () => [],
+        onSome: description => [
+          h.p([h.Class('text-sm text-gray-700 mt-0.5')], [description]),
+        ],
+      }),
+      h.button(
+        [
+          ...handlers.dismiss,
+          h.Class(
+            'absolute top-2 right-2 text-gray-500 hover:text-gray-900 cursor-pointer rounded-md p-1 transition-colors',
+          ),
+        ],
+        [Icon.xMark('w-4 h-4')],
+      ),
+    ],
+  )
+}
+
+const demoButtonClassName =
+  'inline-flex items-center gap-1.5 px-4 py-2 text-sm font-medium cursor-pointer transition rounded-lg border border-gray-300 bg-white text-gray-900 hover:bg-gray-100 select-none'
+
+export const view = Submodel.defineView<UiModel, UiMessage>(
+  (model, h): Html => {
+    return h.div(
+      [],
+      [
+        h.h2([h.Class('text-2xl font-bold text-gray-900 mb-2')], ['Toast']),
+        h.p(
+          [h.Class('text-gray-600 mb-6 max-w-prose')],
+          [
+            'A stack of transient notifications that auto-dismiss. Hover over a toast to pause its timer.',
+          ],
+        ),
+
+        h.h3(
+          [h.Class('text-lg font-semibold text-gray-900 mt-8 mb-4')],
+          ['Variants'],
+        ),
+        h.div(
+          [h.Class('flex flex-wrap gap-2')],
+          [
+            h.button(
+              [
+                h.Class(demoButtonClassName),
+                h.OnClick(UiMessage.ClickedShowInfoToast()),
+              ],
+              ['Info'],
+            ),
+            h.button(
+              [
+                h.Class(demoButtonClassName),
+                h.OnClick(UiMessage.ClickedShowSuccessToast()),
+              ],
+              ['Success'],
+            ),
+            h.button(
+              [
+                h.Class(demoButtonClassName),
+                h.OnClick(UiMessage.ClickedShowWarningToast()),
+              ],
+              ['Warning'],
+            ),
+            h.button(
+              [
+                h.Class(demoButtonClassName),
+                h.OnClick(UiMessage.ClickedShowErrorToast()),
+              ],
+              ['Error'],
+            ),
+          ],
+        ),
+
+        h.h3(
+          [h.Class('text-lg font-semibold text-gray-900 mt-8 mb-4')],
+          ['Sticky'],
+        ),
+        h.p(
+          [h.Class('text-gray-600 mb-4 max-w-prose')],
+          [
+            'Pass ',
+            h.span(
+              [h.Class('font-mono text-sm bg-gray-100 px-1 rounded')],
+              ['sticky: true'],
+            ),
+            ' to skip the auto-dismiss timer. The user must close it manually.',
+          ],
+        ),
+        h.div(
+          [h.Class('flex flex-wrap gap-2')],
+          [
+            h.button(
+              [
+                h.Class(demoButtonClassName),
+                h.OnClick(UiMessage.ClickedShowStickyToast()),
+              ],
+              ['Show sticky toast'],
+            ),
+            h.button(
+              [
+                h.Class(demoButtonClassName),
+                h.OnClick(UiMessage.ClickedDismissAllToasts()),
+              ],
+              ['Dismiss all'],
+            ),
+          ],
+        ),
+
+        h.submodel({
+          slotId: model.toastDemo.id,
+          model: model.toastDemo,
+          view: Toast.view,
+          viewInputs: {
+            position: 'BottomRight',
+            entryToView: (entry, handlers) =>
+              renderToastEntry(entry, handlers, h),
+            entryClassName,
+          },
+          toParentMessage: message =>
+            UiMessage.GotToastDemoMessage({ message }),
+        }),
+      ],
+    )
+  },
+)