@pixel-point/toolcraft 0.0.15 → 0.0.16

package/templates/ui/components/controls/file-drop/file-drop-control.tsx

@@ -8,45 +8,68 @@ import {
   useSensor,
   useSensors,
 } from "@dnd-kit/core";
-import {
-  arrayMove,
-  sortableKeyboardCoordinates,
-} from "@dnd-kit/sortable";
+import { sortableKeyboardCoordinates } from "@dnd-kit/sortable";
 
 import { cn } from "../../../lib/utils";
-import { ActionsControl } from "../actions/actions-control";
+import {
+  ActionsControl,
+  type ActionControlObjectOption,
+  type ActionsControlItemState,
+} from "../actions/actions-control";
 import { Field } from "../../primitives";
 import { FileDropEmptyState } from "./file-drop-empty-state";
 import { FileDropFileList } from "./file-drop-file-list";
+import { FileDropFolderInput } from "./file-drop-folder-input";
 import { FileDropImageGrid } from "./file-drop-image-grid";
+import { FileDropPresentationMessages } from "./file-drop-presentation-messages";
 import {
+  createLegacyFileDropPresentation,
   getFileInputAccept,
+  getPresentationItemKey,
   getPreviewKey,
   imageTransformActions,
   isDragLeavingCurrentTarget,
-} from "./file-drop-model";
+  reorderFileDropPresentationItems,
+} from "./file-drop-presentation";
 import { FileDropSinglePreview } from "./file-drop-single-preview";
 import type {
+  FileDropAssetKind,
   FileDropControlProps,
   FileDropImageTransformOperation,
+  FileDropPresentation,
+  FileDropPresentationAction,
+  FileDropPresentationEntry,
+  FileDropPresentationItem,
+  FileDropPreview,
 } from "./file-drop-types";
 
