create-foldkit-app 0.27.3 → 0.28.0

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

@@ -0,0 +1,58 @@
+import { Submodel } from 'foldkit'
+import type { Html } from 'foldkit/html'
+
+import { Animation } from '@foldkit/ui'
+
+import { UiMessage } from '../message'
+import type { UiModel } from '../model'
+
+const triggerClassName =
+  'px-4 py-2 text-base font-normal cursor-pointer transition rounded-lg border border-gray-300 bg-white text-gray-900 hover:bg-gray-200/50 select-none'
+
+const contentClassName =
+  'rounded-lg bg-indigo-50 border border-indigo-200 p-4 transition duration-200 ease-out data-[closed]:opacity-0 data-[closed]:scale-95 data-[closed]:-translate-y-2'
+
+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')], ['Animation']),
+        h.div(
+          [h.Class('flex gap-3')],
+          [
+            h.button(
+              [
+                h.Class(triggerClassName),
+                h.OnClick(UiMessage.ToggledAnimationDemo()),
+              ],
+              [model.isAnimationDemoShowing ? 'Hide Content' : 'Show Content'],
+            ),
+          ],
+        ),
+        h.div(
+          [h.Class('mt-4')],
+          [
+            h.submodel({
+              slotId: model.animationDemo.id,
+              model: model.animationDemo,
+              view: Animation.view,
+              viewInputs: {
+                className: contentClassName,
+                animateSize: true,
+                content: h.p(
+                  [h.Class('text-indigo-800')],
+                  [
+                    'This content smoothly animates in and out. The Animation component coordinates CSS enter/leave lifecycles via data attributes, while animateSize uses a CSS grid wrapper for smooth height animation.',
+                  ],
+                ),
+              },
+              toParentMessage: message =>
+                UiMessage.GotAnimationDemoMessage({ message }),
+            }),
+          ],
+        ),
+      ],
+    )
+  },
+)

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

@@ -0,0 +1,64 @@
+import { Submodel } from 'foldkit'
+import type { Html } from 'foldkit/html'
+
+import { Button } from '@foldkit/ui'
+
+import { UiMessage } from '../message'
+import type { UiModel } from '../model'
+
+const buttonClassName =
+  'inline-flex items-center gap-2 rounded-lg bg-accent-600 px-3 py-2 text-base font-semibold text-white shadow-sm transition-colors hover:not-data-[disabled]:bg-accent-600/85 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-600 cursor-pointer data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50'
+
+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')], ['Button']),
+
+        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')],
+          [
+            Button.view(
+              {
+                onClick: UiMessage.ClickedButtonDemo(),
+                toView: attributes =>
+                  h.button(
+                    [...attributes.button, h.Class(buttonClassName)],
+                    ['Click me'],
+                  ),
+              },
+              h,
+            ),
+            h.span(
+              [h.Class('text-sm text-gray-600')],
+              [
+                `Clicked ${model.buttonClickCount} time${model.buttonClickCount === 1 ? '' : 's'}`,
+              ],
+            ),
+          ],
+        ),
+
+        h.h3(
+          [h.Class('text-lg font-semibold text-gray-900 mt-8 mb-4')],
+          ['Disabled'],
+        ),
+        Button.view(
+          {
+            isDisabled: true,
+            toView: attributes =>
+              h.button(
+                [...attributes.button, h.Class(buttonClassName)],
+                ['Disabled'],
+              ),
+          },
+          h,
+        ),
+      ],
+    )
+  },
+)

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

