@putkoff/abstract-securefiles 0.0.33 → 0.0.34

package/src/file_utils/src/upload_utils/src/upload_files.ts

@@ -0,0 +1,19 @@
+import { cookieUpload } from '../../../../file_utils/src/cookieFetch';
+
+interface UploadResponse {
+  filepath: string;
+}
+
+export async function uploadFiles(
+  file: File,
+  subdir: string = '',
+): Promise<UploadResponse> {
+  if (!(file instanceof File)) throw new Error('Invalid file: must be a File object.');
+  if (typeof subdir !== 'string') throw new Error('Invalid subdir: must be a string.');
+
+  const relPath = subdir.trim() ? `${subdir.trim()}/${file.name}` : file.name;
+  const json = await cookieUpload(file, relPath) as { filepath?: string };
+
+  if (!json?.filepath) throw new Error('Server response missing filepath.');
+  return { filepath: json.filepath };
+}

package/src/global.d.ts

@@ -0,0 +1 @@
+declare module "*.css";

package/src/hooks/imports.ts

@@ -0,0 +1,3 @@
+export type { FileItem,ApiRow } from './../imports';
+export { secureFetchIt,fetchSharePatch,alertit,useCallback,isLoggedIn}  from './../imports';
+export {toggleShare,removeFile,listFiles,downloadFile} from './../file_utils'

package/src/hooks/index.ts

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

package/src/hooks/useFiles/imports.ts

@@ -0,0 +1,3 @@
+
+export type { FileItem,ApiRow } from './../imports';
+export { secureFetchIt,fetchSharePatch,alertit,toggleShare,removeFile,listFiles,useCallback,downloadFile,isLoggedIn }  from './../imports';

package/src/hooks/useFiles/index.ts

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

package/src/hooks/useFiles/src/deleteFile.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { useCallback } from './../imports';
+import type { FileItem } from './../imports';
+import { cookieFetch } from '../../../file_utils/src/cookieFetch';
+
+export const useDeleteFile = (
+  setFiles: React.Dispatch<React.SetStateAction<FileItem[]>>,
+) => {
+  return useCallback(
+    async (file: FileItem | FileItem[]) => {
+      const targets = Array.isArray(file) ? file : [file];
+      for (const f of targets) {
+        try {
+          await cookieFetch("remove", { id: f.id }, "POST");
+          setFiles(curr => curr.filter(item => item.id !== f.id));
+        } catch (err) {
+          console.error(`Failed to delete "${f.filename}":`, err);
+        }
+      }
+    },
+    [setFiles],
+  );
+};

package/src/hooks/useFiles/src/index.ts

@@ -0,0 +1,6 @@
+export * from './load';
+export * from './toggleShare';
+export * from './patchShareSettings';
+export * from './useFiles';
+export * from './deleteFile';
+export * from './useSaveShareSettings';

package/src/hooks/useFiles/src/load.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import { useCallback } from './../imports';
+import type { FileItem, ApiRow } from './../imports';
+import { cookieFetch } from '../../../file_utils/src/cookieFetch';
+
+export const useLoadFiles = (
+  setLoading: React.Dispatch<React.SetStateAction<boolean>>,
+  setError:   React.Dispatch<React.SetStateAction<Error | null>>,
+  setFiles:   React.Dispatch<React.SetStateAction<FileItem[]>>,
+) => {
+  return useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const result = await cookieFetch<ApiRow[] | { result: ApiRow[] }>("list", undefined, "GET");
+      const apiRows: ApiRow[] = Array.isArray(result)
+        ? result
+        : ((result as any)?.result ?? []);
+
+      setFiles(apiRows.map((r: ApiRow) => ({
+        id:             r.id,
+        filename:       r.filename,
+        uploader_id:    r.uploader_id,
+        filepath:       r.filepath,
+        created_at:     r.created_at,
+        download_count: r.download_count,
+        download_limit: r.download_limit,
+        shareable:      Boolean(r.shareable),
+        needsPassword:  !!r.share_password,
+        share_password: r.share_password,
+        password_str:   r.password_str,
+      })));
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error('Failed to load files'));
+    } finally {
+      setLoading(false);
+    }
+  }, [setLoading, setError, setFiles]);
+};

