@stigg/react-sdk 7.7.1-beta.0 → 7.8.0-beta.0

package/src/components/common/chart/chartjs.tooltip.plugin.tsx

@@ -1,224 +0,0 @@
-import { Chart, ChartEvent, ChartType, TooltipModel } from 'chart.js';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import styled from '@utils/style';
-import { Box } from '@mui/material';
-import { EventContext } from 'chartjs-plugin-annotation';
-import debounce from 'lodash/debounce';
-
-const CLOSE_DELAY = 300;
-
-export type ExternalTooltipHandler<TType extends ChartType> = (context: {
-  chart: Chart;
-  tooltip: TooltipModel<TType>;
-}) => void;
-
-export type AnnotationTooltipHandler = (isMouseOver: boolean, context: EventContext, event: ChartEvent) => void;
-
-export type ExternalTooltipInfo<TPayload> = {
-  positionTop: number;
-  positionLeft: number;
-  isOpen: boolean;
-  payload?: TPayload;
-};
-
-type ChartJsExternalTooltipProps = {
-  tooltipInfo: ExternalTooltipInfo<unknown>;
-  children: React.ReactElement<any, any>;
-  $padding?: number;
-  placement?: 'top' | 'bottom' | 'left' | 'right';
-};
-
-export type ExternalTooltipTranslateFunc<TType extends ChartType, TPayload> = (
-  tooltip: TooltipModel<TType>,
-) => TPayload | undefined;
-export type AnnotationTooltipTranslateFunc<TPayload> = (
-  context: EventContext,
-  event: ChartEvent,
-) => TPayload | undefined;
-
-type TooltipPosition = { top: number; left: number };
-type ChartJsExternalTooltipPositioner<TType extends ChartType> = (
-  chart: Chart,
-  tooltip: TooltipModel<TType>,
-) => TooltipPosition;
-
-export function bottomBarTooltipPositioner(chart: Chart, tooltip: TooltipModel<'bar'>): TooltipPosition {
-  // For stacked bars, we need to calculate the center of the specific segment
-  // The caretY gives us the top of the segment, so we need to find the center
-  const dataPoint = tooltip.dataPoints[0];
-
-  // Calculate the center of the specific segment
-  // We'll estimate the segment height based on the parsed value and scale
-  const parsedValue = dataPoint.parsed.y;
-  const yScale = chart.scales.y;
-
-  // Calculate the height of this segment in pixels
-  const segmentHeight = (parsedValue / yScale.max) * (yScale.bottom - yScale.top);
-  const segmentCenterY = tooltip.caretY + segmentHeight / 2;
-
-  // Get the bar element to find its left edge
-  const bar = chart.getDatasetMeta(dataPoint.datasetIndex).data[dataPoint.dataIndex];
-  const barLeftEdge = bar.x - (bar as any).width / 2;
-
-  const top = chart.canvas.offsetTop + segmentCenterY;
-  const left = chart.canvas.offsetLeft + barLeftEdge;
-
-  return { top, left };
-}
-
-function defaultExternalTooltipPosition<TType extends ChartType>(
-  chart: Chart,
-  tooltip: TooltipModel<TType>,
-): TooltipPosition {
-  const top = chart.canvas.offsetTop + tooltip.caretY;
-  const left = chart.canvas.offsetLeft + tooltip.caretX;
-
-  return { top, left };
-}
-
-export function useChartJsExternalTooltip<TType extends ChartType, TPayload>(
-  translate: ExternalTooltipTranslateFunc<TType, TPayload>,
-  positioner: ChartJsExternalTooltipPositioner<TType> = defaultExternalTooltipPosition,
-) {
-  const [positionTop, setPositionTop] = useState(0);
-  const [positionLeft, setPositionLeft] = useState(0);
-  const [isOpen, setIsOpen] = useState(false);
-  const [payload, setPayload] = useState<TPayload>();
-
-  const tooltipHandler: ExternalTooltipHandler<TType> = useCallback(
-    (context: { chart: Chart; tooltip: TooltipModel<TType> }) => {
-      const { chart, tooltip } = context;
-
-      // Hide if no tooltip
-      if (tooltip.opacity === 0) {
-        setIsOpen(false);
-        return;
-      }
-
-      const { top, left } = positioner(chart, tooltip);
-
-      setPositionLeft(left);
-      setPositionTop(top);
-      setPayload(translate(tooltip));
-      setIsOpen(true);
-    },
-    [translate, positioner],
-  );
-
-  const tooltipInfo: ExternalTooltipInfo<TPayload> = {
-    positionTop,
-    positionLeft,
-    isOpen,
-    payload,
-  };
-
-  return {
-    tooltipInfo,
-    tooltipHandler,
-  };
-}
-
-export function useChartJsAnnotationExternalTooltip<TPayload>(translate: AnnotationTooltipTranslateFunc<TPayload>) {
-  const [positionTop, setPositionTop] = useState(0);
-  const [positionLeft, setPositionLeft] = useState(0);
-  const [isOpen, setIsOpen] = useState(false);
-  const [payload, setPayload] = useState<TPayload>();
-
-  const tooltipHandler: AnnotationTooltipHandler = useCallback(
-    (isMouseOver: boolean, context: EventContext, event: ChartEvent) => {
-      const { chart } = context;
-      const { x, y } = event;
-
-      if (!isMouseOver || !x || !y) {
-        setIsOpen(false);
-        return;
-      }
-
-      setPositionLeft(chart.canvas.offsetLeft + context.element.x);
-      setPositionTop(chart.canvas.offsetTop + context.element.y - context.element.height);
-      setPayload(translate(context, event));
-      setIsOpen(true);
-    },
-    [translate],
-  );
-
-  const tooltipInfo: ExternalTooltipInfo<TPayload> = {
-    positionTop,
-    positionLeft,
-    isOpen,
-    payload,
-  };
-
-  return {
-    tooltipInfo,
-    tooltipHandler,
-  };
-}
-
-const AnchorBox = styled(Box)`
-  position: absolute;
-`;
-
-const CustomTooltip = styled.div<{ $isOpen: boolean; $padding?: number }>`
-  position: absolute;
-  background-color: white;
-  border-radius: 8px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  padding: ${({ $padding = 16 }) => $padding}px;
-  max-width: 500px;
-  z-index: 1000;
-  pointer-events: none;
-  opacity: ${({ $isOpen }) => ($isOpen ? 1 : 0)};
-  transition: opacity 0.2s ease-in-out;
-  transform: translateY(-50%); /* Center vertically on the anchor point */
-
-  &::before {
-    content: '';
-    position: absolute;
-    width: 0;
-    height: 0;
-    border: 8px solid transparent;
-    border-left-color: white;
-    right: -16px;
-    top: 50%;
-    transform: translateY(-50%);
-    filter: drop-shadow(2px 0 2px rgba(0, 0, 0, 0.1));
-  }
-`;
-
-export const ChartJsExternalTooltip = ({
-  children,
-  tooltipInfo: { positionTop, positionLeft, payload, isOpen },
-  $padding,
-}: ChartJsExternalTooltipProps) => {
-  const [isTooltipHover, setIsTooltipHover] = useState(false);
-  const [shouldBeOpened, setShouldBeOpened] = useState(false);
-
-  const closeDebounce = useRef(debounce(() => setShouldBeOpened(false), CLOSE_DELAY));
-
-  useEffect(() => {
-    if (Boolean(payload) && (isTooltipHover || isOpen)) {
-      closeDebounce.current.cancel();
-      setShouldBeOpened(true);
-    } else {
-      closeDebounce.current();
-    }
-  }, [payload, isTooltipHover, isOpen]);
-
-  return (
-    <>
-      <AnchorBox style={{ top: positionTop, left: positionLeft }} />
-      <CustomTooltip
-        $isOpen={shouldBeOpened}
-        $padding={$padding}
-        style={{
-          top: positionTop, // Use the exact center of the bar segment
-          left: positionLeft - 140, // Position close to the left of the bar
-        }}
-        onMouseEnter={() => setIsTooltipHover(true)}
-        onMouseLeave={() => setIsTooltipHover(false)}>
-        {children}
-      </CustomTooltip>
-    </>
-  );
-};

