feat: migrate to standalone API (#498)

Author: JounQin

.changeset/weak-walls-invent.md

@@ -0,0 +1,5 @@
+---
+"@alauda/ui": minor
+---
+
+feat!: migrate to standalone API

package.json

@@ -55,51 +55,51 @@
     "@1stg/remark-preset": "^2.0.0",
     "@1stg/simple-git-hooks": "^0.2.3",
     "@1stg/stylelint-config": "^5.1.0",
-    "@angular-devkit/build-angular": "^16.2.0",
-    "@angular/animations": "^16.2.0",
-    "@angular/cdk": "^16.2.0",
-    "@angular/cli": "^16.2.0",
-    "@angular/common": "^16.2.0",
-    "@angular/compiler": "^16.2.0",
-    "@angular/compiler-cli": "^16.2.0",
-    "@angular/core": "^16.2.0",
-    "@angular/forms": "^16.2.0",
-    "@angular/platform-browser": "^16.2.0",
-    "@angular/platform-browser-dynamic": "^16.2.0",
+    "@angular-devkit/build-angular": "^16.2.1",
+    "@angular/animations": "^16.2.3",
+    "@angular/cdk": "^16.2.2",
+    "@angular/cli": "^16.2.1",
+    "@angular/common": "^16.2.3",
+    "@angular/compiler": "^16.2.3",
+    "@angular/compiler-cli": "^16.2.3",
+    "@angular/core": "^16.2.3",
+    "@angular/forms": "^16.2.3",
+    "@angular/platform-browser": "^16.2.3",
+    "@angular/platform-browser-dynamic": "^16.2.3",
     "@changesets/changelog-github": "^0.4.8",
     "@changesets/cli": "^2.26.2",
     "@commitlint/cli": "^17.7.1",
     "@compodoc/compodoc": "^1.1.21",
-    "@storybook/addon-essentials": "^7.2.3",
-    "@storybook/addon-interactions": "^7.2.3",
-    "@storybook/addon-links": "^7.2.3",
-    "@storybook/angular": "^7.2.3",
-    "@storybook/blocks": "^7.2.3",
+    "@storybook/addon-essentials": "^7.4.0",
+    "@storybook/addon-interactions": "^7.4.0",
+    "@storybook/addon-links": "^7.4.0",
+    "@storybook/angular": "^7.4.0",
+    "@storybook/blocks": "^7.4.0",
     "@types/chroma-js": "^2.4.0",
     "@types/file-saver": "^2.0.5",
-    "@types/jest": "29.5.3",
-    "@types/node": "^20.5.0",
+    "@types/jest": "29.5.4",
+    "@types/node": "^20.5.7",
     "chroma-js": "^2.4.2",
     "dayjs": "^1.11.9",
-    "eslint": "^8.47.0",
+    "eslint": "^8.48.0",
     "file-saver": "^2.0.5",
     "gulp": "^4.0.2",
     "gulp-dart-sass": "^1.1.0",
-    "jest": "^29.6.2",
+    "jest": "^29.6.4",
     "jest-junit": "^16.0.0",
     "jest-preset-angular": "^13.1.1",
-    "lint-staged": "^14.0.0",
-    "ng-packagr": "^16.2.0",
+    "lint-staged": "^14.0.1",
+    "ng-packagr": "^16.2.2",
     "npm-run-all": "^4.1.5",
     "patch-package": "^8.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "remark-gfm": "^3.0.1",
     "rxjs": "^7.8.1",
     "simple-git-hooks": "^2.9.0",
-    "storybook": "^7.2.3",
+    "storybook": "^7.4.0",
     "storybook-dark-mode": "^3.0.1",
-    "stylelint": "^15.10.2",
+    "stylelint": "^15.10.3",
     "ts-jest": "29.1.1",
     "ts-node": "^10.9.1",
     "yarn-deduplicate": "^6.0.2",

patches/inquirer+8.2.4.patch

@@ -0,0 +1,13 @@
+diff --git a/node_modules/inquirer/lib/utils/screen-manager.js b/node_modules/inquirer/lib/utils/screen-manager.js
+index d411a99..c98e86c 100644
+--- a/node_modules/inquirer/lib/utils/screen-manager.js
++++ b/node_modules/inquirer/lib/utils/screen-manager.js
+@@ -1,7 +1,7 @@
+ 'use strict';
+ const util = require('./readline');
+ const cliWidth = require('cli-width');
+-const wrapAnsi = require('wrap-ansi');
++const wrapAnsi = require('wrap-ansi-cjs');
+ const stripAnsi = require('strip-ansi');
+ const stringWidth = require('string-width');
+ const ora = require('ora');

src/accordion/accordion-item/accordion-item.component.ts

@@ -7,6 +7,7 @@ import {
 } from '@angular/animations';
 import { CdkAccordionItem } from '@angular/cdk/accordion';
 import { UniqueSelectionDispatcher } from '@angular/cdk/collections';
+import { NgIf, NgTemplateOutlet } from '@angular/common';
 import {
   AfterContentInit,
   ChangeDetectionStrategy,
@@ -20,14 +21,17 @@ import {
 } from '@angular/core';
 import { filter, startWith, take } from 'rxjs';
 
+import { IconComponent } from '../../icon/icon.component';
 import { AccordionComponent } from '../accordion.component';
 
 @Directive({
   selector: '[auiAccordionItemHeader]',
+  standalone: true,
 })
 export class AccordionItemHeaderDirective {}
 @Directive({
   selector: '[auiAccordionContent]',
+  standalone: true,
 })
 export class AccordionItemContentDirective {}
 @Component({
@@ -45,6 +49,8 @@ export class AccordionItemContentDirective {}
     ]),
   ],
   viewProviders: [AccordionItemComponent],
+  standalone: true,
+  imports: [IconComponent, NgIf, NgTemplateOutlet],
 })
 export class AccordionItemComponent
   extends CdkAccordionItem

