From d5cad9aff372260566db8b129da227b36a80c9ad Mon Sep 17 00:00:00 2001 From: xelaint Date: Fri, 27 Sep 2024 11:48:13 -0400 Subject: [PATCH] feat(design): convert tree component to standalone (#3054) --- .../docs-list/docs-list.component.ts | 4 +- libs/design/tree/README.md | 41 ++++++++++ .../src/basic-tree/basic-tree.component.ts | 7 +- libs/design/tree/src/public_api.ts | 3 +- .../tree/src/tree-item/tree-item.directive.ts | 1 + libs/design/tree/src/tree.module.ts | 9 ++- libs/design/tree/src/tree.ts | 7 ++ .../tree/src/tree/specs/defaults.spec.ts | 8 +- .../tree/src/tree/specs/render-modes.spec.ts | 13 ++-- .../design/tree/src/tree/specs/simple.spec.ts | 9 ++- .../tree/src/tree/specs/with-template.spec.ts | 11 ++- .../tree/src/tree/tree.component.spec.ts | 2 +- libs/design/tree/src/tree/tree.component.ts | 9 +++ .../tree/src/utils/transform-in-place.spec.ts | 74 ------------------- libs/design/tree/src/utils/walk-up.spec.ts | 2 +- 15 files changed, 100 insertions(+), 100 deletions(-) create mode 100644 libs/design/tree/src/tree.ts delete mode 100644 libs/design/tree/src/utils/transform-in-place.spec.ts diff --git a/apps/daffio/src/app/docs/components/docs-list/docs-list.component.ts b/apps/daffio/src/app/docs/components/docs-list/docs-list.component.ts index a352fa4252..8ba68ce233 100644 --- a/apps/daffio/src/app/docs/components/docs-list/docs-list.component.ts +++ b/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 => ({ imports: [ AsyncPipe, RouterLink, - DaffTreeModule, + DAFF_TREE_COMPONENTS, RouterLinkActive, ], }) diff --git a/libs/design/tree/README.md b/libs/design/tree/README.md index a6f14a431e..bcb198ff16 100644 --- a/libs/design/tree/README.md +++ b/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. diff --git a/libs/design/tree/examples/src/basic-tree/basic-tree.component.ts b/libs/design/tree/examples/src/basic-tree/basic-tree.component.ts index ef56400ddf..fc36ccd949 100644 --- a/libs/design/tree/examples/src/basic-tree/basic-tree.component.ts +++ b/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 = { diff --git a/libs/design/tree/src/public_api.ts b/libs/design/tree/src/public_api.ts index d44ceb7734..4ef6edb28c 100644 --- a/libs/design/tree/src/public_api.ts +++ b/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'; diff --git a/libs/design/tree/src/tree-item/tree-item.directive.ts b/libs/design/tree/src/tree-item/tree-item.directive.ts index b71ea18a82..8c0fc59ada 100644 --- a/libs/design/tree/src/tree-item/tree-item.directive.ts +++ b/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 { diff --git a/libs/design/tree/src/tree.module.ts b/libs/design/tree/src/tree.module.ts index eafe52124c..2353169bed 100644 --- a/libs/design/tree/src/tree.module.ts +++ b/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, diff --git a/libs/design/tree/src/tree.ts b/libs/design/tree/src/tree.ts new file mode 100644 index 0000000000..6038600059 --- /dev/null +++ b/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 = [ + DaffTreeComponent, + DaffTreeItemDirective, +]; diff --git a/libs/design/tree/src/tree/specs/defaults.spec.ts b/libs/design/tree/src/tree/specs/defaults.spec.ts index b3711982b2..70ec54b959 100644 --- a/libs/design/tree/src/tree/specs/defaults.spec.ts +++ b/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; + 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(); }); diff --git a/libs/design/tree/src/tree/specs/render-modes.spec.ts b/libs/design/tree/src/tree/specs/render-modes.spec.ts index b6321f0b55..8525345ad9 100644 --- a/libs/design/tree/src/tree/specs/render-modes.spec.ts +++ b/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,6 +24,10 @@ import { DaffTreeComponent } from '../tree.component'; `, + standalone: true, + imports: [ + DaffTreeComponent, + ], }) class WrapperComponent { @Input() data: DaffTreeData; @@ -33,15 +35,16 @@ class WrapperComponent { } -describe('@daffodil/design/tree - DaffTreeComponent | renderModes', () => { +describe('@daffodil/design/tree | DaffTreeComponent | renderModes', () => { let wrapper: WrapperComponent; let component: DaffTreeComponent; let fixture: ComponentFixture; beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [DaffTreeModule, CommonModule], - declarations: [WrapperComponent], + imports: [ + WrapperComponent, + ], }) .compileComponents(); }); diff --git a/libs/design/tree/src/tree/specs/simple.spec.ts b/libs/design/tree/src/tree/specs/simple.spec.ts index 1da6dd3606..955cff4922 100644 --- a/libs/design/tree/src/tree/specs/simple.spec.ts +++ b/libs/design/tree/src/tree/specs/simple.spec.ts @@ -15,19 +15,22 @@ import { DaffTreeComponent } from '../tree.component'; template: `
    `, + standalone: true, + imports: [ + DaffTreeComponent, + ], }) class WrapperComponent { @Input() data: DaffTreeData; } -describe('@daffodil/design/tree - DaffTreeComponent | Simple', () => { +describe('@daffodil/design/tree | DaffTreeComponent | Simple', () => { let wrapper: WrapperComponent; let fixture: ComponentFixture; beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ - DaffTreeComponent, + imports: [ WrapperComponent, ], }) diff --git a/libs/design/tree/src/tree/specs/with-template.spec.ts b/libs/design/tree/src/tree/specs/with-template.spec.ts index 9d726a617e..b0109cb9be 100644 --- a/libs/design/tree/src/tree/specs/with-template.spec.ts +++ b/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'; `, + standalone: true, + imports: [ + DaffTreeComponent, + ], }) class WrapperComponent { @Input() data: DaffTreeData; @@ -38,8 +40,9 @@ describe('@daffodil/design/tree - DaffTreeComponent | withTemplate', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [DaffTreeModule, CommonModule], - declarations: [WrapperComponent], + imports: [ + WrapperComponent, + ], }) .compileComponents(); }); diff --git a/libs/design/tree/src/tree/tree.component.spec.ts b/libs/design/tree/src/tree/tree.component.spec.ts index 2e39ba3c12..08e0c163d0 100644 --- a/libs/design/tree/src/tree/tree.component.spec.ts +++ b/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, ], }) diff --git a/libs/design/tree/src/tree/tree.component.ts b/libs/design/tree/src/tree/tree.component.ts index 2154105156..2a079ccff6 100644 --- a/libs/design/tree/src/tree/tree.component.ts +++ b/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 { diff --git a/libs/design/tree/src/utils/transform-in-place.spec.ts b/libs/design/tree/src/utils/transform-in-place.spec.ts deleted file mode 100644 index 28a644f872..0000000000 --- a/libs/design/tree/src/utils/transform-in-place.spec.ts +++ /dev/null @@ -1,74 +0,0 @@ -import { daffTransformTreeInPlace } from './transform-in-place'; - -describe('@daffodil/design/tree - traverse', () => { - it('should transforms trees (mutably)', () => { - const dataProvider = [ - { - data: { title: '', url: '', id: 'a', data: {}, items: []}, - count: 1, - path: 'a1', - }, - { - data: { title: '', url: '', id: 'a', data: {}, items: [ - { title: '', url: '', id: 'b', items: [], data: {}}, - { title: '', url: '', id: 'c', items: [], data: {}}, - ]}, - count: 3, - path: 'a1c2b3', - }, - { - data: { title: '', url: '', id: 'a', items: [ - { title: '', url: '', id: 'b', items: [ - { title: '', url: '', id: 'c', items: [], data: {}}, - ], data: {}}, - ], data: {}}, - count: 3, - path: 'a1b2c3', - }, - { - data: { title: '', url: '', id: 'a', items: [ - { title: '', url: '', id: 'b', items: [ - { title: '', url: '', id: 'c', items: [ - { title: '', url: '', id: 'd', data: {}, items: []}, - ], data: {}}, - ], data: {}}, - ], data: {}}, - count: 4, - path: 'a1b2c3d4', - }, - { - data: { title: '', url: '', id: 'a', items: [ - { title: '', url: '', id: 'b', items: [ - { title: '', url: '', id: 'c', items: [ - { title: '', url: '', id: 'd', data: {}, items: []}, - ], data: {}}, - ], data: {}}, - { title: '', url: '', id: 'e', items: [ - { title: '', url: '', id: 'f', items: [ - { title: '', url: '', id: 'g', data: {}, items: []}, - ], data: {}}, - ], data: {}}, - ], data: {}}, - count: 7, - path: 'a1e2f3g4b5c6d7', - }, - ]; - - dataProvider.forEach((d) => { - let count = 0; - let path = ''; - - const result = daffTransformTreeInPlace(d.data, (node) => { - count++; - node.id = node.id + count; - path = path + node.id; - return node; - }, 'items'); - - expect(d.data.id).toEqual(result.id); - - expect(count).toEqual(d.count); - expect(path).toEqual(d.path); - }); - }); -}); diff --git a/libs/design/tree/src/utils/walk-up.spec.ts b/libs/design/tree/src/utils/walk-up.spec.ts index c6901ec2d0..7181d6ca1a 100644 --- a/libs/design/tree/src/utils/walk-up.spec.ts +++ b/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', () => {