[CI-3812] Expose Components, Rearrange types

src/components/CioPlp/CioPlp.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
-import { CioPlpProps, IncludeRenderProps, PlpContextValue } from '../../types';
+import { IncludeRenderProps, PlpContextValue, CioPlpProviderProps } from '../../types';
 import CioPlpProvider from './CioPlpProvider';
 import CioPlpGrid from '../CioPlpGrid';
 
+export type CioPlpProps = CioPlpProviderProps;
+
 // Wrapper component for CioPlpProvider with default Markup
 export default function CioPlp(props: IncludeRenderProps<CioPlpProps, PlpContextValue>) {
   const { children, initialResponse, ...rest } = props;

src/components/CioPlp/index.ts

@@ -1,4 +1,5 @@
 import CioPlp from './CioPlp';
 
 export { default as CioPlpProvider } from './CioPlpProvider';
+export * from './CioPlp';
 export default CioPlp;

src/components/Filters/Filters.tsx

@@ -11,7 +11,7 @@ export type FiltersProps = UseFilterProps & {
    */
   initialNumOptions?: number;
 };
-type FiltersWithRenderProps = IncludeRenderProps<FiltersProps, UseFilterReturn>;
+export type FiltersWithRenderProps = IncludeRenderProps<FiltersProps, UseFilterReturn>;
 
 export default function Filters(props: FiltersWithRenderProps) {
   const { children, initialNumOptions, ...useFiltersProps } = props;

src/components/Pagination/Pagination.tsx

@@ -1,9 +1,10 @@
 /* eslint-disable react/no-array-index-key */
 import React, { useEffect, useRef, useState } from 'react';
-import { IncludeRenderProps, PaginationObject, UsePaginationProps } from '../../types';
-import usePagination from '../../hooks/usePagination';
+import { IncludeRenderProps } from '../../types';
+import usePagination, { UsePaginationProps, UsePaginationReturn } from '../../hooks/usePagination';
 
-export type PaginationWithRenderProps = IncludeRenderProps<UsePaginationProps, PaginationObject>;
+export type PaginationProps = UsePaginationProps;
+export type PaginationWithRenderProps = IncludeRenderProps<PaginationProps, UsePaginationReturn>;
 
 export default function Pagination(props: PaginationWithRenderProps) {
   const { totalNumResults, resultsPerPage, windowSize = 5, children } = props;

src/hooks/useCioPlp.ts

@@ -1,10 +1,10 @@
 import { useEffect, useState } from 'react';
-import { PlpContextValue, PlpFacet, PlpSortOption, UsePaginationProps } from '../types';
+import { PlpContextValue, PlpFacet, PlpSortOption } from '../types';
 import { useCioPlpContext } from './useCioPlpContext';
 import useSearchResults, { UseSearchResultsProps } from './useSearchResults';
 import useFilter, { UseFilterProps } from './useFilter';
 import useSort, { UseSortProps } from './useSort';
-import usePagination from './usePagination';
+import usePagination, { UsePaginationProps } from './usePagination';
 import { isPlpSearchDataResults } from '../utils';
 
 export interface UseCioPlpHook extends PlpContextValue {}

src/hooks/usePagination.ts

@@ -1,7 +1,48 @@
 import { useEffect, useMemo, useState } from 'react';
-import { UsePagination } from '../types';
 import useRequestConfigs from './useRequestConfigs';
 
+export interface UsePaginationProps {
+  /**
+   * Total number of results returned by the API response
+   */
+  totalNumResults: number;
+  /**
+   * Number of results returned per page
+   */
+  resultsPerPage?: number;
+  /**
+   * Number of pages to display in the pagination window
+   */
+  windowSize?: number;
+}
+
+export interface UsePaginationReturn {
+  // Represents the current page number in the pagination
+  // It's typically used to highlight the current page in the UI and to determine which set of data to fetch or display
+  currentPage: number | undefined;
+
+  // Allows you to navigate to a specific page and takes a page number as an argument
+  goToPage: (page: number) => void;
+
+  // Navigate to the next page. Used to implement "Next" button in a pagination control.
+  nextPage: () => void;
+
+  // Navigate to the previous page. Used to implement "Previous" button in a pagination control.
+  prevPage: () => void;
+
+  // The total number of pages available in the pagination object
+  totalPages: number;
+
+  /**
+   *  Returns an array of numbers [1,2,3,4,-1,10]
+   *  1,10 are first and last page
+   *  -1 indicates a break (e.g., to show "...")
+   *  [1, 2, 3, 4, ..., 10] */
+  pages: number[];
+}
+
+export type UsePagination = (props: UsePaginationProps) => UsePaginationReturn;
+
 const usePagination: UsePagination = ({
   totalNumResults,
   resultsPerPage: resultsPerPageFromProps,

src/index.ts

@@ -1,4 +1,5 @@
 // Hooks
+export { useCioPlpContext } from './hooks/useCioPlpContext';
 export { default as useCioPlp } from './hooks/useCioPlp';
 export { default as useSearchResults } from './hooks/useSearchResults';
 export { default as useBrowseResults } from './hooks/useBrowseResults';
@@ -7,9 +8,21 @@ export { default as useSort } from './hooks/useSort';
 export * from './hooks/callbacks';
 
 // Components
-export { default as CioPlp } from './components/CioPlp';
-export { default as ProductCard, ProductCardProps } from './components/ProductCard';
+export { default as CioPlp, CioPlpProvider } from './components/CioPlp';
+export { default as CioPlpGrid, ZeroResults } from './components/CioPlpGrid';
+export { default as ProductCard } from './components/ProductCard';
 export { default as Sort } from './components/Sort';
+export { default as Pagination } from './components/Pagination';
+export { default as Filters } from './components/Filters';
+export { default as ProductSwatch } from './components/ProductSwatch';
+export { default as Spinner } from './components/Spinner';
 
-export { useCioPlpContext } from './hooks/useCioPlpContext';
+// Types
+export type { CioPlpProps } from './components/CioPlp';
+export type { CioPlpGridProps, CioPlpGridWithRenderProps } from './components/CioPlpGrid';
+export type { ProductCardProps } from './components/ProductCard';
+export type { ProductSwatchProps } from './components/ProductSwatch';
+export type { SortProps, SortWithRenderProps } from './components/Sort';
+export type { PaginationProps, PaginationWithRenderProps } from './components/Pagination';
+export type { FiltersProps, FiltersWithRenderProps } from './components/Filters';
 export * from './types';

src/types.ts

@@ -189,8 +189,6 @@ export interface SwatchItem {
   variationId?: string;
 }
 
-export type PaginationProps = PaginationObject;
-
 export interface PlpBrowseData {
   resultId: string;
   request: BrowseRequestType;
@@ -211,56 +209,12 @@ export interface CioPlpProviderProps {
   staticRequestConfigs?: Partial<RequestConfigs>;
 }
 
-export type CioPlpProps = CioPlpProviderProps;
-
 export type UseSortReturn = {
   sortOptions: PlpSortOption[];
   selectedSort: PlpSortOption | null;
   changeSelectedSort: (sortOption: PlpSortOption) => void;
 };
 
-export type UsePaginationProps = {
-  /**
-   * Total number of results returned by the API response
-   */
-  totalNumResults: number;
-  /**
-   * Number of results returned per page
-   */
-  resultsPerPage?: number;
-  /**
-   * Number of pages to display in the pagination window
-   */
-  windowSize?: number;
-};
-
-export type UsePagination = (props: UsePaginationProps) => PaginationObject;
-
-export interface PaginationObject {
-  // Represents the current page number in the pagination
-  // It's typically used to highlight the current page in the UI and to determine which set of data to fetch or display
-  currentPage: number | undefined;
-
-  // Allows you to navigate to a specific page and takes a page number as an argument
-  goToPage: (page: number) => void;
-
-  // Navigate to the next page. Used to implement "Next" button in a pagination control.
-  nextPage: () => void;
-
-  // Navigate to the previous page. Used to implement "Previous" button in a pagination control.
-  prevPage: () => void;
-
-  // The total number of pages available in the pagination object
-  totalPages: number;
-
-  /**
-   *  Returns an array of numbers [1,2,3,4,-1,10]
-   *  1,10 are first and last page
-   *  -1 indicates a break (e.g., to show "...")
-   *  [1, 2, 3, 4, ..., 10] */
-  pages: number[];
-}
-
 export interface ProductSwatchObject {
   swatchList: SwatchItem[] | undefined;
   selectedVariation: SwatchItem | undefined;