create-foldkit-app 0.38.0 → 0.39.0

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

@@ -13,77 +13,86 @@ const valueClassName = 'tabular-nums text-gray-600'
 const trackClassName = 'h-3 w-full overflow-hidden rounded-full bg-gray-200'
 const fillClassName = 'h-full rounded-full bg-emerald-600'
 
-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')], ['Meter']),
-      h.h3(
-        [h.Class('text-lg font-semibold text-gray-900 mb-4')],
-        ['Scalar value'],
-      ),
-      Meter.view(
-        {
-          id: 'health-meter',
-          value: 75,
-          valueText: '75 of 100 health',
-          toView: ({ meter, label, fill }) =>
-            h.div(
-              [h.Class(rowClassName)],
-              [
-                h.div(
-                  [h.Class(headerClassName)],
-                  [
-                    h.span([...label, h.Class(labelClassName)], ['Health']),
-                    h.span([h.Class(valueClassName)], ['75 / 100']),
-                  ],
-                ),
-                h.div(
-                  [...meter, h.Class(trackClassName)],
-                  [h.div([...fill, h.Class(fillClassName)])],
-                ),
-              ],
-            ),
-        },
-        h,
-      ),
-      h.h3(
-        [h.Class('text-lg font-semibold text-gray-900 mt-8 mb-4')],
-        ['Thresholds'],
-      ),
-      Meter.view(
-        {
-          id: 'storage-meter',
-          value: 82,
-          low: 30,
-          high: 80,
-          optimum: 20,
-          valueText: '82 percent used',
-          toView: ({ meter, label, fill }) =>
-            h.div(
-              [h.Class(rowClassName)],
-              [
-                h.div(
-                  [h.Class(headerClassName)],
-                  [
-                    h.span([...label, h.Class(labelClassName)], ['Storage']),
-                    h.span([h.Class(valueClassName)], ['82%']),
-                  ],
-                ),
-                h.div(
-                  [...meter, h.Class(trackClassName)],
-                  [
-                    h.div([
-                      ...fill,
-                      h.Class('h-full rounded-full bg-amber-500'),
-                    ]),
-                  ],
-                ),
-              ],
-            ),
-        },
-        h,
-      ),
-    ],
-  ),
+export const view = Submodel.defineView<UiModel, UiMessage>(
+  (_model, h): Html => {
+    const healthMeterView = ({
+      meter,
+      label,
+      fill,
+    }: Meter.MeterAttributes<UiMessage>): Html =>
+      h.div(
+        [h.Class(rowClassName)],
+        [
+          h.div(
+            [h.Class(headerClassName)],
+            [
+              h.span([...label, h.Class(labelClassName)], ['Health']),
+              h.span([h.Class(valueClassName)], ['75 / 100']),
+            ],
+          ),
+          h.div(
+            [...meter, h.Class(trackClassName)],
+            [h.div([...fill, h.Class(fillClassName)])],
+          ),
+        ],
+      )
+
+    const storageMeterView = ({
+      meter,
+      label,
+      fill,
+    }: Meter.MeterAttributes<UiMessage>): Html =>
+      h.div(
+        [h.Class(rowClassName)],
+        [
+          h.div(
+            [h.Class(headerClassName)],
+            [
+              h.span([...label, h.Class(labelClassName)], ['Storage']),
+              h.span([h.Class(valueClassName)], ['82%']),
+            ],
+          ),
+          h.div(
+            [...meter, h.Class(trackClassName)],
+            [h.div([...fill, h.Class('h-full rounded-full bg-amber-500')])],
+          ),
+        ],
+      )
+
+    return h.div(
+      [],
+      [
+        h.h2([h.Class('text-2xl font-bold text-gray-900 mb-6')], ['Meter']),
+        h.h3(
+          [h.Class('text-lg font-semibold text-gray-900 mb-4')],
+          ['Scalar value'],
+        ),
+        Meter.view(
+          {
+            id: 'health-meter',
+            value: 75,
+            valueText: '75 of 100 health',
+            toView: healthMeterView,
+          },
+          h,
+        ),
+        h.h3(
+          [h.Class('text-lg font-semibold text-gray-900 mt-8 mb-4')],
+          ['Thresholds'],
+        ),
+        Meter.view(
+          {
+            id: 'storage-meter',
+            value: 82,
+            low: 30,
+            high: 80,
+            optimum: 20,
+            valueText: '82 percent used',
+            toView: storageMeterView,
+          },
+          h,
+        ),
+      ],
+    )
+  },
 )

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

