@qlover/create-app 0.1.15 → 0.1.17

package/templates/react-app/src/core/bootstraps/index.ts

@@ -0,0 +1,12 @@
+import type { BootstrapExecutorPlugin } from '@qlover/corekit-bridge';
+import { BootstrapApp } from './BootstrapApp';
+import { UserApiBootstarp } from '@/base/apis/userApi/UserApiBootstarp';
+import { FeApiBootstarp } from '@/base/apis/feApi/FeApiBootstarp';
+import { AiApiBootstarp } from '@/base/apis/AiApi';
+
+export const appBootstrapList: BootstrapExecutorPlugin[] = [
+  new UserApiBootstarp(),
+  new FeApiBootstarp(),
+  AiApiBootstarp,
+  new BootstrapApp()
+];

package/templates/react-app/src/core/globals.ts

@@ -1,20 +1,17 @@
 // ! global variables, don't import any dependencies and don't have side effects
-import {
-  JSONStorage,
-  JSONSerializer,
-  Logger,
-  SyncStorage
-} from '@qlover/fe-utils';
+import { JSONStorage, JSONSerializer, SyncStorage } from '@qlover/fe-corekit';
+import { ColorLogger } from '@qlover/corekit-bridge';
+import { loggerStyles } from '@config/common';
 
-export const env = import.meta.env.VITE_USER_NODE_ENV;
-export const isProduction = env === 'production';
+const isProduction = import.meta.env.VITE_USER_NODE_ENV === 'production';
 
 /**
  * Global logger
  */
