Add FileUploader, RestForm, RestFormModal, and SearchableInput components

Co-authored-by: TechQuery <[email protected]>

Author: Copilot

registry.json

@@ -222,6 +222,95 @@
           "type": "registry:component"
         }
       ]
+    },
+    {
+      "name": "file-uploader",
+      "type": "registry:component",
+      "title": "File Uploader",
+      "description": "A file uploader component with drag-and-drop support for managing multiple files using MobX.",
+      "registryDependencies": ["file-picker"],
+      "dependencies": [
+        "mobx",
+        "mobx-react",
+        "mobx-react-helper",
+        "mobx-restful"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/file-uploader/file-uploader.tsx",
+          "type": "registry:component"
+        }
+      ]
+    },
+    {
+      "name": "rest-form",
+      "type": "registry:component",
+      "title": "REST Form",
+      "description": "A comprehensive form component for CRUD operations with MobX RESTful integration, supporting various field types and validation.",
+      "registryDependencies": [
+        "button",
+        "label",
+        "badge-input",
+        "file-preview",
+        "file-uploader",
+        "form-field"
+      ],
+      "dependencies": [
+        "mobx",
+        "mobx-i18n",
+        "mobx-react",
+        "mobx-react-helper",
+        "mobx-restful",
+        "web-utility"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/rest-form/rest-form.tsx",
+          "type": "registry:component"
+        }
+      ]
+    },
+    {
+      "name": "rest-form-modal",
+      "type": "registry:component",
+      "title": "REST Form Modal",
+      "description": "A modal wrapper for REST Form component, displaying forms in a dialog for editing data.",
+      "registryDependencies": ["dialog", "rest-form"],
+      "dependencies": ["mobx-react", "mobx-restful", "web-utility"],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/rest-form-modal/rest-form-modal.tsx",
+          "type": "registry:component"
+        }
+      ]
+    },
+    {
+      "name": "searchable-input",
+      "type": "registry:component",
+      "title": "Searchable Input",
+      "description": "A searchable input component with autocomplete, supporting multiple selections and inline creation of new items.",
+      "registryDependencies": [
+        "button",
+        "input",
+        "badge-bar",
+        "badge-input",
+        "rest-form-modal",
+        "scroll-list"
+      ],
+      "dependencies": [
+        "lodash.debounce",
+        "mobx",
+        "mobx-react",
+        "mobx-react-helper",
+        "mobx-restful",
+        "web-utility"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/searchable-input/searchable-input.tsx",
+          "type": "registry:component"
+        }
+      ]
     }
   ]
 }

registry/new-york/blocks/file-uploader/example.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { useState } from "react";
+import { makeObservable } from "mobx";
+
+import { FileModel, FileUploader } from "./file-uploader";
+
+class ExampleFileModel extends FileModel {
+  constructor() {
+    super();
+    makeObservable(this);
+  }
+}
+
+export const FileUploaderExample = () => {
+  const [store] = useState(() => new ExampleFileModel());
+
+  return (
+    <div className="w-full space-y-8">
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Single File Upload</h3>
+        <FileUploader
+          store={store}
+          name="single-file"
+          accept="image/*"
+          defaultValue={[]}
+        />
+        <p className="text-sm text-muted-foreground mt-2">
+          Upload a single image file
+        </p>
+      </div>
+
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Multiple Files Upload</h3>
+        <FileUploader
+          store={store}
+          name="multiple-files"
+          accept="image/*"
+          multiple
+          defaultValue={[]}
+        />
+        <p className="text-sm text-muted-foreground mt-2">
+          Upload multiple image files (drag to reorder)
+        </p>
+      </div>
+
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Uploaded Files</h3>
+        <pre className="p-4 bg-muted rounded-md text-xs overflow-auto">
+          {JSON.stringify(store.files, null, 2)}
+        </pre>
+      </div>
+    </div>
+  );
+};

registry/new-york/blocks/file-uploader/file-uploader.tsx

