npm - create-foldkit-app - Versions diffs - 0.27.3 → 0.28.0 - Mend

create-foldkit-app 0.27.3 → 0.28.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (460) hide show

package/dist/templates/examples/ui-showcase/src/ui/view/dragAndDrop.ts ADDED Viewed

@@ -0,0 +1,230 @@
+import clsx from 'clsx'
+import { Array, Option, pipe } from 'effect'
+import { Submodel } from 'foldkit'
+import type { Html, HtmlBuilder } from 'foldkit/html'
+import { DragAndDrop } from '@foldkit/ui'
+import { UiMessage } from '../message'
+import type { DemoCard, DemoColumn, UiModel } from '../model'
+const cardClassName =
+  'rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm text-gray-900 cursor-grab active:cursor-grabbing select-none transition-opacity'
+const findDraggedCard = (
+  columns: ReadonlyArray<DemoColumn>,
+  maybeItemId: Option.Option<string>,
+): Option.Option<DemoCard> =>
+  pipe(
+    maybeItemId,
+    Option.flatMap(itemId =>
+      pipe(
+        columns,
+        Array.flatMap(({ cards }) => cards),
+        Array.findFirst(({ id }) => id === itemId),
+      ),
+    ),
+  )
+const cardView = (
+  card: DemoCard,
+  index: number,
+  containerId: string,
+  dragAndDropModel: DragAndDrop.Model,
+  h: HtmlBuilder<UiMessage>,
+): Html => {
+  const maybeItemId = DragAndDrop.maybeDraggedItemId(dragAndDropModel)
+  const isBeingDragged = Option.exists(maybeItemId, id => id === card.id)
+  const isKeyboardDragged =
+    isBeingDragged && dragAndDropModel.dragState._tag === 'KeyboardDragging'
+  const isPointerDragged =
+    isBeingDragged && dragAndDropModel.dragState._tag === 'Dragging'
+  return h.keyed('div')(
+    card.id,
+    [
+      h.Class(
+        clsx(cardClassName, {
+          'opacity-40': isPointerDragged,
+          'ring-2 ring-accent-500': isKeyboardDragged,
+        }),
+      ),
+      ...DragAndDrop.draggable(
+        {
+          model: dragAndDropModel,
+          toParentMessage: message =>
+            UiMessage.GotDragAndDropDemoMessage({ message }),
+          itemId: card.id,
+          containerId,
+          index,
+        },
+        h,
+      ),
+      ...DragAndDrop.sortable(card.id),
+    ],
+    [card.label],
+  )
+}
+const dropPlaceholder = (h: HtmlBuilder<UiMessage>): Html => {
+  return h.keyed('div')('drop-placeholder', [
+    h.Class('rounded-lg border-2 border-dashed border-accent-400/50 h-9'),
+  ])
+}
+const renderColumn = (
+  column: DemoColumn,
+  dragAndDropModel: DragAndDrop.Model,
+  children: ReadonlyArray<Html>,
+  h: HtmlBuilder<UiMessage>,
+): Html => {
+  const maybeTarget = DragAndDrop.maybeDropTarget(dragAndDropModel)
+  const isDropTarget =
+    DragAndDrop.isDragging(dragAndDropModel) &&
+    Option.exists(maybeTarget, ({ containerId }) => containerId === column.id)
+  return h.keyed('div')(
+    column.id,
+    [h.Class('flex flex-col gap-1')],
+    [
+      h.div(
+        [
+          h.Class(
+            'text-xs font-semibold uppercase tracking-wider text-gray-500 mb-1',
+          ),
+        ],
+        [column.label],
+      ),
+      h.div(
+        [
+          h.Class(
+            clsx(
+              'flex flex-col gap-1.5 rounded-lg border-2 bg-gray-50 p-2 min-h-[120px] transition-colors',
+              isDropTarget
+                ? 'border-dashed border-accent-400/50'
+                : 'border-transparent',
+            ),
+          ),
+          ...DragAndDrop.droppable(column.id, column.label),
+        ],
+        [...children],
+      ),
+    ],
+  )
+}
+const columnView = (
+  columns: ReadonlyArray<DemoColumn>,
+  column: DemoColumn,
+  dragAndDropModel: DragAndDrop.Model,
+  h: HtmlBuilder<UiMessage>,
+): Html => {
+  const maybeItemId = DragAndDrop.maybeDraggedItemId(dragAndDropModel)
+  const maybeTarget = DragAndDrop.maybeDropTarget(dragAndDropModel)
+  const isDragging = DragAndDrop.isDragging(dragAndDropModel)
+  const isPointerDragging = dragAndDropModel.dragState._tag === 'Dragging'
+  const isTargetColumn =
+    isDragging &&
+    Option.exists(maybeTarget, ({ containerId }) => containerId === column.id)
+  const visibleCards = Option.match(maybeItemId, {
+    onNone: () => column.cards,
+    onSome: draggedId =>
+      isDragging
+        ? Array.filter(column.cards, ({ id }) => id !== draggedId)
+        : column.cards,
+  })
+  const cardElements = Array.map(visibleCards, (card, index) =>
+    cardView(card, index, column.id, dragAndDropModel, h),
+  )
+  if (!isTargetColumn) {
+    return renderColumn(column, dragAndDropModel, cardElements, h)
+  }
+  const targetIndex = Option.match(maybeTarget, {
+    onNone: () => visibleCards.length,
+    onSome: ({ index }) => Math.min(index, visibleCards.length),
+  })
+  const insertElement = isPointerDragging
+    ? dropPlaceholder(h)
+    : Option.match(findDraggedCard(columns, maybeItemId), {
+        onNone: () => dropPlaceholder(h),
+        onSome: card =>
+          cardView(card, targetIndex, column.id, dragAndDropModel, h),
+      })
+  const withInsert: ReadonlyArray<Html> = pipe(
+    cardElements,
+    Array.insertAt(targetIndex, insertElement),
+    Option.getOrElse(() => [...cardElements, insertElement]),
+  )
+  return renderColumn(column, dragAndDropModel, withInsert, h)
+}
+const ghostView = (
+  columns: ReadonlyArray<DemoColumn>,
+  dragAndDropModel: DragAndDrop.Model,
+  h: HtmlBuilder<UiMessage>,
+): Html => {
+  const maybeItemId = DragAndDrop.maybeDraggedItemId(dragAndDropModel)
+  return pipe(
+    DragAndDrop.ghostStyle(dragAndDropModel),
+    Option.flatMap(ghostStyle =>
+      Option.map(findDraggedCard(columns, maybeItemId), card => ({
+        ghostStyle,
+        card,
+      })),
+    ),
+    Option.match({
+      onNone: () => h.empty,
+      onSome: ({ ghostStyle, card }) =>
+        h.div(
+          [
+            h.Style(ghostStyle),
+            h.Class(
+              'rounded-lg border border-accent-400 bg-white px-3 py-2 text-sm text-gray-900 shadow-lg',
+            ),
+          ],
+          [card.label],
+        ),
+    }),
+  )
+}
+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')],
+          ['Drag and Drop'],
+        ),
+        h.div(
+          [h.Class('w-full max-w-md')],
+          [
+            h.div(
+              [h.Class('grid grid-cols-2 gap-4')],
+              Array.map(model.dragAndDropDemoColumns, column =>
+                columnView(
+                  model.dragAndDropDemoColumns,
+                  column,
+                  model.dragAndDropDemo,
+                  h,
+                ),
+              ),
+            ),
+            ghostView(model.dragAndDropDemoColumns, model.dragAndDropDemo, h),
+          ],
+        ),
+      ],
+    )
+  },
+)

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

