@peak-ai/canvas 1.3.16 → 1.3.17

package/src/plugins/helpers/render-components.tsx

@@ -1,1103 +0,0 @@
-/* eslint-disable func-style */
-/* eslint-disable @typescript-eslint/no-empty-function */
-/* eslint-disable func-names */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import chroma from 'chroma-js';
-import React, { useEffect, useState, JSX, useRef, Fragment } from 'react';
-
-import { theme } from '@peak-ai/ais-components/theme';
-
-import Markdown from 'markdown-to-jsx';
-
-import {
-  PieChart,
-  Pie,
-  BarChart,
-  Bar,
-  LineChart,
-  Line,
-  XAxis,
-  YAxis,
-  ResponsiveContainer,
-  CartesianGrid,
-  Legend,
-} from 'recharts';
-
-import { TooltipButton } from '../../shadcn/components/ui/button';
-import {
-  Card,
-  CardHeader,
-  CardTitle,
-  CardDescription,
-  CardContent,
-  CardFooter,
-} from '../../shadcn/components/ui/card';
-import {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-} from '../../shadcn/components/ui/chart';
-import { renderFilter } from '../../shadcn/components/ui/filter';
-import { renderDateFilter } from '../../shadcn/components/ui/date-filter';
-import {
-  Pagination,
-  PaginationContent,
-  renderPaginationArrows,
-} from '../../shadcn/components/ui/pagination';
-import { ScrollArea, ScrollBar } from '../../shadcn/components/ui/scroll-area';
-import { renderSearch } from '../../shadcn/components/ui/search';
-import { TableLoader, ChartLoader, CardLoader } from '../../shadcn/components/ui/skeleton';
-import {
-  Table,
-  TableHeader,
-  TableRow,
-  TableHead,
-  TableHeadSortable,
-  TableBody,
-  TableCell,
-  SortDirection,
-} from '../../shadcn/components/ui/table';
-import { Tabs, TabsList, TabsTrigger, TabsContent } from '../../shadcn/components/ui/tabs';
-
-import { cn } from '../../shadcn/utils';
-import { getAffectedComponentsWithLoader } from '../../helpers';
-
-const baseColors = [
-  [theme.colors.Blue_100, theme.colors.Blue_30],
-  [theme.colors.Purpley_100, theme.colors.Purpley_30],
-  [theme.colors.Light_Bluish_Green, '#06601b'],
-  [theme.colors.Wild_Strawberry, '#4d001c'],
-];
-
-function getNColors(n: number) {
-  const colors: Array<string[]> = [];
-
-  for (const baseColor of baseColors) {
-    // eslint-disable-next-line import/no-named-as-default-member
-    colors.push(chroma.scale(baseColor).mode('lab').colors(n));
-  }
-
-  function getOneColor(existing: Array<string>) {
-    let color: null | string = null;
-
-    do {
-      const base = colors[Math.floor(Math.random() * colors.length)];
-      const selectedColorIndex = Math.floor(Math.random() * base.length);
-      color = base[selectedColorIndex];
-    } while (existing.includes(color));
-
-    return color as string;
-  }
-
-  const selectedColors: Array<string> = [];
-
-  for (let i = 0; i < n; i++) {
-    selectedColors.push(getOneColor(selectedColors));
-  }
-
-  return selectedColors;
-}
-
-/* TODO: Loader remains */
-export function renderActionCard(props: any): JSX.Element {
-  const { gjsModel, ...rest } = props;
-
-  const [allData, setAllData] = useState({
-    ...props,
-  });
-
-  const {
-    headerContent = 'Default Action Card Title',
-    icon,
-    bodyContent = 'Default body content. Click to edit.',
-  } = allData;
-
-  const [, setAttributes] = useState({
-    interactionApiInProgress: false,
-  });
-
-  useEffect(() => {
-    gjsModel.on('change:componentProps', () => {
-      setAllData({
-        ...gjsModel.get('componentProps'),
-      });
-    });
-  }, []);
-
-  useEffect(() => {
-    gjsModel.on('change:attributes', () => {
-      setAttributes({
-        ...gjsModel.get('attributes'),
-      });
-    });
-  }, []);
-
-  const defaultClasses = 'bg-white text-black p-4 rounded-lg shadow border flex flex-col h-full';
-
-  return (
-    <Card className={defaultClasses} isEditable={false} contentEditable={false} {...rest}>
-      <CardContent className="p-0" isEditable={false} contentEditable={false}>
-        <div className="px-4 py-3">
-          <div className="flex items-start">
-            <span className="text-5xl mr-2" aria-hidden="true">
-              {icon}
-            </span>
-            <div className="flex-1">
-              <div className="text-xl font-semibold">{headerContent}</div>
-              <div className="text-base leading-relaxed mt-1">{bodyContent}</div>
-            </div>
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  );
-}
-
-export function renderCard(props: any): JSX.Element {
-  const { isEditable = false, gjsModel, ...rest } = props;
-
-  const [allData, setAllData] = useState({
-    ...props,
-  });
-
-  const {
-    headerContent,
-    headerDescription,
-    bodyContent,
-    footerContent,
-    footerClass,
-    footerIcon,
-    contentMetadata,
-    contentMetadataClass,
-    className,
-  } = allData;
-
-  const [attributes, setAttributes] = useState({
-    interactionApiInProgress: false,
-  });
-
-  useEffect(() => {
-    gjsModel.on('change:componentProps', () => {
-      setAllData({
-        ...gjsModel.get('componentProps'),
-      });
-    });
-  }, []);
-
-  useEffect(() => {
-    gjsModel.on('change:attributes', () => {
-      setAttributes({
-        ...gjsModel.get('attributes'),
-      });
-    });
-  }, []);
-
-  const defaultClasses = 'bg-white text-black p-4 rounded-lg shadow border flex flex-col h-full';
-  const defaultFooterClasses = 'text-sm';
-  const defaultContentMetadataClasses = 'text-xs';
-  const mergedCardClassName = className ? cn(defaultClasses, className) : defaultClasses;
-  const mergedFooterClassName = footerClass
-    ? cn(defaultFooterClasses, footerClass)
-    : defaultFooterClasses;
-  const mergedContentMetadataClassName = contentMetadataClass
-    ? cn(defaultContentMetadataClasses, contentMetadataClass)
-    : defaultContentMetadataClasses;
-
-  function getCardContent() {
-    if (attributes.interactionApiInProgress) {
-      return (
-        <CardContent>
-          <CardLoader />
-        </CardContent>
-      );
-    }
-
-    return (
-      <React.Fragment>
-        <CardHeader>
-          <CardTitle data-slot="headerContent" contentEditable={isEditable} className="text-lg">
-            {headerContent}
-          </CardTitle>
-          <CardDescription
-            data-slot="headerDescription"
-            contentEditable={isEditable}
-            className="text-sm"
-          >
-            {headerDescription}
-          </CardDescription>
-        </CardHeader>
-
-        <CardContent data-slot="bodyContent" contentEditable={false} className="flex-grow">
-          <div className="text-3xl font-semibold truncate">{bodyContent}</div>
-          {contentMetadata && (
-            <div className={mergedContentMetadataClassName} style={{ color: '#2A44D4' }}>
-              {contentMetadata}
-            </div>
-          )}
-        </CardContent>
-
-        <CardFooter
-          data-slot="footerContent"
-          contentEditable={isEditable}
-          className={cn(mergedFooterClassName)}
-        >
-          {footerIcon && (
-            <span className="mr-2" aria-hidden="true">
-              {footerIcon}
-            </span>
-          )}
-          {footerContent}
-        </CardFooter>
-      </React.Fragment>
-    );
-  }
-
-  return (
-    <Card {...rest} className={mergedCardClassName}>
-      {getCardContent()}
-    </Card>
-  );
-}
-
-function renderChartComponent(chartType: string, data: any, config: any): JSX.Element {
-  switch (chartType) {
-    case 'pie':
-      return (
-        <PieChart>
-          {data.length >= 20 && (
-            <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
-          )}
-          <Pie
-            data={data}
-            dataKey={config.dataKey}
-            nameKey={config.nameKey}
-            innerRadius={60}
-            strokeWidth={10}
-            label={
-              data.length < 20
-                ? ({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`
-                : undefined
-            }
-            labelLine={false}
-          />
-        </PieChart>
-      );
-    case 'bar':
-      config.dataKeys = config.dataKeys || [];
-
-      return (
-        <BarChart data={data} {...config.chartUi}>
-          <CartesianGrid vertical={false} />
-          <XAxis dataKey={config.xAxis} />
-          <YAxis />
-          <Legend align="left" wrapperStyle={{ marginLeft: 20 }} />
-          {config.dataKeys.map(
-            ({ key, name, color }: { key: string; name: string; color: string }) => {
-              return (
-                <Bar dataKey={key} fill={color ?? '#4caf50'} name={name} key={key} radius={2} />
-              );
-            },
-          )}
-          <ChartTooltip cursor={false} content={<ChartTooltipContent indicator="dashed" />} />
-        </BarChart>
-      );
-    case 'line':
-      config.dataKeys = config.dataKeys || [];
-
-      return (
-        <LineChart data={data}>
-          <CartesianGrid vertical={false} />
-          <XAxis dataKey={config.xAxis} />
-          <YAxis />
-          <ChartTooltip cursor={false} content={<ChartTooltipContent indicator="dashed" />} />
-          {config.dataKeys.map(
-            ({ key, name, color }: { key: string; name: string; color: string }) => {
-              return (
-                <Line
-                  type="monotone"
-                  dataKey={key}
-                  stroke={color ?? '#4caf50'}
-                  name={name}
-                  key={key}
-                />
-              );
-            },
-          )}
-          <Legend align="left" />
-        </LineChart>
-      );
-    default:
-      return (
-        <PieChart>
-          {data.length >= 20 && (
-            <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
-          )}
-          <Pie
-            data={data}
-            dataKey={config.dataKey}
-            nameKey={config.nameKey}
-            innerRadius={60}
-            strokeWidth={10}
-            label={
-              data.length < 20
-                ? ({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`
-                : undefined
-            }
-            labelLine={false}
-          />
-        </PieChart>
-      );
-  }
-}
-
-export function renderChart(props: any): JSX.Element {
-  const { isEditable = false, gjsModel, ...rest } = props;
-
-  const [allData, setAllData] = useState({
-    ...props,
-  });
-
-  const [attributes, setAttributes] = useState({
-    interactionApiInProgress: false,
-  });
-
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [containerWidth, setContainerWidth] = useState<number>(0);
-
-  useEffect(() => {
-    gjsModel.on('change:componentProps', () => {
-      setAllData({
-        ...gjsModel.get('componentProps'),
-      });
-    });
-  }, []);
-
-  useEffect(() => {
-    gjsModel.on('change:attributes', () => {
-      setAttributes({
-        ...gjsModel.get('attributes'),
-      });
-    });
-  }, []);
-
-  useEffect(() => {
-    const updateContainerWidth = () => {
-      if (containerRef.current) {
-        setContainerWidth(containerRef.current.offsetWidth);
-      }
-    };
-
-    updateContainerWidth();
-    window.addEventListener('resize', updateContainerWidth);
-    
-    return () => window.removeEventListener('resize', updateContainerWidth);
-  }, []);
-
-  const {
-    config = {},
-    chartType = 'pie',
-    chartData = [],
-    className,
-    title = 'Title',
-    subTitle = 'Subtitle',
-  } = allData;
-
-  const defaultClasses = 'aspect-auto h-[250px] w-full';
-  const mergedClasses = className ? cn(defaultClasses, className) : defaultClasses;
-
-  if (chartType === 'pie') {
-    const colors = getNColors(chartData.length);
-
-    for (let i = 0; i < chartData.length; i++) {
-      const data = chartData[i];
-
-      if (!data.fill) {
-        data.fill = colors[i];
-      }
-    }
-  } else if (!config.color) {
-    config.color = baseColors[Math.floor(Math.random() * baseColors.length)];
-  }
-
-  let width: number | undefined = undefined;
-  let totalDataPoints = 0;
-
-  // Helper function to get responsive config
-  const getResponsiveConfig = () => {
-    if (chartType === 'bar' && totalDataPoints > 15 && containerWidth > 0 && width && width <= containerWidth) {
-      // If chart fits in container, use responsive behavior
-      return { ...config, chartUi: {} };
-    }
-    
-    return config;
-  };
-
-  if (chartType === 'bar') {
-    totalDataPoints = chartData.length * config.dataKeys.length;
-    
-    if (totalDataPoints > 15) {
-      width =
-        totalDataPoints * 20 +
-        config.dataKeys.length * 8 * chartData.length +
-        chartData.length * 15;
-      config.chartUi = {
-        barCategoryGap: '10%',
-        width,
-      };
-    } else {
-      config.chartUi = {};
-    }
-  }
-
-  const chartUi = attributes.interactionApiInProgress ? (
-    <ChartLoader />
-  ) : (
-    <React.Fragment>
-      {chartType === 'bar' && totalDataPoints > 15 && config.chartUi && width && (containerWidth === 0 || width > containerWidth) ? (
-        <div className="w-full">
-          <ScrollArea className="w-full">
-            <div style={{ minWidth: `${width}px`, width: 'max-content' }}>
-              <ResponsiveContainer width={width} height={250}>
-                <ChartContainer {...rest} config={config} className={mergedClasses}>
-                  {renderChartComponent(chartType, chartData, config)}
-                </ChartContainer>
-              </ResponsiveContainer>
-            </div>
-            <ScrollBar orientation="horizontal" />
-          </ScrollArea>
-        </div>
-      ) : (
-        <ResponsiveContainer width="100%" height={250}>
-          <ChartContainer {...rest} config={getResponsiveConfig()} className={mergedClasses}>
-            {renderChartComponent(chartType, chartData, getResponsiveConfig())}
-          </ChartContainer>
-        </ResponsiveContainer>
-      )}
-    </React.Fragment>
-  );
-
-  return (
-    <Card className="shadow border mt-2 mb-2">
-      <CardHeader>
-        <CardTitle data-slot="title" contentEditable={isEditable} className="text-2xl">
-          {title}
-        </CardTitle>
-        <CardDescription data-slot="subTitle" contentEditable={isEditable} className="text-sm">
-          {subTitle}
-        </CardDescription>
-      </CardHeader>
-      <CardContent ref={containerRef} data-slot="bodyContent" contentEditable={false} className="px-6">
-        {chartUi}
-      </CardContent>
-    </Card>
-  );
-}
-
-// Creating this separate component to manage loading state easily!
-function TableButton(props: any) {
-  const [loading, setLoading] = useState(false);
-
-  async function onClick() {
-    setLoading(true);
-    await props.onClick();
-    setLoading(false);
-  }
-
-  const defaultClasses = 'mr-2';
-  const mergedClasses = props.className ? cn(defaultClasses, props.className) : defaultClasses;
-
-  return (
-    <TooltipButton
-      className={mergedClasses}
-      isEditable={false}
-      interact={onClick}
-      attributes={{
-        interactionApiInProgress: loading,
-        isDisabled: props.isDisabled,
-      }}
-      variant={props.variant}
-      size="sm"
-      text={props.text}
-      tooltipContent={props.tooltipContent}
-    />
-  );
-}
-
-export function renderTable(props: any): JSX.Element {
-  const { gjsModel, performInteraction = () => {}, ...rest } = props;
-
-  const [allData, setAllData] = useState({
-    ...props,
-  });
-
-  const {
-    data = [],
-    headerMapper = {},
-    className,
-    isEditable = false,
-    title = 'Title',
-    subTitle = 'Subtitle',
-    actions = [],
-    sortConfig = {},
-    pagination,
-  } = allData;
-
-  const [attributes, setAttributes] = useState({
-    interactionApiInProgress: false,
-  });
-
-  const [activeSortColumn, setActiveSortColumn] = useState<string | null>(null);
-  const [sortDirections, setSortDirections] = useState<Record<string, SortDirection>>({});
-
-  const [pageNumber, setPageNumber] = useState(
-    Number(pagination?.values?.pageNumber ?? pagination?.initialPage),
-  );
-
-  const [pageSize, setPageSize] = useState(
-    Number(pagination?.values?.pageSize ?? pagination?.initialPageSize),
-  );
-
-  const totalCount = pagination?.totalCount;
-
-  const [totalPages, setTotalPages] = useState(Math.ceil(totalCount / pageSize) || 1);
-
-  useEffect(() => {
-    gjsModel.on('change:componentProps', () => {
-      setAllData({
-        ...gjsModel.get('componentProps'),
-      });
-    });
-  }, []);
-
-  useEffect(() => {
-    gjsModel.on('change:attributes', () => {
-      setAttributes({
-        ...gjsModel.get('attributes'),
-      });
-    });
-  }, []);
-
-  useEffect(() => {
-    const componentData = gjsModel.get('componentProps');
-    
-    const sortColumn = componentData?.sortColumn;
-    const sortDirection = componentData?.sortDirection;
-    
-    if (sortColumn && sortDirection) {
-      setActiveSortColumn(sortColumn);
-      setSortDirections(prev => ({ ...prev, [sortColumn]: sortDirection }));
-    } else {
-      setActiveSortColumn(null);
-      setSortDirections({});
-    }
-  }, [allData]);
-
-  useEffect(() => {
-    if (sortConfig && Object.keys(sortConfig).length > 0) {
-      setSortDirections(sortConfig);
-
-      const firstSortedColumn = Object.keys(sortConfig)[0];
-
-      if (firstSortedColumn) {
-        setActiveSortColumn(firstSortedColumn);
-      }
-    }
-  }, [sortConfig]);
-
-  const parsedData = data.map((datum: any) => {
-    const newData = {
-      ...datum,
-    };
-
-    delete newData.id;
-
-    return newData;
-  });
-
-  const handleSort = async (column: string, direction: SortDirection) => {
-    if (direction === null) {
-      setActiveSortColumn(null);
-      setSortDirections(prev => ({ ...prev, [column]: null }));
-      
-      const currentProps = gjsModel.get('componentProps');
-      gjsModel.set('componentProps', {
-        ...currentProps,
-        sortColumn: null,
-        sortDirection: null,
-      });
-
-      const id = gjsModel.get('id');
-      await performInteraction({
-        id,
-        interactionType: 'tableSort',
-        payload: {
-          sortColumn: null,
-          sortDirection: null,
-          tableId: id
-        },
-        affectedComponents: getAffectedComponentsWithLoader([id], true),
-      });
-      
-      return;
-    }
-
-    setActiveSortColumn(column);
-    setSortDirections(prev => ({ ...prev, [column]: direction }));
-    
-    const currentProps = gjsModel.get('componentProps');
-    gjsModel.set('componentProps', {
-      ...currentProps,
-      sortColumn: column,
-      sortDirection: direction,
-    });
-    
-    const id = gjsModel.get('id');
-    
-    await performInteraction({
-      id,
-      interactionType: 'tableSort',
-      payload: {
-        sortColumn: column,
-        sortDirection: direction,
-        tableId: id
-      },
-      affectedComponents: getAffectedComponentsWithLoader([id], true),
-    });
-  };
-
-  async function takeRowAction(rowIndex: number, actionId: string) {
-    const id = gjsModel.get('id');
-
-    await performInteraction({
-      id: actionId,
-      interactionType: 'tableButton',
-      payload: {
-        row: data[rowIndex],
-        tableId: id,
-      },
-      affectedComponents: [],
-    });
-  }
-
-  const originalKeys = Object.keys(parsedData[0] || {}).filter((key) => key in headerMapper);
-  const headers = originalKeys.map((key) => headerMapper[key]);
-
-  if (actions.length > 0) {
-    headers.push('');
-    originalKeys.push('');
-  }
-
-  const rows = parsedData.map((datum: any) => originalKeys.map((key) => datum[key]));
-
-  const defaultClasses = 'aspect-auto h-[250px] w-full';
-  const mergedClasses = className ? cn(defaultClasses, className) : defaultClasses;
-
-  function renderActions(rowIndex: number, rowActions: Array<Record<string, any>>) {
-    if (!actions.length) {
-      return null;
-    }
-
-    return (
-      <TableCell className="sticky right-0 bg-white">
-        {rowActions.map((action) => {
-          return (
-            <TableButton
-              className={action.className}
-              isEditable={isEditable}
-              onClick={() => takeRowAction(rowIndex, action.id)}
-              variant={action.variant}
-              key={action.id}
-              text={action.text}
-              tooltipContent={action.tooltipContent}
-            />
-          );
-        })}
-      </TableCell>
-    );
-  }
-
-  const renderTableComponent = attributes.interactionApiInProgress ? (
-    <TableLoader />
-  ) : (
-    <Table
-      {...rest}
-      className={`caption-bottom text-sm relative ${mergedClasses}`}
-      data-slot="table"
-    >
-      <TableHeader data-slot="table-header" className="sticky top-0 z-2">
-        <TableRow>
-          {headers.map((head: string, idx: number) => {
-            const isActionColumn = actions.length > 0 && idx === headers.length - 1;
-            const originalKey = originalKeys[idx];
-            
-            if (isActionColumn) {
-              return (
-                <TableHead
-                  key={idx}
-                  data-slot={`table-header-${idx}`}
-                  contentEditable={isEditable}
-                  className="sticky right-0 bg-slate-100"
-                >
-                  {head}
-                </TableHead>
-              );
-            }
-
-            return (
-              <TableHeadSortable
-                key={idx}
-                data-slot={`table-header-${idx}`}
-                sortDirection={sortDirections[originalKey] || 'asc'}
-                isActive={activeSortColumn === originalKey}
-                onSort={(direction) => handleSort(originalKey, direction)}
-                sortable={true}
-                isEditable={isEditable}
-              >
-                {head}
-              </TableHeadSortable>
-            );
-          })}
-        </TableRow>
-      </TableHeader>
-      <TableBody data-slot="table-body">
-        {rows.map((row: any[], rIdx: number) => (
-          <TableRow
-            key={rIdx}
-            data-slot={`row-${rIdx}`}
-            className="hover:bg-muted/50 border-b transition-colors"
-          >
-            {row.map((cell: string, cIdx: number) => (
-              <TableCell
-                key={cIdx}
-                data-slot={`cell-${rIdx}-${cIdx}`}
-                className="p-2 align-middle whitespace-nowrap"
-                contentEditable={false}
-              >
-                {cell}
-              </TableCell>
-            ))}
-            {renderActions(rIdx, actions)}
-          </TableRow>
-        ))}
-      </TableBody>
-    </Table>
-  );
-
-  useEffect(() => {
-    setPageNumber(Number(pagination?.values?.pageNumber ?? pagination?.initialPage));
-    setPageSize(Number(pagination?.values?.pageSize ?? pagination?.initialPageSize));
-  }, [pagination]);
-
-  useEffect(() => {
-    setTotalPages(Math.ceil(totalCount / pageSize) || 1);
-  }, [totalCount, pageSize]);
-
-  const pageSizeOptions = pagination?.pageSizeOptions;
-
-  async function handlePageChange(newPage = pageNumber, newSize = pageSize) {
-    const id = gjsModel.get('id');
-    const prevPage = pageNumber;
-    const prevSize = pageSize;
-    setPageNumber(newPage);
-    setPageSize(newSize);
-
-    const componentData = gjsModel.get('componentProps');
-    const currentSortColumn = componentData?.sortColumn;
-    const currentSortDirection = componentData?.sortDirection;
-
-    try {
-      await performInteraction({
-        id,
-        interactionType: 'pagination',
-        payload: {
-          pageNumber: newPage,
-          pageSize: newSize,
-          ...(currentSortColumn && currentSortDirection && {
-            sortColumn: currentSortColumn,
-            sortDirection: currentSortDirection,
-          }),
-        },
-        affectedComponents: getAffectedComponentsWithLoader([id], true),
-      });
-    } catch (error) {
-      setPageNumber(prevPage);
-      setPageSize(prevSize);
-    }
-  }
-
-  const tableData = (
-    <Fragment>
-      <ScrollArea data-slot="table-container" className={mergedClasses}>
-        {renderTableComponent}
-        <ScrollBar orientation="horizontal" />
-      </ScrollArea>
-      {(totalCount >= 0) && (
-        <div className="flex items-center justify-between mt-4 w-full">
-          <div className="flex items-center gap-2">
-            <label htmlFor="page-size-select" className="text-sm">
-              Rows per page:
-            </label>
-            <select
-              id="page-size-select"
-              value={pageSize}
-              onChange={(e) => handlePageChange(1, Number(e.target.value))}
-              className="border rounded px-2 py-1 text-sm cursor-pointer"
-              disabled={attributes.interactionApiInProgress}
-            >
-              {pageSizeOptions.map((size: any) => (
-                <option key={size} value={size}>
-                  {size}
-                </option>
-              ))}
-            </select>
-          </div>
-          <div className="flex items-center gap-1 flex-shrink-0">
-            <span className="text-xs text-muted-foreground whitespace-nowrap">
-              {(pageNumber - 1) * pageSize + 1}–{Math.min(pageNumber * pageSize, totalCount)} of{' '}
-              {totalCount}
-            </span>
-            <Pagination>
-              <PaginationContent className="gap-0.2">
-                {renderPaginationArrows(
-                  pageNumber,
-                  totalPages,
-                  attributes.interactionApiInProgress,
-                  handlePageChange,
-                )}
-              </PaginationContent>
-            </Pagination>
-          </div>
-        </div>
-      )}
-    </Fragment>
-  );
-
-  return (
-    <Card className="shadow border">
-      <CardHeader>
-        <CardTitle data-slot="title" contentEditable={isEditable} className="text-2xl">
-          {title}
-        </CardTitle>
-        <CardDescription data-slot="subTitle" contentEditable={isEditable} className="text-sm">
-          {subTitle}
-        </CardDescription>
-      </CardHeader>
-      <CardContent data-slot="bodyContent" contentEditable={false}>
-        {tableData}
-      </CardContent>
-    </Card>
-  );
-}
-
-export function renderTab(props: any): JSX.Element {
-  let tabsWidth = 200;
-
-  if (props.tabs.length > 4) {
-    tabsWidth = 150;
-  }
-
-  return (
-    <Tabs defaultValue={props.defaultValue}>
-      <div className="text-center mb-4">
-        <TabsList className="bg-gray-300">
-          {props.tabs.map((tab: string) => (
-            <TabsTrigger value={tab} key={tab} className={`text-md w-[${tabsWidth}px]`}>
-              {tab}
-            </TabsTrigger>
-          ))}
-        </TabsList>
-      </div>
-      {props.tabs.map((tab: string) => (
-        <TabsContent value={tab} className="tabs-content" key={tab} />
-      ))}
-    </Tabs>
-  );
-}
-
-export function renderMarkdown(props: any): JSX.Element {
-  const { gjsModel, ...rest } = props;
-
-  const [allData, setAllData] = useState({
-    ...props,
-  });
-
-  const [, setAttributes] = useState({
-    interactionApiInProgress: false,
-  });
-
-  useEffect(() => {
-    gjsModel.on('change:componentProps', () => {
-      setAllData({
-        ...gjsModel.get('componentProps'),
-      });
-    });
-  }, []);
-
-  useEffect(() => {
-    gjsModel.on('change:attributes', () => {
-      setAttributes({
-        ...gjsModel.get('attributes'),
-      });
-    });
-  }, []);
-
-  const [isEditing, setIsEditing] = useState(false);
-  const editRef = useRef<HTMLDivElement>(null);
-
-  const startEditing = () => {
-    setIsEditing(true);
-    setTimeout(() => {
-      setupEditor();
-    }, 0);
-  };
-
-  const setupEditor = () => {
-    if (!editRef.current) {
-      return;
-    }
-
-    const editor = editRef.current;
-    editor.innerHTML = '';
-    editor.textContent = allData.summaryText;
-    editor.focus();
-  };
-
-  const saveChanges = () => {
-    if (!editRef.current) {
-      return;
-    }
-
-    const content = editRef.current.innerText || '';
-    setAllData((prev: Record<string, any>) => ({
-      ...prev,
-      summaryText: content,
-    }));
-    setIsEditing(false);
-    editRef.current.innerHTML = '';
-  };
-
-  const markdownStyles = {
-    ul: { props: { className: 'list-disc' } },
-    h1: { props: { className: 'text-4xl font-bold leading-[4rem]' } },
-    h2: { props: { className: 'text-3xl font-bold leading-[3rem]' } },
-    h3: { props: { className: 'text-2xl font-bold leading-[2rem]' } },
-    h4: { props: { className: 'text-xl font-bold leading-[2.5rem]' } },
-    h5: { props: { className: 'text-lg font-bold leading-[2.5rem]' } },
-    h6: { props: { className: 'text-base font-bold leading-[2rem]' } },
-  };
-
-  if (!allData.isEditable) {
-    return (
-      <div className="px-[1em]" {...rest}>
-        <div data-slot="summaryText">
-          <Markdown options={{ overrides: markdownStyles }}>{allData.summaryText}</Markdown>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="p-[1em]" {...rest}>
-      {isEditing ? (
-        <div
-          ref={editRef}
-          contentEditable
-          onBlur={saveChanges}
-          data-slot="summaryText"
-          className="p-2 min-h-[100px] whitespace-pre-wrap"
-          suppressContentEditableWarning={true}
-          style={{
-            whiteSpace: 'pre-wrap',
-            wordWrap: 'break-word',
-          }}
-        />
-      ) : (
-        <div
-          onClick={startEditing}
-          data-slot="summaryText"
-          style={{
-            whiteSpace: 'pre-wrap',
-            wordWrap: 'break-word',
-          }}
-        >
-          <Markdown options={{ overrides: markdownStyles }}>{allData.summaryText}</Markdown>
-        </div>
-      )}
-    </div>
-  );
-}
-
-export function renderButton(props: any): JSX.Element {
-  const { isEditable = false, gjsModel, performInteraction = () => {} } = props;
-
-  const [allData, setAllData] = useState({
-    ...props,
-  });
-
-  const [attributes, setAttributes] = useState({
-    interactionApiInProgress: false,
-  });
-
-  useEffect(() => {
-    gjsModel.on('change:componentProps', () => {
-      setAllData({
-        ...gjsModel.get('componentProps'),
-      });
-    });
-  }, []);
-
-  useEffect(() => {
-    gjsModel.on('change:attributes', () => {
-      setAttributes({
-        ...gjsModel.get('attributes'),
-      });
-    });
-  }, []);
-
-  const {
-    text,
-    className,
-    payload,
-    variant = 'default',
-    size = 'sm',
-    affectedComponents,
-    tooltipContent,
-  } = allData;
-
-  function interact() {
-    const id = gjsModel.get('id');
-    performInteraction({
-      id,
-      interactionType: 'button',
-      affectedComponents: getAffectedComponentsWithLoader([id, ...affectedComponents], true),
-      payload,
-    });
-  }
-
-  return (
-    <TooltipButton
-      className={className}
-      isEditable={isEditable}
-      interact={interact}
-      attributes={attributes}
-      variant={variant}
-      size={size}
-      text={text}
-      tooltipContent={tooltipContent}
-    />
-  );
-}
-
-export function getRenderers(): Record<string, (props: any) => JSX.Element> {
-  return {
-    ActionCard: renderActionCard,
-    Button: renderButton,
-    Card: renderCard,
-    Chart: renderChart,
-    Filter: renderFilter,
-    Markdown: renderMarkdown,
-    Search: renderSearch,
-    Table: renderTable,
-    Tabs: renderTab,
-  };
-}