chore: update .stylelintrc (#1453)

.stylelintrc

@@ -11,6 +11,27 @@
   ],
   "rules": {
     "function-name-case": ["lower", { "ignoreFunctions": ["/colorPalette/"] }],
+    "function-no-unknown": [
+      true,
+      {
+        "ignoreFunctions": [
+          "fade",
+          "tint",
+          "darken",
+          "ceil",
+          "fadein",
+          "floor",
+          "unit",
+          "shade",
+          "lighten",
+          "percentage",
+          "-",
+          "~`colorPalette",
+          "snaplist",
+          "fade-out"
+        ]
+      }
+    ],
     "no-descending-specificity": null,
     "no-invalid-position-at-import-rule": null,
     "declaration-empty-line-before": null,

package.json

@@ -90,13 +90,13 @@
     "@webcomponents/custom-elements": "^1.5.0",
     "aos": "^3.0.0-beta.6",
     "@ng-util/monaco-editor": "^13.0.0",
-    "@nguniversal/express-engine": "~13.0.1",
-    "express": "^4.17.2",
+    "@nguniversal/express-engine": "~13.0.2",
+    "express": "^4.17.3",
     "isutf8": "^4.0.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~13.2.2",
-    "@angular/cli": "~13.2.2",
+    "@angular-devkit/build-angular": "~13.2.5",
+    "@angular/cli": "~13.2.5",
     "@angular/compiler-cli": "~13.2.0",
     "@types/jasmine": "~3.10.0",
     "@types/node": "^12.11.1",
@@ -138,48 +138,48 @@
     "mark-twain": "^2.0.3",
     "mockjs": "^1.1.0",
     "mustache": "^4.2.0",
-    "ng-packagr": "^13.1.2",
+    "ng-packagr": "^13.2.1",
     "parse5": "^6.0.1",
     "prettier": "^2.5.1",
     "readline-sync": "^1.4.10",
     "stream": "0.0.2",
-    "stylelint": "^14.2.0",
+    "stylelint": "^14.5.3",
     "stylelint-config-prettier": "^9.0.3",
     "stylelint-config-rational-order": "^0.1.2",
-    "stylelint-config-standard": "^24.0.0",
+    "stylelint-config-standard": "^25.0.0",
     "stylelint-declaration-block-no-ignored-properties": "^2.5.0",
     "stylelint-order": "^5.0.0",
     "source-map-explorer": "^2.5.2",
-    "xlsx": "^0.17.4",
+    "xlsx": "^0.18.3",
     "jszip": "^3.7.1",
     "plyr": "^3.6.12",
-    "screenfull": "^6.0.0",
-    "less-bundle-promise": "^1.0.7",
+    "screenfull": "^6.0.1",
+    "less-bundle-promise": "^1.0.11",
     "ng-alain-codelyzer": "^0.0.1",
-    "ng-alain-sts": "^0.0.1",
-    "ng-alain-plugin-theme": "^13.0.1",
-    "tsconfig-paths": "^3.12.0",
-    "@nguniversal/builders": "^13.0.1",
+    "ng-alain-sts": "^0.0.2",
+    "ng-alain-plugin-theme": "^13.0.3",
+    "tsconfig-paths": "^3.13.0",
+    "@nguniversal/builders": "^13.0.2",
     "@types/express": "^4.17.13",
     "html-minifier-terser": "^5.1.1",
-    "terser": "^5.10.0",
-    "@commitlint/cli": "^16.0.0",
-    "@commitlint/config-angular": "^16.0.0",
-    "@angular-eslint/builder": "~13.0.1",
-    "@angular-eslint/eslint-plugin": "~13.0.1",
-    "@angular-eslint/eslint-plugin-template": "~13.0.1",
-    "@angular-eslint/schematics": "~13.0.1",
-    "@angular-eslint/template-parser": "~13.0.1",
-    "@typescript-eslint/eslint-plugin": "~5.8.1",
-    "@typescript-eslint/parser": "~5.8.1",
-    "eslint": "^8.5.0",
-    "eslint-config-prettier": "~8.3.0",
-    "eslint-plugin-import": "~2.25.3",
-    "eslint-plugin-jsdoc": "~37.4.0",
+    "terser": "^5.12.0",
+    "@commitlint/cli": "^16.2.1",
+    "@commitlint/config-angular": "^16.2.1",
+    "@angular-eslint/builder": "~13.1.0",
+    "@angular-eslint/eslint-plugin": "~13.1.0",
+    "@angular-eslint/eslint-plugin-template": "~13.1.0",
+    "@angular-eslint/schematics": "~13.1.0",
+    "@angular-eslint/template-parser": "~13.1.0",
+    "@typescript-eslint/eslint-plugin": "~5.14.0",
+    "@typescript-eslint/parser": "~5.14.0",
+    "eslint": "^8.10.0",
+    "eslint-config-prettier": "~8.5.0",
+    "eslint-plugin-import": "~2.25.4",
+    "eslint-plugin-jsdoc": "~37.9.7",
     "eslint-plugin-prefer-arrow": "~1.2.3",
     "eslint-plugin-prettier": "~4.0.0",
     "eslint-plugin-deprecation": "~1.3.2",
-    "lint-staged": "^12.1.4",
+    "lint-staged": "^12.3.5",
     "raw-loader": "^4.0.2",
     "swagger-typescript-api": "^9.3.1",
     "sitemap": "^7.1.1"

src/app/core/code/code.service.ts

@@ -21,6 +21,7 @@ import nzZorroAntdModuleTS from './files/ng-zorro-antd.module';
 import packageJSON from './files/package.json';
 import polyfillTS from './files/polyfill';
 import readme from './files/readme-cli';
+import sandboxConfigJSON from './files/sandbox.config.json';
 import startupServiceTS from './files/startup.service';
 import tsconfigJSON from './files/tsconfig.json';
 
@@ -174,11 +175,12 @@ export class CodeService {
     };
   }
 
