@qlover/create-app 0.0.1

package/templates/fe-react/src/services/feApi/FeApi.ts

@@ -0,0 +1,51 @@
+import {
+  RequestAdapterFetch,
+  RequestAdapterConfig,
+  RequestScheduler,
+  FetchAbortPlugin,
+  RequestAdapterFetchConfig
+} from '@qlover/fe-utils';
+import {
+  FeApiGetIpInfo,
+  FeApiGetRandomUser,
+  FeApiGetUserInfo,
+  FeApiLogin
+} from './FeApiType';
+
+export class FeApi extends RequestScheduler<RequestAdapterConfig> {
+  private abortPlugin: FetchAbortPlugin;
+  
+  constructor({
+    abortPlugin,
+    config
+  }: {
+    abortPlugin: FetchAbortPlugin;
+    config?: Partial<RequestAdapterFetchConfig>;
+  }) {
+    super(new RequestAdapterFetch(config));
+    this.abortPlugin = abortPlugin;
+  }
+
+  stop(config: RequestAdapterConfig): void {
+    this.abortPlugin.abort(config);
+  }
+
+  async getIpInfo(): Promise<FeApiGetIpInfo['response']> {
+    return this.get('http://ip-api.com/json/');
+  }
+
+  async getRandomUser(): Promise<FeApiGetRandomUser['response']> {
+    return this.get('https://randomuser.me/api/');
+  }
+
+  async getUserInfo(): Promise<FeApiGetUserInfo['response']> {
+    return this.get('/api/userinfo');
+  }
+
+  async login(params: FeApiLogin['request']): Promise<FeApiLogin['response']> {
+    return this.post('/api/login', {
+      // FIXME: RequestAdapterResponse response type error
+      data: params as unknown as FeApiLogin['response']['data']
+    });
+  }
+}

package/templates/fe-react/src/services/feApi/FeApiMockPlugin.ts

@@ -0,0 +1,42 @@
+import {
+  ExecutorContext,
+  ExecutorPlugin,
+  RequestAdapterFetchConfig,
+  RequestAdapterResponse
+} from '@qlover/fe-utils';
+import { sleep } from '@/utils/thread';
+
+export class FeApiMockPlugin implements ExecutorPlugin {
+  readonly pluginName = 'FeApiMockPlugin';
+
+  constructor(private readonly mockDataJson: typeof import('@config/feapi.mock.json')) {}  
+
+  async onExec({
+    parameters
+  }: ExecutorContext<RequestAdapterFetchConfig>): Promise<RequestAdapterResponse> {
+    const { method = 'GET', url = '', headers } = parameters;
+    const key = `${method.toUpperCase()} ${url}`;
+    const mockData = url
+      ? this.mockDataJson[key as keyof typeof this.mockDataJson] ||
+        this.mockDataJson._default
+      : this.mockDataJson._default;
+
+    const response = new Response(JSON.stringify(mockData), {
+      status: 200,
+      statusText: 'OK'
+    });
+
+    console.log('jj [mock]', key, mockData, headers);
+
+    await sleep(1000);
+
+    return {
+      status: response.status,
+      statusText: response.statusText,
+      headers: Object.fromEntries(response.headers.entries()),
+      data: mockData,
+      config: parameters,
+      response
+    };
+  }
+}

package/templates/fe-react/src/services/feApi/FeApiType.ts

@@ -0,0 +1,55 @@
+import { RequestAdapterResponse } from '@qlover/fe-utils';
+
+export type FeApiType<Request, Response> = {
+  request: Request;
+  response: RequestAdapterResponse<Request, Response>;
+};
+export type FeApiGetIpInfo = FeApiType<
+  undefined,
+  {
+    status: string;
+    country: string;
+    countryCode: string;
+    region: string;
+    regionName: string;
+    city: string;
+    zip: string;
+    lat: number;
+    lon: number;
+    timezone: string;
+    isp: string;
+    org: string;
+    as: string;
+    query: string;
+  }
+>;
+
+export type FeApiGetRandomUser = FeApiType<
+  undefined,
+  {
+    results: unknown[];
+    info: {
+      seed: string;
+      results: number;
+      page: number;
+      version: string;
+    };
+  }
+>;
+
+
+export type FeApiGetUserInfo = FeApiType<
+  string,
+  {
+    name: string;
+    email: string;
+    picture: string;
+  }
+>;
+
+export type FeApiLogin = FeApiType<
+  { username: string; password: string },
+  {
+    token: string;
+  }
+>;