@@ -0,0 +1,202 @@
+import { Match as M } from 'effect'
+import { Submodel } from 'foldkit'
+import type { ChildAttribute, Html, HtmlBuilder } from 'foldkit/html'
+
+import { Calendar } from '@foldkit/ui'
+
+import * as Icon from '../../icon'
+import { UiMessage } from '../message'
+import type { UiModel } from '../model'
+
+const containerClassName =
+  'inline-flex flex-col gap-3 rounded-xl border border-gray-200 bg-white p-4 shadow-sm select-none min-w-[304px] min-h-[324px]'
+
+const headerClassName = 'flex items-center justify-between gap-2'
+
+const headingButtonClassName =
+  'inline-flex items-center gap-2 text-sm font-semibold text-gray-900 tabular-nums px-2 py-1 rounded-md cursor-pointer hover:bg-gray-100'
+
+const headingTextClassName = 'text-sm font-semibold text-gray-900 tabular-nums'
+
+const navButtonClassName =
+  'inline-flex h-8 w-8 items-center justify-center rounded-md text-gray-600 hover:bg-gray-100 cursor-pointer'
+
+const gridClassName = 'flex flex-col gap-1 outline-none'
+
+const rowClassName = 'grid grid-cols-7 gap-1'
+
+const columnHeaderClassName =
+  'text-center text-xs font-medium uppercase tracking-wide text-gray-500 py-1'
+
+const cellClassName = 'group flex items-center justify-center'
+
+const dayButtonClassName =
+  'flex h-9 w-9 items-center justify-center rounded-full text-sm text-gray-900 tabular-nums cursor-pointer hover:bg-gray-100 group-data-[today]:ring-1 group-data-[today]:ring-gray-400 group-data-[selected]:bg-accent-600 group-data-[selected]:text-white! group-data-[selected]:hover:bg-accent-600 group-data-[focused]:outline-2 group-data-[focused]:outline-offset-2 group-data-[focused]:outline-accent-500 group-data-[outside-month]:text-gray-400 group-data-[disabled]:cursor-not-allowed group-data-[disabled]:opacity-40'
+
+const monthYearGridClassName =
+  'grid grid-cols-3 grid-rows-4 gap-1 outline-none flex-1'
+
+const monthYearButtonClassName =
+  'flex h-full w-full items-center justify-center rounded-md text-sm text-gray-900 tabular-nums cursor-pointer hover:bg-gray-100 group-data-[today]:ring-1 group-data-[today]:ring-gray-400 group-data-[selected]:bg-accent-600 group-data-[selected]:text-white! group-data-[selected]:hover:bg-accent-600 group-data-[focused]:outline-2 group-data-[focused]:outline-offset-2 group-data-[focused]:outline-accent-500 group-data-[disabled]:cursor-not-allowed group-data-[disabled]:opacity-40'
+
+// PIECES
+
+const navButton = (
+  attributes: ReadonlyArray<ChildAttribute>,
+  icon: Html,
+  h: HtmlBuilder<UiMessage>,
+): Html => h.button([...attributes, h.Class(navButtonClassName)], [icon])
+
+const headingButton = (
+  heading: Calendar.DaysModeAttributes['heading'],
+  attributes: ReadonlyArray<ChildAttribute>,
+  h: HtmlBuilder<UiMessage>,
+): Html =>
+  h.button(
+    [h.Id(heading.id), ...attributes, h.Class(headingButtonClassName)],
+    [heading.text, Icon.chevronDown('w-3 h-3')],
+  )
+
+const weekRow = (week: Calendar.Week, h: HtmlBuilder<UiMessage>): Html =>
+  h.div(
+    [...week.attributes, h.Class(rowClassName)],
+    week.cells.map(cell =>
+      h.div(
+        [...cell.cellAttributes, h.Class(cellClassName)],
+        [
+          h.button(
+            [...cell.buttonAttributes, h.Class(dayButtonClassName)],
+            [cell.label],
+          ),
+        ],
+      ),
+    ),
+  )
+
+// MODES
+
+const daysView = (
+  days: Calendar.DaysModeAttributes,
+  h: HtmlBuilder<UiMessage>,
+): Html =>
+  h.div(
+    [...days.root, h.Class(containerClassName)],
+    [
+      h.div(
+        [h.Class(headerClassName)],
+        [
+          navButton(days.previousMonthButton, Icon.chevronLeft('w-5 h-5'), h),
+          headingButton(days.heading, days.headingButton, h),
+          navButton(days.nextMonthButton, Icon.chevronRight('w-5 h-5'), h),
+        ],
+      ),
+      h.div(
+        [...days.grid, h.Class(gridClassName)],
+        [
+          h.div(
+            [...days.headerRow, h.Class(rowClassName)],
+            days.columnHeaders.map(header =>
+              h.div(
+                [...header.attributes, h.Class(columnHeaderClassName)],
+                [header.name],
+              ),
+            ),
+          ),
+          ...days.weeks.map(week => weekRow(week, h)),
+        ],
+      ),
+    ],
+  )
+
+const monthsView = (
+  months: Calendar.MonthsModeAttributes,
+  h: HtmlBuilder<UiMessage>,
+): Html =>
+  h.div(
+    [...months.root, h.Class(containerClassName)],
+    [
+      h.div(
+        [h.Class(`${headerClassName} justify-center`)],
+        [headingButton(months.heading, months.headingButton, h)],
+      ),
+      h.div(
+        [...months.grid, h.Class(monthYearGridClassName)],
+        months.cells.map(cell =>
+          h.div(
+            [...cell.cellAttributes, h.Class(cellClassName)],
+            [
+              h.button(
+                [...cell.buttonAttributes, h.Class(monthYearButtonClassName)],
+                [cell.shortLabel],
+              ),
+            ],
+          ),
+        ),
+      ),
+    ],
+  )
+
+const yearsView = (
+  years: Calendar.YearsModeAttributes,
+  h: HtmlBuilder<UiMessage>,
+): Html =>
+  h.div(
+    [...years.root, h.Class(containerClassName)],
+    [
+      h.div(
+        [h.Class(headerClassName)],
+        [
+          navButton(years.previousPageButton, Icon.chevronLeft('w-5 h-5'), h),
+          h.h2(
+            [h.Id(years.heading.id), h.Class(headingTextClassName)],
+            [years.heading.text],
+          ),
+          navButton(years.nextPageButton, Icon.chevronRight('w-5 h-5'), h),
+        ],
+      ),
+      h.div(
+        [...years.grid, h.Class(monthYearGridClassName)],
+        years.cells.map(cell =>
+          h.div(
+            [...cell.cellAttributes, h.Class(cellClassName)],
+            [
+              h.button(
+                [...cell.buttonAttributes, h.Class(monthYearButtonClassName)],
+                [cell.label],
+              ),
+            ],
+          ),
+        ),
+      ),
+    ],
+  )
+
+// VIEW
+
+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')], ['Calendar']),
+        h.submodel({
+          slotId: model.calendarBasicDemo.id,
+          model: model.calendarBasicDemo,
+          view: Calendar.view,
+          viewInputs: {
+            maybeSelectedDate: model.maybeCalendarBasicDemoSelectedDate,
+            toView: M.type<Calendar.CalendarAttributes>().pipe(
+              M.tagsExhaustive({
+                Days: days => daysView(days, h),
+                Months: months => monthsView(months, h),
+                Years: years => yearsView(years, h),
+              }),
+            ),
+          },
+          toParentMessage: message =>
+            UiMessage.GotCalendarBasicDemoMessage({ message }),
+        }),
+      ],
+    )
+  },
+)

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

