@spaced-out/ui-design-system 0.1.11 → 0.1.12

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.1.12](https://github.com/spaced-out/ui-design-system/compare/v0.1.11...v0.1.12) (2023-04-12)
+
+
+### Features
+
+* pagination component ([#96](https://github.com/spaced-out/ui-design-system/issues/96)) ([d0bc11e](https://github.com/spaced-out/ui-design-system/commit/d0bc11e650f0eb4882fd35ea5fae0362b6454be5))
+
 ### [0.1.11](https://github.com/spaced-out/ui-design-system/compare/v0.1.10...v0.1.11) (2023-04-11)
 
 

package/lib/components/Pagination/Pagination.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Pagination = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _usePagination = _interopRequireDefault(require("../../hooks/usePagination"));
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _helpers = require("../../utils/helpers");
+var _Dropdown = require("../Dropdown");
+var _Text = require("../Text");
+var _PaginationItem = require("./PaginationItem");
+var _PaginationModule = _interopRequireDefault(require("./Pagination.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const Pagination = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    classNames,
+    style = 'primary',
+    children,
+    currentPage = 1,
+    totalPages = 1,
+    onChange,
+    showFirstButton = style !== 'primary',
+    showLastButton = style !== 'primary',
+    ...restPaginationProps
+  } = props;
+  const {
+    items
+  } = (0, _usePagination.default)({
+    style,
+    showFirstButton,
+    showLastButton,
+    currentPage,
+    totalPages,
+    onChange,
+    ...restPaginationProps
+  });
+  const allPages = (0, _helpers.range)(1, totalPages);
+  const options = style !== 'secondary' ? [] : allPages.map(page => ({
+    key: page.toString(),
+    label: page.toString()
+  }));
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    "data-testid": "Pagination",
+    className: (0, _classify.default)(_PaginationModule.default.wrapper, classNames?.wrapper)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_PaginationModule.default.childrenSlot, classNames?.children)
+  }, children), /*#__PURE__*/React.createElement("div", {
+    className: _PaginationModule.default.paginatorSlots
+  }, style === 'secondary' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Dropdown.Dropdown, {
+    size: "small",
+    classNames: {
+      wrapper: _PaginationModule.default.dropdownWrapper
+    },
+    menu: {
+      options,
+      isFluid: true,
+      classNames: {
+        wrapper: _PaginationModule.default.menuWrapper
+      },
+      selectedKeys: currentPage ? [currentPage.toString()] : []
+    },
+    dropdownInputText: currentPage.toString(),
+    onChange: option => onChange?.(parseInt(option.key))
+  }), !!totalPages && !!currentPage && /*#__PURE__*/React.createElement(_Text.SubTitleExtraSmall, {
+    color: "tertiary",
+    className: _PaginationModule.default.secondaryLabel
+  }, "of ", totalPages, " ", totalPages > 1 ? 'Pages' : 'Page')), /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_PaginationModule.default.paginatorSlot, classNames?.paginator)
+  }, items?.map(item => /*#__PURE__*/React.createElement(_PaginationItem.PaginationItem, _extends({
+    key: item.id
+  }, item))))));
+});
+exports.Pagination = Pagination;

package/lib/components/Pagination/Pagination.js.flow