package/templates/fe-react/src/services/feApi/index.ts

@@ -0,0 +1,2 @@
+export * from './FeApiMockPlugin';
+export * from './FeApi';

package/templates/fe-react/src/services/i18n/index.ts

@@ -0,0 +1,50 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import HttpApi from 'i18next-http-backend';
+import merge from 'lodash/merge';
+import { i18nConfig, I18nServiceLocale } from '@config/i18n';
+
+// custom language detector
+const pathLanguageDetector = {
+  name: 'pathLanguageDetector',
+  lookup() {
+    const path = window.location.pathname.split('/');
+    const language = path[1];
+    return I18nService.isValidLanguage(language)
+      ? language
+      : i18nConfig.fallbackLng;
+  },
+  cacheUserLanguage() {
+    // no cache, because we get language from URL
+  }
+};
+
+export class I18nService {
+  static init(): void {
+    i18n
+      .use(HttpApi)
+      .use(LanguageDetector)
+      .use(initReactI18next)
+      .init(
+        merge({}, i18nConfig, {
+          detection: {
+            order: ['pathLanguageDetector', 'navigator'], // use custom detector
+            caches: []
+          }
+        })
+      );
+
+    // add custom detector
+    i18n.services.languageDetector.addDetector(pathLanguageDetector);
+  }
+
+  /**
+   * check if the language is supported
+   * @param language - language to check
+   * @returns true if the language is supported, false otherwise
+   */
+  static isValidLanguage(language: string): language is I18nServiceLocale {
+    return i18nConfig.supportedLngs.includes(language as I18nServiceLocale);
+  }
+}

package/templates/fe-react/src/services/pageProcesser/PageProcesser.ts

@@ -0,0 +1,29 @@
+import { AsyncExecutor, ExecutorPlugin, Logger } from '@qlover/fe-utils';
+
+export interface PageProcesserOptions {
+  logger: Logger;
+}
+
+export class PageProcesser {
+  private executor: AsyncExecutor;
+  constructor(private options: PageProcesserOptions) {
+    this.executor = new AsyncExecutor();
+  }
+
+  usePlugin(plugin: ExecutorPlugin): this {
+    this.executor.use(plugin);
+    return this;
+  }
+
+  handler(): Promise<{ success: boolean }> {
+    return Promise.resolve({
+      success: true,
+    });
+  }
+
+  init(): Promise<unknown> {
+    return this.executor.exec(this.handler).catch(() => {
+      this.options.logger.error('PageProcesser init failed');
+    });
+  }
+}

package/templates/fe-react/src/services/pageProcesser/index.ts

@@ -0,0 +1 @@
+export * from './PageProcesser';

package/templates/fe-react/src/styles/css/index.css

@@ -0,0 +1,2 @@
+@import './tailwind.css';
+@import './page.css';

package/templates/fe-react/src/styles/css/page.css

@@ -0,0 +1,3 @@
+html {
+  @apply bg-white;
+}

package/templates/fe-react/src/styles/css/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/templates/fe-react/src/types/Page.ts

@@ -0,0 +1,49 @@
+import { LazyExoticComponent, PropsWithChildren } from 'react';
+import { RouteObject } from 'react-router-dom';
+
+import { TFunction } from 'i18next';
+import { UseTranslationResponse } from 'react-i18next';
+
+export interface BasePageProvider {
+  meta: RouteMeta;
+  i18n: UseTranslationResponse<string, string>;
+  t: TFunction<string, string>;
+}
+
+export type RouteCategory = 'main' | 'auth' | 'common';
+
+export interface RouteMeta {
+  category?: RouteCategory;
+  /**
+   * from app.router.json
+   */
+  title?: string;
+  icon?: string;
+  /**
+   * from app.router.json
+   *
+   * @default 'common'
+   */
+  localNamespace?: string;
+}
+
+export type RouteType = RouteObject & {
+  meta?: RouteMeta;
+};
+
+export type RouteConfig = {
+  routes: RouteType[];
+};
+
+export type PagesMaps = Record<
+  string,
+  | (() => LazyExoticComponent<React.ComponentType<unknown>>)
+  | (() => React.ComponentType<unknown>)
+>;
+
+export type LoadProps = {
+  pagesMaps: PagesMaps;
+  componentPath: string;
+  route: RouteType;
+  Provider?: React.ComponentType<PropsWithChildren<RouteMeta>>;
+};