@@ -45,31 +45,38 @@ const popoverDemo = (
   panelClassNameValue: string,
   h: HtmlBuilder<UiMessage>,
 ): Html => {
+  const popoverView = ({
+    button,
+    panel,
+    backdrop,
+    isVisible,
+  }: Popover.RenderInfo): Html =>
+    h.div(
+      [h.Class(wrapperClassName)],
+      [
+        h.button(
+          [...button, h.Class(triggerClassName)],
+          [h.span([], ['Solutions'])],
+        ),
+        ...(isVisible
+          ? [
+              h.div([...backdrop, h.Class(backdropClassName)]),
+              h.div(
+                [...panel, h.Class(panelClassNameValue)],
+                [popoverPanelContent(h)],
+              ),
+            ]
+          : []),
+      ],
+    )
+
   return h.submodel({
     slotId: id,
     model: popoverModel,
     view: Popover.view,
     viewInputs: {
       anchor: POPOVER_ANCHOR,
-      toView: ({ button, panel, backdrop, isVisible }) =>
-        h.div(
-          [h.Class(wrapperClassName)],
-          [
-            h.button(
-              [...button, h.Class(triggerClassName)],
-              [h.span([], ['Solutions'])],
-            ),
-            ...(isVisible
-              ? [
-                  h.div([...backdrop, h.Class(backdropClassName)]),
-                  h.div(
-                    [...panel, h.Class(panelClassNameValue)],
-                    [popoverPanelContent(h)],
-                  ),
-                ]
-              : []),
-          ],
-        ),
+      toView: popoverView,
     },
     toParentMessage,
   })
@@ -87,6 +94,42 @@ const nestedChildPopover = (
   childPopoverModel: Popover.Model,
   h: HtmlBuilder<UiMessage>,
 ): Html => {
+  const childPopoverView = ({
+    button,
+    panel,
+    backdrop,
+    isVisible,
+  }: Popover.RenderInfo): Html =>
+    h.div(
+      [h.Class(wrapperClassName)],
+      [
+        h.button(
+          [...button, h.Class(triggerClassName)],
+          [h.span([], ['Advanced settings'])],
+        ),
+        ...(isVisible
+          ? [
+              h.div([...backdrop, h.Class(backdropClassName)]),
+              h.div(
+                [...panel, h.Class(basicPanelClassName)],
+                [
+                  h.p(
+                    [h.Class('text-sm font-semibold text-gray-900 mb-2')],
+                    ['Permissions'],
+                  ),
+                  h.p(
+                    [h.Class('text-sm text-gray-600')],
+                    [
+                      'Review who can change billing, members, and integrations.',
+                    ],
+                  ),
+                ],
+              ),
+            ]
+          : []),
+      ],
+    )
+
   return h.submodel({
     slotId: childPopoverModel.id,
     model: childPopoverModel,
@@ -94,36 +137,7 @@ const nestedChildPopover = (
     viewInputs: {
       ariaLabel: 'Advanced settings',
       anchor: NESTED_POPOVER_ANCHOR,
-      toView: ({ button, panel, backdrop, isVisible }) =>
-        h.div(
-          [h.Class(wrapperClassName)],
-          [
-            h.button(
-              [...button, h.Class(triggerClassName)],
-              [h.span([], ['Advanced settings'])],
-            ),
-            ...(isVisible
-              ? [
-                  h.div([...backdrop, h.Class(backdropClassName)]),
-                  h.div(
-                    [...panel, h.Class(basicPanelClassName)],
-                    [
-                      h.p(
-                        [h.Class('text-sm font-semibold text-gray-900 mb-2')],
-                        ['Permissions'],
-                      ),
-                      h.p(
-                        [h.Class('text-sm text-gray-600')],
-                        [
-                          'Review who can change billing, members, and integrations.',
-                        ],
-                      ),
-                    ],
-                  ),
-                ]
-              : []),
-          ],
-        ),
+      toView: childPopoverView,
     },
     toParentMessage: message =>
       UiMessage.GotPopoverNestedChildDemoMessage({ message }),
@@ -135,6 +149,42 @@ const nestedDemo = (
   childPopoverModel: Popover.Model,
   h: HtmlBuilder<UiMessage>,
 ): Html => {
+  const parentPopoverView = ({
+    button,
+    panel,
+    backdrop,
+    isVisible,
+  }: Popover.RenderInfo): Html =>
+    h.div(
+      [h.Class(wrapperClassName)],
+      [
+        h.button(
+          [...button, h.Class(triggerClassName)],
+          [h.span([], ['Account'])],
+        ),
+        ...(isVisible
+          ? [
+              h.div([...backdrop, h.Class(backdropClassName)]),
+              h.div(
+                [...panel, h.Class(basicPanelClassName)],
+                [
+                  h.div(
+                    [h.Class('flex flex-col gap-4')],
+                    [
+                      h.p(
+                        [h.Class('text-sm text-gray-600')],
+                        ['Manage account settings without leaving this panel.'],
+                      ),
+                      nestedChildPopover(childPopoverModel, h),
+                    ],
+                  ),
+                ],
+              ),
+            ]
+          : []),
+      ],
+    )
+
   return h.div(
     [h.Class('relative')],
     [
@@ -145,38 +195,7 @@ const nestedDemo = (
         viewInputs: {
           anchor: POPOVER_ANCHOR,
           focusSelector: nestedChildButtonSelector,
-          toView: ({ button, panel, backdrop, isVisible }) =>
-            h.div(
-              [h.Class(wrapperClassName)],
-              [
-                h.button(
-                  [...button, h.Class(triggerClassName)],
-                  [h.span([], ['Account'])],
-                ),
-                ...(isVisible
-                  ? [
-                      h.div([...backdrop, h.Class(backdropClassName)]),
-                      h.div(
-                        [...panel, h.Class(basicPanelClassName)],
-                        [
-                          h.div(
-                            [h.Class('flex flex-col gap-4')],
-                            [
-                              h.p(
-                                [h.Class('text-sm text-gray-600')],
-                                [
-                                  'Manage account settings without leaving this panel.',
-                                ],
-                              ),
-                              nestedChildPopover(childPopoverModel, h),
-                            ],
-                          ),
-                        ],
-                      ),
-                    ]
-                  : []),
-              ],
-            ),
+          toView: parentPopoverView,
         },
         toParentMessage: message =>
           UiMessage.GotPopoverNestedParentDemoMessage({ message }),

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

@@ -13,72 +13,87 @@ const valueClassName = 'tabular-nums text-gray-600'
 const trackClassName = 'h-3 w-full overflow-hidden rounded-full bg-gray-200'
 const indicatorClassName = 'h-full rounded-full bg-accent-600'
 
-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')], ['Progress']),
-      h.h3(
-        [h.Class('text-lg font-semibold text-gray-900 mb-4')],
-        ['Determinate'],
-      ),
-      Progress.view(
-        {
-          id: 'upload-progress',
-          value: 42,
-          valueText: '42 percent',
-          toView: ({ progress, label, track, indicator }) =>
-            h.div(
-              [h.Class(rowClassName)],
-              [
-                h.div(
-                  [h.Class(headerClassName)],
-                  [
-                    h.span([...label, h.Class(labelClassName)], ['Upload']),
-                    h.span([h.Class(valueClassName)], ['42%']),
-                  ],
-                ),
-                h.div(
-                  [...progress, h.Class(trackClassName)],
-                  [
-                    h.div(
-                      [...track, h.Class('h-full w-full')],
-                      [h.div([...indicator, h.Class(indicatorClassName)])],
-                    ),
-                  ],
-                ),
-              ],
-            ),
-        },
-        h,
-      ),
-      h.h3(
-        [h.Class('text-lg font-semibold text-gray-900 mt-8 mb-4')],
-        ['Indeterminate'],
-      ),
-      Progress.view(
-        {
-          id: 'sync-progress',
-          valueText: 'Syncing files',
-          toView: ({ progress, label, indicator }) =>
-            h.div(
-              [h.Class(rowClassName)],
-              [
-                h.span([...label, h.Class(labelClassName)], ['Syncing']),
-                h.div(
-                  [...progress, h.Class(trackClassName)],
-                  [
-                    h.div([
-                      ...indicator,
-                      h.Class(`${indicatorClassName} w-1/3 animate-pulse`),
-                    ]),
-                  ],
-                ),
-              ],
-            ),
-        },
-        h,
-      ),
-    ],
-  ),
+export const view = Submodel.defineView<UiModel, UiMessage>(
+  (_model, h): Html => {
+    const uploadProgressView = ({
+      progress,
+      label,
+      track,
+      indicator,
+    }: Progress.ProgressAttributes<UiMessage>): Html =>
+      h.div(
+        [h.Class(rowClassName)],
+        [
+          h.div(
+            [h.Class(headerClassName)],
+            [
+              h.span([...label, h.Class(labelClassName)], ['Upload']),
+              h.span([h.Class(valueClassName)], ['42%']),
+            ],
+          ),
+          h.div(
+            [...progress, h.Class(trackClassName)],
+            [
+              h.div(
+                [...track, h.Class('h-full w-full')],
+                [h.div([...indicator, h.Class(indicatorClassName)])],
+              ),
+            ],
+          ),
+        ],
+      )
+
+    const syncingProgressView = ({
+      progress,
+      label,
+      indicator,
+    }: Progress.ProgressAttributes<UiMessage>): Html =>
+      h.div(
+        [h.Class(rowClassName)],
+        [
+          h.span([...label, h.Class(labelClassName)], ['Syncing']),
+          h.div(
+            [...progress, h.Class(trackClassName)],
+            [
+              h.div([
+                ...indicator,
+                h.Class(`${indicatorClassName} w-1/3 animate-pulse`),
+              ]),
+            ],
+          ),
+        ],
+      )
+
+    return h.div(
+      [],
+      [
+        h.h2([h.Class('text-2xl font-bold text-gray-900 mb-6')], ['Progress']),
+        h.h3(
+          [h.Class('text-lg font-semibold text-gray-900 mb-4')],
+          ['Determinate'],
+        ),
+        Progress.view(
+          {
+            id: 'upload-progress',
+            value: 42,
+            valueText: '42 percent',
+            toView: uploadProgressView,
+          },
+          h,
+        ),
+        h.h3(
+          [h.Class('text-lg font-semibold text-gray-900 mt-8 mb-4')],
+          ['Indeterminate'],
+        ),
+        Progress.view(
+          {
+            id: 'sync-progress',
+            valueText: 'Syncing files',
+            toView: syncingProgressView,
+          },
+          h,
+        ),
+      ],
+    )
+  },
 )