@m5kdev/frontend 0.1.4 → 0.1.5

package/src/modules/file/hooks/useUpload.ts

@@ -1,220 +0,0 @@
-import { useCallback, useState } from "react";
-
-export type UploadStatus = "pending" | "uploading" | "completed" | "error";
-
-export interface UploadFileTask {
-  id: string;
-  file: File;
-  progress: number;
-  status: UploadStatus;
-  errorMessage?: string;
-  bytesUploaded: number;
-  totalBytes: number;
-}
-
-interface UploadCallbacks {
-  onProgress: (progress: number, bytesUploaded: number) => void;
-  onComplete: () => void;
-  onError: (error: string) => void;
-}
-
-// Shared utility function to create upload promise
-const createUploadPromise = <T>(
-  type: string,
-  file: File,
-  callbacks: UploadCallbacks
-): Promise<T> => {
-  return new Promise((resolve, reject) => {
-    const xhr = new XMLHttpRequest();
-
-    xhr.upload.onprogress = (event: ProgressEvent<EventTarget>) => {
-      if (event.lengthComputable) {
-        const progress = Math.round((event.loaded * 100) / event.total);
-        callbacks.onProgress(progress, event.loaded);
-      }
-    };
-
-    xhr.onload = () => {
-      if (xhr.status === 200) {
-        callbacks.onComplete();
-        // if response has json header, parse it
-        if (xhr.getResponseHeader("Content-Type")?.includes("application/json")) {
-          resolve(JSON.parse(xhr.response) as T);
-        } else {
-          resolve(xhr.response as T);
-        }
-      } else {
-        const errorMessage = `Upload failed with status ${xhr.status}`;
-        callbacks.onError(errorMessage);
-        reject(new Error(errorMessage));
-      }
-    };
-
-    xhr.onerror = () => {
-      const errorMessage = "Network error during upload";
-      callbacks.onError(errorMessage);
-      reject(new Error(errorMessage));
-    };
-
-    xhr.open("POST", `${import.meta.env.VITE_SERVER_URL}/upload/file/${type}`);
-    const formData = new FormData();
-    formData.append("file", file);
-    xhr.send(formData);
-  });
-};
-
-// Shared utility to create a task
-const createUploadTask = (file: File): UploadFileTask => ({
-  id:
-    typeof crypto !== "undefined" && crypto.randomUUID
-      ? crypto.randomUUID()
-      : Math.random().toString(36).substr(2, 9),
-  file,
-  progress: 0,
-  status: "pending",
-  bytesUploaded: 0,
-  totalBytes: file.size,
-});
-
-// Hook for single file upload
-export function useFileUpload() {
-  const [uploadTask, setUploadTask] = useState<UploadFileTask | null>(null);
-
-  const upload = useCallback(async <T>(type: string, file: File): Promise<T> => {
-    const task = createUploadTask(file);
-    setUploadTask(task);
-
-    const callbacks: UploadCallbacks = {
-      onProgress: (progress, bytesUploaded) => {
-        setUploadTask((prev) =>
-          prev
-            ? {
-                ...prev,
-                progress,
-                bytesUploaded,
-                status: "uploading",
-              }
-            : null
-        );
-      },
-      onComplete: () => {
-        setUploadTask((prev) => (prev ? { ...prev, status: "completed", progress: 100 } : null));
-      },
-      onError: (errorMessage) => {
-        setUploadTask((prev) =>
-          prev
-            ? {
-                ...prev,
-                status: "error",
-                errorMessage,
-                progress: 0,
-              }
-            : null
-        );
-      },
-    };
-
-    return createUploadPromise<T>(type, file, callbacks);
-  }, []);
-
-  const reset = useCallback(() => {
-    setUploadTask(null);
-  }, []);
-
-  return {
-    ...uploadTask,
-    upload,
-    reset,
-  };
-}
-
-// Hook for multiple file uploads
-export function useMultipartUpload() {
-  const [uploadQueue, setUploadQueue] = useState<UploadFileTask[]>([]);
-  const [overallProgress, setOverallProgress] = useState<number>(0);
-
-  const updateTask = useCallback((id: string, changes: Partial<UploadFileTask>) => {
-    setUploadQueue((prev) => prev.map((task) => (task.id === id ? { ...task, ...changes } : task)));
-  }, []);
-
-  const updateOverallProgress = useCallback((queue: UploadFileTask[]) => {
-    if (queue.length === 0) {
-      setOverallProgress(100);
-      return;
-    }
-    const totalBytes = queue.reduce((sum, task) => sum + task.file.size, 0);
-    const uploadedBytes = queue.reduce((sum, task) => {
-      if (task.status === "completed") {
-        return sum + task.file.size;
-      }
-      if (task.status === "uploading") {
-        return sum + (task.progress / 100) * task.file.size;
-      }
-      return sum;
-    }, 0);
-    setOverallProgress(Math.floor((uploadedBytes / totalBytes) * 100));
-  }, []);
-
-  const uploadSingleFile = useCallback(
-    async <T>(type: string, task: UploadFileTask): Promise<T> => {
-      const callbacks: UploadCallbacks = {
-        onProgress: (progress, bytesUploaded) => {
-          updateTask(task.id, {
-            progress,
-            bytesUploaded,
-            status: "uploading",
-          });
-          setUploadQueue((currentQueue) => {
-            const updatedQueue = currentQueue.map((q) =>
-              q.id === task.id ? { ...q, progress, bytesUploaded } : q
-            );
-            updateOverallProgress(updatedQueue);
-            return updatedQueue;
-          });
-        },
-        onComplete: () => {
-          updateTask(task.id, { status: "completed", progress: 100 });
-        },
-        onError: (errorMessage) => {
-          updateTask(task.id, {
-            status: "error",
-            errorMessage,
-            progress: 0,
-          });
-        },
-      };
-
-      return createUploadPromise<T>(type, task.file, callbacks);
-    },
-    [updateTask, updateOverallProgress]
-  );
-
-  const uploadFiles = useCallback(
-    async (type: string, files: File[]) => {
-      const initialQueue = files.map(createUploadTask);
-      setUploadQueue(initialQueue);
-      updateOverallProgress(initialQueue);
-
-      for (const task of initialQueue) {
-        try {
-          await uploadSingleFile(type, task);
-        } catch (_error) {}
-      }
-    },
-    [uploadSingleFile, updateOverallProgress]
-  );
-
-  const reset = useCallback(() => {
-    setUploadQueue([]);
-    setOverallProgress(0);
-  }, []);
-
-  return {
-    uploadQueue,
-    overallProgress,
-    uploadFiles,
-    reset,
-    getTotalBytes: () => uploadQueue.reduce((sum, task) => sum + task.totalBytes, 0),
-    getTotalBytesUploaded: () => uploadQueue.reduce((sum, task) => sum + task.bytesUploaded, 0),
-  };
-}

