@putkoff/abstract-securefiles 0.0.48 → 0.0.49

package/src/FileHandlers/Upload/src/upload_utils.tsx

@@ -1,369 +0,0 @@
-import React, {
-  ChangeEvent,
-  useRef,
-  useState,
-  useCallback,
-  useEffect,
-} from 'react';
-import {
-  CloudArrowUpIcon,
-  Button,
-  uploadFiles,
-  useFiles,
-  currentUsername
-} from './../imports';
-import type { QueuedFile, UploadProps } from './../imports';
-
-// ── helpers ─────────────────────────────────────────────────────────────────
-
-/** Strip filename from a webkitRelativePath, keep the trailing slash. */
-function deriveRelPath(f: File): string {
-  const wrp = (f as any).webkitRelativePath as string | undefined;
-  if (!wrp) return '';
-  const idx = wrp.lastIndexOf('/');
-  return idx >= 0 ? wrp.slice(0, idx + 1) : '';
-}
-
-/**
- * Drain a DirectoryReader completely. The browser only returns ~100 entries
- * per readEntries() call; you must call it repeatedly until it returns [].
- */
-function readAllEntries(reader: any): Promise<any[]> {
-  return new Promise((resolve, reject) => {
-    const all: any[] = [];
-    const pump = () => {
-      reader.readEntries(
-        (batch: any[]) => {
-          if (batch.length === 0) resolve(all);
-          else { all.push(...batch); pump(); }
-        },
-        reject,
-      );
-    };
-    pump();
-  });
-}
-
-// ── component ───────────────────────────────────────────────────────────────
-
-export default function Upload({ onUploaded }: UploadProps) {
-  const [queue, setQueue] = useState<QueuedFile[]>([]);
-  const [busy, setBusy] = useState(false);
-  const [message, setMessage] = useState<string | null>(null);
-  const [drag, setDrag] = useState(false);
-
-  // Two refs: one for plain file picking, one for folder picking.
-  const fileInputRef = useRef<HTMLInputElement>(null);
-  const dirInputRef = useRef<HTMLInputElement>(null);
-  const [pickMode, setPickMode] = useState<'files' | 'folder'>('files');
-
-  const [dirs, setDirs] = useState<string[]>([]);
-
-  // — existing files → directory list —
-  const { files, load } = useFiles();
-
-  useEffect(() => {
-    const dirSet = new Set<string>();
-    files.forEach(f => {
-      const parts = f.filepath.split('/');
-      if (parts.length > 1) {
-        parts.pop();
-        dirSet.add(parts.join('/') + '/');
-      }
-    });
-    setDirs(Array.from(dirSet).sort());
-  }, [files]);
-
-  // — directory selection state —
-  const [uploadDir, setUploadDir] = useState<string>('');
-  const [creatingNew, setCreatingNew] = useState(false);
-  const [newDirName, setNewDirName] = useState('');
-
-  // — queue logic —
-  const enqueue = useCallback((incoming: QueuedFile[]) => {
-    setQueue(prev => {
-      const map = new Map(prev.map(q => [`${q.file.name}-${q.file.size}`, q]));
-      incoming.forEach(q => map.set(`${q.file.name}-${q.file.size}`, q));
-      return Array.from(map.values());
-    });
-  }, []);
-
-  const extractFromDataTransfer = useCallback(
-    async (dt: DataTransfer): Promise<QueuedFile[]> => {
-      const items = Array.from(dt.items ?? []);
-      const hasEntryApi =
-        items.length > 0 &&
-        typeof (items[0] as any).webkitGetAsEntry === 'function';
-
-      // Fallback: no entry API → flat files only, no folder traversal.
-      if (!hasEntryApi) {
-        return Array.from(dt.files ?? []).map(file => ({
-          file,
-          relPath: '',
-          progress: 0,
-        }));
-      }
-
-      const out: QueuedFile[] = [];
-
-      const walk = async (entry: any, path = ''): Promise<void> => {
-        if (!entry) return;
-        if (entry.isFile) {
-          const file: File = await new Promise((res, rej) =>
-            entry.file(res, rej),
-          );
-          out.push({ file, relPath: path, progress: 0 });
-          return;
-        }
-        if (entry.isDirectory) {
-          const reader = entry.createReader();
-          const entries = await readAllEntries(reader);
-          await Promise.all(
-            entries.map(e => walk(e, `${path}${entry.name}/`)),
-          );
-        }
-      };
-
-      await Promise.all(
-        items.map(i => walk((i as any).webkitGetAsEntry?.())),
-      );
-      return out;
-    },
-    []
-  );
-
-  const handleSelect = (e: ChangeEvent<HTMLInputElement>) => {
-    const picked = Array.from(e.target.files ?? []);
-    const queued: QueuedFile[] = picked.map(f => ({
-      file: f,
-      relPath: deriveRelPath(f),
-      progress: 0,
-    }));
-    enqueue(queued);
-    e.target.value = '';
-  };
-
-  const handleDrop = async (e: React.DragEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    const dropped = await extractFromDataTransfer(e.dataTransfer);
-    if (dropped.length) enqueue(dropped);
-    setDrag(false);
-  };
-
-  const openPicker = (e: React.MouseEvent) => {
-    // Only fire when the dropzone background itself is clicked, not children.
-    if (e.target !== e.currentTarget && !(e.target as HTMLElement).closest('[data-dz-passthrough]')) {
-      // children opt in via data-dz-passthrough if they should still open the picker
-    }
-    const ref = pickMode === 'folder' ? dirInputRef : fileInputRef;
-    ref.current?.click();
-  };
-
-  const handleUploadAll = async () => {
-    if (!queue.length) {
-      setMessage('No files queued.');
-      return;
-    }
-    setBusy(true);
-    setMessage(null);
-    const targetDir = creatingNew
-      ? (newDirName.trim().replace(/^\/+|\/+$/g, '') + '/')
-      : uploadDir;
-    try {
-      for (const { file, relPath } of queue) {
-        await uploadFiles(file, targetDir + relPath);
-        setQueue(cur =>
-          cur.map(item =>
-            item.file === file ? { ...item, progress: 100 } : item
-          )
-        );
-      }
-      setQueue([]);
-      await onUploaded();           // SecureFiles passes filesHook.load here
-      setMessage('Upload complete');
-      // (removed the duplicate load() — onUploaded already does it)
-    } catch {
-      setMessage('Upload failed');
-    } finally {
-      setBusy(false);
-    }
-  };
-
-  // — directory selector handlers —
-  const handleDirChange = (e: ChangeEvent<HTMLSelectElement>) => {
-    const v = e.target.value;
-    if (v === '__new__') {
-      setCreatingNew(true);
-      setNewDirName('');
-    } else {
-      setCreatingNew(false);
-      setUploadDir(v);
-    }
-  };
-  const acceptNewDir = () => {
-    const cleanName = newDirName.trim().replace(/^\/+|\/+$/g, '');
-    if (!cleanName) {
-      setCreatingNew(false);
-      return;
-    }
-    const normalized = `${uploadDir}${cleanName}/`;
-    setDirs(prev => prev.includes(normalized) ? prev : [...prev, normalized].sort());
-    setUploadDir(normalized);
-    setCreatingNew(false);
-    setNewDirName('');
-  };
-
-  return (
-    <div className="form-container max-w-2xl mx-auto">
-      {/* pick-mode toggle */}
-      <div className="flex gap-4 text-xs text-gray-700 mb-1">
-        <label className="flex items-center gap-1">
-          <input
-            type="radio"
-            name="pick-mode"
-            checked={pickMode === 'files'}
-            onChange={() => setPickMode('files')}
-          />
-          Files
-        </label>
-        <label className="flex items-center gap-1">
-          <input
-            type="radio"
-            name="pick-mode"
-            checked={pickMode === 'folder'}
-            onChange={() => setPickMode('folder')}
-          />
-          Folder
-        </label>
-        <span className="text-gray-400">
-          (drag-and-drop accepts either)
-        </span>
-      </div>
-
-      {/* drop area */}
-      <div
-        className={`flex items-center border-2 border-dashed rounded-lg p-6 bg-white shadow-md space-x-4 transition-shadow duration-150
-          ${drag ? 'border-indigo-500 bg-indigo-50 shadow-lg' : 'border-gray-300 hover:shadow-lg'}`}
-        onClick={openPicker}
-        onDragEnter={e => { e.preventDefault(); e.stopPropagation(); setDrag(true); }}
-        onDragOver={e => { e.preventDefault(); e.stopPropagation(); }}
-        onDragLeave={e => { e.preventDefault(); e.stopPropagation(); setDrag(false); }}
-        onDrop={handleDrop}
-        role="region"
-        aria-label="File upload area"
-      >
-        <CloudArrowUpIcon
-          style={{ width: 300, height: 300 }}
-          className="text-gray-500 mb-3"
-          aria-hidden="true"
-        />
-        <div className="flex-1">
-          <p className="text-base font-semibold text-gray-700">
-            Drag & drop files or folders here
-          </p>
-          <p className="text-xs text-gray-500 mt-1">
-            Click to {pickMode === 'folder' ? 'choose a folder' : 'choose files'}
-          </p>
-          {queue.length > 0 && (
-            <p className="mt-1 text-sm text-gray-600">
-              {queue.length} item{queue.length > 1 && 's'} queued
-            </p>
-          )}
-        </div>
-      </div>
-
-      {/* hidden file input — plain multi-file pick, works everywhere */}
-      <input
-        ref={fileInputRef}
-        type="file"
-        multiple
-        className="hidden"
-        onChange={handleSelect}
-      />
-
-      {/* hidden directory input — Chromium, Safari 11.1+, Firefox 50+ */}
-      <input
-        ref={dirInputRef}
-        type="file"
-        multiple
-        className="hidden"
-        // non-standard attributes; both forms keep older Firefox happy
-        {...({ webkitdirectory: '', directory: '' } as any)}
-        onChange={handleSelect}
-      />
-
-      {/* bottom controls */}
-      <div className="flex items-center justify-between mt-4">
-        <div className="flex-1 mr-4">
-          {!creatingNew ? (
-            <select
-              value={uploadDir}
-              onChange={handleDirChange}
-              className="form-select w-full"
-            >
-              {dirs.map(d => (
-                <option key={d} value={d}>{d}</option>
-              ))}
-              <option value="__new__">+ Create new directory…</option>
-            </select>
-          ) : (
-            <div className="flex">
-              <input
-                type="text"
-                value={newDirName}
-                placeholder="new-folder-name"
-                onChange={e => setNewDirName(e.target.value)}
-                onBlur={acceptNewDir}
-                onKeyDown={e => e.key === 'Enter' && acceptNewDir()}
-                className="form-input flex-1"
-              />
-              <Button onClick={acceptNewDir} className="ml-2">
-                OK
-              </Button>
-            </div>
-          )}
-        </div>
-
-        <Button
-          color="blue"
-          variant="primary"
-          onClick={handleUploadAll}
-          disabled={busy || !queue.length}
-        >
-          {busy ? 'Uploading…' : `Upload ${queue.length}`}
-        </Button>
-      </div>
-
-      {message && (
-        <p
-          className={`text-center text-sm ${message.includes('failed') ? 'text-red-600' : 'text-gray-600'}`}
-          role="alert"
-        >
-          {message}
-        </p>
-      )}
-
-      {queue.length > 0 && (
-        <div className="wm-container mt-4">
-          <h3 className="mb-2 text-sm font-semibold text-gray-700">Queued Files</h3>
-          <ul className="max-h-64 space-y-4 overflow-y-auto">
-            {queue.map(({ file, relPath, progress }) => (
-              <li key={`${file.name}-${file.size}`} className="space-y-1">
-                <div className="flex justify-between items-center">
-                  <span className="truncate text-sm text-gray-800">
-                    {relPath}{file.name}
-                  </span>
-                  <span className="text-xs text-gray-500">{progress}%</span>
-                </div>
-                <div className="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
-                  <div className="bg-indigo-600 h-2" style={{ width: `${progress}%` }} />
-                </div>
-              </li>
-            ))}
-          </ul>
-        </div>
-      )}
-    </div>
-  );
-}

