feat: manually mirror opencoze's code from bytedance

Change-Id: I09a73aadda978ad9511264a756b2ce51f5761adf

frontend/packages/data/common/feature-register/.storybook/main.js

@@ -0,0 +1,31 @@
+import { mergeConfig } from 'vite';
+import svgr from 'vite-plugin-svgr';
+
+/** @type { import('@storybook/react-vite').StorybookConfig } */
+const config = {
+  stories: ['../stories/**/*.mdx', '../stories/**/*.stories.tsx'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+  viteFinal: config =>
+    mergeConfig(config, {
+      plugins: [
+        svgr({
+          svgrOptions: {
+            native: false,
+          },
+        }),
+      ],
+    }),
+};
+export default config;

frontend/packages/data/common/feature-register/.storybook/preview.js

@@ -0,0 +1,14 @@
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

frontend/packages/data/common/feature-register/.stylelintrc.js

@@ -0,0 +1,5 @@
+const { defineConfig } = require('@coze-arch/stylelint-config');
+
+module.exports = defineConfig({
+  extends: [],
+});

frontend/packages/data/common/feature-register/README.md

@@ -0,0 +1,16 @@
+# @coze-data/feature-register
+
+> Project template for react component with storybook.
+
+## Features
+
+- [x] eslint & ts
+- [x] esm bundle
+- [x] umd bundle
+- [x] storybook
+
+## Commands
+
+- init: `rush update`
+- dev: `npm run dev`
+- build: `npm run build`

frontend/packages/data/common/feature-register/config/rush-project.json

@@ -0,0 +1,12 @@
+{
+  "operationSettings": [
+    {
+      "operationName": "test:cov",
+      "outputFolderNames": ["coverage"]
+    },
+    {
+      "operationName": "ts-check",
+      "outputFolderNames": ["dist"]
+    }
+  ]
+}

frontend/packages/data/common/feature-register/eslint.config.js

@@ -0,0 +1,7 @@
+const { defineConfig } = require('@coze-arch/eslint-config');
+
+module.exports = defineConfig({
+  packageRoot: __dirname,
+  preset: 'web',
+  rules: {},
+});

frontend/packages/data/common/feature-register/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@coze-data/feature-register",
+  "version": "0.0.1",
+  "description": "feature 注册器",
+  "license": "Apache-2.0",
+  "author": "haozhenfei@bytedance.com",
+  "maintainers": [],
+  "main": "src/index.ts",
+  "scripts": {
+    "build": "exit 0",
+    "lint": "eslint ./ --cache",
+    "test": "vitest --run --passWithNoTests",
+    "test:cov": "npm run test -- --coverage"
+  },
+  "dependencies": {
+    "@coze-arch/logger": "workspace:*",
+    "ahooks": "^3.7.8",
+    "classnames": "^2.3.2",
+    "immer": "^10.0.3",
+    "type-fest": "^3.6.0",
+    "use-sync-external-store": "^1.2.0"
+  },
+  "devDependencies": {
+    "@coze-arch/bot-typings": "workspace:*",
+    "@coze-arch/eslint-config": "workspace:*",
+    "@coze-arch/stylelint-config": "workspace:*",
+    "@coze-arch/ts-config": "workspace:*",
+    "@coze-arch/vitest-config": "workspace:*",
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@types/react": "18.2.37",
+    "@types/react-dom": "18.2.15",
+    "@types/use-sync-external-store": "^0.0.6",
+    "@vitest/coverage-v8": "~3.0.5",
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "stylelint": "^15.11.0",
+    "vite-plugin-svgr": "~3.3.0",
+    "vitest": "~3.0.5"
+  },
+  "peerDependencies": {
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0"
+  }
+}
+

frontend/packages/data/common/feature-register/src/external-store.ts

