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

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

@@ -0,0 +1,199 @@
+import styled from '@utils/style';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  TablePagination,
+  Divider,
+} 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';
+import { formatNumber } from '../../utils/formatNumber';
+
+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%;
+`;
+
+const StyledDivider = styled(Divider)`
+  border-color: ${({ theme }) => theme.stigg.palette.outlinedBorder};
+`;
+
+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%;
+`;
+
+const StyledTablePagination = styled(TablePagination)`
+  color: ${({ theme }) => theme.stigg.palette.text.secondary};
+`;
+
+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,
+  pageSize,
+  pageNum,
+  totalCount,
+  onPageChange,
+}: 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>
+
+          {!!data?.length && onPageChange && (
+            <>
+              <StyledDivider />
+              <StyledTablePagination
+                // @ts-ignore next-line
+                component="div"
+                rowsPerPage={pageSize ?? data.length}
+                rowsPerPageOptions={[pageSize ?? data.length]}
+                count={totalCount ?? data.length}
+                page={pageNum ?? 1}
+                onPageChange={onPageChange}
+                labelDisplayedRows={({ from, to, count }) =>
+                  `${formatNumber(from)}-${formatNumber(to)} of ${
+                    count !== -1 ? formatNumber(count) : `more than ${formatNumber(to)}`
+                  }`
+                }
+              />
+            </>
+          )}
+        </>
+      )}
+    </StyledTableContainer>
+  );
+}

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

@@ -0,0 +1,33 @@
+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>
+      ))}
+    </>
+  );
+}

package/src/components/common/table/index.ts

@@ -0,0 +1,6 @@
+export { GenericTable, StyledTableCell, ClickableRow, CellContent } from './GenericTable';
+export { LoadingRows } from './LoadingRows';
+export { DataRows } from './DataRows';
+export { ErrorState } from './ErrorState';
+export { EmptyState } from './EmptyState';
+export type { HeadCell, GenericTableProps, TableAlignment, PixelWidth } from './types';

package/src/components/common/table/types.ts

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+
+export type TableAlignment = 'left' | 'center' | 'right';
+export type PixelWidth = `${number}px`;
+
+export interface HeadCell<T> {
+  id: string;
+  alignment?: TableAlignment;
+  label: string;
+  width?: PixelWidth;
+  maxWidth?: PixelWidth;
+  minWidth?: PixelWidth;
+  disableClick?: boolean;
+  visible?: boolean;
+  render: (item: T) => ReactNode;
+}
+
+export interface GenericTableProps<T> {
+  data: T[];
+  headCells: Array<HeadCell<T>>;
+  isLoading?: boolean;
+  error?: Error | null;
+  emptyMessage?: ReactNode;
+  loadingMessage?: string;
+  errorMessage?: ReactNode;
+  onRowClick?: (item: T) => void;
+  className?: string;
+  skeletonRows?: number;
+  hideLastRowBorder?: boolean;
+  pageSize?: number;
+  pageNum?: number;
+  totalCount?: number;
+  onPageChange?: (event: any, nextPage: number) => void;
+}

package/src/components/credits/balance/CreditBalance.tsx