@@ -0,0 +1,284 @@
+import { Submodel } from 'foldkit'
+import type { Html, HtmlBuilder } from 'foldkit/html'
+import { Checkbox, Fieldset, Input, Textarea } from '@foldkit/ui'
+import { UiMessage } from '../message'
+import type { UiModel } from '../model'
+const FIELDSET_CHECKBOX_DEMO_ID = 'fieldset-checkbox-demo'
+const FIELDSET_DISABLED_CHECKBOX_ID = 'fieldset-disabled-checkbox'
+const fieldsetClassName = 'rounded-lg border border-gray-200 p-6'
+const legendClassName =
+  'float-left w-full text-base font-semibold text-gray-900'
+const descriptionClassName = 'text-sm text-gray-500'
+const labelClassName = 'block text-sm font-medium text-gray-700'
+const inputClassName =
+  'block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 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 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 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-[disabled]:cursor-not-allowed data-[disabled]:opacity-50'
+const checkboxLabelClassName =
+  'text-sm font-normal text-gray-900 cursor-pointer select-none'
+const checkboxDescriptionClassName = 'text-sm text-gray-500'
+const fieldClassName = 'flex flex-col gap-1.5'
+const fieldsClassName = 'mt-4 flex flex-col gap-4'
+const sectionHeadingClassName = 'text-lg font-semibold text-gray-900 mt-8 mb-4'
+// FIELDS
+const checkmark = (h: HtmlBuilder<UiMessage>): Html =>
+  h.span([h.Class('text-white text-xs')], ['✓'])
+const nameInput = (value: string, h: HtmlBuilder<UiMessage>): Html =>
+  Input.view(
+    {
+      id: 'fieldset-name-input',
+      value,
+      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.'],
+            ),
+          ],
+        ),
+    },
+    h,
+  )
+const bioTextarea = (value: string, h: HtmlBuilder<UiMessage>): Html =>
+  Textarea.view(
+    {
+      id: 'fieldset-bio-textarea',
+      value,
+      onInput: textareaValue =>
+        UiMessage.UpdatedFieldsetTextareaValue({ value: textareaValue }),
+      placeholder: 'Tell us about yourself...',
+      rows: 3,
+      toView: attributes =>
+        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.'],
+            ),
+          ],
+        ),
+    },
+    h,
+  )
+const termsCheckbox = (isChecked: boolean, h: HtmlBuilder<UiMessage>): Html =>
+  Checkbox.view(
+    {
+      id: FIELDSET_CHECKBOX_DEMO_ID,
+      isChecked,
+      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.'],
+            ),
+          ],
+        ),
+    },
+    h,
+  )
+// DISABLED FIELDS
+const disabledNameInput = (h: HtmlBuilder<UiMessage>): Html =>
+  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)]),
+          ],
+        ),
+    },
+    h,
+  )
+const disabledBioTextarea = (h: HtmlBuilder<UiMessage>): Html =>
+  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)]),
+          ],
+        ),
+    },
+    h,
+  )
+const disabledTermsCheckbox = (h: HtmlBuilder<UiMessage>): Html =>
+  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'],
+            ),
+          ],
+        ),
+    },
+    h,
+  )
+// DEMOS
+const basicDemo = (model: UiModel, h: HtmlBuilder<UiMessage>): Html =>
+  Fieldset.view(
+    {
+      id: 'fieldset-basic-demo',
+      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`),
+              ],
+              ['We just need a few details.'],
+            ),
+            h.div(
+              [h.Class(fieldsClassName)],
+              [
+                nameInput(model.fieldsetInputValue, h),
+                bioTextarea(model.fieldsetTextareaValue, h),
+                termsCheckbox(model.isFieldsetCheckboxDemoChecked, h),
+              ],
+            ),
+          ],
+        ),
+    },
+    h,
+  )
+const disabledDemo = (h: HtmlBuilder<UiMessage>): Html =>
+  Fieldset.view(
+    {
+      id: 'fieldset-disabled-demo',
+      isDisabled: 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),
+              ],
+            ),
+          ],
+        ),
+    },
+    h,
+  )
+// 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')], ['Fieldset']),
+        h.h3([h.Class(sectionHeadingClassName)], ['Basic']),
+        basicDemo(model, h),
+        h.h3([h.Class(sectionHeadingClassName)], ['Disabled']),
+        disabledDemo(h),
+      ],
+    )
+  },
+)

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

@@ -0,0 +1,119 @@
+import { Array, Match as M, Number } from 'effect'
+import { File, Submodel } from 'foldkit'
+import type { Html } from 'foldkit/html'
+import { FileDrop } from '@foldkit/ui'
+import { UiMessage } from '../message'
+import type { UiModel } from '../model'
+const dropZoneClassName =
+  'flex flex-col items-center gap-2 cursor-pointer rounded-xl border-2 border-dashed border-gray-300 bg-gray-50 px-6 py-10 text-center hover:border-accent-400 select-none data-[drag-over]:border-accent-500 data-[drag-over]:bg-accent-50'
+const primaryTextClassName = 'text-base font-medium text-gray-900'
+const secondaryTextClassName = 'text-sm text-gray-500'
+const fileRowClassName =
+  'flex items-center justify-between gap-3 rounded-lg border border-gray-200 px-3 py-2 bg-white'
+const fileNameClassName = 'text-sm font-medium text-gray-900 truncate'
+const fileSizeClassName = 'text-xs text-gray-500'
+const removeButtonClassName =
+  'text-sm text-gray-500 hover:text-red-600 cursor-pointer'
+const BYTES_PER_KB = 1024
+const BYTES_PER_MB = BYTES_PER_KB * BYTES_PER_KB
+const formatFileSize = (bytes: number): string =>
+  M.value(bytes).pipe(
+    M.when(Number.isLessThan(BYTES_PER_KB), () => `${bytes} B`),
+    M.when(
+      Number.isLessThan(BYTES_PER_MB),
+      () => `${(bytes / BYTES_PER_KB).toFixed(1)} KB`,
+    ),
+    M.orElse(() => `${(bytes / BYTES_PER_MB).toFixed(1)} MB`),
+  )
+const fileKey = (file: File.File): string =>
+  `${File.name(file)}:${File.size(file)}:${file.lastModified}`
+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')], ['File Drop']),
+        h.div(
+          [h.Class('flex flex-col gap-3 w-full max-w-md')],
+          [
+            h.submodel({
+              slotId: model.fileDropBasicDemo.id,
+              model: model.fileDropBasicDemo,
+              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),
+                    ],
+                  ),
+              },
+              toParentMessage: message =>
+                UiMessage.GotFileDropBasicDemoMessage({ message }),
+            }),
+            ...Array.match(model.fileDropBasicDemoFiles, {
+              onEmpty: () => [],
+              onNonEmpty: files =>
+                files.map((file, fileIndex) =>
+                  h.keyed('div')(
+                    fileKey(file),
+                    [h.Class(fileRowClassName)],
+                    [
+                      h.div(
+                        [h.Class('flex flex-col min-w-0')],
+                        [
+                          h.span(
+                            [h.Class(fileNameClassName)],
+                            [File.name(file)],
+                          ),
+                          h.span(
+                            [h.Class(fileSizeClassName)],
+                            [formatFileSize(File.size(file))],
+                          ),
+                        ],
+                      ),
+                      h.button(
+                        [
+                          h.Type('button'),
+                          h.OnClick(
+                            UiMessage.ClickedRemoveFileDropDemoFile({
+                              fileIndex,
+                            }),
+                          ),
+                          h.Class(removeButtonClassName),
+                        ],
+                        ['Remove'],
+                      ),
+                    ],
+                  ),
+                ),
+            }),
+          ],
+        ),
+      ],
+    )
+  },
+)

package/dist/templates/examples/ui-showcase/src/ui/view/index.ts ADDED Viewed

@@ -0,0 +1,24 @@
+export { view as button } from './button'
+export { view as calendar } from './calendar'
+export { view as checkbox } from './checkbox'
+export { view as combobox } from './combobox'
+export { view as datePicker } from './datePicker'
+export { view as dialog } from './dialog'
+export { view as disclosure } from './disclosure'
+export { view as dragAndDrop } from './dragAndDrop'
+export { view as fieldset } from './fieldset'
+export { view as fileDrop } from './fileDrop'
+export { view as input } from './input'
+export { view as listbox } from './listbox'
+export { view as menu } from './menu'
+export { view as popover } from './popover'
+export { view as radioGroup } from './radioGroup'
+export { view as select } from './select'
+export { view as slider } from './slider'
+export { view as switch_ } from './switch'
+export { view as tabs } from './tabs'
+export { view as textarea } from './textarea'
+export { view as toast } from './toast'
+export { view as tooltip } from './tooltip'
+export { view as animation } from './animation'
+export { view as virtualList } from './virtualList'