package/src/components/common/customIcons.ts

@@ -1,24 +0,0 @@
-export { default as Addons } from '../../assets/addons.svg';
-export { default as BillingInfoCustomer } from '../../assets/billing-info-customer.svg';
-export { default as ContactSupport } from '../../assets/contact-support.svg';
-export { default as CreditCard } from '../../assets/credit-card.svg';
-export { default as DollarCoin } from '../../assets/dollar-coin.svg';
-export { default as MiniSchedule } from '../../assets/mini-schedule.svg';
-export { default as Promotions } from '../../assets/promotions.svg';
-export { default as Restore } from '../../assets/restore.svg';
-export { default as ScheduleBox } from '../../assets/schedule-box.svg';
-export { default as ScheduleClock } from '../../assets/schedule.svg';
-export { default as RenewSubscription } from '../../assets/subscription-renews-icon.svg';
-export { default as Trash } from '../../assets/trash.svg';
-export { default as PaymentMethod } from '../../assets/payment-method.svg';
-export { default as OutlinedCircle } from '../../assets/outlined-circle.svg';
-export { default as OutlinedCheckedCircle } from '../../assets/outlined-checked-circle.svg';
-export { default as OutlinedCheckedCircleDisabled } from '../../assets/outlined-checked-circle-disabled.svg';
-export { default as ArrowForward } from '../../assets/arrow-forward.svg';
-export { default as Close } from '../../assets/close.svg';
-export { default as Check } from '../../assets/check.svg';
-export { default as PayAsYouGoCharge } from '../../assets/pay-as-you-go-charge.svg';
-export { default as Coupon } from '../../assets/coupon.svg';
-export { default as Add } from '../../assets/add.svg';
-export { default as Remove } from '../../assets/remove.svg';
-export { default as EntitlementCheck } from '../../assets/entitlement-check.svg';

