create-foldkit-app 0.27.3 → 0.28.0

package/dist/templates/examples/pixel-art/src/view/dialog.ts

@@ -0,0 +1,152 @@
+import { Option } from 'effect'
+import type { Html, HtmlBuilder } from 'foldkit/html'
+
+import { Button, Dialog } from '@foldkit/ui'
+
+import { Message } from '../message'
+
+const dialogClassName =
+  'bg-transparent p-0 open:flex items-center justify-center'
+const backdropClassName = 'fixed inset-0 bg-black/60'
+const panelClassName =
+  'bg-gray-900 border border-gray-700 rounded-lg p-6 max-w-sm relative shadow-xl'
+
+export const errorDialogView = (
+  errorDialog: typeof Dialog.Model.Type,
+  maybeExportError: Option.Option<string>,
+  h: HtmlBuilder<Message>,
+): Html =>
+  h.submodel({
+    slotId: errorDialog.id,
+    model: errorDialog,
+    view: Dialog.view,
+    viewInputs: {
+      toView: ({
+        dialog,
+        backdrop,
+        panel,
+        closeButton,
+        title,
+        description,
+        isVisible,
+      }) =>
+        h.dialog(
+          [...dialog, h.Class(dialogClassName)],
+          isVisible
+            ? [
+                h.div([...backdrop, h.Class(backdropClassName)]),
+                h.div(
+                  [...panel, h.Class(panelClassName)],
+                  Option.match(maybeExportError, {
+                    onNone: () => [],
+                    onSome: error => [
+                      h.h2(
+                        [
+                          ...title,
+                          h.Class('text-lg font-semibold text-red-400 mb-2'),
+                        ],
+                        ['Export Failed'],
+                      ),
+                      h.p(
+                        [...description, h.Class('text-sm text-gray-400 mb-4')],
+                        [error],
+                      ),
+                      h.button(
+                        [
+                          ...closeButton,
+                          h.Class(
+                            'w-full px-4 py-2 bg-gray-800 text-gray-200 rounded hover:bg-gray-700 transition motion-reduce:transition-none cursor-pointer',
+                          ),
+                        ],
+                        ['Dismiss'],
+                      ),
+                    ],
+                  }),
+                ),
+              ]
+            : [],
+        ),
+    },
+    toParentMessage: message => Message.GotErrorDialogMessage({ message }),
+  })
+
+export const gridSizeConfirmDialogView = (
+  gridSizeConfirmDialog: typeof Dialog.Model.Type,
+  maybePendingGridSize: Option.Option<number>,
+  h: HtmlBuilder<Message>,
+): Html =>
+  h.submodel({
+    slotId: gridSizeConfirmDialog.id,
+    model: gridSizeConfirmDialog,
+    view: Dialog.view,
+    viewInputs: {
+      toView: ({
+        dialog,
+        backdrop,
+        panel,
+        closeButton,
+        title,
+        description,
+        isVisible,
+      }) =>
+        h.dialog(
+          [...dialog, h.Class(dialogClassName)],
+          isVisible
+            ? [
+                h.div([...backdrop, h.Class(backdropClassName)]),
+                h.div(
+                  [...panel, h.Class(panelClassName)],
+                  Option.match(maybePendingGridSize, {
+                    onNone: () => [],
+                    onSome: pendingSize => [
+                      h.h2(
+                        [
+                          ...title,
+                          h.Class('text-lg font-semibold text-gray-100 mb-2'),
+                        ],
+                        [`Change to ${pendingSize}×${pendingSize}?`],
+                      ),
+                      h.p(
+                        [...description, h.Class('text-sm text-gray-400 mb-5')],
+                        ['This will clear your canvas and reset undo history.'],
+                      ),
+                      h.div(
+                        [h.Class('flex gap-3')],
+                        [
+                          h.button(
+                            [
+                              ...closeButton,
+                              h.Class(
+                                'flex-1 px-4 py-2 bg-gray-800 text-gray-200 rounded hover:bg-gray-700 transition motion-reduce:transition-none cursor-pointer',
+                              ),
+                            ],
+                            ['Cancel'],
+                          ),
+                          Button.view(
+                            {
+                              onClick: Message.ConfirmedGridSizeChange(),
+                              toView: attributes =>
+                                h.button(
+                                  [
+                                    ...attributes.button,
+                                    h.Class(
+                                      'flex-1 px-4 py-2 bg-red-600 text-white rounded hover:bg-red-500 transition motion-reduce:transition-none cursor-pointer',
+                                    ),
+                                  ],
+                                  ['Clear and Resize'],
+                                ),
+                            },
+                            h,
+                          ),
+                        ],
+                      ),
+                    ],
+                  }),
+                ),
+              ]
+            : [],
+        ),
+    },
+    toParentMessage: message =>
+      Message.GotGridSizeConfirmDialogMessage({ message }),
+  })

