@peak-ai/canvas 1.4.22 → 1.4.23

package/src/plugins/helpers/data-table.tsx

@@ -1,300 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { useEffect, useState, Fragment } from 'react';
-import {
-  Table,
-  TableHeader,
-  TableRow,
-  TableHead,
-  TableBody,
-  TableCell,
-  TableHeadSortable,
-  SortDirection,
-} from '../../shadcn/components/ui/table';
-import { TableLoader } from '../../shadcn/components/ui/skeleton';
-import { ScrollArea, ScrollBar } from '../../shadcn/components/ui/scroll-area';
-import {
-  Pagination,
-  PaginationContent,
-  renderPaginationArrows,
-} from '../../shadcn/components/ui/pagination';
-import { TableButton } from '../../shadcn/components/ui/button';
-import { cn } from '../../shadcn/utils';
-import { renderNoDataFallback } from './extra'
-
-type RowAction = {
-  id: string;
-  text: string;
-  variant?: string;
-  tooltipContent?: string;
-  className?: string;
-};
-
-export type DataTableProps = {
-   data: Record<string, any>[];
-  headerMapper?: Record<string, string>;
-  className?: string;
-  isEditable?: boolean;
-  actions?: RowAction[];
-  pagination?: {
-    values?: {
-      pageNumber: number;
-      pageSize: number;
-    };
-    initialPage?: number;
-    initialPageSize?: number;
-    totalCount: number;
-    pageSizeOptions: number[];
-  };
-  isLoading?: boolean;
-  onRowAction?: (rowIndex: number, actionId: string) => void;
-  onPageChange?: (pageNumber: number, pageSize: number) => void;
-  onSort?: (column: string, direction: SortDirection) => void;
-  sortConfig?: Record<string, SortDirection>;
-  otherProps?: Record<string, any>;
-  height?: string | number;
-};
-
-export function DataTable({
-  data = [],
-  headerMapper = {},
-  className = '',
-  actions = [],
-  isEditable = false,
-  pagination,
-  isLoading = false,
-  onRowAction,
-  onPageChange,
-  onSort,
-  sortConfig,
-  otherProps = {},
-  height,
-}: DataTableProps) {
-
-  if (!data || data.length === 0) {
-    return (
-      <Fragment>
-        <div className="flex flex-col overflow-hidden">
-          <div
-            data-slot="table-container"
-            className="aspect-auto w-full"
-            style={{ height: 'auto', minHeight: '180px' }}
-          >
-            {isLoading ? <TableLoader /> : renderNoDataFallback()}
-          </div>
-        </div>
-      </Fragment>
-    );
-  }
-
-  const [activeSortColumn, setActiveSortColumn] = useState<string | null>(null);
-  const [sortDirections, setSortDirections] = useState<Record<string, SortDirection>>({});
-
-  const [pageNumber, setPageNumber] = useState(
-    Number(pagination?.values?.pageNumber ?? pagination?.initialPage ?? 1),
-  );
-  const [pageSize, setPageSize] = useState(
-    Number(pagination?.values?.pageSize ?? pagination?.initialPageSize ?? 10),
-  );
-  const [totalPages, setTotalPages] = useState(
-    Math.ceil((pagination?.totalCount || 0) / pageSize) || 1,
-  );
-
-  useEffect(() => {
-    setPageNumber(Number(pagination?.values?.pageNumber ?? pagination?.initialPage ?? 1));
-    setPageSize(Number(pagination?.values?.pageSize ?? pagination?.initialPageSize ?? 25));
-  }, [pagination]);
-
-  useEffect(() => {
-    setTotalPages(Math.ceil((pagination?.totalCount || 0) / pageSize) || 1);
-  }, [pagination?.totalCount, pageSize]);
-
-  useEffect(() => {
-    if (sortConfig) {
-      setSortDirections(sortConfig);
-      const first = Object.keys(sortConfig)[0];
-
-      if (first) {
-        setActiveSortColumn(first);
-      }
-    }
-  }, [sortConfig]);
-
-  useEffect(() => {
-      if (sortConfig?.sortColumn || sortConfig?.sortDirection) {
-          sortConfig.sortColumn = null;
-          sortConfig.sortDirection = null;
-        }
-        
-        setActiveSortColumn(null);
-        setSortDirections({});
-    }, []);
-  
-  const originalKeys = Object.keys(data[0] || {}).filter((key) => key in headerMapper);
-  const headers = originalKeys.map((key) => headerMapper[key]);
-
-  if (actions.length > 0) {
-    headers.push('');
-  }
-
-  const rows = data.map((datum: any) => originalKeys.map((key) => datum[key]));
-
-  async function handlePageChange(newPage = pageNumber, newSize = pageSize) {
-    setPageNumber(newPage);
-    setPageSize(newSize);
-    onPageChange?.(newPage, newSize);
-  }
-
-  function handleSortClick(column: string, direction: SortDirection) {
-    setActiveSortColumn(direction ? column : null);
-    setSortDirections((prev) => ({
-      ...prev,
-      [column]: direction,
-    }));
-    onSort?.(column, direction);
-  }
-
-  function renderActions(rowIndex: number, rowActions: RowAction[]) {
-    if (!actions.length) {
-      return null;
-    }
-
-    return (
-      <TableCell className="sticky right-0 bg-white">
-        {rowActions.map((action) => (
-          <TableButton
-            key={action.id}
-            className={action.className}
-            isEditable={isEditable}
-            onClick={() => onRowAction?.(rowIndex, action.id)}
-            variant={action.variant}
-            text={action.text}
-            tooltipContent={action.tooltipContent}
-            disabled={isLoading}
-          />
-        ))}
-      </TableCell>
-    );
-  }
-
-  const defaultClasses = `aspect-auto w-full`;
-  const mergedClasses = className ? cn(defaultClasses, className) : defaultClasses;
-
-  function renderTableComponent() {
-    if (isLoading || (!data || data.length === 0)) {
-      return <TableLoader />;
-    }
-
-    return (
-      <Table
-        {...otherProps}
-        className={`caption-bottom text-sm relative ${mergedClasses}`}
-        data-slot="table"
-      >
-        <TableHeader data-slot="table-header" className="sticky top-0 z-2">
-          <TableRow>
-            {headers.map((head: string, idx: number) => {
-              const isActionColumn = actions.length > 0 && idx === headers.length - 1;
-              const originalKey = originalKeys[idx];
-
-              if (isActionColumn) {
-                return (
-                  <TableHead
-                    key={idx}
-                    data-slot={`table-header-${idx}`}
-                    contentEditable={isEditable}
-                    className="sticky right-0 bg-slate-100"
-                  >
-                    {head}
-                  </TableHead>
-                );
-              }
-
-              return (
-                <TableHeadSortable
-                  key={idx}
-                  data-slot={`table-header-${idx}`}
-                  sortDirection={sortDirections[originalKey] || 'asc'}
-                  isActive={activeSortColumn === originalKey}
-                  onSort={(direction) => handleSortClick(originalKey, direction)}
-                  sortable={!isLoading}
-                  isEditable={isEditable}
-                >
-                  {head}
-                </TableHeadSortable>
-              );
-            })}
-          </TableRow>
-        </TableHeader>
-        <TableBody data-slot="table-body">
-          {rows.map((row: any[], rIdx: number) => (
-            <TableRow
-              key={rIdx}
-              data-slot={`row-${rIdx}`}
-              className="hover:bg-muted/50 border-b transition-colors"
-            >
-              {row.map((cell: string, cIdx: number) => (
-                <TableCell
-                  key={cIdx}
-                  data-slot={`cell-${rIdx}-${cIdx}`}
-                  className="p-2 align-middle whitespace-nowrap"
-                  contentEditable={false}
-                >
-                  {cell === null ? '-' : String(cell)}
-                </TableCell>
-              ))}
-              {renderActions(rIdx, actions)}
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    );
-  }
-
-  return (
-    <Fragment>
-      <div className="flex flex-col h-full overflow-hidden">
-        <ScrollArea
-          data-slot="table-container"
-          className={mergedClasses}
-          {...(height !== undefined && { style: { height } })}
-        >
-          {renderTableComponent()}
-          <ScrollBar orientation="horizontal" />
-        </ScrollArea>
-      </div>
-      {pagination && pagination.totalCount > 0 && (
-        <div className="flex-shrink-0 flex items-center justify-between mt-2 w-full overflow-x-auto border-t pt-2">
-          <div className="flex items-center gap-2 flex-shrink-0">
-            <label htmlFor="page-size-select" className="text-sm whitespace-nowrap">
-              Rows per page:
-            </label>
-            <select
-              id="page-size-select"
-              value={pageSize}
-              onChange={(e) => handlePageChange(1, Number(e.target.value))}
-              className="border rounded px-2 py-1 text-sm cursor-pointer"
-              disabled={isLoading}
-            >
-              {pagination.pageSizeOptions.map((size: number) => (
-                <option key={size} value={size}>
-                  {size}
-                </option>
-              ))}
-            </select>
-          </div>
-          <div className="flex items-center gap-1 flex-shrink-0">
-            <span className="text-xs text-muted-foreground whitespace-nowrap ml-1.5">
-              {(pageNumber - 1) * pageSize + 1}–
-              {Math.min(pageNumber * pageSize, pagination.totalCount)} of {pagination.totalCount}
-            </span>
-            <Pagination>
-              <PaginationContent className="gap-0.2 flex-shrink-0">
-                {renderPaginationArrows(pageNumber, totalPages, isLoading, handlePageChange)}
-              </PaginationContent>
-            </Pagination>
-          </div>
-        </div>
-      )}
-    </Fragment>
-  );
-}

package/src/plugins/helpers/extra.tsx

@@ -1,164 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { JSX } from 'react';
-
-import { cn } from '../../shadcn/utils';
-import { Checkbox } from '../../shadcn/components/ui/checkbox';
-import { CircleAlert } from 'lucide-react';
-import {
-  HoverCard,
-  HoverCardTrigger,
-  HoverCardContent,
-} from '../../shadcn/components/ui/hover-card';
-import { Input } from '../../shadcn/components/ui/input';
-import { Label } from '../../shadcn/components/ui/label';
-import { Separator } from '../../shadcn/components/ui/separator';
-import { Textarea } from '../../shadcn/components/ui/textarea';
-import { Tooltip, TooltipTrigger, TooltipContent } from '../../shadcn/components/ui/tooltip';
-
-export function renderNoDataFallback() {
-  return (
-    <div className="w-full py-8 flex flex-col items-center justify-center px-6 text-center" style={{ minHeight: '180px' }}>
-      <CircleAlert className="w-12 h-12 text-gray-400 mb-2" />
-      <h3 className="text-lg font-medium text-gray-900">No data available</h3>
-      <p className="mt-2 text-sm text-gray-500 max-w-md">
-        Check your filters or try a different time range.
-      </p>
-    </div>
-  );
-}
-
-export function renderCheckbox(props: any): JSX.Element {
-  const { label = '', defaultChecked = false, className, isEditable = false, ...rest } = props;
-  const defaultClasses = 'flex items-center';
-  const merged = className ? cn(defaultClasses, className) : defaultClasses;
-
-  return (
-    <div className={merged} {...rest}>
-      <Checkbox defaultChecked={defaultChecked} />
-      {label && (
-        <Label data-slot="label" contentEditable={isEditable} className="ml-2">
-          {label}
-        </Label>
-      )}
-    </div>
-  );
-}
-
-export function renderHoverCard(props: any): JSX.Element {
-  const {
-    triggerContent = 'Hover over me',
-    cardContent = 'Additional information',
-    className,
-    isEditable = false,
-    ...rest
-  } = props;
-  const defaultClasses = 'w-[320px] max-w-[320px] shadow rounded-lg';
-  const merged = className ? cn(defaultClasses, className) : defaultClasses;
-
-  return (
-    <HoverCard className={merged} {...rest}>
-      <HoverCardTrigger asChild>
-        <span data-slot="triggerContent" contentEditable={isEditable}>
-          {triggerContent}
-        </span>
-      </HoverCardTrigger>
-      <HoverCardContent>
-        <div data-slot="cardContent" contentEditable={isEditable}>
-          {cardContent}
-        </div>
-      </HoverCardContent>
-    </HoverCard>
-  );
-}
-
-export function renderInput(props: any): JSX.Element {
-  const {
-    label = '',
-    placeholder = '',
-    value = '',
-    className,
-    isEditable = false,
-    ...rest
-  } = props;
-  const defaultClasses = 'w-[320px] p-2 border border-gray-300 rounded-md';
-  const merged = className ? cn(defaultClasses, className) : defaultClasses;
-
-  return (
-    <div className={`flex flex-col ${merged}`} {...rest}>
-      {label && (
-        <Label data-slot="label" contentEditable={isEditable} className="mb-1">
-          {label}
-        </Label>
-      )}
-      <Input placeholder={placeholder} value={value} />
-    </div>
-  );
-}
-
-export function renderLabel(props: any): JSX.Element {
-  const { text = 'Label', className, isEditable = false, ...rest } = props;
-  const defaultClasses = 'text-base font-semibold mb-2';
-  const merged = className ? cn(defaultClasses, className) : defaultClasses;
-
-  return (
-    <Label data-slot="text" contentEditable={isEditable} className={merged} {...rest}>
-      {text}
-    </Label>
-  );
-}
-
-export function renderSeparator(props: any): JSX.Element {
-  const { className, ...rest } = props;
-  const defaultClasses = 'my-4 border-t-2';
-  const merged = className ? cn(defaultClasses, className) : defaultClasses;
-
-  return <Separator className={merged} {...rest} />;
-}
-
-export function renderTextarea(props: any): JSX.Element {
-  const {
-    label = '',
-    placeholder = '',
-    value = '',
-    className,
-    isEditable = false,
-    ...rest
-  } = props;
-  const defaultClasses = 'w-[320px] p-2 border border-gray-300 rounded-md';
-  const merged = className ? cn(defaultClasses, className) : defaultClasses;
-
-  return (
-    <div className={`flex flex-col ${merged}`} {...rest}>
-      {label && (
-        <Label data-slot="label" contentEditable={isEditable} className="mb-1">
-          {label}
-        </Label>
-      )}
-      <Textarea placeholder={placeholder} value={value} />
-    </div>
-  );
-}
-
-export function renderTooltip(props: any): JSX.Element {
-  const {
-    triggerContent = 'Hover here',
-    tooltipContent = 'Tooltip information',
-    className,
-    isEditable = false,
-    ...rest
-  } = props;
-  const merged = className || '';
-
-  return (
-    <Tooltip className={merged} {...rest}>
-      <TooltipTrigger asChild>
-        <span data-slot="triggerContent" contentEditable={isEditable}>
-          {triggerContent}
-        </span>
-      </TooltipTrigger>
-      <TooltipContent data-slot="tooltipContent" contentEditable={isEditable}>
-        {tooltipContent}
-      </TooltipContent>
-    </Tooltip>
-  );
-}

package/src/plugins/helpers/query-cache-context.tsx

@@ -1,154 +0,0 @@
-import React, { createContext, useContext, useCallback, useRef, useMemo } from 'react';
-import {
-  QueryCacheEntry,
-  InteractionType,
-  InteractionState,
-} from './query-cache-utils';
-import { getGlobalQueryCache, configureGlobalQueryCache } from './query-cache-singleton';
-
-type QueryCacheContextValue = {
-  getCachedQuery: (
-    componentId: string,
-    interactionType: InteractionType,
-    state: InteractionState
-  ) => QueryCacheEntry | null;
-  
-  setCachedQuery: (
-    componentId: string,
-    interactionType: InteractionType,
-    state: InteractionState,
-    entry: QueryCacheEntry
-  ) => void;
-  
-  invalidateComponent: (componentId: string) => void;
-
-  invalidateAll: () => void;
-
-  isCached: (
-    componentId: string,
-    interactionType: InteractionType,
-    state: InteractionState
-  ) => boolean;
-};
-
-const QueryCacheContext = createContext<QueryCacheContextValue | null>(null);
-
-type QueryCacheProviderProps = {
-  children: React.ReactNode;
-  maxCacheSize?: number;
-  maxCacheAge?: number;
-};
-
-export function QueryCacheProvider({
-  children,
-  maxCacheSize = 100,
-  maxCacheAge = 5 * 60 * 1000, // 5 minutes
-}: QueryCacheProviderProps) {
-  const isConfigured = useRef(false);
-  
-  if (!isConfigured.current) {
-    configureGlobalQueryCache(maxCacheSize, maxCacheAge);
-    isConfigured.current = true;
-  }
-
-  const cacheManager = useRef(getGlobalQueryCache()).current;
-  
-  const getCachedQuery = useCallback(
-    (
-      componentId: string,
-      interactionType: InteractionType,
-      state: InteractionState
-    ): QueryCacheEntry | null => {
-      return cacheManager.getCachedQuery(componentId, interactionType, state);
-    },
-    [cacheManager]
-  );
-  
-  const setCachedQuery = useCallback(
-    (
-      componentId: string,
-      interactionType: InteractionType,
-      state: InteractionState,
-      entry: QueryCacheEntry
-    ) => {
-      cacheManager.setCachedQuery(componentId, interactionType, state, entry);
-    },
-    [cacheManager]
-  );
-  
-  const invalidateComponent = useCallback(
-    (componentId: string) => {
-      cacheManager.invalidateComponent(componentId);
-    },
-    [cacheManager]
-  );
-  
-  const invalidateAll = useCallback(() => {
-    cacheManager.invalidateAll();
-  }, [cacheManager]);
-  
-  const isCached = useCallback(
-    (
-      componentId: string,
-      interactionType: InteractionType,
-      state: InteractionState
-    ): boolean => {
-      return cacheManager.isCached(componentId, interactionType, state);
-    },
-    [cacheManager]
-  );
-  
-  const value = useMemo(
-    () => ({
-      getCachedQuery,
-      setCachedQuery,
-      invalidateComponent,
-      invalidateAll,
-      isCached,
-    }),
-    [getCachedQuery, setCachedQuery, invalidateComponent, invalidateAll, isCached]
-  );
-  
-  return (
-    <QueryCacheContext.Provider value={value}>
-      {children}
-    </QueryCacheContext.Provider>
-  );
-}
-
-export function useQueryCache(): QueryCacheContextValue {
-  const context = useContext(QueryCacheContext);
-  
-  if (!context) {
-    throw new Error('useQueryCache must be used within a QueryCacheProvider');
-  }
-  
-  return context;
-}
-
-export function useInvalidateCacheOnChange(
-  componentId: string | undefined,
-  dependencies: unknown[]
-): void {
-  const { invalidateComponent } = useQueryCache();
-  const prevDepsRef = useRef<unknown[]>([]);
-  
-  React.useEffect(() => {
-    if (prevDepsRef.current.length === 0) {
-      prevDepsRef.current = dependencies;
-
-      return;
-    }
-    
-    const hasChanged = dependencies.some(
-      (dep, index) => dep !== prevDepsRef.current[index]
-    );
-    
-    if (hasChanged && componentId) {
-      invalidateComponent(componentId);
-    }
-    
-    prevDepsRef.current = dependencies;
-  }, [componentId, invalidateComponent, dependencies]);
-}
-