package/templates/fe-react/src/types/UIDependenciesInterface.ts

@@ -0,0 +1,31 @@
+export interface UIDependenciesInterface<Dep = unknown> {
+  /**
+   * Represents the dependencies required by the UI component.
+   *
+   * @type {Dep}
+   * @description This allows for partial updates to the dependencies if `Dep` is an object, enabling flexibility in dependency management.
+   *
+   * @example
+   * const uiDependencies: UIDependenciesInterface<{ api: string, token: string }> = {
+   *   dependencies: { api: 'https://api.example.com' }
+   * };
+   *
+   * const simpleDependencies: UIDependenciesInterface<string> = {
+   *   dependencies: 'simple-dependency'
+   * };
+   */
+  dependencies?: Dep;
+
+  /**
+   * Sets the dependencies for the UI component.
+   *
+   * @param {Dep} dependencies - The dependencies to be set, allowing partial updates if `Dep` is an object.
+   * @description This method allows updating the dependencies, supporting partial updates if `Dep` is an object.
+   *
+   * @example
+   * uiDependencies.setDependencies({ token: 'new-token' });
+   *
+   * simpleDependencies.setDependencies('new-simple-dependency');
+   */
+  setDependencies(dependencies: Dep): void;
+}

package/templates/fe-react/src/types/global.d.ts

@@ -0,0 +1,7 @@
+import * as feGlobals from '@/containers/globals';
+
+declare global {
+  interface Window {
+    feGlobals: Readonly<typeof feGlobals>;
+  }
+}

package/templates/fe-react/src/utils/RequestLogger.ts

@@ -0,0 +1,34 @@
+import {
+  ExecutorPlugin,
+  ExecutorContext,
+  RequestAdapterFetchConfig,
+  Logger
+} from '@qlover/fe-utils';
+
+export class RequestLogger
+  implements ExecutorPlugin<RequestAdapterFetchConfig>
+{
+  readonly pluginName = 'RequestLogger';
+
+  constructor(public logger: Logger) {}
+
+  async onSuccess({
+    parameters,
+    returnValue
+  }: ExecutorContext<RequestAdapterFetchConfig>): Promise<void> {
+    this.logger.info(
+      `Request [${new Date().toLocaleString()}] ${parameters.method} ${parameters.url} [success] `,
+      returnValue
+    );
+  }
+
+  onError({
+    parameters,
+    error
+  }: ExecutorContext<RequestAdapterFetchConfig>): void {
+    this.logger.error(
+      `Request [${new Date().toLocaleString()}] ${parameters.method} ${parameters.url} [error] `,
+      error
+    );
+  }
+}

package/templates/fe-react/src/utils/datetime.ts

@@ -0,0 +1,25 @@
+/**
+ * Adjusts the expiration time based on the provided `expiresIn` value.
+ * 
+ * @param {number} baseTime - The base time in milliseconds to adjust.
+ * @returns {number} - The adjusted time in milliseconds.
+ * 
+ * @example
+ * const adjustedTime = userController.adjustExpirationTime(Date.now());
+ */
+export function adjustExpirationTime(baseTime: number, expiresIn: number | 'day' | 'week' | 'month' | 'year'): number {
+  const dayInMs = 24 * 60 * 60 * 1000;
+
+  switch (expiresIn) {
+    case 'day':
+      return baseTime + dayInMs;
+    case 'week':
+      return baseTime + 7 * dayInMs;
+    case 'month':
+      return baseTime + 30 * dayInMs; // Approximation
+    case 'year':
+      return baseTime + 365 * dayInMs; // Approximation
+    default:
+      return baseTime + (typeof expiresIn === 'number' ? expiresIn : 30 * dayInMs);
+  }
+}

