create-foldkit-app 0.27.3 → 0.28.0

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

@@ -0,0 +1,262 @@
+import { Submodel } from 'foldkit'
+import type { Html, HtmlBuilder } from 'foldkit/html'
+
+import { Popover } from '@foldkit/ui'
+
+import { UiMessage } from '../message'
+import type { UiModel } from '../model'
+
+const triggerClassName =
+  'inline-flex items-center gap-1.5 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-100 select-none'
+
+const basicPanelClassName =
+  'w-64 rounded-lg border border-gray-200 bg-white shadow-lg p-4 z-10 outline-none'
+
+const animatedPanelClassName =
+  'w-64 rounded-lg border border-gray-200 bg-white shadow-lg p-4 z-10 outline-none transition duration-200 ease-out data-[closed]:scale-95 data-[closed]:opacity-0'
+
+const backdropClassName = 'fixed inset-0 z-0'
+
+const wrapperClassName = 'relative inline-block'
+
+const POPOVER_ANCHOR = {
+  placement: 'bottom-start' as const,
+  gap: 4,
+  padding: 8,
+}
+
+const popoverPanelContent = (h: HtmlBuilder<UiMessage>): Html => {
+  return h.div(
+    [],
+    [
+      h.p([h.Class('text-sm font-semibold text-gray-900 mb-2')], ['Analytics']),
+      h.p(
+        [h.Class('text-sm text-gray-600')],
+        ['Get a better understanding of where your traffic is coming from.'],
+      ),
+    ],
+  )
+}
+
+const popoverDemo = (
+  id: string,
+  popoverModel: Popover.Model,
+  toParentMessage: (message: Popover.Message) => UiMessage,
+  panelClassNameValue: string,
+  h: HtmlBuilder<UiMessage>,
+): Html => {
+  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)],
+                  ),
+                ]
+              : []),
+          ],
+        ),
+    },
+    toParentMessage,
+  })
+}
+
+const NESTED_POPOVER_ANCHOR = {
+  placement: 'right-start' as const,
+  gap: 8,
+  padding: 8,
+}
+
+const nestedChildButtonSelector = '#popover-nested-child-demo-button'
+
+const nestedChildPopover = (
+  childPopoverModel: Popover.Model,
+  h: HtmlBuilder<UiMessage>,
+): Html => {
+  return h.submodel({
+    slotId: childPopoverModel.id,
+    model: childPopoverModel,
+    view: Popover.view,
+    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.',
+                        ],
+                      ),
+                    ],
+                  ),
+                ]
+              : []),
+          ],
+        ),
+    },
+    toParentMessage: message =>
+      UiMessage.GotPopoverNestedChildDemoMessage({ message }),
+  })
+}
+
+const nestedDemo = (
+  parentPopoverModel: Popover.Model,
+  childPopoverModel: Popover.Model,
+  h: HtmlBuilder<UiMessage>,
+): Html => {
+  return h.div(
+    [h.Class('relative')],
+    [
+      h.submodel({
+        slotId: parentPopoverModel.id,
+        model: parentPopoverModel,
+        view: Popover.view,
+        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),
+                            ],
+                          ),
+                        ],
+                      ),
+                    ]
+                  : []),
+              ],
+            ),
+        },
+        toParentMessage: message =>
+          UiMessage.GotPopoverNestedParentDemoMessage({ message }),
+      }),
+    ],
+  )
+}
+
+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')], ['Popover']),
+
+        h.h3(
+          [h.Class('text-lg font-semibold text-gray-900 mt-8 mb-4')],
+          ['Basic'],
+        ),
+        h.label(
+          [
+            h.For(Popover.buttonId(model.popoverBasicDemo.id)),
+            h.Class('block mb-1.5 text-sm font-medium text-gray-900'),
+          ],
+          ['Product menu'],
+        ),
+        h.div(
+          [h.Class('relative')],
+          [
+            popoverDemo(
+              model.popoverBasicDemo.id,
+              model.popoverBasicDemo,
+              message => UiMessage.GotPopoverBasicDemoMessage({ message }),
+              basicPanelClassName,
+              h,
+            ),
+          ],
+        ),
+
+        h.h3(
+          [h.Class('text-lg font-semibold text-gray-900 mt-8 mb-4')],
+          ['Animated'],
+        ),
+        h.label(
+          [
+            h.For(Popover.buttonId(model.popoverAnimatedDemo.id)),
+            h.Class('block mb-1.5 text-sm font-medium text-gray-900'),
+          ],
+          ['Product menu'],
+        ),
+        h.div(
+          [h.Class('relative')],
+          [
+            popoverDemo(
+              model.popoverAnimatedDemo.id,
+              model.popoverAnimatedDemo,
+              message => UiMessage.GotPopoverAnimatedDemoMessage({ message }),
+              animatedPanelClassName,
+              h,
+            ),
+          ],
+        ),
+
+        h.h3(
+          [h.Class('text-lg font-semibold text-gray-900 mt-8 mb-4')],
+          ['Nested'],
+        ),
+        h.label(
+          [
+            h.For(Popover.buttonId(model.popoverNestedParentDemo.id)),
+            h.Class('block mb-1.5 text-sm font-medium text-gray-900'),
+          ],
+          ['Account'],
+        ),
+        nestedDemo(
+          model.popoverNestedParentDemo,
+          model.popoverNestedChildDemo,
+          h,
+        ),
+      ],
+    )
+  },
+)

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

