@qlover/create-app 0.4.3 → 0.4.5

package/CHANGELOG.md

@@ -1,5 +1,54 @@
 # @qlover/create-app
 
+## 0.4.5
+
+### Patch Changes
+
+#### ✨ Features
+
+- **create-app:** implement logout functionality and enhance localization ([c49f956](https://github.com/qlover/fe-base/commit/c49f956aecbc11a6b96b28309d112f7219a7dcca)) ([#438](https://github.com/qlover/fe-base/pull/438))
+
+  - Added a new LogoutButton component to handle user logout with a confirmation dialog.
+  - Introduced localization keys for logout dialog titles and content in both English and Chinese.
+  - Updated BaseHeader to conditionally display the logout button based on the layout context.
+  - Refactored AppConfig to utilize the Vite environment mode directly.
+  - Adjusted LoginInterface to accept a more generic parameter type for login.
+
+  This update improves user experience by providing a clear logout process and enhances localization support for logout-related messages.
+
+## 0.4.4
+
+### Patch Changes
+
+#### ✨ Features
+
+- **create-app:** add error identifiers and localization support for new components ([0ec3780](https://github.com/qlover/fe-base/commit/0ec3780a7972acd855e1b4d2ae866575534dc094)) ([#434](https://github.com/qlover/fe-base/pull/434))
+
+  - Introduced new error identifiers in Error.ts for handling various application states, including IOC not implemented and token absence.
+  - Added extensive localization keys in I18n.ts for various pages and components, enhancing user experience across different languages.
+  - Improved error handling and messaging consistency throughout the application.
+
+  This update enhances the application's localization capabilities and error management, providing clearer feedback to users.
+
+- **create-app:** enhance TypeScript configuration and linting ([f049395](https://github.com/qlover/fe-base/commit/f049395c90ee2c13a33d7358098a87251ef40913)) ([#434](https://github.com/qlover/fe-base/pull/434))
+
+  - Updated the TypeScript configuration by introducing a new `tsconfig.app.json` for better modularity and organization.
+  - Modified `tsconfig.json` to reference the new app configuration and streamline project structure.
+  - Enhanced `tsconfig.node.json` with improved compiler options for better compatibility and performance.
+  - Updated linting script in `package.json` to include TypeScript checks alongside ESLint, ensuring code quality and type safety.
+  - Refactored imports in `RequestLogger.ts` and `ThemeSwitcher.tsx` to use type imports for better clarity and performance.
+
+  This update improves the TypeScript setup and linting process, enhancing code quality and maintainability across the application.
+
+#### ♻️ Refactors
+
+- **create-app:** remove unused error identifiers and localization keys ([3b19f19](https://github.com/qlover/fe-base/commit/3b19f193b839c1e97fa727c1847a4bbd5ff84211)) ([#434](https://github.com/qlover/fe-base/pull/434))
+
+  - Deleted Error.ts and I18n.ts files as they contained unused error identifiers and localization keys.
+  - This cleanup improves the overall codebase by removing unnecessary files, enhancing maintainability and reducing clutter.
+
+  This update streamlines the application by eliminating redundant localization and error handling resources.
+
 ## 0.4.3
 
 ### Patch Changes

package/dist/index.js

@@ -2378,7 +2378,7 @@ var Generator = class {
 
 // package.json
 var package_default = {
-  version: "0.4.3",
+  version: "0.4.5",
   description: "Create a new app with a single command"};
 function programArgs() {
   const program = new Command();

package/package.json

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

package/templates/react-app/config/Identifier/Auth.ts

@@ -0,0 +1,13 @@
+/**
+ * @description logout dialog title
+ * @localZh 登出
+ * @localEn Logout
+ */
+export const AUTH_LOGOUT_DIALOG_TITLE = 'Logout';
+
+/**
+ * @description logout dialog content
+ * @localZh 确定要登出吗？
+ * @localEn Are you sure you want to logout?
+ */
+export const AUTH_LOGOUT_DIALOG_CONTENT = 'Are you sure you want to logout?';

package/templates/react-app/package.json

@@ -47,7 +47,7 @@
     "dev:staging": "vite --mode staging",
     "dev:prod": "vite --mode production",
     "build": "vite build",
-    "lint": "eslint ./src --fix",
+    "lint": "tsc -b --noEmit && eslint ./src --fix",
     "prettier": "prettier --write ./src",
     "preview": "vite preview",
     "test": "vitest run"

package/templates/react-app/public/locales/en/common.json

@@ -194,5 +194,7 @@
   "page.500.title": "500 - Server Error",
   "page.login.title": "Login",
   "page.register.title": "Register",
-  "response.no.token": "Response not token value"
+  "response.no.token": "Response not token value",
+  "Logout": "Logout",
+  "Are you sure you want to logout?": "Are you sure you want to logout?"
 }

package/templates/react-app/public/locales/zh/common.json

@@ -194,5 +194,7 @@
   "page.500.title": "500 - 服务器错误",
   "page.login.title": "登录",
   "page.register.title": "注册",
-  "response.no.token": "响应内容没有 token 值"
+  "response.no.token": "响应内容没有 token 值",
+  "Logout": "登出",
+  "Are you sure you want to logout?": "确定要登出吗？"
 }

package/templates/react-app/src/base/cases/AppConfig.ts

@@ -44,8 +44,10 @@ export class AppConfig implements EnvConfigInterface {
    * Current environment mode for Vite
    * @description Represents the running environment (development, production, etc.)
    * Automatically set based on the current .env file being used
+   *
+   * from vite.config `mode`
    */
-  readonly env: string = '';
+  readonly env: string = import.meta.env.MODE;
 
   /**
    * Storage key for user authentication token

package/templates/react-app/src/base/cases/RequestLogger.ts

@@ -10,7 +10,8 @@ import {
   type ApiCatchPluginResponse
 } from '@qlover/corekit-bridge';
 import { injectable, inject } from 'inversify';
-import { LoggerInterface } from '@qlover/logger';
+import type { LoggerInterface } from '@qlover/logger';
+
 @injectable()
 export class RequestLogger
   implements ExecutorPlugin<RequestAdapterFetchConfig>

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

@@ -6,7 +6,7 @@ export interface RegisterFormData {
   agreeToTerms: boolean;
 }
 export interface LoginInterface {
-  login(params: { username: string; password: string }): Promise<unknown>;
+  login(params: unknown): Promise<unknown>;
   logout(): void;
   register(params: RegisterFormData): Promise<unknown>;
 }

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

@@ -16,7 +16,8 @@ export const dialogHandler = new DialogHandler();
  */
 export const logger = new Logger({
   handlers: new ConsoleHandler(new ColorFormatter(loggerStyles)),
-  silent: isProduction
+  silent: isProduction,
+  level: 'debug'
 });
 
 /**

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

@@ -15,7 +15,7 @@ export default function Layout() {
 
   return (
     <>
-      <BaseHeader />
+      <BaseHeader showLogoutButton={false} />
       <div className="flex-1">
         <Outlet />
       </div>

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

@@ -9,7 +9,7 @@ export default function Layout() {
         data-testid="basic-layout"
         className="text-base min-h-screen bg-primary"
       >
-        <BaseHeader />
+        <BaseHeader showLogoutButton />
 
         <div className="text-text bg-primary">
           <Outlet />

package/templates/react-app/src/pages/base/components/BaseHeader.tsx

@@ -3,8 +3,13 @@ import LocaleLink from '@/uikit/components/LocaleLink';
 import LanguageSwitcher from '@/uikit/components/LanguageSwitcher';
 import { PublicAssetsPath } from '@/base/cases/PublicAssetsPath';
 import { IOC } from '@/core/IOC';
+import LogoutButton from './LogoutButton';
 
-export default function BaseHeader() {
+export default function BaseHeader({
+  showLogoutButton
+}: {
+  showLogoutButton?: boolean;
+}) {
   return (
     <header className="h-14 bg-secondary border-b border-border sticky top-0 z-50">
       <div className="flex items-center justify-between h-full px-4 mx-auto max-w-7xl">
@@ -26,6 +31,8 @@ export default function BaseHeader() {
         <div className="flex items-center gap-4">
           <LanguageSwitcher />
           <ThemeSwitcher />
+
+          {showLogoutButton && <LogoutButton />}
         </div>
       </div>
     </header>

package/templates/react-app/src/pages/base/components/LogoutButton.tsx

@@ -0,0 +1,32 @@
+import { UserService } from '@/base/services/UserService';
+import { IOC } from '@/core/IOC';
+import {
+  AUTH_LOGOUT_DIALOG_CONTENT,
+  AUTH_LOGOUT_DIALOG_TITLE
+} from '@config/Identifier/Auth';
+import { Button } from 'antd';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export default function LogoutButton() {
+  const { t } = useTranslation();
+
+  const tTitle = t(AUTH_LOGOUT_DIALOG_TITLE);
+  const tContent = t(AUTH_LOGOUT_DIALOG_CONTENT);
+
+  const onClick = useCallback(() => {
+    IOC('DialogHandler').confirm({
+      title: tTitle,
+      content: tContent,
+      onOk: () => {
+        IOC(UserService).logout();
+      }
+    });
+  }, [tTitle, tContent]);
+
+  return (
+    <Button danger onClick={onClick}>
+      {tTitle}
+    </Button>
+  );
+}

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

@@ -1,5 +1,5 @@
 import { IOC } from '@/core/IOC';
-import { ThemeService } from '@qlover/corekit-bridge';
+import { ThemeService, ThemeServiceState } from '@qlover/corekit-bridge';
 import { useStore } from '@/uikit/hooks/useStore';
 import { useTranslation } from 'react-i18next';
 import { Select } from 'antd';
@@ -12,6 +12,7 @@ import {
 import clsx from 'clsx';
 import { useMemo } from 'react';
 import * as i18nKeys from '@config/Identifier/I18n';
+import { StoreInterface } from '@/base/port/StoreInterface';
 
 const colorMap: Record<
   string,
@@ -36,7 +37,9 @@ const colorMap: Record<
 
 export default function ThemeSwitcher() {
   const themeService = IOC(ThemeService);
-  const { theme } = useStore(themeService);
+  const { theme } = useStore(
+    themeService as unknown as StoreInterface<ThemeServiceState>
+  );
   const themes = themeService.getSupportedThemes();
   const { t } = useTranslation('common');
 

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

@@ -0,0 +1,35 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "baseUrl": ".",
+    "types": ["vite/client"],
+    "paths": {
+      "@/*": ["./src/*"],
+      "@config/*": ["./config/*"],
+      "@lib/*": ["./lib/*"]
+    }
+  },
+  "include": ["src", "config"]
+}

package/templates/react-app/tsconfig.json

@@ -1,30 +1,10 @@
 {
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ],
   "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "esModuleInterop": true,
-    "allowJs": true,
-    "types": ["vite/client"],
-    "paths": {
-      "@/*": ["./src/*"],
-      "@config/*": ["./config/*"],
-      "@lib/*": ["./lib/*"]
-    },
     "experimentalDecorators": true
-  },
-  "include": ["src", "lib/**/*.tsx"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  }
 }

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

@@ -1,14 +1,24 @@
 {
   "compilerOptions": {
-    "composite": true,
-    "skipLibCheck": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
     "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
     "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true,
-    "paths": {
-      "@config/*": ["./config/*"]
-    }
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
   },
-  "include": ["vite.config.ts", "config", "lib"],
-  "exclude": ["lib/**/*.tsx"]
+  "include": ["vite.config.ts"]
 }

package/templates/react-app/vite.config.ts

@@ -118,7 +118,6 @@ export default defineConfig({
   server: {
     port: Number(process.env.VITE_SERVER_PORT || 3200)
   },
-  mode: process.env.NODE_ENV,
   test: {
     environment: 'jsdom',
     globals: true,