@qlover/create-app 0.8.0 → 0.10.0

package/dist/templates/react-app/src/uikit/components/chatMessage/MessagesList.tsx

@@ -0,0 +1,86 @@
+import { useStore } from '@brain-toolkit/react-kit';
+import { useCallback, type ComponentType } from 'react';
+import type { ChatMessageI18nInterface } from '@config/i18n/chatMessageI18n';
+import { MessageItem, type MessageItemProps } from './MessageItem';
+import type {
+  ChatMessage,
+  ChatMessageBridgeInterface
+} from '@qlover/corekit-bridge';
+
+export type MessageComponentType<
+  T,
+  MessageType extends ChatMessage<T>
+> = ComponentType<MessageItemProps<T, MessageType>>;
+
+export type GetMessageComponent<T, MessageType extends ChatMessage<T>> = (
+  props: MessageItemProps<T, MessageType>
+) => MessageComponentType<T, MessageType>;
+
+export interface MessagesListProps<T, MessageType extends ChatMessage<T>> {
+  bridge: ChatMessageBridgeInterface<T>;
+  tt: ChatMessageI18nInterface;
+
+  /**
+   * Get message component
+   *
+   * @default `MessageItem`
+   *
+   * @type `ComponentType<MessageItemProps<MessageType>>`
+   */
+  getMessageComponent?: GetMessageComponent<T, MessageType>;
+
+  /**
+   * Get message unique identifier
+   *
+   * @default `(message.id ?? '') + (message.startTime ?? 0) + index`
+   *
+   * @param message Message
+   * @param index Message index
+   * @returns Message unique identifier
+   */
+  getMessageKey?(message: MessageType, index: number): string;
+}
+
+export function MessagesList<T = string>({
+  bridge,
+  tt,
+  getMessageComponent,
+  getMessageKey
+}: MessagesListProps<T, ChatMessage<T>>) {
+  const messagesStore = bridge.getMessageStore();
+  const messages = useStore(messagesStore, (state) => state.messages);
+
+  const _getMessageKey = useCallback(
+    (message: ChatMessage<T>, index: number): string => {
+      return (
+        getMessageKey?.(message, index) ||
+        String((message.id ?? '') + (message.startTime ?? 0) + index)
+      );
+    },
+    [getMessageKey]
+  );
+
+  return (
+    <div
+      data-testid="MessagesList"
+      className="flex-1 overflow-y-auto p-4 space-y-2"
+    >
+      {messages.length === 0 ? (
+        <div className="flex items-center justify-center h-full">
+          <div className="text-center text-text-secondary">
+            <p className="text-base mb-1">{tt.empty}</p>
+            <p className="text-sm">{tt.start}</p>
+          </div>
+        </div>
+      ) : (
+        messages.map((message, index) => {
+          const key = _getMessageKey(message, index);
+          const props = { message, index, bridge, tt };
+          const Component = getMessageComponent?.(props) || MessageItem;
+
+          return <Component data-testid="MessageItem" key={key} {...props} />;
+        })
+      )}
+    </div>
+  );
+}

package/dist/templates/react-app/src/uikit/hooks/useNavigateBridge.ts

@@ -3,6 +3,15 @@ import { useNavigate } from 'react-router-dom';
 import { useIOC } from './useIOC';
 import { NavigateBridge } from '../bridges/NavigateBridge';
 
