create-foldkit-app 0.27.3 → 0.28.0

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

@@ -0,0 +1,452 @@
+import clsx from 'clsx'
+import { Array, Option } from 'effect'
+import { type Html, type HtmlBuilder, childAttributes } from 'foldkit/html'
+
+import { Button, Listbox, RadioGroup, Switch } from '@foldkit/ui'
+
+import { EMPTY_COLOR, GRID_SIZE_STRINGS } from '../constant'
+import { Message } from '../message'
+import { type MirrorMode, type PaletteIndex, type Tool } from '../model'
+import { PALETTE_THEMES, type PaletteTheme } from '../palette'
+
+const TOOLS: ReadonlyArray<Tool> = ['Brush', 'Fill', 'Eraser']
+
+export const TOOL_RADIO_GROUP_ID = 'tool-picker'
+export const GRID_SIZE_RADIO_GROUP_ID = 'grid-size-picker'
+export const PALETTE_RADIO_GROUP_ID = 'palette-picker'
+export const MIRROR_HORIZONTAL_SWITCH_ID = 'mirror-horizontal'
+export const MIRROR_VERTICAL_SWITCH_ID = 'mirror-vertical'
+
+export const ThemeListbox = Listbox.create<string>()
+
+export const ToolRadioGroup = RadioGroup.create<Tool>()
+export const GridSizeRadioGroup = RadioGroup.create()
+export const PaletteRadioGroup = RadioGroup.create()
+
+const TOOL_SHORTCUTS: Record<Tool, string> = {
+  Brush: 'B',
+  Fill: 'F',
+  Eraser: 'E',
+}
+
+export const THEME_INDEX_STRINGS = Array.makeBy(PALETTE_THEMES.length, String)
+
+export const THEME_LISTBOX_ANCHOR: Listbox.AnchorConfig = {
+  placement: 'bottom-start',
+  gap: 4,
+  padding: 8,
+}
+
+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],
+  )
+
+const trashIcon = (className: string, h: HtmlBuilder<Message>): Html =>
+  h.svg(
+    [
+      h.AriaHidden(true),
+      h.Class(className),
+      h.Xmlns('http://www.w3.org/2000/svg'),
+      h.Fill('none'),
+      h.ViewBox('0 0 24 24'),
+      h.StrokeWidth('1.5'),
+      h.Stroke('currentColor'),
+    ],
+    [
+      h.path([
+        h.StrokeLinecap('round'),
+        h.StrokeLinejoin('round'),
+        h.D(
+          'M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0',
+        ),
+      ]),
+    ],
+  )
+
+const chevronDownIcon = (className: string, h: HtmlBuilder<Message>): Html =>
+  h.svg(
+    [
+      h.AriaHidden(true),
+      h.Class(className),
+      h.Xmlns('http://www.w3.org/2000/svg'),
+      h.Fill('none'),
+      h.ViewBox('0 0 24 24'),
+      h.StrokeWidth('1.5'),
+      h.Stroke('currentColor'),
+    ],
+    [
+      h.path([
+        h.StrokeLinecap('round'),
+        h.StrokeLinejoin('round'),
+        h.D('M19.5 8.25l-7.5 7.5-7.5-7.5'),
+      ]),
+    ],
+  )
+
+export const toolPanelView = (
+  mirrorMode: MirrorMode,
+  tool: Tool,
+  gridSize: number,
+  selectedColorIndex: PaletteIndex,
+  isCanvasEmpty: boolean,
+  theme: PaletteTheme,
+  paletteThemeIndex: number,
+  themeListbox: typeof Listbox.Model.Type,
+  toolRadioGroup: RadioGroup.Model,
+  gridSizeRadioGroup: RadioGroup.Model,
+  paletteRadioGroup: RadioGroup.Model,
+  h: HtmlBuilder<Message>,
+): Html =>
+  h.div(
+    [h.Class('w-full md:w-44 flex flex-col gap-5 flex-shrink-0')],
+    [
+      toolSectionView(tool, toolRadioGroup, h),
+      mirrorSectionView(mirrorMode, h),
+      sizeSectionView(gridSize, gridSizeRadioGroup, h),
+      paletteSectionView(
+        selectedColorIndex,
+        theme,
+        paletteThemeIndex,
+        themeListbox,
+        paletteRadioGroup,
+        h,
+      ),
+      clearCanvasView(isCanvasEmpty, h),
+    ],
+  )
+
+const toolSectionView = (
+  selectedTool: Tool,
+  toolRadioGroup: RadioGroup.Model,
+  h: HtmlBuilder<Message>,
+): Html =>
+  h.div(
+    [],
+    [
+      sectionLabel('Tools', h),
+      h.submodel({
+        slotId: toolRadioGroup.id,
+        model: toolRadioGroup,
+        view: ToolRadioGroup.view,
+        viewInputs: {
+          selectedValue: Option.some(selectedTool),
+          options: TOOLS,
+          ariaLabel: 'Drawing tool',
+          toView: ({ group, options }) =>
+            h.div(
+              [...group, h.Class('flex flex-col gap-1.5')],
+              options.map(option => {
+                const tool = option.value
+                return h.button(
+                  [
+                    ...option.option,
+                    h.Class(
+                      clsx(
+                        'flex items-center justify-between px-3 py-1.5 rounded text-sm transition motion-reduce:transition-none w-full cursor-pointer',
+                        {
+                          'bg-indigo-600 text-white': option.isSelected,
+                          'bg-gray-800 text-gray-400 hover:bg-gray-700 hover:text-gray-200':
+                            !option.isSelected,
+                        },
+                      ),
+                    ),
+                  ],
+                  [
+                    h.span([], [tool]),
+                    h.span(
+                      [h.Class('text-xs text-gray-400')],
+                      [TOOL_SHORTCUTS[tool]],
+                    ),
+                  ],
+                )
+              }),
+            ),
+        },
+        toParentMessage: message =>
+          Message.GotToolRadioGroupMessage({ message }),
+      }),
+    ],
+  )
+
+const mirrorSectionView = (
+  mirrorMode: MirrorMode,
+  h: HtmlBuilder<Message>,
+): Html => {
+  const isMirrorHorizontal =
+    mirrorMode === 'Horizontal' || mirrorMode === 'Both'
+  const isMirrorVertical = mirrorMode === 'Vertical' || mirrorMode === 'Both'
+
+  return h.div(
+    [],
+    [
+      sectionLabel('Mirror', h),
+      h.div(
+        [h.Class('flex gap-2')],
+        [
+          Switch.view(
+            {
+              id: MIRROR_HORIZONTAL_SWITCH_ID,
+              isChecked: isMirrorHorizontal,
+              onToggle: () => Message.ToggledMirrorHorizontal(),
+              toView: ({ button, label }) =>
+                h.div(
+                  [h.Class('flex-1')],
+                  [
+                    h.span(
+                      [...label, h.Class('sr-only')],
+                      ['Mirror horizontal'],
+                    ),
+                    h.button(
+                      [
+                        ...button,
+                        h.Class(
+                          clsx(
+                            'w-full px-3 py-1.5 rounded text-sm transition motion-reduce:transition-none cursor-pointer',
+                            {
+                              'bg-indigo-600 text-white': isMirrorHorizontal,
+                              'bg-gray-800 text-gray-400 hover:bg-gray-700 hover:text-gray-200':
+                                !isMirrorHorizontal,
+                            },
+                          ),
+                        ),
+                      ],
+                      ['H'],
+                    ),
+                  ],
+                ),
+            },
+            h,
+          ),
+          Switch.view(
+            {
+              id: MIRROR_VERTICAL_SWITCH_ID,
+              isChecked: isMirrorVertical,
+              onToggle: () => Message.ToggledMirrorVertical(),
+              toView: ({ button, label }) =>
+                h.div(
+                  [h.Class('flex-1')],
+                  [
+                    h.span([...label, h.Class('sr-only')], ['Mirror vertical']),
+                    h.button(
+                      [
+                        ...button,
+                        h.Class(
+                          clsx(
+                            'w-full px-3 py-1.5 rounded text-sm transition motion-reduce:transition-none cursor-pointer',
+                            {
+                              'bg-indigo-600 text-white': isMirrorVertical,
+                              'bg-gray-800 text-gray-400 hover:bg-gray-700 hover:text-gray-200':
+                                !isMirrorVertical,
+                            },
+                          ),
+                        ),
+                      ],
+                      ['V'],
+                    ),
+                  ],
+                ),
+            },
+            h,
+          ),
+        ],
+      ),
+    ],
+  )
+}
+
+const sizeSectionView = (
+  gridSize: number,
+  gridSizeRadioGroup: RadioGroup.Model,
+  h: HtmlBuilder<Message>,
+): Html =>
+  h.div(
+    [],
+    [
+      sectionLabel('Grid Size', h),
+      h.submodel({
+        slotId: gridSizeRadioGroup.id,
+        model: gridSizeRadioGroup,
+        view: GridSizeRadioGroup.view,
+        viewInputs: {
+          selectedValue: Option.some(gridSize.toString()),
+          options: GRID_SIZE_STRINGS,
+          ariaLabel: 'Grid size',
+          orientation: 'Horizontal',
+          toView: ({ group, options }) =>
+            h.div(
+              [...group, h.Class('flex gap-1')],
+              options.map(option =>
+                h.button(
+                  [
+                    ...option.option,
+                    h.Class(
+                      clsx(
+                        'flex-1 px-2 py-1.5 rounded text-sm transition motion-reduce:transition-none cursor-pointer',
+                        {
+                          'bg-indigo-600 text-white': option.isSelected,
+                          'bg-gray-800 text-gray-400 hover:text-gray-200':
+                            !option.isSelected,
+                        },
+                      ),
+                    ),
+                  ],
+                  [option.value],
+                ),
+              ),
+            ),
+        },
+        toParentMessage: message =>
+          Message.GotGridSizeRadioGroupMessage({ message }),
+      }),
+    ],
+  )
+
+const paletteSectionView = (
+  selectedColorIndex: PaletteIndex,
+  theme: PaletteTheme,
+  paletteThemeIndex: number,
+  themeListbox: typeof Listbox.Model.Type,
+  paletteRadioGroup: RadioGroup.Model,
+  h: HtmlBuilder<Message>,
+): Html => {
+  const paletteIndexStrings = theme.colors.map((_, index) => index.toString())
+  const selectedHexColor = theme.colors[selectedColorIndex] ?? EMPTY_COLOR
+
+  return h.div(
+    [],
+    [
+      sectionLabel('Color', h),
+      h.div(
+        [h.Class('text-xs text-gray-400 font-mono pb-3')],
+        [selectedHexColor],
+      ),
+      h.submodel({
+        slotId: paletteRadioGroup.id,
+        model: paletteRadioGroup,
+        view: PaletteRadioGroup.view,
+        viewInputs: {
+          selectedValue: Option.some(selectedColorIndex.toString()),
+          options: paletteIndexStrings,
+          ariaLabel: 'Color palette',
+          orientation: 'Horizontal',
+          toView: ({ group, options }) =>
+            h.div(
+              [...group, h.Class('grid grid-cols-4 gap-2.5')],
+              options.map(option => {
+                const hexColor =
+                  theme.colors[Number(option.value)] ?? EMPTY_COLOR
+                return h.button(
+                  [
+                    ...option.option,
+                    h.Class(
+                      clsx(
+                        'aspect-square rounded-sm transition motion-reduce:transition-none cursor-pointer',
+                        {
+                          'ring-2 ring-white ring-offset-2 ring-offset-gray-900':
+                            option.isSelected,
+                          'hover:scale-105 motion-reduce:hover:scale-100':
+                            !option.isSelected,
+                        },
+                      ),
+                    ),
+                    h.Style({ backgroundColor: hexColor }),
+                  ],
+                  [h.span([...option.label, h.Class('sr-only')], [hexColor])],
+                )
+              }),
+            ),
+        },
+        toParentMessage: message =>
+          Message.GotPaletteRadioGroupMessage({ message }),
+      }),
+      themeListboxView(themeListbox, theme, paletteThemeIndex, h),
+    ],
+  )
+}
+
+const themeListboxView = (
+  themeListbox: typeof Listbox.Model.Type,
+  theme: PaletteTheme,
+  paletteThemeIndex: number,
+  h: HtmlBuilder<Message>,
+): Html =>
+  h.submodel({
+    slotId: themeListbox.id,
+    model: themeListbox,
+    view: ThemeListbox.view,
+    viewInputs: {
+      anchor: THEME_LISTBOX_ANCHOR,
+      items: THEME_INDEX_STRINGS,
+      maybeSelectedValue: Option.some(paletteThemeIndex.toString()),
+      itemToConfig: (indexString, { isSelected }) => {
+        const themeName =
+          PALETTE_THEMES[Number(indexString)]?.name ?? indexString
+        return {
+          className: clsx(
+            'px-3 py-2 text-sm cursor-pointer transition motion-reduce:transition-none',
+            isSelected
+              ? 'bg-indigo-600 text-white'
+              : 'text-gray-300 hover:bg-gray-700',
+          ),
+          content: h.div(
+            [h.Class('flex items-center justify-between')],
+            [
+              h.span([], [themeName]),
+              ...(isSelected ? [h.span([h.Class('text-xs')], ['✓'])] : []),
+            ],
+          ),
+        }
+      },
+      buttonContent: h.div(
+        [h.Class('flex items-center justify-between w-full')],
+        [h.span([], [theme.name]), chevronDownIcon('w-4 h-4 text-gray-400', h)],
+      ),
+      buttonAttributes: childAttributes([
+        h.Class(
+          'w-full px-3 py-1.5 rounded text-sm bg-gray-800 text-gray-200 hover:bg-gray-700 cursor-pointer transition motion-reduce:transition-none',
+        ),
+      ]),
+      itemsAttributes: childAttributes([
+        h.Class(
+          'w-[var(--button-width)] rounded-lg border border-gray-700 bg-gray-800 shadow-lg overflow-hidden z-10 outline-none',
+        ),
+      ]),
+      backdropAttributes: childAttributes([h.Class('fixed inset-0 z-0')]),
+      attributes: childAttributes([h.Class('relative w-full mt-3')]),
+    },
+    toParentMessage: message => Message.GotThemeListboxMessage({ message }),
+  })
+
+const clearCanvasView = (
+  isCanvasEmpty: boolean,
+  h: HtmlBuilder<Message>,
+): Html =>
+  Button.view(
+    {
+      onClick: Message.ClickedClear(),
+      isDisabled: isCanvasEmpty,
+      toView: attributes =>
+        h.button(
+          [
+            ...attributes.button,
+            h.Class(
+              clsx(
+                'w-full flex items-center gap-2 px-3 py-1.5 rounded text-sm bg-gray-800 text-gray-200 transition motion-reduce:transition-none',
+                {
+                  'hover:bg-gray-700 cursor-pointer': !isCanvasEmpty,
+                  'opacity-40 cursor-not-allowed': isCanvasEmpty,
+                },
+              ),
+            ),
+          ],
+          [trashIcon('w-4 h-4', h), h.span([], ['Clear Canvas'])],
+        ),
+    },
+    h,
+  )

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

