@peak-ai/canvas 1.4.22 → 1.4.23-rc.0

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

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

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

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

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

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