+/**
+ * 使用 navigate 桥接
+ *
+ * 将 navigate 桥接到 NavigateBridge 中
+ *
+ * 这样就可以在服务层使用 navigate 了， 比如在某个service中需要跳转页面，就可以使用 navigateBridge.getUIBridge() 来跳转
+ *
+ * **但是它需要在 RouterProvider 中使用**
+ */
 export function useNavigateBridge() {
   const navigate = useNavigate();
   const navigateBridge = useIOC(NavigateBridge);

package/dist/templates/react-app/src/uikit/hooks/{useI18nGuard.ts → useRouterI18nGuard.ts}

@@ -5,13 +5,16 @@ import type { LocaleType } from '@config/i18n/i18nConfig';
 import { useIOC } from './useIOC';
 
 /**
- * Language Guard
+ * 国际化路由国际化守卫
  *
- * if language not found, redirect to 404 page
+ * 比如: 开启了 `@config/common 中useLocaleRoutes` 为 `true` 时，
+ *
+ * 访问 `/login` 则会自动重定向到 `/en/login`, 其中 en 为默认语言可配置
+ *
+ * 或者访问一个不支持的语言，则会自动重定向到 `/en/404`
  *
- * TODO: if language not found, use default language
  */
-export function useI18nGuard() {
+export function useRouterI18nGuard() {
   const { lng } = useParams<{ lng: LocaleType }>();
   const { pathname } = useLocation();
   const navigate = useNavigate();

package/dist/templates/react-app/tsconfig.app.json

@@ -28,9 +28,11 @@
     "paths": {
       "@/*": ["./src/*"],
       "@config/*": ["./config/*"],
-      "@lib/*": ["./lib/*"]
+      "@lib/*": ["./lib/*"],
+      "@qlover/corekit-bridge": ["../../../corekit-bridge"],
+      "@qlover/fe-corekit": ["../../../fe-corekit"]
     }
   },
   "include": ["src", "config"],
-  "exclude": ["node_modules", "dist"]
+  "exclude": ["**/**/node_modules", "**/**dist"]
 }

package/dist/templates/react-app/tsconfig.node.json

@@ -12,6 +12,10 @@
     "isolatedModules": true,
     "moduleDetection": "force",
     "noEmit": true,
+    "paths": {
+      "@qlover/corekit-bridge": ["../../../corekit-bridge"],
+      "@qlover/fe-corekit": ["../../../fe-corekit"]
+    },
 
     /* Linting */
     "strict": true,

package/dist/templates/react-app/tsconfig.test.json

@@ -7,7 +7,9 @@
       "@/*": ["./src/*"],
       "@config/*": ["./config/*"],
       "@__tests__/*": ["./__tests__/*"],
-      "@__mocks__/*": ["./__tests__/__mocks__/*"]
+      "@__mocks__/*": ["./__tests__/__mocks__/*"],
+      "@qlover/corekit-bridge": ["../../../corekit-bridge"],
+      "@qlover/fe-corekit": ["../../../fe-corekit"]
     }
   },
   "include": ["__tests__/**/*"],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qlover/create-app",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "description": "Create a new app with a single command",
   "private": false,
   "type": "module",
@@ -33,12 +33,12 @@
     "ignore": "^7.0.3",
     "lodash": "^4.17.21",
     "ora": "^8.1.1",
