feat!: upgrade to Angular 10 (#33)

alauda · Jul 7, 2020 · 03efc87 · 03efc87
1 parent 58e6888
commit 03efc87
Show file tree

Hide file tree

Showing 20 changed files with 2,186 additions and 2,368 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,6 @@
+coverage
+dist
+release
+CHANGELOG.md
+/tslint-rules
+!/.*.js
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,19 @@
+{
+  "extends": "@1stg/eslint-config/loose",
+  "overrides": [
+    {
+      "files": "*.spec.ts",
+      "rules": {
+        "@typescript-eslint/no-extraneous-class": 0,
+        "jest/expect-expect": 0,
+        "jest/no-export": 0,
+        "sonarjs/no-duplicate-string": 0
+      }
+    }
+  ],
+  "rules": {
+    "@typescript-eslint/no-misused-promises": 0,
+    "accessor-pairs": 0,
+    "prefer-promise-reject-errors": 0
+  }
+}
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1 @@
+"@1stg/prettier-config/semi/angular"
diff --git a/.remarkrc b/.remarkrc
@@ -0,0 +1,9 @@
+{
+  "plugins": [
+    "@1stg/remark-config",
+    [
+      "lint-no-file-name-irregular-characters",
+      false
+    ]
+  ]
+}
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -7,7 +7,6 @@ module.exports = {
   ],
   addons: [
     '@storybook/addon-docs',
-    '@storybook/addon-options',
     '@storybook/addon-knobs',
     '@storybook/addon-actions',
     '@storybook/addon-storysource',

diff --git a/.stylelintrc b/.stylelintrc
@@ -0,0 +1,16 @@
+{
+  "extends": "@1stg/stylelint-config/scss/loose",
+  "rules": {
+    "no-descending-specificity": null,
+    "plugin/no-unsupported-browser-features": null,
+    "scss/no-duplicate-dollar-variables": null,
+    "selector-type-no-unknown": [
+      true,
+      {
+        "ignoreTypes": [
+          "/^(aui|ng)-/"
+        ]
+      }
+    ]
+  }
+}
diff --git a/package.json b/package.json
@@ -35,127 +35,57 @@
     "test:watch": "jest --watch"
   },
   "peerDependencies": {
-    "@angular/animations": "^9.0.0",
-    "@angular/cdk": "^9.0.0",
-    "@angular/common": "^9.0.0",
-    "@angular/core": "^9.0.0",
-    "@angular/forms": "^9.0.0",
-    "@angular/platform-browser": "^9.0.0",
-    "clipboard-polyfill": "^2.0.0",
+    "@angular/animations": "^10.0.0",
+    "@angular/cdk": "^10.0.0",
+    "@angular/common": "^10.0.0",
+    "@angular/core": "^10.0.0",
+    "@angular/forms": "^10.0.0",
+    "@angular/platform-browser": "^10.0.0",
+    "clipboard-polyfill": "^3.0.0",
     "rxjs": "^6.0.0"
   },
   "devDependencies": {
-    "@1stg/app-config": "^0.5.3",
-    "@1stg/lib-config": "^0.5.3",
-    "@1stg/tslint-config": "^0.8.3",
-    "@angular-devkit/build-angular": "^0.901.1",
-    "@angular-devkit/core": "^9.1.1",
-    "@angular/animations": "^9.1.1",
-    "@angular/cdk": "^9.2.0",
-    "@angular/cli": "^9.1.1",
-    "@angular/common": "^9.1.1",
-    "@angular/compiler": "^9.1.1",
-    "@angular/compiler-cli": "^9.1.1",
-    "@angular/core": "^9.1.1",
-    "@angular/forms": "^9.1.1",
-    "@angular/platform-browser": "^9.1.1",
-    "@angular/platform-browser-dynamic": "^9.1.1",
-    "@babel/core": "^7.9.0",
+    "@1stg/app-config": "^0.5.5",
+    "@1stg/lib-config": "^0.5.5",
+    "@1stg/tslint-config": "^0.8.5",
+    "@angular-devkit/build-angular": "0.1000.1",
+    "@angular-devkit/core": "^10.0.1",
+    "@angular/animations": "^10.0.2",
+    "@angular/cdk": "^10.0.1",
+    "@angular/cli": "^10.0.1",
+    "@angular/common": "^10.0.2",
+    "@angular/compiler": "^10.0.2",
+    "@angular/compiler-cli": "^10.0.2",
+    "@angular/core": "^10.0.2",
+    "@angular/forms": "^10.0.2",
+    "@angular/platform-browser": "^10.0.2",
+    "@angular/platform-browser-dynamic": "^10.0.2",
     "@storybook/addon-actions": "^5.3.18",
     "@storybook/addon-docs": "^5.3.18",
     "@storybook/addon-knobs": "^5.3.18",
-    "@storybook/addon-options": "^5.3.18",
     "@storybook/addon-storysource": "^5.3.18",
     "@storybook/addons": "^5.3.18",
     "@storybook/angular": "^5.3.18",
     "@storybook/cli": "^5.3.18",
     "@storybook/source-loader": "^5.3.18",
-    "@types/jest": "^25.2.1",
-    "@types/node": "^14.0.4",
-    "autoprefixer": "^9.8.0",
+    "@types/jest": "^26.0.4",
+    "@types/node": "^14.0.18",
     "babel-loader": "^8.1.0",
-    "clipboard-polyfill": "^2.8.6",
-    "core-js": "^3.6.5",
+    "clipboard-polyfill": "^3.0.0-pre5",
     "gulp": "^4.0.2",
     "gulp-dart-sass": "^1.0.2",
-    "jest": "^26.0.1",
-    "jest-junit": "^10.0.0",
-    "jest-preset-angular": "^8.1.3",
-    "ng-packagr": "^9.1.0",
+    "jest": "^26.1.0",
+    "jest-junit": "^11.0.1",
+    "jest-preset-angular": "^8.2.1",
+    "ng-packagr": "^10.0.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.0.4",
-    "react": "^16.13.1",
-    "react-is": "^16.13.1",
-    "regenerator-runtime": "^0.13.5",
-    "replace": "^1.1.5",
-    "rollup": "^2.10.5",
-    "rxjs": "^6.5.5",
+    "rxjs": "^6.6.0",
     "standard-version": "^8.0.0",
     "tsconfig-paths-webpack-plugin": "^3.2.0",
-    "tsickle": "0.38.1",
     "tslib": "^2.0.0",
     "tslint": "^6.1.1",
-    "typescript": "3.7.5",
-    "webpack": "^4.42.1",
-    "yarn-deduplicate": "^2.0.0",
-    "zone.js": "^0.10.3"
-  },
-  "commitlint": {
-    "extends": [
-      "@1stg"
-    ]
-  },
-  "eslintConfig": {
-    "extends": "@1stg/eslint-config/loose",
-    "overrides": [
-      {
-        "files": "*.spec.ts",
-        "rules": {
-          "@typescript-eslint/no-extraneous-class": 0,
-          "jest/expect-expect": 0,
-          "jest/no-export": 0,
-          "sonarjs/no-duplicate-string": 0
-        }
-      }
-    ],
-    "rules": {
-      "@typescript-eslint/no-misused-promises": 0,
-      "accessor-pairs": 0,
-      "prefer-promise-reject-errors": 0
-    }
-  },
-  "eslintIgnore": [
-    "coverage",
-    "dist",
-    "release",
-    "CHANGELOG.md",
-    "/tslint-rules",
-    "!/.*.js"
-  ],
-  "prettier": "@1stg/prettier-config/semi/angular",
-  "remarkConfig": {
-    "plugins": [
-      "@1stg/remark-config",
-      [
-        "lint-no-file-name-irregular-characters",
-        false
-      ]
-    ]
-  },
-  "stylelint": {
-    "extends": "@1stg/stylelint-config/scss/loose",
-    "rules": {
-      "no-descending-specificity": null,
-      "plugin/no-unsupported-browser-features": null,
-      "scss/no-duplicate-dollar-variables": null,
-      "selector-type-no-unknown": [
-        true,
-        {
-          "ignoreTypes": [
-            "/^(aui|ng)-/"
-          ]
-        }
-      ]
-    }
+    "typescript": "^3.9.6",
+    "yarn-deduplicate": "^2.0.0"
   }
 }
