@qlover/create-app 0.4.0 → 0.4.2

package/templates/react-app/src/base/port/StoreInterface.ts

@@ -0,0 +1,58 @@
+import { SliceStore } from '@qlover/slice-store-react';
+
+/**
+ * Store State Interface
+ *
+ * This interface is used to define the state of a store.
+ * It is used to define the state of a store.
+ *
+ * must implement the copyWith method
+ */
+export interface StoreStateInterface {
+  // You can define your own properties here
+  // ...
+}
+
+/**
+ * Store Interface
+ *
+ * This class is used to define the store interface.
+ * It is used to define the store interface.
+ *
+ * @example
+ * ```ts
+ * class ChatStoreState implements StoreStateInterface {
+ *   isChatRunning: boolean = false;
+ *
+ *   copyWith(state: { isChatRunning?: boolean }): this {
+ *     return Object.assign(new ChatStoreState(), this, state);
+ *   }
+ * }
+ *
+ * export class ChatStore extends StoreInterface<ChatStoreState> {
+ *   constructor() {
+ *     super(() => new ChatStoreState());
+ *   }
+ * }
+ * ```
+ */
+export abstract class StoreInterface<
+  T extends StoreStateInterface
+> extends SliceStore<T> {
+  /**
+   * Constructor
+   *
+   * @param stateFactory - The factory function to create the initial state
+   */
+  constructor(protected stateFactory: () => T) {
+    super(stateFactory);
+  }
+
+  /**
+   * Reset the state of the store
+   */
+  resetState(): void {
+    // Create a new instance of initial state
+    this.emit(this.stateFactory());
+  }
+}

package/templates/react-app/src/base/services/I18nService.ts

@@ -4,22 +4,22 @@ 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 {
-  SliceStore,
-  type BootstrapExecutorPlugin
-} from '@qlover/corekit-bridge';
-
+  StoreInterface,
+  StoreStateInterface
+} from '@/base/port/StoreInterface';
 const { supportedLngs, fallbackLng } = i18nConfig;
 
 export type I18nServiceLocale = (typeof supportedLngs)[number];
 
