[style/ci][taier-ui]improve code style (DTStack#973)

### Introduction
- Add eslint, stylelint and prettier to `taier-ui`
- format all files in `taier-ui`

.github/workflows/build.yml

@@ -1,6 +1,16 @@
 name: Build With Mvnw
 
-on: [ push, pull_request ]
+on:
+  push:
+    branches: 
+      - master
+    paths-ignore:
+      - 'taier-ui/**'
+  pull_request:
+    branches:
+      - master
+    paths-ignore:
+      - 'taier-ui/**'
 
 jobs:
   build:

.github/workflows/web-ci.yml

@@ -0,0 +1,71 @@
+name: Taier Web CI
+
+on:
+  push:
+    branches:
+      - master
+    paths:
+      - "taier-ui/**"
+  pull_request:
+    branches:
+      - master
+    paths:
+      - "taier-ui/**"
+
+jobs:
+  build:
+    runs-on: ${{ matrix.os }}
+    env:
+      working-directory: ./taier-ui
+    strategy:
+      matrix:
+        os: [ubuntu-latest, windows-latest]
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Use Node.js 16
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          registry-url: "https://registry.npmjs.org/"
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 7
+          run_install: false
+
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        working-directory: ${{ env.working-directory }}
+        run: pwd && pnpm install
+
+      - name: Lint code
+        working-directory: ${{ env.working-directory }}
+        run: pnpm lint:es && pnpm lint:css
+
+      - name: Run build
+        working-directory: ${{ env.working-directory }}
+        run: pnpm build
+
+      - name: Run tests
+        working-directory: ${{ env.working-directory }}
+        run: pnpm test
+        env:
+          CI: true
+          NODE_ENV: test

taier-ui/.eslintrc.js

@@ -1,10 +1,10 @@
 module.exports = {
-	extends: [require.resolve('@umijs/fabric/dist/eslint')],
-	parserOptions: {},
-	rules: {
-		'no-use-before-define': 'off',
-		'@typescript-eslint/no-use-before-define': 'off',
-		'consistent-return': 'off',
-		'react-hooks/exhaustive-deps': 'off',
-	},
+    extends: [require.resolve('ko-lint-config/.eslintrc')],
+    parserOptions: {},
+    rules: {
+        // Since there are majority of code have to use the not-null-assertion
+        '@typescript-eslint/no-non-null-assertion': 'off',
+        // Turn it to warn temporarily since there are some code have to use this comment to skip ts checker
+        '@typescript-eslint/ban-ts-comment': 'warn',
+    },
 };

taier-ui/.prettierrc.js

@@ -1,5 +1,6 @@
-const fabric = require('@umijs/fabric');
+const prettier = require('ko-lint-config/.prettierrc');
 
 module.exports = {
-  ...fabric.prettier,
-};
+    ...prettier,
+    printWidth: 120,
+};

taier-ui/.stylelintrc.js

@@ -1,6 +1,15 @@
 module.exports = {
-	extends: [require.resolve('@umijs/fabric/dist/stylelint')],
-	rules: {
-		'at-rule-no-unknown': null,
-	},
+    extends: [require.resolve('ko-lint-config/.stylelintrc')],
+    rules: {
+        // Although hexadecimal is traditionally written in uppercase, but we choose lower only because of quicker to read
+        'color-hex-case': 'lower',
+        // Prefer more empty line between style because of quicker to read
+        'rule-empty-line-before': [
+            'always',
+            {
+                except: ['after-single-line-comment', 'first-nested'],
+            },
+        ],
+        'custom-property-pattern': '^([a-zA-Z]*)(-[a-zA-Z]+)*$',
+    },
 };

taier-ui/.umirc.ts

