@peak-ai/canvas 1.4.21 → 1.4.22

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

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

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

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

@@ -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 };