@qlover/create-app 0.4.5 → 0.5.0

package/dist/templates/react-app/src/base/apis/userApi/UserApi.ts

@@ -0,0 +1,142 @@
+import {
+  FetchAbortPlugin,
+  RequestAdapterFetch,
+  RequestTransaction
+} from '@qlover/fe-corekit';
+import {
+  GetIpInfoTransaction,
+  UserApiGetUserInfoTransaction,
+  UserApiLoginTransaction,
+  UserApiTestApiCatchResultTransaction
+} from './UserApiType';
+import { inject, injectable } from 'inversify';
+import { UserApiAdapter } from './UserApiAdapter';
+import { UserApiConfig } from './UserApiBootstarp';
+import {
+  LoginResponseData,
+  UserAuthApiInterface,
+  UserAuthStoreInterface
+} from '@qlover/corekit-bridge';
+import {
+  RegisterFormData,
+  UserServiceUserInfo
+} from '@/base/services/UserService';
+import { RES_NO_TOKEN } from '@config/Identifier';
+import { AppError } from '@/base/cases/AppError';
+
+/**
+ * UserApi
+ *
+ * @description
+ * UserApi is a client for the user API.
+ *
+ */
+@injectable()
+export class UserApi
+  extends RequestTransaction<UserApiConfig>
+  implements UserAuthApiInterface<UserServiceUserInfo>
+{
+  protected store: UserAuthStoreInterface<UserServiceUserInfo> | null = null;
+
+  constructor(
+    @inject(FetchAbortPlugin) private abortPlugin: FetchAbortPlugin,
+    @inject(UserApiAdapter) adapter: RequestAdapterFetch
+  ) {
+    super(adapter);
+  }
+
+  getStore(): UserAuthStoreInterface<UserServiceUserInfo> | null {
+    return this.store;
+  }
+
+  /**
+   * @override
+   * @param store
+   */
+  setStore(store: UserAuthStoreInterface<UserServiceUserInfo>): void {
+    this.store = store;
+  }
+
+  stop(request: UserApiConfig): Promise<void> | void {
+    this.abortPlugin.abort(request);
+  }
+
+  async getRandomUser(): Promise<GetIpInfoTransaction['response']> {
+    return this.request<GetIpInfoTransaction>({
+      url: 'https://randomuser.me/api/',
+      method: 'GET',
+      disabledMock: true
+    });
+  }
+
+  async testApiCatchResult(): Promise<
+    UserApiTestApiCatchResultTransaction['response']
+  > {
+    return this.request<UserApiTestApiCatchResultTransaction>({
+      url: 'https://randomuser.me/api/?_name=ApiCatchResult',
+      method: 'GET',
+      disabledMock: true,
+      openApiCatch: true
+    });
+  }
+
+  /**
+   * @override
+   * @param params
+   * @returns
+   */
+  async login(
+    params: UserApiLoginTransaction['data']
+  ): Promise<LoginResponseData> {
+    const response = await this.post<UserApiLoginTransaction>(
+      '/api/login',
+      params
+    );
+
+    if (response.apiCatchResult) {
+      throw response.apiCatchResult;
+    }
+
+    if (!response.data.token) {
+      throw new AppError(RES_NO_TOKEN);
+    }
+
+    return response.data;
+  }
+
+  /**
+   * @override
+   * @param params
+   * @returns
+   */
+  register(
+    params: RegisterFormData
+  ): Promise<UserApiLoginTransaction['response']> {
+    return this.post<UserApiLoginTransaction>('/api/register', params);
+  }
+
+  /**
+   * @override
+   * @returns
+   */
+  logout(): Promise<void> {
+    return Promise.resolve();
+  }
+
+  /**
+   * @override
+   * @returns
+   */
+  async getUserInfo(): Promise<
+    UserApiGetUserInfoTransaction['response']['data']
+  > {
+    const response =
+      await this.get<UserApiGetUserInfoTransaction>('/api/userinfo');
+
+    if (response.apiCatchResult) {
+      throw response.apiCatchResult;
+    }
+
+    return response.data;
+  }
+}

package/{templates → dist/templates}/react-app/src/base/apis/userApi/UserApiType.ts

@@ -50,3 +50,14 @@ export type UserApiLoginTransaction = UserApiTransaction<
 >;
 
 export type UserApiTestApiCatchResultTransaction = UserApiGetRandomUser;
