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/kanban/src/view/card.ts ADDED Viewed

@@ -0,0 +1,79 @@
+import clsx from 'clsx'
+import { Option, String } from 'effect'
+import { Html, HtmlBuilder } from 'foldkit/html'
+import { DragAndDrop } from '@foldkit/ui'
+import { Card } from '../domain'
+import type { Message } from '../message'
+import type { Model } from '../model'
+const cardContent = (
+  card: Card.Card,
+  h: HtmlBuilder<Message>,
+): ReadonlyArray<Html> => [
+  h.span([h.Class('text-sm font-medium text-gray-900')], [card.title]),
+  ...(String.isNonEmpty(card.description)
+    ? [
+        h.div(
+          [h.Class('mt-1 text-xs text-gray-500 line-clamp-2')],
+          [card.description],
+        ),
+      ]
+    : []),
+]
+export const cardView = (
+  model: Model,
+  card: Card.Card,
+  columnId: string,
+  index: number,
+  toParentMessage: (message: DragAndDrop.Message) => Message,
+  h: HtmlBuilder<Message>,
+): Html => {
+  const isThisCardBeingDragged = Option.exists(
+    DragAndDrop.maybeDraggedItemId(model.dragAndDrop),
+    id => id === card.id,
+  )
+  const isPointerDragged =
+    model.dragAndDrop.dragState._tag === 'Dragging' && isThisCardBeingDragged
+  const isKeyboardDragged =
+    model.dragAndDrop.dragState._tag === 'KeyboardDragging' &&
+    isThisCardBeingDragged
+  return h.keyed('li')(
+    card.id,
+    [
+      h.Class(
+        clsx('rounded-lg p-3 border-2 outline-none', {
+          'bg-gray-100 border-dashed border-gray-300 opacity-50':
+            isPointerDragged,
+          'bg-white shadow-sm border-blue-400': isKeyboardDragged,
+          'bg-white shadow-sm select-none border-transparent focus:border-gray-400 cursor-grab':
+            !isPointerDragged && !isKeyboardDragged,
+        }),
+      ),
+      ...DragAndDrop.draggable(
+        {
+          model: model.dragAndDrop,
+          toParentMessage,
+          itemId: card.id,
+          containerId: columnId,
+          index,
+        },
+        h,
+      ),
+    ],
+    cardContent(card, h),
+  )
+}
+export const ghostCardView = (card: Card.Card, h: HtmlBuilder<Message>): Html =>
+  h.div(
+    [
+      h.Class(
+        'rounded-lg bg-white shadow-lg p-3 border border-gray-200 scale-105 rotate-2',
+      ),
+    ],
+    cardContent(card, h),
+  )

package/dist/templates/examples/kanban/src/view/column.ts ADDED Viewed