@@ -0,0 +1,64 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+/* eslint-disable @typescript-eslint/naming-convention */
+import { unstable_batchedUpdates } from 'react-dom';
+
+import type { Draft } from 'immer';
+import { enableMapSet, produce } from 'immer';
+
+export type Disposer = () => void;
+
+export interface IExternalStore<T> {
+  subscribe: (onStoreChange: () => void) => () => void;
+  getSnapshot: () => T;
+}
+
+export abstract class ExternalStore<T> implements IExternalStore<T> {
+  constructor() {
+    enableMapSet();
+  }
+
+  private _listeners: Set<() => void> = new Set();
+
+  protected abstract _state: T;
+
+  protected _produce = (recipe: (draft: Draft<T>) => void): void => {
+    const newState = produce(this._state, recipe);
+    if (newState !== this._state) {
+      this._state = newState;
+      this._dispatch();
+    }
+  };
+
+  private _dispatch = (): void => {
+    if (!this._listeners.size) {
+      return;
+    }
+    unstable_batchedUpdates(() => {
+      this._listeners.forEach(listener => listener());
+    });
+  };
+
+  subscribe = (onStoreChange: () => void): Disposer => {
+    this._listeners.add(onStoreChange);
+    return () => {
+      this._listeners.delete(onStoreChange);
+    };
+  };
+
+  getSnapshot = (): T => this._state;
+}

frontend/packages/data/common/feature-register/src/feature-registry-manager.ts

@@ -0,0 +1,43 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+/* eslint-disable @typescript-eslint/naming-convention */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { ExternalStore } from './external-store';
+import type { FeatureRegistry } from '.';
+
+class FeatureRegistryManager extends ExternalStore<
+  Set<FeatureRegistry<any, any, any>>
+> {
+  protected _state = new Set<FeatureRegistry<any, any, any>>();
+
+  add(featureRegistry: FeatureRegistry<any, any, any>) {
+    this._produce(draft => {
+      draft.add(featureRegistry);
+    });
+  }
+
+  delete(featureRegistry: FeatureRegistry<any, any, any>) {
+    this._produce(draft => {
+      draft.delete(featureRegistry);
+    });
+  }
+}
+
+/**
+ * FeatureRegistryManager 的实例，用于注册和注销 FeatureRegistry。开发过程中 FeatureRegistry 初始化的时候会写入到这个实例中，方便调试。
+ */
+export const featureRegistryManager = new FeatureRegistryManager();

frontend/packages/data/common/feature-register/src/index.ts

