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

apps/daffio/src/app/docs/components/docs-list/docs-list.component.ts

@@ -19,7 +19,7 @@ import {
 
 import {
   DaffTreeData,
-  DaffTreeModule,
+  DAFF_TREE_COMPONENTS,
   daffTransformTree,
 } from '@daffodil/design/tree';
 
@@ -45,7 +45,7 @@ const visit = (guide: DaffioDocList): DaffTreeData<unknown> => ({
   imports: [
     AsyncPipe,
     RouterLink,
-    DaffTreeModule,
+    DAFF_TREE_COMPONENTS,
     RouterLinkActive,
   ],
 })

libs/design/tree/README.md

@@ -9,6 +9,47 @@ Instead of defining a recursive tree structure of components, which is often pro
 
 Generally, tree usage consists of taking existing tree data, converting it to the `DaffTreeData` format, setting the `tree` input on the `DaffTreeComponent`, and providing templates for the cases where the tree element has children or not.
 
+## Usage
+
+### Within a standalone component
+To use sidebar in a standalone component, import `DAFF_TREE_COMPONENTS` directly into your custom component:
+
+```ts
+@Component({
+  selector: 'custom-component',
+  templateUrl: './custom-component.component.html',
+  standalone: true,
+  imports: [
+    DAFF_TREE_COMPONENTS,
+  ],
+})
+export class CustomComponent {}
+```
+
+### Within a module (deprecated)
+To use sidebar in a module, import `DaffTreeModule` into your custom module:
+
+```ts
+import { NgModule } from '@angular/core';
+
+import { DaffTreeModule } from '@daffodil/design/tree';
+
+@NgModule({
+	declarations: [
+    CustomComponent,
+  ],
+  exports: [
+    CustomComponent,
+  ],
+  imports: [
+    DaffTreeModule,
+  ],
+})
+export class CustomComponentModule { }
+```
+
+> This method is deprecated. It's recommended to update all custom components to standalone.
+
 ## Features
 The `DaffTreeComponent` controls the rendering of the structure of the tree and provides template slots so that you can control the ultimate UI rendered for each node.
 

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

@@ -6,7 +6,7 @@ import { RouterLink } from '@angular/router';
 
 import {
   DaffTreeData,
-  DaffTreeModule,
+  DAFF_TREE_COMPONENTS,
 } from '@daffodil/design/tree';
 
 @Component({
@@ -15,7 +15,10 @@ import {
   templateUrl: './basic-tree.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [DaffTreeModule, RouterLink],
+  imports: [
+    DAFF_TREE_COMPONENTS,
+    RouterLink,
+  ],
 })
 export class BasicTreeComponent {
   tree: DaffTreeData<unknown> = {

libs/design/tree/src/public_api.ts

@@ -2,7 +2,6 @@ export { DaffTreeModule } from './tree.module';
 export { DaffTreeComponent } from './tree/tree.component';
 export { DaffTreeItemDirective } from './tree-item/tree-item.directive';
 export { DaffTreeData } from './interfaces/tree-data';
-export { DaffTreeUi } from './interfaces/tree-ui';
-export { daffTransformTreeInPlace } from './utils/transform-in-place';
 export { daffTransformTree } from './utils/transform';
 export { DaffTreeRenderMode } from './interfaces/tree-render-mode';
+export { DAFF_TREE_COMPONENTS } from './tree';

libs/design/tree/src/tree-item/tree-item.directive.ts

@@ -33,6 +33,7 @@ import { DaffTreeFlatNode } from '../utils/flatten-tree';
  */
 @Directive({
   selector: '[daffTreeItem]',
+  standalone: true,
 })
 export class DaffTreeItemDirective {
 

libs/design/tree/src/tree.module.ts

@@ -4,13 +4,14 @@ import { NgModule } from '@angular/core';
 import { DaffTreeComponent } from './tree/tree.component';
 import { DaffTreeItemDirective } from './tree-item/tree-item.directive';
 
+/**
+ * @deprecated in favor of {@link DAFF_TREE_COMPONENTS}
+ */
 @NgModule({
-  declarations: [
-    DaffTreeComponent,
-    DaffTreeItemDirective,
-  ],
   imports: [
     CommonModule,
+    DaffTreeComponent,
+    DaffTreeItemDirective,
   ],
   exports: [
     DaffTreeComponent,

libs/design/tree/src/tree.ts

@@ -0,0 +1,7 @@
+import { DaffTreeComponent } from './tree/tree.component';
+import { DaffTreeItemDirective } from './tree-item/tree-item.directive';
+
+export const DAFF_TREE_COMPONENTS = <const> [
+  DaffTreeComponent,
+  DaffTreeItemDirective,
+];

libs/design/tree/src/tree/specs/defaults.spec.ts

@@ -1,17 +1,20 @@
+import { DebugElement } from '@angular/core';
 import {
   ComponentFixture,
   TestBed,
 } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
 
 import { DaffTreeComponent } from '../tree.component';
 
-describe('@daffodil/design/tree - DaffTreeComponent | Defaults', () => {
+describe('@daffodil/design/tree | DaffTreeComponent | Defaults', () => {
   let component: DaffTreeComponent;
   let fixture: ComponentFixture<DaffTreeComponent>;
+  let de: DebugElement;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [
+      imports: [
         DaffTreeComponent,
       ],
     })
@@ -21,6 +24,7 @@ describe('@daffodil/design/tree - DaffTreeComponent | Defaults', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(DaffTreeComponent);
     component = fixture.componentInstance;
+    de = fixture.debugElement.query(By.css('daff-tree'));
     fixture.detectChanges();
   });
 

libs/design/tree/src/tree/specs/render-modes.spec.ts

@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import {
   Component,
   Input,
@@ -11,7 +10,6 @@ import { By } from '@angular/platform-browser';
 
 import { DaffTreeData } from '../../interfaces/tree-data';
 import { DaffTreeRenderMode } from '../../interfaces/tree-render-mode';
-import { DaffTreeModule } from '../../tree.module';
 import { DaffTreeComponent } from '../tree.component';
 
 @Component({
@@ -26,22 +24,27 @@ import { DaffTreeComponent } from '../tree.component';
       </ng-template>
     </ul>
   `,
+  standalone: true,
+  imports: [
+    DaffTreeComponent,
+  ],
 })
 class WrapperComponent {
   @Input() data: DaffTreeData<any>;
   @Input() renderMode: DaffTreeRenderMode;
 }
 
 
-describe('@daffodil/design/tree - DaffTreeComponent | renderModes', () => {
+describe('@daffodil/design/tree | DaffTreeComponent | renderModes', () => {
   let wrapper: WrapperComponent;
   let component: DaffTreeComponent;
   let fixture: ComponentFixture<WrapperComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [DaffTreeModule, CommonModule],
-      declarations: [WrapperComponent],
+      imports: [
+        WrapperComponent,
+      ],
     })
       .compileComponents();
   });

libs/design/tree/src/tree/specs/simple.spec.ts

@@ -15,19 +15,22 @@ import { DaffTreeComponent } from '../tree.component';
   template: `
     <ul daff-tree [tree]="data"></ul>
   `,
+  standalone: true,
+  imports: [
+    DaffTreeComponent,
+  ],
 })
 class WrapperComponent {
   @Input() data: DaffTreeData<any>;
 }
 
-describe('@daffodil/design/tree - DaffTreeComponent | Simple', () => {
+describe('@daffodil/design/tree | DaffTreeComponent | Simple', () => {
   let wrapper: WrapperComponent;
   let fixture: ComponentFixture<WrapperComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [
-        DaffTreeComponent,
+      imports: [
         WrapperComponent,
       ],
     })

libs/design/tree/src/tree/specs/with-template.spec.ts

@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import {
   Component,
   Input,
@@ -10,7 +9,6 @@ import {
 import { By } from '@angular/platform-browser';
 
 import { DaffTreeData } from '../../interfaces/tree-data';
-import { DaffTreeModule } from '../../tree.module';
 import { DaffTreeComponent } from '../tree.component';
 
 @Component({
@@ -25,6 +23,10 @@ import { DaffTreeComponent } from '../tree.component';
       </ng-template>
     </ul>
   `,
+  standalone: true,
+  imports: [
+    DaffTreeComponent,
+  ],
 })
 class WrapperComponent {
   @Input() data: DaffTreeData<any>;
@@ -38,8 +40,9 @@ describe('@daffodil/design/tree - DaffTreeComponent | withTemplate', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [DaffTreeModule, CommonModule],
-      declarations: [WrapperComponent],
+      imports: [
+        WrapperComponent,
+      ],
     })
       .compileComponents();
   });

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

@@ -11,7 +11,7 @@ describe('@daffodil/design/tree - DaffTreeComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [
+      imports: [
         DaffTreeComponent,
       ],
     })

libs/design/tree/src/tree/tree.component.ts

@@ -1,3 +1,7 @@
+import {
+  NgFor,
+  NgTemplateOutlet,
+} from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -56,6 +60,11 @@ import { hydrateTree } from '../utils/hydrate-tree';
   hostDirectives: [{
     directive: DaffArticleEncapsulatedDirective,
   }],
+  standalone: true,
+  imports: [
+    NgFor,
+    NgTemplateOutlet,
+  ],
 })
 export class DaffTreeComponent implements OnInit, OnChanges {
 

libs/design/tree/src/utils/walk-up.spec.ts

@@ -1,5 +1,5 @@
 import { walkUp } from './walk-up';
-import { DaffTreeUi } from '../public_api';
+import { DaffTreeUi } from '../interfaces/tree-ui';
 
 describe('@daffodil/design/tree - walkUp', () => {
   it('should walkup a tree, applying the visit function', () => {