-export class I18nServiceState {
+export class I18nServiceState implements StoreStateInterface {
   loading: boolean = false;
   constructor(public language: I18nServiceLocale) {}
 }
 
 export class I18nService
-  extends SliceStore<I18nServiceState>
+  extends StoreInterface<I18nServiceState>
   implements BootstrapExecutorPlugin
 {
   readonly pluginName = 'I18nService';
@@ -57,9 +57,15 @@ export class I18nService
     const pathLanguageDetector = {
       name: 'pathLanguageDetector',
       lookup: () => {
-        const path = this.pathname.split('/');
-        const language = path[1];
-        return I18nService.isValidLanguage(language) ? language : fallbackLng;
+        const paths = this.pathname.split('/');
+
+        for (const path of paths) {
+          if (I18nService.isValidLanguage(path)) {
+            return path;
+          }
+        }
+
+        return fallbackLng;
       },
       cacheUserLanguage() {
         // no cache, because we get language from URL

package/templates/react-app/src/{uikit/controllers/RouterController.ts → base/services/RouteService.ts}

@@ -4,32 +4,32 @@ import type { UIDependenciesInterface } from '@/base/port/UIDependenciesInterfac
 import type { LoggerInterface } from '@qlover/logger';
 import { I18nService } from '@/base/services/I18nService';
 
-export type RouterControllerDependencies = {
+export type RouterServiceDependencies = {
   navigate: NavigateFunction;
 };
 
-export type RouterControllerOptions = {
+export type RouterServiceOptions = {
   config: {
     routes: RouteConfigValue[];
   };
   logger: LoggerInterface;
 };
 
-export type RouterControllerState = {
+export type RouterServiceState = {
   routes: RouteConfigValue[];
 };
 
-export class RouterController
-  implements UIDependenciesInterface<RouterControllerDependencies>
+export class RouteService
+  implements UIDependenciesInterface<RouterServiceDependencies>
 {
   /**
    * @override
    */
-  dependencies?: RouterControllerDependencies;
+  dependencies?: RouterServiceDependencies;
 
-  state: RouterControllerState;
+  state: RouterServiceState;
 
-  constructor(private options: RouterControllerOptions) {
+  constructor(private options: RouterServiceOptions) {
     this.state = {
       routes: options.config.routes
     };
@@ -49,7 +49,7 @@ export class RouterController
     return navigate;
   }
 
-  static composePath(path: string): string {
+  composePath(path: string): string {
     const targetLang = I18nService.getCurrentLanguage();
     return `/${targetLang}${path}`;
   }
@@ -57,11 +57,11 @@ export class RouterController
   /**
    * @override
    */
-  setDependencies(dependencies: Partial<RouterControllerDependencies>): void {
+  setDependencies(dependencies: Partial<RouterServiceDependencies>): void {
     this.dependencies = Object.assign(
       this.dependencies || {},
       dependencies
-    ) as RouterControllerDependencies;
+    ) as RouterServiceDependencies;
   }
 
   getRoutes(): RouteConfigValue[] {
@@ -73,7 +73,7 @@ export class RouterController
   }
 
   goto(path: string, options?: NavigateOptions): void {
-    path = RouterController.composePath(path);
+    path = this.composePath(path);
     this.logger.debug('Goto path => ', path);
     this.navigate?.(path, options);
   }

package/templates/react-app/src/{uikit/controllers/UserController.ts → base/services/UserService.ts}

@@ -3,17 +3,17 @@ import type {
   UserApiGetUserInfoTransaction,
   UserApiLoginTransaction
 } from '@/base/apis/userApi/UserApiType';
-import { RouterController } from './RouterController';
+import { RouteService } from './RouteService';
 import { ThreadUtil, type StorageTokenInterface } from '@qlover/corekit-bridge';
 import { inject, injectable } from 'inversify';
 import { IOCIdentifier } from '@/core/IOC';
-import { LoginInterface } from '@/base/port/LoginInterface';
+import { LoginInterface, RegisterFormData } from '@/base/port/LoginInterface';
 import { UserApi } from '@/base/apis/userApi/UserApi';
 import { AppError } from '@/base/cases/AppError';
-import { LOCAL_NO_USER_TOKEN } from '@config/Identifier.Error';
-import { SliceStore } from '@qlover/slice-store-react';
+import { LOCAL_NO_USER_TOKEN } from '@config/Identifier/Error';
+import { StoreInterface, StoreStateInterface } from '../port/StoreInterface';
 
-class UserControllerState {
+class UserServiceState implements StoreStateInterface {
   success: boolean = false;
   userInfo: UserApiGetUserInfoTransaction['response']['data'] = {
     name: '',
@@ -23,22 +23,22 @@ class UserControllerState {
 }
 
 @injectable()
-export class UserController
-  extends SliceStore<UserControllerState>
+export class UserService
+  extends StoreInterface<UserServiceState>
   implements ExecutorPlugin, LoginInterface
 {
-  readonly pluginName = 'UserController';
+  readonly pluginName = 'UserService';
 
   constructor(
     @inject(UserApi) private userApi: UserApi,
-    @inject(RouterController) private routerController: RouterController,
+    @inject(RouteService) private routerController: RouteService,
     @inject(IOCIdentifier.FeApiToken)
     private userToken: StorageTokenInterface<string>
   ) {
-    super(() => new UserControllerState());
+    super(() => new UserServiceState());
   }
 
-  setState(state: Partial<UserControllerState>): void {
+  setState(state: Partial<UserServiceState>): void {
     this.emit({ ...this.state, ...state });
   }
 
@@ -111,4 +111,14 @@ export class UserController
   isAuthenticated(): boolean {
     return this.state.success;
   }
+
+  /**
+   * @override
+   */
+  async register(params: RegisterFormData): Promise<unknown> {
+    return this.login({
+      username: params.username,
+      password: params.password
+    });
+  }
 }

package/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/Error';
 
 export default async function startup({
   root,

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

@@ -17,8 +17,10 @@ import {
 import mockDataJson from '@config/feapi.mock.json';
 import { RequestStatusCatcher } from '@/base/cases/RequestStatusCatcher';
 import themeConfig from '@config/theme.json';
-import { localJsonStorage } from '../globals';
+import { localJsonStorage, logger } from '../globals';
 import { I18nService } from '@/base/services/I18nService';
+import { RouteService } from '@/base/services/RouteService';
+import { base as baseRoutes } from '@config/app.router.json';
 
 export class RegisterCommon implements InversifyRegisterInterface {
   register(
@@ -64,6 +66,14 @@ export class RegisterCommon implements InversifyRegisterInterface {
       })
     );
 
+    container.bind(
+      RouteService,
+      new RouteService({
+        config: baseRoutes,
+        logger
+      })
+    );
+
     container.bind(I18nService, new I18nService(options.pathname));
   }
 }

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

@@ -1,24 +1,15 @@
-import { localJsonStorage, logger } from '../globals';
-import { RouterController } from '@/uikit/controllers/RouterController';
+import { localJsonStorage } from '../globals';
 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 { UserService } from '@/base/services/UserService';
 import { InversifyRegisterInterface } from '../IOC';
 import { InversifyContainer } from '../IOC';
-
 export class RegisterControllers implements InversifyRegisterInterface {
   register(container: InversifyContainer): void {
-    const routerController = new RouterController({
-      config: baseRoutes,
-      logger
-    });
-
     const jsonStorageController = new JSONStorageController(localJsonStorage);
 
-    container.bind(RouterController, routerController);
     container.bind(JSONStorageController, jsonStorageController);
 
-    container.get(ProcesserService).use(container.get(UserController));
+    container.get(ProcesserService).use(container.get(UserService));
   }
 }

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

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

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

@@ -3,9 +3,11 @@ 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 { useSliceStore } from '@qlover/slice-store-react';
+import { RouteService } from '@/base/services/RouteService';
+import { UserService } from '@/base/services/UserService';
+import { useStore } from '@/uikit/hooks/useStore';
+import * as i18nKeys from '@config/Identifier/I18n';
+import LocaleLink from '@/uikit/components/LocaleLink';
 
 interface LoginFormData {
   email: string;
@@ -14,19 +16,19 @@ interface LoginFormData {
 
 export default function Login() {
   const { t } = useBaseRoutePage();
-  const userController = IOC(UserController);
+  const userService = IOC(UserService);
   const AppConfig = IOC('AppConfig');
-  useSliceStore(userController);
+  useStore(userService);
   const [loading, setLoading] = useState(false);
 
   const handleLogin = async (values: LoginFormData) => {
     try {
       setLoading(true);
-      await userController.login({
+      await userService.login({
         username: values.email,
         password: values.password
       });
-      IOC(RouterController).replaceToHome();
+      IOC(RouteService).replaceToHome();
     } catch (error) {
       console.error(error);
     } finally {
@@ -45,19 +47,21 @@ export default function Login() {
           </span>
         </div>
         <h1 className="text-4xl font-bold text-text mb-4">
-          Welcome back to the future of learning
+          {t(i18nKeys.LOGIN_WELCOME)}
         </h1>
         <p className="text-text-secondary text-lg mb-8">
-          Unlock personalized AI-powered learning experiences designed to
-          accelerate your knowledge journey.
+          {t(i18nKeys.LOGIN_SUBTITLE)}
         </p>
         <div className="space-y-4">
+          <FeatureItem icon="🎯" text={t(i18nKeys.LOGIN_FEATURE_AI_PATHS)} />
           <FeatureItem
             icon="🎯"
-            text="AI-powered personalized learning paths"
+            text={t(i18nKeys.LOGIN_FEATURE_SMART_RECOMMENDATIONS)}
+          />
+          <FeatureItem
+            icon="📊"
+            text={t(i18nKeys.LOGIN_FEATURE_PROGRESS_TRACKING)}
           />
-          <FeatureItem icon="🎯" text="Smart content recommendations" />
-          <FeatureItem icon="📊" text="Real-time progress tracking" />
         </div>
       </div>
 
@@ -65,10 +69,10 @@ export default function Login() {
       <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')}
+            {t(i18nKeys.LOGIN_TITLE)}
           </h2>
           <p className="text-text-secondary mb-8">
-            Enter your credentials to access your dashboard
+            {t(i18nKeys.LOGIN_SUBTITLE)}
           </p>
 
           <Form
@@ -83,11 +87,14 @@ export default function Login() {
           >
             <Form.Item
               name="email"
-              rules={[{ required: true, message: 'Please input your email!' }]}
+              rules={[
+                { required: true, message: t(i18nKeys.LOGIN_EMAIL_REQUIRED) }
+              ]}
             >
               <Input
                 prefix={<UserOutlined className="text-text-tertiary" />}
-                placeholder={t('email')}
+                placeholder={t(i18nKeys.LOGIN_EMAIL)}
+                title={t(i18nKeys.LOGIN_EMAIL_TITLE)}
                 className="h-12 text-base bg-secondary border-border"
               />
             </Form.Item>
@@ -95,19 +102,24 @@ export default function Login() {
             <Form.Item
               name="password"
               rules={[
-                { required: true, message: 'Please input your password!' }
+                { required: true, message: t(i18nKeys.LOGIN_PASSWORD_REQUIRED) }
               ]}
             >
               <Input.Password
                 prefix={<LockOutlined />}
-                placeholder={t('password')}
+                placeholder={t(i18nKeys.LOGIN_PASSWORD)}
+                title={t(i18nKeys.LOGIN_PASSWORD_TITLE)}
                 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
+                href="#"
+                className="text-brand hover:text-brand-hover"
+                title={t(i18nKeys.LOGIN_FORGOT_PASSWORD_TITLE)}
+              >
+                {t(i18nKeys.LOGIN_FORGOT_PASSWORD)}
               </a>
             </div>
 
@@ -116,27 +128,36 @@ export default function Login() {
                 type="primary"
                 htmlType="submit"
                 loading={loading}
+                title={t(i18nKeys.LOGIN_BUTTON_TITLE)}
                 className="w-full h-12 text-base"
               >
-                {t('Sign In')}
+                {t(i18nKeys.LOGIN_BUTTON)}
               </Button>
             </Form.Item>
 
             <div className="text-center text-text-tertiary my-4">
-              or continue with
+              {t(i18nKeys.LOGIN_CONTINUE_WITH)}
             </div>
 
-            <Button icon={<GoogleOutlined />} className="w-full h-12 text-base">
-              Sign in with Google
+            <Button
+              icon={<GoogleOutlined />}
+              className="w-full h-12 text-base"
+              title={t(i18nKeys.LOGIN_WITH_GOOGLE_TITLE)}
+            >
+              {t(i18nKeys.LOGIN_WITH_GOOGLE)}
             </Button>
 
             <div className="text-center mt-6">
               <span className="text-text-tertiary">
-                Don't have an account?{' '}
+                {t(i18nKeys.LOGIN_NO_ACCOUNT)}{' '}
               </span>
-              <a href="#" className="text-brand hover:text-brand-hover">
-                Create one here
-              </a>
+              <LocaleLink
+                href="/register"
+                className="text-brand hover:text-brand-hover"
+                title={t(i18nKeys.LOGIN_CREATE_ACCOUNT_TITLE)}
+              >
+                {t(i18nKeys.LOGIN_CREATE_ACCOUNT)}
+              </LocaleLink>
             </div>
           </Form>
         </div>