package/dist/templates/examples/pixel-art/src/view/history.ts

@@ -0,0 +1,214 @@
+import clsx from 'clsx'
+import { Array, Option } from 'effect'
+import type { Html, HtmlBuilder } from 'foldkit/html'
+
+import { Button } from '@foldkit/ui'
+
+import { THUMBNAIL_CELL_SIZE, VISIBLE_HISTORY_COUNT } from '../constant'
+import { Message } from '../message'
+import type { Grid } from '../model'
+import { type PaletteTheme, resolveColor } from '../palette'
+
+const sectionLabel = (text: string, h: HtmlBuilder<Message>): Html =>
+  h.div(
+    [
+      h.Class(
+        'text-[10px] font-semibold uppercase tracking-widest text-gray-400 mb-2',
+      ),
+    ],
+    [text],
+  )
+
+export const historyPanelView = (
+  undoStack: ReadonlyArray<Grid>,
+  redoStack: ReadonlyArray<Grid>,
+  grid: Grid,
+  gridSize: number,
+  theme: PaletteTheme,
+  h: HtmlBuilder<Message>,
+): Html => {
+  const undoCount = undoStack.length
+  const redoCount = redoStack.length
+  const visibleUndoEntries = Array.takeRight(undoStack, VISIBLE_HISTORY_COUNT)
+  const hiddenUndoCount = undoCount - visibleUndoEntries.length
+
+  return h.div(
+    [h.Class('w-full md:w-44 flex flex-col flex-shrink-0')],
+    [
+      sectionLabel('History', h),
+      h.div(
+        [h.Class('flex flex-col gap-1.5')],
+        [
+          Button.view(
+            {
+              onClick: Message.ClickedUndo(),
+              isDisabled: undoCount === 0,
+              toView: attributes =>
+                h.button(
+                  [
+                    ...attributes.button,
+                    h.Class(
+                      clsx(
+                        'flex items-center justify-between px-3 py-1.5 rounded text-sm transition motion-reduce:transition-none bg-gray-800 w-full',
+                        {
+                          'text-gray-200 hover:bg-gray-700 cursor-pointer':
+                            undoCount > 0,
+                          'text-gray-600 opacity-40 cursor-not-allowed':
+                            undoCount === 0,
+                        },
+                      ),
+                    ),
+                  ],
+                  [
+                    h.span([], ['Undo']),
+                    h.span([h.Class('text-gray-400')], ['⌘Z']),
+                  ],
+                ),
+            },
+            h,
+          ),
+          Button.view(
+            {
+              onClick: Message.ClickedRedo(),
+              isDisabled: redoCount === 0,
+              toView: attributes =>
+                h.button(
+                  [
+                    ...attributes.button,
+                    h.Class(
+                      clsx(
+                        'flex items-center justify-between px-3 py-1.5 rounded text-sm transition motion-reduce:transition-none bg-gray-800 w-full',
+                        {
+                          'text-gray-200 hover:bg-gray-700 cursor-pointer':
+                            redoCount > 0,
+                          'text-gray-600 opacity-40 cursor-not-allowed':
+                            redoCount === 0,
+                        },
+                      ),
+                    ),
+                  ],
+                  [
+                    h.span([], ['Redo']),
+                    h.span([h.Class('text-gray-400')], ['⌘⇧Z']),
+                  ],
+                ),
+            },
+            h,
+          ),
+        ],
+      ),
+      h.div(
+        [h.Class('flex flex-col gap-1.5 overflow-y-auto max-h-[420px] mt-3')],
+        [
+          ...Array.map(redoStack, (entryGrid, index) =>
+            thumbnailEntry(
+              entryGrid,
+              gridSize,
+              false,
+              `Forward ${redoCount - index}`,
+              Option.some(Message.ClickedRedoStep({ stepIndex: index })),
+              theme,
+              h,
+            ),
+          ),
+          thumbnailEntry(
+            grid,
+            gridSize,
+            true,
+            'Current',
+            Option.none(),
+            theme,
+            h,
+          ),
+          ...Array.map(
+            Array.reverse(visibleUndoEntries),
+            (entryGrid, index) => {
+              const stepIndex = undoCount - 1 - index
+              return thumbnailEntry(
+                entryGrid,
+                gridSize,
+                false,
+                `Back ${index + 1}`,
+                Option.some(Message.ClickedHistoryStep({ stepIndex })),
+                theme,
+                h,
+              )
+            },
+          ),
+          ...(hiddenUndoCount > 0
+            ? [
+                h.div(
+                  [h.Class('text-[10px] text-gray-500 text-center py-1')],
+                  [`${hiddenUndoCount} more…`],
+                ),
+              ]
+            : []),
+        ],
+      ),
+    ],
+  )
+}
+
+const thumbnailEntry = (
+  grid: Grid,
+  gridSize: number,
+  isActive: boolean,
+  label: string,
+  maybeOnClick: Option.Option<Message>,
+  theme: PaletteTheme,
+  h: HtmlBuilder<Message>,
+): Html =>
+  h.div(
+    [
+      h.Class(
+        clsx('flex items-center gap-2 px-2 py-1.5 rounded', {
+          'bg-indigo-600 text-white': isActive,
+          'bg-gray-800 cursor-pointer hover:bg-gray-700': !isActive,
+        }),
+      ),
+      ...Array.fromOption(Option.map(maybeOnClick, h.OnClick)),
+      ...Array.fromOption(
+        Option.map(maybeOnClick, clickMessage =>
+          h.OnKeyDownPreventDefault(key =>
+            key === 'Enter' || key === ' '
+              ? Option.some(clickMessage)
+              : Option.none(),
+          ),
+        ),
+      ),
+      ...(Option.isSome(maybeOnClick) ? [h.Role('button'), h.Tabindex(0)] : []),
+    ],
+    [
+      h.div(
+        [
+          h.Class('flex-shrink-0'),
+          h.Style({
+            display: 'grid',
+            'grid-template-columns': `repeat(${gridSize}, ${THUMBNAIL_CELL_SIZE}px)`,
+          }),
+        ],
+        Array.flatMap(grid, row =>
+          Array.map(row, cell =>
+            h.div([
+              h.Style({
+                width: `${THUMBNAIL_CELL_SIZE}px`,
+                height: `${THUMBNAIL_CELL_SIZE}px`,
+                backgroundColor: resolveColor(cell, theme),
+              }),
+            ]),
+          ),
+        ),
+      ),
+      h.span(
+        [
+          h.Class(
+            clsx('text-[10px] truncate', {
+              'text-white': isActive,
+              'text-gray-400': !isActive,
+            }),
+          ),
+        ],
+        [label],
+      ),
+    ],
+  )

package/dist/templates/examples/pixel-art/src/view/index.ts

@@ -0,0 +1 @@
+export { view } from './view'