Pagination TS conversion (#2174)

Co-authored-by: Lee White <[email protected]>

Author: zamoore

.changeset/hungry-cycles-drum.md

@@ -0,0 +1,5 @@
+---
+"@hashicorp/design-system-components": minor
+---
+
+`Hds::Pagination` - Converted component to Typescript

packages/components/src/components.ts

@@ -86,6 +86,13 @@ import HdsModalBodyComponent from './components/hds/modal/body.ts';
 import HdsModalFooter from './components/hds/modal/footer.ts';
 import HdsModalHeader from './components/hds/modal/header.ts';
 import HdsPageHeader from './components/hds/page-header/index.ts';
+import HdsPaginationCompactComponent from './components/hds/pagination/compact/index.ts';
+import HdsPaginationControlInfoComponent from './components/hds/pagination/info/index.ts';
+import HdsPaginationControlArrowComponent from './components/hds/pagination/nav/arrow.ts';
+import HdsPaginationControlEllipsisComponent from './components/hds/pagination/nav/ellipsis.ts';
+import HdsPaginationControlNumberComponent from './components/hds/pagination/nav/number.ts';
+import HdsPaginationNumberedComponent from './components/hds/pagination/numbered/index.ts';
+import HdsPaginationSizeSelectorComponent from './components/hds/pagination/size-selector/index.ts';
 import HdsPopoverPrimitive from './components/hds/popover-primitive/index.ts';
 import HdsReveal from './components/hds/reveal/index.ts';
 import HdsRichTooltip from './components/hds/rich-tooltip/index.ts';
@@ -201,6 +208,13 @@ export {
   HdsModalFooter,
   HdsModalHeader,
   HdsPageHeader,
+  HdsPaginationCompactComponent,
+  HdsPaginationControlInfoComponent,
+  HdsPaginationControlArrowComponent,
+  HdsPaginationControlEllipsisComponent,
+  HdsPaginationControlNumberComponent,
+  HdsPaginationNumberedComponent,
+  HdsPaginationSizeSelectorComponent,
   HdsPopoverPrimitive,
   HdsReveal,
   HdsRichTooltip,

packages/components/src/components/hds/pagination/compact/index.hbs

@@ -1,4 +1,3 @@
-{{! @glint-nocheck: not typesafe yet }}
 {{!
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0

packages/components/src/components/hds/pagination/compact/index.js renamed to packages/components/src/components/hds/pagination/compact/index.ts

@@ -7,12 +7,47 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { assert } from '@ember/debug';
+import { HdsPaginationDirectionValues } from '../types.ts';
+
+import type {
+  HdsPaginationRoutingProps,
+  HdsPaginationDirections,
+} from '../types';
+import type { HdsInteractiveSignature } from '../../interactive';
+
+type HdsInteractiveQuery = HdsInteractiveSignature['Args']['query'];
+
+type HdsPaginationCompactRoutingQueryProps = HdsPaginationRoutingProps & {
+  queryNext?: HdsInteractiveQuery;
+  queryPrev?: HdsInteractiveQuery;
+};
+
+interface HdsPaginationCompactArgs {
+  ariaLabel?: string;
+  showLabels?: boolean;
+  isDisabledPrev?: boolean;
+  isDisabledNext?: boolean;
+  showSizeSelector?: boolean;
+  sizeSelectorLabel?: string;
+  pageSizes?: number[];
+  currentPageSize?: number;
+  queryFunction?: (
+    page: HdsPaginationDirections,
+    pageSize?: number
+  ) => HdsInteractiveQuery;
+  onPageChange?: (page: HdsPaginationDirections) => void;
+  onPageSizeChange?: (pageSize: number) => void;
+}
+
+interface HdsPaginationCompactSignature {
+  Args: HdsPaginationCompactArgs & HdsPaginationRoutingProps;
+  Element: HTMLDivElement;
+}
 
 // for context about the decision to use these values, see:
 // https://hashicorp.slack.com/archives/C03A0N1QK8S/p1673546329082759
 export const DEFAULT_PAGE_SIZES = [10, 30, 50];
-
-export default class HdsPaginationCompactIndexComponent extends Component {
+export default class HdsPaginationCompactComponent extends Component<HdsPaginationCompactSignature> {
   // This private variable is used to differentiate between
   // "uncontrolled" component (where the state is handled internally) and
   // "controlled" component (where the state is handled externally, by the consumer's code).
@@ -27,10 +62,10 @@ export default class HdsPaginationCompactIndexComponent extends Component {
   showLabels = this.args.showLabels ?? true; // if the labels for the "prev/next" controls are visible
   showSizeSelector = this.args.showSizeSelector ?? false; // if the "size selector" block is visible
 
-  constructor() {
-    super(...arguments);
+  constructor(owner: unknown, args: HdsPaginationCompactSignature['Args']) {
+    super(owner, args);
 
-    let { queryFunction } = this.args;
+    const { queryFunction } = this.args;
 
     // This component works in two different ways, depending if we need to support
     // routing through links (`LinkTo`) for the "navigation controls", or not.
@@ -51,12 +86,7 @@ export default class HdsPaginationCompactIndexComponent extends Component {
     }
   }
 
-  /**
-   * @param ariaLabel
-   * @type {string}
-   * @default 'Pagination'
-   */
-  get ariaLabel() {
+  get ariaLabel(): string {
     return this.args.ariaLabel ?? 'Pagination';
   }
 
@@ -73,14 +103,13 @@ export default class HdsPaginationCompactIndexComponent extends Component {
   // is *always* determined by the component's internal logic (and updated according to the user interaction with it).
   // For this reason the "get" and "set" methods always read from or write to the private internal state (_variable).
 
-  get currentPageSize() {
+  get currentPageSize(): number | undefined {
     if (this.isControlled) {
       return this.args.currentPageSize;
     } else {
       return this._currentPageSize;
     }
   }
-
   set currentPageSize(value) {
     if (this.isControlled) {
       // noop
@@ -89,33 +118,31 @@ export default class HdsPaginationCompactIndexComponent extends Component {
     }
   }
 
-  /**
-   * @param pageSizes
-   * @type {array of numbers}
-   * @description Set the page sizes users can select from.
-   * @default [10, 30, 50]
-   */
-  get pageSizes() {
-    let { pageSizes = DEFAULT_PAGE_SIZES } = this.args;
+  get pageSizes(): number[] {
+    const { pageSizes = DEFAULT_PAGE_SIZES } = this.args;
 
     assert(
       `pageSizes argument must be an array. Received: ${pageSizes}`,
-      Array.isArray(pageSizes) === true
+      Array.isArray(pageSizes) === true && pageSizes.length > 0
     );
 
     return pageSizes;
   }
 
-  buildQueryParamsObject(page, pageSize) {
+  buildQueryParamsObject(
+    page: HdsPaginationDirections,
+    pageSize?: number
+  ): HdsInteractiveQuery {
     if (this.isControlled) {
-      return this.args.queryFunction(page, pageSize);
+      // if the component is controlled, we can assert that the queryFunction is defined
+      return this.args.queryFunction!(page, pageSize);
     } else {
       return {};
     }
   }
 
-  get routing() {
-    let routing = {
+  get routing(): HdsPaginationCompactRoutingQueryProps {
+    const routing: HdsPaginationCompactRoutingQueryProps = {
       route: this.args.route ?? undefined,
       model: this.args.model ?? undefined,
       models: this.args.models ?? undefined,
@@ -125,11 +152,11 @@ export default class HdsPaginationCompactIndexComponent extends Component {
     // the "query" is dynamic and needs to be calculated
     if (this.isControlled) {
       routing.queryPrev = this.buildQueryParamsObject(
-        'prev',
+        HdsPaginationDirectionValues.Prev,
         this.currentPageSize
       );
       routing.queryNext = this.buildQueryParamsObject(
-        'next',
+        HdsPaginationDirectionValues.Next,
         this.currentPageSize
       );
     } else {
@@ -141,19 +168,17 @@ export default class HdsPaginationCompactIndexComponent extends Component {
   }
 
   @action
-  onPageChange(newPage) {
-    this.currentPage = newPage;
-
-    let { onPageChange } = this.args;
+  onPageChange(newPage: HdsPaginationDirections): void {
+    const { onPageChange } = this.args;
 
     if (typeof onPageChange === 'function') {
       onPageChange(newPage);
     }
   }
 
   @action
-  onPageSizeChange(newPageSize) {
-    let { onPageSizeChange } = this.args;
+  onPageSizeChange(newPageSize: number): void {
+    const { onPageSizeChange } = this.args;
 
     // invoke the callback function
     if (typeof onPageSizeChange === 'function') {

packages/components/src/components/hds/pagination/info/index.hbs

@@ -1,4 +1,3 @@
-{{! @glint-nocheck: not typesafe yet }}
 {{!
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0

packages/components/src/components/hds/pagination/info/index.js

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import type { HdsPaginationNumberedSignature } from '../numbered/index';
+import type { HdsTextBodySignature } from '../../text/body';
+interface HdsPaginationInfoSignature {
+  Args: {
+    itemsRangeStart: number;
+    itemsRangeEnd: number;
+    showTotalItems?: HdsPaginationNumberedSignature['Args']['showTotalItems'];
+    totalItems: HdsPaginationNumberedSignature['Args']['totalItems'];
+  };
+  Element: HdsTextBodySignature['Element'];
+}
+
+export default class HdsPaginationInfoComponent extends Component<HdsPaginationInfoSignature> {
+  get showTotalItems(): boolean {
+    return this.args.showTotalItems ?? true;
+  }
+}

packages/components/src/components/hds/pagination/info/index.ts

@@ -1,4 +1,3 @@
-{{! @glint-nocheck: not typesafe yet }}
 {{!
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0