@peak-ai/canvas 1.3.16 → 1.3.17

package/src/shadcn/components/ui/filter.tsx

@@ -1,355 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { ChevronDown, ChevronUp, ListFilter as FilterIcon, Loader2Icon } from 'lucide-react';
-
-import { Button } from './button';
-import { Checkbox } from './checkbox';
-import { ScrollArea } from './scroll-area';
-import { getAffectedComponentsWithLoader } from '../../../helpers';
-import { renderDateFilter } from './date-filter';
-
-type FilterOption = {
-  label: string;
-  value: string;
-};
-
-type FilterProps = {
-  isEditable?: boolean;
-  gjsModel: any;
-  performInteraction: (payload: Record<string, any>) => Promise<void>;
-};
-
-type FilterHeaderProps = {
-  label: string;
-  count: number;
-  isDisabled: boolean;
-  isDropdownOpen: boolean;
-  isLoading: boolean;
-  toggleOpen: () => void;
-};
-
-type FilterActionsProps = {
-  selected: string[];
-  allSelected: boolean;
-  onClear: () => void;
-  onSelectAll: () => void;
-  isDisabled: boolean;
-};
-
-type FilterOptionListProps = {
-  options: FilterOption[];
-  selected: string[];
-  onToggle: (value: string) => void;
-  isDisabled: boolean;
-};
-
-function FilterHeader({
-  label,
-  count,
-  isDisabled,
-  isDropdownOpen,
-  isLoading,
-  toggleOpen,
-}: FilterHeaderProps) {
-  const ChevronIcon = isDropdownOpen ? ChevronUp : ChevronDown;
-
-  return (
-    <Button variant="outline" size="sm" disabled={isDisabled} onClick={toggleOpen} className="px-2">
-      <FilterIcon size={16} />
-      {count > 0 ? `${label} (${count})` : label}
-      {isLoading ? (
-        <Loader2Icon className="ml-2 animate-spin" size={16} />
-      ) : (
-        <ChevronIcon size={16} className="ml-1" />
-      )}
-    </Button>
-  );
-}
-
-function FilterActions({
-  selected,
-  allSelected,
-  onClear,
-  onSelectAll,
-  isDisabled,
-}: FilterActionsProps) {
-  return (
-    <div className="flex items-center mb-3">
-      <Checkbox
-        checked={allSelected}
-        onCheckedChange={() => (allSelected ? onClear() : onSelectAll())}
-        disabled={isDisabled}
-      />
-      <span className="ml-2 text-sm text-gray-900">Select All</span>
-      {selected.length > 0 && (
-        <button
-          type="button"
-          className="ml-auto text-sm text-blue-600 hover:underline"
-          onMouseDown={(e) => {
-            e.stopPropagation();
-            e.preventDefault();
-          }}
-          onClick={onClear}
-          disabled={isDisabled}
-        >
-          Clear All
-        </button>
-      )}
-    </div>
-  );
-}
-
-function FilterOptionList({ options, selected, onToggle, isDisabled }: FilterOptionListProps) {
-  return (
-    <ScrollArea viewportClassName="max-h-48 overflow-y-auto mb-4 space-y-2">
-      {options.length > 0 ? (
-        options.map((opt) => (
-          <label
-            key={opt.value}
-            className="flex items-center space-x-2 hover:bg-gray-100 rounded p-1 transition hover:cursor-pointer"
-            onClick={(e) => {
-              e.preventDefault();
-              e.stopPropagation();
-
-              if (!isDisabled) {
-                onToggle(opt.value);
-              }
-            }}
-          >
-            <Checkbox
-              checked={selected.includes(opt.value)}
-              onChange={() => {
-                // Prevent checkbox from toggling when clicking label
-              }}
-              disabled={isDisabled}
-            />
-            <span className="text-sm text-gray-900">{opt.label}</span>
-          </label>
-        ))
-      ) : (
-        <div className="text-sm text-gray-500">No results found</div>
-      )}
-    </ScrollArea>
-  );
-}
-
-export function renderFilter({ gjsModel, performInteraction }: FilterProps) {
-  const [componentData, setComponentData] = useState({ ...gjsModel.get('componentProps') });
-
-  const {
-    options = [],
-    value = [],
-    className = '',
-    affectedComponents = [],
-    text: label = 'Filter',
-    filterType = 'multiselect',
-  } = componentData;
-
-  if (filterType === 'date') {
-    return renderDateFilter({ gjsModel, performInteraction });
-  }
-
-  const wrapperRef = useRef<HTMLDivElement>(null);
-
-  const [attributes, setAttributes] = useState({ ...gjsModel.get('attributes') });
-  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-  const [searchQuery, setSearchQuery] = useState('');
-  const [isApplying, setIsApplying] = useState(false);
-  const [dropdownPosition, setDropdownPosition] = useState({ left: 'auto', right: '0' });
-
-  const defaultValue = componentData.default || [];
-
-  const [selectedValues, setSelectedValues] = useState<string[]>(() => {
-    return Array.isArray(value) && value.length > 0 ? value : defaultValue;
-  });
-
-  const isMultiSelect = filterType === 'multiselect';
-  const isBusy = attributes.interactionApiInProgress || isApplying;
-  const allOptionsSelected = selectedValues.length === options.length && options.length > 0;
-
-  useEffect(() => {
-  if (!isDropdownOpen || !wrapperRef.current) {return;}
-
-    const filterRect = wrapperRef.current.getBoundingClientRect();
-    const dropdownWidth = 256;
-    const iframeViewportWidth = document.documentElement.clientWidth;
-    const iframeBodyWidth =
-      document.getElementById('dashboard-root')?.clientWidth || iframeViewportWidth;
-
-    const spaceToRight = iframeBodyWidth - filterRect.right;
-    const spaceToLeft = filterRect.left;
-    
-    if (spaceToLeft >= dropdownWidth) {
-      setDropdownPosition({ left: 'auto', right: '0px' });
-    } else if (spaceToRight < dropdownWidth && spaceToLeft < dropdownWidth) {
-      const shiftLeft = dropdownWidth - spaceToRight + 16;
-      setDropdownPosition({ left: `-${shiftLeft}px`, right: 'auto' });
-    } else if (spaceToRight >= dropdownWidth) {
-      setDropdownPosition({ left: '0px', right: 'auto' });
-    }
-  }, [isDropdownOpen]);
-
-  useEffect(() => {
-    function updateComponentData() {
-      setComponentData({ ...gjsModel.get('componentProps') });
-    }
-
-    function updateAttributes() {
-      setAttributes({ ...gjsModel.get('attributes') });
-    }
-
-    gjsModel.on('change:componentProps', updateComponentData);
-    gjsModel.on('change:attributes', updateAttributes);
-
-    return () => {
-      gjsModel.off('change:componentProps', updateComponentData);
-      gjsModel.off('change:attributes', updateAttributes);
-    };
-  }, [gjsModel]);
-
-  useEffect(() => {
-    const doc = wrapperRef.current?.ownerDocument ?? document;
-
-    function handleOutsideClick(e: PointerEvent) {
-      if (isDropdownOpen && wrapperRef.current && !wrapperRef.current.contains(e.target as Node)) {
-        setIsDropdownOpen(false);
-      }
-    }
-
-    function handleEscape(e: KeyboardEvent) {
-      if (e.key === 'Escape') {
-        setIsDropdownOpen(false);
-      }
-    }
-
-    doc.addEventListener('pointerdown', handleOutsideClick);
-    doc.addEventListener('keydown', handleEscape);
-
-    return () => {
-      doc.removeEventListener('pointerdown', handleOutsideClick);
-      doc.removeEventListener('keydown', handleEscape);
-    };
-  }, [isDropdownOpen]);
-
-  const filteredOptions = options.filter((opt: FilterOption) =>
-    String(opt.label).toLowerCase().includes(searchQuery.toLowerCase()),
-  );
-
-  async function updateAndApply(newValues: string[] = selectedValues) {
-    setIsApplying(true);
-
-    try {
-      gjsModel.set('componentProps', {
-        ...gjsModel.get('componentProps'),
-        value: newValues,
-      });
-
-      const id = gjsModel.get('id');
-
-      await performInteraction({
-        interactionType: 'filter',
-        id,
-        affectedComponents: getAffectedComponentsWithLoader([id, ...affectedComponents], true),
-      });
-    } finally {
-      setIsApplying(false);
-      setIsDropdownOpen(false);
-    }
-  }
-
-  const handleOptionToggle = useCallback(
-    (val: string) => {
-      if (isMultiSelect) {
-        setSelectedValues((prev) =>
-          prev.includes(val) ? prev.filter((v) => v !== val) : [...prev, val],
-        );
-      } else {
-        if (selectedValues.includes(val)) {
-          setSelectedValues([]);
-          updateAndApply([]);
-        } else {
-          const singleValue = [val];
-          setSelectedValues(singleValue);
-          updateAndApply(singleValue);
-        }
-      }
-    },
-    [isMultiSelect, selectedValues],
-  );
-
-  function handleClearAll() {
-    setSelectedValues([]);
-  }
-
-  function handleSelectAll() {
-    setSelectedValues(options.map((o: FilterOption) => o.value));
-  }
-
-  return (
-    <div
-      ref={wrapperRef}
-      className={`relative inline-block ${className}`}
-      style={{ color: '#2A44D4', backgroundColor: 'rgb(255 255 255)' }}
-    >
-      <FilterHeader
-        label={label}
-        count={selectedValues.length}
-        isDisabled={isBusy}
-        isDropdownOpen={isDropdownOpen}
-        isLoading={isBusy}
-        toggleOpen={() => setIsDropdownOpen((prev) => !prev)}
-      />
-
-      {isDropdownOpen && (
-        <div className="absolute top-full mt-2 w-64 bg-white border rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 p-4 z-50" style={dropdownPosition}>
-          <input
-            type="text"
-            placeholder="Search..."
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            className="w-full mb-3 px-2 py-1 border rounded focus:outline-none"
-            disabled={isBusy}
-          />
-
-          {isMultiSelect && (
-            <FilterActions
-              selected={selectedValues}
-              allSelected={allOptionsSelected}
-              onClear={handleClearAll}
-              onSelectAll={handleSelectAll}
-              isDisabled={isBusy}
-            />
-          )}
-
-          <FilterOptionList
-            options={filteredOptions}
-            selected={selectedValues}
-            onToggle={handleOptionToggle}
-            isDisabled={isBusy}
-          />
-
-          {isMultiSelect && (
-            <div className="flex justify-end space-x-2">
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={() => setIsDropdownOpen(false)}
-                disabled={isApplying}
-              >
-                Cancel
-              </Button>
-              <Button
-                variant="default"
-                size="sm"
-                onClick={() => updateAndApply(selectedValues)}
-                disabled={isBusy}
-              >
-                {isApplying && <Loader2Icon className="animate-spin mr-2" size={16} />}Apply
-              </Button>
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}

package/src/shadcn/components/ui/hover-card.tsx

@@ -1,36 +0,0 @@
-import * as React from 'react';
-import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
-
-import { cn } from '../../utils';
-
-function HoverCard({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
-  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />;
-}
-
-function HoverCardTrigger({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
-  return <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />;
-}
-
-function HoverCardContent({
-  className,
-  align = 'center',
-  sideOffset = 4,
-  ...props
-}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
-  return (
-    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
-      <HoverCardPrimitive.Content
-        data-slot="hover-card-content"
-        align={align}
-        sideOffset={sideOffset}
-        className={cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
-          className,
-        )}
-        {...props}
-      />
-    </HoverCardPrimitive.Portal>
-  );
-}
-
-export { HoverCard, HoverCardTrigger, HoverCardContent };

package/src/shadcn/components/ui/input.tsx

@@ -1,20 +0,0 @@
-import * as React from 'react';
-
-import { cn } from '../../utils';
-
-function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
-  return (
-    <input
-      type={type}
-      data-slot="input"
-      className={cn(
-        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export { Input };

package/src/shadcn/components/ui/label.tsx

@@ -1,24 +0,0 @@
-import * as React from 'react';
-import * as LabelPrimitive from '@radix-ui/react-label';
-
-import { cn } from '../../utils';
-
-function Label({
-  className,
-  isEditable,
-  ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root> & { isEditable?: boolean }) {
-  return (
-    <LabelPrimitive.Root
-      data-slot="label"
-      className={cn(
-        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
-        className,
-      )}
-      contentEditable={isEditable}
-      {...props}
-    />
-  );
-}
-
-export { Label };

package/src/shadcn/components/ui/pagination.tsx

@@ -1,213 +0,0 @@
-import * as React from 'react';
-import {
-  ChevronsLeft,
-  ChevronsRight,
-  ChevronLeft,
-  ChevronRight,
-  MoreHorizontalIcon,
-} from 'lucide-react';
-
-import { cn } from '../../utils';
-import { Button, buttonVariants } from '../ui/button';
-
-function Pagination({ className, ...props }: React.ComponentProps<'nav'>) {
-  return (
-    <nav
-      role="navigation"
-      aria-label="pagination"
-      data-slot="pagination"
-      className={cn('mx-auto flex w-full justify-center', className)}
-      {...props}
-    />
-  );
-}
-
-function PaginationContent({ className, ...props }: React.ComponentProps<'ul'>) {
-  return (
-    <ul
-      data-slot="pagination-content"
-      className={cn('flex flex-row items-center gap-1', className)}
-      {...props}
-    />
-  );
-}
-
-function PaginationItem({ ...props }: React.ComponentProps<'li'>) {
-  return <li data-slot="pagination-item" {...props} />;
-}
-
-type PaginationLinkProps = {
-  isActive?: boolean;
-  isDisabled?: boolean;
-} & Pick<React.ComponentProps<typeof Button>, 'size'> &
-  React.ComponentProps<'a'>;
-
-function PaginationLink({
-  className,
-  isActive,
-  isDisabled = false,
-  size = 'sm',
-  ...props
-}: PaginationLinkProps) {
-  return (
-    <a
-      aria-current={isActive ? 'page' : undefined}
-      data-slot="pagination-link"
-      data-active={isActive}
-      aria-disabled={isDisabled}
-      tabIndex={isDisabled ? -1 : 0}
-      className={cn(
-        buttonVariants({
-          variant: isActive ? 'outline' : 'ghost',
-          size,
-        }),
-        isDisabled && 'opacity-50 pointer-events-none',
-        'cursor-pointer',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function PaginationEllipsis({ className, ...props }: React.ComponentProps<'span'>) {
-  return (
-    <span
-      aria-hidden
-      data-slot="pagination-ellipsis"
-      className={cn('flex size-9 items-center justify-center', className)}
-      {...props}
-    >
-      <MoreHorizontalIcon className="size-4" />
-      <span className="sr-only">More pages</span>
-    </span>
-  );
-}
-
-function getVisiblePages(currentPage: number, allPages: number): number[] {
-  const pages: number[] = [];
-
-  if (allPages <= 3) {
-    for (let i = 1; i <= allPages; i++) {
-      pages.push(i);
-    }
-
-    return pages;
-  }
-
-  if (currentPage >= 3) {
-    pages.push(-1);
-  }
-
-  for (let i = currentPage - 1; i <= currentPage + 1; i++) {
-    if (i > 0 && i <= allPages) {
-      pages.push(i);
-    }
-  }
-
-  if (currentPage <= allPages - 2) {
-    pages.push(-2);
-  }
-
-  return pages;
-}
-
-function renderPaginationControls(
-  currentPage: number,
-  totalPages: number,
-  isLoading: boolean,
-  handlePageChange: (page: number) => void,
-) {
-  return getVisiblePages(currentPage, totalPages).map((page, idx) => {
-    if (page === -1) {
-      return (
-        <PaginationItem key={`left-ellipsis-${idx}`}>
-          <PaginationEllipsis />
-        </PaginationItem>
-      );
-    }
-
-    if (page === -2) {
-      return (
-        <PaginationItem key={`right-ellipsis-${idx}`}>
-          <PaginationEllipsis />
-        </PaginationItem>
-      );
-    }
-
-    return (
-      <PaginationItem key={page}>
-        <PaginationLink
-          isActive={page === currentPage}
-          onClick={isLoading ? undefined : () => handlePageChange(page)}
-        >
-          {page}
-        </PaginationLink>
-      </PaginationItem>
-    );
-  });
-}
-
-function renderPaginationArrows(
-  currentPage: number,
-  totalPages: number,
-  isLoading: boolean,
-  handlePageChange: (page: number) => void,
-) {
-  return (
-    <>
-      <PaginationItem>
-        <PaginationLink
-          onClick={currentPage === 1 || isLoading ? undefined : () => handlePageChange(1)}
-          isDisabled={currentPage === 1}
-        >
-          <ChevronsLeft className="size-4" />
-        </PaginationLink>
-      </PaginationItem>
-      <PaginationItem>
-        <PaginationLink
-          onClick={
-            currentPage === 1 || isLoading ? undefined : () => handlePageChange(currentPage - 1)
-          }
-          isDisabled={currentPage === 1}
-        >
-          <ChevronLeft className="size-4" />
-        </PaginationLink>
-      </PaginationItem>
-      {renderPaginationControls(currentPage, totalPages, isLoading, handlePageChange)}
-      <PaginationItem>
-        <PaginationLink
-          onClick={
-            currentPage === totalPages || isLoading
-              ? undefined
-              : () => handlePageChange(currentPage + 1)
-          }
-          isDisabled={currentPage === totalPages}
-        >
-          <ChevronRight className="size-4" />
-        </PaginationLink>
-      </PaginationItem>
-      <PaginationItem>
-        <PaginationLink
-          onClick={
-            currentPage === totalPages || isLoading ? undefined : () => handlePageChange(totalPages)
-          }
-          isDisabled={currentPage === totalPages}
-        >
-          <ChevronsRight className="size-4" />
-        </PaginationLink>
-      </PaginationItem>
-    </>
-  );
-}
-
-export {
-  Pagination,
-  PaginationContent,
-  PaginationLink,
-  PaginationItem,
-  PaginationEllipsis,
-  getVisiblePages,
-  renderPaginationControls,
-  renderPaginationArrows,
-};

package/src/shadcn/components/ui/scroll-area.tsx

@@ -1,59 +0,0 @@
-import * as React from 'react';
-import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
-
-import { cn } from '../../utils';
-
-type ScrollAreaProps = {
-  viewportClassName?: string;
-  hideScrollbars?: boolean;
-} & React.ComponentProps<typeof ScrollAreaPrimitive.Root>;
-
-function ScrollArea({ className, children, viewportClassName, hideScrollbars = false, ...props }: ScrollAreaProps) {
-  return (
-    <ScrollAreaPrimitive.Root
-      data-slot="scroll-area"
-      className={cn('relative', className)}
-      {...props}
-    >
-      <ScrollAreaPrimitive.Viewport
-        data-slot="scroll-area-viewport"
-        className={cn(
-          'focus-visible:ring-ring/50 rounded-[inherit] outline-none focus-visible:ring-[3px]',
-          'h-full w-full',
-          viewportClassName,
-        )}
-      >
-        {children}
-      </ScrollAreaPrimitive.Viewport>
-      {!hideScrollbars && <ScrollBar />}
-      <ScrollAreaPrimitive.Corner />
-    </ScrollAreaPrimitive.Root>
-  );
-}
-
-function ScrollBar({
-  className,
-  orientation = 'vertical',
-  ...props
-}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
-  return (
-    <ScrollAreaPrimitive.ScrollAreaScrollbar
-      data-slot="scroll-area-scrollbar"
-      orientation={orientation}
-      className={cn(
-        'flex touch-none p-px transition-colors select-none',
-        orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent',
-        orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent',
-        className,
-      )}
-      {...props}
-    >
-      <ScrollAreaPrimitive.ScrollAreaThumb
-        data-slot="scroll-area-thumb"
-        className="bg-border relative flex-1 rounded-full"
-      />
-    </ScrollAreaPrimitive.ScrollAreaScrollbar>
-  );
-}
-
-export { ScrollArea, ScrollBar };