@grampro/kit 0.0.0-stage → 2.4.1

package/source/legacy-components/useUploader/useUploader.tsx

@@ -0,0 +1,310 @@
+import { useState, useCallback } from "react";
+
+// Types
+interface ChunkInfo {
+  file: Blob;
+  originalFile: File;
+  chunkIndex: number;
+  totalChunks: number;
+}
+
+interface UploadProgress {
+  [fileName: string]: number;
+}
+
+interface UploadResult {
+  fileName: string;
+  status: "complete" | "chunk_received" | "error";
+  message?: string;
+}
+
+interface UseChunkedUploadOptions {
+  chunkSize?: number;
+  maxConcurrentUploads?: number;
+  baseUrl?: string;
+  onProgress?: (fileName: string, progress: number) => void;
+  onComplete?: (fileName: string, result: UploadResult) => void;
+  onError?: (fileName: string, error: Error) => void;
+  additionalParams?: any;
+}
+
+interface UseChunkedUploadReturn {
+  uploadFiles: (files: File[], customParams?: any) => Promise<void>;
+  isUploading: boolean;
+  uploadProgress: UploadProgress;
+  uploadStatus: string;
+  cancelUpload: () => void;
+  reset: () => void;
+}
+
+// Helper function to process files into chunks
+function processFiles(files: File[], chunkSize: number): ChunkInfo[] {
+  const finalFiles: ChunkInfo[] = [];
+
+  files.forEach((file) => {
+    if (file.size > chunkSize) {
+      const totalChunks = Math.ceil(file.size / chunkSize);
+      let offset = 0;
+      let chunkIndex = 0;
+
+      while (offset < file.size) {
+        const chunk = file.slice(offset, offset + chunkSize);
+        finalFiles.push({
+          file: chunk,
+          originalFile: file,
+          chunkIndex,
+          totalChunks,
+        });
+        offset += chunkSize;
+        chunkIndex++;
+      }
+    } else {
+      finalFiles.push({
+        file,
+        originalFile: file,
+        chunkIndex: 0,
+        totalChunks: 1,
+      });
+    }
+  });
+
+  return finalFiles;
+}
+
+// Helper function to upload a single chunk
+async function uploadChunk(
+  chunk: Blob,
+  originalFile: File,
+  chunkIndex: number,
+  totalChunks: number,
+  baseUrl: string,
+  signal?: AbortSignal,
+  additionalParams: any = {}
+): Promise<UploadResult> {
+  const formData = new FormData();
+  formData.append("chunk", chunk);
+  formData.append("fileName", originalFile.name);
+  formData.append("chunkIndex", chunkIndex.toString());
+  formData.append("totalChunks", totalChunks.toString());
+  formData.append("fileSize", originalFile.size.toString());
+  formData.append(
+    "additionalParams",
+    additionalParams ? JSON.stringify(additionalParams) : "{}"
+  );
+
+  // If you have additional parameters to send, you can append them here
+  // Uncomment the following lines if you want to include additionalParams in the formData
+
+  // Object.entries(additionalParams).forEach(([key, value]: any) => {
+  //   formData.append(key, value);
+  // });
+
+  const response = await fetch(`${baseUrl}`, {
+    method: "POST",
+    body: formData,
+    signal,
+  });
+
+  if (!response.ok) {
+    throw new Error(`Upload failed: ${response.statusText}`);
+  }
+
+  return response.json();
+}
+
+// Main custom hook
+export function useChunkedUpload(
+  options: UseChunkedUploadOptions = {}
+): UseChunkedUploadReturn {
+  const {
+    chunkSize = 1024 * 1024, // 1MB default
+    maxConcurrentUploads = 3,
+    baseUrl = "",
+    onProgress,
+    onComplete,
+    onError,
+    additionalParams = {},
+  } = options;
+
+  const [isUploading, setIsUploading] = useState(false);
+  const [uploadProgress, setUploadProgress] = useState<UploadProgress>({});
+  const [uploadStatus, setUploadStatus] = useState("");
+  const [abortController, setAbortController] =
+    useState<AbortController | null>(null);
+
+  const updateProgress = useCallback(
+    (fileName: string, progress: number) => {
+      setUploadProgress((prev) => ({
+        ...prev,
+        [fileName]: progress,
+      }));
+      onProgress?.(fileName, progress);
+    },
+    [onProgress]
+  );
+
+  const updateStatus = useCallback((status: string) => {
+    setUploadStatus(status);
+  }, []);
+
+  const uploadFiles = useCallback(
+    async (files: File[], customParams?: any) => {
+      if (files.length === 0) {
+        throw new Error("No files selected for upload.");
+      }
+
+      // Create new abort controller
+      const controller = new AbortController();
+      setAbortController(controller);
+
+      setIsUploading(true);
+      updateStatus("Processing files...");
+
+      try {
+        const processedFiles = processFiles(files, chunkSize);
+
+        // Group chunks by file
+        const fileChunks: { [key: string]: ChunkInfo[] } = {};
+        processedFiles.forEach((processedFile) => {
+          const fileName = processedFile.originalFile.name;
+          if (!fileChunks[fileName]) {
+            fileChunks[fileName] = [];
+          }
+          fileChunks[fileName].push(processedFile);
+        });
+
+        // Upload files with concurrency control
+        const fileNames = Object.keys(fileChunks);
+        const uploadPromises = fileNames.map(async (fileName) => {
+          const chunks = fileChunks[fileName];
+          updateStatus(`Uploading ${fileName}...`);
+
+          try {
+            // Create semaphore for concurrent chunk uploads
+            const semaphore = new Array(maxConcurrentUploads).fill(null);
+            let chunkIndex = 0;
+            const results: UploadResult[] = [];
+
+            const uploadNextChunk = async (): Promise<void> => {
+              if (chunkIndex >= chunks.length) return;
+
+              const currentChunk = chunks[chunkIndex++];
+              const result = await uploadChunk(
+                currentChunk.file,
+                currentChunk.originalFile,
+                currentChunk.chunkIndex,
+                currentChunk.totalChunks,
+                baseUrl,
+                controller.signal,
+                { ...additionalParams, ...customParams }
+              );
+
+              results.push(result);
+
+              // Update progress
+              const progress = (results.length / chunks.length) * 100;
+              updateProgress(fileName, progress);
+
+              // Continue uploading if there are more chunks
+              if (chunkIndex < chunks.length) {
+                await uploadNextChunk();
+              }
+            };
+
+            // Start concurrent uploads
+            await Promise.all(semaphore.map(() => uploadNextChunk()));
+
+            // Check if file is complete
+            const completeResult = results.find((r) => r.status === "complete");
+            if (completeResult) {
+              updateStatus(`${fileName} uploaded successfully!`);
+              onComplete?.(fileName, completeResult);
+            }
+
+            return { fileName, success: true };
+          } catch (error) {
+            const errorObj =
+              error instanceof Error ? error : new Error(String(error));
+            updateStatus(`Failed to upload ${fileName}: ${errorObj.message}`);
+            onError?.(fileName, errorObj);
+            return { fileName, success: false, error: errorObj };
+          }
+        });
+
+        const results = await Promise.all(uploadPromises);
+
+        const successCount = results.filter((r) => r.success).length;
+        const failCount = results.length - successCount;
+
+        if (failCount === 0) {
+          updateStatus("All files uploaded successfully!");
+        } else if (successCount === 0) {
+          updateStatus("All uploads failed!");
+        } else {
+          updateStatus(`${successCount} files uploaded, ${failCount} failed`);
+        }
+      } catch (error) {
+        if (error instanceof Error && error.name === "AbortError") {
+          updateStatus("Upload cancelled");
+        } else {
+          const errorMessage =
+            error instanceof Error ? error.message : String(error);
+          updateStatus(`Upload failed: ${errorMessage}`);
+        }
+      } finally {
+        setIsUploading(false);
+        setAbortController(null);
+      }
+    },
+    [
+      chunkSize,
+      maxConcurrentUploads,
+      baseUrl,
+      updateProgress,
+      updateStatus,
+      onComplete,
+      onError,
+    ]
+  );
+
+  const cancelUpload = useCallback(() => {
+    if (abortController) {
+      abortController.abort();
+      updateStatus("Cancelling upload...");
+    }
+  }, [abortController, updateStatus]);
+
+  const reset = useCallback(() => {
+    setUploadProgress({});
+    setUploadStatus("");
+    setIsUploading(false);
+    if (abortController) {
+      abortController.abort();
+      setAbortController(null);
+    }
+  }, [abortController]);
+
+  return {
+    uploadFiles,
+    isUploading,
+    uploadProgress,
+    uploadStatus,
+    cancelUpload,
+    reset,
+  };
+}
+
+// Alternative hook with simplified API for basic use cases
+export function useSimpleUpload(baseUrl?: string) {
+  const { uploadFiles, isUploading, uploadStatus } = useChunkedUpload({
+    baseUrl,
+    chunkSize: 1024 * 1024, // 1MB
+    maxConcurrentUploads: 3,
+  });
+
+  return {
+    upload: uploadFiles,
+    isUploading,
+    status: uploadStatus,
+  };
+}