@@ -0,0 +1,183 @@
+import clsx from 'clsx'
+import { Array, Option, pipe } from 'effect'
+import {
+  type Document,
+  type Html,
+  type HtmlBuilder,
+  createLazy,
+} from 'foldkit/html'
+
+import { Button } from '@foldkit/ui'
+
+import { isGridEmpty } from '../grid'
+import { Message } from '../message'
+import type { Model } from '../model'
+import { currentPaletteTheme } from '../palette'
+import { canvasView } from './canvas'
+import { errorDialogView, gridSizeConfirmDialogView } from './dialog'
+import { historyPanelView } from './history'
+import { toolPanelView } from './toolbar'
+
+const downloadIcon = (className: string, h: HtmlBuilder<Message>): Html =>
+  h.svg(
+    [
+      h.AriaHidden(true),
+      h.Class(className),
+      h.Xmlns('http://www.w3.org/2000/svg'),
+      h.Fill('none'),
+      h.ViewBox('0 0 24 24'),
+      h.StrokeWidth('1.5'),
+      h.Stroke('currentColor'),
+    ],
+    [
+      h.path([
+        h.StrokeLinecap('round'),
+        h.StrokeLinejoin('round'),
+        h.D(
+          'M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3',
+        ),
+      ]),
+    ],
+  )
+
+const secondaryButtonStyle =
+  'px-3 py-1.5 rounded text-sm bg-gray-800 text-gray-200 transition motion-reduce:transition-none'
+
+const lazyHeader = createLazy()
+const lazyToolPanel = createLazy()
+const lazyHistoryPanel = createLazy()
+const lazyErrorDialog = createLazy()
+const lazyGridSizeConfirmDialog = createLazy()
+
+export const view = (model: Model, h: HtmlBuilder<Message>): Document => ({
+  title: 'Pixel Art',
+  body: h.div(
+    [h.Class('min-h-screen bg-gray-900 text-gray-100 flex flex-col')],
+    [
+      lazyHeader(headerView, [h]),
+      contentView(model, h),
+      lazyErrorDialog(errorDialogView, [
+        model.errorDialog,
+        model.maybeExportError,
+        h,
+      ]),
+      lazyGridSizeConfirmDialog(gridSizeConfirmDialogView, [
+        model.gridSizeConfirmDialog,
+        model.maybePendingGridSize,
+        h,
+      ]),
+    ],
+  ),
+})
+
+const headerView = (h: HtmlBuilder<Message>): Html =>
+  h.div(
+    [
+      h.Class(
+        'flex items-center justify-between px-4 py-3 border-b border-gray-800',
+      ),
+    ],
+    [
+      h.div(
+        [h.Class('flex flex-col')],
+        [
+          h.h1(
+            [h.Class('text-lg font-bold tracking-tight leading-none mb-1')],
+            ['PixelForge'],
+          ),
+          h.div(
+            [
+              h.Class(
+                'flex items-center gap-1 text-xs text-gray-400 leading-none',
+              ),
+            ],
+            [
+              h.a(
+                [
+                  h.Href('https://foldkit.dev'),
+                  h.Class('hover:text-gray-200 transition'),
+                ],
+                ['Built with Foldkit'],
+              ),
+              h.span([], ['/']),
+              h.a(
+                [
+                  h.Href(
+                    'https://github.com/foldkit/foldkit/tree/main/examples/pixel-art',
+                  ),
+                  h.Class('hover:text-gray-200 transition'),
+                ],
+                ['Source on GitHub'],
+              ),
+            ],
+          ),
+        ],
+      ),
+      h.div(
+        [h.Class('flex items-center gap-4')],
+        [
+          Button.view(
+            {
+              onClick: Message.ClickedExport(),
+              toView: attributes =>
+                h.button(
+                  [
+                    ...attributes.button,
+                    h.Class(
+                      clsx(
+                        secondaryButtonStyle,
+                        'flex items-center gap-2 hover:bg-gray-700 cursor-pointer',
+                      ),
+                    ),
+                  ],
+                  [downloadIcon('w-4 h-4', h), h.span([], ['Export PNG'])],
+                ),
+            },
+            h,
+          ),
+        ],
+      ),
+    ],
+  )
+
+const contentView = (model: Model, h: HtmlBuilder<Message>): Html => {
+  const theme = currentPaletteTheme(model)
+
+  return h.div(
+    [
+      h.Class(
+        'flex-1 grid gap-6 p-4 md:p-6 grid-cols-1 min-[480px]:grid-cols-2 md:grid-cols-[auto_1fr_auto] md:justify-center md:items-start max-w-5xl mx-auto w-full',
+      ),
+    ],
+    [
+      lazyToolPanel(toolPanelView, [
+        model.mirrorMode,
+        model.tool,
+        model.gridSize,
+        model.selectedColorIndex,
+        isGridEmpty(model.grid),
+        theme,
+        model.paletteThemeIndex,
+        model.themeListbox,
+        model.toolRadioGroup,
+        model.gridSizeRadioGroup,
+        model.paletteRadioGroup,
+        h,
+      ]),
+      canvasView(model, theme, h),
+      lazyHistoryPanel(historyPanelView, [
+        model.undoStack,
+        model.redoStack,
+        model.isDrawing
+          ? pipe(
+              Array.last(model.undoStack),
+              Option.getOrElse(() => model.grid),
+            )
+          : model.grid,
+        model.gridSize,
+        theme,
+        h,
+      ]),
+    ],
+  )
+}

package/dist/templates/examples/pixel-art/src/vitest-setup.ts

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

package/dist/templates/examples/query-sync/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "query-sync-example",
+  "private": true,
+  "version": "0.0.1",
+  "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",
+    "clsx": "^2.1.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"
+  }
+}