feat(design): convert paginator component to standalone (#3054)

graycoreio · Sep 27, 2024 · 8caa5e1 · 8caa5e1
1 parent 7ca68fd
commit 8caa5e1
Show file tree

Hide file tree

Showing 8 changed files with 95 additions and 30 deletions.
diff --git a/libs/design/paginator/README.md b/libs/design/paginator/README.md
@@ -1,11 +1,52 @@
 # Paginator
 Paginator is used to break up large amounts of content into multiple pages, enabling users to easily navigate between pages of content.
 
+## Default Paginator
+<design-land-example-viewer-container example="basic-paginator"></design-land-example-viewer-container>
+
+## Usage
+
+### Within a standalone component
+To use paginator in a standalone component, import `DAFF_PAGINATOR_COMPONENTS` directly into your custom component:
+
+```ts
+@Component({
+  selector: 'custom-component',
+  templateUrl: './custom-component.component.html',
+  standalone: true,
+  imports: [
+    DAFF_PAGINATOR_COMPONENTS,
+  ],
+})
+export class CustomComponent {}
+```
+
+### Within a module (deprecated)
+To use paginator in a module, import `DaffPaginatorModule` into your custom module:
+
+```ts
+import { NgModule } from '@angular/core';
+
+import { DaffPaginatorModule } from '@daffodil/design/paginator';
+
+@NgModule({
+	declarations: [
+    CustomComponent,
+  ],
+  exports: [
+    CustomComponent,
+  ],
+  imports: [
+    DaffPaginatorModule,
+  ],
+})
+export class CustomComponentModule { }
+```
+
+> This method is deprecated. It's recommended to update all custom components to standalone.
+
 ## Truncation
 An ellipsis is used to truncate pages when the number of pages exceed the maximum display limit. Double truncation appears when the current page is separated by more than three pages from both the first and last page.
 
 ## Accessibility
-Use `aria-label` or `aria-labelledby` to give a meaningful label to `daff-paginator` that describes the content controlled by the paginator. If more than one paginator component is used on a page, each will need a unique `aria-label`.
-
-## Usage
-<design-land-example-viewer-container example="basic-paginator"></design-land-example-viewer-container>
+Use `aria-label` or `aria-labelledby` to give a meaningful label to `daff-paginator` that describes the content controlled by the paginator. If more than one paginator component is used on a page, each will need a unique `aria-label`.
diff --git a/libs/design/paginator/examples/src/basic-paginator/basic-paginator.component.ts b/libs/design/paginator/examples/src/basic-paginator/basic-paginator.component.ts
@@ -3,7 +3,7 @@ import {
   Component,
 } from '@angular/core';
 
-import { DaffPaginatorModule } from '@daffodil/design/paginator';
+import { DAFF_PAGINATOR_COMPONENTS } from '@daffodil/design/paginator';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
@@ -12,7 +12,7 @@ import { DaffPaginatorModule } from '@daffodil/design/paginator';
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    DaffPaginatorModule,
+    DAFF_PAGINATOR_COMPONENTS,
   ],
 })
 export class BasicPaginatorComponent {

diff --git a/libs/design/paginator/examples/src/link-paginator/link-paginator.component.ts b/libs/design/paginator/examples/src/link-paginator/link-paginator.component.ts
@@ -9,7 +9,7 @@ import {
   map,
 } from 'rxjs';
 
-import { DaffPaginatorModule } from '@daffodil/design/paginator';
+import { DAFF_PAGINATOR_COMPONENTS } from '@daffodil/design/paginator';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
@@ -18,7 +18,7 @@ import { DaffPaginatorModule } from '@daffodil/design/paginator';
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    DaffPaginatorModule,
+    DAFF_PAGINATOR_COMPONENTS,
     AsyncPipe,
   ],
 })

diff --git a/libs/design/paginator/src/paginator.module.ts b/libs/design/paginator/src/paginator.module.ts
@@ -5,13 +5,14 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
 import { DaffPaginatorComponent } from './paginator/paginator.component';
 
