Feat/aui storybook7 new demo

.changeset/few-lies-explain.md

@@ -0,0 +1,5 @@
+---
+'@alauda/ui': major
+---
+
+angular upgrade v16, storybook upgrade v7

.storybook/main.ts

@@ -1,33 +1,29 @@
-import { StorybookConfig } from '@storybook/core-common';
+import type { StorybookConfig } from '@storybook/angular';
+import remarkGfm from 'remark-gfm';
 
 const config: StorybookConfig = {
-  core: {
-    builder: 'webpack5',
-  },
-  stories: [
-    '../stories/**/index.@(js|ts)',
-    '../stories/**/*.stories.@(js|ts|mdx)',
-  ],
+  stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
-    '@storybook/addon-docs',
-    '@storybook/addon-knobs',
-    '@storybook/addon-actions',
-    '@storybook/addon-storysource',
-    'storybook-dark-mode',
-  ],
-  webpackFinal(config) {
-    config.module.rules.push({
-      test: /\.stories\.tsx?$/,
-      use: [
-        {
-          loader: require.resolve('@storybook/source-loader'),
-          options: { parser: 'typescript' },
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        mdxPluginOptions: {
+          mdxCompileOptions: {
+            remarkPlugins: [remarkGfm],
+          },
         },
-      ],
-      enforce: 'pre',
-    });
-    return config;
+      },
+    },
+  ],
+  framework: {
+    name: '@storybook/angular',
+    options: {},
+  },
+  docs: {
+    autodocs: true,
   },
 };
-
 export default config;

.storybook/preview.ts

@@ -1,4 +1,10 @@
+import { setCompodocJson } from '@storybook/addon-docs/angular';
 import { addons } from '@storybook/addons';
+import type { Preview } from '@storybook/angular';
+
+import docJson from '../documentation.json';
+
+setCompodocJson(docJson);
 
 const channel = addons.getChannel();
 
@@ -7,3 +13,17 @@ channel.addListener('DARK_MODE', isDark => {
     .querySelector('html')
     .setAttribute('aui-theme-mode', isDark ? 'dark' : 'light');
 });
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;

.storybook/tsconfig.json

@@ -1,4 +1,11 @@
 {
   "extends": "../tsconfig",
-  "include": ["./*.ts", "../stories"]
+  "compilerOptions": {
+    "types": ["node"],
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true
+  },
+  "exclude": ["../stories/test.ts", "../stories/**/*.spec.ts"],
+  "include": ["../stories/**/*", "./preview.ts"],
+  "files": ["./typings.d.ts"]
 }

.storybook/typings.d.ts

@@ -0,0 +1,4 @@
+declare module '*.md' {
+  const content: string;
+  export default content;
+}

angular.json

@@ -24,6 +24,8 @@
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
             "outputPath": "dist",
+            "index": "",
+            "main": "",
             "tsConfig": "tsconfig.json",
             "inlineStyleLanguage": "scss",
             "styles": ["src/theme/style.scss"]
@@ -54,9 +56,28 @@
             }
           },
           "defaultConfiguration": "production"
+        },
+        "storybook": {
+          "builder": "@storybook/angular:start-storybook",
+          "options": {
+            "configDir": ".storybook",
+            "browserTarget": "storybook:build",
+            "compodoc": true,
+            "compodocArgs": ["-e", "json", "-d", "."],
+            "port": 6006
+          }
+        },
+        "build-storybook": {
+          "builder": "@storybook/angular:build-storybook",
+          "options": {
+            "configDir": ".storybook",
+            "browserTarget": "storybook:build",
+            "compodoc": true,
+            "compodocArgs": ["-e", "json", "-d", "."],
+            "outputDir": "dist"
+          }
         }
       }
     }
-  },
-  "defaultProject": "storybook"
+  }
 }

package.json

@@ -30,77 +30,96 @@
     "prerelease": "yarn build",
     "release": "changeset publish",
     "start": "yarn storybook",