@@ -0,0 +1,139 @@
+// @flow strict
+
+import * as React from 'react';
+
+import usePagination from '../../hooks/usePagination';
+import classify from '../../utils/classify';
+import {range} from '../../utils/helpers';
+import {Dropdown} from '../Dropdown';
+import {SubTitleExtraSmall} from '../Text';
+
+import {PaginationItem} from './PaginationItem';
+
+import css from './Pagination.module.css';
+
+
+type ClassNames = $ReadOnly<{
+  wrapper?: string,
+  children?: string,
+  paginator?: string,
+}>;
+type MixedEvent = SyntheticEvent<EventTarget> | Event;
+type PaginationItemType =
+  | 'first'
+  | 'previous'
+  | 'page'
+  | 'start-ellipsis'
+  | 'end-ellipsis'
+  | 'last'
+  | 'next';
+
+export type PaginationBaseProps = {
+  currentPage?: number,
+  disabled?: boolean,
+  onChange?: (value?: ?number, event?: ?MixedEvent) => void,
+  totalPages?: number,
+  showFirstButton?: boolean,
+  showLastButton?: boolean,
+  hideNextButton?: boolean,
+  hidePrevButton?: boolean,
+  boundaryCount?: number,
+  siblingCount?: number,
+  style?: 'primary' | 'secondary',
+};
+
+export type PaginationProps = {
+  children?: React.Node,
+  ...PaginationBaseProps,
+  classNames?: ClassNames,
+};
+
+export type PaginationItemProps = {
+  id: string,
+  disabled: boolean,
+  onClick: (event: SyntheticEvent<HTMLElement>) => void,
+  page: ?number,
+  selected: boolean,
+  type: PaginationItemType,
+};
+
+export const Pagination: React$AbstractComponent<
+  PaginationProps,
+  HTMLDivElement,
+> = React.forwardRef<PaginationProps, HTMLDivElement>(
+  (props: PaginationProps, ref) => {
+    const {
+      classNames,
+      style = 'primary',
+      children,
+      currentPage = 1,
+      totalPages = 1,
+      onChange,
+      showFirstButton = style !== 'primary',
+      showLastButton = style !== 'primary',
+      ...restPaginationProps
+    } = props;
+    const {items} = usePagination({
+      style,
+      showFirstButton,
+      showLastButton,
+      currentPage,
+      totalPages,
+      onChange,
+      ...restPaginationProps,
+    });
+
+    const allPages = range(1, totalPages);
+    const options =
+      style !== 'secondary'
+        ? []
+        : allPages.map((page) => ({
+          key: page.toString(),
+          label: page.toString(),
+        }));
+
+    return (
+      <div
+        ref={ref}
+        data-testid="Pagination"
+        className={classify(css.wrapper, classNames?.wrapper)}
+      >
+        <div className={classify(css.childrenSlot, classNames?.children)}>
+          {children}
+        </div>
+        <div className={css.paginatorSlots}>
+          {style === 'secondary' && (
+            <>
+              <Dropdown
+                size="small"
+                classNames={{wrapper: css.dropdownWrapper}}
+                menu={{
+                  options,
+                  isFluid: true,
+                  classNames: {wrapper: css.menuWrapper},
+                  selectedKeys: currentPage ? [currentPage.toString()] : [],
+                }}
+                dropdownInputText={currentPage.toString()}
+                onChange={(option) => onChange?.(parseInt(option.key))}
+              />
+              {!!totalPages && !!currentPage && (
+                <SubTitleExtraSmall
+                  color="tertiary"
+                  className={css.secondaryLabel}
+                >
+                  of {totalPages} {totalPages > 1 ? 'Pages' : 'Page'}
+                </SubTitleExtraSmall>
+              )}
+            </>
+          )}
+
+          <div className={classify(css.paginatorSlot, classNames?.paginator)}>
+            {items?.map((item) => (
+              <PaginationItem key={item.id} {...item} />
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  },
+);

package/lib/components/Pagination/Pagination.module.css

@@ -0,0 +1,73 @@
+@value (colorFillPrimary, colorTextSecondary, colorTextDisabled) from '../../styles/variables/_color.css';
+@value (spaceXXSmall, spaceNone, spaceSmall, spaceXSmall) from '../../styles/variables/_space.css';
+@value (size34, sizeFluid, size40) from '../../styles/variables/_size.css';
+
+.wrapper {
+  display: flex;
+  align-items: center;
+  width: sizeFluid;
+  height: fit-content;
+  justify-content: space-between;
+}
+
+.childrenSlot {
+  display: flex;
+}
+
+.paginatorSlot {
+  display: flex;
+  gap: spaceXXSmall;
+}
+
+.paginatorSlots {
+  display: flex;
+  gap: spaceSmall;
+}
+
+.secondaryLabel {
+  margin-right: spaceXSmall;
+}
+
+.paginatorButton {
+  min-width: size34;
+  padding: spaceNone;
+  color: colorTextSecondary;
+}
+
+.pageNumbers {
+  display: flex;
+  align-items: center;
+  gap: spaceXXSmall;
+}
+
+.separator {
+  display: flex;
+  width: size34;
+  height: size34;
+  align-items: center;
+  justify-content: center;
+}
+
+.paginatorButton.disabled {
+  background-color: initial;
+}
+
+.paginatorButton.selected {
+  pointer-events: none;
+}
+
+.icon {
+  color: colorTextSecondary;
+}
+
+.icon.disabled {
+  color: colorTextDisabled;
+}
+
+.dropdownWrapper {
+  width: calc(size40 * 2);
+}
+
+.menuWrapper {
+  min-width: calc(size40 * 2);
+}

package/lib/components/Pagination/PaginationItem.js

@@ -0,0 +1,126 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PaginationItem = exports.PaginationButton = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Button = require("../Button/Button.js");
+var _Text = require("../Text/Text.js");
+var _PaginationModule = _interopRequireDefault(require("./Pagination.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const PaginationButton = props => {
+  const {
+    disabled,
+    onClick,
+    page,
+    selected,
+    type
+  } = props;
+  const paginationBtnRef = React.useRef(null);
+  React.useEffect(() => {
+    if (disabled || selected) {
+      paginationBtnRef.current?.blur();
+    }
+  }, [disabled, selected]);
+  switch (type) {
+    case 'first':
+      return /*#__PURE__*/React.createElement(_Button.Button, {
+        classNames: {
+          icon: (0, _classify.default)(_PaginationModule.default.icon, {
+            [_PaginationModule.default.disabled]: disabled
+          }),
+          wrapper: (0, _classify.default)(_PaginationModule.default.paginatorButton, {
+            [_PaginationModule.default.disabled]: disabled
+          })
+        },
+        type: selected ? 'secondary' : 'ghost',
+        size: "small",
+        onClick: onClick,
+        disabled: disabled,
+        ref: paginationBtnRef,
+        iconLeftName: "chevrons-left"
+      });
+    case 'previous':
+      return /*#__PURE__*/React.createElement(_Button.Button, {
+        classNames: {
+          icon: (0, _classify.default)(_PaginationModule.default.icon, {
+            [_PaginationModule.default.disabled]: disabled
+          }),
+          wrapper: (0, _classify.default)(_PaginationModule.default.paginatorButton, {
+            [_PaginationModule.default.disabled]: disabled
+          })
+        },
+        type: selected ? 'secondary' : 'ghost',
+        size: "small",
+        onClick: onClick,
+        disabled: disabled,
+        ref: paginationBtnRef,
+        iconLeftName: "chevron-left"
+      });
+    case 'page':
+      return /*#__PURE__*/React.createElement(_Button.Button, {
+        classNames: {
+          wrapper: (0, _classify.default)(_PaginationModule.default.paginatorButton, {
+            [_PaginationModule.default.selected]: selected
+          })
+        },
+        type: selected ? 'secondary' : 'ghost',
+        size: "small",
+        onClick: onClick,
+        disabled: disabled,
+        ref: paginationBtnRef,
+        tabIndex: selected ? -1 : 0
+      }, page);
+    case 'start-ellipsis':
+    case 'end-ellipsis':
+      return /*#__PURE__*/React.createElement("div", {
+        className: (0, _classify.default)(_PaginationModule.default.separator)
+      }, /*#__PURE__*/React.createElement(_Text.ButtonTextSmall, {
+        color: "disabled"
+      }, "..."));
+    case 'next':
+      return /*#__PURE__*/React.createElement(_Button.Button, {
+        classNames: {
+          icon: (0, _classify.default)(_PaginationModule.default.icon, {
+            [_PaginationModule.default.disabled]: disabled
+          }),
+          wrapper: (0, _classify.default)(_PaginationModule.default.paginatorButton, {
+            [_PaginationModule.default.disabled]: disabled
+          })
+        },
+        type: selected ? 'secondary' : 'ghost',
+        size: "small",
+        onClick: onClick,
+        disabled: disabled,
+        ref: paginationBtnRef,
+        iconLeftName: "chevron-right"
+      });
+    case 'last':
+      return /*#__PURE__*/React.createElement(_Button.Button, {
+        classNames: {
+          icon: (0, _classify.default)(_PaginationModule.default.icon, {
+            [_PaginationModule.default.disabled]: disabled
+          }),
+          wrapper: (0, _classify.default)(_PaginationModule.default.paginatorButton, {
+            [_PaginationModule.default.disabled]: disabled
+          })
+        },
+        type: selected ? 'secondary' : 'ghost',
+        size: "small",
+        onClick: onClick,
+        disabled: disabled,
+        ref: paginationBtnRef,
+        iconLeftName: "chevrons-right"
+      });
+    default:
+      break;
+  }
+};
+exports.PaginationButton = PaginationButton;
+const PaginationItem = props => /*#__PURE__*/React.createElement(PaginationButton, props);
+exports.PaginationItem = PaginationItem;

package/lib/components/Pagination/PaginationItem.js.flow

@@ -0,0 +1,116 @@
+// @flow strict
+
+import * as React from 'react';
+
+import classify from '../../utils/classify';
+import {Button} from '../Button/Button.js';
+import {ButtonTextSmall} from '../Text/Text.js';
+
+import type {PaginationItemProps} from './Pagination.js';
+
+import css from './Pagination.module.css';
+
+
+export const PaginationButton = (props: PaginationItemProps): React.Node => {
+  const {disabled, onClick, page, selected, type} = props;
+  const paginationBtnRef = React.useRef(null);
+
+  React.useEffect(() => {
+    if (disabled || selected) {
+      paginationBtnRef.current?.blur();
+    }
+  }, [disabled, selected]);
+
+  switch (type) {
+  case 'first':
+    return (
+      <Button
+        classNames={{
+          icon: classify(css.icon, {[css.disabled]: disabled}),
+          wrapper: classify(css.paginatorButton, {[css.disabled]: disabled}),
+        }}
+        type={selected ? 'secondary' : 'ghost'}
+        size="small"
+        onClick={onClick}
+        disabled={disabled}
+        ref={paginationBtnRef}
+        iconLeftName="chevrons-left"
+      ></Button>
+    );
+  case 'previous':
+    return (
+      <Button
+        classNames={{
+          icon: classify(css.icon, {[css.disabled]: disabled}),
+          wrapper: classify(css.paginatorButton, {[css.disabled]: disabled}),
+        }}
+        type={selected ? 'secondary' : 'ghost'}
+        size="small"
+        onClick={onClick}
+        disabled={disabled}
+        ref={paginationBtnRef}
+        iconLeftName="chevron-left"
+      ></Button>
+    );
+  case 'page':
+    return (
+      <Button
+        classNames={{
+          wrapper: classify(css.paginatorButton, {[css.selected]: selected}),
+        }}
+        type={selected ? 'secondary' : 'ghost'}
+        size="small"
+        onClick={onClick}
+        disabled={disabled}
+        ref={paginationBtnRef}
+        tabIndex={selected ? -1 : 0}
+      >
+        {page}
+      </Button>
+    );
+  case 'start-ellipsis':
+  case 'end-ellipsis':
+    return (
+      <div className={classify(css.separator)}>
+        <ButtonTextSmall color="disabled">...</ButtonTextSmall>
+      </div>
+    );
+  case 'next':
+    return (
+      <Button
+        classNames={{
+          icon: classify(css.icon, {[css.disabled]: disabled}),
+          wrapper: classify(css.paginatorButton, {[css.disabled]: disabled}),
+        }}
+        type={selected ? 'secondary' : 'ghost'}
+        size="small"
+        onClick={onClick}
+        disabled={disabled}
+        ref={paginationBtnRef}
+        iconLeftName="chevron-right"
+      ></Button>
+    );
+  case 'last':
+    return (
+      <Button
+        classNames={{
+          icon: classify(css.icon, {[css.disabled]: disabled}),
+          wrapper: classify(css.paginatorButton, {[css.disabled]: disabled}),
+        }}
+        type={selected ? 'secondary' : 'ghost'}
+        size="small"
+        onClick={onClick}
+        disabled={disabled}
+        ref={paginationBtnRef}
+        iconLeftName="chevrons-right"
+      ></Button>
+    );
+
+  default:
+    break;
+  }
+};
+
+export const PaginationItem = (props: PaginationItemProps): React.Node => (
+  <PaginationButton {...props} />
+);

package/lib/components/Pagination/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Pagination = require("./Pagination");
+Object.keys(_Pagination).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Pagination[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Pagination[key];
+    }
+  });
+});

package/lib/components/Pagination/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './Pagination';

package/lib/hooks/index.js

@@ -14,6 +14,17 @@ Object.keys(_useMountTransition).forEach(function (key) {
     }
   });
 });