@@ -0,0 +1,504 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+/* eslint-disable @typescript-eslint/naming-convention */
+import type { SetRequired } from 'type-fest';
+import type { Draft } from 'immer';
+import { castDraft } from 'immer';
+import { logger } from '@coze-arch/logger';
+
+import { featureRegistryManager } from './feature-registry-manager';
+import { ExternalStore } from './external-store';
+
+export type FeatureModule<Type, Module> = Module & {
+  type: Type | string; // 默认给Module增加type字段, 方便作为组件的key
+};
+
+export interface FeatureConfig<Type, Module> {
+  type: Type | string;
+  module?: Module;
+  loader?: () => Promise<{ default: Module }>;
+  tags?: string[]; // 通常用于Feature分组
+}
+
+export interface DefaultFeatureConfig<Type, Module>
+  extends FeatureConfig<Type, Module> {
+  module: Module;
+}
+
+// 通过解析context获取当前应当使用的Feature类型
+export interface FeatureTypeParser<Type, Context> {
+  (context: Context): Type | string;
+}
+
+export interface FeatureRegistryConfig<Type, Module, Context> {
+  name: string;
+  defaultFeature?: DefaultFeatureConfig<Type, Module>;
+  features?: FeatureConfig<Type, Module>[];
+  featureTypeParser?: FeatureTypeParser<Type, Context>;
+}
+
+export interface FeatureTypeInternalThisType<Type> {
+  internalHas: (type: Type | string) => boolean;
+}
+
+export type Disposer = () => void;
+
+export class FeatureRegistry<Type, Module, Context = undefined> extends ExternalStore<{
+  featureMap: Map<string, FeatureConfig<Type, Module>>;
+}> {
+  protected name: string;
+  protected _state: {
+    featureMap: Map<string, FeatureConfig<Type, Module>>;
+  };
+  protected featureTypeParser: FeatureTypeParser<Type, Context> | undefined;
+  private defaultFeature: DefaultFeatureConfig<Type, Module> | undefined;
+  protected get featureMap() {
+    return this._state.featureMap;
+  }
+
+  constructor(config: FeatureRegistryConfig<Type, Module, Context>) {
+    super();
+    const { name, defaultFeature, features, featureTypeParser } = config;
+    this.name = name;
+    this._state = { featureMap: new Map() };
+    if (defaultFeature) {
+      this.setDefaultFeature(defaultFeature);
+    }
+    if (features) {
+      this.registerSome(features);
+    }
+    if (featureTypeParser) {
+      this.setFeatureTypeParser(featureTypeParser);
+    }
+    IS_DEV_MODE && featureRegistryManager.add(this);
+  }
+
+  private getFeature(
+    type: Type | string,
+  ): FeatureConfig<Type, Module> | undefined {
+    const key = this.getFeatureKey(type);
+    const feature = this.featureMap.get(key);
+    if (!feature) {
+      logger.error({
+        error: new Error(
+          `[Message Feature]: ${this.name} get feature not exist ${type}`,
+        ),
+      });
+      return;
+    }
+    return feature;
+  }
+
+  private getFeatureKey(type: Type | string) {
+    return `feature_${this.name}_${type}`;
+  }
+
+  getName() {
+    return this.name;
+  }
+
+  private _register(
+    draft: Draft<{
+      featureMap: Map<string, FeatureConfig<Type, Module>>;
+    }>,
+    feature: FeatureConfig<Type, Module>,
+  ) {
+    const { defaultFeature } = this;
+    const { type } = feature;
+    const key = this.getFeatureKey(type);
+    if (defaultFeature && type === defaultFeature.type) {
+      logger.error({
+        error: new Error(
+          `[Message Feature]: ${this.name} register type is default feature ${type}`,
+        ),
+      });
+      return;
+    }
+    if (this._state.featureMap.get(key)) {
+      logger.warning(
+        `[Message Feature]: ${this.name} register feature already registered ${type}`,
+      );
+    }
+    draft.featureMap.set(key, castDraft(feature));
+  }
+
+  register(feature: FeatureConfig<Type, Module>): () => void {
+    this._produce(draft => {
+      this._register(draft, feature);
+    });
+    return () => {
+      this._produce(draft => {
+        this._deregister(draft, feature.type);
+      });
+    };
+  }
+
+  registerSome(features: FeatureConfig<Type, Module>[]) {
+    this._produce(draft => {
+      features.map(f => this._register(draft, f));
+    });
+    return () => {
+      this._produce(draft => {
+        features.forEach(feature => {
+          this._deregister(draft, feature.type);
+        });
+      });
+    };
+  }
+
+  private _deregister(
+    draft: Draft<{
+      featureMap: Map<string, FeatureConfig<Type, Module>>;
+    }>,
+    type: Type | string,
+  ) {
+    const { defaultFeature } = this;
+    const key = this.getFeatureKey(type);
+    if (defaultFeature && type === defaultFeature.type) {
+      logger.error({
+        error: new Error(
+          `[Message Feature]: ${this.name} deregister type is default feature ${type}`,
+        ),
+      });
+      return;
+    }
+    if (!this._state.featureMap.get(key)) {
+      logger.error({
+        error: new Error(
+          `[Message Feature]: ${this.name} deregister invalid feature ${type}`,
+        ),
+      });
+      return;
+    }
+    draft.featureMap.delete(key);
+  }
+
+  deregister(type: Type | string) {
+    this._produce(draft => {
+      this._deregister(draft, type);
+    });
+  }
+
+  deregisterSome(types: (Type | string)[]) {
+    this._produce(draft => {
+      types.forEach(type => {
+        this._deregister(draft, type);
+      });
+    });
+  }
+
+  deregisterAll() {
+    this._produce(draft => {
+      draft.featureMap = new Map();
+    });
+  }
+
+  // 调用Feature loader加载组件
+  async load(type: Type | string): Promise<void> {
+    const feature = this.getFeature(type);
+    if (!feature) {
+      logger.error({
+        error: new Error(
+          `[Message Feature]: ${this.name} load unknown feature ${type}`,
+        ),
+      });
+      return;
+    }
+    if (!feature.loader) {
+      logger.error({
+        error: new Error(
+          `[Message Feature]: ${this.name} load feature loader unset ${type}`,
+        ),
+      });
+      return;
+    }
+    const module = await feature.loader();
+    this._produce(draft => {
+      const loadedFeature = draft.featureMap.get(this.getFeatureKey(type));
+      if (loadedFeature) {
+        loadedFeature.module = castDraft(module.default);
+      }
+    });
+  }
+
+  // 判断Feature是否已经加载完成
+  isLoaded(type: Type | string): boolean {
+    const feature = this.getFeature(type);
+    if (!feature) {
+      logger.error({
+        error: new Error(
+          `[Message Feature]: ${this.name} isLoaded unknown feature ${type}`,
+        ),
+      });
+      return false;
+    }
+    if (!feature.module) {
+      return false;
+    }
+    return true;
+  }
+
+  // Feature是否注册
+  has(type: Type | string): boolean {
+    return Boolean(this.getFeature(type));
+  }
+
+  /**
+   * 获取 Feature Module
+   *
+   * @param type Feature 类型
+   * @returns 如果 Feature 不存在或者 Feature.Module 是空则返回 undefined
+   */
+  getModule(type: Type | string): Module | undefined {
+    const feature = this.getFeature(type);
+    if (!feature) {
+      logger.error({
+        error: new Error(
+          `[Message Feature][getModule]: ${this.name} get feature not exist ${type}`,
+        ),
+      });
+      return;
+    }
+    if (!feature.module) {
+      logger.error({
+        error: new Error(
+          `[Message Feature][getModule]: ${this.name} get feature module unset ${type}`,
+        ),
+      });
+      return;
+    }
+    return feature.module;
+  }
+
+  /**
+   * 获取 Feature Module
+   *
+   * @deprecated【注意！】这个方法使用时要注意，因为它会导致 module 的 type 字段被覆盖，使用 `getModule()` 方法
+   */
+  get(type: Type | string): FeatureModule<Type, Module> | undefined {
+    const feature = this.getFeature(type);
+    if (!feature) {
+      logger.error({
+        error: new Error(
+          `[Message Feature][get]: ${this.name} get feature not exist ${type}`,
+        ),
+      });
+      return;
+    }
+    if (!feature.module) {
+      logger.error({
+        error: new Error(
+          `[Message Feature][get]: ${this.name} get feature module unset ${type}`,
+        ),
+      });
+      return;
+    }
+    return { ...feature.module, type };
+  }
+
+  async getAsync(
+    type: Type | string,
+  ): Promise<FeatureModule<Type, Module> | undefined> {
+    const feature = this.getFeature(type);
+    if (!feature) {
+      logger.error({
+        error: new Error(
+          `[Message Feature]: ${this.name} getAsync unknown feature ${type}`,
+        ),
+      });
+      return;
+    }
+    if (!feature.module) {
+      await this.load(type);
+    }
+    return this.get(type);
+  }
+
+  /**
+   * 获取所有 Feature 模块的 entries，key 是 feature type，value 是 feature module
+   */
+  entries(): [Type | string, Module][] {
+    const { featureMap } = this;
+    const features = [...featureMap.values()];
+    return features
+      .filter((feature): feature is SetRequired<typeof feature, 'module'> => {
+        if (!feature.module) {
+          logger.warning(
+            `[Message Feature][entries]: ${this.name} entries module unloaded feature.type=${feature.type}`,
+          );
+        }
+        return feature.module !== null && feature.module !== undefined;
+      })
+      .map(feature => [feature.type, feature.module]);
+  }
+
+  async getAllAsync(): Promise<FeatureModule<Type, Module>[]> {
+    const { featureMap } = this;
+    const features = [...featureMap.values()];
+    const modules = await Promise.all(
+      features.map(feature => this.getAsync(feature.type)),
+    );
+    return modules.filter(module => Boolean(module)) as FeatureModule<
+      Type,
+      Module
+    >[];
+  }
+
+  // 通过context获取对应的Feature类型
+  getTypeByContext(context: Context): Type | string {
+    const { featureTypeParser } = this;
+    if (!featureTypeParser) {
+      logger.error({
+        error: new Error(
+          `[Message Feature]: ${this.name} getTypeByContext featureTypeParser unset`,
+        ),
+      });
+      return this.getDefaultType() ?? '';
+    }
+    try {
+      return featureTypeParser(context);
+    } catch (err) {
+      logger.error({
+        error: new Error(
+          `[Message Feature]: ${this.name} getTypeByContext featureTypeParser error ${err}`,
+        ),
+      });
+      return this.getDefaultType() ?? '';
+    }
+  }
+
+  // 通过context获取对应的Feature模块
+  getByContext(context: Context): FeatureModule<Type, Module> | undefined {
+    const type = this.getTypeByContext(context);
+    return this.get(type);
+  }
+
+  async getByContextAsync(
+    context: Context,
+  ): Promise<FeatureModule<Type, Module> | undefined> {
+    const type = this.getTypeByContext(context);
+    return this.getAsync(type);
+  }
+
+  // 获取默认Feature模块
+  getDefault(): FeatureModule<Type, Module> | undefined {
+    if (!this.defaultFeature) {
+      return undefined;
+    }
+    return {
+      type: this.defaultFeature.type,
+      ...this.defaultFeature.module,
+    };
+  }
+
+  // 获取默认Feature类型
+  getDefaultType(): Type | string | undefined {
+    return this.defaultFeature?.type;
+  }
+
+  // 设置默认Feature
+  setDefaultFeature(feature: DefaultFeatureConfig<Type, Module>) {
+    const { type } = feature;
+    const key = this.getFeatureKey(type);
+    this.defaultFeature = feature;
+    this._produce(draft => {
+      draft.featureMap.set(key, castDraft(feature));
+    });
+  }
+
+  // 设置Feature类型解析函数
+  setFeatureTypeParser(parser: FeatureTypeParser<Type, Context>) {
+    this.featureTypeParser = parser.bind({
+      /**
+       * @internal
+       * 内部暴露的非标准 has 方法
+       * 用于实现在返回类型时，查找当前类型是否有注册。
+       * 注意：根据情况，谨慎使用，勿滥用！
+       */
+      internalHas: (type: Type | string): boolean => {
+        try {
+          const key = this.getFeatureKey(type);
+          const feature = this.featureMap.get(key);
+          return Boolean(feature);
+        } catch (err) {
+          logger.error({
+            error: new Error(
+              `[Message Feature]: ${this.name} featureTypeParser internalHas error ${err}`,
+            ),
+          });
+          return false;
+        }
+      },
+    });
+  }
+
+  deregisterByTag(tag: string) {
+    const { featureMap } = this;
+    const features = [...featureMap.values()].filter(f =>
+      f.tags?.includes(tag),
+    );
+    this._produce(draft => {
+      features.forEach(feature => {
+        this._deregister(draft, feature.type);
+      });
+    });
+  }
+
+  // 获取包含对应Tag的Feature模块
+  getByTag(tag: string): FeatureModule<Type, Module>[] {
+    const { featureMap } = this;
+    const features = [...featureMap.values()].filter(feature =>
+      feature.tags?.includes(tag),
+    );
+    if (!features.length) {
+      logger.warning(
+        `[Message Feature]: ${this.name} getByTag no feature include tag ${tag}`,
+      );
+      return [];
+    }
+    return features
+      .map(feature => this.get(feature.type))
+      .filter((module, index) => {
+        if (!module) {
+          logger.warning(
+            `[Message Feature]: ${this.name} getByTag module unloaded features[index].type=${features[index].type}`,
+          );
+        }
+        return Boolean(module);
+      }) as FeatureModule<Type, Module>[];
+  }
+
+  async getByTagAsync(tag: string): Promise<FeatureModule<Type, Module>[]> {
+    const { featureMap } = this;
+    const features = [...featureMap.values()].filter(feature =>
+      feature.tags?.includes(tag),
+    );
+    if (!features.length) {
+      logger.warning(
+        `[Message Feature]: ${this.name} getByTagAsync no feature include tag ${tag}`,
+      );
+      return [];
+    }
+    const modules = await Promise.all(
+      features.map(feature => this.getAsync(feature.type)),
+    );
+    return modules.filter(module => Boolean(module)) as FeatureModule<
+      Type,
+      Module
+    >[];
+  }
+}