package/src/FileHandlers/imports.ts

@@ -1,17 +0,0 @@
-export type {QueuedFile, FileItem,FileTableProps,UploadProps,ShareModalProps,FileRowProps } from './../imports';
-export { 
-    CloudArrowUpIcon,
-    currentUsername,
-    Button, 
-    Checkbox, 
-    Input, 
-    Spinner,
-    useEffect, 
-    useRef, 
-    useState,
-    useCallback,
-    ClipboardIcon,
-    createPortal,
-    } from './../imports';
-export {useFiles} from './../hooks'
-export { downloadFile, uploadFiles } from './../file_utils'

package/src/FileHandlers/index.ts

@@ -1,4 +0,0 @@
-export {FileRow} from './FileRow';
-export {FileTable} from './FileTable';
-export {ShareModal} from './ShareModal';
-export {Upload} from './Upload';

package/src/UI/index.tsx

@@ -1,122 +0,0 @@
-import React from 'react';
-
-export type String = string | undefined | null; 
-export type Astring = any[] | string | undefined | null; 
-export type Trailing = React.ReactNode
-export type ImportElem = {
- reaxlEle?:React.InputHTMLAttributes<HTMLInputElement>;
- label?: String;
- checked?:boolean;
- type?:string;
- onChange?: any;
- value?: any;
- trailing?:Trailing;
- className?: String; 
- classNames?:Astring;
- disabled?: any;
- placeholder?: any;
- error?: string;
- min?:any,
- readOnly?:boolean
-}
-
-// Utility to convert input to array
-function ensure_list(obj: Astring | null | undefined): string[] {
-  if (Array.isArray(obj)) return obj.filter(Boolean);
-  if (typeof obj === 'string') return obj.split(' ').filter(Boolean);
-  return [];
-}
-
-// Get list and length safely
-function getListAndLen(obj: Astring | null | undefined): { return_obj: string[]; ob_len: number } {
-  const return_obj = ensure_list(obj);
-  const ob_len = return_obj.length;
-  return { return_obj, ob_len };
-}
-
-// Combine class names with defaults
-function combineClassNames(classNames: Astring = [], defaultClasses: Astring = ['form-group', 'form-label', 'flex', 'gap-2']): string[] {
-  const { return_obj: inputClasses } = getListAndLen(classNames);
-  const { return_obj: defaultClassList } = getListAndLen(defaultClasses);
-  
-  // Combine and remove duplicates
-  const combined = [...new Set([...defaultClassList, ...inputClasses])];
-  
-  console.log(`Combined classes (length: ${combined.length}): ${combined.join(' ')}`);
-  return combined;
-}
-
-export function Button({
-  children,
-  color = 'gray',
-  variant = 'default',
-  className = '',
-  ...rest
-}: React.ButtonHTMLAttributes<HTMLButtonElement> & {
-  color?: 'gray' | 'green' | 'blue';
-  variant?: 'default' | 'icon' | 'primary' | 'secondary';
-  className?: string;
-}) {
-  const variantClasses = {
-    default: 'btn',
-    icon: 'btn-icon',
-    primary: 'btn-primary',
-    secondary: 'btn-secondary',
-  };
-
-  const colorClasses = {
-    gray: '',
-    green: variant === 'primary' ? 'btn-success' : 'btn-secondary',
-    blue: variant === 'primary' ? 'btn-primary' : 'btn-secondary',
-  };
-
-  const classes = combineClassNames([variantClasses[variant], colorClasses[color], className]);
-  
-  return (
-    <button className={classes.join(' ')} {...rest}>
-      {children}
-    </button>
-  );
-}
-
-export function Checkbox({
-  label,
-  className = '',
-  classNames = [],
-  ...rest
-}: ImportElem) {
-  const classes = combineClassNames(classNames, ['checkbox', 'wm-checkbox']);
-  
-  return (
-    <label className={classes.join(' ')}>
-      <input type="checkbox" className="wm-checkbox" {...rest} />
-      {label && <span>{label}</span>}
-    </label>
-  );
-}
-
-export function Input({
-  label,
-  trailing,
-  className = '',
-  classNames = [],
-  ...rest
-}: ImportElem) {
-  const classes = combineClassNames(classNames, ['form-group', 'flex', 'gap-2']);
-  const inputClasses = combineClassNames(className, ['form-input']);
-  
-  return (
-    <label className={classes.join(' ')}>
-      {label && <span className="form-label">{label}</span>}
-      <div className="flex gap-2">
-        <input className={inputClasses.join(' ')} {...rest} />
-        {trailing}
-      </div>
-    </label>
-  );
-}
-
-export function Spinner() {
-  const classes = combineClassNames('animate-pulse');
-  return <p className={classes.join(' ')}>Loading…</p>;
-}