+var _usePagination = require("./usePagination");
+Object.keys(_usePagination).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _usePagination[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _usePagination[key];
+    }
+  });
+});
 var _useToastPortal = require("./useToastPortal");
 Object.keys(_useToastPortal).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/hooks/index.js.flow

@@ -1,4 +1,5 @@
 // @flow strict
 
 export * from './useMountTransition';
+export * from './usePagination';
 export * from './useToastPortal';

package/lib/hooks/usePagination.js

@@ -0,0 +1,102 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = usePagination;
+var _helpers = require("../utils/helpers");
+
+function usePagination(props) {
+  const {
+    boundaryCount = 1,
+    totalPages = 1,
+    disabled = false,
+    hideNextButton = false,
+    hidePrevButton = false,
+    onChange: handleChange,
+    currentPage = 1,
+    showFirstButton = false,
+    showLastButton = false,
+    siblingCount = 1,
+    style = 'primary'
+  } = props;
+  let itemList = [];
+  const handleClick = (event, value) => {
+    if (handleChange) {
+      handleChange(value, event);
+    }
+  };
+  const startPages = (0, _helpers.range)(1, Math.min(boundaryCount, totalPages));
+  const endPages = (0, _helpers.range)(Math.max(totalPages - boundaryCount + 1, boundaryCount + 1), totalPages);
+  const siblingsStart = Math.max(Math.min(
+  // Natural start
+  currentPage - siblingCount,
+  // Lower boundary when currentPage is high
+  totalPages - boundaryCount - siblingCount * 2 - 1),
+  // Greater than startPages
+  boundaryCount + 2);
+  const siblingsEnd = Math.min(Math.max(
+  // Natural end
+  currentPage + siblingCount,
+  // Upper boundary when currentPage is low
+  boundaryCount + siblingCount * 2 + 2),
+  // Less than endPages
+  endPages.length > 0 ? endPages[0] - 2 : totalPages - 1);
+
+  // Basic list of items to render
+  // For primary style: itemList = ['first', 'previous', 1, 'start-ellipsis', 4, 5, 6, 'end-ellipsis', 10, 'next', 'last']
+  // For secondary style: itemList = ['first', 'previous', 'next', 'last']
+  if (style === 'primary') {
+    itemList = [...(showFirstButton ? ['first'] : []), ...(hidePrevButton ? [] : ['previous']), ...startPages,
+    // Start ellipsis
+    // eslint-disable-next-line no-nested-ternary
+    ...(siblingsStart > boundaryCount + 2 ? ['start-ellipsis'] : boundaryCount + 1 < totalPages - boundaryCount ? [boundaryCount + 1] : []),
+    // Sibling pages
+    ...(0, _helpers.range)(siblingsStart, siblingsEnd),
+    // End ellipsis
+    // eslint-disable-next-line no-nested-ternary
+    ...(siblingsEnd < totalPages - boundaryCount - 1 ? ['end-ellipsis'] : totalPages - boundaryCount > boundaryCount ? [totalPages - boundaryCount] : []), ...endPages, ...(hideNextButton ? [] : ['next']), ...(showLastButton ? ['last'] : [])];
+  } else if (style === 'secondary') {
+    itemList = [...(showFirstButton ? ['first'] : []), ...(hidePrevButton ? [] : ['previous']), ...(hideNextButton ? [] : ['next']), ...(showLastButton ? ['last'] : [])];
+  }
+
+  // Map the button type to its page number
+  const buttonPage = type => {
+    switch (type) {
+      case 'first':
+        return 1;
+      case 'previous':
+        return currentPage - 1;
+      case 'next':
+        return currentPage + 1;
+      case 'last':
+        return totalPages;
+      default:
+        return null;
+    }
+  };
+
+  // Convert the basic item list to contain PaginationItem props objects
+  const items = itemList.map((item, idx) => typeof item === 'number' ? {
+    id: idx.toString(),
+    onClick: event => {
+      handleClick(event, item);
+    },
+    type: 'page',
+    page: item,
+    selected: item === currentPage,
+    disabled
+  } : {
+    id: idx.toString(),
+    onClick: event => {
+      handleClick(event, buttonPage(item));
+    },
+    type: item,
+    page: buttonPage(item),
+    selected: false,
+    disabled: disabled || item.indexOf('ellipsis') === -1 && (item === 'next' || item === 'last' ? currentPage >= totalPages : currentPage <= 1)
+  });
+  return {
+    items
+  };
+}

