@peak-ai/canvas 1.4.22 → 1.4.23

package/src/shadcn/components/ui/error-container.tsx

@@ -1,125 +0,0 @@
-import styled from 'styled-components';
-
-type Size = 'small' | 'medium' | 'large';
-
-export const ErrorContainer = styled.div<{ hasError: boolean }>`
-  position: relative;
-  width: 100%;
-  height: 100%;
-  border: ${({ hasError }) => (hasError ? '2px solid #ef4444' : 'none')};
-  border-radius: 6px;
-  overflow: hidden;
-  animation: ${({ hasError }) => (hasError ? 'errorShake 0.5s ease-in-out' : 'none')};
-
-  @keyframes errorShake {
-    0%, 100% { transform: translateX(0); }
-    25% { transform: translateX(-2px); }
-    75% { transform: translateX(2px); }
-  }
-`;
-
-export const ErrorBanner = styled.div<{ size: Size }>`
-  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
-  color: white;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-weight: 500;
-  position: ${({ size }) => (size === 'small' ? 'absolute' : 'relative')};
-  top: ${({ size }) => (size === 'small' ? '4px' : 'auto')};
-  left: ${({ size }) => (size === 'small' ? '4px' : 'auto')};
-  right: ${({ size }) => (size === 'small' ? '4px' : 'auto')};
-  z-index: ${({ size }) => (size === 'small' ? 10 : 'auto')};
-  transform: ${({ size }) => (size === 'small' ? 'scale(0.8)' : 'none')};
-  transform-origin: top left;
-  max-width: ${({ size }) => (size === 'small' ? '90%' : '100%')};
-  border-radius: ${({ size }) => (size === 'small' ? '4px' : '0')};
-  box-shadow: ${({ size }) =>
-    size === 'small' ? '0 2px 4px rgba(0, 0, 0, 0.2)' : 'none'};
-
-  padding: ${({ size }) => {
-    switch (size) {
-      case 'small': return '4px 8px';
-      case 'medium': return '6px 10px';
-      case 'large': return '8px 12px';
-      default: return '6px 10px';
-    }
-  }};
-
-  font-size: ${({ size }) => {
-    switch (size) {
-      case 'small': return '10px';
-      case 'medium': return '11px';
-      case 'large': return '12px';
-      default: return '11px';
-    }
-  }};
-`;
-
-export const ErrorIcon = styled.div<{ size: Size }>`
-  font-size: ${({ size }) => {
-    switch (size) {
-      case 'small': return '12px';
-      case 'medium': return '13px';
-      case 'large': return '14px';
-      default: return '13px';
-    }
-  }};
-  flex-shrink: 0;
-`;
-
-export const ErrorContent = styled.div`
-  flex: 1;
-  min-width: 0;
-`;
-
-export const ErrorMessage = styled.div<{ size: Size }>`
-  font-weight: 600;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  margin-bottom: ${({ size }) => (size === 'small' ? '0' : '1px')};
-`;
-
-export const ErrorType = styled.div<{ size: Size }>`
-  opacity: 0.9;
-  font-size: ${({ size }) => {
-    switch (size) {
-      case 'small': return '9px';
-      case 'medium': return '10px';
-      case 'large': return '11px';
-      default: return '10px';
-    }
-  }};
-  text-transform: uppercase;
-  letter-spacing: ${({ size }) => (size === 'small' ? '0.2px' : '0.3px')};
-`;
-
-export const ComponentContent = styled.div<{ hasError: boolean; size: Size }>`
-  flex: 1;
-  background: ${({ hasError }) =>
-    hasError ? 'rgba(239, 68, 68, 0.05)' : 'transparent'};
-
-  padding: ${({ hasError, size }) => {
-    if (!hasError) {return '0';}
-
-    switch (size) {
-      case 'small': return '4px';
-      case 'medium': return '6px';
-      case 'large': return '8px';
-      default: return '6px';
-    }
-  }};
-
-  padding-top: ${({ hasError, size }) => {
-    if (!hasError) {return '0';}
-
-    return size === 'small' ? '20px' : '8px';
-  }};
-
-  min-height: ${({ hasError, size }) =>
-    hasError && size === 'small' ? '60px' : 'auto'};
-
-  display: flex;
-  flex-direction: column;
-`;