package/src/hooks/useFiles/src/patchShareSettings.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { useCallback } from './../imports';
+import { cookieFetch } from '../../../file_utils/src/cookieFetch';
+
+export const usePatchShareSettings = (
+  setFiles: React.Dispatch<React.SetStateAction<any[]>>,
+) => {
+  return useCallback(
+    async (file: any) => {
+      const body = {
+        id:             file.id,
+        shareable:      file.shareable,
+        share_password: file.share_password ?? null,
+        password_str:   file.password_str   ?? null,
+        download_limit: file.download_limit ?? null,
+      };
+      try {
+        await cookieFetch("files/share", body, "POST");
+        setFiles(curr => curr.map(f => f.id === body.id ? { ...f, ...body } : f));
+      } catch (err) {
+        console.error('Failed to update share settings:', err);
+      }
+    },
+    [setFiles],
+  );
+};
+export default usePatchShareSettings;

package/src/hooks/useFiles/src/toggleShare.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { useCallback } from './../imports';
+import type { FileItem } from './../imports';
+import { cookieFetch } from '../../../file_utils/src/cookieFetch';
+
+export const useToggleShare = (
+  setFiles: React.Dispatch<React.SetStateAction<FileItem[]>>,
+) => {
+  return useCallback(
+    async (file: FileItem) => {
+      const updated: FileItem = { ...file, shareable: !file.shareable };
+      if (!updated.shareable) updated.needsPassword = false;
+      try {
+        await cookieFetch("files/share", {
+          id:             updated.id,
+          shareable:      updated.shareable,
+          share_password: updated.share_password ?? null,
+          password_str:   updated.password_str   ?? null,
+          download_limit: updated.download_limit ?? null,
+        }, "POST");
+        setFiles(curr => curr.map(f => f.id === file.id ? updated : f));
+      } catch (err) {
+        console.error('Failed to toggle share:', err);
+      }
+    },
+    [setFiles],
+  );
+};

package/src/hooks/useFiles/src/useFiles.ts

@@ -0,0 +1,35 @@
+import { useState, useEffect } from 'react';
+import type {FileItem} from './../imports';
+import { useLoadFiles } from './load';
+import { useToggleShare } from './toggleShare';
+import {useSaveShareSettings}  from './useSaveShareSettings';
+import { useDeleteFile } from './deleteFile';
+
+export function useFiles() {
+  const [files, setFiles] = useState<FileItem[]>([]);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const loadCallback = useLoadFiles(setLoading, setError, setFiles);
+  const toggleShareCallback = useToggleShare(setFiles);
+  const patchShareSettingsCallback = useSaveShareSettings(setFiles);
+  const deleteFileCallback = useDeleteFile(setFiles);
+
+  useEffect(() => {
+    loadCallback();
+  }, [loadCallback]);
+
+  return {
+    files,
+    loading,
+    error,
+    load: loadCallback,
+    toggleShare: toggleShareCallback,
+    patchShareSettings: patchShareSettingsCallback,
+    deleteFile: deleteFileCallback,
+    setFiles,
+    setLoading,
+    setError,
+    
+  };
+}

package/src/hooks/useFiles/src/useSaveShareSettings.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import { useCallback } from './../imports';
+import { cookieFetch } from '../../../file_utils/src/cookieFetch';
+
+/**
+ * Hook alias used by useFiles.ts. Patches share settings via the session-cookie
+ * authenticated /files/share endpoint.
+ */
+export const useSaveShareSettings = (
+  setFiles: React.Dispatch<React.SetStateAction<any[]>>,
+) => {
+  return useCallback(
+    async (file: any) => {
+      const body = {
+        id:             file.id,
+        shareable:      file.shareable,
+        share_password: file.share_password ?? null,
+        password_str:   file.password_str   ?? null,
+        download_limit: file.download_limit ?? null,
+      };
+      try {
+        await cookieFetch("files/share", body, "POST");
+        setFiles(curr => curr.map(f => f.id === body.id ? { ...f, ...body } : f));
+      } catch (err) {
+        console.error('Failed to save share settings:', err);
+      }
+    },
+    [setFiles],
+  );
+};
+export default useSaveShareSettings;

package/src/imports.ts

@@ -0,0 +1,19 @@
+export { createPortal } from "react-dom";
+export { ClipboardIcon, CloudArrowUpIcon } from "@heroicons/react/24/outline";
+export {useEffect,useRef,useState,useCallback} from 'react';
+export type { QueuedFile, FileItem, FileTableProps, UploadProps, ShareModalProps, FileRowProps, ApiRow, EnhancedInputProps } from './types';
+export {
+    currentUsername,
+    alertit,
+    requireToken,
+    isLoggedIn,
+    fetchIt,
+    stripPrefixes,
+    make_path
+} from "@putkoff/abstract-utilities";
+export {    
+    Button,
+    Checkbox,
+    Input,
+    Spinner} from './UI';
+export { secureFetchIt, fetchSharePatch } from "@putkoff/abstract-apis";