@@ -0,0 +1,283 @@
+import clsx from 'clsx'
+import { Array, Equal, Option, flow, pipe } from 'effect'
+import { Html, HtmlBuilder } from 'foldkit/html'
+import { Button, DragAndDrop, Input } from '@foldkit/ui'
+import { ADD_CARD_INPUT_ID } from '../constant'
+import { Card, Column } from '../domain'
+import { Message } from '../message'
+import type { Model } from '../model'
+import { cardView } from './card'
+const addCardForm = (
+  model: Model,
+  columnId: string,
+  toParentMessage: (message: Message) => Message,
+  h: HtmlBuilder<Message>,
+): Html => {
+  const isAddingToThisColumn = Option.exists(
+    model.maybeNewCardColumnId,
+    id => id === columnId,
+  )
+  if (!isAddingToThisColumn) {
+    return Button.view(
+      {
+        onClick: toParentMessage(Message.ClickedAddCard({ columnId })),
+        toView: attributes =>
+          h.button(
+            [
+              ...attributes.button,
+              h.Class(
+                'w-full rounded-lg border border-dashed border-gray-300 p-2 text-sm text-gray-500 hover:border-gray-400 hover:text-gray-600 transition-colors cursor-pointer',
+              ),
+            ],
+            ['+ Add card'],
+          ),
+      },
+      h,
+    )
+  }
+  return h.form(
+    [
+      h.Class('flex flex-col gap-2'),
+      h.OnSubmit(toParentMessage(Message.SubmittedNewCard())),
+    ],
+    [
+      h.label(
+        [h.For(ADD_CARD_INPUT_ID), h.Class('sr-only')],
+        ['New card title'],
+      ),
+      Input.view(
+        {
+          id: ADD_CARD_INPUT_ID,
+          onInput: value =>
+            toParentMessage(Message.ChangedNewCardTitle({ value })),
+          value: model.newCardTitle,
+          placeholder: 'Card title...',
+          toView: attributes =>
+            h.input([
+              ...attributes.input,
+              h.Class(
+                'rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-400 focus:outline-none',
+              ),
+              h.OnKeyDownPreventDefault(
+                flow(
+                  Option.liftPredicate(Equal.equals('Escape')),
+                  Option.map(() => toParentMessage(Message.CancelledNewCard())),
+                ),
+              ),
+            ]),
+        },
+        h,
+      ),
+      h.div(
+        [h.Class('flex gap-2 justify-end')],
+        [
+          Button.view(
+            {
+              onClick: toParentMessage(Message.CancelledNewCard()),
+              toView: attributes =>
+                h.button(
+                  [
+                    ...attributes.button,
+                    h.Class(
+                      'rounded-lg px-3 py-1.5 text-sm text-gray-500 hover:bg-gray-100 transition-colors cursor-pointer',
+                    ),
+                  ],
+                  ['Cancel'],
+                ),
+            },
+            h,
+          ),
+          Button.view(
+            {
+              type: 'submit',
+              toView: attributes =>
+                h.button(
+                  [
+                    ...attributes.button,
+                    h.Class(
+                      'rounded-lg bg-blue-500 px-3 py-1.5 text-sm font-medium text-white hover:bg-blue-600 transition-colors cursor-pointer',
+                    ),
+                  ],
+                  ['Add'],
+                ),
+            },
+            h,
+          ),
+        ],
+      ),
+    ],
+  )
+}
+const dropPlaceholder = (h: HtmlBuilder<Message>): Html =>
+  h.keyed('li')('drop-placeholder', [
+    h.Class(
+      'rounded-lg border-2 border-dashed border-blue-300 bg-blue-50 h-12',
+    ),
+    h.AriaHidden(true),
+  ])
+const findDraggedCard = (
+  model: Model,
+  draggedId: string,
+): Option.Option<Card.Card> =>
+  pipe(
+    model.columns,
+    Array.flatMap(({ cards }) => cards),
+    Array.findFirst(({ id }) => id === draggedId),
+  )
+const defaultCardElements = (
+  model: Model,
+  column: Column.Column,
+  toParentMessage: (message: Message) => Message,
+  h: HtmlBuilder<Message>,
+): ReadonlyArray<Html> =>
+  Array.map(column.cards, (card, index) =>
+    cardView(
+      model,
+      card,
+      column.id,
+      index,
+      message => toParentMessage(Message.GotDragAndDropMessage({ message })),
+      h,
+    ),
+  )
+const previewCardElements = (
+  model: Model,
+  column: Column.Column,
+  toParentMessage: (message: Message) => Message,
+  h: HtmlBuilder<Message>,
+): ReadonlyArray<Html> => {
+  if (!DragAndDrop.isDragging(model.dragAndDrop)) {
+    return defaultCardElements(model, column, toParentMessage, h)
+  }
+  return Option.match(DragAndDrop.maybeDraggedItemId(model.dragAndDrop), {
+    onNone: () => defaultCardElements(model, column, toParentMessage, h),
+    onSome: draggedId => {
+      const maybeTarget = DragAndDrop.maybeDropTarget(model.dragAndDrop)
+      const visibleCards = Array.filter(
+        column.cards,
+        ({ id }) => id !== draggedId,
+      )
+      const cardElements = Array.map(visibleCards, (card, index) =>
+        cardView(
+          model,
+          card,
+          column.id,
+          index,
+          message =>
+            toParentMessage(Message.GotDragAndDropMessage({ message })),
+          h,
+        ),
+      )
+      const isTargetColumn = Option.exists(
+        maybeTarget,
+        target => target.containerId === column.id,
+      )
+      if (!isTargetColumn) {
+        return cardElements
+      }
+      const targetIndex = Option.match(maybeTarget, {
+        onNone: () => visibleCards.length,
+        onSome: target => Math.min(target.index, visibleCards.length),
+      })
+      const isPointerDrag = model.dragAndDrop.dragState._tag === 'Dragging'
+      const insertElement = isPointerDrag
+        ? dropPlaceholder(h)
+        : Option.match(findDraggedCard(model, draggedId), {
+            onNone: () => dropPlaceholder(h),
+            onSome: card =>
+              cardView(
+                model,
+                card,
+                column.id,
+                targetIndex,
+                message =>
+                  toParentMessage(Message.GotDragAndDropMessage({ message })),
+                h,
+              ),
+          })
+      return pipe(
+        cardElements,
+        Array.insertAt(targetIndex, insertElement),
+        Option.getOrElse(() => [...cardElements, insertElement]),
+      )
+    },
+  })
+}
+export const columnView = (
+  model: Model,
+  column: Column.Column,
+  toParentMessage: (message: Message) => Message,
+  h: HtmlBuilder<Message>,
+): Html => {
+  const maybeCurrentDropTarget = DragAndDrop.maybeDropTarget(model.dragAndDrop)
+  const isDropTarget =
+    DragAndDrop.isDragging(model.dragAndDrop) &&
+    Option.exists(
+      maybeCurrentDropTarget,
+      target => target.containerId === column.id,
+    )
+  return h.keyed('div')(
+    column.id,
+    [
+      h.Role('region'),
+      h.AriaLabel(column.name),
+      h.Class(
+        clsx('bg-gray-50 rounded-lg p-3 flex flex-col min-h-0 border-2', {
+          'border-dashed border-blue-300': isDropTarget,
+          'border-transparent': !isDropTarget,
+        }),
+      ),
+    ],
+    [
+      h.div(
+        [
+          h.Class(
+            'flex items-center justify-between border-b border-gray-200 pb-2 mb-3',
+          ),
+        ],
+        [
+          h.h2(
+            [
+              h.Class(
+                'text-xs font-semibold uppercase tracking-wide text-gray-500',
+              ),
+            ],
+            [column.name],
+          ),
+          h.span(
+            [h.Class('text-xs text-gray-400')],
+            [`${column.cards.length}`],
+          ),
+        ],
+      ),
+      h.ul(
+        [
+          h.Class('flex flex-col gap-2 flex-1 overflow-y-auto min-h-0'),
+          ...DragAndDrop.droppable(column.id, column.name),
+        ],
+        previewCardElements(model, column, toParentMessage, h),
+      ),
+      h.div(
+        [h.Class('mt-3 pt-2 border-t border-gray-200')],
+        [addCardForm(model, column.id, toParentMessage, h)],
+      ),
+    ],
+  )
+}