@@ -2,71 +2,65 @@ import { defineConfig } from 'umi';
 import MonacoWebpackPlugin from 'monaco-editor-webpack-plugin';
 
 export default defineConfig({
-	title: 'Taier | DTStack',
-	favicon: 'images/favicon.png',
-	hash: true,
-	publicPath: "./",
-	base: './',
-	ignoreMomentLocale: true,
-	targets: {
-		ios: false,
-	},
-	nodeModulesTransform: {
-		type: 'none',
-	},
-	webpack5: {},
-	dynamicImportSyntax: {},
-	routes: [
-		{
-			path: '/',
-			component: '@/layout/index',
-			routes: [
-				{
-					path: '/',
-					component: '@/pages/index',
-				},
-			],
-		},
-	],
-	chainWebpack(memo, { env }) {
-		memo.output.globalObject('this').set('globalObject', 'this');
-		memo.entry('sparksql.worker').add(
-			'monaco-sql-languages/out/esm/sparksql/sparksql.worker.js',
-		);
-		memo.entry('sql.worker').add('monaco-sql-languages/out/esm/sql/sql.worker.js');
-		memo.entry('hivesql.worker').add('monaco-sql-languages/out/esm/hivesql/hivesql.worker.js');
-		memo.entry('mysql.worker').add('monaco-sql-languages/out/esm/mysql/mysql.worker.js');
-		memo.entry('flinksql.worker').add(
-			'monaco-sql-languages/out/esm/flinksql/flinksql.worker.js',
-		);
-		memo.plugin('monaco-editor').use(MonacoWebpackPlugin, [
-			{
-				languages: ['json', 'python', 'shell'],
-			},
-		]);
+    title: 'Taier | DTStack',
+    favicon: 'images/favicon.png',
+    hash: true,
+    publicPath: './',
+    base: './',
+    ignoreMomentLocale: true,
+    targets: {
+        ios: false,
+    },
+    nodeModulesTransform: {
+        type: 'none',
+    },
+    webpack5: {},
+    dynamicImportSyntax: {},
+    routes: [
+        {
+            path: '/',
+            component: '@/layout/index',
+            routes: [
+                {
+                    path: '/',
+                    component: '@/pages/index',
+                },
+            ],
+        },
+    ],
+    chainWebpack(memo, { env }) {
+        memo.output.globalObject('this').set('globalObject', 'this');
+        memo.entry('sparksql.worker').add('monaco-sql-languages/out/esm/sparksql/sparksql.worker.js');
+        memo.entry('sql.worker').add('monaco-sql-languages/out/esm/sql/sql.worker.js');
+        memo.entry('hivesql.worker').add('monaco-sql-languages/out/esm/hivesql/hivesql.worker.js');
+        memo.entry('mysql.worker').add('monaco-sql-languages/out/esm/mysql/mysql.worker.js');
+        memo.entry('flinksql.worker').add('monaco-sql-languages/out/esm/flinksql/flinksql.worker.js');
+        memo.plugin('monaco-editor').use(MonacoWebpackPlugin, [
+            {
+                languages: ['json', 'python', 'shell'],
+            },
+        ]);
 
-		const isDev = env === 'development';
-		if (!isDev) {
-			// ignore *.worker.js hash
-			memo.output.set('filename', (pathData: any) => {
-				return pathData.chunk.name.endsWith('.worker')
-					? '[name].js'
-					: `[name].[contenthash:8].js`;
-			});
-		}
-		return memo;
-	},
-	esbuild: {},
-	theme: {
-		'primary-color': '#3f87ff',
-		'border-radius-base': '0px',
-	},
-	tailwindcss: {},
-	proxy: {
-		'/taier': {
+        const isDev = env === 'development';
+        if (!isDev) {
+            // ignore *.worker.js hash
+            memo.output.set('filename', (pathData: any) => {
+                return pathData.chunk.name.endsWith('.worker') ? '[name].js' : `[name].[contenthash:8].js`;
+            });
+        }
+        return memo;
+    },
+    esbuild: {},
+    theme: {
+        'primary-color': '#3f87ff',
+        'border-radius-base': '0px',
+    },
+    tailwindcss: {},
+    proxy: {
+        '/taier': {
 			target: 'http://localhost:8090',
-			changeOrigin: true,
-			secure: false,
-		},
-	},
+            changeOrigin: true,
+            secure: false,
+        },
+    },
 });