package/source/legacy-components/usepaginateddata/usePaginatedData.ts

@@ -0,0 +1,174 @@
+import { useState, useEffect, useCallback } from "react";
+import {
+  exportToExcelHelper,
+  exportToPDFHelper,
+} from "@grampro/headless-helpers";
+
+export const usePaginatedData = (
+  apiEndpoint: string,
+  initialPageSize = 10,
+  method: "GET" | "POST" = "GET",
+  columns: any[] = [],
+  additionalParams: any = {}
+) => {
+  const [data, setData] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [filters, setFilters] = useState<any[]>([]);
+  const [pagination, setPagination] = useState({
+    currentPage: 0,
+    totalPages: 0,
+    totalCount: 0,
+    pageSize: initialPageSize,
+  });
+
+  const fetchData = useCallback(
+    async (
+      method: "GET" | "POST",
+      page: number,
+      pageSize: number,
+      currentFilters: any[] = [],
+      search = "",
+      isExportCall: boolean | null = null,
+      exportType: string | null = null
+    ) => {
+      try {
+        setLoading(true);
+
+        let response;
+
+        if (method === "POST") {
+          response = await fetch(apiEndpoint, {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              page: page + 1,
+              pageSize,
+              filters: currentFilters,
+              search,
+              additionalParams,
+              isExportCall,
+            }),
+          });
+        } else {
+          let url = `${apiEndpoint}?page=${page + 1}&pageSize=${pageSize}`;
+          if (currentFilters.length > 0) {
+            url += `&filters=${encodeURIComponent(
+              JSON.stringify(currentFilters)
+            )}`;
+          }
+          if (search) {
+            url += `&search=${encodeURIComponent(search)}`;
+          }
+          if (isExportCall) {
+            url += `&isExportCall=${encodeURIComponent(true)}`;
+          }
+
+          response = await fetch(url);
+        }
+
+        if (!response.ok) throw new Error(`Error: ${response.status}`);
+
+        const result = await response.json();
+
+        if (!isExportCall) {
+          setData(result.data);
+          setPagination((prev) => ({
+            ...prev,
+            currentPage: page,
+            totalPages: result.pagination.totalPages,
+            totalCount: result.pagination.totalItems,
+          }));
+        } else {
+          if (exportType == "excelExport") {
+            exportToExcelHelper(
+              result.data,
+              columns.length > 0 ? columns : [],
+              "excel-export-data"
+            );
+          } else if (exportType == "pdfExport") {
+            exportToPDFHelper(
+              result.data,
+              columns.length > 0 ? columns : [],
+              "pdf-export-data",
+              { layout: "portrait", paperSize: "a4" }
+            );
+          }
+        }
+      } catch (error) {
+        console.error(`Failed to fetch data (${method}):`, error);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [apiEndpoint]
+  );
+
+  // Handle page changes
+  const handlePageChange = useCallback(
+    (status: { currentPage: number; totalPages: number }) => {
+      if (status.currentPage !== pagination.currentPage) {
+        fetchData(method, status.currentPage, pagination.pageSize, filters);
+      }
+    },
+    [fetchData, pagination.currentPage, pagination.pageSize, filters]
+  );
+
+  // Handle filter changes
+  const handleFilterChange = useCallback(
+    (newFilters: any[]) => {
+      const filterType = newFilters.map((f: any) => ({ ...f, type: "filter" }));
+      setFilters(filterType);
+      fetchData(method, 0, pagination.pageSize, filterType);
+    },
+    [fetchData, pagination.pageSize]
+  );
+
+  // Handle search input
+  const handleSearch = useCallback(
+    (searchTerm: string) => {
+      const existingSearch = filters.find(
+        (f) => f.type === "search" && f.value === searchTerm
+      );
+
+      if (existingSearch) return;
+
+      const updatedFilters = filters.filter((f) => f.type !== "search");
+
+      const finalFilters = [
+        ...updatedFilters,
+        { type: "search", value: searchTerm },
+      ];
+
+      setFilters(finalFilters);
+      fetchData(method, 0, pagination.pageSize, finalFilters);
+    },
+    [fetchData, pagination.pageSize, filters]
+  );
+
+  // Handle exports
+  const handleExports = useCallback(
+    (exportType: string) => {
+      fetchData(method, 0, pagination.pageSize, [], "", true, exportType);
+    },
+    [fetchData, method, pagination.pageSize]
+  );
+
+  useEffect(() => {
+    fetchData(method, 0, pagination.pageSize, filters);
+  }, [fetchData, pagination.pageSize]);
+
+  return {
+    data,
+    loading,
+    pagination,
+    filters,
+    handlePageChange,
+    handleFilterChange,
+    refetch: () =>
+      fetchData(method, pagination.currentPage, pagination.pageSize, filters),
+    handleSearch,
+    handleExports,
+  };
+};