package/src/components/common/iconColor.ts

@@ -1,15 +0,0 @@
-import { Theme } from '@emotion/react';
-import { IconColorValue } from './Icon';
-
-export type IconColor = 'primary' | 'secondary';
-
-export const getIconColor = (color: IconColorValue | undefined, theme: Theme) => {
-  switch (color) {
-    case 'primary':
-      return theme.stigg.palette.text.primary;
-    case 'secondary':
-      return theme.stigg.palette.text.secondary;
-    default:
-      return color;
-  }
-};

package/src/components/common/mapExternalTheme.ts

@@ -1,147 +0,0 @@
-import {
-  Alignment,
-  CheckoutConfiguration,
-  CustomerPortalConfiguration,
-  FontWeight as JSFontWeight,
-  PaywallConfiguration,
-  TypographyConfiguration,
-} from '@stigg/js-client-sdk';
-import { CustomizedTheme } from '../../theme/Theme';
-import { HorizontalAlignment } from '../../theme/types';
-import { defaultCheckoutTypography } from '../checkout/configurations/typography';
-
-function addCssUnits(value?: number | null, unit = 'px') {
-  if (!value) {
-    return undefined;
-  }
-  return `${value}${unit}`;
-}
-
-function mapFontWeight(fontWeight?: JSFontWeight | null): 'bold' | 'normal' {
-  if (!fontWeight) {
-    return 'normal';
-  }
-
-  switch (fontWeight) {
-    case JSFontWeight.Normal:
-      return 'normal';
-    case JSFontWeight.Bold:
-      return 'bold';
-    default:
-      return 'normal';
-  }
-}
-
-export function mapTypography(
-  typography?: TypographyConfiguration | null,
-  defaultTypography?: typeof defaultCheckoutTypography | null,
-): CustomizedTheme['typography'] {
-  const defaults = defaultTypography || {
-    h1: { fontSize: '32px', fontWeight: 'bold' as const, semanticElement: 'h1' as const },
-    h2: { fontSize: '24px', fontWeight: 'normal' as const, semanticElement: 'h2' as const },
-    h3: { fontSize: '16px', fontWeight: 'normal' as const, semanticElement: 'h3' as const },
-    body: { fontSize: '14px', fontWeight: 'normal' as const, semanticElement: 'p' as const },
-  };
-
-  return {
-    fontFamilyUrl: typography?.fontFamily || undefined,
-    h1: {
-      fontSize: addCssUnits(typography?.h1?.fontSize) || defaults.h1.fontSize,
-      fontWeight: mapFontWeight(typography?.h1?.fontWeight) || defaults.h1.fontWeight,
-      semanticElement: defaults.h1.semanticElement,
-    },
-    h2: {
-      fontSize: addCssUnits(typography?.h2?.fontSize) || defaults.h2.fontSize,
-      fontWeight: mapFontWeight(typography?.h2?.fontWeight) || defaults.h2.fontWeight,
-      semanticElement: defaults.h2.semanticElement,
-    },
-    h3: {
-      fontSize: addCssUnits(typography?.h3?.fontSize) || defaults.h3.fontSize,
-      fontWeight: mapFontWeight(typography?.h3?.fontWeight) || defaults.h3.fontWeight,
-      semanticElement: defaults.h3.semanticElement,
-    },
-    body: {
-      fontSize: addCssUnits(typography?.body?.fontSize) || defaults.body.fontSize,
-      fontWeight: mapFontWeight(typography?.body?.fontWeight) || defaults.body.fontWeight,
-      semanticElement: defaults.body.semanticElement,
-    },
-  };
-}
-
-function mapAlignment(alignment?: Alignment | null): HorizontalAlignment | undefined {
-  if (!alignment) {
-    return undefined;
-  }
-
-  switch (alignment) {
-    case Alignment.Left:
-      return 'left';
-    case Alignment.Center:
-      return 'center';
-    case Alignment.Right:
-      return 'right';
-    default: {
-      return undefined;
-    }
-  }
-}
-
-export function mapCustomerPortalConfiguration(configuration: CustomerPortalConfiguration): CustomizedTheme {
-  const { palette, customCss, typography } = configuration;
-  return {
-    palette: {
-      primary: palette?.primary || undefined,
-      backgroundPaper: palette?.paywallBackgroundColor || undefined,
-      outlinedBorder: palette?.borderColor || undefined,
-      backgroundHighlight: palette?.currentPlanBackground || undefined,
-      text: {
-        primary: palette?.textColor || undefined,
-      },
-    },
-    typography: mapTypography(typography),
-    customCss: customCss || undefined,
-  };
-}
-
-export function mapPaywallConfiguration(paywallConfiguration: PaywallConfiguration): CustomizedTheme {
-  const { palette, layout, customCss, typography } = paywallConfiguration;
-  return {
-    customCss: customCss || undefined,
-    palette: {
-      primary: palette?.primary || undefined,
-      backgroundPaper: palette?.backgroundColor || undefined,
-      outlinedBorder: palette?.borderColor || undefined,
-      backgroundHighlight: palette?.currentPlanBackground || undefined,
-      text: {
-        primary: palette?.textColor || undefined,
-      },
-    },
-    typography: mapTypography(typography),
-    layout: {
-      ctaAlignment: mapAlignment(layout?.alignment),
-      headerAlignment: mapAlignment(layout?.alignment),
-      descriptionAlignment: mapAlignment(layout?.alignment),
-      planMaxWidth: addCssUnits(layout?.planWidth),
-      planMinWidth: addCssUnits(layout?.planWidth),
-      planMargin: addCssUnits(layout?.planMargin),
-      planPadding: addCssUnits(layout?.planPadding),
-    },
-  };
-}
-
-export function mapCheckoutConfiguration(configuration: CheckoutConfiguration): CustomizedTheme {
-  const { palette, typography, customCss } = configuration;
-  return {
-    palette: {
-      primary: palette?.primary || undefined,
-      backgroundPaper: palette?.backgroundColor || undefined,
-      outlinedBorder: palette?.borderColor || undefined,
-      text: {
-        primary: palette?.textColor || undefined,
-      },
-      backgroundHighlight: palette?.summaryBackgroundColor || undefined,
-    },
-    typography: mapTypography(typography, defaultCheckoutTypography),
-    customCss: customCss || undefined,
-  };
-}