@@ -0,0 +1,70 @@
+import styled from '@utils/style';
+import { GetCreditBalanceParams } from '../hooks/useCreditBalance';
+import { useStiggContext } from '../../../hooks';
+import { SdkThemeProvider } from '../../../theme/Theme';
+import { Typography } from '../../common/Typography';
+import { CreditBalanceValue } from './CreditBalanceValue';
+import { CREDIT_WIDGET_DEFAULT_LOCALIZATION } from '../localization';
+import { CustomerPortalContext, useCheckContextExists } from '@/components/customerPortal';
+
+const CreditBalanceContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+`;
+
+const CreditBalanceCard = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 16px;
+  border-radius: 8px;
+  border: 1px solid ${({ theme }) => theme.stigg?.palette?.outlinedBorder};
+  background-color: ${({ theme }) => theme?.stigg?.palette?.backgroundPaper};
+`;
+
+export type CreditBalanceProps = GetCreditBalanceParams & {
+  localization?: CreditBalanceLocalization;
+  decimalPlaces?: number | null;
+  showUnits?: boolean;
+  showSymbol?: boolean;
+};
+
+export type CreditBalanceLocalization = {
+  title: string;
+};
+
+export function CreditBalance({
+  currencyId,
+  localization,
+  decimalPlaces,
+  showUnits = true,
+  showSymbol = false,
+}: CreditBalanceProps) {
+  const hasCustomerPortalContext = useCheckContextExists(CustomerPortalContext);
+  const stiggContext = useStiggContext({ optional: true });
+  const theme = stiggContext?.theme;
+  const title = localization?.title ?? CREDIT_WIDGET_DEFAULT_LOCALIZATION.title;
+
+  const component = (
+    <CreditBalanceContainer className="stigg-credit-balance-container">
+      <CreditBalanceCard className="stigg-credit-balance-card">
+        <Typography variant="h6" color="primary" className="stigg-credit-balance-title">
+          {title}
+        </Typography>
+        <CreditBalanceValue
+          currencyId={currencyId}
+          decimalPlaces={decimalPlaces}
+          showUnits={showUnits}
+          showSymbol={showSymbol}
+        />
+      </CreditBalanceCard>
+    </CreditBalanceContainer>
+  );
+
+  if (hasCustomerPortalContext) {
+    return component;
+  }
+  return <SdkThemeProvider componentTheme={theme}>{component}</SdkThemeProvider>;
+}

package/src/components/credits/balance/CreditBalanceValue.tsx