@@ -0,0 +1,192 @@
+import { Submodel } from 'foldkit'
+import type { Html, HtmlBuilder } from 'foldkit/html'
+
+import { RadioGroup } from '@foldkit/ui'
+
+import { UiMessage } from '../message'
+import { type Plan, type UiModel } from '../model'
+
+export const PlanRadioGroup = RadioGroup.create<Plan>()
+
+const plans: ReadonlyArray<Plan> = ['Startup', 'Business', 'Enterprise']
+
+const planDescriptions: Record<Plan, string> = {
+  Startup: '12GB / 6 CPUs. Perfect for small projects',
+  Business: '16GB / 8 CPUs. For growing teams',
+  Enterprise: '32GB / 12 CPUs. Dedicated infrastructure',
+}
+
+const planPrices: Record<Plan, string> = {
+  Startup: '$40/mo',
+  Business: '$80/mo',
+  Enterprise: '$160/mo',
+}
+
+const verticalGroupClassName = 'flex flex-col gap-3 w-full'
+
+const verticalOptionClassName =
+  'relative flex cursor-pointer rounded-lg border border-gray-200 p-4 transition-colors hover:bg-gray-50 data-[checked]:border-accent-600 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 outline-none focus-visible:ring-2 focus-visible:ring-accent-500 focus-visible:ring-offset-2'
+
+const horizontalGroupClassName = 'flex flex-col sm:flex-row gap-3 w-full'
+
+const horizontalOptionClassName =
+  'relative flex flex-1 cursor-pointer rounded-lg border border-gray-200 p-4 transition-colors hover:bg-gray-50 data-[checked]:border-accent-600 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 outline-none focus-visible:ring-2 focus-visible:ring-accent-500 focus-visible:ring-offset-2'
+
+const labelClassName = 'text-sm font-medium text-gray-900'
+
+const descriptionClassName = 'text-sm text-gray-600'
+
+const priceClassName = 'text-sm font-semibold text-accent-600'
+
+const checkIcon = (h: HtmlBuilder<UiMessage>): Html => {
+  return h.svg(
+    [h.ViewBox('0 0 24 24'), h.Fill('none'), h.Class('size-5 text-accent-600')],
+    [
+      h.path([
+        h.D('M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z'),
+        h.Stroke('currentColor'),
+        h.StrokeWidth('1.5'),
+        h.StrokeLinecap('round'),
+        h.StrokeLinejoin('round'),
+      ]),
+    ],
+  )
+}
+
+const checkPlaceholder = (h: HtmlBuilder<UiMessage>): Html => {
+  return h.div([h.Class('size-5')])
+}
+
+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')],
+          ['Radio Group'],
+        ),
+
+        h.h3(
+          [h.Class('text-lg font-semibold text-gray-900 mt-8 mb-4')],
+          ['Vertical'],
+        ),
+        h.submodel({
+          slotId: model.verticalRadioGroupDemo.id,
+          model: model.verticalRadioGroupDemo,
+          view: PlanRadioGroup.view,
+          viewInputs: {
+            selectedValue: model.verticalRadioGroupDemoValue,
+            options: plans,
+            ariaLabel: 'Server plan',
+            toView: ({ group, options }) =>
+              h.div(
+                [...group, h.Class(verticalGroupClassName)],
+                options.map(option => {
+                  const plan = option.value
+                  return h.div(
+                    [...option.option, h.Class(verticalOptionClassName)],
+                    [
+                      h.div(
+                        [h.Class('flex w-full items-center justify-between')],
+                        [
+                          h.div(
+                            [],
+                            [
+                              h.span(
+                                [...option.label, h.Class(labelClassName)],
+                                [plan],
+                              ),
+                              h.p(
+                                [
+                                  ...option.description,
+                                  h.Class(descriptionClassName),
+                                ],
+                                [planDescriptions[plan]],
+                              ),
+                            ],
+                          ),
+                          h.div(
+                            [h.Class('flex items-center gap-3')],
+                            [
+                              h.span(
+                                [h.Class(priceClassName)],
+                                [planPrices[plan]],
+                              ),
+                              option.isSelected
+                                ? checkIcon(h)
+                                : checkPlaceholder(h),
+                            ],
+                          ),
+                        ],
+                      ),
+                    ],
+                  )
+                }),
+              ),
+          },
+          toParentMessage: message =>
+            UiMessage.GotVerticalRadioGroupDemoMessage({ message }),
+        }),
+
+        h.h3(
+          [h.Class('text-lg font-semibold text-gray-900 mt-8 mb-4')],
+          ['Horizontal'],
+        ),
+        h.submodel({
+          slotId: model.horizontalRadioGroupDemo.id,
+          model: model.horizontalRadioGroupDemo,
+          view: PlanRadioGroup.view,
+          viewInputs: {
+            selectedValue: model.horizontalRadioGroupDemoValue,
+            options: plans,
+            ariaLabel: 'Server plan',
+            orientation: 'Horizontal',
+            toView: ({ group, options }) =>
+              h.div(
+                [...group, h.Class(horizontalGroupClassName)],
+                options.map(option => {
+                  const plan = option.value
+                  return h.div(
+                    [...option.option, h.Class(horizontalOptionClassName)],
+                    [
+                      h.div(
+                        [h.Class('flex w-full items-center justify-between')],
+                        [
+                          h.div(
+                            [],
+                            [
+                              h.span(
+                                [...option.label, h.Class(labelClassName)],
+                                [plan],
+                              ),
+                              h.p(
+                                [
+                                  ...option.description,
+                                  h.Class(descriptionClassName),
+                                ],
+                                [planDescriptions[plan]],
+                              ),
+                            ],
+                          ),
+                          option.isSelected
+                            ? checkIcon(h)
+                            : checkPlaceholder(h),
+                        ],
+                      ),
+                      h.span(
+                        [h.Class(priceClassName + ' mt-2')],
+                        [planPrices[plan]],
+                      ),
+                    ],
+                  )
+                }),
+              ),
+          },
+          toParentMessage: message =>
+            UiMessage.GotHorizontalRadioGroupDemoMessage({ message }),
+        }),
+      ],
+    )
+  },
+)

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

