@fluxfiles/react 1.0.0

package/dist/index.d.mts

@@ -0,0 +1,202 @@
+import React$1 from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/** A file or directory entry returned by FluxFiles. */
+interface FluxFile {
+    path: string;
+    basename: string;
+    type: 'file' | 'dir';
+    size?: number;
+    mime?: string;
+    modified?: number;
+    url?: string;
+    title?: string;
+    alt_text?: string;
+    caption?: string;
+    hash?: string;
+    variants?: Record<string, string>;
+}
+/** Event payload dispatched by the file manager iframe. */
+interface FluxEvent {
+    action: string;
+    disk?: string;
+    path?: string;
+    file?: FluxFile;
+    [key: string]: unknown;
+}
+/** Configuration for the FluxFiles component. */
+interface FluxFilesConfig {
+    /** Base URL of the FluxFiles API. */
+    endpoint: string;
+    /** JWT token for authentication. */
+    token: string;
+    /** Storage disk to use. */
+    disk?: string;
+    /** Display mode: "picker" selects a file, "browser" is free-browse. */
+    mode?: 'picker' | 'browser';
+    /** Filter displayed file types (e.g. ["image/*", ".pdf"]). */
+    allowedTypes?: string[] | null;
+    /** Max file size filter in bytes. */
+    maxSize?: number | null;
+    /** Locale code (e.g. "en", "vi", "ar"). */
+    locale?: string | null;
+}
+/** Props for the <FluxFiles /> embedded component. */
+interface FluxFilesProps extends FluxFilesConfig {
+    /** Container width. */
+    width?: string | number;
+    /** Container height. */
+    height?: string | number;
+    /** CSS class for the wrapper div. */
+    className?: string;
+    /** Inline styles for the wrapper div. */
+    style?: React.CSSProperties;
+    /** Fired when a file is selected (picker mode). */
+    onSelect?: (file: FluxFile) => void;
+    /** Fired when the file manager signals a close. */
+    onClose?: () => void;
+    /** Fired when the iframe is ready. */
+    onReady?: () => void;
+    /** Fired on file operations (upload, delete, move, etc.). */
+    onEvent?: (event: FluxEvent) => void;
+}
+/** Props for the <FluxFilesModal /> component. */
+interface FluxFilesModalProps extends FluxFilesConfig {
+    /** Whether the modal is open. */
+    open: boolean;
+    /** Fired when a file is selected. */
+    onSelect?: (file: FluxFile) => void;
+    /** Fired when the modal should close (overlay click, escape, or FM_CLOSE). */
+    onClose?: () => void;
+    /** Fired when the iframe is ready. */
+    onReady?: () => void;
+    /** Fired on file operations. */
+    onEvent?: (event: FluxEvent) => void;
+    /** CSS class for the overlay. */
+    overlayClassName?: string;
+    /** CSS class for the modal content. */
+    modalClassName?: string;
+}
+/** Commands that can be sent to the file manager. */
+type FluxCommand = {
+    action: 'navigate';
+    path: string;
+} | {
+    action: 'setDisk';
+    disk: string;
+} | {
+    action: 'refresh';
+} | {
+    action: 'search';
+    q: string;
+} | {
+    action: 'crossCopy';
+    dst_disk: string;
+    dst_path?: string;
+} | {
+    action: 'crossMove';
+    dst_disk: string;
+    dst_path?: string;
+} | {
+    action: 'crop';
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    save_path?: string;
+} | {
+    action: 'aiTag';
+};
+/** Return type of useFluxFiles hook. */
+interface FluxFilesHandle {
+    /** Send a command to the iframe. */
+    command: (action: string, data?: Record<string, unknown>) => void;
+    /** Navigate to a path. */
+    navigate: (path: string) => void;
+    /** Switch disk. */
+    setDisk: (disk: string) => void;
+    /** Refresh the file list. */
+    refresh: () => void;
+    /** Search files. */
+    search: (q: string) => void;
+    /** Copy selected files to another disk. */
+    crossCopy: (dstDisk: string, dstPath?: string) => void;
+    /** Move selected files to another disk. */
+    crossMove: (dstDisk: string, dstPath?: string) => void;
+    /** Crop the currently selected image. */
+    crop: (x: number, y: number, width: number, height: number, savePath?: string) => void;
+    /** Trigger AI tagging on the currently selected image. */
+    aiTag: () => void;
+    /** Whether the iframe has reported ready. */
+    ready: boolean;
+}
+
+/**
+ * Embedded FluxFiles file manager component.
+ *
+ * Renders an iframe inside a container div. Use `ref` to access command methods.
+ *
+ * @example
+ * ```tsx
+ * const ref = useRef<FluxFilesHandle>(null);
+ *
+ * <FluxFiles
+ *   ref={ref}
+ *   endpoint="https://files.example.com"
+ *   token={jwt}
+ *   disk="local"
+ *   onSelect={(file) => console.log(file)}
+ *   height="600px"
+ * />
+ *
+ * // Programmatic control:
+ * ref.current?.navigate('/uploads');
+ * ref.current?.refresh();
+ * ```
+ */
+declare const FluxFiles: React$1.ForwardRefExoticComponent<FluxFilesProps & React$1.RefAttributes<FluxFilesHandle>>;
+
+/**
+ * Modal wrapper for FluxFiles.
+ *
+ * Renders a fullscreen overlay with the file manager when `open` is true.
+ *
+ * @example
+ * ```tsx
+ * const [open, setOpen] = useState(false);
+ *
+ * <button onClick={() => setOpen(true)}>Pick file</button>
+ *
+ * <FluxFilesModal
+ *   open={open}
+ *   endpoint="https://files.example.com"
+ *   token={jwt}
+ *   onSelect={(file) => {
+ *     console.log(file);
+ *     setOpen(false);
+ *   }}
+ *   onClose={() => setOpen(false)}
+ * />
+ * ```
+ */
+declare function FluxFilesModal({ open, endpoint, token, disk, mode, allowedTypes, maxSize, onSelect, onClose, onReady, onEvent, overlayClassName, modalClassName, }: FluxFilesModalProps): react_jsx_runtime.JSX.Element | null;
+
+interface UseFluxFilesOptions extends FluxFilesConfig {
+    onSelect?: (file: FluxFile) => void;
+    onClose?: () => void;
+    onReady?: () => void;
+    onEvent?: (event: FluxEvent) => void;
+}
+/**
+ * Low-level hook that manages the postMessage bridge to a FluxFiles iframe.
+ *
+ * Returns a ref callback to attach to the iframe element, plus command helpers.
+ */
+declare function useFluxFiles(options: UseFluxFilesOptions): FluxFilesHandle & {
+    /** Ref callback — attach to the <iframe> element. */
+    iframeRef: (el: HTMLIFrameElement | null) => void;
+    /** The iframe src URL. */
+    iframeSrc: string;
+};
+
+export { type FluxCommand, type FluxEvent, type FluxFile, FluxFiles, type FluxFilesConfig, type FluxFilesHandle, FluxFilesModal, type FluxFilesModalProps, type FluxFilesProps, useFluxFiles };

package/dist/index.d.ts

@@ -0,0 +1,202 @@
+import React$1 from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/** A file or directory entry returned by FluxFiles. */
+interface FluxFile {
+    path: string;
+    basename: string;
+    type: 'file' | 'dir';
+    size?: number;
+    mime?: string;
+    modified?: number;
+    url?: string;
+    title?: string;
+    alt_text?: string;
+    caption?: string;
+    hash?: string;
+    variants?: Record<string, string>;
+}
+/** Event payload dispatched by the file manager iframe. */
+interface FluxEvent {
+    action: string;
+    disk?: string;
+    path?: string;
+    file?: FluxFile;
+    [key: string]: unknown;
+}
+/** Configuration for the FluxFiles component. */
+interface FluxFilesConfig {
+    /** Base URL of the FluxFiles API. */
+    endpoint: string;
+    /** JWT token for authentication. */
+    token: string;
+    /** Storage disk to use. */
+    disk?: string;
+    /** Display mode: "picker" selects a file, "browser" is free-browse. */
+    mode?: 'picker' | 'browser';
+    /** Filter displayed file types (e.g. ["image/*", ".pdf"]). */
+    allowedTypes?: string[] | null;
+    /** Max file size filter in bytes. */
+    maxSize?: number | null;
+    /** Locale code (e.g. "en", "vi", "ar"). */
+    locale?: string | null;
+}
+/** Props for the <FluxFiles /> embedded component. */
+interface FluxFilesProps extends FluxFilesConfig {
+    /** Container width. */
+    width?: string | number;
+    /** Container height. */
+    height?: string | number;
+    /** CSS class for the wrapper div. */
+    className?: string;
+    /** Inline styles for the wrapper div. */
+    style?: React.CSSProperties;
+    /** Fired when a file is selected (picker mode). */
+    onSelect?: (file: FluxFile) => void;
+    /** Fired when the file manager signals a close. */
+    onClose?: () => void;
+    /** Fired when the iframe is ready. */
+    onReady?: () => void;
+    /** Fired on file operations (upload, delete, move, etc.). */
+    onEvent?: (event: FluxEvent) => void;
+}
+/** Props for the <FluxFilesModal /> component. */
+interface FluxFilesModalProps extends FluxFilesConfig {
+    /** Whether the modal is open. */
+    open: boolean;
+    /** Fired when a file is selected. */
+    onSelect?: (file: FluxFile) => void;
+    /** Fired when the modal should close (overlay click, escape, or FM_CLOSE). */
+    onClose?: () => void;
+    /** Fired when the iframe is ready. */
+    onReady?: () => void;
+    /** Fired on file operations. */
+    onEvent?: (event: FluxEvent) => void;
+    /** CSS class for the overlay. */
+    overlayClassName?: string;
+    /** CSS class for the modal content. */
+    modalClassName?: string;
+}
+/** Commands that can be sent to the file manager. */
+type FluxCommand = {
+    action: 'navigate';
+    path: string;
+} | {
+    action: 'setDisk';
+    disk: string;
+} | {
+    action: 'refresh';
+} | {
+    action: 'search';
+    q: string;
+} | {
+    action: 'crossCopy';
+    dst_disk: string;
+    dst_path?: string;
+} | {
+    action: 'crossMove';
+    dst_disk: string;
+    dst_path?: string;
+} | {
+    action: 'crop';
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    save_path?: string;
+} | {
+    action: 'aiTag';
+};
+/** Return type of useFluxFiles hook. */
+interface FluxFilesHandle {
+    /** Send a command to the iframe. */
+    command: (action: string, data?: Record<string, unknown>) => void;
+    /** Navigate to a path. */
+    navigate: (path: string) => void;
+    /** Switch disk. */
+    setDisk: (disk: string) => void;
+    /** Refresh the file list. */
+    refresh: () => void;
+    /** Search files. */
+    search: (q: string) => void;
+    /** Copy selected files to another disk. */
+    crossCopy: (dstDisk: string, dstPath?: string) => void;
+    /** Move selected files to another disk. */
+    crossMove: (dstDisk: string, dstPath?: string) => void;
+    /** Crop the currently selected image. */
+    crop: (x: number, y: number, width: number, height: number, savePath?: string) => void;
+    /** Trigger AI tagging on the currently selected image. */
+    aiTag: () => void;
+    /** Whether the iframe has reported ready. */
+    ready: boolean;
+}
+
+/**
+ * Embedded FluxFiles file manager component.
+ *
+ * Renders an iframe inside a container div. Use `ref` to access command methods.
+ *
+ * @example
+ * ```tsx
+ * const ref = useRef<FluxFilesHandle>(null);
+ *
+ * <FluxFiles
+ *   ref={ref}
+ *   endpoint="https://files.example.com"
+ *   token={jwt}
+ *   disk="local"
+ *   onSelect={(file) => console.log(file)}
+ *   height="600px"
+ * />
+ *
+ * // Programmatic control:
+ * ref.current?.navigate('/uploads');
+ * ref.current?.refresh();
+ * ```
+ */
+declare const FluxFiles: React$1.ForwardRefExoticComponent<FluxFilesProps & React$1.RefAttributes<FluxFilesHandle>>;
+
+/**
+ * Modal wrapper for FluxFiles.
+ *
+ * Renders a fullscreen overlay with the file manager when `open` is true.
+ *
+ * @example
+ * ```tsx
+ * const [open, setOpen] = useState(false);
+ *
+ * <button onClick={() => setOpen(true)}>Pick file</button>
+ *
+ * <FluxFilesModal
+ *   open={open}
+ *   endpoint="https://files.example.com"
+ *   token={jwt}
+ *   onSelect={(file) => {
+ *     console.log(file);
+ *     setOpen(false);
+ *   }}
+ *   onClose={() => setOpen(false)}
+ * />
+ * ```
+ */
+declare function FluxFilesModal({ open, endpoint, token, disk, mode, allowedTypes, maxSize, onSelect, onClose, onReady, onEvent, overlayClassName, modalClassName, }: FluxFilesModalProps): react_jsx_runtime.JSX.Element | null;
+
+interface UseFluxFilesOptions extends FluxFilesConfig {
+    onSelect?: (file: FluxFile) => void;
+    onClose?: () => void;
+    onReady?: () => void;
+    onEvent?: (event: FluxEvent) => void;
+}
+/**
+ * Low-level hook that manages the postMessage bridge to a FluxFiles iframe.
+ *
+ * Returns a ref callback to attach to the iframe element, plus command helpers.
+ */
+declare function useFluxFiles(options: UseFluxFilesOptions): FluxFilesHandle & {
+    /** Ref callback — attach to the <iframe> element. */
+    iframeRef: (el: HTMLIFrameElement | null) => void;
+    /** The iframe src URL. */
+    iframeSrc: string;
+};
+
+export { type FluxCommand, type FluxEvent, type FluxFile, FluxFiles, type FluxFilesConfig, type FluxFilesHandle, FluxFilesModal, type FluxFilesModalProps, type FluxFilesProps, useFluxFiles };