@@ -0,0 +1,162 @@
+"use client";
+
+import { observable } from "mobx";
+import { observer } from "mobx-react";
+import { FormComponent, FormComponentProps, reaction } from "mobx-react-helper";
+import { BaseModel } from "mobx-restful";
+import { DragEvent } from "react";
+
+import { FilePicker } from "../file-picker/file-picker";
+
+export abstract class FileModel extends BaseModel {
+  @observable
+  accessor files: string[] = [];
+
+  clear() {
+    super.clear();
+
+    this.files = [];
+  }
+
+  /**
+   * Override this method for Network calling,
+   * then call `super.upload(fileURL)` to update `this.files` array.
+   */
+  async upload(file: string | Blob) {
+    if (file instanceof Blob) file = URL.createObjectURL(file);
+
+    const { files } = this;
+
+    if (!files.includes(file)) this.files = [...files, file];
+
+    return file;
+  }
+
+  /**
+   * Override this method for Network calling,
+   * then call `super.delete(fileURL)` to update `this.files` array.
+   */
+  async delete(file: string) {
+    const { files } = this;
+    const index = files.indexOf(file);
+
+    this.files = [...files.slice(0, index), ...files.slice(index + 1)];
+  }
+
+  move(sourceIndex: number, targetIndex: number) {
+    const { files } = this;
+    const sourceFile = files[sourceIndex],
+      targetFile = files[targetIndex];
+    const frontIndex = Math.min(sourceIndex, targetIndex),
+      backIndex = Math.max(sourceIndex, targetIndex);
+
+    const front = files.slice(0, frontIndex),
+      middle = files.slice(frontIndex + 1, backIndex),
+      back = files.slice(backIndex + 1);
+
+    this.files =
+      sourceIndex < targetIndex
+        ? [...front, ...middle, targetFile, sourceFile, ...back]
+        : [...front, sourceFile, targetFile, ...middle, ...back];
+  }
+}
+
+export interface FileUploaderProps extends FormComponentProps<string[]> {
+  store: FileModel;
+}
+
+@observer
+export class FileUploader extends FormComponent<FileUploaderProps> {
+  static readonly displayName = "FileUploader";
+
+  @observable
+  accessor pickIndex: number | undefined;
+
+  componentDidMount() {
+    super.componentDidMount();
+
+    const { store } = this.props;
+
+    store.files = this.value || [];
+  }
+
+  @reaction(({ value }) => value)
+  protected restoreFile(value: FileUploaderProps["value"]) {
+    const { store } = this.props;
+
+    store.files = value;
+  }
+
+  handleDrop = (index: number) => (event: DragEvent<HTMLElement>) => {
+    event.preventDefault();
+
+    const { props, pickIndex } = this;
+
+    if (!(pickIndex != null)) return;
+
+    props.store.move(pickIndex, index);
+
+    this.innerValue = props.store.files;
+  };
+
+  handleChange =
+    (oldURI = "") =>
+    async (file: File) => {
+      const { store } = this.props;
+
+      if (oldURI) await store.delete(oldURI);
+      if (file) await store.upload(file);
+
+      this.innerValue = store.files;
+    };
+
+  render() {
+    const {
+      className = "",
+      style,
+      multiple,
+      store,
+      value: _,
+      defaultValue,
+      onChange,
+      ...props
+    } = this.props;
+
+    const { value } = this;
+
+    return (
+      <ol
+        className={`flex flex-wrap gap-2 list-none m-0 ${className}`}
+        style={style}
+        onDragOver={(event) => event.preventDefault()}
+      >
+        {value?.map((file, index) => (
+          <li
+            key={file}
+            className="inline-block"
+            draggable
+            onDragStart={() => (this.pickIndex = index)}
+            onDrop={this.handleDrop(index)}
+          >
+            <FilePicker
+              {...props}
+              value={file}
+              onChange={this.handleChange(file)}
+            />
+          </li>
+        ))}
+        {(multiple || !value?.[0]) && (
+          <li className="inline-block">
+            <FilePicker
+              {...props}
+              name={undefined}
+              value=""
+              required={!value?.[0] && props.required}
+              onChange={this.handleChange()}
+            />
+          </li>
+        )}
+      </ol>
+    );
+  }
+}