@qlover/create-app 0.7.5 → 0.7.6

package/dist/templates/react-app/src/uikit/{controllers/ExecutorController.ts → bridges/ExecutorPageBridge.ts}

@@ -7,16 +7,13 @@ import {
 } from '@qlover/fe-corekit';
 import { inject, injectable } from 'inversify';
 import {
-  StoreInterface,
-  type StoreStateInterface
-} from '@qlover/corekit-bridge';
+  ExecutorPageBridgeInterface,
+  ExecutorPageStateInterface
+} from '@/base/port/ExecutorPageBridgeInterface';
+import { RequestState } from '@/base/cases/RequestState';
 
-class ExecutorControllerState implements StoreStateInterface {
-  helloState = {
-    loading: false,
-    result: null as Record<string, unknown> | null,
-    error: null as unknown
-  };
+class ExecutorPageBridgeState implements ExecutorPageStateInterface {
+  helloState = new RequestState();
 }
 
 const TestPlugin: ExecutorPlugin<RequestAdapterFetchConfig> = {
@@ -34,13 +31,9 @@ const TestPlugin: ExecutorPlugin<RequestAdapterFetchConfig> = {
 };
 
 @injectable()
-export class ExecutorController extends StoreInterface<ExecutorControllerState> {
-  selector = {
-    helloState: (state: ExecutorControllerState) => state.helloState
-  };
-
-  constructor(@inject(FeApi) private feApi: FeApi) {
-    super(ExecutorController.create);
+export class ExecutorPageBridge extends ExecutorPageBridgeInterface {
+  constructor(@inject(FeApi) protected feApi: FeApi) {
+    super(() => new ExecutorPageBridgeState());
 
     // FIXME: not cloneDeep, create a new instance
     this.feApi = cloneDeep(feApi);
@@ -48,18 +41,10 @@ export class ExecutorController extends StoreInterface<ExecutorControllerState>
     this.feApi.usePlugin(TestPlugin);
   }
 
-  static create(): ExecutorControllerState {
-    return new ExecutorControllerState();
-  }
-
-  onTestPlugins = async () => {
+  override onTestPlugins = async () => {
     this.emit({
       ...this.state,
-      helloState: {
-        loading: true,
-        result: null,
-        error: null
-      }
+      helloState: new RequestState(true)
     });
 
     try {
@@ -69,20 +54,12 @@ export class ExecutorController extends StoreInterface<ExecutorControllerState>
 
       this.emit({
         ...this.state,
-        helloState: {
-          loading: false,
-          result: res,
-          error: null
-        }
+        helloState: new RequestState(false, res).end()
       });
     } catch (error) {
       this.emit({
         ...this.state,
-        helloState: {
-          loading: false,
-          result: null,
-          error
-        }
+        helloState: new RequestState(false, null, error).end()
       });
     }
   };

package/dist/templates/react-app/src/uikit/bridges/JSONStoragePageBridge.ts

@@ -0,0 +1,41 @@
+import { inject, injectable } from 'inversify';
+import { JSONStoragePageBridgeInterface } from '@/base/port/JSONStoragePageBridgeInterface';
+import { IOCIdentifier } from '@config/IOCIdentifier';
+import type { SyncStorageInterface } from '@qlover/fe-corekit';
+import random from 'lodash/random';
+
+@injectable()
+export class JSONStoragePageBridge extends JSONStoragePageBridgeInterface {
+  constructor(
+    @inject(IOCIdentifier.LocalStorage)
+    protected storage: SyncStorageInterface<string, unknown>
+  ) {
+    super(() => ({
+      testKey1: storage.getItem('testKey1') ?? 0,
+      testKey2: storage.getItem('testKey2') ?? 0,
+      expireTime: 5000,
+      requestTimeout: storage.getItem('requestTimeout') ?? 5000
+    }));
+  }
+
+  override changeRandomTestKey1 = (): void => {
+    const value = random(100, 9000);
+    this.storage.setItem('testKey1', value);
+    this.emit({ ...this.state, testKey1: value });
+  };
+
+  override onChangeRandomTestKey2 = (): void => {
+    const value = random(100, 9000);
+    this.storage.setItem('testKey2', value, Date.now() + this.state.expireTime);
+    this.emit({ ...this.state, testKey2: value });
+  };
+
+  override changeExpireTime = (expireTime: number): void => {
+    this.emit({ ...this.state, expireTime });
+  };
+
+  override changeRequestTimeout = (requestTimeout: number): void => {
+    this.storage.setItem('requestTimeout', requestTimeout);
+    this.emit({ ...this.state, requestTimeout });
+  };
+}

package/dist/templates/react-app/src/uikit/bridges/NavigateBridge.ts

@@ -0,0 +1,16 @@
+import { injectable } from 'inversify';
+import { UIBridgeInterface } from '@qlover/corekit-bridge';
+import { NavigateFunction } from 'react-router-dom';
+
+@injectable()
+export class NavigateBridge implements UIBridgeInterface<NavigateFunction> {
+  protected navigate: NavigateFunction | null = null;
+
+  setUIBridge(ui: NavigateFunction): void {
+    this.navigate = ui;
+  }
+
+  getUIBridge(): NavigateFunction | null {
+    return this.navigate;
+  }
+}

package/dist/templates/react-app/src/uikit/bridges/RequestPageBridge.ts

@@ -0,0 +1,136 @@
+import { inject, injectable } from 'inversify';
+import { FeApi } from '@/base/apis/feApi/FeApi';
+import { UserApi } from '@/base/apis/userApi/UserApi';
+import { aiHello } from '@/base/apis/AiApi';
+import {
+  RequestPageBridgeInterface,
+  RequestPageStateInterface
+} from '@/base/port/RequestPageBridgeInterface';
+import { RequestState } from '@/base/cases/RequestState';
+import { IOCIdentifier } from '@config/IOCIdentifier';
+import type { LoggerInterface } from '@qlover/logger';
+
+function createDefaultState(): RequestPageStateInterface {
+  return {
+    helloState: new RequestState(),
+    ipInfoState: new RequestState(),
+    randomUserState: new RequestState(),
+    abortState: new RequestState(),
+    apiCatchResultState: new RequestState()
+  };
+}
+
+export type RequestControllerState = ReturnType<typeof createDefaultState>;
+
+@injectable()
+export class RequestPageBridge extends RequestPageBridgeInterface {
+  constructor(
+    @inject(FeApi) protected feApi: FeApi,
+    @inject(UserApi) protected userApi: UserApi,
+    @inject(IOCIdentifier.Logger) protected logger: LoggerInterface
+  ) {
+    super(createDefaultState);
+  }
+
+  override onHello = async () => {
+    if (this.state.helloState.loading) {
+      return;
+    }
+
+    this.emitState({ helloState: new RequestState(true) });
+
+    try {
+      const result = await aiHello({
+        messages: [{ role: 'user', content: 'Hello, world!' }]
+      });
+      this.emitState({ helloState: new RequestState(false, result).end() });
+    } catch (error) {
+      this.logger.error(error);
+      this.emitState({
+        helloState: new RequestState(false, null, error).end()
+      });
+    }
+  };
+
+  override onIpInfo = async () => {
+    if (this.state.ipInfoState.loading) {
+      return;
+    }
+
+    this.emitState({ ipInfoState: new RequestState(true) });
+
+    try {
+      const result = await this.feApi.getIpInfo();
+      this.emitState({ ipInfoState: new RequestState(false, result).end() });
+    } catch (error) {
+      this.logger.error(error);
+      this.emitState({
+        ipInfoState: new RequestState(false, null, error).end()
+      });
+    }
+  };
+
+  override onRandomUser = async () => {
+    if (this.state.randomUserState.loading) {
+      return;
+    }
+
+    this.emitState({ randomUserState: new RequestState(true) });
+    try {
+      const result = await this.userApi.getRandomUser();
+      this.emitState({
+        randomUserState: new RequestState(false, result).end()
+      });
+    } catch (error) {
+      this.logger.error(error);
+      this.emitState({
+        randomUserState: new RequestState(false, null, error).end()
+      });
+    }
+  };
+
+  override onTriggerApiCatchResult = async () => {
+    if (this.state.apiCatchResultState.loading) {
+      return;
+    }
+
+    this.emitState({ apiCatchResultState: new RequestState(true) });
+    try {
+      const result = await this.userApi.testApiCatchResult();
+      this.emitState({
+        apiCatchResultState: new RequestState(false, result).end()
+      });
+    } catch (error) {
+      this.emitState({
+        apiCatchResultState: new RequestState(false, null, error).end()
+      });
+    }
+  };
+
+  override onTriggerAbortRequest = async () => {
+    if (this.state.abortState.loading) {
+      this.stopAbortRequest();
+      return;
+    }
+
+    this.emitState({ abortState: new RequestState(true) });
+    try {
+      await this.userApi.request({
+        method: 'GET',
+        url: 'https://api.example.com/users',
+        disabledMock: true,
+        requestId: 'onTriggerAbortRequest'
+      });
+    } catch (error) {
+      this.emitState({
+        abortState: new RequestState(false, null, error).end()
+      });
+    }
+  };
+
+  override stopAbortRequest = async () => {
+    this.userApi.stop({
+      requestId: 'onTriggerAbortRequest'
+    });
+  };
+}

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

@@ -3,15 +3,16 @@ import { GlobalOutlined } from '@ant-design/icons';
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import i18nConfig from '@config/i18n';
 import { IOC } from '@/core/IOC';
-import { I18nService, I18nServiceLocale } from '@/base/services/I18nService';
+import { I18nServiceLocale } from '@/base/services/I18nService';
 import { useCallback } from 'react';
 import { useStore } from '@/uikit/hooks/useStore';
+import { IOCIdentifier } from '@config/IOCIdentifier';
 
 const { supportedLngs } = i18nConfig;
 
 export default function LanguageSwitcher() {
   const navigate = useNavigate();
-  const i18nService = IOC(I18nService);
+  const i18nService = IOC(IOCIdentifier.I18nServiceInterface);
   const loading = useStore(i18nService, i18nService.selector.loading);
   const { lng } = useParams<{ lng: I18nServiceLocale }>();
   const { pathname } = useLocation();

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

@@ -1,9 +1,9 @@
-import { UserService } from '@/base/services/UserService';
 import { IOC } from '@/core/IOC';
 import {
   AUTH_LOGOUT_DIALOG_CONTENT,
   AUTH_LOGOUT_DIALOG_TITLE
 } from '@config/Identifier/common';
+import { IOCIdentifier } from '@config/IOCIdentifier';
 import { Button } from 'antd';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -19,7 +19,7 @@ export default function LogoutButton() {
       title: tTitle,
       content: tContent,
       onOk: () => {
-        IOC(UserService).logout();
+        IOC(IOCIdentifier.UserServiceInterface).logout();
       }
     });
   }, [tTitle, tContent]);

package/dist/templates/react-app/src/uikit/{providers → components}/ProcessExecutorProvider.tsx

@@ -1,20 +1,20 @@
 import { UserAuthProvider } from './UserAuthProvider';
 import { useStrictEffect } from '../hooks/useStrictEffect';
 import { IOC } from '@/core/IOC';
-import { ProcesserExecutor } from '@/base/services/ProcesserExecutor';
 import { useI18nGuard } from '../hooks/useI18nGuard';
-import { useRouterService } from '../hooks/userRouterService';
+import { IOCIdentifier } from '@config/IOCIdentifier';
+import { useNavigateBridge } from '../hooks/useNavigateBridge';
 
 export function ProcessExecutorProvider({
   children
 }: {
   children: React.ReactNode;
 }) {
-  const processerExecutor = IOC(ProcesserExecutor);
+  const processerExecutor = IOC(IOCIdentifier.ProcesserExecutorInterface);
 
   useI18nGuard();
 
-  useRouterService();
+  useNavigateBridge();
 
   useStrictEffect(() => {
     processerExecutor.starup();

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

@@ -1,6 +1,6 @@
 import { Suspense } from 'react';
 import { Loading } from './Loading';
-import BaseRouteProvider from '@/uikit/providers/BaseRouteProvider';
+import BaseRouteProvider from '@/uikit/components/BaseRouteProvider';
 import { RouterLoaderRender } from '@/base/cases/RouterLoader';
 
 export const RouterRenderComponent: RouterLoaderRender = (route) => {

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

@@ -1,5 +1,4 @@
 import { IOC } from '@/core/IOC';
-import { ThemeService } from '@qlover/corekit-bridge';
 import { useStore } from '@/uikit/hooks/useStore';
 import { useTranslation } from 'react-i18next';
 import { Select } from 'antd';
@@ -12,6 +11,7 @@ import {
 import clsx from 'clsx';
 import { useMemo } from 'react';
 import * as i18nKeys from '@config/Identifier/common';
+import { IOCIdentifier } from '@config/IOCIdentifier';
 
 const colorMap: Record<
   string,
@@ -35,10 +35,8 @@ const colorMap: Record<
 };
 
 export default function ThemeSwitcher() {
-  const themeService = IOC(ThemeService);
-  // FIXME:
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const { theme } = useStore(themeService as any);
+  const themeService = IOC(IOCIdentifier.ThemeService);
+  const { theme } = useStore(themeService);
   const themes = themeService.getSupportedThemes();
   const { t } = useTranslation('common');
 

package/dist/templates/react-app/src/uikit/{providers → components}/UserAuthProvider.tsx

@@ -1,10 +1,10 @@
 import { IOC } from '@/core/IOC';
-import { Loading } from '../components/Loading';
-import { UserService } from '@/base/services/UserService';
+import { Loading } from './Loading';
 import { useStore } from '../hooks/useStore';
+import { IOCIdentifier } from '@config/IOCIdentifier';
 
 export function UserAuthProvider({ children }: { children: React.ReactNode }) {
-  const userService = IOC(UserService);
+  const userService = IOC(IOCIdentifier.UserServiceInterface);
 
   useStore(userService.store);
 

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

@@ -1,6 +1,6 @@
 import { I18nServiceLocale } from '@/base/services/I18nService';
-import { RouteService } from '@/base/services/RouteService';
 import { IOC } from '@/core/IOC';
+import { IOCIdentifier } from '@config/IOCIdentifier';
 import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useParams } from 'react-router-dom';
@@ -17,6 +17,9 @@ export function useI18nGuard() {
   const navigate = useNavigate();
 
   useEffect(() => {
-    IOC(RouteService).i18nGuard(lng as I18nServiceLocale, navigate);
+    IOC(IOCIdentifier.RouteServiceInterface).i18nGuard(
+      lng as I18nServiceLocale,
+      navigate
+    );
   }, [lng, navigate]);
 }

package/dist/templates/react-app/src/uikit/hooks/{userRouterService.ts → useNavigateBridge.ts}

@@ -1,12 +1,12 @@
-import { RouteService } from '@/base/services/RouteService';
 import { IOC } from '@/core/IOC';
 import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { NavigateBridge } from '../bridges/NavigateBridge';
 
-export function useRouterService() {
+export function useNavigateBridge() {
   const navigate = useNavigate();
 
   useEffect(() => {
-    IOC(RouteService).setDependencies({ navigate });
+    IOC(NavigateBridge).setUIBridge(navigate);
   }, [navigate]);
 }

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

@@ -2,11 +2,14 @@ import {
   StoreInterface,
   type StoreStateInterface
 } from '@qlover/corekit-bridge';
-import { useSliceStore } from '@qlover/slice-store-react';
+import { SliceStore, useSliceStore } from '@qlover/slice-store-react';
 
 export function useStore<
   C extends StoreInterface<StoreStateInterface>,
   State = C['state']
 >(store: C, selector?: (state: C['state']) => State): State {
-  return useSliceStore(store, selector);
+  return useSliceStore(
+    store as unknown as SliceStore<StoreStateInterface>,
+    selector
+  );
 }

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

@@ -4,8 +4,5 @@
     { "path": "./tsconfig.app.json" },
     { "path": "./tsconfig.node.json" },
     { "path": "./tsconfig.test.json" }
-  ],
-  "compilerOptions": {
-    "experimentalDecorators": true
-  }
+  ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qlover/create-app",
-  "version": "0.7.5",
+  "version": "0.7.6",
   "description": "Create a new app with a single command",
   "private": false,
   "type": "module",

package/dist/templates/react-app/src/base/port/InteractionHubInterface.ts

@@ -1,94 +0,0 @@
-import type { ModalFuncProps } from 'antd';
-
-/**
- * Confirmation dialog configuration options
- * Extends Ant Design's ModalFuncProps and requires a title
- */
-export interface ConfirmOptions extends ModalFuncProps {
-  content: string;
-}
-
-/**
- * Basic dialog configuration options
- */
-export interface InteractionOptions {
-  /** Display duration (milliseconds) */
-  duration?: number;
-  /** Close callback function */
-  onClose?: () => void;
-  /** Error object */
-  error?: unknown;
-}
-
-/**
- * Interaction Hub Interface
- *
- * This interface serves as the central interaction layer for the application,
- * managing all user interface interactions, notifications, and feedback functionality.
- * Main responsibilities include:
- * 1. Providing a unified message notification mechanism (success/error/info/warn)
- * 2. Handling user interaction confirmation scenarios (confirm)
- * 3. Unified error display and handling approach
- *
- * Design Goals:
- * - Uniformity: Provide consistent user interaction experience
- * - Extensibility: Easy to add new interaction types
- * - Configurability: Support custom interaction behaviors
- * - Decoupling: Separate UI interaction layer from business logic
- *
- * Use Cases:
- * - Operation success/failure feedback
- * - Important operation confirmation prompts
- * - System message notifications
- * - Warning message display
- *
- * Implementation Notes:
- * - Currently implemented based on Ant Design component library
- * - Supports other UI libraries through different adapters
- * - Supports global configuration of default behaviors
- *
- * @example
- * // Success notification
- * interactionHub.success("Operation successful", { duration: 3000 });
- *
- * // Confirmation dialog
- * interactionHub.confirm({
- *   content: "Are you sure you want to delete?",
- *   onOk: () => handleDelete()
- * });
- */
-export interface InteractionHubInterface {
-  /**
-   * Display success notification
-   * @param message Notification message
-   * @param options Configuration options
-   */
-  success(message: string, options?: InteractionOptions): void;
-
-  /**
-   * Display error notification
-   * @param message Error message
-   * @param options Configuration options
-   */
-  error(message: string, options?: InteractionOptions): void;
-
-  /**
-   * Display information notification
-   * @param message Information message
-   * @param options Configuration options
-   */
-  info(message: string, options?: InteractionOptions): void;
-
-  /**
-   * Display warning notification
-   * @param message Warning message
-   * @param options Configuration options
-   */
-  warn(message: string, options?: InteractionOptions): void;
-
-  /**
-   * Display confirmation dialog
-   * @param options Confirmation dialog configuration options
-   */
-  confirm(options: ConfirmOptions): void;
-}

package/dist/templates/react-app/src/base/port/UIDependenciesInterface.ts

@@ -1,37 +0,0 @@
-/**
- * Need to be used in the UI component
- *
- * eg. A service use window.localStorage, it should be like this:
- *
- */
-export interface UIDependenciesInterface<Dep = unknown> {
-  /**
-   * Represents the dependencies required by the UI component.
-   *
-   * @type {Dep}
-   * @description This allows for partial updates to the dependencies if `Dep` is an object, enabling flexibility in dependency management.
-   *
-   * @example
-   * const uiDependencies: UIDependenciesInterface<{ api: string, token: string }> = {
-   *   dependencies: { api: 'https://api.example.com' }
-   * };
-   *
-   * const simpleDependencies: UIDependenciesInterface<string> = {
-   *   dependencies: 'simple-dependency'
-   * };
-   */
-  dependencies?: Dep;
-
-  /**
-   * Sets the dependencies for the UI component.
-   *
-   * @param {Dep} dependencies - The dependencies to be set, allowing partial updates if `Dep` is an object.
-   * @description This method allows updating the dependencies, supporting partial updates if `Dep` is an object.
-   *
-   * @example
-   * uiDependencies.setDependencies({ token: 'new-token' });
-   *
-   * simpleDependencies.setDependencies('new-simple-dependency');
-   */
-  setDependencies(dependencies: Dep): void;
-}

package/dist/templates/react-app/src/core/registers/IocRegisterImpl.ts

@@ -1,25 +0,0 @@
-import type { IOCContainer, IOCRegister, IocRegisterOptions } from '../IOC';
-import type { IOCManagerInterface } from '@qlover/corekit-bridge';
-import { RegisterGlobals } from './RegisterGlobals';
-import { RegisterCommon } from './RegisterCommon';
-import { RegisterControllers } from './RegisterControllers';
-
-export class IocRegisterImpl implements IOCRegister {
-  constructor(protected options: IocRegisterOptions) {}
-
-  getRegisterList(): IOCRegister[] {
-    return [RegisterGlobals, RegisterCommon, new RegisterControllers()];
-  }
-
-  /**
-   * @override
-   */
-  register(
-    ioc: IOCContainer,
-    manager: IOCManagerInterface<IOCContainer>
-  ): void {
-    this.getRegisterList().forEach((Register) => {
-      Register.register(ioc, manager, this.options);
-    });
-  }
-}