package/dist/templates/examples/kanban/src/view/index.ts ADDED Viewed

@@ -0,0 +1,71 @@
+import { Array, Option, pipe } from 'effect'
+import { type Document, HtmlBuilder } from 'foldkit/html'
+import { DragAndDrop } from '@foldkit/ui'
+import { Message } from '../message'
+import type { Model } from '../model'
+import { ghostCardView } from './card'
+import { columnView } from './column'
+const findDraggedCard = (model: Model) =>
+  pipe(
+    model.dragAndDrop,
+    DragAndDrop.maybeDraggedItemId,
+    Option.flatMap(cardId =>
+      pipe(
+        model.columns,
+        Array.flatMap(({ cards }) => cards),
+        Array.findFirst(({ id }) => id === cardId),
+      ),
+    ),
+  )
+const ghostElement = (model: Model, h: HtmlBuilder<Message>) =>
+  pipe(
+    DragAndDrop.ghostStyle(model.dragAndDrop),
+    Option.flatMap(ghostStyle =>
+      Option.map(findDraggedCard(model), card => ({ ghostStyle, card })),
+    ),
+    Option.match({
+      onNone: () => h.empty,
+      onSome: ({ ghostStyle, card }) =>
+        h.div(
+          [h.Style(ghostStyle), h.Class('w-64'), h.AriaHidden(true)],
+          [ghostCardView(card, h)],
+        ),
+    }),
+  )
+export const view = (model: Model, h: HtmlBuilder<Message>): Document => ({
+  title: 'Kanban Board',
+  body: h.div(
+    [h.Class('flex flex-col min-h-screen bg-gray-100')],
+    [
+      h.div(
+        [h.Class('px-6 py-4 bg-white border-b border-gray-200')],
+        [
+          h.h1(
+            [h.Class('text-lg font-semibold text-gray-900')],
+            ['Kanban Board'],
+          ),
+        ],
+      ),
+      h.div(
+        [
+          h.Class(
+            'flex-1 p-6 grid grid-cols-[repeat(auto-fit,minmax(16rem,1fr))] gap-6 items-start',
+          ),
+        ],
+        Array.map(model.columns, column =>
+          columnView(model, column, message => message, h),
+        ),
+      ),
+      ghostElement(model, h),
+      h.div(
+        [h.Class('sr-only'), h.AriaLive('assertive')],
+        [model.announcement],
+      ),
+    ],
+  ),
+})

package/dist/templates/examples/kanban/src/vitest-setup.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import { setup } from 'foldkit/test/vitest'
+setup()

package/dist/templates/examples/managed-resource-layer/package.json ADDED Viewed

@@ -0,0 +1,29 @@
+{
+  "name": "managed-resource-layer-example",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@effect/platform-browser": "4.0.0-rc.109",
+    "@foldkit/ui": "workspace:*",
+    "@tailwindcss/vite": "^4.3.1",
+    "effect": "4.0.0-rc.109",
+    "foldkit": "workspace:*",
+    "tailwindcss": "^4.3.1"
+  },
+  "devDependencies": {
+    "@foldkit/devtools": "workspace:*",
+    "@foldkit/vite-plugin": "workspace:*",
+    "@trivago/prettier-plugin-sort-imports": "^6.0.2",
+    "happy-dom": "^20.10.4",
+    "prettier": "^3.8.4",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.16",
+    "vitest": "^4.1.9"
+  }
+}

package/dist/templates/examples/managed-resource-layer/src/entry.ts ADDED Viewed

@@ -0,0 +1,17 @@
+import { Runtime } from 'foldkit'
+import { Message, Model, init, managedResources, update, view } from './main'
+const application = Runtime.makeApplication({
+  Model,
+  init,
+  update,
+  view,
+  managedResources,
+  container: document.getElementById('root'),
+  devTools: {
+    Message,
+  },
+})
+Runtime.run(application)