-export const logger = new Logger({
+export const logger = new ColorLogger({
   silent: isProduction,
-  debug: !isProduction
+  debug: !isProduction,
+  colorsMaps: loggerStyles
 });
 
 /**

package/templates/react-app/src/core/registers/RegisterApi.ts

@@ -3,57 +3,6 @@ import type {
   InversifyRegisterContainer
 } from '@/base/port/InversifyIocInterface';
 
-import { RequestLogger } from '@/uikit/utils/RequestLogger';
-import { localJsonStorage } from '../globals';
-import { FetchAbortPlugin, FetchURLPlugin } from '@qlover/fe-utils';
-import { FeApiMockPlugin } from '@/base/apis/feApi';
-import { OpenAIClient } from '@lib/openAiApi';
-import { FeApi } from '@/base/apis/feApi';
-import { RequestCommonPlugin } from '@lib/request-common-plugin';
-import mockDataJson from '@config/feapi.mock.json';
-import AppConfig from '@/core/AppConfig';
-
 export class RegisterApi implements InversifyRegisterInterface {
-  register(container: InversifyRegisterContainer): void {
-    const openAiApi = new OpenAIClient({
-      baseURL: AppConfig.openAiBaseUrl,
-      models: AppConfig.openAiModels,
-      commonPluginConfig: {
-        tokenPrefix: AppConfig.openAiTokenPrefix,
-        token: AppConfig.openAiToken,
-        defaultHeaders: {
-          'Content-Type': 'application/json'
-        },
-        defaultRequestData: {
-          model: AppConfig.openAiModels[0],
-          stream: true
-        },
-        requiredToken: true,
-        requestDataSerializer: (data) => JSON.stringify(data)
-      }
-    }).usePlugin(container.get(RequestLogger));
-
-    const abortPlugin = container.get(FetchAbortPlugin);
-    const feApi = new FeApi({
-      abortPlugin,
-      config: {
-        responseType: 'json',
-        baseURL: 'https://api.example.com/'
-      }
-    })
-      .usePlugin(new FetchURLPlugin())
-      .usePlugin(
-        new RequestCommonPlugin({
-          tokenPrefix: AppConfig.openAiTokenPrefix,
-          requiredToken: true,
-          token: () => localJsonStorage.getItem('fe_user_token')
-        })
-      )
-      .usePlugin(new FeApiMockPlugin(mockDataJson))
-      .usePlugin(container.get(RequestLogger))
-      .usePlugin(abortPlugin);
-
-    container.bind(OpenAIClient).toConstantValue(openAiApi);
-    container.bind(FeApi).toConstantValue(feApi);
-  }
+  register(_container: InversifyRegisterContainer): void {}
 }

package/templates/react-app/src/core/registers/RegisterCommon.ts

@@ -2,20 +2,58 @@ import type {
   InversifyRegisterInterface,
   InversifyRegisterContainer
 } from '@/base/port/InversifyIocInterface';
-
-import { FetchAbortPlugin, JSONStorage } from '@qlover/fe-utils';
-import { UserToken } from '@/base/cases/UserToken';
+import { FetchAbortPlugin, JSONStorage, Logger } from '@qlover/fe-corekit';
 import AppConfig from '@/core/AppConfig';
+import { IOCIdentifier } from '@/core/IOC';
+import {
+  UserToken,
+  RequestCommonPlugin,
+  ApiMockPlugin,
+  ApiCatchPlugin,
+  ThemeService
+} from '@qlover/corekit-bridge';
+import mockDataJson from '@config/feapi.mock.json';
+import { RequestStatusCatcher } from '@/base/cases/RequestStatusCatcher';
+import { override as themeOverride } from '@config/theme.json';
+import { localJsonStorage } from '../globals';
 
 export class RegisterCommon implements InversifyRegisterInterface {
   register(container: InversifyRegisterContainer): void {
+    const userToken = new UserToken(
+      AppConfig.userTokenStorageKey,
+      container.get(JSONStorage)
+    );
     const feApiAbort = new FetchAbortPlugin();
-    const userToken = new UserToken({
-      storageKey: AppConfig.userTokenStorageKey,
-      storage: container.get(JSONStorage)
+    const feApiRequestCommonPlugin = new RequestCommonPlugin({
+      tokenPrefix: AppConfig.openAiTokenPrefix,
+      requiredToken: true,
+      token: () => userToken.getToken()
     });
 
     container.bind(FetchAbortPlugin).toConstantValue(feApiAbort);
     container.bind(UserToken).toConstantValue(userToken);
+
+    container.bind(IOCIdentifier.FeApiToken).toConstantValue(userToken);
+    container
+      .bind(IOCIdentifier.FeApiCommonPlugin)
+      .toConstantValue(feApiRequestCommonPlugin);
+    container
+      .bind(IOCIdentifier.ApiMockPlugin)
+      .toConstantValue(new ApiMockPlugin(mockDataJson, container.get(Logger)));
+    container
+      .bind(IOCIdentifier.ApiCatchPlugin)
+      .toConstantValue(
+        new ApiCatchPlugin(
+          container.get(Logger),
+          container.get(RequestStatusCatcher)
+        )
+      );
+
+    container.bind(ThemeService).toConstantValue(
+      new ThemeService({
+        ...themeOverride,
+        storage: localJsonStorage
+      })
+    );
   }
 }

package/templates/react-app/src/core/registers/RegisterControllers.ts

@@ -6,53 +6,24 @@ import type {
 import { localJsonStorage, logger } from '../globals';
 import { RouterController } from '@/uikit/controllers/RouterController';
 import { JSONStorageController } from '@/uikit/controllers/JSONStorageController';
-import { RequestController } from '@/uikit/controllers/RequestController';
-import { ProcesserService } from '@/services/processer/ProcesserService';
-import { ExecutorController } from '@/uikit/controllers/ExecutorController';
+import { ProcesserService } from '@/base/services/ProcesserService';
 import { UserController } from '@/uikit/controllers/UserController';
-import { ThemeController } from '@lib/fe-react-theme/ThemeController';
-import { RouteConfig } from '@/base/types/Page';
-import { OpenAIClient } from '@lib/openAiApi';
-import { FeApi } from '@/base/apis/feApi';
-import appRouterConfig from '@config/app.router.json';
-import themeConfigJson from '@config/theme.json';
-import { UserToken } from '@/base/cases/UserToken';
+import { base as baseRoutes } from '@config/app.router.json';
 
 export class RegisterControllers implements InversifyRegisterInterface {
   register(container: InversifyRegisterContainer): void {
     const routerController = new RouterController({
-      config: appRouterConfig.base as RouteConfig,
+      config: baseRoutes,
       logger
     });
 
     const jsonStorageController = new JSONStorageController(localJsonStorage);
-    const requestController = new RequestController(
-      container.get(OpenAIClient),
-      container.get(FeApi)
-    );
-    const executorController = new ExecutorController(container.get(FeApi));
-    const userController = new UserController({
-      userToken: container.get(UserToken),
-      feApi: container.get(FeApi),
-      routerController
-    });
-    const themeController = new ThemeController({
-      ...themeConfigJson.override,
-      storage: localJsonStorage
-    });
-
-    const pageProcesser = new ProcesserService({
-      logger
-    }).usePlugin(userController);
 
     container.bind(RouterController).toConstantValue(routerController);
     container
       .bind(JSONStorageController)
       .toConstantValue(jsonStorageController);
-    container.bind(RequestController).toConstantValue(requestController);
-    container.bind(ExecutorController).toConstantValue(executorController);
-    container.bind(UserController).toConstantValue(userController);
-    container.bind(ThemeController).toConstantValue(themeController);
-    container.bind(ProcesserService).toConstantValue(pageProcesser);
+
+    container.get(ProcesserService).use(container.get(UserController));
   }
 }

package/templates/react-app/src/core/registers/RegisterGlobals.ts

@@ -1,13 +1,19 @@
+import { JSONSerializer, JSONStorage, Logger } from '@qlover/fe-corekit';
+import type { EnvConfigInterface } from '@qlover/corekit-bridge';
 import type {
   InversifyRegisterInterface,
   InversifyRegisterContainer
 } from '@/base/port/InversifyIocInterface';
 import { JSON, localJsonStorage, logger } from '../globals';
-import { JSONSerializer, JSONStorage, Logger } from '@qlover/fe-utils';
-import { IOCIdentifier } from '@/base/consts/IOCIdentifier';
+import { IOCIdentifier } from '@/core/IOC';
 
 export class RegisterGlobals implements InversifyRegisterInterface {
+  constructor(private appConfig: EnvConfigInterface) {}
+
   register(container: InversifyRegisterContainer): void {
+    // inject AppConfig to IOC
+    container.bind(IOCIdentifier.AppConfig).toConstantValue(this.appConfig);
+
     container.bind(JSONSerializer).toConstantValue(JSON);
     container.bind(IOCIdentifier.JSON).toConstantValue(JSON);
 

package/templates/react-app/src/core/registers/index.ts

@@ -3,6 +3,7 @@ import { RegisterGlobals } from './RegisterGlobals';
 import { RegisterCommon } from './RegisterCommon';
 import { RegisterApi } from './RegisterApi';
 import { RegisterControllers } from './RegisterControllers';
+import AppConfig from '../AppConfig';
 
 /**
  * Register List
@@ -10,7 +11,7 @@ import { RegisterControllers } from './RegisterControllers';
  * Register List is used to register dependencies in bootstrap
  */
 export const registerList: InversifyRegisterInterface[] = [
-  new RegisterGlobals(),
+  new RegisterGlobals(AppConfig),
   new RegisterCommon(),
   new RegisterApi(),
   new RegisterControllers()

package/templates/react-app/src/main.tsx

@@ -5,7 +5,10 @@ import { createRoot } from 'react-dom/client';
 import App from './App.tsx';
 import startup from './core/bootstrap';
 
-startup(window);
+startup({
+  window: window,
+  envSource: import.meta.env
+});
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>

package/templates/react-app/src/pages/auth/Layout.tsx

@@ -1,13 +1,14 @@
 import { IOC } from '@/core/IOC';
 import { UserController } from '@/uikit/controllers/UserController';
-import { useController } from '@lib/fe-react-controller';
 import { Navigate, Outlet } from 'react-router-dom';
+import { useSliceStore } from '@qlover/slice-store-react';
 
 export default function Layout() {
-  const controller = useController(IOC(UserController));
+  const userController = IOC(UserController);
+  useSliceStore(userController, (state) => state.success);
 
   // If user is authenticated, redirect to home page
-  if (controller.isAuthenticated()) {
+  if (userController.isAuthenticated()) {
     return <Navigate to="/" replace />;
   }
 

package/templates/react-app/src/pages/auth/Login.tsx

@@ -1,14 +1,16 @@
 import { useState } from 'react';
-import { useController } from '@lib/fe-react-controller';
 import { IOC } from '@/core/IOC';
 import { useBaseRoutePage } from '@/uikit/contexts/BaseRouteContext';
 import { RouterController } from '@/uikit/controllers/RouterController';
 import { UserController } from '@/uikit/controllers/UserController';
 import AppConfig from '@/core/AppConfig';
+import { useSliceStore } from '@qlover/slice-store-react';
 
 export default function Login() {
   const { t } = useBaseRoutePage();
-  const controller = useController(IOC(UserController));
+  const userController = IOC(UserController);
+  useSliceStore(userController);
+
   const [email, setEmail] = useState(AppConfig.loginUser);
   const [password, setPassword] = useState(AppConfig.loginPassword);
   const [loading, setLoading] = useState(false);
@@ -16,7 +18,7 @@ export default function Login() {
   const handleLogin = async () => {
     try {
       setLoading(true);
-      await controller.login({ username: email, password });
+      await userController.login({ username: email, password });
       // Redirect or show success message
       IOC(RouterController).replaceToHome();
     } catch (error) {

package/templates/react-app/src/pages/base/ErrorIdentifier.tsx

@@ -0,0 +1,39 @@
+import { useBaseRoutePage } from '@/uikit/contexts/BaseRouteContext';
+import * as ErrorIdentifierList from '@config/ErrorIdentifier';
+
+export default function ErrorIdentifier() {
+  const { t } = useBaseRoutePage();
+
+  return (
+    <div className="min-h-screen bg-gray-100/90 py-8 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-3xl mx-auto">
+        <div className="bg-white shadow-lg rounded-lg overflow-hidden">
+          <div className="bg-gradient-to-r from-blue-500 to-purple-600 px-6 py-4">
+            <h1 className="text-2xl font-bold text-white">
+              {t('errorIdentifier')}
+            </h1>
+            <p className="text-blue-100 mt-1">
+              Identifier From: '@config/ErrorIdentifier'
+            </p>
+          </div>
+
+          <div className="divide-y divide-gray-200">
+            {Object.entries(ErrorIdentifierList).map(([key, value]) => (
+              <div
+                key={key}
+                className="px-6 py-4 flex flex-col sm:flex-row sm:items-center hover:bg-gray-50"
+              >
+                <span className="font-medium text-gray-700 mr-3 min-w-[200px]">
+                  {key}
+                </span>
+                <span className="mt-1 sm:mt-0 text-gray-600 bg-gray-100 px-3 py-1 rounded-md">
+                  {t(value)}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/react-app/src/pages/base/Executor.tsx

@@ -1,13 +1,22 @@
 import { IOC } from '@/core/IOC';
-import { useControllerState } from '@lib/fe-react-controller';
 import { useBaseRoutePage } from '@/uikit/contexts/BaseRouteContext';
 import { JSONStorageController } from '@/uikit/controllers/JSONStorageController';
 import { ExecutorController } from '@/uikit/controllers/ExecutorController';
+import { useSliceStore } from '@qlover/slice-store-react';
 
 export default function Executor() {
-  const jsonStorageControllerState = useControllerState(
-    IOC(JSONStorageController)
+  const executorController = IOC(ExecutorController);
+  const jSONStorageController = IOC(JSONStorageController);
+  const requestTimeout = useSliceStore(
+    jSONStorageController,
+    jSONStorageController.selector.requestTimeout
   );
+
+  const helloState = useSliceStore(
+    executorController,
+    executorController.selector.helloState
+  );
+
   const { t } = useBaseRoutePage();
 
   return (
@@ -20,7 +29,7 @@ export default function Executor() {
         </div>
 
         <div className="bg-white shadow-lg rounded-lg px-8 py-6">
-          {t('requestTimeout')}: {jsonStorageControllerState.requestTimeout}
+          {t('requestTimeout')}: {requestTimeout}
         </div>
         <div className="space-y-6">
           <div className="p-6 bg-gray-50 rounded-lg">
@@ -28,12 +37,24 @@ export default function Executor() {
               {t('executorTestPlugin')}
             </h2>
 
-            <button
-              className="bg-blue-500 text-white px-4 py-2 rounded-md"
-              onClick={IOC(ExecutorController).onTestPlugins}
-            >
-              {t('testPlugin')}
-            </button>
+            <div className="text-gray-800">
+              {helloState.loading ? (
+                <div>Loading...</div>
+              ) : (
+                <button
+                  className="bg-blue-500 px-4 py-2 rounded-md"
+                  onClick={executorController.onTestPlugins}
+                >
+                  {t('testPlugin')}
+                </button>
+              )}
+
+              {helloState.error instanceof Error ? (
+                <div>{helloState.error.message}</div>
+              ) : (
+                <div>{IOC('JSON').stringify(helloState.result?.data)}</div>
+              )}
+            </div>
           </div>
         </div>
       </div>

package/templates/react-app/src/pages/base/Home.tsx

@@ -1,6 +1,49 @@
-import LocaleLink from '@/components/LocaleLink';
+import LocaleLink from '@/uikit/components/LocaleLink';
 import { useBaseRoutePage } from '@/uikit/contexts/BaseRouteContext';
 
+const navigationItems = [
+  {
+    href: '/about',
+    bgColor: 'bg-blue-50',
+    hoverColor: 'hover:bg-blue-100',
+    titleColor: 'text-blue-700',
+    titleKey: 'about',
+    descriptionKey: 'about_description'
+  },
+  {
+    href: '/jsonstorage',
+    bgColor: 'bg-green-50',
+    hoverColor: 'hover:bg-green-100',
+    titleColor: 'text-green-700',
+    titleKey: 'jsonstorage',
+    descriptionKey: 'jsonstorage_description'
+  },
+  {
+    href: '/request',
+    bgColor: 'bg-red-50',
+    hoverColor: 'hover:bg-red-100',
+    titleColor: 'text-red-700',
+    titleKey: 'request',
+    descriptionKey: 'request_description'
+  },
+  {
+    href: '/executor',
+    bgColor: 'bg-purple-50',
+    hoverColor: 'hover:bg-purple-100',
+    titleColor: 'text-purple-700',
+    titleKey: 'executor',
+    descriptionKey: 'executor_description'
+  },
+  {
+    href: '/errorIdentifier',
+    bgColor: 'bg-amber-50',
+    hoverColor: 'hover:bg-amber-100',
+    titleColor: 'text-amber-700',
+    titleKey: 'errorIdentifier',
+    descriptionKey: 'errorIdentifier_description'
+  }
+];
+
 export default function Home() {
   const { t } = useBaseRoutePage();
 
@@ -18,35 +61,20 @@ export default function Home() {
             </div>
 
             <div className="grid gap-4">
-              <LocaleLink
-                href="/about"
-                className="block p-4 bg-blue-50 rounded-lg hover:bg-blue-100 transition-colors duration-200"
-              >
-                <h2 className="text-xl font-semibold text-blue-700 mb-2">
-                  {t('about')}
-                </h2>
-                <p className="text-gray-600">{t('about_description')}</p>
-              </LocaleLink>
-
-              <LocaleLink
-                href="/jsonstorage"
-                className="block p-4 bg-green-50 rounded-lg hover:bg-green-100 transition-colors duration-200"
-              >
-                <h2 className="text-xl font-semibold text-green-700 mb-2">
-                  {t('jsonstorage')}
-                </h2>
-                <p className="text-gray-600">{t('jsonstorage_description')}</p>
-              </LocaleLink>
-
-              <LocaleLink
-                href="/request"
-                className="block p-4 bg-red-50 rounded-lg hover:bg-red-100 transition-colors duration-200"
-              >
-                <h2 className="text-xl font-semibold text-red-700 mb-2">
-                  {t('request')}
-                </h2>
-                <p className="text-gray-600">{t('request_description')}</p>
-              </LocaleLink>
+              {navigationItems.map((item, index) => (
+                <LocaleLink
+                  key={index}
+                  href={item.href}
+                  className={`block p-4 ${item.bgColor} rounded-lg ${item.hoverColor} transition-colors duration-200`}
+                >
+                  <h2
+                    className={`text-xl font-semibold ${item.titleColor} mb-2`}
+                  >
+                    {t(item.titleKey)}
+                  </h2>
+                  <p className="text-gray-600">{t(item.descriptionKey)}</p>
+                </LocaleLink>
+              ))}
             </div>
 
             <div className="mt-8 text-center">

package/templates/react-app/src/pages/base/JSONStorage.tsx

@@ -1,14 +1,12 @@
 import { IOC } from '@/core/IOC';
-import { useController, useControllerState } from '@lib/fe-react-controller';
 import { useBaseRoutePage } from '@/uikit/contexts/BaseRouteContext';
 import template from 'lodash/template';
 import { JSONStorageController } from '@/uikit/controllers/JSONStorageController';
+import { useSliceStore } from '@qlover/slice-store-react';
 
 export default function JSONStorage() {
   const jsonStorageController = IOC(JSONStorageController);
-  const controllerState = useControllerState(
-    useController(jsonStorageController)
-  );
+  const controllerState = useSliceStore(jsonStorageController);
 
   const { t } = useBaseRoutePage();