package/source/theme.ts

@@ -0,0 +1,40 @@
+export type ComponentPresetId = "gbs-basic";
+
+export type ComponentSize = "sm" | "md" | "lg";
+
+export type ComponentVariant =
+  | "primary"
+  | "secondary"
+  | "outline"
+  | "ghost"
+  | "danger";
+
+export const defaultPresetId: ComponentPresetId = "gbs-basic";
+
+export const componentPresets = {
+  "gbs-basic": {
+    id: "gbs-basic",
+    radius: "rounded-lg",
+    focusRing:
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black dark:focus-visible:ring-white focus-visible:ring-offset-2",
+    disabled: "disabled:cursor-not-allowed disabled:opacity-55",
+    text: {
+      label: "text-sm font-medium text-zinc-700 dark:text-zinc-300",
+      helper: "text-xs text-zinc-500",
+      error: "text-xs font-medium text-rose-600",
+    },
+    surface: {
+      raised:
+        "border border-zinc-200 bg-white shadow-sm shadow-zinc-950/5 dark:border-zinc-900 dark:bg-black",
+      subtle:
+        "border border-zinc-200 bg-zinc-50 dark:border-zinc-900 dark:bg-zinc-950",
+      overlay:
+        "border border-zinc-200 bg-white shadow-xl shadow-zinc-950/10 dark:border-zinc-900 dark:bg-zinc-950",
+    },
+    control:
+      "border border-zinc-300 bg-white text-zinc-900 transition-colors placeholder:text-zinc-400 hover:border-zinc-400 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-100",
+  },
+} as const;
+
+export const getComponentPreset = (presetId: ComponentPresetId = defaultPresetId) =>
+  componentPresets[presetId] || componentPresets[defaultPresetId];

package/source/utils.ts

@@ -0,0 +1,10 @@
+// Common util functions
+export async function getSourceData(apiURl: any) {
+  try {
+    const res = await fetch(apiURl);
+    const data = await res.json();
+    return data;
+  } catch (error) {
+    console.error("Error Fetching Data", error);
+  }
+}

package/tools/env.cjs

@@ -0,0 +1,61 @@
+/*
+ * Reads `.env` at the repository root, so a key can live in a file instead of
+ * being re-exported into every new shell.
+ *
+ * Written rather than installed for the same reason as everything else here:
+ * this is twenty lines, and `dotenv` would be a dependency the published
+ * package has to carry for a dev-only tool.
+ *
+ * A real environment variable always wins. That ordering matters — CI sets
+ * secrets in the environment, and a stale `.env` on someone's laptop silently
+ * overriding them would be a genuinely confusing afternoon.
+ */
+
+const fs = require("fs");
+const path = require("path");
+
+/** Parses the `KEY=value` subset: comments, blank lines, optional quotes. */
+function parse(text) {
+  const out = {};
+  for (const line of text.split(/\r?\n/)) {
+    const trimmed = line.trim();
+    if (trimmed === "" || trimmed.startsWith("#")) continue;
+
+    const equals = trimmed.indexOf("=");
+    if (equals === -1) continue;
+
+    const key = trimmed.slice(0, equals).trim().replace(/^export\s+/, "");
+    let value = trimmed.slice(equals + 1).trim();
+
+    if (
+      (value.startsWith('"') && value.endsWith('"') && value.length > 1) ||
+      (value.startsWith("'") && value.endsWith("'") && value.length > 1)
+    ) {
+      value = value.slice(1, -1);
+    }
+    if (key) out[key] = value;
+  }
+  return out;
+}
+
+/**
+ * Fills in anything the environment does not already define.
+ *
+ * @returns the names loaded — never the values, which should not be logged.
+ */
+function load(root = process.cwd()) {
+  const file = path.join(root, ".env");
+  if (!fs.existsSync(file)) return [];
+
+  const loaded = [];
+  for (const [key, value] of Object.entries(parse(fs.readFileSync(file, "utf8")))) {
+    if (process.env[key] !== undefined) continue;
+    process.env[key] = value;
+    // A blank line in `.env.example` that nobody filled in is not a key, and
+    // reporting it as one implies a credential that is not there.
+    if (value !== "") loaded.push(key);
+  }
+  return loaded;
+}
+
+module.exports = { load, parse };

package/tools/passport/cli.cjs

@@ -0,0 +1,79 @@
+#!/usr/bin/env node
+/*
+ * Passport CLI used inside this repository.
+ *
+ *   node tools/passport/cli.cjs            generate / refresh passport.json
+ *   node tools/passport/cli.cjs --check    CI gate; writes nothing, exits 1 on drift
+ *
+ * The consumer-facing entry point is `@grampro/kit passport`, which calls the
+ * same functions against the copied component-lib folder.
+ */
+
+const path = require("path");
+const fs = require("fs");
+const { generate, check } = require("./index.cjs");
+
+const REPO = path.resolve(__dirname, "..", "..");
+const LIB = path.join(REPO, "source", "components");
+const COVERAGE_THRESHOLD = 40; // ratchet upward over time
+
+const args = process.argv.slice(2);
+const wantCheck = args.includes("--check");
+const quiet = args.includes("--quiet");
+const libraryVersion = JSON.parse(fs.readFileSync(path.join(REPO, "package.json"), "utf8")).version;
+
+const opts = {
+  libRoot: LIB,
+  repoRoot: REPO,
+  libraryVersion,
+  includeLocal: false,
+  coverageThreshold: COVERAGE_THRESHOLD,
+};
+
+function main() {
+  if (wantCheck) {
+    const { report, errors, warnings } = check(opts);
+    for (const row of report) {
+      if (row.ok && row.problems.length === 0) {
+        if (!quiet) console.log(`  ${row.component}: OK`);
+        continue;
+      }
+      for (const p of row.problems) {
+        const mark = p.level === "error" ? "✗" : "!";
+        console.log(`  ${mark} ${p.component}: ${p.message}`);
+      }
+    }
+    console.log(
+      `\n${report.length} components · ${errors} error(s) · ${warnings} warning(s)`,
+    );
+    if (errors > 0) {
+      console.error("\nPassports are out of date. Run `npm run passport` and commit the result.");
+      process.exit(1);
+    }
+    return;
+  }
+
+  const { results, written } = generate(opts);
+  const errors = results.flatMap((r) => r.issues.filter((i) => i.level === "error"));
+  const warns = results.flatMap((r) => r.issues.filter((i) => i.level === "warn"));
+
+  for (const e of errors) console.error(`  ✗ ${e.component}: ${e.message}`);
+  if (!quiet) for (const w of warns) console.log(`  ! ${w.component}: ${w.message}`);
+
+  console.log(
+    `\n${results.length} passports generated · ${written.length} file(s) changed · ` +
+      `${errors.length} error(s) · ${warns.length} warning(s)`,
+  );
+  if (written.length && !quiet) for (const f of written) console.log(`    ${f}`);
+  if (errors.length > 0) process.exit(1);
+}
+
+try {
+  main();
+} catch (error) {
+  if (error.code === "ETYPESCRIPT_MISSING" || error.code === "EBADJSON") {
+    console.error(error.message);
+    process.exit(1);
+  }
+  throw error;
+}