+
+export type UserApiRegisterTransaction = UserApiTransaction<
+  {
+    username: string;
+    email: string;
+    password: string;
+    confirmPassword: string;
+    agreeToTerms: boolean;
+  },
+  UserApiTransaction['response']['data']
+>;

package/{templates → dist/templates}/react-app/src/base/cases/AppConfig.ts

@@ -55,6 +55,12 @@ export class AppConfig implements EnvConfigInterface {
    */
   readonly userTokenStorageKey = '__fe_user_token__';
 
+  /**
+   * Storage key for user information
+   * @description Injected from VITE_USER_INFO_STORAGE_KEY environment variable
+   */
+  readonly userInfoStorageKey = '__fe_user_info__';
+
   /**
    * Available OpenAI model configurations
    * @description List of supported OpenAI models for the application
@@ -102,4 +108,9 @@ export class AppConfig implements EnvConfigInterface {
 
   /** Flag indicating if AI service token is required */
   readonly aiApiRequireToken = true;
+
+  /**
+   * Project startup href, usually from window.location.href
+   */
+  readonly bootHref = '';
 }

package/dist/templates/react-app/src/base/cases/I18nKeyErrorPlugin.ts

@@ -0,0 +1,36 @@
+import type { ExecutorContext, ExecutorPlugin } from '@qlover/fe-corekit';
+import type { LoggerInterface } from '@qlover/logger';
+import { inject } from 'inversify';
+import { I18nService } from '../services/I18nService';
+import { IOCIdentifier } from '@/core/IOC';
+
+/**
+ * When throw error, it will be converted to i18n key
+ *
+ * If the error thrown is an i18n key, it will be converted to the corresponding text
+ */
+export class I18nKeyErrorPlugin implements ExecutorPlugin {
+  readonly pluginName = 'I18nKeyErrorPlugin';
+
+  constructor(
+    @inject(IOCIdentifier.Logger) private logger: LoggerInterface,
+    @inject(I18nService) private i18nService: I18nService
+  ) {}
+
+  onError(context: ExecutorContext<unknown>): Error | void {
+    const { error } = context;
+
+    if (error instanceof Error) {
+      const i18nKey = error.message;
+
+      if (i18nKey && typeof i18nKey === 'string') {
+        const i18nText = this.i18nService.t(i18nKey);
+
+        if (i18nText && i18nText !== i18nKey) {
+          this.logger.debug('I18nKeyErrorPlugin Error:', i18nText);
+          return new Error(i18nText);
+        }
+      }
+    }
+  }
+}

package/{templates → dist/templates}/react-app/src/base/cases/RouterLoader.ts

@@ -1,6 +1,7 @@
 import type { ComponentType, LazyExoticComponent, ReactNode } from 'react';
 import { RouteObject } from 'react-router-dom';
 import isString from 'lodash/isString';
+import { RouteMeta } from '../types/Page';
 
 /**
  * Component mapping type for lazy-loaded components
@@ -38,7 +39,7 @@ export type RouteConfigValue = Omit<RouteObject, 'element' | 'children'> & {
    * Additional metadata for the route
    * @description Can store any route-specific data like permissions, titles, etc.
    */
