Chore/update ng 20 (#590)

* chore: prepare ng update

* chore: update ng and storybook

* chore: mini src

* chore: scss and cdk upgrade

* fix: namespace error

* chore: no more check selector-no-redundant-nesting-selector

* chore: mod workflow

* chore: mod publish version

* chore: use script exec lin

* chore: use npm exec jest

* chore: update jest and prepare

* chore: update git ignore

* chore: update angular cli

* chore: update files

* chore: update core and cli 21

* chore: update storybook

* chore: up angular cdk

* chore: update unit test

* fix: missing table import

* fix: add missing var namespace prefix

* fix: cdk layer use origin no popover

* feat: export theme scss

* chore: add changeset

---------

Co-authored-by: fengtianze <fengtianze@icloud.com>

Author: yangxiaolang

.changeset/strong-lions-upgrade.md

@@ -0,0 +1,7 @@
+---
+"@alauda/ui": major
+---
+
+feat: upgrade Angular toolchain and Sass theme exports
+
+BREAKING CHANGE: The main branch now targets the Angular 20+ toolchain and updates Sass theme exports and build outputs. Applications that still depend on the v9 Sass import paths, theme structure, or Angular 19-compatible build setup should stay on the `release/v9` maintenance branch until they complete the migration.

.github/workflows/release.yml

@@ -29,6 +29,9 @@ jobs:
           # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
           fetch-depth: 0
 
+      - name: Corepack Enable
+        run: corepack enable
+
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:

.github/workflows/stories.yml

@@ -12,6 +12,9 @@ jobs:
       - name: Checkout Repo
         uses: actions/checkout@v4
 
+      - name: Corepack Enable
+        run: corepack enable
+
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:

.github/workflows/test.yml

@@ -10,6 +10,9 @@ jobs:
       - name: Checkout Repo
         uses: actions/checkout@v4
 
+      - name: Corepack Enable
+        run: corepack enable
+
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
@@ -23,4 +26,4 @@ jobs:
         run: yarn lint
 
       - name: Run test
-        run: yarn test:ci
+        run: npm run test:ci

.gitignore

@@ -12,3 +12,4 @@ reports
 /documentation.json
 /ng-package.debug.json
 /report.*.json
+.yarn/install-state.gz

.storybook/global.scss

@@ -1,2 +1,2 @@
-@import './reset-browser';
-@import '../src/theme/style.scss';
+@use './reset-browser' as *;
+@use '../src/theme/style.scss' as *;

.storybook/main.ts

@@ -5,8 +5,6 @@ const config: StorybookConfig = {
   stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
     '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions',
     {
       name: '@storybook/addon-docs',
       options: {

.storybook/manager.ts

@@ -1,5 +1,5 @@
-import { addons } from '@storybook/manager-api';
-import { create } from '@storybook/theming';
+import { addons } from 'storybook/manager-api';
+import { create } from 'storybook/theming';
 
 addons.setConfig({
   panelPosition: 'right',

.storybook/preview.ts

@@ -1,10 +1,9 @@
 import { setCompodocJson } from '@storybook/addon-docs/angular';
 import type { Preview } from '@storybook/angular';
-import { addons } from '@storybook/manager-api';
+import { addons } from 'storybook/manager-api';
 
 import docJson from '../documentation.json';
 
-// eslint-disable-next-line import/no-webpack-loader-syntax, import/no-unresolved
 import '!style-loader!css-loader!sass-loader!./global.scss';
 
 setCompodocJson(docJson);

.storybook/reset-browser.scss

@@ -1,5 +1,5 @@
-@import '../src/theme/var';
-@import '../src/theme/mixin';
+@use '../src/theme/var' as var;
+@use '../src/theme/mixin' as mixin;
 
 * {
   &,
@@ -55,8 +55,8 @@ body {
   justify-content: center;
   min-width: 100%;
   min-height: 100%;
-  color: use-text-color(main);
-  background-color: use-rgb(n-10);
+  color: var.use-text-color(main);
+  background-color: var.use-rgb(n-10);
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
     Arial, 'Microsoft YaHei', sans-serif;
   font-size: 14px;
@@ -71,7 +71,7 @@ code {
   font-size: 14px;
   line-height: 20px;
   padding: 12px;
-  background: use-rgb(n-9);
+  background: var.use-rgb(n-9);
   border-radius: 2px;
 
   &[ngCodeColorize] {
@@ -83,8 +83,8 @@ input:-webkit-autofill,
 input:-webkit-autofill:hover,
 input:-webkit-autofill:focus,
 input:-webkit-autofill:active {
-  -webkit-text-fill-color: #{use-text-color(main)} !important;
-  box-shadow: 0 0 0 3000px #{use-rgb(main-bg)} inset !important;
+  -webkit-text-fill-color: #{var.use-text-color(main)} !important;
+  box-shadow: 0 0 0 3000px #{var.use-rgb(main-bg)} inset !important;
 }
 
 [hidden] {