package/src/components/common/mediaQuery.ts

@@ -1,19 +0,0 @@
-export const breakpoints = {
-  xs: 320,
-  sm: 640,
-  md: 768,
-  lg: 1024,
-  xl: 1280,
-  xxl: 1536,
-} as const;
-
-export type Breakpoints = typeof breakpoints;
-
-export type Breakpoint = keyof Breakpoints;
-
-export const mqMinWidth = (breakpoint: Breakpoint) => `(min-width: ${breakpoints[breakpoint]}px)`;
-
-export const mq = Object.keys(breakpoints).reduce(
-  (obj, breakpoint) => ({ ...obj, [breakpoint]: `@media ${mqMinWidth(breakpoint as Breakpoint)}` }),
-  {} as Record<Breakpoint, string>,
-);

package/src/components/common/table/DataRows.tsx

@@ -1,33 +0,0 @@
-import { ClickableRow, StyledTableCell, CellContent } from './GenericTable';
-import { HeadCell } from './types';
-
-interface DataRowsProps<T> {
-  data: T[];
-  visibleHeadCells: Array<HeadCell<T>>;
-  onRowClick?: (item: T) => void;
-  hideLastRowBorder: boolean;
-}
-
-export function DataRows<T>({ data, visibleHeadCells, onRowClick, hideLastRowBorder }: DataRowsProps<T>) {
-  return (
-    <>
-      {data.map((item, index) => (
-        <ClickableRow key={index} $clickable={!!onRowClick} onClick={() => onRowClick && onRowClick(item)}>
-          {visibleHeadCells.map((headCell) => (
-            <StyledTableCell
-              key={String(headCell.id)}
-              $alignment={headCell.alignment}
-              $width={headCell.width}
-              $maxWidth={headCell.maxWidth}
-              $minWidth={headCell.minWidth}
-              $isLastRow={index === data.length - 1}
-              $hideLastRowBorder={hideLastRowBorder}
-              onClick={headCell.disableClick ? (e) => e.stopPropagation() : undefined}>
-              <CellContent $alignment={headCell.alignment}>{headCell.render(item)}</CellContent>
-            </StyledTableCell>
-          ))}
-        </ClickableRow>
-      ))}
-    </>
-  );
-}

