@peak-ai/canvas 1.3.15 → 1.3.16

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

@@ -0,0 +1,149 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useEffect, useRef, useState } from 'react';
+import { Loader2Icon, Search as SearchIcon, X as ClearIcon, Info as InfoIcon } from 'lucide-react';
+import { Input } from './input';
+import { getAffectedComponentsWithLoader } from '../../../helpers';
+import { Tooltip, TooltipTrigger, TooltipContent } from './tooltip';
+
+const MAX_CHAR_LIMIT = 140;
+const MaxCharLimitExceededMessage = 'Max 140 characters allowed.';
+
+type SearchProps = {
+  isEditable?: boolean;
+  gjsModel: any;
+  performInteraction: (payload: Record<string, any>) => Promise<void>;
+};
+
+export function renderSearch({ gjsModel, performInteraction }: SearchProps) {
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  const [componentData, setComponentData] = useState({ ...gjsModel.get('componentProps') });
+  const { placeholder, affectedComponents = [], className = '' } = componentData;
+  const initialSearchText = componentData.searchText || '';
+
+  const [attributes, setAttributes] = useState({ ...gjsModel.get('attributes') });
+  const [searchQuery, setSearchQuery] = useState(initialSearchText);
+  const [isApplying, setIsApplying] = useState(false);
+
+  const isBusy = attributes.interactionApiInProgress || isApplying;
+  const showClear = !!searchQuery && !isBusy;
+
+  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]);
+
+  async function applySearch(query: string) {
+    if (query.length > MAX_CHAR_LIMIT) {
+      return;
+    }
+
+    setIsApplying(true);
+
+    try {
+      gjsModel.set('componentProps', {
+        ...gjsModel.get('componentProps'),
+        searchText: query,
+      });
+
+      const id = gjsModel.get('id');
+
+      await performInteraction({
+        interactionType: 'search',
+        id,
+        affectedComponents: getAffectedComponentsWithLoader([id, ...affectedComponents], true),
+      });
+    } finally {
+      setIsApplying(false);
+    }
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
+    if (e.key === 'Enter') {
+      applySearch(searchQuery.trim());
+    }
+  }
+
+  function handleSearchIconClick() {
+    applySearch(searchQuery.trim());
+  }
+
+  function handleClear() {
+    setSearchQuery('');
+    applySearch('');
+  }
+
+  return (
+    <div ref={wrapperRef} className={`flex items-center gap-2 p-2 ${className}`}>
+      <div
+        className={`relative transition-all duration-200 ease-in-out ${
+          searchQuery ? 'w-[320px]' : 'w-[280px]'
+        }`}
+        style={{ backgroundColor: '#fff' }}
+      >
+        <div>
+          <Input
+            type="text"
+            placeholder={'Search...'}
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            onKeyDown={handleKeyDown}
+            disabled={isBusy}
+            className={`py-2 text-sm rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-200 pl-4 pr-16 w-full`}
+          />
+
+          {showClear && (
+            <button
+              type="button"
+              onClick={handleClear}
+              className="absolute right-10 top-7 -translate-y-1/2 text-gray-400 hover:text-gray-600 transition"
+              aria-label="Clear search"
+            >
+              <ClearIcon size={16} />
+            </button>
+          )}
+
+          <button
+            type="button"
+            onClick={handleSearchIconClick}
+            disabled={isBusy}
+            className="absolute right-2 top-7 -translate-y-1/2 text-gray-500 hover:text-blue-600 transition-colors"
+            aria-label="Search"
+          >
+            {isBusy ? <Loader2Icon size={18} className="animate-spin" /> : <SearchIcon size={18} />}
+          </button>
+        </div>
+
+        {searchQuery.length > MAX_CHAR_LIMIT && (
+          <p className="absolute left-1 text-xs text-red-600 pl-1 pt-1">
+            {MaxCharLimitExceededMessage}
+          </p>
+        )}
+      </div>
+
+      {placeholder && (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <span className="cursor-pointer text-gray-400 hover:text-gray-600">
+              <InfoIcon size={16} />
+            </span>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">{placeholder}</TooltipContent>
+        </Tooltip>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+
+import { cn } from '../../utils';
+
+function Separator({
+  className,
+  orientation = 'horizontal',
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator-root"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        'w-4/5 border-gray-300 my-6 shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Separator };

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

@@ -0,0 +1,69 @@
+import { cn } from '../../utils';
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-accent animate-pulse rounded-md", className)}
+      {...props}
+    />
+  )
+}
+
+function TableLoader({ count = 5 }) {
+  return (
+    <div className='flex flex-row gap-6'>
+      {
+        Array.from({ length: 3 }).map((_, colIndex) => {
+          return (
+            <div className="flex flex-col gap-3 w-1/3" key={`col-${colIndex}`}>
+              <Skeleton className="w-full h-10" />
+              {Array.from({ length: count }).map((_, index) => (
+                <Skeleton className="w-full h-6" key={index} />
+              ))}
+            </div>
+          )
+        })
+      }
+    </div>
+  );
+}
+
+function ChartLoader() {
+  return (
+    <div className="flex flex-col gap-4">
+      <div className='flex flex-row gap-4'>
+        <Skeleton className="h-40 w-1/6 self-end" />
+        <Skeleton className="h-50 w-1/6 self-end" />
+        <Skeleton className="h-30 w-1/6 self-end" />
+        <Skeleton className="h-40 w-1/6 self-end" />
+        <Skeleton className="h-50 w-1/6 self-end" />
+        <Skeleton className="h-20 w-1/6 self-end" />
+      </div>
+      <Skeleton className="w-full h-5" />
+    </div>
+  );
+}
+
+function CardLoader() {
+  return (
+    <div className='flex flex-col gap-1'>
+      <Skeleton className="h-5 w-full" />
+      <Skeleton className="h-3 w-full" />
+      <Skeleton className="h-10 w-full" />
+      <Skeleton className="h-5 w-full" />
+    </div>
+  );
+}
+
+function MarkdownLoader() {
+  return (
+    <div className='flex flex-col gap-2'>
+      <Skeleton className="h-5 w-full bg-black/10" />
+      <Skeleton className="h-5 w-full bg-black/10" />
+      <Skeleton className="h-5 w-full bg-black/10" />
+    </div>
+  );
+}
+
+export { Skeleton, TableLoader, ChartLoader, CardLoader, MarkdownLoader, }

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

@@ -0,0 +1,196 @@
+import * as React from 'react';
+import { ArrowUp, ArrowDown } from 'lucide-react';
+
+import { cn } from '../../utils';
+
+function Table({ className, ...props }: React.ComponentProps<'table'>) {
+  return (
+    <table
+      data-slot="table"
+      className={cn('w-[640px] caption-bottom text-sm', className)}
+      {...props}
+    />
+  );
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn('[&_tr]:border-b font-bold bg-slate-100', className)}
+      {...props}
+    />
+  );
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn('[&_tr:last-child]:border-0', className)}
+      {...props}
+    />
+  );
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', className)}
+      {...props}
+    />
+  );
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        'text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export type SortDirection = 'asc' | 'desc' | null;
+
+type TableHeadSortableProps = React.ComponentProps<'th'> & {
+  sortDirection?: SortDirection;
+  onSort?: (direction: SortDirection) => void;
+  sortable?: boolean;
+  isActive?: boolean;
+  isEditable?: boolean;
+} & {
+  'data-slot'?: string;
+};
+
+function TableHeadSortable({ 
+  className, 
+  children, 
+  sortDirection = 'asc', 
+  onSort, 
+  sortable = true,
+  isActive = false,
+  isEditable = false,
+  'data-slot': dataSlot,
+  ...props 
+}: TableHeadSortableProps) {
+  const [isHovered, setIsHovered] = React.useState(false);
+
+  function getSortIcon() {
+  if (!sortable || (!isActive && !isHovered)) {
+    return null;
+  }
+  
+  return sortDirection === 'desc' ? (
+    <ArrowDown className="h-4 w-4" />
+  ) : (
+    <ArrowUp className="h-4 w-4" />
+  );
+}
+
+  function handleSort() {
+    if (!sortable) {
+      return;
+    }
+    
+    let newDirection: SortDirection = 'asc';
+
+    if (sortDirection === 'asc') {
+      newDirection = 'desc';
+    } else if (sortDirection === 'desc') {
+      newDirection = 'asc';
+    }
+    
+    if (onSort) {
+      onSort(newDirection);
+    }
+  }
+
+  const shouldApplyHeaderInteraction = sortable && !isEditable;
+
+  return (
+    <th
+      data-slot={!isEditable ? dataSlot : undefined}
+      className={cn(
+        'text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+        shouldApplyHeaderInteraction && 'cursor-pointer hover:bg-muted/50 select-none',
+        className,
+      )}
+      onClick={shouldApplyHeaderInteraction ? handleSort : undefined}
+      onMouseEnter={shouldApplyHeaderInteraction ? () => setIsHovered(true) : undefined}
+      onMouseLeave={shouldApplyHeaderInteraction ? () => setIsHovered(false) : undefined}
+      {...props}
+    >
+      <div className="flex items-center">
+        <span 
+          contentEditable={isEditable}
+          className={isEditable ? 'outline-none focus:bg-blue-50 px-1 rounded' : ''}
+          suppressContentEditableWarning={true}
+          onClick={isEditable ? (e) => e.stopPropagation() : undefined}
+          data-slot={isEditable ? dataSlot : undefined}
+        >
+          {children}
+        </span>
+        {sortable && (
+          <div 
+            className={cn(
+              "ml-1 flex-shrink-0 w-4",
+              isEditable && "cursor-pointer hover:bg-muted/30 rounded p-0.5 -m-0.5"
+            )}
+            onClick={isEditable ? (e) => {
+              e.stopPropagation();
+              handleSort();
+            } : undefined}
+            onMouseEnter={isEditable ? () => setIsHovered(true) : undefined}
+            onMouseLeave={isEditable ? () => setIsHovered(false) : undefined}
+          >
+            {getSortIcon()}
+          </div>
+        )}
+      </div>
+    </th>
+  );
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCaption({ className, ...props }: React.ComponentProps<'caption'>) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn('text-muted-foreground mt-4 text-sm', className)}
+      {...props}
+    />
+  );
+}
+
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableHeadSortable, TableRow, TableCell, TableCaption };

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