package/src/shadcn/components/ui/error-wrapper.tsx

@@ -1,99 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import React, { useEffect, useState } from 'react';
-import { CircleAlert } from 'lucide-react';
-
-type IssueInfo = {
-  message: string;
-  type?: string;
-};
-
-type ComponentProps = {
-  error?: IssueInfo;
-  isMissing?: boolean;
-  componentType?: string;
-  gjsModel?: any;
-  onDismissMissing?: (componentId: string) => void;
-  [key: string]: unknown;
-};
-
-type ComponentWrapperProps = {
-  children: React.ReactNode;
-  componentProps: ComponentProps;
-  className?: string;
-};
-
-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>
-  );
-}
-
-const COMPONENTS_WITH_CUSTOM_ERROR_HANDLING = new Set([
-  'Actions',
-  'ActionCard',
-  'Card',
-  'Chart',
-  'Markdown',
-  'Table',
-  'Tabs',
-]);
-
-export function ComponentWrapper({
-  children,
-  componentProps,
-  className = '',
-}: ComponentWrapperProps) {
-  const { gjsModel, componentType } = componentProps;
-
-  const [currentProps, setCurrentProps] = useState(componentProps);
-  const [currentAttributes, setCurrentAttributes] = useState(gjsModel?.get('attributes') || {});
-
-  function handlePropsChange(model: any) {
-    const updatedModelProps = model.get('componentProps');
-    setCurrentProps({
-      ...componentProps,
-      ...updatedModelProps,
-    });
-  }
-
-  function handleAttributesChange(model: any) {
-    const updatedAttributes = model.get('attributes');
-    setCurrentAttributes(updatedAttributes);
-  }
-
-  useEffect(() => {
-    if (gjsModel) {
-      gjsModel.on('change:componentProps', () => handlePropsChange(gjsModel));
-      gjsModel.on('change:attributes', () => handleAttributesChange(gjsModel));
-
-      return () => {
-        gjsModel.off('change:componentProps', () => handlePropsChange(gjsModel));
-        gjsModel.off('change:attributes', () => handleAttributesChange(gjsModel));
-      };
-    }
-
-    return undefined;
-  }, [gjsModel, componentProps, componentType]);
-
-  const error = currentAttributes.error || currentProps.error;
-  const isMissing = currentAttributes.isMissing || currentProps.isMissing;
-
-  const hasCustomErrorHandling =
-    componentType && COMPONENTS_WITH_CUSTOM_ERROR_HANDLING.has(componentType);
-  const shouldShowWrapperFallback = !hasCustomErrorHandling && (isMissing || error);
-
-  if (shouldShowWrapperFallback) {
-    return <div className={className}>{renderNoDataFallback()}</div>;
-  }
-
-  return <>{children}</>;
-}

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

@@ -1,368 +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;
-
-  const actualOptions = (() => {
-    if (options && typeof options === 'object' && options.name === '__peak_placeholder') {
-      return [];
-    }
-
-    return Array.isArray(options) ? options : [];
-  })();
-
-  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 hasPlaceholderOptions = options && typeof options === 'object' && options.name === '__peak_placeholder';
-  const hasError = attributes.error || componentData.error;
-  const isLoading = !hasError && (attributes.interactionApiInProgress || isApplying || attributes.loading || hasPlaceholderOptions);
-  const isBusy = isLoading || hasError;
-  const allOptionsSelected = selectedValues.length === actualOptions.length && actualOptions.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 = actualOptions.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(actualOptions.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={isLoading}
-        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}
-                className="bg-[#EAECFB] border border-[#2A44D4] text-[#263DBF] hover:bg-[#EAECFB] hover:text-[#263DBF]"
-              >
-                Cancel
-              </Button>
-              <Button
-                variant="default"
-                size="sm"
-                onClick={() => updateAndApply(selectedValues)}
-                disabled={isBusy}
-                className="bg-[#2A44D4] text-white hover:bg-[#2A44D4] hover:text-white"
-              >
-                {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 };