-    "storybook": "start-storybook -c .storybook -p 6006",
-    "storybook:build": "build-storybook -c .storybook -o dist",
+    "storybook": "ng run storybook:storybook",
+    "storybook:build": "ng run storybook:build-storybook",
     "test": "jest --coverage",
     "test:ci": "JEST_JUNIT_OUTPUT_DIR=reports jest --runInBand --coverage --reporters=jest-junit",
     "test:clear": "jest --clearCache",
     "test:update": "jest -u",
     "test:watch": "jest --watch"
   },
   "peerDependencies": {
-    "@angular/animations": ">=13.0.0",
-    "@angular/cdk": ">=13.0.0",
-    "@angular/common": ">=13.0.0",
-    "@angular/core": ">=13.0.0",
-    "@angular/forms": ">=13.0.0",
-    "@angular/platform-browser": ">=13.0.0",
+    "@angular/animations": ">=16.0.0",
+    "@angular/cdk": ">=16.0.0",
+    "@angular/common": ">=16.0.0",
+    "@angular/core": ">=16.0.0",
+    "@angular/forms": ">=16.0.0",
+    "@angular/platform-browser": ">=16.0.0",
     "dayjs": "^1.0.0",
     "rxjs": "^7.0.0"
   },
   "devDependencies": {
-    "@1stg/app-config": "^4.1.1",
-    "@angular-devkit/build-angular": "^13.3.5",
-    "@angular-devkit/core": "^13.3.5",
-    "@angular/animations": "^13.3.8",
-    "@angular/cdk": "^13.3.7",
-    "@angular/cli": "^13.3.5",
-    "@angular/common": "^13.3.8",
-    "@angular/compiler": "^13.3.8",
-    "@angular/compiler-cli": "^13.3.8",
-    "@angular/core": "^13.3.8",
-    "@angular/forms": "^13.3.8",
-    "@angular/platform-browser": "^13.3.8",
-    "@angular/platform-browser-dynamic": "^13.3.8",
+    "@1stg/commitlint-config": "^3.2.0",
+    "@1stg/eslint-config": "^7.0.0",
+    "@1stg/lint-staged": "^3.4.1",
+    "@1stg/simple-git-hooks": "^0.2.3",
+    "@1stg/stylelint-config": "^5.1.0",
+    "@angular-devkit/build-angular": "^16.1.3",
+    "@angular-devkit/core": "^16.1.3",
+    "@angular-eslint/builder": "^16.0.3",
+    "@angular-eslint/eslint-plugin": "^16.0.3",
+    "@angular-eslint/eslint-plugin-template": "^16.0.3",
+    "@angular-eslint/schematics": "^16.0.3",
+    "@angular-eslint/template-parser": "^16.0.3",
+    "@angular/animations": "^16.1.3",
+    "@angular/cdk": "^16.1.3",
+    "@angular/cli": "^16.1.3",
+    "@angular/common": "^16.1.3",
+    "@angular/compiler": "^16.1.3",
+    "@angular/compiler-cli": "^16.1.3",
+    "@angular/core": "^16.1.3",
+    "@angular/forms": "^16.1.3",
+    "@angular/platform-browser": "^16.1.3",
+    "@angular/platform-browser-dynamic": "^16.1.3",
+    "@babel/eslint-parser": "^7.18.9",
+    "@babel/eslint-plugin": "^7.17.7",
     "@changesets/changelog-github": "^0.4.4",
     "@changesets/cli": "^2.22.0",
-    "@storybook/addon-actions": "^6.4.22",
-    "@storybook/addon-docs": "^6.4.22",
-    "@storybook/addon-knobs": "^6.1.21",
-    "@storybook/addon-storysource": "^6.4.22",
-    "@storybook/addons": "^6.4.22",
-    "@storybook/angular": "^6.4.22",
-    "@storybook/builder-webpack5": "^6.4.22",
-    "@storybook/cli": "^6.4.22",
-    "@storybook/manager-webpack5": "^6.4.22",
-    "@storybook/source-loader": "^6.4.22",
+    "@compodoc/compodoc": "^1.1.19",
+    "@storybook/addon-essentials": "^7.0.18",
+    "@storybook/addon-interactions": "^7.0.18",
+    "@storybook/addon-links": "^7.0.18",
+    "@storybook/angular": "^7.0.18",
+    "@storybook/blocks": "^7.0.18",
     "@types/chroma-js": "^2.1.3",
     "@types/file-saver": "^2.0.5",
-    "@types/jest": "^27.5.1",
+    "@types/jest": "29.4.4",
     "@types/node": "^17.0.33",
     "@types/resize-observer-browser": "^0.1.5",
+    "@typescript-eslint/eslint-plugin": "^5.30.7",
+    "@typescript-eslint/parser": "^5.30.7",
+    "angular-eslint-template-parser": "^0.1.1",
+    "babel-plugin-dynamic-import-node": "^2.3.3",
     "chroma-js": "^2.1.2",
+    "commitlint": "^17.6.6",
     "css-loader": "^6.7.1",
     "dayjs": "^1.11.2",
     "file-saver": "^2.0.5",
     "gulp": "^4.0.2",
     "gulp-dart-sass": "^1.0.2",
-    "jest": "^28.1.0",
-    "jest-junit": "^13.2.0",
-    "jest-preset-angular": "^12.0.1",
-    "ng-packagr": "^13.3.1",
+    "jest": "29.4.3",
+    "jest-junit": "^16.0.0",
+    "jest-preset-angular": "13.1.1",
+    "lint-staged": "^13.2.3",
+    "ng-packagr": "^16.1.0",
     "patch-package": "^6.4.7",
     "postcss": "^8.4.6",
-    "rxjs": "^7.5.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "remark-gfm": "^3.0.1",
+    "rxjs": "7.8.0",
     "sass-loader": "^12.6.0",
-    "storybook-dark-mode": "^1.1.0",
+    "storybook": "^7.0.9",
+    "storybook-dark-mode": "^3.0.0",
     "style-loader": "^3.3.1",
-    "typescript": "^4.6.4",
+    "ts-jest": "29.0.5",
+    "ts-node": "^10.9.1",
+    "typescript": "^4.9.5",
     "webpack": "^5.72.1",
-    "zone.js": "^0.11.5"
+    "zone.js": "0.12.0"
   },
   "resolutions": {
-    "prettier": "^2.6.2"
+    "prettier": "~2.7.1"
   },
   "publishConfig": {
     "access": "public",

src/anchor/anchor.module.ts

@@ -18,6 +18,5 @@ import { AnchorDirective, AnchorLabelDirective } from './anchor.directive';
     AnchorDirective,
     AnchorLabelDirective,
   ],