package/src/modules/table/hooks/useDateRangeFilter.ts

@@ -1,55 +0,0 @@
-import type { UseQueryOptions, UseQueryResult } from "@tanstack/react-query";
-import { useNuqsQueryParams, type NuqsQueryParams } from "./useNuqsQueryParams";
-import { useQueryWithParams } from "./useQueryWithParams";
-
-export interface DateRangeFilterReturn<TData> {
-  params: NuqsQueryParams;
-  query: UseQueryResult<TData>;
-}
-
-/**
- * Flexible query options type that accepts both standard TanStack Query options
- * and tRPC's queryOptions function return type.
- * Uses permissive generics to handle type differences between TanStack Query and tRPC.
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type QueryOptionsLike<TData> = UseQueryOptions<TData, any, TData, any>;
-
-/**
- * Function type that accepts both standard query options functions and tRPC's queryOptions.
- * tRPC's queryOptions accepts (input, opts?) while standard functions may only accept (input).
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type GetQueryOptionsFn<TInput, TData> = (input: TInput, ...args: any[]) => QueryOptionsLike<TData>;
-
-export interface DateRangeFilterOptions<TInput, TData> {
-  getQueryOptions: GetQueryOptionsFn<TInput, TData>;
-  queryParams?: TInput;
-}
-
-/**
- * Hook for charts with URL-synced query parameters and data fetching
- * Similar to useNuqsTable but without rowSelection (not needed for charts)
- */
-export const useDateRangeFilter = <TInput, TData>({
-  getQueryOptions,
-  queryParams = {} as TInput,
-}: DateRangeFilterOptions<TInput, TData>): DateRangeFilterReturn<TData> => {
-  // Get only filters from URL query state
-  const { filters, setFilters, granularity, setGranularity } = useNuqsQueryParams();
-  
-  
-  // Get query result
-  const queryResult = useQueryWithParams({
-    getQueryOptions,
-    queryParams,
-    queryState: { filters },
-  });
-
-  return {
-    params: { filters, setFilters, granularity, setGranularity },
-    query: queryResult,
-  };
-};
-
-

package/src/modules/table/hooks/useNuqsQueryParams.ts