-  meta?: Record<string, unknown>;
+  meta?: RouteMeta;
 };
 
 /**

package/{templates → dist/templates}/react-app/src/base/services/I18nService.ts

@@ -4,11 +4,11 @@ import LanguageDetector from 'i18next-browser-languagedetector';
 import HttpApi from 'i18next-http-backend';
 import merge from 'lodash/merge';
 import i18nConfig from '@config/i18n';
-import type { BootstrapExecutorPlugin } from '@qlover/corekit-bridge';
 import {
-  StoreInterface,
-  StoreStateInterface
-} from '@/base/port/StoreInterface';
+  type BootstrapExecutorPlugin,
+  type StoreStateInterface,
+  StoreInterface
+} from '@qlover/corekit-bridge';
 const { supportedLngs, fallbackLng } = i18nConfig;
 
 export type I18nServiceLocale = (typeof supportedLngs)[number];

package/{templates/react-app/src/base/services/ProcesserService.ts → dist/templates/react-app/src/base/services/ProcesserExecutor.ts}

@@ -2,12 +2,15 @@ import { AsyncExecutor, ExecutorPlugin } from '@qlover/fe-corekit';
 import { IOCIdentifier } from '@/core/IOC';
 import { injectable, inject } from 'inversify';
 import type { LoggerInterface } from '@qlover/logger';
+import { RouteService } from './RouteService';
 
 @injectable()
-export class ProcesserService {
+export class ProcesserExecutor {
+  protected executor: AsyncExecutor = new AsyncExecutor();
+
   constructor(
     @inject(IOCIdentifier.Logger) private logger: LoggerInterface,
-    @inject(AsyncExecutor) private executor: AsyncExecutor
+    @inject(RouteService) private routeService: RouteService
   ) {}
 
   use(plugin: ExecutorPlugin): this {
@@ -21,9 +24,16 @@ export class ProcesserService {
     });
   }
 
-  init(): Promise<unknown> {
-    return this.executor.exec(this.handler).catch((err) => {
+  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/{templates → dist/templates}/react-app/src/base/services/RouteService.ts

@@ -3,23 +3,23 @@ import type { NavigateFunction, NavigateOptions } from 'react-router-dom';
 import type { UIDependenciesInterface } from '@/base/port/UIDependenciesInterface';
 import type { LoggerInterface } from '@qlover/logger';
 import { I18nService } from '@/base/services/I18nService';
+import { StoreInterface, StoreStateInterface } from '@qlover/corekit-bridge';
 
 export type RouterServiceDependencies = {
   navigate: NavigateFunction;
 };
 
 export type RouterServiceOptions = {
-  config: {
-    routes: RouteConfigValue[];
-  };
+  routes: RouteConfigValue[];
   logger: LoggerInterface;
 };
 
-export type RouterServiceState = {
-  routes: RouteConfigValue[];
-};
+export class RouterServiceState implements StoreStateInterface {
+  constructor(public routes: RouteConfigValue[] = []) {}
+}
 
 export class RouteService
+  extends StoreInterface<RouterServiceState>
   implements UIDependenciesInterface<RouterServiceDependencies>
 {
   /**
@@ -27,12 +27,8 @@ export class RouteService
    */
   dependencies?: RouterServiceDependencies;
 
