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

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

@@ -1,11 +1,21 @@
 import styled from '@utils/style';
-import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';
+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;
@@ -32,6 +42,10 @@ const StyledTable = styled(Table)`
   width: 100%;
 `;
 
+const StyledDivider = styled(Divider)`
+  border-color: ${({ theme }) => theme.stigg.palette.outlinedBorder};
+`;
+
 export const StyledTableCell = styled(TableCell)<{
   $alignment?: TableAlignment;
   $width?: PixelWidth;
@@ -85,6 +99,10 @@ export const CellContent = styled.div<{ $alignment?: TableAlignment }>`
   width: 100%;
 `;
 
+const StyledTablePagination = styled(TablePagination)`
+  color: ${({ theme }) => theme.stigg.palette.text.secondary};
+`;
+
 interface TableHeaderProps<T> {
   visibleHeadCells: Array<HeadCell<T>>;
 }
@@ -119,6 +137,10 @@ export function GenericTable<T>({
   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);
@@ -130,25 +152,47 @@ export function GenericTable<T>({
       ) : !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}
+        <>
+          <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)}`
+                  }`
+                }
               />
-            )}
-          </TableBody>
-        </StyledTable>
+            </>
+          )}
+        </>
       )}
     </StyledTableContainer>
   );

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

@@ -27,4 +27,8 @@ export interface GenericTableProps<T> {
   className?: string;
   skeletonRows?: number;
   hideLastRowBorder?: boolean;
+  pageSize?: number;
+  pageNum?: number;
+  totalCount?: number;
+  onPageChange?: (event: any, nextPage: number) => void;
 }

package/src/components/credits/grants/CreditGrants.tsx

@@ -7,6 +7,11 @@ import { useCreditGrants } from '../hooks/useCreditGrants';
 import { CREDIT_GRANTS_DEFAULT_LOCALIZATION } from '../localization';
 import type { CreditGrantsLocalization } from './types';
 import { CreditGrantsTable } from './CreditGrantsTable';
