@putkoff/abstract-securefiles 0.0.0

package/.github/workflows/release.yml

@@ -0,0 +1,17 @@
+name: Release
+
+on:
+  push:
+    branches: [ main ]
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+          registry-url: 'https://registry.npmjs.org/'
+      - name: Shared Release
+        uses: your-org/your-repo/.github/actions/release

package/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/dist/types/App/index.d.ts

@@ -0,0 +1 @@
+export { default as SecureFiles } from './secure_files';

package/dist/types/App/secure_files.d.ts

@@ -0,0 +1,4 @@
+import './styles/index.css';
+import React from "react";
+declare const SecureFiles: React.FC;
+export default SecureFiles;

package/dist/types/index.d.ts

@@ -0,0 +1 @@
+export { SecureFiles } from './App';

package/index.ts

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

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@putkoff/abstract-securefiles",
+  "version": "0.0.000",
+  "description": "A reusable Secure file system",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0"
+  },
+  "devDependencies": {
+    "@putkoff/shared-scripts": "file:../../shared-scripts",
+    "@types/node": "^24.0.13",
+    "@types/react": "^18.3.23",
+    "@types/react-dom": "^18.3.7",
+    "csstype": "^3.1.3",
+    "tsup": "^8.5.0",
+    "typescript": "^5.8.3",
+    "undici-types": "^7.11.0"
+  },
+  "dependencies": {
+    "@heroicons/react": "^2.2.0",
+    "@putkoff/abstract-apis": "^0.0.417",
+    "@putkoff/abstract-files": "^0.0.289",
+    "@putkoff/abstract-utilities": "^0.1.229",
+    "@rollup/plugin-commonjs": "^28.0.6",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-typescript": "^12.1.4",
+    "rollup-plugin-dts": "^6.2.1",
+    "tslib": "^2.8.1"
+  },
+  "scripts": {
+    "build": "tsc --emitDeclarationOnly && rollup -c",
+    "test": "jest",
+    "release": "release"
+  },
+  "type": "module",
+  "author": "putkoff",
+  "license": "MIT"
+}

package/rollup.config.js

@@ -0,0 +1,38 @@
+import resolve    from '@rollup/plugin-node-resolve';
+import commonjs   from '@rollup/plugin-commonjs';
+import typescript from '@rollup/plugin-typescript';
+import dts        from 'rollup-plugin-dts';
+import { readFileSync } from 'fs';
+import { fileURLToPath } from 'url';
+
+// load package.json
+const pkg = JSON.parse(
+  readFileSync(new URL('./package.json', import.meta.url), 'utf-8')
+);
+
+const deps = [
+  ...Object.keys(pkg.peerDependencies || {}),
+  ...Object.keys(pkg.dependencies || {}),
+];
+
+export default [
+  {
+    input: 'src/index.ts',
+    external: deps,
+    output: [
+      { file: pkg.module, format: 'esm', sourcemap: true },
+      { file: pkg.main,   format: 'cjs', sourcemap: true, exports: 'named' }
+    ],
+    plugins: [
+      resolve(),
+      commonjs(),
+      typescript({ tsconfig: './tsconfig.json', declaration: false })
+    ]
+  },
+  {
+    input: 'src/index.ts',
+    external: deps,
+    output: { file: pkg.types, format: 'esm' },
+    plugins: [ dts() ]
+  }
+];

package/src/App/index.ts

@@ -0,0 +1 @@
+export {default as SecureFiles} from './secure_files';

package/src/App/secure_files.tsx

@@ -0,0 +1,41 @@
+// src/App.tsx
+// src/index.tsx
+import './styles/index.css';
+import React from "react";
+import {
+  useFiles,
+  FileTable,
+  Upload
+} from "@putkoff/abstract-files";
+
+import {
+  getToken,        // ⬅️ use the *non-throwing* helper
+  isTokenExpired,
+  useState
+} from "@putkoff/abstract-utilities";
+function checkTokenValid() {
+  const tok = getToken();
+  return !!tok && !isTokenExpired(tok);
+}
+const SecureFiles: React.FC = () => {
+  const [loggedIn, setLoggedIn] = useState(checkTokenValid());
+  const filesHook = useFiles();  // ← one single hook instance
+  return (
+    <>
+      {/* pass the same load & file‐list into both children */}
+      <Upload onUploaded={filesHook.load} />
+      <FileTable
+        files={filesHook.files}
+        loading={filesHook.loading}
+        error={filesHook.error}
+        onDownload={filesHook.toggleShare}        // or downloadFile
+        onToggleShare={filesHook.toggleShare}
+        onPatchShare={filesHook.patchShareSettings}
+        onDelete={filesHook.deleteFile}
+      />
+
+    </>
+  )
+}
+
+export default SecureFiles;

package/src/App/styles/App.css

@@ -0,0 +1,42 @@
+
+body {
+  margin: 0;
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+}
+
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(360deg); }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card        { padding: 2em; }
+.read-the-docs { color: #888; }

package/src/App/styles/index.css

@@ -0,0 +1,10 @@
+/* src/styles/index.css */
+
+/* 1) pull in Tailwind’s directives */
+@import "./tailwind.css";
+
+/* 2) pull in your custom @layer components */
+@import "./window-manager.css";
+
+/* 3) pull in all your overrides & global resets */
+@import "./App.css";

package/src/App/styles/tailwind.css

@@ -0,0 +1,3 @@
+/* src/styles/tailwind.css */
+@tailwind base;
+@tailwind utilities;

package/src/App/styles/window-manager.css

@@ -0,0 +1,283 @@
+/* ------- window-manager table look ------- */
+.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;
+}
+
+/* whole table */
+.file-table {
+  width: 100%;
+  border: 1px solid #9ca3af;
+  font-size: 13px;
+  line-height: 1.15rem;
+  border-collapse: collapse;
+}
+
+/* header cells */
+.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;
+}
+
+/* body rows */
+.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;
+}
+
+/* body cells */
+.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;
+}
+
+/* unsaved filename cue */
+.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/index.ts

@@ -0,0 +1 @@
+export {SecureFiles} from './App';

package/testit.mjs

@@ -0,0 +1,11 @@
+// testit.mjs
+import { secureFetchIt } from './dist/index.js';
+
+(async () => {
+
+
+
+    const result = await secureFetchIt('list');
+    console.log('Result:', result);
+
+})();

package/testit.ts

@@ -0,0 +1,3 @@
+import {secureFetchIt} from './src/functions';
+const data = await secureFetchIt('links');
+console.log(data);

package/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "es2017",
+    "module": "esnext",
+    "lib": [
+      "es2017",
+      "dom"
+    ],
+    "declaration": true,
+    "declarationDir": "dist/types",
+    "outDir": "dist",
+    "importHelpers": true,
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "jsx": "react-jsx",
+    "skipLibCheck": true,
+    "sourceMap": true
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist"
+  ],
+  
+}