@@ -0,0 +1,185 @@
+import { Submodel } from 'foldkit'
+import type { Html, HtmlBuilder } from 'foldkit/html'
+
+import { Checkbox } from '@foldkit/ui'
+
+import { UiMessage } from '../message'
+import type { UiModel } from '../model'
+
+const CHECKBOX_BASIC_DEMO_ID = 'checkbox-basic-demo'
+const CHECKBOX_ALL_DEMO_ID = 'checkbox-all-demo'
+const CHECKBOX_OPTION_A_DEMO_ID = 'checkbox-option-a-demo'
+const CHECKBOX_OPTION_B_DEMO_ID = 'checkbox-option-b-demo'
+
+const topRowClassName = 'flex items-center gap-2'
+
+const checkboxClassName =
+  'flex h-5 w-5 shrink-0 items-center justify-center rounded border border-gray-400 cursor-pointer data-[checked]:bg-accent-600 data-[checked]:border-accent-600 data-[indeterminate]:bg-accent-600 data-[indeterminate]:border-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'
+
+export const view = Submodel.defineView<UiModel, UiMessage>(
+  (model, h): Html => {
+    const checkmark = h.span([h.Class('text-white text-xs')], ['✓'])
+
+    return h.div(
+      [],
+      [
+        h.h2([h.Class('text-2xl font-bold text-gray-900 mb-6')], ['Checkbox']),
+
+        h.h3(
+          [h.Class('text-lg font-semibold text-gray-900 mt-8 mb-4')],
+          ['Basic'],
+        ),
+        Checkbox.view(
+          {
+            id: CHECKBOX_BASIC_DEMO_ID,
+            isChecked: model.isCheckboxBasicDemoChecked,
+            onToggle: isChecked =>
+              UiMessage.ToggledCheckboxBasicDemo({ isChecked }),
+            toView: attributes =>
+              h.div(
+                [h.Class('flex flex-col gap-1')],
+                [
+                  h.div(
+                    [h.Class(topRowClassName)],
+                    [
+                      h.button(
+                        [...attributes.checkbox, h.Class(checkboxClassName)],
+                        model.isCheckboxBasicDemoChecked ? [checkmark] : [],
+                      ),
+                      h.label(
+                        [...attributes.label, h.Class(labelClassName)],
+                        ['Accept terms and conditions'],
+                      ),
+                    ],
+                  ),
+                  h.p(
+                    [...attributes.description, h.Class(descriptionClassName)],
+                    ['You agree to our Terms of Service and Privacy Policy.'],
+                  ),
+                ],
+              ),
+          },
+          h,
+        ),
+
+        h.h3(
+          [h.Class('text-lg font-semibold text-gray-900 mt-8 mb-4')],
+          ['Indeterminate'],
+        ),
+        ...indeterminateDemo(model, h),
+      ],
+    )
+  },
+)
+
+const indeterminateDemo = (
+  model: UiModel,
+  h: HtmlBuilder<UiMessage>,
+): ReadonlyArray<Html> => {
+  const checkmark = h.span([h.Class('text-white text-xs')], ['✓'])
+  const indeterminateMark = h.span([h.Class('text-white text-xs')], ['—'])
+
+  const isAllChecked =
+    model.isCheckboxOptionADemoChecked && model.isCheckboxOptionBDemoChecked
+  const isNoneChecked =
+    !model.isCheckboxOptionADemoChecked && !model.isCheckboxOptionBDemoChecked
+  const isIndeterminate = !isAllChecked && !isNoneChecked
+
+  const resolveSelectAllMark = () => {
+    if (isIndeterminate) {
+      return [indeterminateMark]
+    } else if (isAllChecked) {
+      return [checkmark]
+    } else {
+      return []
+    }
+  }
+
+  return [
+    h.div(
+      [h.Class('flex flex-col gap-3')],
+      [
+        Checkbox.view(
+          {
+            id: CHECKBOX_ALL_DEMO_ID,
+            isChecked: isAllChecked,
+            isIndeterminate,
+            onToggle: isChecked =>
+              UiMessage.ToggledCheckboxAllDemo({ isChecked }),
+            toView: attributes =>
+              h.div(
+                [h.Class(topRowClassName)],
+                [
+                  h.button(
+                    [...attributes.checkbox, h.Class(checkboxClassName)],
+                    resolveSelectAllMark(),
+                  ),
+                  h.label(
+                    [...attributes.label, h.Class(labelClassName)],
+                    ['All notifications'],
+                  ),
+                ],
+              ),
+          },
+          h,
+        ),
+        h.div(
+          [h.Class('ml-7 flex flex-col gap-3')],
+          [
+            Checkbox.view(
+              {
+                id: CHECKBOX_OPTION_A_DEMO_ID,
+                isChecked: model.isCheckboxOptionADemoChecked,
+                onToggle: isChecked =>
+                  UiMessage.ToggledCheckboxOptionADemo({ isChecked }),
+                toView: attributes =>
+                  h.div(
+                    [h.Class(topRowClassName)],
+                    [
+                      h.button(
+                        [...attributes.checkbox, h.Class(checkboxClassName)],
+                        model.isCheckboxOptionADemoChecked ? [checkmark] : [],
+                      ),
+                      h.label(
+                        [...attributes.label, h.Class(labelClassName)],
+                        ['Email notifications'],
+                      ),
+                    ],
+                  ),
+              },
+              h,
+            ),
+            Checkbox.view(
+              {
+                id: CHECKBOX_OPTION_B_DEMO_ID,
+                isChecked: model.isCheckboxOptionBDemoChecked,
+                onToggle: isChecked =>
+                  UiMessage.ToggledCheckboxOptionBDemo({ isChecked }),
+                toView: attributes =>
+                  h.div(
+                    [h.Class(topRowClassName)],
+                    [
+                      h.button(
+                        [...attributes.checkbox, h.Class(checkboxClassName)],
+                        model.isCheckboxOptionBDemoChecked ? [checkmark] : [],
+                      ),
+                      h.label(
+                        [...attributes.label, h.Class(labelClassName)],
+                        ['Push notifications'],
+                      ),
+                    ],
+                  ),
+              },
+              h,
+            ),
+          ],
+        ),
+      ],
+    ),
+  ]
+}