package/src/index.ts

@@ -1 +1,8 @@
-export {default as SecureFiles} from './secure_files';
+export { FileRow, ShareModal, FileTable, Upload } from './FileHandlers';
+export { useFiles } from './hooks';
+export * from './file_utils';
+export * from './hooks';
+export * from './UI';
+export * from './types';
+export * from './styles';
+export { SecureFiles } from './App'

package/src/styles/SecureFilesStyles.module.css

@@ -0,0 +1,287 @@
+/* SecureFilesStyles.module.css */
+
+/* Scope all styles under .secure-files */
+.secure-files {
+  /* Pull in Tailwind utilities if needed (but skip @base to avoid global resets) */
+  @tailwind utilities;
+
+  /* window-manager.css styles (prefixed where needed) */
+  .wm-table {
+    width: 100%;
+    font-size: 13px;
+    table-layout: fixed;
+  }
+
+  .wm-thead th {
+    background-color: #e5e7eb;
+    border-bottom: 1px solid #9ca3af;
+    padding: 5px 8px;
+    text-align: left;
+    font-weight: 600;
+  }
+
+  .wm-row {
+    border-bottom: 1px solid #d1d5db;
+    background-color: #f9fafb;
+  }
+
+  .wm-row:hover {
+    background-color: #eff6ff;
+  }
+
+  .wm-cell {
+    padding: 5px 8px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .wm-checkbox {
+    height: 14px;
+    width: 14px;
+    color: #2563eb;
+    border: 1px solid #9ca3af;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+
+  .wm-btn-link {
+    color: #2563eb;
+    text-decoration: underline;
+  }
+
+  .wm-btn-link:hover {
+    color: #1e40af;
+  }
+
+  .wm-btn-link:disabled {
+    color: #9ca3af;
+    cursor: not-allowed;
+  }
+
+  .wm-btn-icon {
+    color: #4b5563;
+    padding: 2px;
+    border-radius: 4px;
+  }
+
+  .wm-btn-icon:hover {
+    color: #111827;
+    background-color: #e5e7eb;
+  }
+
+  .wm-btn-icon:disabled {
+    color: #9ca3af;
+  }
+
+  /* file-table styles */
+  .file-table {
+    width: 100%;
+    border: 1px solid #9ca3af;
+    font-size: 13px;
+    line-height: 1.15rem;
+    border-collapse: collapse;
+  }
+
+  .file-table thead th {
+    background-color: #e5e7eb;
+    color: #1f2937;
+    font-weight: 600;
+    padding: 6px 12px;
+    user-select: none;
+    border-bottom: 1px solid #9ca3af;
+    border-right: 1px solid #d1d5db;
+  }
+
+  .file-table thead th:last-child {
+    border-right: none;
+  }
+
+  .file-table tbody tr {
+    border-bottom: 1px solid #d1d5db;
+    transition: background-color 0.2s;
+  }
+
+  .file-table tbody tr:hover {
+    background-color: #f3f4f6;
+  }
+
+  .file-table tbody tr:nth-child(even) {
+    background-color: #f9fafb;
+  }
+
+  .file-table td {
+    padding: 6px 12px;
+    vertical-align: middle;
+    white-space: nowrap;
+    border-right: 1px solid #d1d5db;
+  }
+
+  .file-table td:last-child {
+    border-right: none;
+  }
+
+  .file-table .unsaved {
+    color: #dc2626;
+  }
+
+  /* Modals */
+  .modal-backdrop {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: rgba(0, 0, 0, 0.6);
+  }
+
+  .modal-wrapper {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .modal-panel {
+    background-color: #ffffff;
+    border-radius: 12px;
+    padding: 24px;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    outline: none;
+    max-width: 28rem;
+    max-height: 90vh;
+    overflow-y: auto;
+  }
+
+  /* Forms & Inputs */
+  .form-container {
+    background-color: #ffffff;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
+    border-radius: 8px;
+    padding: 24px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    max-width: 28rem;
+  }
+
+  .form-title {
+    font-size: 20px;
+    font-weight: 600;
+    text-align: center;
+  }
+
+  .form-input {
+    display: block;
+    width: 100%;
+    border-radius: 4px;
+    border: 1px solid #d1d5db;
+    padding: 4px 8px;
+  }
+
+  .form-input:disabled {
+    background-color: #f3f4f6;
+  }
+
+  .form-group {
+    margin-bottom: 16px;
+  }
+
+  .form-label {
+    display: block;
+    font-size: 14px;
+    font-weight: 500;
+    margin-bottom: 4px;
+  }
+
+  .form-error {
+    font-size: 14px;
+    color: #dc2626;
+  }
+
+  /* Buttons */
+  .btn {
+    border-radius: 8px;
+    padding: 4px 12px;
+    font-size: 14px;
+    font-weight: 500;
+    transition: background-color 0.15s, color 0.15s;
+  }
+
+  .btn:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px rgba(0, 0, 0, 0.1);
+  }
+
+  .btn-primary {
+    background-color: #2563eb;
+    color: #ffffff;
+  }
+
+  .btn-primary:hover {
+    background-color: #1d4ed8;
+  }
+
+  .btn-primary:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px rgba(59, 130, 246, 0.5);
+  }
+
+  .btn-secondary {
+    background-color: #e5e7eb;
+  }
+
+  .btn-secondary:hover {
+    background-color: #d1d5db;
+  }
+
+  .btn-secondary:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px rgba(156, 163, 175, 0.5);
+  }
+
+  .btn-success {
+    background-color: #16a34a;
+    color: #ffffff;
+  }
+
+  .btn-success:hover {
+    background-color: #15803d;
+  }
+
+  .btn-success:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px rgba(34, 197, 94, 0.5);
+  }
+
+  .btn-danger {
+    background-color: #dc2626;
+    color: #ffffff;
+  }
+
+  .btn-danger:hover {
+    background-color: #b91c1c;
+  }
+
+  .btn-danger:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px rgba(239, 68, 68, 0.5);
+  }
+
+  .btn-icon {
+    padding: 4px;
+    background-color: transparent;
+  }
+
+  .btn-icon:hover {
+    background-color: #f3f4f6;
+  }
+
+  /* Checkbox */
+  .checkbox {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 16px;
+  }
+}