package/templates/fe-react/src/utils/thread.ts

@@ -0,0 +1,3 @@
+export function sleep(ms: number = 100): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}

package/templates/fe-react/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/templates/fe-react/tailwind.config.js

@@ -0,0 +1,18 @@
+import root10px from './lib/tw-root10px';
+import themeCreate from './lib/fe-react-theme/tw-generator';
+import themeConfig from './config/theme.json';
+
+const theme = themeCreate(themeConfig.override);
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: 'class',
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    extend: {
+      ...root10px.themes,
+      colors: theme.colors
+    }
+  },
+  plugins: [root10px.plugin, theme.plugin]
+};

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

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@lib/*": ["./lib/*"],
+      "@config/*": ["./config/*"],
+      "packages/*": ["../../packages/*"]
+    }
+  },
+  "include": ["src", "config", "lib"]
+}

package/templates/fe-react/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

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

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}

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

@@ -0,0 +1,32 @@
+import { defineConfig } from 'vite';
+import alias from '@rollup/plugin-alias';
+// import react from '@vitejs/plugin-react-swc';
+import react from '@vitejs/plugin-react';
+import path from 'node:path';
+import tsappconfig from './tsconfig.app.json';
+import { searchEnv } from '@qlover/fe-scripts';
+
+searchEnv({});
+
+const tsAppPaths = tsappconfig.compilerOptions.paths || {};
+
+const entries = Object.entries(tsAppPaths).map(([key, value]) => {
+  return {
+    find: key.replace('/*', ''),
+    replacement: path.resolve(__dirname, value[0].replace('/*', ''))
+  };
+});
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    react(),
+    alias({
+      entries
+    })
+  ],
+  publicDir: 'public',
+  server: {
+    port: Number(process.env.VITE_SERVER_PORT || 3100)
+  }
+});

package/templates/pack-app/.editorconfig

@@ -0,0 +1,23 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+[*]
+
+# We recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+# Change these settings to your own preference
+indent_style = space
+indent_size = 2
+
+[*.{ts,tsx,js,jsx,json,css,scss,yml,yaml,html,vue,md}]
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false

package/templates/pack-app/.env

@@ -0,0 +1,5 @@
+NODE_ENV=production
+NPM_TOKEN=
+GITHUB_TOKEN=
+FE_RELEASE_BRANCH=master
+FE_RELEASE=false

package/templates/pack-app/.env.template

@@ -0,0 +1,6 @@
+NODE_ENV=production
+NPM_TOKEN=
+GITHUB_TOKEN=
+FE_RELEASE_BRANCH=master
+FE_RELEASE=false
+FE_RELEASE_ENV=production

package/templates/pack-app/.gitattributes

@@ -0,0 +1,2 @@
+* text=auto
+* eol=lf

package/templates/pack-app/.github/workflows/general-check.yml

@@ -0,0 +1,50 @@
+name: General check
+
+on:
+  pull_request:
+    branches:
+      - master
+    types: [opened, synchronize, reopened]
+
+jobs:
+  check-code:
+    if: |
+      !contains(github.event.pull_request.title, 'chore(tag):') && 
+      !contains(join(github.event.pull_request.commits.*.message, ' '), 'chore(tag):')
+    runs-on: ubuntu-latest
+
+    steps:
+      # - name: Print GitHub Event Information
+      #   run: echo "${{ toJson(github.event) }}" > event.json
+      - name: Checkout repository
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Install Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '18.19.0'
+
+      - name: Install dependencies
+        run: |
+          npm install -g yarn
+          yarn
+
+      - name: Lint
+        run: yarn lint
+
+      - name: Test
+        run: yarn test
+
+      - name: Build dist
+        run: yarn build
+
+      # check packages
+      # - name: Check packages
+      #   run: |
+      #     git fetch origin ${{ github.base_ref }}
+      #     npm run check-packages -- -r ${{ github.repository }} -b ${{ github.base_ref }} -n ${{ github.event.pull_request.number }}
+      #   env:
+      #     GITHUB_TOKEN: ${{ secrets.PAT_TOKEN }}
+      #     PAT_TOKEN: ${{ secrets.PAT_TOKEN }}