+/**
+ * @deprecated in favor of {@link DAFF_PAGINATOR_COMPONENTS}
+ */
 @NgModule({
   imports: [
     CommonModule,
     RouterModule,
     FontAwesomeModule,
-  ],
-  declarations: [
     DaffPaginatorComponent,
   ],
   exports: [

diff --git a/libs/design/paginator/src/paginator.ts b/libs/design/paginator/src/paginator.ts
@@ -0,0 +1,5 @@
+import { DaffPaginatorComponent } from './paginator/paginator.component';
+
+export const DAFF_PAGINATOR_COMPONENTS = <const> [
+  DaffPaginatorComponent,
+];
diff --git a/libs/design/paginator/src/paginator/paginator.component.spec.ts b/libs/design/paginator/src/paginator/paginator.component.spec.ts
@@ -11,7 +11,10 @@ import {
   tick,
 } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { ActivatedRoute } from '@angular/router';
+import {
+  ActivatedRoute,
+  RouterModule,
+} from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 
 import { DaffPaginatorComponent } from './paginator.component';
@@ -24,16 +27,21 @@ import {
 @Component({ template: '' })
 class TestComponent {}
 
-@Component({ template: `
-  <daff-paginator
-    aria-label="id"
-    [numberOfPages]="numberOfPagesValue"
-    [currentPage]="currentPageValue"
-    [linkMode]="linkModeValue"
-    [url]="urlValue"
-    [queryParam]="queryParamValue"
-  ></daff-paginator>
-` })
+@Component({
+  template: `
+    <daff-paginator
+      aria-label="id"
+      [numberOfPages]="numberOfPagesValue"
+      [currentPage]="currentPageValue"
+      [linkMode]="linkModeValue"
+      [url]="urlValue"
+      [queryParam]="queryParamValue">
+    </daff-paginator>`,
+  standalone: true,
+  imports: [
+    DaffPaginatorComponent,
+  ],
+})
 
 class WrapperComponent {
   numberOfPagesValue = 20;
@@ -55,8 +63,8 @@ describe('@daffodil/design/paginator | DaffPaginatorComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
-        DaffPaginatorModule,
-        RouterTestingModule.withRoutes([
+        WrapperComponent,
+        RouterModule.forRoot([
           {
             path: '',
             component: TestComponent,
@@ -67,9 +75,6 @@ describe('@daffodil/design/paginator | DaffPaginatorComponent', () => {
           },
         ]),
       ],
-      declarations: [
-        WrapperComponent,
-      ],
     })
       .compileComponents();
   }));

diff --git a/libs/design/paginator/src/paginator/paginator.component.ts b/libs/design/paginator/src/paginator/paginator.component.ts
@@ -1,3 +1,7 @@
+import {
+  NgFor,
+  NgIf,
+} from '@angular/common';
 import {
   Component,
   Input,
@@ -8,7 +12,11 @@ import {
   OnChanges,
   ChangeDetectionStrategy,
 } from '@angular/core';
-import { Params } from '@angular/router';
+import {
+  Params,
+  RouterModule,
+} from '@angular/router';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import {
   faChevronRight,
   faChevronLeft,
@@ -21,14 +29,18 @@ import {
 
 const visiblePageRange = 2;
 
-/**
- * @inheritdoc
- */
 @Component({
   selector: 'daff-paginator',
   styleUrls: ['./paginator.component.scss'],
   templateUrl: './paginator.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    FaIconComponent,
+    RouterModule,
+    NgIf,
+    NgFor,
+  ],
 })
 export class DaffPaginatorComponent implements OnChanges {
 

diff --git a/libs/design/paginator/src/public_api.ts b/libs/design/paginator/src/public_api.ts
@@ -1,2 +1,3 @@
 export { DaffPaginatorModule } from './paginator.module';
 export { DaffPaginatorComponent } from './paginator/paginator.component';
+export { DAFF_PAGINATOR_COMPONENTS } from './paginator';