package/src/custom.d.ts

@@ -1,7 +0,0 @@
-// src/custom.d.ts
-declare namespace NodeJS {
-  interface ProcessEnv {
-    readonly REACT_APP_API_BASE_URL: string;
-    // add more as needed...
-  }
-}

package/src/file_utils/imports.ts

@@ -1,2 +0,0 @@
-export { requireToken, alertit, fetchIt, stripPrefixes, make_path } from "./../imports";
-export type { FileItem, ApiRow } from "./../types";

package/src/file_utils/index.ts

@@ -1 +0,0 @@
-export * from './src';

package/src/file_utils/src/cookieFetch.ts

@@ -1,109 +0,0 @@
-/**
- * Cookie-authenticated API helpers.
- * All requests include credentials: 'include' so the browser sends the
- * session cookie (auth_session) automatically. No JWT tokens are used.
- *
- * API base URL resolution order (first truthy value wins):
- *   1. window.__SECURE_FILES_API_BASE__   – runtime override (any bundler)
- *   2. VITE_SECURE_FILES_API_BASE         – Vite env var
- *   3. REACT_APP_SECURE_FILES_API_BASE    – Create React App env var
- *   4. /api/secure-files                  – same-origin default
- *
- * Subdomain API example (set one of the above to the full origin + path):
- *   VITE_SECURE_FILES_API_BASE=https://api.example.com/secure-files
- */
-
-function resolveApiBase(): string {
-  // 1. Runtime window config — works regardless of bundler
-  if (typeof window !== "undefined" && (window as any).__SECURE_FILES_API_BASE__) {
-    return String((window as any).__SECURE_FILES_API_BASE__).replace(/\/+$/, "");
-  }
-  // 2. Vite (import.meta.env is replaced at build time; guard with try for non-Vite builds)
-  try {
-    const v = (import.meta as any).env?.VITE_SECURE_FILES_API_BASE;
-    if (v) return String(v).replace(/\/+$/, "");
-  } catch { /* not a Vite build */ }
-  // 3. Create React App / plain Node
-  try {
-    const v = (process as any).env?.REACT_APP_SECURE_FILES_API_BASE;
-    if (v) return String(v).replace(/\/+$/, "");
-  } catch { /* process not defined */ }
-  // 4. Same-origin default
-  return "/api/secure-files";
-}
-
-const API_BASE = resolveApiBase();
-
-function apiUrl(path: string): string {
-  const p = path.startsWith("/") ? path : `/${path}`;
-  return `${API_BASE}${p}`;
-}
-
-/**
- * Generic JSON fetch with session-cookie auth.
- * Throws Error("UNAUTHENTICATED") on 401 so callers can redirect to login.
- */
-export async function cookieFetch<T = unknown>(
-  path: string,
-  body?: unknown,
-  method?: "GET" | "POST" | "PUT" | "PATCH" | "DELETE",
-): Promise<T> {
-  const m = method ?? (body !== undefined ? "POST" : "GET");
-  const init: RequestInit = { method: m, credentials: "include" };
-
-  if (body !== undefined && body !== null) {
-    init.headers = { "Content-Type": "application/json" };
-    init.body = JSON.stringify(body);
-  }
-
-  const res = await fetch(apiUrl(path), init);
-  if (res.status === 401) throw new Error("UNAUTHENTICATED");
-  if (!res.ok) {
-    const msg = await res.text().catch(() => res.statusText);
-    throw new Error(`HTTP ${res.status}: ${msg}`);
-  }
-
-  const ct = res.headers.get("Content-Type") ?? "";
-  return (ct.includes("application/json") ? res.json() : res.text()) as Promise<T>;
-}
-
-/**
- * Check whether the current session is valid.
- * Calls /userInfo which requires authentication; returns true if the user
- * is logged in, false otherwise (no exception thrown).
- */
-export async function checkAuth(): Promise<boolean> {
-  try {
-    const res = await fetch(apiUrl("/userInfo"), {
-      method: "GET",
-      credentials: "include",
-    });
-    return res.ok;
-  } catch {
-    return false;
-  }
-}
-
-/**
- * Upload a single file using multipart/form-data with session-cookie auth.
- * @param file     The File object to upload.
- * @param relPath  Optional relative path within the user's directory.
- */
-export async function cookieUpload(file: File, relPath = ""): Promise<unknown> {
-  const form = new FormData();
-  form.append("file", file);
-  if (relPath) form.append("rel_path", relPath);
-
-  const res = await fetch(apiUrl("/upload"), {
-    method: "POST",
-    credentials: "include",
-    body: form,
-  });
-
-  if (res.status === 401) throw new Error("UNAUTHENTICATED");
-  if (!res.ok) throw new Error(`Upload failed: HTTP ${res.status}`);
-  return res.json();
-}
-
-/** The resolved API base URL, exported for debugging / display purposes. */
-export const SECURE_FILES_API_BASE = API_BASE;