-    "@qlover/logger": "0.2.0"
+    "@qlover/logger": "0.3.0"
   },
   "dependencies": {
     "commander": "^13.1.0",
     "inquirer": "^12.3.2",
-    "@qlover/scripts-context": "1.1.4"
+    "@qlover/scripts-context": "1.2.0"
   },
   "scripts": {
     "lint": "eslint src --fix",

package/dist/templates/react-app/__tests__/src/base/cases/AppError.test.ts

@@ -1,102 +0,0 @@
-/**
- * AppError test suite
- *
- * Coverage:
- * 1. constructor       - Constructor initialization with different source types
- * 2. inheritance      - Verify inheritance from ExecutorError
- * 3. error properties - Verify error properties are set correctly
- */
-
-import { ExecutorError } from '@qlover/fe-corekit';
-import { describe, it, expect } from 'vitest';
-import { AppError } from '@/base/cases/AppError';
-
-describe('AppError', () => {
-  describe('constructor', () => {
-    it('should create instance with id only', () => {
-      const error = new AppError('TEST_ERROR');
-      expect(error).toBeInstanceOf(AppError);
-      expect(error).toBeInstanceOf(ExecutorError);
-      expect(error).toBeInstanceOf(Error);
-      expect(error.id).toBe('TEST_ERROR');
-      expect(error.message).toBe('TEST_ERROR');
-      expect(error.source).toBeUndefined();
-    });
-
-    it('should create instance with string source', () => {
-      const source = 'Test error message';
-      const error = new AppError('TEST_ERROR', source);
-      expect(error.id).toBe('TEST_ERROR');
-      expect(error.message).toBe(source);
-      expect(error.source).toBe(source);
-    });
-
-    it('should create instance with Error source', () => {
-      const source = new Error('Original error');
-      const error = new AppError('TEST_ERROR', source);
-      expect(error.id).toBe('TEST_ERROR');
-      expect(error.message).toBe('Original error');
-      expect(error.source).toBe(source);
-    });
-  });
-
-  describe('error properties', () => {
-    it('should have correct error type', () => {
-      const error = new AppError('TEST_ERROR');
-      expect(error.id).toBe('TEST_ERROR');
-    });
-
-    it('should maintain id property', () => {
-      const error = new AppError('TEST_ERROR');
-      Object.defineProperty(error, 'id', { value: 'NEW_ID' });
-      expect(error.id).toBe('NEW_ID');
-    });
-
-    it('should maintain source property', () => {
-      const source = 'source';
-      const error = new AppError('TEST_ERROR', source);
-      Object.defineProperty(error, 'source', { value: 'new source' });
-      expect(error.source).toBe('new source');
-    });
-  });
-
-  describe('error handling', () => {
-    it('should work in try-catch block', () => {
-      expect(() => {
-        throw new AppError('TEST_ERROR');
-      }).toThrow(AppError);
-    });
-
-    it('should preserve stack trace', () => {
-      const error = new AppError('TEST_ERROR');
-      expect(error.stack).toBeDefined();
-      expect(error.stack).toContain('AppError.test.ts');
-    });
-
-    it('should handle nested errors', () => {
-      const originalError = new Error('Original error');
-      const wrappedError = new AppError('WRAPPED_ERROR', originalError);
-      expect(wrappedError.source).toBe(originalError);
-      expect(wrappedError.message).toBe('Original error');
-    });
-  });
-
-  describe('error message formatting', () => {
-    it('should use id as message when source is undefined', () => {
-      const error = new AppError('TEST_ERROR');
-      expect(error.message).toBe('TEST_ERROR');
-    });
-
-    it('should use source message when source is Error', () => {
-      const source = new Error('Source error message');
-      const error = new AppError('TEST_ERROR', source);
-      expect(error.message).toBe('Source error message');
-    });
-
-    it('should use source string when source is string', () => {
-      const source = 'Source error message';
-      const error = new AppError('TEST_ERROR', source);
-      expect(error.message).toBe('Source error message');
-    });
-  });
-});

package/dist/templates/react-app/__tests__/src/main.integration.test.tsx

@@ -1,61 +0,0 @@
-import { readFileSync, existsSync } from 'fs';
-import { join } from 'path';
-
-describe('main.tsx Integration Tests', () => {
-  beforeAll(() => {
-    // Setup test environment
-    if (!document.getElementById('root')) {
-      const rootElement = document.createElement('div');
-      rootElement.id = 'root';
-      document.body.appendChild(rootElement);
-    }
-  });
-
-  afterAll(() => {
-    // Clean up DOM
-    const rootElement = document.getElementById('root');
-    if (rootElement) {
-      rootElement.remove();
-    }
-  });
-
-  beforeEach(() => {
-    // Clean up root element content
-    const rootElement = document.getElementById('root');
-    if (rootElement) {
-      rootElement.innerHTML = '';
-    }
-  });
-
-  it('should have main.tsx file', () => {
-    // Test if file exists
-    const mainPath = join(process.cwd(), 'src/main.tsx');
-    expect(existsSync(mainPath)).toBe(true);
-  });
-
-  it('should have main.tsx with correct structure', () => {
-    // Test file content structure
-    const mainPath = join(process.cwd(), 'src/main.tsx');
-    const content = readFileSync(mainPath, 'utf-8');
-
-    // Check if it contains necessary imports
-    expect(content).toContain('import');
-    expect(content).toContain('BootstrapClient');
-    expect(content).toContain('createRoot');
-  });
-
-  it('should have App.tsx file', () => {
-    // Test if App.tsx file exists
-    const appPath = join(process.cwd(), 'src/App.tsx');
-    expect(existsSync(appPath)).toBe(true);
-  });
-
-  it('should have BootstrapClient.ts file', () => {
-    // Test if BootstrapClient.ts file exists
-    const bootstrapPath = join(
-      process.cwd(),
-      'src/core/bootstraps/BootstrapClient.ts'
-    );
-    expect(existsSync(bootstrapPath)).toBe(true);
-  });
-});

package/dist/templates/react-app/src/base/services/ProcesserExecutor.ts

@@ -1,57 +0,0 @@
-import { IOCIdentifier } from '@config/IOCIdentifier';
-import {
-  AsyncExecutor,
-  ExecutorContext,
-  ExecutorPlugin
-} from '@qlover/fe-corekit';
-import { injectable, inject } from 'inversify';
-import type { ProcesserExecutorInterface } from '../port/ProcesserExecutorInterface';
-import type { RouteServiceInterface } from '../port/RouteServiceInterface';
-import type { BootstrapContextValue } from '@qlover/corekit-bridge';
-import type { LoggerInterface } from '@qlover/logger';
-
-@injectable()
-export class ProcesserExecutor implements ProcesserExecutorInterface {
-  pluginName = 'ProcesserExecutor';
-  protected executor: AsyncExecutor = new AsyncExecutor();
-
-  constructor(
-    @inject(IOCIdentifier.Logger) protected logger: LoggerInterface,
-    @inject(IOCIdentifier.RouteServiceInterface)
-    protected routeService: RouteServiceInterface
-  ) {}
-
-  /**
-   * @override
-   */
-  onBefore({
-    parameters: { ioc }
-  }: ExecutorContext<BootstrapContextValue>): void | Promise<void> {
-    this.use(ioc.get(IOCIdentifier.I18nKeyErrorPlugin));
-    this.use(ioc.get(IOCIdentifier.UserServiceInterface));
-  }
-
-  use(plugin: ExecutorPlugin): this {
-    this.executor.use(plugin);
-    return this;
-  }
-
-  handler(): Promise<{ success: boolean }> {
-    return Promise.resolve({
-      success: true
-    });
-  }
-
-  async starup(): Promise<unknown> {
-    this.logger.info('PageProcesser startup');
-
-    try {
-      const result = await this.executor.exec(this.handler);
-      return result;
-    } catch (err) {
-      this.logger.error('PageProcesser init failed', err);
-
-      this.routeService.gotoLogin();
-    }
-  }
-}

package/dist/templates/react-app/src/uikit/components/ProcessExecutorProvider.tsx

@@ -1,28 +0,0 @@
-import { IOCIdentifier } from '@config/IOCIdentifier';
-import { UserAuthProvider } from './UserAuthProvider';
-import { useI18nGuard } from '../hooks/useI18nGuard';
-import { useIOC } from '../hooks/useIOC';
-import { useNavigateBridge } from '../hooks/useNavigateBridge';
-import { useStrictEffect } from '../hooks/useStrictEffect';
-
-export function ProcessExecutorProvider({
-  children
-}: {
-  children: React.ReactNode;
-}) {
-  const processerExecutor = useIOC(IOCIdentifier.ProcesserExecutorInterface);
-
-  useI18nGuard();
-
-  useNavigateBridge();
-
-  useStrictEffect(() => {
-    processerExecutor.starup();
-  }, []);
-
-  return (
-    <UserAuthProvider data-testid="ProcessExecutorProvider">
-      {children}
-    </UserAuthProvider>
-  );
-}

package/dist/templates/react-app/src/uikit/components/UserAuthProvider.tsx

@@ -1,16 +0,0 @@
-import { useStore } from '@brain-toolkit/react-kit/hooks/useStore';
-import { IOCIdentifier } from '@config/IOCIdentifier';
-import { Loading } from './Loading';
-import { useIOC } from '../hooks/useIOC';
-
-export function UserAuthProvider({ children }: { children: React.ReactNode }) {
-  const userService = useIOC(IOCIdentifier.UserServiceInterface);
-
-  useStore(userService.store);
-
-  if (!userService.isAuthenticated()) {
-    return <Loading data-testid="UserAuthProvider" fullscreen />;
-  }
-
-  return children;
-}