package/src/components/common/table/EmptyState.tsx

@@ -1,19 +0,0 @@
-import { ReactNode } from 'react';
-import { Typography } from '../Typography';
-
-interface EmptyStateProps {
-  message?: ReactNode;
-  className?: string;
-}
-
-export function EmptyState({ message, className }: EmptyStateProps) {
-  if (message === undefined || typeof message === 'string') {
-    return (
-      <Typography variant="body1" color="secondary" className={className}>
-        {message || 'No data available'}
-      </Typography>
-    );
-  }
-
-  return <>{message}</>;
-}

package/src/components/common/table/ErrorState.tsx

@@ -1,19 +0,0 @@
-import { ReactNode } from 'react';
-import { Typography } from '../Typography';
-
-interface ErrorStateProps {
-  errorMessage?: ReactNode;
-  className?: string;
-}
-
-export function ErrorState({ errorMessage, className }: ErrorStateProps) {
-  if (errorMessage === undefined || typeof errorMessage === 'string') {
-    return (
-      <Typography variant="body1" color="error" className={className}>
-        {errorMessage || 'An error occurred'}
-      </Typography>
-    );
-  }
-
-  return <>{errorMessage}</>;
-}

package/src/components/common/table/GenericTable.tsx

@@ -1,155 +0,0 @@
-import styled from '@utils/style';
-import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';
-import { Typography } from '../Typography';
-import { GenericTableProps, TableAlignment, PixelWidth, HeadCell } from './types';
-import { LoadingRows } from './LoadingRows';
-import { DataRows } from './DataRows';
-import { ErrorState } from './ErrorState';
-import { EmptyState } from './EmptyState';
-
-const StyledTableContainer = styled(TableContainer)<{
-  $hasMinHeight?: boolean;
-}>`
-  border-radius: 8px;
-  border: 1px solid ${({ theme }) => theme.stigg.palette.outlinedBorder};
-  background-color: ${({ theme }) => theme.stigg.palette.backgroundPaper};
-  min-width: 100%;
-  overflow-x: auto;
-
-  ${({ $hasMinHeight }) =>
-    $hasMinHeight &&
-    `
-      min-height: 160px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    `}
-`;
-
-const StyledTable = styled(Table)`
-  min-width: 600px;
-  table-layout: auto;
-  width: 100%;
-`;
-
-export const StyledTableCell = styled(TableCell)<{
-  $alignment?: TableAlignment;
-  $width?: PixelWidth;
-  $maxWidth?: PixelWidth;
-  $minWidth?: PixelWidth;
-  $isLastRow?: boolean;
-  $hideLastRowBorder?: boolean;
-}>`
-  padding: 8px 12px;
-  border-bottom: 1px solid ${({ theme }) => theme.stigg.palette.outlinedBorder};
-  text-align: ${({ $alignment }) => $alignment || 'left'};
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-
-  ${({ $width }) => $width && `width: ${$width};`}
-  ${({ $maxWidth }) => $maxWidth && `max-width: ${$maxWidth};`}
-  ${({ $minWidth }) => $minWidth && `min-width: ${$minWidth};`}
-  
-  ${({ $isLastRow, $hideLastRowBorder }) => $isLastRow && $hideLastRowBorder && `border-bottom: none;`}
-`;
-
-const StyledHeaderCell = styled(StyledTableCell)`
-  background-color: transparent;
-`;
-
-export const ClickableRow = styled(TableRow)<{ $clickable?: boolean }>`
-  ${({ $clickable, theme }) =>
-    $clickable &&
-    `
-    cursor: pointer;
-    &:hover {
-      background-color: ${theme.stigg.palette.backgroundHighlight};
-    }
-  `}
-`;
-
-export const CellContent = styled.div<{ $alignment?: TableAlignment }>`
-  display: flex;
-  align-items: center;
-  justify-content: ${({ $alignment }) => {
-    switch ($alignment) {
-      case 'center':
-        return 'center';
-      case 'right':
-        return 'flex-end';
-      default:
-        return 'flex-start';
-    }
-  }};
-  width: 100%;
-`;
-
-interface TableHeaderProps<T> {
-  visibleHeadCells: Array<HeadCell<T>>;
-}
-
-function TableHeader<T>({ visibleHeadCells }: TableHeaderProps<T>) {
-  return (
-    <TableHead>
-      <TableRow>
-        {visibleHeadCells.map((headCell) => (
-          <StyledHeaderCell
-            key={String(headCell.id)}
-            $alignment={headCell.alignment}
-            $width={headCell.width}
-            $maxWidth={headCell.maxWidth}
-            $minWidth={headCell.minWidth}>
-            <Typography variant="caption">{headCell.label}</Typography>
-          </StyledHeaderCell>
-        ))}
-      </TableRow>
-    </TableHead>
-  );
-}
-
-export function GenericTable<T>({
-  data,
-  headCells,
-  isLoading = false,
-  error = null,
-  emptyMessage,
-  errorMessage,
-  onRowClick,
-  className,
-  skeletonRows = 3,
-  hideLastRowBorder = true,
-}: GenericTableProps<T>) {
-  const visibleHeadCells = headCells.filter((cell) => cell.visible !== false);
-  const hasErrorOrEmptyState = !!error || (!isLoading && data.length === 0);
-
-  return (
-    <StyledTableContainer className={className} $hasMinHeight={hasErrorOrEmptyState}>
-      {error ? (
-        <ErrorState errorMessage={errorMessage} className={`${className}-error`} />
-      ) : !isLoading && data.length === 0 ? (
-        <EmptyState message={emptyMessage} className={`${className}-empty`} />
-      ) : (
-        <StyledTable>
-          <TableHeader visibleHeadCells={visibleHeadCells} />
-          <TableBody>
-            {isLoading ? (
-              <LoadingRows
-                skeletonRows={skeletonRows}
-                visibleHeadCells={visibleHeadCells}
-                hideLastRowBorder={hideLastRowBorder}
-              />
-            ) : (
-              <DataRows
-                data={data}
-                visibleHeadCells={visibleHeadCells}
-                onRowClick={onRowClick}
-                hideLastRowBorder={hideLastRowBorder}
-              />
-            )}
-          </TableBody>
-        </StyledTable>
-      )}
-    </StyledTableContainer>
-  );
-}