package/src/file_utils/src/delete_utils/imports.ts

@@ -1 +0,0 @@
-export { requireToken,alertit } from "./../imports";

package/src/file_utils/src/delete_utils/index.ts

@@ -1 +0,0 @@
-export * from './src';

package/src/file_utils/src/delete_utils/src/delete_row.ts

@@ -1,11 +0,0 @@
-
-import {removeFile} from './delete_select'
-import {alertit} from './../imports'
-/** Given a checkbox inside a table-row → download that row’s file. */
-export async function removeRow(cb: HTMLInputElement): Promise<void> {
-  const row = cb.closest("tr") as HTMLTableRowElement | null;
-  alertit(row)
-  if (row && row?.id) await removeFile(row);
-}
-
-

package/src/file_utils/src/delete_utils/src/delete_select.ts

@@ -1,10 +0,0 @@
-import { cookieFetch } from '../../cookieFetch';
-
-export async function removeFile(
-  item: { id?: number | string; filename?: string },
-): Promise<void> {
-  const resp = await cookieFetch<unknown>("remove", { id: item.id }, "POST");
-  if (!resp || (resp as any) === false || (resp as any)?.result === false) {
-    throw new Error(`Could not delete "${item.filename ?? item.id}"`);
-  }
-}

package/src/file_utils/src/delete_utils/src/delete_selected.ts

@@ -1,15 +0,0 @@
-import {removeFile} from './delete_select';
-
-
-/** Bulk download: pass a NodeList or array of checkboxes. */
-export async function removeSelected(checkboxes: Iterable<HTMLInputElement>): Promise<void> {
-  const list = Array.from(checkboxes);
-  if (!list.length) {
-    alert("No files selected.");
-    return;
-  }
-  for (const cb of list) {
-    alert(cb);
-    await removeFile(cb);
-  }
-}

package/src/file_utils/src/delete_utils/src/index.ts

@@ -1,3 +0,0 @@
-export * from './delete_select';
-export * from './delete_selected';
-export * from './delete_row';