-export function FileDropControl({
+export function FileDropControl<
+  AssetKind extends string = FileDropAssetKind,
+  Feedback = unknown,
+  Status = unknown,
+>({
   accept,
   assetKind = "image",
   multiple = false,
+  onAction,
   onClear,
   onFileSelect,
   onFilesSelect,
+  onFolderSelect,
+  onItemRemove,
+  onItemSelect,
+  onItemsReorder,
   onPreviewRemove,
   onPreviewReorder,
   onPreviewTransform,
+  presentation: providedPresentation,
   preview,
   previews,
-}: FileDropControlProps): React.JSX.Element {
+}: FileDropControlProps<AssetKind, Feedback, Status>): React.JSX.Element {
   const inputRef = React.useRef<HTMLInputElement>(null);
+  const folderInputRef = React.useRef<HTMLInputElement>(null);
   const [dragOver, setDragOver] = React.useState(false);
-  const [selectedPreviewKey, setSelectedPreviewKey] = React.useState<string | null>(null);
+  const [selectedItemKey, setSelectedItemKey] = React.useState<string | null>(null);
   const sensors = useSensors(
     useSensor(PointerSensor, {
       activationConstraint: {
@@ -57,35 +80,105 @@ export function FileDropControl({
       coordinateGetter: sortableKeyboardCoordinates,
     }),
   );
-  const previewItems = previews ?? (preview ? [preview] : []);
-  const hasPreview = previewItems.some((item) => Boolean(item.src));
-  const shouldRenderPreviewGrid = multiple && previewItems.length > 1;
-  const shouldRenderFileList = assetKind === "file" && hasPreview;
-  const previewEntries = previewItems.map((item, index) => ({
-    item,
-    key: getPreviewKey(item, index),
-  }));
-  const previewKeys = previewEntries.map((entry) => entry.key);
-  const requiresImageSelection = assetKind === "image" && multiple && previewEntries.length > 1;
-  const selectedPreviewEntry = requiresImageSelection
-    ? previewEntries.find((entry) => entry.key === selectedPreviewKey)
-    : previewEntries[0];
-  const shouldRenderImageActions =
-    assetKind === "image" &&
-    hasPreview &&
+  const legacy = createLegacyFileDropPresentation({
+    accept,
+    assetKind,
+    multiple,
+    preview,
+    previews,
+  });
+  const usesLegacyPresentation = providedPresentation === undefined;
+  const presentation = (providedPresentation ?? legacy.presentation) as FileDropPresentation<
+    string,
+    unknown,
+    unknown
+  >;
+  const isImagePresenter =
+    presentation.presenter === "image-grid" ||
+    presentation.presenter === "single-image";
+  const requiresPreviewSource = usesLegacyPresentation || isImagePresenter;
+  const itemEntries: readonly FileDropPresentationEntry[] =
+    presentation.items.flatMap((item, sourceIndex) =>
+      requiresPreviewSource && !item.previewSrc
+        ? []
+        : [
+            {
+              item,
+              key: getPresentationItemKey(item, sourceIndex),
+              sourceIndex,
+            },
+          ],
+    );
+  const renderableItems = itemEntries.map((entry) => entry.item);
+  const hasContent = itemEntries.length > 0;
+  const isListPresenter =
+    presentation.presenter === "file-list" || presentation.presenter === "model-item";
+  const itemKeys = itemEntries.map((entry) => entry.key);
+  const legacyPreviewByKey = new Map<string, FileDropPreview>(
+    legacy.previews.map((item, index) => [getPreviewKey(item, index), item]),
+  );
+  const canSelectImageItem = usesLegacyPresentation
+    ? Boolean(onPreviewTransform)
+    : Boolean(onItemSelect);
+  const requiresItemSelection =
+    presentation.presenter === "image-grid" &&
+    itemEntries.length > 1 &&
+    canSelectImageItem;
+  const selectedItemEntry = requiresItemSelection
+    ? itemEntries.find((entry) => entry.key === selectedItemKey)
+    : itemEntries[0];
+  const shouldRenderLegacyImageActions =
+    usesLegacyPresentation &&
+    (presentation.presenter === "image-grid" ||
+      presentation.presenter === "single-image") &&
+    hasContent &&
     Boolean(onPreviewTransform) &&
-    Boolean(selectedPreviewEntry) &&
-    (!requiresImageSelection || selectedPreviewKey !== null);
+    Boolean(selectedItemEntry) &&
+    (!requiresItemSelection || selectedItemKey !== null);
+  const secondaryActions: readonly FileDropPresentationAction[] =
+    shouldRenderLegacyImageActions
+      ? imageTransformActions
+      : presentation.secondaryActions;
+  const actionOptions: readonly ActionControlObjectOption[] = secondaryActions.map(
+    ({ state: _state, ...action }) => action,
+  );
+  const actionStates = secondaryActions.reduce<Record<string, ActionsControlItemState>>(
+    (states, action) => {
+      if (action.state) {
+        states[action.value] = action.state;
+      }
+
+      return states;
+    },
+    {},
+  );
+  const hasReorderHandler = usesLegacyPresentation
+    ? Boolean(onPreviewReorder)
+    : Boolean(onItemsReorder);
+  const canRemoveCollectionItem = usesLegacyPresentation
+    ? Boolean(onPreviewRemove)
+    : Boolean(onItemRemove || (onClear && renderableItems.length === 1));
+
+  if (
+    !usesLegacyPresentation &&
+    onItemsReorder &&
+    presentation.presenter !== "file-list" &&
+    presentation.presenter !== "image-grid"
+  ) {
+    throw new Error(
+      `FileDrop presenter "${presentation.presenter}" does not support item reordering.`,
+    );
+  }
 
   React.useEffect(() => {
-    if (!selectedPreviewKey) {
+    if (!selectedItemKey) {
       return;
     }
 
-    if (!requiresImageSelection || !previewKeys.includes(selectedPreviewKey)) {
-      setSelectedPreviewKey(null);
+    if (!requiresItemSelection || !itemKeys.includes(selectedItemKey)) {
+      setSelectedItemKey(null);
     }
-  }, [previewKeys, requiresImageSelection, selectedPreviewKey]);
+  }, [itemKeys, requiresItemSelection, selectedItemKey]);
 
   function handleFiles(fileList: FileList | readonly File[] | undefined): void {
     const files = Array.from(fileList ?? []);
@@ -94,7 +187,12 @@ export function FileDropControl({
       return;
     }
 
-    if (multiple) {
+    if (!usesLegacyPresentation) {
+      onFilesSelect?.(files);
+      return;
+    }
+
+    if (presentation.allowsFileBatch) {
       if (onFilesSelect) {
         onFilesSelect(files);
         return;
@@ -111,93 +209,150 @@ export function FileDropControl({
     inputRef.current?.click();
   }
 
-  function handleDropTargetClick(event: React.MouseEvent<HTMLDivElement>): void {
-    event.preventDefault();
-    openFileDialog();
+  function openFolderDialog(): void {
+    folderInputRef.current?.click();
   }
 
-  function handleDropTargetKeyDown(event: React.KeyboardEvent<HTMLDivElement>): void {
-    if (event.key !== "Enter" && event.key !== " ") {
+  function handleItemDragEnd(event: DragEndEvent): void {
+    const activeKey = String(event.active.id);
+    const overKey = event.over ? String(event.over.id) : null;
+
+    if (!hasReorderHandler || !overKey || activeKey === overKey) {
+      return;
+    }
+
+    const orderedPresentationItems = reorderFileDropPresentationItems(
+      presentation.items,
+      itemEntries,
+      activeKey,
+      overKey,
+    );
+
+    if (!orderedPresentationItems) {
       return;
     }
 
-    event.preventDefault();
-    openFileDialog();
+    if (usesLegacyPresentation) {
+      const orderedPreviews = orderedPresentationItems.flatMap((item, index) => {
+        const key = getPresentationItemKey(item, index);
+        const legacyPreview = legacyPreviewByKey.get(key);
+
+        return legacyPreview ? [legacyPreview] : [];
+      });
+
+      if (orderedPreviews.length === legacy.previews.length) {
+        onPreviewReorder?.(orderedPreviews);
+      }
+      return;
+    }
+
+    onItemsReorder?.(
+      orderedPresentationItems as FileDropPresentationItem<AssetKind>[],
+    );
   }
 
-  function handlePreviewDragEnd(event: DragEndEvent): void {
-    const activeKey = String(event.active.id);
-    const overKey = event.over ? String(event.over.id) : null;
+  function handleCollectionItemRemove(
+    item: FileDropPresentationItem,
+    index: number,
+  ): void {
+    if (usesLegacyPresentation) {
+      const legacyPreview = legacyPreviewByKey.get(getPresentationItemKey(item, index));
+
+      if (legacyPreview) {
+        onPreviewRemove?.(legacyPreview, index);
+      }
+      return;
+    }
 
-    if (!onPreviewReorder || !overKey || activeKey === overKey) {
+    if (onItemRemove) {
+      onItemRemove(item as FileDropPresentationItem<AssetKind>, index);
       return;
     }
 
-    const activeIndex = previewKeys.indexOf(activeKey);
-    const overIndex = previewKeys.indexOf(overKey);
+    if (renderableItems.length === 1) {
+      onClear?.();
+    }
+  }
+
+  function handleSingleItemRemove(): void {
+    const entry = itemEntries[0];
 
-    if (activeIndex < 0 || overIndex < 0 || activeIndex === overIndex) {
+    if (usesLegacyPresentation) {
+      onClear?.();
       return;
     }
 
-    onPreviewReorder(
-      arrayMove(previewEntries, activeIndex, overIndex).map((entry) => entry.item),
-    );
+    if (entry && onItemRemove) {
+      onItemRemove(
+        entry.item as FileDropPresentationItem<AssetKind>,
+        entry.sourceIndex,
+      );
+      return;
+    }
+
+    onClear?.();
+  }
+
+  function runLegacyImageTransform(operation: FileDropImageTransformOperation): void {
+    if (!selectedItemEntry) {
+      return;
+    }
+
+    const legacyPreview = legacyPreviewByKey.get(selectedItemEntry.key);
+
+    if (legacyPreview) {
+      onPreviewTransform?.(legacyPreview, operation);
+    }
   }
 
-  function runImageTransform(operation: FileDropImageTransformOperation): void {
-    if (!selectedPreviewEntry) {
+  function handleSecondaryAction(value: string): void {
+    if (shouldRenderLegacyImageActions) {
+      runLegacyImageTransform(value as FileDropImageTransformOperation);
       return;
     }
 
-    onPreviewTransform?.(selectedPreviewEntry.item, operation);
+    onAction?.(value);
   }
 
   return (
     <Field className="min-w-0" style={{ gap: "6px" }}>
       <input
-        accept={getFileInputAccept(accept)}
-        aria-hidden="true"
+        accept={getFileInputAccept(presentation.accept)}
+        aria-label={presentation.emptyTitle}
         className="hidden"
         onChange={(event) => {
           handleFiles(event.currentTarget.files ?? undefined);
           event.currentTarget.value = "";
         }}
-        multiple={multiple}
+        multiple={presentation.allowsFileBatch}
         ref={inputRef}
         tabIndex={-1}
         type="file"
       />
+      {presentation.allowsFolderSelection ? (
+        <FileDropFolderInput
+          ariaLabel={`${presentation.emptyTitle} folder`}
+          inputRef={folderInputRef}
+          onFilesSelect={onFolderSelect}
+        />
+      ) : null}
       <div
         aria-label={
-          hasPreview
-            ? multiple
-              ? assetKind === "file"
-                ? "Drop files"
-                : "Drop image files"
-              : assetKind === "file"
-                ? "Replace file"
-                : "Replace image file"
-            : multiple
-              ? assetKind === "file"
-                ? "Browse files"
-                : "Browse image files"
-              : assetKind === "file"
-                ? "Browse file"
-                : "Browse image file"
+          usesLegacyPresentation
+            ? legacy.dropTargetLabel
+            : `${presentation.emptyTitle}. ${presentation.emptyDescription}`
         }
         className={cn(
-          "group/file-upload relative flex min-h-16 w-full cursor-pointer flex-col items-center justify-center gap-1.5 rounded-lg border border-dashed border-[color:color-mix(in_oklab,var(--border)_18%,transparent)] bg-[color:color-mix(in_oklab,var(--foreground)_3%,transparent)] text-center shadow-none transition-[background-color,border-color,box-shadow] duration-150 ease-out data-[drag-over=true]:border-[color:color-mix(in_oklab,var(--link)_28%,transparent)] data-[drag-over=true]:bg-[color:color-mix(in_oklab,var(--link)_13%,transparent)] data-[drag-over=true]:shadow-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--background)]",
-          !shouldRenderFileList &&
+          "group/file-upload relative flex min-h-16 w-full flex-col items-center justify-center gap-1.5 rounded-lg border border-dashed border-[color:color-mix(in_oklab,var(--border)_18%,transparent)] bg-[color:color-mix(in_oklab,var(--foreground)_3%,transparent)] text-center shadow-none transition-[background-color,border-color,box-shadow] duration-150 ease-out data-[drag-over=true]:border-[color:color-mix(in_oklab,var(--link)_28%,transparent)] data-[drag-over=true]:bg-[color:color-mix(in_oklab,var(--link)_13%,transparent)] data-[drag-over=true]:shadow-none",
+          !isListPresenter &&
             "hover:border-[color:color-mix(in_oklab,var(--border)_35%,transparent)] hover:bg-[color:color-mix(in_oklab,var(--foreground)_6%,transparent)]",
-          hasPreview
-            ? shouldRenderFileList
+          hasContent
+            ? isListPresenter
               ? "overflow-hidden p-1.5"
               : "overflow-hidden p-2"
-            : "px-3 py-3",
+            : "p-0",
         )}
         data-drag-over={dragOver}
-        onClick={handleDropTargetClick}
         onDragEnter={(event) => {
           event.preventDefault();
           setDragOver(true);
@@ -216,48 +371,114 @@ export function FileDropControl({
           setDragOver(false);
           handleFiles(event.dataTransfer?.files ?? undefined);
         }}
-        onKeyDown={handleDropTargetKeyDown}
-        role="button"
-        tabIndex={0}
+        role="group"
       >
-        {shouldRenderFileList ? (
+        {!hasContent ? (
+          <FileDropEmptyState
+            description={presentation.emptyDescription}
+            onActivate={openFileDialog}
+            onFolderActivate={
+              presentation.allowsFolderSelection ? openFolderDialog : undefined
+            }
+            title={presentation.emptyTitle}
+          />
+        ) : presentation.presenter === "file-list" ? (
           <FileDropFileList
-            isSortable={Boolean(onPreviewReorder) && previewEntries.length > 1}
+            isSortable={hasReorderHandler && itemEntries.length > 1}
             onAddFile={openFileDialog}
-            onDragEnd={handlePreviewDragEnd}
-            onPreviewRemove={onPreviewRemove}
-            previewEntries={previewEntries}
-            previewKeys={previewKeys}
+            onDragEnd={handleItemDragEnd}
+            onItemRemove={
+              canRemoveCollectionItem ? handleCollectionItemRemove : undefined
+            }
+            previewEntries={itemEntries}
+            previewKeys={itemKeys}
             sensors={sensors}
           />
-        ) : shouldRenderPreviewGrid ? (
+        ) : presentation.presenter === "image-grid" ? (
           <FileDropImageGrid
-            isSortable={Boolean(onPreviewReorder)}
+            isSortable={hasReorderHandler && itemEntries.length > 1}
             onAddImages={openFileDialog}
-            onDragEnd={handlePreviewDragEnd}
-            onPreviewRemove={onPreviewRemove}
-            onPreviewSelect={(key) => {
-              setSelectedPreviewKey((currentKey) => (currentKey === key ? null : key));
-            }}
-            previewEntries={previewEntries}
-            previewKeys={previewKeys}
-            selectedPreviewKey={selectedPreviewKey}
+            onDragEnd={handleItemDragEnd}
+            onItemRemove={
+              canRemoveCollectionItem ? handleCollectionItemRemove : undefined
+            }
+            onPreviewSelect={
+              canSelectImageItem
+                ? (key) => {
+                    const entry = itemEntries.find((candidate) => candidate.key === key);
+
+                    if (!entry) {
+                      return;
+                    }
+
+                    if (usesLegacyPresentation) {
+                      setSelectedItemKey((currentKey) =>
+                        currentKey === key ? null : key,
+                      );
+                      return;
+                    }
+
+                    setSelectedItemKey(key);
+                    onItemSelect?.(
+                      entry.item as FileDropPresentationItem<AssetKind>,
+                      entry.sourceIndex,
+                    );
+                  }
+                : undefined
+            }
+            previewEntries={itemEntries}
+            previewKeys={itemKeys}
+            selectedPreviewKey={selectedItemKey}
+            sensors={sensors}
+          />
+        ) : presentation.presenter === "model-item" ? (
+          <FileDropFileList
+            isSortable={false}
+            onDragEnd={handleItemDragEnd}
+            onItemActivate={openFileDialog}
+            onItemRemove={
+              canRemoveCollectionItem ? handleCollectionItemRemove : undefined
+            }
+            previewEntries={itemEntries}
+            previewKeys={itemKeys}
             sensors={sensors}
           />
-        ) : hasPreview ? (
-          <FileDropSinglePreview onClear={onClear} preview={previewItems[0]} />
         ) : (
-          <FileDropEmptyState assetKind={assetKind} />
+          <FileDropSinglePreview
+            item={renderableItems[0]}
+            onActivate={openFileDialog}
+            onRemove={
+              usesLegacyPresentation
+                ? onClear
+                  ? handleSingleItemRemove
+                  : undefined
+                : onItemRemove || onClear
+                  ? handleSingleItemRemove
+                  : undefined
+            }
+          />
         )}
       </div>
-      {shouldRenderImageActions ? (
+      <FileDropPresentationMessages
+        feedback={presentation.feedback}
+        status={presentation.status}
+      />
+      {secondaryActions.length > 0 ? (
         <ActionsControl
-          actions={imageTransformActions}
-          buttonColumns={3}
-          name="Image transforms"
-          onAction={(operation) =>
-            runImageTransform(operation as FileDropImageTransformOperation)
+          actionStates={
+            shouldRenderLegacyImageActions || onAction
+              ? actionStates
+              : Object.fromEntries(
+                  secondaryActions.map((action) => [
+                    action.value,
+                    { ...action.state, disabled: true },
+                  ]),
+                )
           }
+          actions={actionOptions}
+          buttonColumns={isImagePresenter ? 3 : undefined}
+          name={isImagePresenter ? "Image transforms" : "File actions"}
+          onAction={handleSecondaryAction}
           showLabel={false}
         />
       ) : null}

package/templates/ui/components/controls/file-drop/file-drop-empty-state.tsx

@@ -2,15 +2,17 @@
 
 import { CloudArrowUpIcon } from "@phosphor-icons/react";
 
-import type { FileDropAssetKind } from "./file-drop-types";
-
 type FileDropEmptyStateProps = {
-  assetKind: FileDropAssetKind;
+  description: string;
+  onActivate: () => void;
+  onFolderActivate?: () => void;
+  title: string;
 };
 
-export function FileDropEmptyState({
-  assetKind,
-}: FileDropEmptyStateProps): React.JSX.Element {
+function FileDropEmptyStateContent({
+  description,
+  title,
+}: Pick<FileDropEmptyStateProps, "description" | "title">): React.JSX.Element {
   return (
     <>
       <CloudArrowUpIcon
@@ -18,18 +20,50 @@ export function FileDropEmptyState({
         weight="light"
       />
       <p className="m-0 flex max-w-full flex-col text-xs leading-tight text-[color:color-mix(in_oklab,var(--foreground)_60%,transparent)] transition-colors duration-150 ease-out group-hover/file-upload:text-[color:color-mix(in_oklab,var(--foreground)_85%,transparent)] group-data-[drag-over=true]/file-upload:text-[color:var(--link)]">
-        {assetKind === "file" ? (
-          <>
-            <span>Click to upload a file</span>
-            <span>or drag it onto the canvas</span>
-          </>
-        ) : (
-          <>
-            <span>Click to upload an image</span>
-            <span>or drag it onto the canvas</span>
-          </>
-        )}
+        <span>{title}</span>
+        <span>{description}</span>
       </p>
     </>
   );
 }
+
+export function FileDropEmptyState({
+  description,
+  onActivate,
+  onFolderActivate,
+  title,
+}: FileDropEmptyStateProps): React.JSX.Element {
+  if (onFolderActivate) {
+    return (
+      <div className="flex w-full min-w-0 flex-col items-center justify-center gap-2 px-3 py-3 text-center">
+        <FileDropEmptyStateContent description={description} title={title} />
+        <div className="flex flex-wrap items-center justify-center gap-1.5">
+          <button
+            className="rounded-md border border-[color:var(--border)] bg-transparent px-2.5 py-1 text-xs font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--ring)]"
+            onClick={onActivate}
+            type="button"
+          >
+            Choose files
+          </button>
+          <button
+            className="rounded-md border border-[color:var(--border)] bg-transparent px-2.5 py-1 text-xs font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--ring)]"
+            onClick={onFolderActivate}
+            type="button"
+          >
+            Choose folder
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <button
+      className="flex w-full min-w-0 flex-col items-center justify-center gap-1.5 rounded-[calc(var(--radius-lg)-4px)] border-0 bg-transparent px-3 py-3 text-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--ring)]"
+      onClick={onActivate}
+      type="button"
+    >
+      <FileDropEmptyStateContent description={description} title={title} />
+    </button>
+  );
+}