@@ -0,0 +1,129 @@
+import { Submodel } from 'foldkit'
+import type { Html } from 'foldkit/html'
+
+import { Select } from '@foldkit/ui'
+
+import * as Icon from '../../icon'
+import { UiMessage } from '../message'
+import type { UiModel } from '../model'
+
+const selectClassName =
+  'appearance-none inline-flex items-center gap-2 w-full 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-100 select-none focus:border-accent-500 focus:outline-none focus:ring-1 focus:ring-accent-500 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50'
+
+const selectWrapperClassName = 'relative w-full'
+
+const chevronClassName =
+  'pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-gray-400'
+
+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')], ['Select']),
+
+        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')],
+          [
+            Select.view(
+              {
+                id: 'select-basic-demo',
+                value: model.selectDemoValue,
+                onChange: value => UiMessage.UpdatedSelectDemoValue({ value }),
+                toView: attributes =>
+                  h.div(
+                    [h.Class('flex flex-col gap-1.5 w-full')],
+                    [
+                      h.label(
+                        [...attributes.label, h.Class(labelClassName)],
+                        ['Country'],
+                      ),
+                      h.div(
+                        [h.Class(selectWrapperClassName)],
+                        [
+                          h.select(
+                            [...attributes.select, h.Class(selectClassName)],
+                            [
+                              h.option([h.Value('us')], ['United States']),
+                              h.option([h.Value('ca')], ['Canada']),
+                              h.option([h.Value('gb')], ['United Kingdom']),
+                              h.option([h.Value('au')], ['Australia']),
+                            ],
+                          ),
+                          h.span(
+                            [h.Class(chevronClassName)],
+                            [Icon.chevronDown('w-4 h-4')],
+                          ),
+                        ],
+                      ),
+                      h.span(
+                        [
+                          ...attributes.description,
+                          h.Class(descriptionClassName),
+                        ],
+                        ['Where you currently reside.'],
+                      ),
+                    ],
+                  ),
+              },
+              h,
+            ),
+          ],
+        ),
+
+        h.h3(
+          [h.Class('text-lg font-semibold text-gray-900 mt-8 mb-4')],
+          ['Disabled'],
+        ),
+        Select.view(
+          {
+            id: 'select-disabled-demo',
+            isDisabled: true,
+            value: 'us',
+            toView: attributes =>
+              h.div(
+                [h.Class('flex flex-col gap-1.5 max-w-sm')],
+                [
+                  h.label(
+                    [...attributes.label, h.Class(labelClassName)],
+                    ['Country'],
+                  ),
+                  h.div(
+                    [h.Class(selectWrapperClassName)],
+                    [
+                      h.select(
+                        [...attributes.select, h.Class(selectClassName)],
+                        [
+                          h.option([h.Value('us')], ['United States']),
+                          h.option([h.Value('ca')], ['Canada']),
+                          h.option([h.Value('gb')], ['United Kingdom']),
+                          h.option([h.Value('au')], ['Australia']),
+                        ],
+                      ),
+                      h.span(
+                        [h.Class(chevronClassName)],
+                        [Icon.chevronDown('w-4 h-4')],
+                      ),
+                    ],
+                  ),
+                  h.span(
+                    [...attributes.description, h.Class(descriptionClassName)],
+                    ['This select is disabled.'],
+                  ),
+                ],
+              ),
+          },
+          h,
+        ),
+      ],
+    )
+  },
+)