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

Author: xelaint

apps/daffio/src/app/core/nav/sidebar-body/component.ts

@@ -10,7 +10,7 @@ import {
   Observable,
 } from 'rxjs';
 
-import { DaffListModule } from '@daffodil/design/list';
+import { DAFF_LIST_COMPONENTS } from '@daffodil/design/list';
 import { DaffRouterDataService } from '@daffodil/router';
 
 import { DaffioRouteWithNavLinks } from '../link/route.type';
@@ -24,7 +24,7 @@ import { DaffioNavLink } from '../link/type';
   standalone: true,
   imports: [
     AsyncPipe,
-    DaffListModule,
+    DAFF_LIST_COMPONENTS,
     RouterLink,
   ],
 })

libs/design/list/README.md

@@ -1,12 +1,53 @@
 # List
 List is a flexible component that can be used to display a series of content. It can be modified to support a range of content types.
 
+## Usage
+
+### Within a standalone component
+To use list in a standalone component, import it directly into your custom component:
+
+```ts
+@Component({
+  selector: 'custom-component',
+  templateUrl: './custom-component.component.html',
+  standalone: true,
+  imports: [
+    DAFF_LIST_COMPONENTS,
+  ],
+})
+export class CustomComponent {}
+```
+
+### Within a module (deprecated)
+To use list in a module, import `DaffListModule` into your custom module:
+
+```ts
+import { NgModule } from '@angular/core';
+
+import { DaffListModule } from '@daffodil/design/list';
+
+@NgModule({
+	declarations: [
+    CustomComponent,
+  ],
+  exports: [
+    CustomComponent,
+  ],
+  imports: [
+    DaffListModule,
+  ],
+})
+export class CustomComponentModule { }
+```
+
+> This method is deprecated. It's recommended to update all custom components to standalone.
+
 ## Basic List
 A `<daff-list>` consists of multiple `<daff-list-item>`s.
 
 <design-land-example-viewer-container example="basic-list"></design-land-example-viewer-container>
 
-## Nvigation List
+## Navigation List
 Use `<daff-nav-list>` for navigation lists. `<daff-list-item>` should be directly added to an anchor tag.
 
 <design-land-example-viewer-container example="nav-list"></design-land-example-viewer-container>

libs/design/list/examples/src/basic-list/basic-list.component.ts

@@ -3,14 +3,16 @@ import {
   Component,
 } from '@angular/core';
 
-import { DaffListModule } from '@daffodil/design/list';
+import { DAFF_LIST_COMPONENTS } from '@daffodil/design/list';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
   selector: 'basic-list',
   templateUrl: './basic-list.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [DaffListModule],
+  imports: [
+    DAFF_LIST_COMPONENTS,
+  ],
 })
 export class BasicListComponent {}

libs/design/list/examples/src/icon-list/icon-list.component.ts

@@ -5,8 +5,7 @@ import {
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 
-import { DaffPrefixSuffixModule } from '@daffodil/design';
-import { DaffListModule } from '@daffodil/design/list';
+import { DAFF_LIST_COMPONENTS } from '@daffodil/design/list';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
@@ -15,9 +14,8 @@ import { DaffListModule } from '@daffodil/design/list';
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    DaffListModule,
+    DAFF_LIST_COMPONENTS,
     FaIconComponent,
-    DaffPrefixSuffixModule,
   ],
 })
 export class IconListComponent {

libs/design/list/examples/src/multiline-list/multiline-list.component.ts

@@ -3,14 +3,16 @@ import {
   Component,
 } from '@angular/core';
 
-import { DaffListModule } from '@daffodil/design/list';
+import { DAFF_LIST_COMPONENTS } from '@daffodil/design/list';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
   selector: 'multiline-list',
   templateUrl: './multiline-list.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [DaffListModule],
+  imports: [
+    DAFF_LIST_COMPONENTS,
+  ],
 })
 export class MultilineListComponent {}