@@ -1,134 +0,0 @@
-import type { QueryFilters } from "@m5kdev/commons/modules/schemas/query.schema";
-import { filtersSchema } from "@m5kdev/commons/modules/schemas/query.schema";
-import type { PaginationState, SortingState, Updater } from "@tanstack/react-table";
-import {
-  parseAsInteger,
-  parseAsJson,
-  parseAsString,
-  parseAsStringLiteral,
-  useQueryState,
-} from "nuqs";
-import { useCallback, useEffect, useMemo } from "react";
-
-const parseAsFilters = parseAsJson<QueryFilters>((value) => filtersSchema.parse(value)).withDefault(
-  []
-);
-
-export type Order = "asc" | "desc";
-
-export type Granularity = "daily" | "weekly" | "monthly" | "yearly";
-
-export interface NuqsQueryParams {
-  filters?: QueryFilters;
-  setFilters?: (filters: QueryFilters) => void;
-  granularity?: Granularity;
-  setGranularity?: (value: Granularity) => void;
-  sort?: string;
-  order?: Order | null;
-  setSorting?: (updater: Updater<SortingState>) => void;
-  sorting?: SortingState;
-  page?: number;
-  limit?: number;
-  setPagination?: (updater: Updater<PaginationState>) => void;
-  pagination?: PaginationState;
-}
-
-/**
- * Hook to manage all query parameters via nuqs (URL query parameters)
- * Manages: filters, sort, order, page, limit
- * Reusable for any paginated/sorted/filtered lists
- */
-export const useNuqsQueryParams = (): NuqsQueryParams => {
-  const [sort, setSort] = useQueryState<string>("sort", parseAsString.withDefault(""));
-  const [order, setOrder] = useQueryState<Order>("order", parseAsStringLiteral(["asc", "desc"]));
-  const [page, setPage] = useQueryState<number>("page", parseAsInteger.withDefault(1));
-  const [limit, setLimit] = useQueryState<number>("limit", parseAsInteger.withDefault(10));
-  const [filters, setFilters] = useQueryState<QueryFilters>("filters", parseAsFilters);
-  const [granularity, setGranularity] = useQueryState<Granularity>(
-    "granularity",
-    parseAsStringLiteral(["daily", "weekly", "monthly", "yearly"]).withDefault("daily")
-  );
-
-  const sorting = useMemo(() => {
-    if (!sort) {
-      return [];
-    }
-    const effectiveOrder = order ?? "asc";
-    return [{ id: sort, desc: effectiveOrder === "desc" }];
-  }, [sort, order]);
-
-  const pagination = useMemo(() => ({ pageIndex: page - 1, pageSize: limit }), [page, limit]);
-
-  const setSorting = useCallback(
-    (updater: Updater<SortingState>) => {
-      // Build current sorting state from current values
-      const currentSorting: SortingState = sort
-        ? [{ id: sort, desc: (order ?? "asc") === "desc" }]
-        : [];
-
-      const next = typeof updater === "function" ? updater(currentSorting) : updater;
-      const first = next[0];
-
-      if (!first || !first.id) {
-        setSort("");
-        setOrder(null);
-        return;
-      }
-
-      setSort(first.id);
-      setOrder(first.desc ? "desc" : "asc");
-    },
-    [sort, order, setSort, setOrder]
-  );
-
-  // Sync order to "asc" if sort is set but order is null (handles URL state inconsistencies)
-  useEffect(() => {
-    if (sort && !order) {
-      setOrder("asc");
-    }
-  }, [sort, order, setOrder]);
-
-  // biome-ignore lint/correctness/useExhaustiveDependencies: dependent on page and limit only
-  const setPagination = useCallback(
-    (updater: Updater<PaginationState>) => {
-      // TanStack Table uses 0-based indexing, but URL uses 1-based
-      const currentState = { pageIndex: page - 1, pageSize: limit };
-      const next = typeof updater === "function" ? updater(currentState) : updater;
-      // Convert back to 1-based for URL
-      setPage((next.pageIndex ?? 0) + 1);
-      setLimit(next.pageSize ?? 10);
-    },
-    [page, limit]
-  );
-
-  return useMemo(
-    () => ({
-      filters,
-      setFilters,
-      granularity,
-      setGranularity,
-      sort,
-      order,
-      setSorting,
-      sorting,
-      page,
-      limit,
-      setPagination,
-      pagination,
-    }),
-    [
-      filters,
-      setFilters,
-      granularity,
-      setGranularity,
-      sort,
-      order,
-      setSorting,
-      sorting,
-      page,
-      limit,
-      setPagination,
-      pagination,
-    ]
-  );
-};