@@ -0,0 +1,60 @@
+import styled from '@utils/style';
+import Skeleton from 'react-loading-skeleton';
+import { Typography } from '../../common/Typography';
+import { useCreditBalance } from '../hooks/useCreditBalance';
+import { formatValue, formatCreditSuffix } from '../utils/creditBalanceUtils';
+
+const CreditBalanceValueContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 4px;
+  align-items: baseline;
+`;
+
+export function CreditBalanceValue({
+  currencyId,
+  decimalPlaces = null,
+  showUnits = true,
+  showSymbol = false,
+}: {
+  currencyId: string;
+  decimalPlaces?: number | null;
+  showUnits?: boolean;
+  showSymbol?: boolean;
+}) {
+  const { balance, isLoading, error } = useCreditBalance({
+    currencyId,
+  });
+
+  if (error) {
+    return (
+      <Typography variant="body1" color="error" className="stigg-credit-balance-value-error">
+        {error.message || 'Failed to load balance'}
+      </Typography>
+    );
+  }
+
+  if (isLoading) {
+    return <Skeleton width={120} height={24} className="stigg-credit-balance-value-loading" />;
+  }
+
+  if (balance) {
+    const suffix = formatCreditSuffix(balance, showUnits, showSymbol);
+    return (
+      <CreditBalanceValueContainer>
+        <Typography variant="h3" color="primary" bold className="stigg-credit-balance-value-amount">
+          {formatValue(balance.currentBalance, decimalPlaces)}
+        </Typography>
+        <Typography variant="caption" color="secondary" className="stigg-credit-balance-value-suffix">
+          {suffix}
+        </Typography>
+      </CreditBalanceValueContainer>
+    );
+  }
+
+  return (
+    <Typography variant="body1" color="disabled" className="stigg-credit-balance-value-no-balance">
+      No balance data available
+    </Typography>
+  );
+}

package/src/components/credits/creditUsageChart/CreditUsage.chartjs.ts

@@ -0,0 +1,223 @@
+import { ChartData, ChartOptions, ChartType, Chart, TooltipModel } from 'chart.js';
+import { CreditUsageFragment, CreditUsageTimeRange } from '@stigg/js-client-sdk';
+import { getAxisColor, getAxisTickColor, getAxisTickFont, opacityColor } from '../../common/chart/chartjs.theme';
+import { StiggTheme } from '../../../theme/types';
+import { numberFormatter } from '../../utils/numberUtils';
+
+export type ExternalTooltipHandler<TType extends ChartType> = (context: {
+  chart: Chart;
+  tooltip: TooltipModel<TType>;
+}) => void;
+
+export function getFeatureColor(index: number): string {
+  const materialColors = [
+    // Primary spectrum (500 shades) - main colors
+    '#4caf50', // green[500]
+    '#2196f3', // blue[500]
+    '#ff5722', // deepOrange[500]
+    '#ff9800', // orange[500]
+    '#e91e63', // pink[500]
+    '#3f51b5', // indigo[500]
+    '#00bcd4', // cyan[500]
+
+    // Pastel spectrum (300 shades) - for 10+ features
+    '#81c784', // green[300]
+    '#64b5f6', // blue[300]
+    '#ff8a65', // deepOrange[300]
+    '#ffb74d', // orange[300]
+    '#f06292', // pink[300]
+    '#7986cb', // indigo[300]
+    '#4dd0e1', // cyan[300]
+
+    // Light spectrum (200 shades) - for 20+ features
+    '#a5d6a7', // green[200]
+    '#90caf9', // blue[200]
+    '#ffab91', // deepOrange[200]
+    '#ffcc80', // orange[200]
+    '#f48fb1', // pink[200]
+    '#9fa8da', // indigo[200]
+    '#80deea', // cyan[200]
+  ];
+
+  return materialColors[index % materialColors.length];
+}
+
+function generateLabelsForTimeRange(timeRange?: CreditUsageTimeRange): string[] {
+  const labels: string[] = [];
+  const now = new Date();
+
+  switch (timeRange) {
+    case CreditUsageTimeRange.LastDay: {
+      // Last 24 hours with hourly granularity (24 data points)
+      // Start from 24 hours ago, rounded to the nearest hour
+      const startHour = new Date(now);
+      startHour.setHours(startHour.getHours() - 23);
+      startHour.setMinutes(0, 0, 0); // Round to start of hour
+
+      for (let i = 0; i < 24; i++) {
+        const date = new Date(startHour);
+        date.setHours(date.getHours() + i);
+        labels.push(date.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }));
+      }
+      break;
+    }
+    case CreditUsageTimeRange.LastWeek: {
+      // Last 7 days with daily granularity (7 data points)
+      for (let i = 6; i >= 0; i--) {
+        const date = new Date(now);
+        date.setDate(date.getDate() - i);
+        labels.push(date.toLocaleDateString('en-US', { month: 'short', day: '2-digit' }));
+      }
+      break;
+    }
+    case CreditUsageTimeRange.LastYear: {
+      // Last 12 months with monthly granularity (12 data points)
+      for (let i = 11; i >= 0; i--) {
+        const date = new Date(now);
+        date.setMonth(date.getMonth() - i);
+        labels.push(date.toLocaleDateString('en-US', { month: 'short', year: '2-digit' }));
+      }
+      break;
+    }
+    case CreditUsageTimeRange.LastMonth:
+    default: {
+      // Last 30 days with daily granularity (30 data points)
+      for (let i = 29; i >= 0; i--) {
+        const date = new Date(now);
+        date.setDate(date.getDate() - i);
+        labels.push(date.toLocaleDateString('en-US', { month: 'short', day: '2-digit' }));
+      }
+      break;
+    }
+  }
+
+  return labels;
+}
+
+function generateDateKeyForTimeRange(timestamp: Date, timeRange?: CreditUsageTimeRange): string {
+  // For hourly data, we need to match the hour exactly, ignoring minutes
+  // Backend returns data aggregated by hour, so we round to the nearest hour
+  const roundedHour = new Date(timestamp);
+  roundedHour.setMinutes(0, 0, 0); // Round to the start of the hour
+  switch (timeRange) {
+    case CreditUsageTimeRange.LastDay:
+      return roundedHour.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' });
+    case CreditUsageTimeRange.LastYear:
+      return timestamp.toLocaleDateString('en-US', { month: 'short', year: '2-digit' });
+    case CreditUsageTimeRange.LastWeek:
+    case CreditUsageTimeRange.LastMonth:
+    default:
+      return timestamp.toLocaleDateString('en-US', { month: 'short', day: '2-digit' });
+  }
+}
+
+function createChartOptions(theme: StiggTheme, tooltipHandler: ExternalTooltipHandler<'bar'>): ChartOptions<'bar'> {
+  return {
+    responsive: true,
+    maintainAspectRatio: false,
+    interaction: {
+      mode: 'point',
+      intersect: true,
+    },
+    elements: {
+      bar: {
+        borderRadius: 4,
+        borderSkipped: 'bottom',
+      },
+    },
+    plugins: {
+      legend: {
+        display: false,
+      },
+      tooltip: {
+        enabled: false,
+        external: tooltipHandler,
+      },
+      datalabels: {
+        display: false,
+      },
+    },
+    scales: {
+      x: {
+        type: 'category',
+        stacked: true,
+        ticks: {
+          color: getAxisTickColor(theme),
+          font: getAxisTickFont(theme),
+          maxRotation: 45,
+          maxTicksLimit: 15, // Show approximately every other day for 30-day view
+        },
+        grid: {
+          color: getAxisColor(theme),
+          drawOnChartArea: false,
+          drawTicks: false,
+        },
+      },
+      y: {
+        type: 'linear',
+        stacked: true,
+        beginAtZero: true,
+        ticks: {
+          color: getAxisTickColor(theme),
+          font: getAxisTickFont(theme),
+          callback: (value) => numberFormatter(Number(value)),
+        },
+        grid: {
+          color: opacityColor(getAxisColor(theme), 0.5),
+          drawOnChartArea: true,
+          drawTicks: false,
+          borderDash: [5, 5],
+        },
+      },
+    },
+  };
+}
+
+export function computeChartData(
+  creditUsageData: CreditUsageFragment | null,
+  theme: StiggTheme,
+  tooltipHandler: ExternalTooltipHandler<'bar'>,
+  timeRange?: CreditUsageTimeRange,
+): { data: ChartData<'bar'> | null; options: ChartOptions<'bar'> | null } {
+  const labels = generateLabelsForTimeRange(timeRange);
+
+  if (!creditUsageData || !creditUsageData.series || creditUsageData.series.length === 0) {
+    return { data: null, options: null };
+  }
+
+  const datasets = creditUsageData.series
+    .map((series, index) => {
+      const featureName = series.featureName;
+
+      const dataMap = new Map<string, number>();
+      series.points.forEach((point) => {
+        const dateKey = generateDateKeyForTimeRange(new Date(point.timestamp as string), timeRange);
+        // Accumulate values for the same date instead of overwriting
+        const existingValue = dataMap.get(dateKey) || 0;
+        dataMap.set(dateKey, existingValue + point.value);
+      });
+
+      const data = labels.map((label) => dataMap.get(label) || 0);
+
+      // Use original index for colors so they stay consistent with legend order
+      const color = getFeatureColor(index);
+
+      return {
+        label: featureName,
+        data,
+        backgroundColor: opacityColor(color, 0.8),
+        borderColor: color,
+        borderWidth: 1,
+      };
+    })
+    .reverse(); // Reverse so highest usage feature appears at top of stack
+
+  const data: ChartData<'bar'> = {
+    labels,
+    datasets,
+  };
+
+  const options = createChartOptions(theme, tooltipHandler);
+
+  return { data, options };
+}