@qlover/create-app 0.3.2 → 0.3.3

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

@@ -1,78 +1,67 @@
 import {
   Bootstrap,
-  type BootstrapExecutorPlugin,
-  InjectEnv,
-  InjectIOC,
-  InjectGlobal
+  type InjectGlobalConfig,
+  type InjectIOCOptions,
+  type IOCContainerInterface,
+  type InjectEnvConfig
 } from '@qlover/corekit-bridge';
 import AppConfig from '@/core/AppConfig';
-import { envPrefix, browserGlobalsName, envBlackList } from '@config/common';
+import { envBlackList, envPrefix, browserGlobalsName } from '@config/common';
 import { IOC } from './IOC';
 import * as globals from '@/core/globals';
-import { I18nService } from '@/base/services/I18nService';
-import { registerList } from './registers';
-import { appBootstrapList } from './bootstraps';
-import { GLOBAL_NO_WINDOW } from '@config/ErrorIdentifier';
+import { IocRegister } from './registers';
+import { BootstrapsRegistry } from './bootstraps';
+import { GLOBAL_NO_WINDOW } from '@config/Identifier.Error';
 
-const printBootstrap: BootstrapExecutorPlugin = {
-  pluginName: 'PrintBootstrap',
-  onSuccess({ parameters: { logger } }) {
-    logger.info(
-      'bootstrap success!\n\n' +
-        `You can use \`%cwindow.${browserGlobalsName}%c\` to access the globals`,
-      'color: #0ff; font-weight: bold;',
-      'all: unset;'
-    );
-  }
-};
-
-/**
- * Bootstrap
- *
- * 1. inject env config to AppConfig
- * 2. inject IOC to Application
- * 3. inject globals to window
- *
- */
-export default function startup({
-  window,
+export default async function startup({
+  root,
   envSource
 }: {
-  window: unknown;
+  root: unknown;
   envSource: Record<string, unknown>;
 }) {
-  if (!(typeof window !== 'undefined' && window instanceof Window)) {
+  if (!(typeof root !== 'undefined' && root instanceof Window)) {
     throw new Error(GLOBAL_NO_WINDOW);
   }
 
   const { logger } = globals;
 
-  const bootstrap = new Bootstrap(window, IOC.implemention!, logger);
+  const envOptions: InjectEnvConfig = {
+    target: AppConfig,
+    source: envSource,
+    prefix: envPrefix,
+    blackList: envBlackList
+  };
 
-  /**
-   * bootstrap start list
-   *
-   * - inject env config to AppConfig
-   * - inject IOC to Application
-   * - inject globals to window
-   * - inject i18n service to Application
-   */
-  const bootstrapList: BootstrapExecutorPlugin[] = [
-    new InjectEnv(AppConfig, envSource, envPrefix, envBlackList),
-    new InjectIOC(IOC, registerList),
-    new InjectGlobal(globals, browserGlobalsName),
-    new I18nService(window.location.pathname),
-    ...appBootstrapList
-  ];
+  const iocOptions: InjectIOCOptions<IOCContainerInterface> = {
+    manager: IOC,
+    register: new IocRegister({
+      pathname: root.location.pathname
+    })
+  };
 
-  if (AppConfig.env !== 'production') {
-    bootstrapList.push(printBootstrap);
-  }
+  const globalOptions: InjectGlobalConfig = {
+    sources: globals,
+    target: browserGlobalsName
+  };
+
+  const bootstrap = new Bootstrap({
+    root,
+    logger,
+    ioc: iocOptions,
+    envOptions,
+    globalOptions
+  });
 
   try {
     logger.info('bootstrap start...');
 
-    bootstrap.use(bootstrapList).start();
+    // init bootstrap
+    await bootstrap.initialize();
+
+    const bootstrapsRegistry = new BootstrapsRegistry(IOC);
+
+    await bootstrap.use(bootstrapsRegistry.register()).start();
   } catch (error) {
     logger.error(`${AppConfig.appName} starup error:`, error);
   }

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

@@ -0,0 +1,14 @@
+import { browserGlobalsName } from '@config/common';
+import { BootstrapExecutorPlugin } from '@qlover/corekit-bridge';
+
+export const printBootstrap: BootstrapExecutorPlugin = {
+  pluginName: 'PrintBootstrap',
+  onSuccess({ parameters: { logger } }) {
+    logger.info(
+      'bootstrap success!\n\n' +
+        `You can use \`%cwindow.${browserGlobalsName}%c\` to access the globals`,
+      'color: #0ff; font-weight: bold;',
+      'all: unset;'
+    );
+  }
+};

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

@@ -1,12 +1,41 @@
-import type { BootstrapExecutorPlugin } from '@qlover/corekit-bridge';
+import type {
+  BootstrapExecutorPlugin,
+  EnvConfigInterface,
+  IOCContainerInterface,
+  IOCFunctionInterface
+} 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';
+import { printBootstrap } from './PrintBootstrap';
+import { IOCIdentifier, type IOCIdentifierMap } from '../IOC';
+import { I18nService } from '@/base/services/I18nService';
 
-export const appBootstrapList: BootstrapExecutorPlugin[] = [
-  new UserApiBootstarp(),
-  new FeApiBootstarp(),
-  AiApiBootstarp,
-  new BootstrapApp()
-];
+export class BootstrapsRegistry {
+  constructor(
+    protected IOC: IOCFunctionInterface<IOCIdentifierMap, IOCContainerInterface>
+  ) {}
+
+  get appConfig(): EnvConfigInterface {
+    return this.IOC(IOCIdentifier.AppConfig);
+  }
+
+  register(): BootstrapExecutorPlugin[] {
+    const IOC = this.IOC;
+
+    const bootstrapList = [
+      IOC(I18nService),
+      new UserApiBootstarp(),
+      new FeApiBootstarp(),
+      AiApiBootstarp,
+      new BootstrapApp()
+    ];
+
+    if (this.appConfig.env !== 'production') {
+      bootstrapList.push(printBootstrap);
+    }
+
+    return bootstrapList;
+  }
+}

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

@@ -1,8 +1,5 @@
-import type {
-  InversifyRegisterInterface,
-  InversifyRegisterContainer
-} from '@/base/port/InversifyIocInterface';
+import { InversifyContainer, InversifyRegisterInterface } from '../IOC';
 
 export class RegisterApi implements InversifyRegisterInterface {
-  register(_container: InversifyRegisterContainer): void {}
+  register(_container: InversifyContainer): void {}
 }

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

@@ -1,25 +1,33 @@
-import type {
-  InversifyRegisterInterface,
-  InversifyRegisterContainer
-} from '@/base/port/InversifyIocInterface';
 import { FetchAbortPlugin, JSONStorage } from '@qlover/fe-corekit';
-import { Logger }from '@qlover/logger';
-import AppConfig from '@/core/AppConfig';
-import { IOCIdentifier } from '@/core/IOC';
+import { Logger } from '@qlover/logger';
+import {
+  InversifyContainer,
+  InversifyRegisterInterface,
+  IOCIdentifier,
+  IocRegisterOptions
+} from '@/core/IOC';
 import {
   UserToken,
   RequestCommonPlugin,
   ApiMockPlugin,
   ApiCatchPlugin,
-  ThemeService
+  ThemeService,
+  IOCManagerInterface
 } 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 themeConfig from '@config/theme.json';
 import { localJsonStorage } from '../globals';
+import { I18nService } from '@/base/services/I18nService';
 
 export class RegisterCommon implements InversifyRegisterInterface {
-  register(container: InversifyRegisterContainer): void {
+  register(
+    container: InversifyContainer,
+    _: IOCManagerInterface<InversifyContainer>,
+    options: IocRegisterOptions
+  ): void {
+    const AppConfig = container.get(IOCIdentifier.AppConfig);
+
     const userToken = new UserToken(
       AppConfig.userTokenStorageKey,
       container.get(JSONStorage)
@@ -31,30 +39,31 @@ export class RegisterCommon implements InversifyRegisterInterface {
       token: () => userToken.getToken()
     });
 
-    container.bind(FetchAbortPlugin).toConstantValue(feApiAbort);
-    container.bind(UserToken).toConstantValue(userToken);
+    container.bind(FetchAbortPlugin, feApiAbort);
+    container.bind(UserToken, 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(IOCIdentifier.FeApiToken, userToken);
+    container.bind(IOCIdentifier.FeApiCommonPlugin, feApiRequestCommonPlugin);
+    container.bind(
+      IOCIdentifier.ApiMockPlugin,
+      new ApiMockPlugin(mockDataJson, container.get(Logger))
+    );
+    container.bind(
+      IOCIdentifier.ApiCatchPlugin,
+      new ApiCatchPlugin(
+        container.get(Logger),
+        container.get(RequestStatusCatcher)
+      )
+    );
 
-    container.bind(ThemeService).toConstantValue(
+    container.bind(
+      ThemeService,
       new ThemeService({
-        ...themeOverride,
+        ...themeConfig,
         storage: localJsonStorage
       })
     );
+
+    container.bind(I18nService, new I18nService(options.pathname));
   }
 }

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

@@ -1,17 +1,14 @@
-import type {
-  InversifyRegisterInterface,
-  InversifyRegisterContainer
-} from '@/base/port/InversifyIocInterface';
-
 import { localJsonStorage, logger } from '../globals';
 import { RouterController } from '@/uikit/controllers/RouterController';
 import { JSONStorageController } from '@/uikit/controllers/JSONStorageController';
 import { ProcesserService } from '@/base/services/ProcesserService';
 import { UserController } from '@/uikit/controllers/UserController';
 import { base as baseRoutes } from '@config/app.router.json';
+import { InversifyRegisterInterface } from '../IOC';
+import { InversifyContainer } from '../IOC';
 
 export class RegisterControllers implements InversifyRegisterInterface {
-  register(container: InversifyRegisterContainer): void {
+  register(container: InversifyContainer): void {
     const routerController = new RouterController({
       config: baseRoutes,
       logger
@@ -19,10 +16,8 @@ export class RegisterControllers implements InversifyRegisterInterface {
 
     const jsonStorageController = new JSONStorageController(localJsonStorage);
 
-    container.bind(RouterController).toConstantValue(routerController);
-    container
-      .bind(JSONStorageController)
-      .toConstantValue(jsonStorageController);
+    container.bind(RouterController, routerController);
+    container.bind(JSONStorageController, jsonStorageController);
 
     container.get(ProcesserService).use(container.get(UserController));
   }

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

@@ -1,27 +1,27 @@
 import { JSONSerializer, JSONStorage } 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 { IOCIdentifier } from '@/core/IOC';
+import {
+  type InversifyContainer,
+  type InversifyRegisterInterface,
+  IOCIdentifier
+} from '@/core/IOC';
 import { Logger } from '@qlover/logger';
 
 export class RegisterGlobals implements InversifyRegisterInterface {
   constructor(private appConfig: EnvConfigInterface) {}
 
-  register(container: InversifyRegisterContainer): void {
+  register(container: InversifyContainer): void {
     // inject AppConfig to IOC
-    container.bind(IOCIdentifier.AppConfig).toConstantValue(this.appConfig);
+    container.bind(IOCIdentifier.AppConfig, this.appConfig);
 
-    container.bind(JSONSerializer).toConstantValue(JSON);
-    container.bind(IOCIdentifier.JSON).toConstantValue(JSON);
+    container.bind(JSONSerializer, JSON);
+    container.bind(IOCIdentifier.JSON, JSON);
 
-    container.bind(Logger).toConstantValue(logger);
-    container.bind(IOCIdentifier.Logger).toConstantValue(logger);
+    container.bind(Logger, logger);
+    container.bind(IOCIdentifier.Logger, logger);
 
-    container.bind(JSONStorage).toConstantValue(localJsonStorage);
-    container.bind(IOCIdentifier.JSONStorage).toConstantValue(localJsonStorage);
+    container.bind(JSONStorage, localJsonStorage);
+    container.bind(IOCIdentifier.JSONStorage, localJsonStorage);
   }
 }

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

@@ -1,18 +1,33 @@
-import type { InversifyRegisterInterface } from '@/base/port/InversifyIocInterface';
 import { RegisterGlobals } from './RegisterGlobals';
 import { RegisterCommon } from './RegisterCommon';
 import { RegisterApi } from './RegisterApi';
 import { RegisterControllers } from './RegisterControllers';
 import AppConfig from '../AppConfig';
+import {
+  InversifyContainer,
+  InversifyRegisterInterface,
+  IocRegisterOptions
+} from '../IOC';
+import { IOCManagerInterface } from '@qlover/corekit-bridge';
 
-/**
- * Register List
- *
- * Register List is used to register dependencies in bootstrap
- */
-export const registerList: InversifyRegisterInterface[] = [
-  new RegisterGlobals(AppConfig),
-  new RegisterCommon(),
-  new RegisterApi(),
-  new RegisterControllers()
-];
+export class IocRegister implements InversifyRegisterInterface {
+  constructor(protected options: IocRegisterOptions) {}
+
+  getRegisterList(): InversifyRegisterInterface[] {
+    return [
+      new RegisterGlobals(AppConfig),
+      new RegisterCommon(),
+      new RegisterApi(),
+      new RegisterControllers()
+    ];
+  }
+
+  register(
+    ioc: InversifyContainer,
+    manager: IOCManagerInterface<InversifyContainer>
+  ): void {
+    this.getRegisterList().forEach((register) => {
+      register.register(ioc, manager, this.options);
+    });
+  }
+}

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

@@ -6,7 +6,7 @@ import App from './App.tsx';
 import startup from './core/bootstrap';
 
 startup({
-  window: window,
+  root: window,
   envSource: import.meta.env
 });
 

package/templates/react-app/src/pages/404.tsx

@@ -5,7 +5,7 @@ export default function NotFound({ route }: { route?: string }) {
   return (
     <div className="flex flex-col justify-center min-h-screen py-6 bg-background sm:py-12">
       <div className="relative py-3 mx-auto sm:max-w-xl">
-        <h1 className="text-primary text-2xl font-bold text-center">
+        <h1 className="text-text text-2xl font-bold text-center">
           404 -{route ? `${t('404.notComponent')}: ${route}` : t('404.notPage')}
         </h1>
       </div>

package/templates/react-app/src/pages/500.tsx

@@ -5,7 +5,7 @@ export default function NotFound500() {
   return (
     <div className="flex flex-col justify-center min-h-screen py-6 bg-background sm:py-12">
       <div className="relative py-3 mx-auto sm:max-w-xl">
-        <h1 className="text-primary text-2xl font-bold text-center">
+        <h1 className="text-text text-2xl font-bold text-center">
           500 - {t('500.title')}
         </h1>
       </div>

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

@@ -1,28 +1,33 @@
 import { useState } from 'react';
+import { Form, Input, Button } from 'antd';
+import { UserOutlined, LockOutlined, GoogleOutlined } from '@ant-design/icons';
 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';
 
+interface LoginFormData {
+  email: string;
+  password: string;
+}
+
 export default function Login() {
   const { t } = useBaseRoutePage();
   const userController = IOC(UserController);
+  const AppConfig = IOC('AppConfig');
   useSliceStore(userController);
-
-  const [email, setEmail] = useState(AppConfig.loginUser);
-  const [password, setPassword] = useState(AppConfig.loginPassword);
   const [loading, setLoading] = useState(false);
 
-  const handleLogin = async () => {
+  const handleLogin = async (values: LoginFormData) => {
     try {
       setLoading(true);
-      await userController.login({ username: email, password });
-      // Redirect or show success message
+      await userController.login({
+        username: values.email,
+        password: values.password
+      });
       IOC(RouterController).replaceToHome();
     } catch (error) {
-      // Handle login error
       console.error(error);
     } finally {
       setLoading(false);
@@ -30,37 +35,124 @@ export default function Login() {
   };
 
   return (
-    <div className="min-h-screen bg-gray-100 py-6 flex flex-col justify-center sm:py-12">
-      <div className="relative py-3 sm:max-w-xl sm:mx-auto">
-        <div className="bg-white shadow-lg rounded-lg px-8 py-6">
-          <h1 className="text-base font-bold text-center text-gray-800 mb-8">
-            {t('login')}
-          </h1>
-          <div className="space-y-6">
-            <input
-              type="email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              placeholder={t('email')}
-              className="w-full px-4 py-2 border rounded-lg"
-            />
-            <input
-              type="password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              placeholder={t('password')}
-              className="w-full px-4 py-2 border rounded-lg"
-            />
-            <button
-              onClick={handleLogin}
-              className="w-full px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors duration-200"
-              disabled={loading}
+    <div className="flex min-h-screen text-xs1 bg-primary">
+      {/* Left side - Brand section */}
+      <div className="hidden lg:flex lg:w-1/2 bg-secondary p-12 flex-col">
+        <div className="flex items-center gap-3 mb-12">
+          <div className="w-10 h-10 bg-brand rounded-lg"></div>
+          <span className="text-2xl font-semibold text-text">
+            {AppConfig.appName}
+          </span>
+        </div>
+        <h1 className="text-4xl font-bold text-text mb-4">
+          Welcome back to the future of learning
+        </h1>
+        <p className="text-text-secondary text-lg mb-8">
+          Unlock personalized AI-powered learning experiences designed to
+          accelerate your knowledge journey.
+        </p>
+        <div className="space-y-4">
+          <FeatureItem
+            icon="🎯"
+            text="AI-powered personalized learning paths"
+          />
+          <FeatureItem icon="🎯" text="Smart content recommendations" />
+          <FeatureItem icon="📊" text="Real-time progress tracking" />
+        </div>
+      </div>
+
+      {/* Right side - Login form */}
+      <div className="w-full lg:w-1/2 p-8 sm:p-12 flex items-center justify-center">
+        <div className="w-full max-w-[420px]">
+          <h2 className="text-2xl font-semibold mb-2 text-text">
+            {t('Sign in to your account')}
+          </h2>
+          <p className="text-text-secondary mb-8">
+            Enter your credentials to access your dashboard
+          </p>
+
+          <Form
+            name="login"
+            initialValues={{
+              email: AppConfig.loginUser,
+              password: AppConfig.loginPassword
+            }}
+            onFinish={handleLogin}
+            layout="vertical"
+            className="space-y-4"
+          >
+            <Form.Item
+              name="email"
+              rules={[{ required: true, message: 'Please input your email!' }]}
             >
-              {loading ? 'Loading...' : t('login')}
-            </button>
-          </div>
+              <Input
+                prefix={<UserOutlined className="text-text-tertiary" />}
+                placeholder={t('email')}
+                className="h-12 text-base bg-secondary border-border"
+              />
+            </Form.Item>
+
+            <Form.Item
+              name="password"
+              rules={[
+                { required: true, message: 'Please input your password!' }
+              ]}
+            >
+              <Input.Password
+                prefix={<LockOutlined />}
+                placeholder={t('password')}
+                className="h-12 text-base"
+              />
+            </Form.Item>
+
+            <div className="flex justify-end">
+              <a href="#" className="text-brand hover:text-brand-hover">
+                {t('Forgot your password?')}
+              </a>
+            </div>
+
+            <Form.Item>
+              <Button
+                type="primary"
+                htmlType="submit"
+                loading={loading}
+                className="w-full h-12 text-base"
+              >
+                {t('Sign In')}
+              </Button>
+            </Form.Item>
+
+            <div className="text-center text-text-tertiary my-4">
+              or continue with
+            </div>
+
+            <Button icon={<GoogleOutlined />} className="w-full h-12 text-base">
+              Sign in with Google
+            </Button>
+
+            <div className="text-center mt-6">
+              <span className="text-text-tertiary">
+                Don't have an account?{' '}
+              </span>
+              <a href="#" className="text-brand hover:text-brand-hover">
+                Create one here
+              </a>
+            </div>
+          </Form>
         </div>
       </div>
     </div>
   );
 }
+
+// Helper component for feature items
+function FeatureItem({ icon, text }: { icon: string; text: string }) {
+  return (
+    <div className="flex items-center gap-3 text-text">
+      <div className="w-8 h-8 bg-elevated rounded-lg flex items-center justify-center">
+        {icon}
+      </div>
+      <span>{text}</span>
+    </div>
+  );
+}

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

@@ -1,11 +1,14 @@
 import { useBaseRoutePage } from '@/uikit/contexts/BaseRouteContext';
+import * as i18nKeys from '@config/Identifier.I18n';
 
 export default function About() {
   const { t } = useBaseRoutePage();
   return (
-    <div className="min-h-screen bg-gray-100 py-6 flex flex-col justify-center sm:py-12">
+    <div className="min-h-screen bg-primary py-6 flex flex-col justify-center sm:py-12">
       <div className="relative py-3 sm:max-w-xl sm:mx-auto">
-        <h1 className="text-2xl font-bold text-center">{t('title')}</h1>
+        <h1 className="text-2xl font-bold text-center text-text">
+          {t(i18nKeys.PAGE_ABOUT_TITLE)}
+        </h1>
       </div>
     </div>
   );