package/lib/hooks/usePagination.js.flow

@@ -0,0 +1,153 @@
+// @flow strict
+
+import type {
+  PaginationBaseProps,
+  PaginationItemProps,
+} from '../components/Pagination/Pagination.js';
+import {range} from '../utils/helpers';
+
+
+export default function usePagination(props: PaginationBaseProps): {
+  items: ?(PaginationItemProps[]),
+} {
+  const {
+    boundaryCount = 1,
+    totalPages = 1,
+    disabled = false,
+    hideNextButton = false,
+    hidePrevButton = false,
+    onChange: handleChange,
+    currentPage = 1,
+    showFirstButton = false,
+    showLastButton = false,
+    siblingCount = 1,
+    style = 'primary',
+  } = props;
+
+  let itemList = [];
+
+  const handleClick = (event, value) => {
+    if (handleChange) {
+      handleChange(value, event);
+    }
+  };
+
+  const startPages = range(1, Math.min(boundaryCount, totalPages));
+  const endPages = range(
+    Math.max(totalPages - boundaryCount + 1, boundaryCount + 1),
+    totalPages,
+  );
+
+  const siblingsStart = Math.max(
+    Math.min(
+      // Natural start
+      currentPage - siblingCount,
+      // Lower boundary when currentPage is high
+      totalPages - boundaryCount - siblingCount * 2 - 1,
+    ),
+    // Greater than startPages
+    boundaryCount + 2,
+  );
+
+  const siblingsEnd = Math.min(
+    Math.max(
+      // Natural end
+      currentPage + siblingCount,
+      // Upper boundary when currentPage is low
+      boundaryCount + siblingCount * 2 + 2,
+    ),
+    // Less than endPages
+    endPages.length > 0 ? endPages[0] - 2 : totalPages - 1,
+  );
+
+  // Basic list of items to render
+  // For primary style: itemList = ['first', 'previous', 1, 'start-ellipsis', 4, 5, 6, 'end-ellipsis', 10, 'next', 'last']
+  // For secondary style: itemList = ['first', 'previous', 'next', 'last']
+  if (style === 'primary') {
+    itemList = [
+      ...(showFirstButton ? ['first'] : []),
+      ...(hidePrevButton ? [] : ['previous']),
+      ...startPages,
+
+      // Start ellipsis
+      // eslint-disable-next-line no-nested-ternary
+      ...(siblingsStart > boundaryCount + 2
+        ? ['start-ellipsis']
+        : boundaryCount + 1 < totalPages - boundaryCount
+          ? [boundaryCount + 1]
+          : []),
+
+      // Sibling pages
+      ...range(siblingsStart, siblingsEnd),
+
+      // End ellipsis
+      // eslint-disable-next-line no-nested-ternary
+      ...(siblingsEnd < totalPages - boundaryCount - 1
+        ? ['end-ellipsis']
+        : totalPages - boundaryCount > boundaryCount
+          ? [totalPages - boundaryCount]
+          : []),
+
+      ...endPages,
+      ...(hideNextButton ? [] : ['next']),
+      ...(showLastButton ? ['last'] : []),
+    ];
+  } else if (style === 'secondary') {
+    itemList = [
+      ...(showFirstButton ? ['first'] : []),
+      ...(hidePrevButton ? [] : ['previous']),
+      ...(hideNextButton ? [] : ['next']),
+      ...(showLastButton ? ['last'] : []),
+    ];
+  }
+
+  // Map the button type to its page number
+  const buttonPage = (type) => {
+    switch (type) {
+    case 'first':
+      return 1;
+    case 'previous':
+      return currentPage - 1;
+    case 'next':
+      return currentPage + 1;
+    case 'last':
+      return totalPages;
+    default:
+      return null;
+    }
+  };
+
+  // Convert the basic item list to contain PaginationItem props objects
+  const items = itemList.map((item, idx) =>
+    typeof item === 'number'
+      ? {
+        id: idx.toString(),
+        onClick: (event) => {
+          handleClick(event, item);
+        },
+        type: 'page',
+        page: item,
+        selected: item === currentPage,
+        disabled,
+      }
+      : {
+        id: idx.toString(),
+        onClick: (event) => {
+          handleClick(event, buttonPage(item));
+        },
+        type: item,
+        page: buttonPage(item),
+        selected: false,
+        disabled:
+            disabled ||
+            (item.indexOf('ellipsis') === -1 &&
+              (item === 'next' || item === 'last'
+                ? currentPage >= totalPages
+                : currentPage <= 1)),
+      },
+  );
+
+  return {
+    items,
+  };
+}

package/lib/utils/helpers.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.uuid = void 0;
+exports.uuid = exports.range = void 0;
 
 const uuid = () => {
   let dt = new Date().getTime();
@@ -13,4 +13,11 @@ const uuid = () => {
     return (c === 'x' ? r : r & 0x3 | 0x8).toString(16);
   });
 };
-exports.uuid = uuid;
+exports.uuid = uuid;
+const range = (start, end) => {
+  const length = end - start + 1;
+  return Array.from({
+    length
+  }, (_, i) => start + i);
+};
+exports.range = range;

package/lib/utils/helpers.js.flow

@@ -9,3 +9,8 @@ export const uuid = (): string => {
     return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);
   });
 };
+
+export const range = (start: number, end: number): Array<number> => {
+  const length = end - start + 1;
+  return Array.from({length}, (_, i) => start + i);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {