create-foldkit-app 0.38.0 → 0.39.0

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

@@ -43,8 +43,21 @@ const sectionHeadingClassName = 'text-lg font-semibold text-gray-900 mt-8 mb-4'
 const checkmark = (h: HtmlBuilder<UiMessage>): Html =>
   h.span([h.Class('text-white text-xs')], ['✓'])
 
-const nameInput = (value: string, h: HtmlBuilder<UiMessage>): Html =>
-  Input.view(
+const nameInput = (value: string, h: HtmlBuilder<UiMessage>): Html => {
+  const nameInputView = (attributes: Input.InputAttributes<UiMessage>): Html =>
+    h.div(
+      [h.Class(fieldClassName)],
+      [
+        h.label([...attributes.label, h.Class(labelClassName)], ['Name']),
+        h.input([...attributes.input, h.Class(inputClassName)]),
+        h.span(
+          [...attributes.description, h.Class(descriptionClassName)],
+          ['As it appears on your government-issued ID.'],
+        ),
+      ],
+    )
+
+  return Input.view(
     {
       id: 'fieldset-name-input',
       value,
@@ -52,24 +65,29 @@ const nameInput = (value: string, h: HtmlBuilder<UiMessage>): Html =>
       onInput: inputValue =>
         UiMessage.UpdatedFieldsetInputValue({ value: inputValue }),
       placeholder: 'Enter your full name',
-      toView: attributes =>
-        h.div(
-          [h.Class(fieldClassName)],
-          [
-            h.label([...attributes.label, h.Class(labelClassName)], ['Name']),
-            h.input([...attributes.input, h.Class(inputClassName)]),
-            h.span(
-              [...attributes.description, h.Class(descriptionClassName)],
-              ['As it appears on your government-issued ID.'],
-            ),
-          ],
-        ),
+      toView: nameInputView,
     },
     h,
   )
+}
 
-const bioTextarea = (value: string, h: HtmlBuilder<UiMessage>): Html =>
-  Textarea.view(
+const bioTextarea = (value: string, h: HtmlBuilder<UiMessage>): Html => {
+  const bioTextareaView = (
+    attributes: Textarea.TextareaAttributes<UiMessage>,
+  ): Html =>
+    h.div(
+      [h.Class(fieldClassName)],
+      [
+        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.'],
+        ),
+      ],
+    )
+
+  return Textarea.view(
     {
       id: 'fieldset-bio-textarea',
       value,
@@ -78,196 +96,207 @@ const bioTextarea = (value: string, h: HtmlBuilder<UiMessage>): Html =>
         UiMessage.UpdatedFieldsetTextareaValue({ value: textareaValue }),
       placeholder: 'Tell us about yourself...',
       rows: 3,
-      toView: attributes =>
+      toView: bioTextareaView,
+    },
+    h,
+  )
+}
+
+const termsCheckbox = (isChecked: boolean, h: HtmlBuilder<UiMessage>): Html => {
+  const termsCheckboxView = (
+    attributes: Checkbox.CheckboxAttributes<UiMessage>,
+  ): Html =>
+    h.div(
+      [h.Class('flex flex-col gap-1')],
+      [
         h.div(
-          [h.Class(fieldClassName)],
+          [h.Class('flex items-center gap-2')],
           [
-            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.button(
+              [...attributes.checkbox, h.Class(checkboxClassName)],
+              isChecked ? [checkmark(h)] : [],
+            ),
+            h.label(
+              [...attributes.label, h.Class(checkboxLabelClassName)],
+              ['I agree to the terms and conditions'],
             ),
           ],
         ),
-    },
-    h,
-  )
+        h.p(
+          [...attributes.description, h.Class(checkboxDescriptionClassName)],
+          ['You agree to our Terms of Service and Privacy Policy.'],
+        ),
+      ],
+    )
 
-const termsCheckbox = (isChecked: boolean, h: HtmlBuilder<UiMessage>): Html =>
-  Checkbox.view(
+  return Checkbox.view(
     {
       id: FIELDSET_CHECKBOX_DEMO_ID,
       isChecked,
       hasDescription: true,
       onToggle: nextIsChecked =>
         UiMessage.ToggledFieldsetCheckboxDemo({ isChecked: nextIsChecked }),
-      toView: attributes =>
-        h.div(
-          [h.Class('flex flex-col gap-1')],
-          [
-            h.div(
-              [h.Class('flex items-center gap-2')],
-              [
-                h.button(
-                  [...attributes.checkbox, h.Class(checkboxClassName)],
-                  isChecked ? [checkmark(h)] : [],
-                ),
-                h.label(
-                  [...attributes.label, h.Class(checkboxLabelClassName)],
-                  ['I agree to the terms and conditions'],
-                ),
-              ],
-            ),
-            h.p(
-              [
-                ...attributes.description,
-                h.Class(checkboxDescriptionClassName),
-              ],
-              ['You agree to our Terms of Service and Privacy Policy.'],
-            ),
-          ],
-        ),
+      toView: termsCheckboxView,
     },
     h,
   )
+}
 
 // DISABLED FIELDS
 
-const disabledNameInput = (h: HtmlBuilder<UiMessage>): Html =>
-  Input.view(
+const disabledNameInput = (h: HtmlBuilder<UiMessage>): Html => {
+  const disabledNameInputView = (
+    attributes: Input.InputAttributes<UiMessage>,
+  ): Html =>
+    h.div(
+      [h.Class(fieldClassName)],
+      [
+        h.label([...attributes.label, h.Class(labelClassName)], ['Name']),
+        h.input([...attributes.input, h.Class(inputClassName)]),
+      ],
+    )
+
+  return Input.view(
     {
       id: 'fieldset-disabled-name-input',
       isDisabled: true,
       value: 'Ada Lovelace',
-      toView: attributes =>
-        h.div(
-          [h.Class(fieldClassName)],
-          [
-            h.label([...attributes.label, h.Class(labelClassName)], ['Name']),
-            h.input([...attributes.input, h.Class(inputClassName)]),
-          ],
-        ),
+      toView: disabledNameInputView,
     },
     h,
   )
+}
 
-const disabledBioTextarea = (h: HtmlBuilder<UiMessage>): Html =>
-  Textarea.view(
+const disabledBioTextarea = (h: HtmlBuilder<UiMessage>): Html => {
+  const disabledBioTextareaView = (
+    attributes: Textarea.TextareaAttributes<UiMessage>,
+  ): Html =>
+    h.div(
+      [h.Class(fieldClassName)],
+      [
+        h.label([...attributes.label, h.Class(labelClassName)], ['Bio']),
+        h.textarea([...attributes.textarea, h.Class(textareaClassName)]),
+      ],
+    )
+
+  return Textarea.view(
     {
       id: 'fieldset-disabled-bio-textarea',
       isDisabled: true,
       value:
         "Mathematician and writer, known for work on Charles Babbage's Analytical Engine.",
       rows: 3,
-      toView: attributes =>
-        h.div(
-          [h.Class(fieldClassName)],
-          [
-            h.label([...attributes.label, h.Class(labelClassName)], ['Bio']),
-            h.textarea([...attributes.textarea, h.Class(textareaClassName)]),
-          ],
-        ),
+      toView: disabledBioTextareaView,
     },
     h,
   )
+}
 
-const disabledTermsCheckbox = (h: HtmlBuilder<UiMessage>): Html =>
-  Checkbox.view(
+const disabledTermsCheckbox = (h: HtmlBuilder<UiMessage>): Html => {
+  const disabledTermsCheckboxView = (
+    attributes: Checkbox.CheckboxAttributes<UiMessage>,
+  ): Html =>
+    h.div(
+      [h.Class('flex items-center gap-2')],
+      [
+        h.button(
+          [...attributes.checkbox, h.Class(checkboxClassName)],
+          [checkmark(h)],
+        ),
+        h.label(
+          [...attributes.label, h.Class(checkboxLabelClassName)],
+          ['I agree to the terms and conditions'],
+        ),
+      ],
+    )
+
+  return Checkbox.view(
     {
       id: FIELDSET_DISABLED_CHECKBOX_ID,
       isChecked: true,
       isDisabled: true,
       onToggle: isChecked =>
         UiMessage.ToggledFieldsetCheckboxDemo({ isChecked }),
-      toView: attributes =>
-        h.div(
-          [h.Class('flex items-center gap-2')],
-          [
-            h.button(
-              [...attributes.checkbox, h.Class(checkboxClassName)],
-              [checkmark(h)],
-            ),
-            h.label(
-              [...attributes.label, h.Class(checkboxLabelClassName)],
-              ['I agree to the terms and conditions'],
-            ),
-          ],
-        ),
+      toView: disabledTermsCheckboxView,
     },
     h,
   )
+}
 
 // DEMOS
 
-const basicDemo = (model: UiModel, h: HtmlBuilder<UiMessage>): Html =>
-  Fieldset.view(
-    {
-      id: 'fieldset-basic-demo',
-      hasDescription: true,
-      toView: attributes =>
-        h.fieldset(
-          [...attributes.fieldset, h.Class(fieldsetClassName)],
+const basicDemo = (model: UiModel, h: HtmlBuilder<UiMessage>): Html => {
+  const basicFieldsetView = (
+    attributes: Fieldset.FieldsetAttributes<UiMessage>,
+  ): Html =>
+    h.fieldset(
+      [...attributes.fieldset, h.Class(fieldsetClassName)],
+      [
+        h.legend(
+          [...attributes.legend, h.Class(legendClassName)],
+          ['Personal Information'],
+        ),
+        h.span(
+          [...attributes.description, h.Class(`${descriptionClassName} mt-1`)],
+          ['We just need a few details.'],
+        ),
+        h.div(
+          [h.Class(fieldsClassName)],
           [
-            h.legend(
-              [...attributes.legend, h.Class(legendClassName)],
-              ['Personal Information'],
-            ),
-            h.span(
-              [
-                ...attributes.description,
-                h.Class(`${descriptionClassName} mt-1`),
-              ],
-              ['We just need a few details.'],
-            ),
-            h.div(
-              [h.Class(fieldsClassName)],
-              [
-                nameInput(model.fieldsetInputValue, h),
-                bioTextarea(model.fieldsetTextareaValue, h),
-                termsCheckbox(model.isFieldsetCheckboxDemoChecked, h),
-              ],
-            ),
+            nameInput(model.fieldsetInputValue, h),
+            bioTextarea(model.fieldsetTextareaValue, h),
+            termsCheckbox(model.isFieldsetCheckboxDemoChecked, h),
           ],
         ),
+      ],
+    )
+
+  return Fieldset.view(
+    {
+      id: 'fieldset-basic-demo',
+      hasDescription: true,
+      toView: basicFieldsetView,
     },
     h,
   )
+}
+
+const disabledDemo = (h: HtmlBuilder<UiMessage>): Html => {
+  const disabledFieldsetView = (
+    attributes: Fieldset.FieldsetAttributes<UiMessage>,
+  ): Html =>
+    h.fieldset(
+      [...attributes.fieldset, h.Class(fieldsetClassName)],
+      [
+        h.legend(
+          [...attributes.legend, h.Class(legendClassName)],
+          ['Personal Information'],
+        ),
+        h.span(
+          [...attributes.description, h.Class(`${descriptionClassName} mt-1`)],
+          ['This fieldset is disabled.'],
+        ),
+        h.div(
+          [h.Class(fieldsClassName)],
+          [
+            disabledNameInput(h),
+            disabledBioTextarea(h),
+            disabledTermsCheckbox(h),
+          ],
+        ),
+      ],
+    )
 
-const disabledDemo = (h: HtmlBuilder<UiMessage>): Html =>
-  Fieldset.view(
+  return Fieldset.view(
     {
       id: 'fieldset-disabled-demo',
       isDisabled: true,
       hasDescription: true,
-      toView: attributes =>
-        h.fieldset(
-          [...attributes.fieldset, h.Class(fieldsetClassName)],
-          [
-            h.legend(
-              [...attributes.legend, h.Class(legendClassName)],
-              ['Personal Information'],
-            ),
-            h.span(
-              [
-                ...attributes.description,
-                h.Class(`${descriptionClassName} mt-1`),
-              ],
-              ['This fieldset is disabled.'],
-            ),
-            h.div(
-              [h.Class(fieldsClassName)],
-              [
-                disabledNameInput(h),
-                disabledBioTextarea(h),
-                disabledTermsCheckbox(h),
-              ],
-            ),
-          ],
-        ),
+      toView: disabledFieldsetView,
     },
     h,
   )
+}
 
 // VIEW
 

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

@@ -42,6 +42,22 @@ const fileKey = (file: File.File): string =>
 
 export const view = Submodel.defineView<UiModel, UiMessage>(
   (model, h): Html => {
+    const fileDropView = (attributes: FileDrop.FileDropAttributes): Html =>
+      h.label(
+        [...attributes.root, h.Class(dropZoneClassName)],
+        [
+          h.p(
+            [h.Class(primaryTextClassName)],
+            ['Drop files or click to browse'],
+          ),
+          h.p(
+            [h.Class(secondaryTextClassName)],
+            ['Any file type. This demo just lists them.'],
+          ),
+          h.input(attributes.input),
+        ],
+      )
+
     return h.div(
       [],
       [
@@ -55,21 +71,7 @@ export const view = Submodel.defineView<UiModel, UiMessage>(
               view: FileDrop.view,
               viewInputs: {
                 multiple: true,
-                toView: attributes =>
-                  h.label(
-                    [...attributes.root, h.Class(dropZoneClassName)],
-                    [
-                      h.p(
-                        [h.Class(primaryTextClassName)],
-                        ['Drop files or click to browse'],
-                      ),
-                      h.p(
-                        [h.Class(secondaryTextClassName)],
-                        ['Any file type. This demo just lists them.'],
-                      ),
-                      h.input(attributes.input),
-                    ],
-                  ),
+                toView: fileDropView,
               },
               toParentMessage: message =>
                 UiMessage.GotFileDropBasicDemoMessage({ message }),

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

@@ -15,64 +15,72 @@ const panelClassName =
 const TRIGGER_ID = 'hover-intent-showcase-trigger'
 const PANEL_ID = 'hover-intent-showcase-panel'
 
-export const view = Submodel.defineView<UiModel, UiMessage>((model, h): Html =>
-  h.div(
-    [],
-    [
-      h.h2(
-        [h.Class('text-2xl font-bold text-gray-900 mb-6')],
-        ['Hover Intent'],
-      ),
-      h.p(
-        [h.Class('mb-4 max-w-xl text-sm text-gray-600')],
+export const view = Submodel.defineView<UiModel, UiMessage>(
+  (model, h): Html => {
+    const hoverIntentView = ({
+      trigger,
+      panel,
+      isVisible,
+    }: HoverIntent.RenderInfo): Html =>
+      h.div(
+        [h.Class('relative inline-block')],
         [
-          'Hover over or focus the “More information” trigger, then move the pointer into the card. Move the pointer or focus away from both elements, or press Escape, to close it.',
-        ],
-      ),
-      h.submodel({
-        slotId: 'hover-intent-showcase',
-        model: model.hoverIntentDemo,
-        view: HoverIntent.view,
-        viewInputs: {
-          focusTriggerSelector: `#${TRIGGER_ID}`,
-          toView: ({ trigger, panel, isVisible }) =>
-            h.div(
-              [h.Class('relative inline-block')],
-              [
-                h.button(
+          h.button(
+            [
+              ...trigger,
+              h.Type('button'),
+              h.Id(TRIGGER_ID),
+              h.AriaControls(PANEL_ID),
+              h.AriaExpanded(isVisible),
+              h.Class(triggerClassName),
+            ],
+            ['More information'],
+          ),
+          ...(isVisible
+            ? [
+                h.div(
+                  [...panel, h.Id(PANEL_ID), h.Class(panelClassName)],
                   [
-                    ...trigger,
-                    h.Type('button'),
-                    h.Id(TRIGGER_ID),
-                    h.AriaControls(PANEL_ID),
-                    h.AriaExpanded(isVisible),
-                    h.Class(triggerClassName),
+                    h.h3(
+                      [h.Class('text-sm font-medium text-gray-900')],
+                      ['Details'],
+                    ),
+                    h.p(
+                      [h.Class('mt-1 text-sm leading-5 text-gray-600')],
+                      ['A short description can provide useful context.'],
+                    ),
                   ],
-                  ['More information'],
                 ),
-                ...(isVisible
-                  ? [
-                      h.div(
-                        [...panel, h.Id(PANEL_ID), h.Class(panelClassName)],
-                        [
-                          h.h3(
-                            [h.Class('text-sm font-medium text-gray-900')],
-                            ['Details'],
-                          ),
-                          h.p(
-                            [h.Class('mt-1 text-sm leading-5 text-gray-600')],
-                            ['A short description can provide useful context.'],
-                          ),
-                        ],
-                      ),
-                    ]
-                  : []),
-              ],
-            ),
-        },
-        toParentMessage: message =>
-          UiMessage.GotHoverIntentDemoMessage({ message }),
-      }),
-    ],
-  ),
+              ]
+            : []),
+        ],
+      )
+
+    return h.div(
+      [],
+      [
+        h.h2(
+          [h.Class('text-2xl font-bold text-gray-900 mb-6')],
+          ['Hover Intent'],
+        ),
+        h.p(
+          [h.Class('mb-4 max-w-xl text-sm text-gray-600')],
+          [
+            'Hover over or focus the “More information” trigger, then move the pointer into the card. Move the pointer or focus away from both elements, or press Escape, to close it.',
+          ],
+        ),
+        h.submodel({
+          slotId: 'hover-intent-showcase',
+          model: model.hoverIntentDemo,
+          view: HoverIntent.view,
+          viewInputs: {
+            focusTriggerSelector: `#${TRIGGER_ID}`,
+            toView: hoverIntentView,
+          },
+          toParentMessage: message =>
+            UiMessage.GotHoverIntentDemoMessage({ message }),
+        }),
+      ],
+    )
+  },
 )

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

@@ -15,6 +15,36 @@ const descriptionClassName = 'text-sm text-gray-500'
 
 export const view = Submodel.defineView<UiModel, UiMessage>(
   (model, h): Html => {
+    const basicInputView = (
+      attributes: Input.InputAttributes<UiMessage>,
+    ): Html =>
+      h.div(
+        [h.Class('flex flex-col gap-1.5 w-full')],
+        [
+          h.label([...attributes.label, h.Class(labelClassName)], ['Name']),
+          h.input([...attributes.input, h.Class(inputClassName)]),
+          h.span(
+            [...attributes.description, h.Class(descriptionClassName)],
+            ['As it appears on your government-issued ID.'],
+          ),
+        ],
+      )
+
+    const disabledInputView = (
+      attributes: Input.InputAttributes<UiMessage>,
+    ): Html =>
+      h.div(
+        [h.Class('flex flex-col gap-1.5 max-w-sm')],
+        [
+          h.label([...attributes.label, h.Class(labelClassName)], ['Name']),
+          h.input([...attributes.input, h.Class(inputClassName)]),
+          h.span(
+            [...attributes.description, h.Class(descriptionClassName)],
+            ['This input is disabled.'],
+          ),
+        ],
+      )
+
     return h.div(
       [],
       [
@@ -34,24 +64,7 @@ export const view = Submodel.defineView<UiModel, UiMessage>(
                 hasDescription: true,
                 onInput: value => UiMessage.UpdatedInputDemoValue({ value }),
                 placeholder: 'Enter your full name',
-                toView: attributes =>
-                  h.div(
-                    [h.Class('flex flex-col gap-1.5 w-full')],
-                    [
-                      h.label(
-                        [...attributes.label, h.Class(labelClassName)],
-                        ['Name'],
-                      ),
-                      h.input([...attributes.input, h.Class(inputClassName)]),
-                      h.span(
-                        [
-                          ...attributes.description,
-                          h.Class(descriptionClassName),
-                        ],
-                        ['As it appears on your government-issued ID.'],
-                      ),
-                    ],
-                  ),
+                toView: basicInputView,
               },
               h,
             ),
@@ -68,21 +81,7 @@ export const view = Submodel.defineView<UiModel, UiMessage>(
             isDisabled: true,
             hasDescription: true,
             value: 'Ada Lovelace',
-            toView: attributes =>
-              h.div(
-                [h.Class('flex flex-col gap-1.5 max-w-sm')],
-                [
-                  h.label(
-                    [...attributes.label, h.Class(labelClassName)],
-                    ['Name'],
-                  ),
-                  h.input([...attributes.input, h.Class(inputClassName)]),
-                  h.span(
-                    [...attributes.description, h.Class(descriptionClassName)],
-                    ['This input is disabled.'],
-                  ),
-                ],
-              ),
+            toView: disabledInputView,
           },
           h,
         ),