feat: storybook7 mdx2+csf3

.eslintrc

@@ -1,5 +1,5 @@
 {
-  "extends": "./tools/eslintrc/index.js",
+  "extends": "@1stg/eslint-config/loose",
   "parserOptions": {
     "requireConfigFile": false
   },
@@ -50,36 +50,6 @@
     "@angular-eslint/no-input-rename": "off",
     "@angular-eslint/no-output-rename": "off",
     "@angular-eslint/no-host-metadata-property": "off",
-    "@typescript-eslint/no-unsafe-argument": "off",
-    "@angular-eslint/template/eqeqeq": 0,
-    "@angular-eslint/template/no-negated-async": 0,
-    "@typescript-eslint/member-ordering": 0,
-    "@typescript-eslint/naming-convention": 0,
-    "@typescript-eslint/no-explicit-any": 0,
-    "@typescript-eslint/no-floating-promises": 0,
-    "@typescript-eslint/no-magic-numbers": 0,
-    "@typescript-eslint/no-type-alias": 0,
-    "@typescript-eslint/no-unnecessary-condition": 0,
-    "@typescript-eslint/no-unsafe-assignment": 0,
-    "@typescript-eslint/no-unsafe-member-access": 0,
-    "@typescript-eslint/no-unsafe-return": 0,
-    "@typescript-eslint/prefer-ts-expect-error": 0,
-    "@typescript-eslint/restrict-plus-operands": 0,
-    "@typescript-eslint/sort-type-union-intersection-members": 0,
-    "@typescript-eslint/unbound-method": 0,
-    "@typescript-eslint/no-inferrable-types": 0,
-    "regexp/optimal-quantifier-concatenation": 1,
-    "arrow-body-style": 0,
-    "accessor-pairs": 0,
-    "no-magic-numbers": 0,
-    "no-negated-condition": 0,
-    "promise/always-return": 0,
-    "promise/catch-or-return": 0,
-    "unicorn/explicit-length-check": 0,
-    "unicorn/no-array-for-each": 0,
-    "unicorn/no-fn-reference-in-iterator": 0,
-    "unicorn/prefer-number-properties": 0,
-    "unicorn/prefer-prototype-methods": 0,
-    "unicorn/prefer-spread": 0
+    "@typescript-eslint/no-unsafe-argument": "off"
   }
 }

.storybook/main.ts

@@ -1,43 +1,29 @@
-import type { StorybookConfig } from "@storybook/angular";
+import type { StorybookConfig } from '@storybook/angular';
+import remarkGfm from 'remark-gfm';
 
 const config: StorybookConfig = {
-  core: {},
-  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,
   },
-  features: {
-    legacyMdx1: true, // Enables MDX v1 support
-    storyStoreV7: false, // Opt out of on-demand story loading
-  },
 };
 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

@@ -62,22 +62,20 @@
           "options": {
             "configDir": ".storybook",
             "browserTarget": "storybook:build",
-            "compodoc": false,
+            "compodoc": true,
+            "compodocArgs": ["-e", "json", "-d", "."],
             "port": 6006
-          },
-          "compodoc": true,
-          "compodocArgs": ["-e", "json", "-d", "."]
+          }
         },
         "build-storybook": {
           "builder": "@storybook/angular:build-storybook",
           "options": {
             "configDir": ".storybook",
             "browserTarget": "storybook:build",
-            "compodoc": false,
+            "compodoc": true,
+            "compodocArgs": ["-e", "json", "-d", "."],
             "outputDir": "dist"
-          },
-          "compodoc": true,
-          "compodocArgs": ["-e", "json", "-d", "."]
+          }
         }
       }
     }