-  state: RouterServiceState;
-
   constructor(private options: RouterServiceOptions) {
-    this.state = {
-      routes: options.config.routes
-    };
+    super(() => new RouterServiceState(options.routes));
   }
 
   get logger(): LoggerInterface {
@@ -43,7 +39,9 @@ export class RouteService
     const navigate = this.dependencies?.navigate;
 
     if (!navigate) {
-      this.logger.debug('navigate is not set');
+      this.logger.debug(
+        'Please use `RouterServiceProvider` to set dependencies'
+      );
     }
 
     return navigate;
@@ -69,7 +67,7 @@ export class RouteService
   }
 
   changeRoutes(routes: RouteConfigValue[]): void {
-    this.state.routes = routes;
+    this.emit({ routes });
   }
 
   goto(path: string, options?: NavigateOptions): void {

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

@@ -0,0 +1,132 @@
+import { ExecutorPlugin, type SyncStorageInterface } from '@qlover/fe-corekit';
+import type {
+  UserApiGetUserInfoTransaction,
+  UserApiLoginTransaction
+} from '@/base/apis/userApi/UserApiType';
+import { RouteService } from './RouteService';
+import {
+  LoginResponseData,
+  type UserAuthApiInterface,
+  UserAuthService,
+  UserAuthStore
+} from '@qlover/corekit-bridge';
+import { inject, injectable } from 'inversify';
+import { UserApi } from '@/base/apis/userApi/UserApi';
+import { AppError } from '@/base/cases/AppError';
+import * as errKeys from '@config/Identifier/common.error';
+import { IOCIdentifier } from '@/core/IOC';
+import { AppConfig } from '../cases/AppConfig';
+
+export type UserServiceUserInfo =
+  UserApiGetUserInfoTransaction['response']['data'];
+
+export interface RegisterFormData {
+  username: string;
+  email: string;
+  password: string;
+  confirmPassword: string;
+  agreeToTerms: boolean;
+}
+
+@injectable()
+export class UserService
+  extends UserAuthService<UserServiceUserInfo>
+  implements ExecutorPlugin
+{
+  readonly pluginName = 'UserService';
+
+  constructor(
+    @inject(RouteService) protected routerService: RouteService,
+    @inject(UserApi) userApi: UserAuthApiInterface<UserServiceUserInfo>,
+    @inject(IOCIdentifier.AppConfig) appConfig: AppConfig,
+    @inject(IOCIdentifier.LocalStorageEncrypt)
+    storage: SyncStorageInterface<string, string>
+  ) {
+    super({
+      api: userApi,
+      userStorage: {
+        key: appConfig.userInfoStorageKey,
+        storage: storage
+      },
+      credentialStorage: {
+        key: appConfig.userTokenStorageKey,
+        storage: storage
+      }
+    });
+
+    // FIXME:
+    // load credential from storage
+    // this.store.setCredential(this.store.getCredentialStorage()?.get() ?? '');
+  }
+
+  /**
+   * @override
+   */
+  override get store(): UserAuthStore<UserServiceUserInfo> {
+    return super.store as UserAuthStore<UserServiceUserInfo>;
+  }
+
+  getToken(): string | null {
+    return this.store.getCredential();
+  }
+
+  /**
+   * @override
+   */
+  async onBefore(): Promise<void> {
+    if (this.isAuthenticated()) {
+      return;
+    }
+
+    const userToken = this.getToken();
+
+    if (!userToken) {
+      throw new AppError(errKeys.LOCAL_NO_USER_TOKEN);
+    }
+
+    if (userToken) {
+      this.store.authSuccess();
+    }
+
+    await this.userInfo();
+    this.store.authSuccess();
+  }
+
+  /**
+   * @override
+   */
+  onSuccess(): void {
+    // if (this.isAuthenticated()) {
+    //   this.store.authSuccess();
+    // } else {
+    //   this.logout();
+    // }
+  }
+
+  /**
+   * @override
+   */
+  override async logout(): Promise<void> {
+    await super.logout();
+
+    this.routerService.reset();
+    this.routerService.gotoLogin();
+  }
+
+  async register(params: RegisterFormData): Promise<LoginResponseData> {
+    const response = (await this.api.register(
+      params
+    )) as UserApiLoginTransaction['response'];
+
+    if (response.data?.token) {
+      try {
+        await this.userInfo({ token: response.data?.token });
+        this.store.authSuccess();
+      } catch (error) {
+        this.store.authFailed(error);
+      }
+    }
+
+    throw new AppError(errKeys.LOCAL_NO_USER_TOKEN);
+  }
+}

package/{templates → dist/templates}/react-app/src/base/types/Page.ts

@@ -10,12 +10,22 @@ export interface BasePageProvider {
 type RouteCategory = 'main' | 'auth' | 'common';
 
 export interface RouteMeta {
-  category?: RouteCategory;
   /**
-   * from app.router.json
+   * The title of the route
    */
   title?: string;
+
+  /**
+   * The description of the route
+   */
+  description?: string;
+
+  /**
+   * The icon of the route
+   */
   icon?: string;
+
+  category?: RouteCategory;
   /**
    * from app.router.json
    *

package/{templates → dist/templates}/react-app/src/core/IOC.ts

@@ -2,14 +2,15 @@
 import {
   ApiMockPlugin,
   EnvConfigInterface,
-  StorageTokenInterface,
   RequestCommonPlugin,
   ApiCatchPlugin,
   IOCContainerInterface,
   createIOCFunction,
-  ServiceIdentifier
+  ServiceIdentifier,
+  TokenStorage,
+  CookieStorage
 } from '@qlover/corekit-bridge';
-import type { JSONSerializer, JSONStorage } from '@qlover/fe-corekit';
+import type { JSONSerializer, ObjectStorage } from '@qlover/fe-corekit';
 import type { LoggerInterface } from '@qlover/logger';
 import type { AppConfig } from '@/base/cases/AppConfig';
 import { Container } from 'inversify';
@@ -69,7 +70,9 @@ export class InversifyContainer implements IOCContainerInterface {
  */
 export const IOCIdentifier = Object.freeze({
   JSON: 'JSON',
-  JSONStorage: 'JSONStorage',
+  LocalStorage: 'LocalStorage',
+  LocalStorageEncrypt: 'LocalStorageEncrypt',
+  CookieStorage: 'CookieStorage',
   Logger: 'Logger',
   FeApiToken: 'FeApiToken',
   FeApiCommonPlugin: 'FeApiCommonPlugin',
@@ -84,9 +87,11 @@ export const IOCIdentifier = Object.freeze({
  */
 export interface IOCIdentifierMap {
   [IOCIdentifier.JSON]: JSONSerializer;
-  [IOCIdentifier.JSONStorage]: JSONStorage;
+  [IOCIdentifier.LocalStorage]: ObjectStorage<string, string>;
+  [IOCIdentifier.LocalStorageEncrypt]: ObjectStorage<string, string>;
+  [IOCIdentifier.CookieStorage]: CookieStorage;
   [IOCIdentifier.Logger]: LoggerInterface;
-  [IOCIdentifier.FeApiToken]: StorageTokenInterface<string>;
+  [IOCIdentifier.FeApiToken]: TokenStorage<string>;
   [IOCIdentifier.FeApiCommonPlugin]: RequestCommonPlugin;
   [IOCIdentifier.AppConfig]: EnvConfigInterface;
   [IOCIdentifier.ApiMockPlugin]: ApiMockPlugin;

package/{templates → dist/templates}/react-app/src/core/bootstrap.ts

@@ -4,7 +4,7 @@ import { IOC } from './IOC';
 import * as globals from '@/core/globals';
 import { IocRegister } from './registers';
 import { BootstrapsRegistry } from './bootstraps';
-import { GLOBAL_NO_WINDOW } from '@config/Identifier/Error';
+import { GLOBAL_NO_WINDOW } from '@config/Identifier/common.error';
 
 export default async function startup({
   root,
@@ -33,7 +33,7 @@ export default async function startup({
     },
     envOptions: {
       target: appConfig,
-      source: envSource,
+      source: { ...envSource, [envPrefix + 'BOOT_HREF']: root.location.href },
       prefix: envPrefix,
       blackList: envBlackList
     },

package/{templates → dist/templates}/react-app/src/core/bootstraps/index.ts

@@ -11,6 +11,7 @@ import { AiApiBootstarp } from '@/base/apis/AiApi';
 import { printBootstrap } from './PrintBootstrap';
 import { IOCIdentifier, type IOCIdentifierMap } from '../IOC';
 import { I18nService } from '@/base/services/I18nService';
+import { I18nKeyErrorPlugin } from '@/base/cases/I18nKeyErrorPlugin';
 
 export class BootstrapsRegistry {
   constructor(
@@ -29,7 +30,8 @@ export class BootstrapsRegistry {
       new UserApiBootstarp(),
       new FeApiBootstarp(),
       AiApiBootstarp,
-      new BootstrapApp()
+      new BootstrapApp(),
+      IOC(I18nKeyErrorPlugin)
     ];
 
     if (this.appConfig.env !== 'production') {

package/{templates → dist/templates}/react-app/src/core/globals.ts

@@ -1,6 +1,17 @@
 // ! global variables, don't import any dependencies and don't have side effects
-import { JSONStorage, JSONSerializer, SyncStorage } from '@qlover/fe-corekit';
-import { ColorFormatter, ConsoleHandler, Logger } from '@qlover/corekit-bridge';
+import {
+  Base64Serializer,
+  JSONSerializer,
+  ObjectStorage,
+  SyncStorage,
+  SyncStorageInterface
+} from '@qlover/fe-corekit';
+import {
+  ColorFormatter,
+  ConsoleHandler,
+  CookieStorage,
+  Logger
+} from '@qlover/corekit-bridge';
 import { DialogHandler } from '@/base/cases/DialogHandler';
 import { loggerStyles } from '@config/common';
 import { AppConfig } from '@/base/cases/AppConfig';
@@ -26,9 +37,14 @@ export const logger = new Logger({
 export const JSON = new JSONSerializer();
 
 /**
- * Override JSONStorage to use the global local storage
+ * Override localStorage to use the global local storage
  */
-export const localJsonStorage = new JSONStorage(
-  localStorage as SyncStorage<string, string>,
-  JSON
-);
+export const localStorage = new SyncStorage(new ObjectStorage(), [
+  JSON,
+  new Base64Serializer(),
+  window.localStorage as unknown as SyncStorageInterface<string>
+]);
+
+export const localStorageEncrypt = localStorage;
+
+export const cookieStorage = new CookieStorage();

package/{templates → dist/templates}/react-app/src/core/registers/RegisterApi.ts

@@ -1,4 +1,4 @@
-import { InversifyContainer, InversifyRegisterInterface } from '../IOC';
+import type { InversifyContainer, InversifyRegisterInterface } from '../IOC';
 
 export class RegisterApi implements InversifyRegisterInterface {
   register(_container: InversifyContainer): void {}