-  entryComponents: [AnchorComponent],
 })
 export class AnchorModule {}

src/breadcrumb/__snapshots__/breadcrumb.component.spec.ts.snap

@@ -1,9 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`BreadcrumbComponent should render correct template 1`] = `
-<ng-component
-  __ngContext__={[Function LRootView]}
->
+<ng-component>
   <aui-breadcrumb>
     <div
       class="aui-breadcrumb"

src/checkbox/checkbox.component.scss

@@ -69,7 +69,7 @@ $block: 'aui-checkbox';
     border-color: use-rgb(primary);
     background-color: use-rgb(main-bg);
 
-    &::before {
+    &:before {
       content: '';
       display: block;
       width: 8px;
@@ -82,7 +82,7 @@ $block: 'aui-checkbox';
   &.isIndeterminate.isDisabled &__pointer {
     border-color: use-rgb(p-4);
 
-    &::before {
+    &:before {
       background-color: use-rgb(p-4);
     }
   }

src/dialog/dialog.component.scss

@@ -1,6 +1,7 @@
 @import '../theme/var';
 @import '../theme/mixin';
 @import '../theme/motion';
+@import '../../node_modules/@angular/cdk/overlay-prebuilt';
 
 .cdk-overlay-backdrop.cdk-overlay-backdrop-showing.aui-dialog-backdrop {
   @include modal-backdrop;

src/dialog/dialog.module.ts

@@ -37,7 +37,6 @@ import { DialogService } from './dialog.service';
     DialogFooterComponent,
     DialogCloseDirective,
   ],
-  entryComponents: [DialogComponent, ConfirmDialogComponent],
   providers: [DialogService],
 })
 export class DialogModule {}

src/dialog/dialog.service.spec.ts

@@ -418,6 +418,5 @@ class DialogContentComponent {}
     TestComponent,
     ContentTemplateRefTestComponent,
   ],
-  entryComponents: [DialogContentComponent],
 })
 class TestModule {}

src/drawer/drawer.module.ts

@@ -24,7 +24,6 @@ const COMMON = [
   imports: [CommonModule, IconModule, IconModule, OverlayModule, PortalModule],
   declarations: COMMON,
   exports: COMMON,
-  entryComponents: [DrawerComponent],
   providers: [DrawerService],
 })
 export class DrawerModule {}

src/form/__snapshots__/form.component.spec.ts.snap

@@ -2,8 +2,7 @@
 
 exports[`FormComponent should match snapshot 1`] = `
 <ng-component
-  __ngContext__={[Function LRootView]}
-  form={[Function NgForm]}
+  form={[Function _NgForm]}
 >
   <form
     auiform=""
@@ -71,8 +70,7 @@ exports[`FormComponent should match snapshot 1`] = `
 
 exports[`FormComponent should match snapshot 2`] = `
 <ng-component
-  __ngContext__={[Function LRootView]}
-  form={[Function NgForm]}
+  form={[Function _NgForm]}
 >
   <form
     auiform=""

src/input/input-group/__snapshots__/input-group.component.spec.ts.snap

@@ -1,9 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`InputGroupComponent should match snapshot 1`] = `
-<ng-component
-  __ngContext__={[Function LRootView]}
->
+<ng-component>
   <aui-input-group>
     <div
       class="hasAddonBefore hasAddonAfter hasPrefix hasSuffix aui-input-group aui-input-group--medium"