@peak-ai/canvas 1.4.21 → 1.4.22

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-xl"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  );
+}
+
+export { ScrollArea, ScrollBar };

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

@@ -0,0 +1,150 @@
+/* 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"
+            data-slot="search-input"
+            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, }