src/accordion/accordion.component.spec.ts

@@ -2,16 +2,13 @@ import { Component, ViewChild } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
-import { AccordionComponent, AccordionModule } from '.';
+import { AccordionComponent } from './accordion.component';
+import { ACCORDION_MODULE } from './accordion.module';
 
 describe('AccordionComponent', () => {
   let fixture: ComponentFixture<TestComponent>;
 
   beforeEach(() => {
-    TestBed.configureTestingModule({
-      imports: [AccordionModule],
-      declarations: [TestComponent],
-    });
     fixture = TestBed.createComponent(TestComponent);
     fixture.detectChanges();
   });
@@ -55,6 +52,8 @@ describe('AccordionComponent', () => {
       </aui-accordion-item>
     </aui-accordion>
   `,
+  standalone: true,
+  imports: [...ACCORDION_MODULE],
 })
 class TestComponent {
   multi: boolean;

src/accordion/accordion.component.ts

@@ -16,6 +16,7 @@ import {
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   preserveWhitespaces: false,
+  standalone: true,
 })
 export class AccordionComponent extends CdkAccordion {
   @Input()

src/accordion/accordion.module.ts

@@ -13,19 +13,28 @@ import {
 import { AccordionComponent } from './accordion.component';
 
 @NgModule({
-  declarations: [
+  imports: [
+    CommonModule,
+    CdkAccordionModule,
+    IconModule,
+    ButtonModule,
     AccordionComponent,
     AccordionItemComponent,
     AccordionItemHeaderDirective,
     AccordionItemContentDirective,
   ],
-  imports: [CommonModule, CdkAccordionModule, IconModule, ButtonModule],
   exports: [
     AccordionComponent,
     AccordionItemComponent,
     AccordionItemHeaderDirective,
     AccordionItemContentDirective,
   ],
-  providers: [],
 })
 export class AccordionModule {}
+
+export const ACCORDION_MODULE = [
+  AccordionComponent,
+  AccordionItemComponent,
+  AccordionItemHeaderDirective,
+  AccordionItemContentDirective,
+] as const;

src/anchor/anchor.component.ts

@@ -1,3 +1,4 @@
+import { NgFor, NgIf, NgTemplateOutlet } from '@angular/common';
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
@@ -25,6 +26,7 @@ import {
 import { buildBem, isTemplateRef, last } from '../utils';
 
 import { AnchorDirectiveChild } from './anchor.directive';
+import { AnchorModule } from './anchor.module';
 import { AnchorItem, AnchorTreeItem } from './types';
 import { getAnchorTreeItems } from './utils';
 
@@ -35,6 +37,8 @@ const bem = buildBem('aui-anchor');
   templateUrl: 'anchor-tree.component.html',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [NgFor, NgIf, NgTemplateOutlet, AnchorModule],
 })
 export class AnchorTreeComponent
   extends AnchorDirectiveChild
@@ -120,6 +124,8 @@ export class AnchorTreeComponent
   styleUrls: ['anchor.component.scss'],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [AnchorTreeComponent],
 })
 export class AnchorComponent
   extends AnchorDirectiveChild

src/anchor/anchor.directive.ts

@@ -38,6 +38,7 @@ export class AnchorDirectiveChild {
 
 @Directive({
   selector: '[auiAnchorLabel]',
+  standalone: true,
 })
 export class AnchorLabelDirective
   extends AnchorDirectiveChild
@@ -114,6 +115,7 @@ export class AnchorLabelDirective
 
 @Directive({
   selector: '[auiAnchor]',
+  standalone: true,
 })
 export class AnchorDirective implements AfterContentInit, OnDestroy {
   @Input()

src/anchor/anchor.module.ts

@@ -5,8 +5,8 @@ import { AnchorComponent, AnchorTreeComponent } from './anchor.component';
 import { AnchorDirective, AnchorLabelDirective } from './anchor.directive';
 
 @NgModule({
-  imports: [CommonModule],
-  declarations: [
+  imports: [
+    CommonModule,
     AnchorComponent,
     AnchorTreeComponent,
     AnchorDirective,
@@ -20,3 +20,10 @@ import { AnchorDirective, AnchorLabelDirective } from './anchor.directive';
   ],
 })
 export class AnchorModule {}
+
+export const ANCHOR_MODULE = [
+  AnchorComponent,
+  AnchorTreeComponent,
+  AnchorDirective,
+  AnchorLabelDirective,
+] as const;

src/autocomplete/autocomplete-placeholder.component.ts

@@ -10,5 +10,6 @@ import {
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
+  standalone: true,
 })
 export class AutocompletePlaceholderComponent {}

src/autocomplete/autocomplete.component.ts

@@ -1,3 +1,4 @@
+import { AsyncPipe } from '@angular/common';
 import {
   AfterContentInit,
   ChangeDetectionStrategy,
@@ -37,6 +38,8 @@ import { SuggestionComponent } from './suggestion/suggestion.component';
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
+  standalone: true,
+  imports: [AsyncPipe],
 })
 export class AutocompleteComponent implements AfterContentInit {
   @ContentChildren(SuggestionComponent, { descendants: true })

src/autocomplete/autocomplete.directive.ts

@@ -42,6 +42,7 @@ import { SuggestionComponent } from './suggestion/suggestion.component';
   host: {
     autocomplete: 'off',
   },
+  standalone: true,
 })
 export class AutoCompleteDirective
   extends BaseTooltip<AutoCompleteContext>
@@ -340,6 +341,7 @@ export class AutoCompleteDirective
   host: {
     autocomplete: 'off',
   },
+  standalone: true,
 })
 export class CustomAutoCompleteDirective extends AutoCompleteDirective {
   @Input('auiAutocompleteInnerSelector')

src/autocomplete/autocomplete.module.ts

@@ -15,8 +15,10 @@ import { SuggestionComponent } from './suggestion/suggestion.component';
 import { SuggestionGroupComponent } from './suggestion-group/suggestion-group.component';
 
 @NgModule({
-  imports: [CommonModule, OverlayModule, TooltipModule],
-  declarations: [
+  imports: [
+    CommonModule,
+    OverlayModule,
+    TooltipModule,
     AutoCompleteDirective,
     CustomAutoCompleteDirective,
     AutocompleteComponent,
@@ -36,3 +38,13 @@ import { SuggestionGroupComponent } from './suggestion-group/suggestion-group.co
   ],
 })
 export class AutocompleteModule {}
+
+export const AUTOCOMPLETE_MODULE = [
+  AutoCompleteDirective,
+  CustomAutoCompleteDirective,
+  AutocompleteComponent,
+  SuggestionComponent,
+  AutocompletePlaceholderComponent,
+  SuggestionGroupComponent,
+  SuggestionGroupTitleDirective,
+] as const;

src/autocomplete/helper-directives.ts

@@ -6,5 +6,6 @@ import { Directive } from '@angular/core';
   host: {
     '[class.aui-suggestion-group__title]': 'true',
   },
+  standalone: true,
 })
 export class SuggestionGroupTitleDirective {}

src/autocomplete/suggestion-group/suggestion-group.component.ts

@@ -1,3 +1,4 @@
+import { AsyncPipe } from '@angular/common';
 import {
   AfterContentInit,
   ChangeDetectionStrategy,
@@ -19,6 +20,8 @@ import { SuggestionComponent } from '../suggestion/suggestion.component';
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
+  standalone: true,
+  imports: [AsyncPipe],
 })
 export class SuggestionGroupComponent implements AfterContentInit {
   @ContentChildren(forwardRef(() => SuggestionComponent))

src/autocomplete/suggestion/suggestion.component.ts

@@ -1,3 +1,4 @@
+import { AsyncPipe } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -27,6 +28,8 @@ import { AutocompleteComponent } from '../autocomplete.component';
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
+  standalone: true,
+  imports: [AsyncPipe],
 })
 export class SuggestionComponent {
   bem: Bem = buildBem('aui-suggestion');

src/back-top/back-top.component.ts

@@ -1,4 +1,5 @@
 import { CdkScrollable } from '@angular/cdk/overlay';
+import { AsyncPipe } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -19,6 +20,9 @@ import {
   startWith,
 } from 'rxjs';
 
+import { ButtonComponent } from '../button/button.component';
+import { IconComponent } from '../icon/icon.component';
+
 type TargetType = Element | Window | string;
 
 @Component({
@@ -28,6 +32,8 @@ type TargetType = Element | Window | string;
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   preserveWhitespaces: false,
+  standalone: true,
+  imports: [ButtonComponent, IconComponent, AsyncPipe],
 })
 export class BackTopComponent {
   @Input()