diff --git a/src/accordion/accordion.component.ts b/src/accordion/accordion.component.ts
@@ -10,9 +10,7 @@ import {
 
 @Component({
   selector: 'aui-accordion',
-  template: `
-    <ng-content></ng-content>
-  `,
+  template: `<ng-content></ng-content>`,
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   preserveWhitespaces: false,

diff --git a/src/autocomplete/autocomplete-placeholder.component.ts b/src/autocomplete/autocomplete-placeholder.component.ts
@@ -6,9 +6,7 @@ import {
 
 @Component({
   selector: 'aui-autocomplete-placeholder',
-  template: `
-    <ng-content></ng-content>
-  `,
+  template: `<ng-content></ng-content>`,
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,

diff --git a/src/notification/notification.service.spec.ts b/src/notification/notification.service.spec.ts
@@ -117,9 +117,7 @@ describe('NotificationService', () => {
 });
 
 @Component({
-  template: `
-    <div class="notification-demo-content">demo content</div>
-  `,
+  template: `<div class="notification-demo-content">demo content</div>`,
 })
 class NotificationContentComponent {}
 

diff --git a/src/select/option-placeholder.component.ts b/src/select/option-placeholder.component.ts
@@ -6,9 +6,7 @@ import {
 
 @Component({
   selector: 'aui-option-placeholder',
-  template: `
-    <ng-content></ng-content>
-  `,
+  template: `<ng-content></ng-content>`,
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,

diff --git a/src/tooltip/tooltip-copy.directive.ts b/src/tooltip/tooltip-copy.directive.ts
@@ -10,7 +10,7 @@ import {
   Renderer2,
   ViewContainerRef,
 } from '@angular/core';
-import clipboard from 'clipboard-polyfill';
+import { writeText } from 'clipboard-polyfill';
 
 import { BaseTooltip } from './base-tooltip';
 import { TooltipCopyIntl } from './tooltip-intl';
@@ -89,7 +89,7 @@ export class TooltipCopyDirective extends BaseTooltip implements OnInit {
   async onSourceClick() {
     if (!this.disabled) {
       try {
-        await clipboard.writeText(this.auiTooltipCopy);
+        await writeText(this.auiTooltipCopy);
         this.content = this.auiTooltipCopySuccessTip;
       } catch {
         this.content = this.auiTooltipCopyFailTip;

diff --git a/src/tree-select/tree-node-placeholder.component.ts b/src/tree-select/tree-node-placeholder.component.ts
@@ -6,9 +6,7 @@ import {
 
 @Component({
   selector: 'aui-tree-node-placeholder',
-  template: `
-    <ng-content></ng-content>
-  `,
+  template: `<ng-content></ng-content>`,
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,

diff --git a/stories/checkbox/checkbox.stories.mdx b/stories/checkbox/checkbox.stories.mdx
@@ -152,7 +152,7 @@ import { CheckboxModule } from '@alauda/ui';
 | label    | string  | -                 | 选项对应值 |
 | value    | boolean | checkbox 的 value |
 
-## Checkbox Group Outputs
+## Checkbox Outputs
 
 | 名称        | 回调参数 | 描述                         |
 | ----------- | -------- | ---------------------------- |

diff --git a/stories/radio/radio.stories.mdx b/stories/radio/radio.stories.mdx
@@ -140,13 +140,13 @@ import { RadioModule } from '@alauda/ui';
 
 ## Radio Group Inputs
 
-| 名称      | 类型              | 默认值           | 描述                                                |
-| --------- | ----------------- | ---------------- | --------------------------------------------------- |
-| name      | string            | -                | Radio group 下所有 input[type="radio"] 的 name 属性 |
-| direction | 'row' \| 'column' | 'row'            | 按钮横纵向排列方式                                  |
-| size      | RadioSize         | RadioSize.Medium | 按钮大小（只针对按钮样式的组合）                    |
-| plain     | boolean           | true             | 是否为朴素按钮（只针对按钮样式的组合）              |
-| value     | any               | -                | Radio group 的 value                                |
+| 名称      | 类型              | 默认值           | 描述                                                  |
+| --------- | ----------------- | ---------------- | ----------------------------------------------------- |
+| name      | string            | -                | Radio group 下所有 `input[type="radio"]` 的 name 属性 |
+| direction | 'row' \| 'column' | 'row'            | 按钮横纵向排列方式                                    |
+| size      | RadioSize         | RadioSize.Medium | 按钮大小（只针对按钮样式的组合）                      |
+| plain     | boolean           | true             | 是否为朴素按钮（只针对按钮样式的组合）                |
+| value     | any               | -                | Radio group 的 value                                  |
 
 ## Radio Group Outputs
 

diff --git a/stories/switch/switch.stories.mdx b/stories/switch/switch.stories.mdx
@@ -25,9 +25,7 @@ import { SwitchModule } from '@alauda/ui';
 <Preview>
   <Story name="basic" height="60px">
     {{
-      template: /* HTML */ `
-        <aui-switch [(ngModel)]="data"></aui-switch>
-      `,
+      template: /* HTML */ ` <aui-switch [(ngModel)]="data"></aui-switch> `,
     }}
   </Story>
 </Preview>

diff --git a/stories/table-of-contents/toc.stories.mdx b/stories/table-of-contents/toc.stories.mdx
@@ -136,19 +136,19 @@ import { TableOfContentsModule } from '@alauda/ui';
   </Story>
 </Preview>
 
-## 使用场景:
+## 使用场景
 
 左侧 link 高亮显示当前 container 中显示的 content。
 点击触发 link 时，container 内平滑滚动至 link 绑定的 content。  
 提供 scrollTo 方法支持控制滚动到指定的 content。
 支持 content 内嵌自定义内容。
 
-## 使用限制:
+## 使用限制
 
 container 必须是可滚动的。
 如果滚动到底部，scrollHeight - scrollTop === clientHeight，则默认选中最后一个 content。
 
-## 基本使用方式:
+## 基本使用方式
 
 ```html
 <!-- links -->
@@ -169,7 +169,7 @@ container 必须是可滚动的。
 
 可以在 css 中为 link 和 content 设置 ‘.isActive’, 指定当 link 和 content 被选中时的样式。
 
-## Directives:
+## Directives
 
 ### auiTocContainer Outputs
 

diff --git a/stories/tooltip/tooltip.stories.mdx b/stories/tooltip/tooltip.stories.mdx
@@ -70,6 +70,22 @@ import { TooltipModule, ButtonModule } from '@alauda/ui';
   </Story>
 </Preview>
 
+## 复制
+
+<Preview>
+  <Story name="copy" height="100px">
+    {{
+      template: /* HTML */ `<button
+        aui-button="primary"
+        auiTooltipCopy="Content"
+        auiTooltipCopyTip="Tips"
+      >
+        Click to copy
+      </button>`,
+    }}
+  </Story>
+</Preview>
+
 ## 弹出位置
 
 <Preview>