@peak-ai/canvas 1.3.15 → 1.3.16

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

@@ -0,0 +1,355 @@
+/* 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

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,213 @@
+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

@@ -0,0 +1,59 @@
+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 };