frontend/packages/data/common/feature-register/src/react.ts

@@ -0,0 +1,31 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
+
+import type { IExternalStore } from './external-store';
+
+/**
+ * 订阅拥有 subscribe 和 getSnapshot 方法的抽象 registry 的变化，内部使用 useSyncExternalStore 实现
+ */
+export const useRegistryState = <T>(registry: IExternalStore<T>) => {
+  const state = useSyncExternalStore(
+    registry.subscribe,
+    registry.getSnapshot,
+    registry.getSnapshot,
+  );
+  return state;
+};

frontend/packages/data/common/feature-register/src/typings.d.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+/// <reference types='@coze-arch/bot-typings' />

frontend/packages/data/common/feature-register/stories/demo.stories.tsx

@@ -0,0 +1,37 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { DemoComponent } from '../src';
+
+export default {
+  title: 'Example/Demo',
+  component: DemoComponent,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {},
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Base = {
+  args: {
+    name: 'tecvan',
+  },
+};

frontend/packages/data/common/feature-register/stories/hello.mdx

@@ -0,0 +1,34 @@
+import { Meta } from "@storybook/blocks";
+
+<Meta title="Hello world" />
+
+<div className="sb-container">
+  <div className='sb-section-title'>
+    # Hello world
+
+    Hello world
+  </div>
+</div>
+
+<style>
+  {`
+  .sb-container {
+    margin-bottom: 48px;
+  }
+
+  .sb-section {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    gap: 20px;
+  }
+
+  img {
+    object-fit: cover;
+  }
+
+  .sb-section-title {
+    margin-bottom: 32px;
+  }
+  `}
+</style>

frontend/packages/data/common/feature-register/tsconfig.build.json

@@ -0,0 +1,36 @@
+{
+  "extends": "@coze-arch/ts-config/tsconfig.web.json",
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src",
+    "jsx": "react-jsx",
+    "lib": ["DOM", "ESNext"],
+    "module": "ESNext",
+    "target": "ES2020",
+    "moduleResolution": "bundler",
+    "tsBuildInfoFile": "dist/tsconfig.build.tsbuildinfo"
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"],
+  "references": [
+    {
+      "path": "../../../arch/bot-typings/tsconfig.build.json"
+    },
+    {
+      "path": "../../../arch/logger/tsconfig.build.json"
+    },
+    {
+      "path": "../../../../config/eslint-config/tsconfig.build.json"
+    },
+    {
+      "path": "../../../../config/stylelint-config/tsconfig.build.json"
+    },
+    {
+      "path": "../../../../config/ts-config/tsconfig.build.json"
+    },
+    {
+      "path": "../../../../config/vitest-config/tsconfig.build.json"
+    }
+  ]
+}

frontend/packages/data/common/feature-register/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "exclude": ["**/*"],
+  "compilerOptions": {
+    "composite": true
+  },
+  "references": [
+    {
+      "path": "./tsconfig.build.json"
+    },
+    {
+      "path": "./tsconfig.misc.json"
+    }
+  ]
+}

frontend/packages/data/common/feature-register/tsconfig.misc.json

@@ -0,0 +1,20 @@
+{
+  "extends": "@coze-arch/ts-config/tsconfig.web.json",
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "compilerOptions": {
+    "rootDir": "./",
+    "outDir": "./dist",
+    "jsx": "react-jsx",
+    "lib": ["DOM", "ESNext"],
+    "module": "ESNext",
+    "target": "ES2020",
+    "moduleResolution": "bundler"
+  },
+  "include": ["__tests__", "vitest.config.ts", "stories"],
+  "exclude": ["./dist"],
+  "references": [
+    {
+      "path": "./tsconfig.build.json"
+    }
+  ]
+}

frontend/packages/data/common/feature-register/vitest.config.ts

@@ -0,0 +1,22 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { defineConfig } from '@coze-arch/vitest-config';
+
+export default defineConfig({
+  dirname: __dirname,
+  preset: 'web',
+});