package/dist/index.js

@@ -0,0 +1,305 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  FluxFiles: () => FluxFiles,
+  FluxFilesModal: () => FluxFilesModal,
+  useFluxFiles: () => useFluxFiles
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/FluxFiles.tsx
+var import_react2 = require("react");
+
+// src/useFluxFiles.ts
+var import_react = require("react");
+var SOURCE = "fluxfiles";
+var VERSION = 1;
+function uid() {
+  return "ff-" + Math.random().toString(36).slice(2, 11) + Date.now().toString(36);
+}
+function useFluxFiles(options) {
+  const iframeElRef = (0, import_react.useRef)(null);
+  const [ready, setReady] = (0, import_react.useState)(false);
+  const optionsRef = (0, import_react.useRef)(options);
+  optionsRef.current = options;
+  const endpoint = (options.endpoint || "").replace(/\/+$/, "");
+  const iframeSrc = endpoint + "/public/index.html";
+  const post = (0, import_react.useCallback)((type, payload = {}) => {
+    const el = iframeElRef.current;
+    if (!el?.contentWindow) return;
+    el.contentWindow.postMessage(
+      { source: SOURCE, type, v: VERSION, id: uid(), payload },
+      "*"
+    );
+  }, []);
+  const sendConfig = (0, import_react.useCallback)(() => {
+    const opts = optionsRef.current;
+    post("FM_CONFIG", {
+      disk: opts.disk || "local",
+      token: opts.token || "",
+      mode: opts.mode || "picker",
+      allowedTypes: opts.allowedTypes || null,
+      maxSize: opts.maxSize || null,
+      endpoint: opts.endpoint || "",
+      locale: opts.locale || null
+    });
+  }, [post]);
+  (0, import_react.useEffect)(() => {
+    function onMessage(e) {
+      const msg = e.data;
+      if (!msg || msg.source !== SOURCE) return;
+      const opts = optionsRef.current;
+      switch (msg.type) {
+        case "FM_READY":
+          setReady(true);
+          sendConfig();
+          opts.onReady?.();
+          break;
+        case "FM_SELECT":
+          opts.onSelect?.(msg.payload);
+          break;
+        case "FM_EVENT":
+          opts.onEvent?.(msg.payload);
+          break;
+        case "FM_CLOSE":
+          opts.onClose?.();
+          break;
+      }
+    }
+    window.addEventListener("message", onMessage);
+    return () => {
+      window.removeEventListener("message", onMessage);
+    };
+  }, [sendConfig]);
+  (0, import_react.useEffect)(() => {
+    if (ready) {
+      sendConfig();
+    }
+  }, [options.token, options.disk, options.mode, options.locale, ready, sendConfig]);
+  const command = (0, import_react.useCallback)(
+    (action, data = {}) => {
+      post("FM_COMMAND", { action, ...data });
+    },
+    [post]
+  );
+  const navigate = (0, import_react.useCallback)((path) => command("navigate", { path }), [command]);
+  const setDisk = (0, import_react.useCallback)((disk) => command("setDisk", { disk }), [command]);
+  const refresh = (0, import_react.useCallback)(() => command("refresh"), [command]);
+  const search = (0, import_react.useCallback)((q) => command("search", { q }), [command]);
+  const crossCopy = (0, import_react.useCallback)((dstDisk, dstPath) => command("crossCopy", { dst_disk: dstDisk, dst_path: dstPath || "" }), [command]);
+  const crossMove = (0, import_react.useCallback)((dstDisk, dstPath) => command("crossMove", { dst_disk: dstDisk, dst_path: dstPath || "" }), [command]);
+  const crop = (0, import_react.useCallback)((x, y, width, height, savePath) => command("crop", { x, y, width, height, save_path: savePath || "" }), [command]);
+  const aiTag = (0, import_react.useCallback)(() => command("aiTag"), [command]);
+  const iframeRef = (0, import_react.useCallback)((el) => {
+    iframeElRef.current = el;
+    if (!el) {
+      setReady(false);
+    }
+  }, []);
+  return {
+    iframeRef,
+    iframeSrc,
+    ready,
+    command,
+    navigate,
+    setDisk,
+    refresh,
+    search,
+    crossCopy,
+    crossMove,
+    crop,
+    aiTag
+  };
+}
+
+// src/FluxFiles.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var FluxFiles = (0, import_react2.forwardRef)(
+  function FluxFiles2(props, ref) {
+    const {
+      endpoint,
+      token,
+      disk,
+      mode,
+      allowedTypes,
+      maxSize,
+      width = "100%",
+      height = "600px",
+      className,
+      style,
+      onSelect,
+      onClose,
+      onReady,
+      onEvent
+    } = props;
+    const handle = useFluxFiles({
+      endpoint,
+      token,
+      disk,
+      mode,
+      allowedTypes,
+      maxSize,
+      onSelect,
+      onClose,
+      onReady,
+      onEvent
+    });
+    (0, import_react2.useImperativeHandle)(ref, () => ({
+      command: handle.command,
+      navigate: handle.navigate,
+      setDisk: handle.setDisk,
+      refresh: handle.refresh,
+      search: handle.search,
+      crossCopy: handle.crossCopy,
+      crossMove: handle.crossMove,
+      crop: handle.crop,
+      aiTag: handle.aiTag,
+      ready: handle.ready
+    }), [handle]);
+    const containerStyle = {
+      width: typeof width === "number" ? `${width}px` : width,
+      height: typeof height === "number" ? `${height}px` : height,
+      ...style
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, style: containerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "iframe",
+      {
+        ref: handle.iframeRef,
+        src: handle.iframeSrc,
+        style: { width: "100%", height: "100%", border: "none" },
+        allow: "clipboard-write",
+        title: "FluxFiles File Manager"
+      }
+    ) });
+  }
+);
+
+// src/FluxFilesModal.tsx
+var import_react3 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var defaultOverlayStyle = {
+  position: "fixed",
+  inset: 0,
+  background: "rgba(0, 0, 0, 0.5)",
+  zIndex: 99999,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center"
+};
+var defaultModalStyle = {
+  width: "90vw",
+  maxWidth: "1200px",
+  height: "85vh",
+  background: "#fff",
+  borderRadius: "8px",
+  overflow: "hidden",
+  boxShadow: "0 25px 50px rgba(0, 0, 0, 0.25)"
+};
+function FluxFilesModal({
+  open,
+  endpoint,
+  token,
+  disk,
+  mode = "picker",
+  allowedTypes,
+  maxSize,
+  onSelect,
+  onClose,
+  onReady,
+  onEvent,
+  overlayClassName,
+  modalClassName
+}) {
+  const handle = useFluxFiles({
+    endpoint,
+    token,
+    disk,
+    mode,
+    allowedTypes,
+    maxSize,
+    onSelect,
+    onClose,
+    onReady,
+    onEvent
+  });
+  (0, import_react3.useEffect)(() => {
+    if (!open) return;
+    function onKeyDown(e) {
+      if (e.key === "Escape") {
+        onClose?.();
+      }
+    }
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [open, onClose]);
+  (0, import_react3.useEffect)(() => {
+    if (!open) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, [open]);
+  const handleOverlayClick = (0, import_react3.useCallback)(
+    (e) => {
+      if (e.target === e.currentTarget) {
+        onClose?.();
+      }
+    },
+    [onClose]
+  );
+  if (!open) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      className: overlayClassName,
+      style: overlayClassName ? void 0 : defaultOverlayStyle,
+      onClick: handleOverlayClick,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": "FluxFiles File Manager",
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "div",
+        {
+          className: modalClassName,
+          style: modalClassName ? void 0 : defaultModalStyle,
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "iframe",
+            {
+              ref: handle.iframeRef,
+              src: handle.iframeSrc,
+              style: { width: "100%", height: "100%", border: "none" },
+              allow: "clipboard-write",
+              title: "FluxFiles File Manager"
+            }
+          )
+        }
+      )
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FluxFiles,
+  FluxFilesModal,
+  useFluxFiles
+});