@@ -0,0 +1,55 @@
+'use client';
+
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+
+import { cn } from '../../utils';
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      'inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',
+      className
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',
+      className
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+      className
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

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

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+import { cn } from '../../utils';
+
+function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Textarea };

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

@@ -0,0 +1,87 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useEffect, useState } from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+
+import { cn } from '../../utils';
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  );
+}
+
+function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  );
+}
+
+function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  const [container, setContainer] = useState(null);
+
+  useEffect(() => {
+    let timeout: null | NodeJS.Timeout = null;
+
+    function waitForElement() {
+      const iframe = document.querySelector('.gjs-frame');
+      const iframeDoc =
+        (iframe as any)?.contentDocument || (iframe as any)?.contentWindow?.document;
+      const dashboardRoot = iframeDoc.body;
+
+      if (!dashboardRoot) {
+        timeout = setTimeout(waitForElement, 100);
+      } else {
+        setContainer(dashboardRoot);
+      }
+    }
+
+    waitForElement();
+
+    return () => {
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+    };
+  }, []);
+
+  if (!container) {
+    return null;
+  }
+
+  return (
+    <TooltipPrimitive.Portal container={container}>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          'bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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-fit origin-[var(--radix-tooltip-content-transform-origin)] rounded-md px-3 py-1.5 text-xs',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="fill-primary z-50 size-2.5 -translate-y-[2px] rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/src/shadcn/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/types/grapesjs-tailwind.d.ts

@@ -0,0 +1,50 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+declare module 'grapesjs-tailwind' {
+  import { Plugin } from 'grapesjs';
+
+  export type GrapesjsTailwindOptions = {
+    blocks?: boolean;
+    categories?: boolean;
+    classesViewerOptions?: {
+      appendTo?: string | HTMLElement;
+      open?: boolean;
+      showEmpty?: boolean;
+    };
+    config?: {
+      plugins?: any[];
+      presets?: any[];
+      theme?: Record<string, any>;
+      variants?: Record<string, any>;
+    };
+    customClasses?: string[];
+    customTailwindViewerCSS?: string;
+    gridDevicesPanel?: boolean;
+    importTailwind?: boolean;
+    includeLib?: boolean;
+    purgeCss?: boolean;
+    tailwindConfig?: string;
+    tailwindCssPath?: string;
+    tailwindExtendUi?: boolean;
+  };
+
+  // eslint-disable-next-line init-declarations
+  declare const grapesjsTailwind: Plugin<GrapesjsTailwindOptions>;
+  export default grapesjsTailwind;
+}
+
+declare module 'sherlockjs' {
+  type ParseResult = {
+    endDate?: Date;
+    eventTitle?: string;
+    isAllDay?: boolean;
+    startDate?: Date;
+  }
+
+  type Sherlock = {
+    parse(text: string): ParseResult;
+  }
+
+  // eslint-disable-next-line init-declarations
+  const sherlock: Sherlock;
+  export default sherlock;
+}

package/tailwind.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+	plugins: [
+		require("tailwindcss-animate"),
+	],
+}