package/src/styles/index.ts

@@ -0,0 +1 @@
+export * from './SecureFiles/index.css';

package/src/types/index.ts

@@ -0,0 +1 @@
+export type { QueuedFile, FileItem, FileTableProps, UploadProps, ShareModalProps, FileRowProps, ApiRow, EnhancedInputProps } from './src/types';

package/src/types/src/index.ts

@@ -0,0 +1 @@
+export type { QueuedFile, FileItem, FileTableProps, UploadProps, ShareModalProps, FileRowProps, ApiRow, EnhancedInputProps } from './types';

package/src/types/src/types.ts

@@ -0,0 +1,88 @@
+
+export interface FileItem {
+  id: number | string;
+  filename: string;
+  uploader_id: string;
+  filepath: string;
+  created_at: string;
+  download_count: number;
+  download_limit: number | null;
+  shareable: boolean;
+  needsPassword: boolean;
+  share_password: string | null;
+  password_str: string | null;
+}
+
+export interface ApiRow {
+  id: number | string;
+  filename: string;
+  uploader_id: string;
+  filepath: string;
+  created_at: string;
+  download_count: number;
+  download_limit: number | null;
+  shareable: boolean;
+  needsPassword: boolean;
+  share_password: string;
+  password_str: string | null;
+}
+
+export interface FileListResponse {
+  files?: ApiRow[];
+}
+
+export interface FileTableProps {
+  files: FileItem[];
+  loading: boolean;
+  error: Error | null;
+  onDownload(id: any): Promise<void>;
+  onToggleShare(id: any): Promise<void>;
+  onPatchShare(id: any): Promise<void>;
+  onDelete(id: any): Promise<void>;
+}
+
+
+export interface ShareModalProps {
+  file: FileItem | null;
+  onClose(): void;
+  onSave(patch: Partial<FileItem>): Promise<void>;
+}
+export interface UploadProps {
+  /** Called *after* a successful upload */
+  onUploaded: () => Promise<void>;
+}
+
+
+
+export interface FileRowProps {
+  file: FileItem;
+  onDownload: () => Promise<void>;
+  onSettings: () => void;
+  onToggleShare: () => Promise<void>;
+  onDelete: () => any;
+}
+
+export interface QueuedFile {
+  file: File;
+  relPath: string;
+  progress: number;
+}
+
+export interface InputProps {
+  label?: any;
+  type?: any;
+  value?: any;
+  onChange?: any;
+  disabled?: any;
+  placeholder?: any;
+  error?: string;
+
+}
+
+export interface FileInputExtra {
+  directory?: boolean;        // true → allow folder selection
+  multiple?: boolean;         // true → allow multiple files
+  accept?: string;            // optional MIME filter
+}
+/** keep other InputProps fields … */
+export type EnhancedInputProps = InputProps & FileInputExtra;