package/src/modules/table/hooks/useNuqsTable.ts

@@ -1,83 +0,0 @@
-import type { UseQueryOptions, UseQueryResult } from "@tanstack/react-query";
-import type { RowSelectionState, Updater } from "@tanstack/react-table";
-import { useCallback, useMemo, useState } from "react";
-import { type NuqsQueryParams, useNuqsQueryParams } from "./useNuqsQueryParams";
-import { useQueryWithParams } from "./useQueryWithParams";
-
-export interface TableParams extends NuqsQueryParams {
-  rowSelection: RowSelectionState;
-  setRowSelection: (updater: Updater<RowSelectionState>) => void;
-}
-
-/**
- * Alias for TableParams - used by TablePagination and other table components
- */
-export type TableProps = TableParams;
-
-export interface NuqsTableReturn<TData> {
-  params: TableParams;
-  query: UseQueryResult<TData>;
-}
-
-/**
- * Flexible query options type that accepts both standard TanStack Query options
- * and tRPC's queryOptions function return type.
- * Uses permissive generics to handle type differences between TanStack Query and tRPC.
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type QueryOptionsLike<TData> = UseQueryOptions<TData, any, TData, any>;
-
-/**
- * Function type that accepts both standard query options functions and tRPC's queryOptions.
- * tRPC's queryOptions accepts (input, opts?) while standard functions may only accept (input).
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type GetQueryOptionsFn<TInput, TData> = (input: TInput, ...args: any[]) => QueryOptionsLike<TData>;
-
-export interface NuqsTableOptions<TInput, TData> {
-  getQueryOptions: GetQueryOptionsFn<TInput, TData>;
-  queryParams?: TInput;
-}
-
-const useNuqsTable = <TInput, TData>({
-  getQueryOptions,
-  queryParams = {} as TInput,
-}: NuqsTableOptions<TInput, TData>): NuqsTableReturn<TData> => {
-  // Get all URL query state
-  const queryState = useNuqsQueryParams();
-
-  // Get query result
-  const queryResult = useQueryWithParams({
-    getQueryOptions,
-    queryParams,
-    queryState,
-  });
-
-  // Table-specific row selection state
-  const [rowSelection, setRowSelectionRaw] = useState<RowSelectionState>({});
-
-  console.log("rowSelection", rowSelection);
-
-  const setRowSelection = useCallback((updater: Updater<RowSelectionState>) => {
-    setRowSelectionRaw((prev: RowSelectionState) => {
-      const next = typeof updater === "function" ? updater(prev) : updater;
-      return next;
-    });
-  }, []);
-
-  const params = useMemo(
-    () => ({
-      ...queryState,
-      rowSelection,
-      setRowSelection,
-    }),
-    [queryState, rowSelection, setRowSelection]
-  );
-
-  return {
-    params,
-    query: queryResult,
-  };
-};
-
-export default useNuqsTable;

package/src/modules/table/hooks/useQueryWithParams.ts

@@ -1,62 +0,0 @@
-import { type UseQueryOptions, type UseQueryResult, useQuery } from "@tanstack/react-query";
-import { useMemo } from "react";
-import type { NuqsQueryParams } from "./useNuqsQueryParams";
-
-/**
- * Flexible query options type that accepts both standard TanStack Query options
- * and tRPC's queryOptions function return type.
- * Uses permissive generics to handle type differences between TanStack Query and tRPC.
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type QueryOptionsLike<TData> = UseQueryOptions<TData, any, TData, any>;
-
-/**
- * Function type that accepts both standard query options functions and tRPC's queryOptions.
- * tRPC's queryOptions accepts (input, opts?) while standard functions may only accept (input).
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type GetQueryOptionsFn<TInput, TData> = (input: TInput, ...args: any[]) => QueryOptionsLike<TData>;
-
-export interface QueryWithParamsOptions<TInput, TData> {
-  getQueryOptions: GetQueryOptionsFn<TInput, TData>;
-  queryParams?: TInput;
-  queryState: Pick<NuqsQueryParams, "filters" | "sort" | "order" | "page" | "limit">;
-  enabled?: boolean;
-}
-
-/**
- * Hook to integrate query state with React Query
- * Combines queryParams with queryState and manages data fetching
- */
-export const useQueryWithParams = <TInput, TData>({
-  getQueryOptions,
-  queryParams = {} as TInput,
-  queryState,
-  enabled = true,
-}: QueryWithParamsOptions<TInput, TData>): UseQueryResult<TData> => {
-  const { filters, sort, order, page, limit } = queryState;
-
-  const input = useMemo(
-    () => ({
-      ...queryParams,
-      page,
-      limit,
-      sort,
-      order: order ?? undefined,
-      filters,
-    }),
-    [queryParams, page, limit, sort, order, filters]
-  );
-
-  const queryOptions = useMemo(
-    () => ({
-      ...getQueryOptions(input),
-      placeholderData: (previousData: TData | undefined) => previousData,
-      enabled,
-    }),
-    [getQueryOptions, input, enabled]
-  );
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  return useQuery(queryOptions as any) as UseQueryResult<TData>;
-};