package/src/components/common/table/LoadingRows.tsx

@@ -1,33 +0,0 @@
-import { TableRow } from '@mui/material';
-import Skeleton from 'react-loading-skeleton';
-import { StyledTableCell } from './GenericTable';
-import { HeadCell } from './types';
-
-interface LoadingRowsProps<T> {
-  skeletonRows: number;
-  visibleHeadCells: Array<HeadCell<T>>;
-  hideLastRowBorder: boolean;
-}
-
-export function LoadingRows<T>({ skeletonRows, visibleHeadCells, hideLastRowBorder }: LoadingRowsProps<T>) {
-  return (
-    <>
-      {Array.from({ length: skeletonRows }).map((_, index) => (
-        <TableRow key={index}>
-          {visibleHeadCells.map((headCell) => (
-            <StyledTableCell
-              key={String(headCell.id)}
-              $alignment={headCell.alignment}
-              $width={headCell.width}
-              $maxWidth={headCell.maxWidth}
-              $minWidth={headCell.minWidth}
-              $isLastRow={index === skeletonRows - 1}
-              $hideLastRowBorder={hideLastRowBorder}>
-              <Skeleton width={headCell.width ? parseInt(headCell.width.replace('px', '')) - 40 : 100} height={20} />
-            </StyledTableCell>
-          ))}
-        </TableRow>
-      ))}
-    </>
-  );
-}