libs/design/list/examples/src/nav-list/nav-list.component.ts

@@ -5,8 +5,7 @@ import {
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { faChevronRight } from '@fortawesome/free-solid-svg-icons';
 
-import { DaffPrefixSuffixModule } from '@daffodil/design';
-import { DaffListModule } from '@daffodil/design/list';
+import { DAFF_LIST_COMPONENTS } from '@daffodil/design/list';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
@@ -15,9 +14,8 @@ import { DaffListModule } from '@daffodil/design/list';
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    DaffListModule,
+    DAFF_LIST_COMPONENTS,
     FaIconComponent,
-    DaffPrefixSuffixModule,
   ],
 })
 export class NavListComponent {

libs/design/list/src/list-item/list-item.component.spec.ts

@@ -16,6 +16,10 @@ import { DaffListItemComponent } from './list-item.component';
     <daff-list-item>List Item</daff-list-item>
     <a daff-list-item>List Item</a>
   `,
+  standalone: true,
+  imports: [
+    DaffListItemComponent,
+  ],
 })
 class WrapperComponent {}
 
@@ -30,8 +34,7 @@ describe('@daffodil/design/list | DaffListItemComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [
-        DaffListItemComponent,
+      imports: [
         WrapperComponent,
       ],
     })

libs/design/list/src/list-item/list-item.component.ts

@@ -1,3 +1,4 @@
+import { NgIf } from '@angular/common';
 import {
   Component,
   ChangeDetectionStrategy,
@@ -8,6 +9,7 @@ import {
 
 import {
   DaffPrefixDirective,
+  DaffPrefixSuffixModule,
   DaffSuffixDirective,
 } from '@daffodil/design';
 
@@ -17,6 +19,11 @@ import {
     'a[daff-list-item]',
   templateUrl: './list-item.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    NgIf,
+    DaffPrefixSuffixModule,
+  ],
 })
 
 export class DaffListItemComponent {

libs/design/list/src/list.module.ts

@@ -6,12 +6,12 @@ import { DaffPrefixSuffixModule } from '@daffodil/design';
 import { DaffListComponent } from './list/list.component';
 import { DaffListItemComponent } from './list-item/list-item.component';
 
+/**
+ * @deprecated in favor of {@link DAFF_LIST_COMPONENTS}
+ */
 @NgModule({
   imports: [
     CommonModule,
-    DaffPrefixSuffixModule,
-  ],
-  declarations: [
     DaffListComponent,
     DaffListItemComponent,
   ],

libs/design/list/src/list.ts

@@ -0,0 +1,10 @@
+import { DaffPrefixSuffixModule } from '@daffodil/design';
+
+import { DaffListComponent } from './list/list.component';
+import { DaffListItemComponent } from './list-item/list-item.component';
+
+export const DAFF_LIST_COMPONENTS = <const>[
+  DaffListComponent,
+  DaffListItemComponent,
+  DaffPrefixSuffixModule,
+];

libs/design/list/src/list/list.component.spec.ts

@@ -16,6 +16,10 @@ import { DaffListComponent } from './list.component';
     <daff-list [mode]="mode"></daff-list>
     <daff-nav-list></daff-nav-list>
   `,
+  standalone: true,
+  imports: [
+    DaffListComponent,
+  ],
 })
 class WrapperComponent {}
 
@@ -29,9 +33,8 @@ describe('@daffodil/design/list | DaffListComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [
+      imports: [
         WrapperComponent,
-        DaffListComponent,
       ],
     })
       .compileComponents();

libs/design/list/src/list/list.component.ts

@@ -26,6 +26,7 @@ enum DaffListTypeEnum {
   }],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
 })
 
 export class DaffListComponent {

libs/design/list/src/public_api.ts

@@ -1,3 +1,4 @@
 export { DaffListModule } from './list.module';
+export { DAFF_LIST_COMPONENTS } from './list';
 export * from './list/list.component';
 export * from './list-item/list-item.component';