package/src/types.ts

@@ -1,4 +0,0 @@
-import type { BackendTRPCRouter } from "@m5kdev/backend/types";
-import type { createTRPCContext } from "@trpc/tanstack-react-query";
-
-export type UseBackendTRPC = ReturnType<typeof createTRPCContext<BackendTRPCRouter>>["useTRPC"];

package/src/utils/date.ts

@@ -1,88 +0,0 @@
-import type { DateValue, RangeValue } from "@heroui/react";
-import { CalendarDate, getLocalTimeZone, parseAbsolute } from "@internationalized/date";
-import type { QueryFilter } from "@m5kdev/commons/modules/schemas/query.schema";
-import { DateTime } from "luxon";
-
-/**
- * Convert CalendarDate to UTC ISO string at midnight UTC
- */
-export const calendarDateToUTC = (date: CalendarDate): string => {
-  return DateTime.utc(date.year, date.month, date.day).toISO() ?? "";
-};
-
-/**
- * Convert CalendarDate to UTC ISO string at end of day UTC
- */
-export const calendarDateToUTCEndOfDay = (date: CalendarDate): string => {
-  return DateTime.utc(date.year, date.month, date.day).endOf("day").toISO() ?? "";
-};
-
-/**
- * Convert RangeValue<DateValue> to URL string format "startISO,endISO"
- */
-export const rangeToUrlString = (range: RangeValue<DateValue> | null): string | null => {
-  if (!range || !range.start || !range.end) return null;
-
-  const start = range.start as unknown as CalendarDate;
-  const end = range.end as unknown as CalendarDate;
-
-  if (!start?.year || !end?.year) return null;
-
-  // Format as ISO date strings (YYYY-MM-DD)
-  const startISO = `${start.year}-${String(start.month).padStart(2, "0")}-${String(start.day).padStart(2, "0")}`;
-  const endISO = `${end.year}-${String(end.month).padStart(2, "0")}-${String(end.day).padStart(2, "0")}`;
-
-  return `${startISO},${endISO}`;
-};
-
-/**
- * Convert URL string "startISO,endISO" to RangeValue<DateValue>
- */
-export const urlStringToRange = (value: string | null): RangeValue<DateValue> | null => {
-  if (!value) return null;
-
-  const [startISO, endISO] = value.split(",");
-  if (!startISO || !endISO) return null;
-
-  const tz = getLocalTimeZone();
-
-  // Parse ISO date strings using parseAbsolute for proper timezone handling
-  const startZoned = parseAbsolute(`${startISO}T00:00:00Z`, tz);
-  const endZoned = parseAbsolute(`${endISO}T00:00:00Z`, tz);
-
-  if (!startZoned || !endZoned) return null;
-
-  const startDate = new CalendarDate(startZoned.year, startZoned.month, startZoned.day);
-  const endDate = new CalendarDate(endZoned.year, endZoned.month, endZoned.day);
-
-  return {
-    start: startDate as unknown as DateValue,
-    end: endDate as unknown as DateValue,
-  } as RangeValue<DateValue>;
-};
-
-/**
- * Convert date range to QueryFilter format
- */
-export const dateRangeToFilter = (
-  dateRange: RangeValue<DateValue> | null,
-  columnId = "startedAt"
-): QueryFilter | null => {
-  if (!dateRange || !dateRange.start || !dateRange.end) return null;
-
-  const start = dateRange.start as unknown as CalendarDate;
-  const end = dateRange.end as unknown as CalendarDate;
-
-  if (!start?.year || !end?.year) return null;
-
-  const startISO = calendarDateToUTC(start);
-  const endISO = calendarDateToUTCEndOfDay(end);
-
-  return {
-    columnId,
-    type: "date",
-    method: "between",
-    value: startISO,
-    valueTo: endISO,
-  };
-};