+import { usePagination } from '../../hooks/usePagination';
+import { CursorPaging } from '@stigg/js-client-sdk';
+import { useState } from 'react';
+
+const DEFAULT_PAGE_SIZE = 10;
 
 const CreditGrantsContainer = styled.div`
   display: flex;
@@ -25,7 +30,12 @@ export type CreditGrantsProps = GetCreditGrantsParams & {
   decimalPlaces?: number | null;
 };
 
-export function CreditGrants({ currencyId, localization: customLocalization, decimalPlaces }: CreditGrantsProps) {
+export function CreditGrants({
+  currencyId,
+  localization: customLocalization,
+  decimalPlaces,
+  pageSize = DEFAULT_PAGE_SIZE,
+}: CreditGrantsProps) {
   const stiggContext = useStiggContext({ optional: true });
   const stigg = stiggContext?.stigg;
   const theme = stiggContext?.theme;
@@ -35,10 +45,16 @@ export function CreditGrants({ currencyId, localization: customLocalization, dec
     ...customLocalization,
   };
 
-  const { creditGrants, isLoading, error } = useCreditGrants({
+  const [cursor, setCursor] = useState<CursorPaging>({ first: pageSize });
+
+  const { creditGrants, isLoading, error, paging, totalCount } = useCreditGrants({
     currencyId,
+    pageSize,
+    paging: cursor,
   });
 
+  const { pageNumber, pageChangeFunc } = usePagination(paging, setCursor, pageSize);
+
   return (
     <SdkThemeProvider componentTheme={theme}>
       <CreditGrantsContainer className="stigg-credit-grants-container">
@@ -49,6 +65,10 @@ export function CreditGrants({ currencyId, localization: customLocalization, dec
             error={error}
             localization={localization}
             decimalPlaces={decimalPlaces}
+            pageSize={pageSize}
+            pageNum={pageNumber}
+            totalCount={totalCount}
+            onPageChange={pageChangeFunc}
           />
         </CreditGrantsCard>
         <PoweredByStigg

package/src/components/credits/grants/CreditGrantsTable.tsx

@@ -13,6 +13,10 @@ interface CreditGrantsTableProps {
   error: Error | null;
   localization: CreditGrantsLocalization;
   decimalPlaces?: number | null;
+  pageSize?: number;
+  pageNum?: number;
+  totalCount?: number;
+  onPageChange?: (event: any, nextPage: number) => void;
 }
 
 // temporary type until status exists on the credit grant
@@ -26,6 +30,10 @@ export function CreditGrantsTable({
   error,
   localization,
   decimalPlaces,
+  pageSize,
+  pageNum,
+  totalCount,
+  onPageChange,
 }: CreditGrantsTableProps) {
   const grantsWithStatus: CreditGrantWithStatus[] = creditGrants.map((grant) => ({
     ...grant,
@@ -95,7 +103,11 @@ export function CreditGrantsTable({
       loadingMessage={localization.loadingState}
       errorMessage={localization.errorState}
       className="stigg-credit-grants-table"
-      skeletonRows={3}
+      skeletonRows={grantsWithStatus?.length || 3}
+      pageNum={pageNum}
+      pageSize={pageSize}
+      totalCount={totalCount}
+      onPageChange={onPageChange}
     />
   );
 }

package/src/components/credits/grants/types.ts

@@ -1,4 +1,4 @@
-import { CreditGrantFragment } from '@stigg/js-client-sdk';
+import { CreditGrantFragment, CursorPaging } from '@stigg/js-client-sdk';
 
 export type CreditGrant = Pick<
   CreditGrantFragment,
@@ -22,6 +22,8 @@ export enum CreditGrantStatus {
 
 export interface GetCreditGrantsParams {
   currencyId?: string;
+  pageSize?: number;
+  paging?: CursorPaging;
 }
 
 // TODO: make sure all localization keys are used in the component

package/src/components/credits/grants/utils.ts

@@ -1,6 +1,6 @@
 import { StatusChipVariant } from '@/theme/types';
 import { CreditGrantStatus } from './types';
-import { CreditGrantType } from '@stigg/js-client-sdk';
+import { CreditGrantType } from '../../..';
 
 export const mapCreditGrantStatusToVariant = (status: CreditGrantStatus): StatusChipVariant => {
   switch (status) {

package/src/components/credits/hooks/useCreditGrants.ts

@@ -1,4 +1,5 @@
 import { useMemo, useCallback } from 'react';
+import { PageInfoFragment } from '@stigg/js-client-sdk';
 import { useStiggContext } from '../../../hooks/useStiggContext';
 import { useFetch } from '../../../hooks/useFetch';
 import { GetCreditGrantsParams } from '../grants/types';
@@ -8,6 +9,8 @@ export function useCreditGrants(params: GetCreditGrantsParams): {
   creditGrants: CreditGrant[];
   isLoading: boolean;
   error: Error | null;
+  paging?: PageInfoFragment | null;
+  totalCount?: number;
 } {
   const stiggContext = useStiggContext();
   const stigg = stiggContext?.stigg;
@@ -19,19 +22,21 @@ export function useCreditGrants(params: GetCreditGrantsParams): {
     }
 
     try {
-      return stigg.getCreditGrants({ currencyId: params.currencyId });
+      return stigg.getCreditGrants({ currencyId: params.currencyId, paging: params.paging });
     } catch (error) {
       console.error('Error fetching credit grants:', error);
       throw error;
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [stigg, params.currencyId, updatedAt]);
+  }, [stigg, params.currencyId, params.paging, updatedAt]);
 
   const { data, error, isLoading } = useFetch({ func });
 
   return useMemo(
     () => ({
       creditGrants: data?.data || [],
+      paging: data?.pageInfo,
+      totalCount: data?.totalCount,
       isLoading,
       error,
     }),

package/src/components/hooks/usePagination.ts

@@ -0,0 +1,33 @@
+import { useState } from 'react';
+import { CursorPaging, PageInfoFragment } from '@stigg/js-client-sdk';
+
+export const usePagination = (
+  pageInfo: PageInfoFragment | undefined | null,
+  setCursor: (paging: CursorPaging) => void,
+  pageSize: number,
+) => {
+  const [lastVisitedPage, setLastVisitedPage] = useState(0);
+  const [pageNumber, setPageNumber] = useState(0);
+
+  const pageChangeFunc = (_: any, nextPage: number) => {
+    const newCursor: CursorPaging =
+      nextPage > pageNumber
+        ? {
+            after: pageInfo?.endCursor as string,
+            first: pageSize,
+          }
+        : {
+            before: pageInfo?.startCursor as string,
+            last: pageSize,
+          };
+    setCursor(newCursor);
+    setLastVisitedPage(pageNumber);
+    setPageNumber(nextPage);
+  };
+
+  return {
+    pageNumber,
+    lastVisitedPage,
+    pageChangeFunc,
+  };
+};

package/src/stories/CreditGrants.stories.tsx

@@ -52,6 +52,10 @@ const meta = {
       control: 'number',
       description: 'Decimal places for formatting (optional)',
     },
+    pageSize: {
+      control: 'number',
+      description: 'Page size for pagination (optional)',
+    },
   },
   decorators: [
     (Story, { args }) => (