-  openOnStackBlitz(appComponentCode: string): void {
+  openOnStackBlitz(title: string, appComponentCode: string): void {
     const res = this.parseCode(appComponentCode);
     const json = deepCopy(angularJSON);
     json.projects.demo.architect.build.options.styles.splice(0, 0, this.themePath);
     const packageJson = this.genPackage({ dependencies: [], devDependencies: [], includeCli: false });
+    packageJson.name = title;
     sdk.openProject(
       {
         title: 'NG-ALAIN',
@@ -214,12 +216,13 @@ export class CodeService {
     );
   }
 
-  openOnCodeSandbox(appComponentCode: string, includeCli: boolean = false): void {
+  openOnCodeSandbox(title: string, appComponentCode: string, includeCli: boolean = false): void {
     const res = this.parseCode(appComponentCode);
     const mockObj = this.genMock;
     const json = deepCopy(angularJSON);
     json.projects.demo.architect.build.options.styles.splice(0, 0, this.themePath);
     const packageJson = this.genPackage({ dependencies: [], devDependencies: [], includeCli });
+    packageJson.name = title;
     const files: {
       [key: string]: {
         content: string;
@@ -301,16 +304,7 @@ export class CodeService {
         isBinary: false
       };
       files['sandbox.config.json'] = {
-        content: JSON.stringify(
-          {
-            template: 'node',
-            container: {
-              node: 14
-            }
-          },
-          null,
-          2
-        ),
+        content: `${JSON.stringify(sandboxConfigJSON, null, 2)}`,
         isBinary: false
       };
     }

src/app/core/code/files/package.json.ts

@@ -1,5 +1,6 @@
 export default {
   name: 'ng-alain',
+  tags: ['NG-ALAIN'],
   version: '0.0.0',
   scripts: {
     ng: 'ng',

src/app/core/code/files/sandbox.config.json.ts

@@ -0,0 +1,10 @@
+export default {
+  infiniteLoopProtection: true,
+  hardReloadOnChange: false,
+  view: 'browser',
+  template: 'node',
+  container: {
+    node: '14',
+    port: 4200
+  }
+};

src/app/core/code/files/tsconfig.json.ts

@@ -17,7 +17,8 @@ export default {
     importHelpers: true,
     target: 'es2017',
     module: 'es2020',
-    lib: ['es2020', 'dom']
+    lib: ['es2020', 'dom'],
+    allowSyntheticDefaultImports: true
   },
   angularCompilerOptions: {
     enableIvy: true,

src/app/routes/form-pages/validator/validator.component.ts

@@ -146,7 +146,7 @@ export class FormValidatorComponent implements OnInit, OnDestroy {
     const componentCode = stackBlitzTpl.replace(/\{(\w+)\}/g, (_match: string, offset: string) =>
       (obj[offset] || '').trim()
     );
-    this.codeSrv.openOnStackBlitz(componentCode);
+    this.codeSrv.openOnStackBlitz('sf-validator', componentCode);
   }
 
   onCopy(): void {

src/app/shared/components/code-box/code-box.component.html

@@ -17,15 +17,18 @@
     <i
       nz-tooltip
       [nzTooltipTitle]="codeSandboxTpl"
-      (click)="openOnlineIDE('CodeSandbox')"
+      (click)="openOnlineIDE('CodeSandbox', true)"
       nz-icon
       nzType="code-sandbox"
       class="code-box-code-icon"
     ></i>
     <ng-template #codeSandboxTpl>
-      {{ 'app.demo.code-sandbox' | i18n }} (
-      <a (click)="openOnlineIDE('CodeSandbox', true)">{{ 'app.demo.code-sandbox-cli' | i18n }}</a>
-      )
+      {{ 'app.demo.code-sandbox' | i18n }}
+      <ng-container *ngIf="false">
+        (
+        <a (click)="openOnlineIDE('CodeSandbox', true)">{{ 'app.demo.code-sandbox-cli' | i18n }}</a>
+        )
+      </ng-container>
     </ng-template>
     <i
       nz-tooltip

src/app/shared/components/code-box/code-box.component.ts

@@ -84,12 +84,12 @@ export class CodeBoxComponent implements OnInit, OnDestroy {
     this.check();
   }
 
-  openOnlineIDE(ide: 'StackBlitz' | 'CodeSandbox' = 'StackBlitz', _: boolean = false): void {
+  openOnlineIDE(ide: 'StackBlitz' | 'CodeSandbox' = 'StackBlitz', includeCli: boolean = false): void {
     if (ide === 'StackBlitz') {
-      this.codeSrv.openOnStackBlitz(this.item.code);
+      this.codeSrv.openOnStackBlitz(this.item.title, this.item.code);
     } else {
-      this.msg.warning(`CodeSandbox does not support Angular 13, pls use StackBlitz!`);
-      // this.codeSrv.openOnCodeSandbox(this.item.code, includeCli);
+      // this.msg.warning(`CodeSandbox does not support Angular 13, pls use StackBlitz!`);
+      this.codeSrv.openOnCodeSandbox(this.item.title, this.item.code, includeCli);
     }
   }