@qlover/create-app 0.0.1

package/templates/fe-react/lib/fe-react-controller/FeController.ts

@@ -0,0 +1,15 @@
+import { SliceStore } from '@qlover/slice-store';
+
+export class FeController<T> extends SliceStore<T> {
+  constructor(initialState: T) {
+    super(() => initialState);
+  }
+
+  getState(): T {
+    return this.state;
+  }
+
+  setState(state: Partial<T>): void {
+    this.emit({ ...this.state, ...state });
+  }
+}

package/templates/fe-react/lib/fe-react-controller/index.ts

@@ -0,0 +1,2 @@
+export * from './FeController';
+export * from './useController';

package/templates/fe-react/lib/fe-react-controller/useController.ts

@@ -0,0 +1,71 @@
+import { useSliceStore } from '@qlover/slice-store-react';
+import { FeController } from './FeController';
+import { useEffect, useRef, useState } from 'react';
+
+/**
+ * Hook for managing controller instances and their state.
+ * Change controller to UIController
+ * @param createController Factory function that creates a controller instance or controller instance
+ * @returns Controller instance with precise type inference
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function useController<C extends FeController<any>>(
+  createController: (() => C) | C
+): C {
+  const controllerRef = useRef<C | null>(null);
+  const [, forceUpdate] = useState(0);
+
+  if (!controllerRef.current) {
+    controllerRef.current =
+      typeof createController === 'function'
+        ? createController()
+        : createController;
+  }
+
+  useEffect(() => {
+    const controller = controllerRef.current!;
+
+    const unsubscribe = controller.observe(() => {
+      forceUpdate((prev) => prev + 1);
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+
+  return controllerRef.current;
+}
+
+/**
+ * Create a Controller instance and cache it to avoid repeated creation
+ *
+ * @see https://github.com/alibaba/hooks/blob/master/packages/hooks/src/useCreation/index.ts
+ * @param Controller
+ * @param args
+ * @returns
+ */
+export function useCreateController<
+  T,
+  Ctrl extends FeController<T>,
+  Args extends unknown[]
+>(Controller: new (...args: Args) => Ctrl, ...args: Args): Ctrl {
+  const { current } = useRef({
+    target: undefined as undefined | Ctrl,
+    initialized: false
+  });
+
+  if (!current.initialized) {
+    current.target = new Controller(...args);
+    current.initialized = true;
+  }
+
+  return current.target as Ctrl;
+}
+
+export function useControllerState<T, S = T>(
+  controller: FeController<T>,
+  selector?: (state: T) => S
+): S {
+  return useSliceStore(controller, selector);
+}

package/templates/fe-react/lib/fe-react-theme/ThemeController.ts

@@ -0,0 +1,40 @@
+import { FeController } from '@lib/fe-react-controller';
+import { ThemeControllerProps, ThemeControllerState } from './type';
+import { ThemeStateGetter } from './ThemeStateGetter';
+
+export class ThemeController extends FeController<ThemeControllerState> {
+  constructor(private props: ThemeControllerProps) {
+    super(ThemeStateGetter.create(props));
+
+    this.bindToTheme();
+  }
+
+  getSupportedThemes(): string[] {
+    return this.props.supportedThemes;
+  }
+
+  bindToTheme(): void {
+    const { theme } = this.getState();
+
+    const { domAttribute } = this.props;
+
+    if (domAttribute) {
+      document.documentElement.setAttribute(domAttribute, theme);
+    }
+  }
+
+  changeTheme(theme: string): void {
+    if (theme === ThemeStateGetter.SYSTEM_THEME) {
+      theme = ThemeStateGetter.getSystemTheme();
+    }
+
+    this.setState({ theme });
+
+    const { storage, storageKey } = this.props;
+    if (storage && storageKey) {
+      storage.setItem(storageKey, theme);
+    }
+
+    this.bindToTheme();
+  }
+}

package/templates/fe-react/lib/fe-react-theme/ThemeStateGetter.ts

@@ -0,0 +1,53 @@
+import isString from 'lodash/isString';
+import { ThemeControllerProps, ThemeControllerState } from './type';
+
+export class ThemeStateGetter {
+  static SYSTEM_THEME = 'system';
+
+  static create(props: ThemeControllerProps): ThemeControllerState {
+    const theme = ThemeStateGetter.getDefaultTheme(props);
+
+    return {
+      theme
+    };
+  }
+
+  static getDefaultTheme(props: ThemeControllerProps): string {
+    const { storage, storageKey, defaultTheme } = props;
+
+    let theme;
+
+    // Trying to use local storage
+    if (storage && storageKey) {
+      theme = storage.getItem(storageKey);
+
+      if (isString(theme) && props.supportedThemes.includes(theme)) {
+        return theme;
+      }
+    }
+
+    if (theme === ThemeStateGetter.SYSTEM_THEME) {
+      return ThemeStateGetter.getSystemTheme();
+    }
+
+    // if local storage does not have theme, use system theme
+    if (defaultTheme) {
+      if (defaultTheme === ThemeStateGetter.SYSTEM_THEME) {
+        return ThemeStateGetter.getSystemTheme();
+      }
+
+      return defaultTheme;
+    }
+
+    return ThemeStateGetter.getSystemTheme();
+  }
+
+  static getSystemTheme(): 'dark' | 'light' {
+    // use window.matchMedia to detect prefers-color-scheme media query
+    const isDarkMode =
+      window.matchMedia &&
+      window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+    return isDarkMode ? 'dark' : 'light';
+  }
+}

package/templates/fe-react/lib/fe-react-theme/index.ts

@@ -0,0 +1,3 @@
+export * from './ThemeController';
+export * from './ThemeStateGetter';
+export * from './type';

package/templates/fe-react/lib/fe-react-theme/tw-generator.js

@@ -0,0 +1,239 @@
+import plugin from 'tailwindcss/plugin';
+import template from 'lodash/template';
+import isPlainObject from 'lodash/isPlainObject';
+import isString from 'lodash/isString';
+
+
+class KeyTemplate {
+  constructor(options) {
+    /**
+     * @type {import('./type').ThemeConfig}
+     */
+    this.options = options;
+  }
+
+  /**
+   * Get the colors value
+   *
+   * @example
+   * ```
+   * colors: {
+   *  primary: {
+   *    "500": getColorsValue()
+   *  },
+   *  secondary: getColorsValue()
+   * }
+   * ```
+   *
+   * @param {string} colorKey - The color key
+   * @param {string} value - The color value
+   * @returns {string} - The colors value
+   */
+  getColorsValue({ key, parentKey = '', value }) {
+    const { colorsValueTemplate, ...rest } = this.options;
+
+    let colorKey = key;
+    if (parentKey) {
+      colorKey = this.composeKey(key, parentKey);
+    }
+
+    // if colorsValueTemplate is provided, use it to generate the colors value
+    if (colorsValueTemplate) {
+      const styleKey = this.getStyleKey(colorKey);
+      return template(colorsValueTemplate)({
+        ...rest,
+        styleKey,
+        key,
+        parentKey,
+        value
+      });
+    }
+
+    return value;
+  }
+
+  /**
+   * Get the style theme key
+   *
+   * ```
+   * <style>
+   * [getStyleThemeKey()] {
+   *  primary: #000;
+   * }
+   * </style>
+   * ```
+   *
+   * @param {string} theme - The theme name
+   * @returns {string} - The style theme key
+   */
+  getStyleThemeKey(theme) {
+    const { styleThemeKeyTemplate, target, ...rest } = this.options;
+
+    // if styleThemeKeyTemplate is provided, use it to generate the style theme key
+    if (styleThemeKeyTemplate) {
+      return template(styleThemeKeyTemplate)({ ...rest, theme, target });
+    }
+
+    return `${target}.${theme}`;
+  }
+
+  /**
+   * Get the style key template
+   *
+   * @example
+   *
+   * ```
+   * <style>
+   * [getStyleThemeKey()] {
+   *  [getStyleKeyTemplate()]: #000;
+   * }
+   * </style>
+   * ```
+   *
+   * @param {string} key - The key name
+   * @param {string | undefined} parentKey - The parent key name
+   * @returns {string} - The style key template
+   */
+  getStyleKey(key, parentKey) {
+    const { styleKeyTemplate, ...rest } = this.options;
+
+    // if parentKey is provided, compose the key
+    let colorKey = key;
+    if (parentKey) {
+      colorKey = this.composeKey(key, parentKey);
+    }
+
+    // if styleKeyTemplate is provided, use it to generate the style key
+    if (styleKeyTemplate) {
+      return template(styleKeyTemplate)({ ...rest, colorKey, parentKey });
+    }
+
+    return key;
+  }
+
+  composeKey(key, parentKey) {
+    return parentKey ? `${parentKey}-${key}` : key;
+  }
+}
+
+class Generator {
+  constructor(options) {
+    this.options = options;
+    this.keyTemplate = new KeyTemplate(options);
+  }
+
+  generateBaseStyles() {
+    const { colors } = this.options;
+
+    const baseStyles = {};
+
+    Object.entries(colors).forEach(([theme, themeColors]) => {
+      const styleThemeKey = this.keyTemplate.getStyleThemeKey(theme);
+
+      baseStyles[styleThemeKey] = {};
+
+      Object.entries(themeColors).forEach(([colorKey, value]) => {
+        if (isPlainObject(value)) {
+          Object.entries(value).forEach(([key, colorValue]) => {
+            baseStyles[styleThemeKey][
+              this.keyTemplate.getStyleKey(key, colorKey)
+            ] = colorValue;
+          });
+        }
+        // if value is string, it means it's a color value
+        else if (isString(value)) {
+          baseStyles[styleThemeKey][this.keyTemplate.getStyleKey(colorKey)] =
+            value;
+        }
+      });
+    });
+
+    return this.setDefaultStyleThemeKey(baseStyles);
+  }
+
+  setDefaultStyleThemeKey(baseStyles) {
+    const { defaultTheme, colors } = this.options;
+
+    // set default style theme key
+    let _defaultTheme = defaultTheme;
+    if (
+      // if default theme is not provided, set it to the first theme
+      !defaultTheme ||
+      // if default theme is system, set it to the first theme
+      defaultTheme === 'system' ||
+      // if default theme is not in colors, set it to the first theme
+      !Object.keys(colors).includes(defaultTheme)
+    ) {
+      _defaultTheme = Object.keys(colors)?.[0];
+    }
+
+    const defaultStyleThemeKey =
+      this.keyTemplate.getStyleThemeKey(_defaultTheme);
+
+    const result = {};
+    Object.entries(baseStyles).forEach(([key, value]) => {
+      if (key === defaultStyleThemeKey) {
+        result[':root'] = value;
+      } else {
+        result[key] = value;
+      }
+    });
+
+    return result;
+  }
+
+  generateThemeColors() {
+    const { colors } = this.options;
+
+    const themeResultColors = {};
+
+    Object.entries(colors).forEach(([, themeColors]) => {
+      Object.entries(themeColors).forEach(([colorKey, value]) => {
+        themeResultColors[colorKey] = {};
+
+        if (isPlainObject(value)) {
+          Object.entries(value).forEach(([key, colorValue]) => {
+            const numberKey = Number(key);
+            themeResultColors[colorKey][numberKey] =
+              this.keyTemplate.getColorsValue({
+                key,
+                parentKey: colorKey,
+                value: colorValue
+              });
+          });
+        }
+        // if value is string, it means it's a color value
+        else if (isString(value)) {
+          themeResultColors[colorKey] = this.keyTemplate.getColorsValue({
+            key: colorKey,
+            value
+          });
+        }
+      });
+    });
+
+    return themeResultColors;
+  }
+}
+
+function create(options) {
+  const generator = new Generator(options);
+
+  const baseStyles = generator.generateBaseStyles();
+  const themeColors = generator.generateThemeColors();
+
+  const result = {
+    baseStyles,
+    colors: themeColors
+  };
+
+  if (Object.keys(baseStyles).length > 0) {
+    result.plugin = plugin(({ addBase }) => {
+      addBase(baseStyles);
+    });
+  }
+
+  return result;
+}
+
+export default create;

package/templates/fe-react/lib/fe-react-theme/type.ts

@@ -0,0 +1,21 @@
+import { JSONStorage } from '@qlover/fe-utils';
+
+export type ThemeControllerState = {
+  theme: string;
+};
+
+export type ThemeConfig = {
+  domAttribute: string;
+  defaultTheme: string;
+  target: string;
+  supportedThemes: string[];
+  storageKey: string;
+  styleThemeKeyTemplate: string;
+  styleKeyTemplate: string;
+  colorsValueTemplate: string;
+  colors: Record<string, unknown>;
+};
+
+export interface ThemeControllerProps extends ThemeConfig {
+  storage?: JSONStorage;
+}

package/templates/fe-react/lib/openAiApi/OpenAIAuthPlugin.ts

@@ -0,0 +1,29 @@
+import {
+  ExecutorContext,
+  ExecutorPlugin,
+  RequestAdapterFetchConfig,
+  RequestAdapterResponse
+} from '@qlover/fe-utils';
+import { StreamProcessor } from './StreamProcessor';
+
+export class OpenAIAuthPlugin
+  implements ExecutorPlugin<RequestAdapterFetchConfig>
+{
+  readonly pluginName = 'OpenAIAuthPlugin';
+
+  async onSuccess(
+    context: ExecutorContext<RequestAdapterFetchConfig>
+  ): Promise<void> {
+    const adapterResponse = context.returnValue as RequestAdapterResponse<
+      Request,
+      Response
+    >;
+
+    if (adapterResponse.data.body instanceof ReadableStream) {
+      const processer = new StreamProcessor();
+      const data = await processer.processStream(adapterResponse.data.body);
+      // overried response data
+      context.returnValue = data;
+    }
+  }
+}

package/templates/fe-react/lib/openAiApi/OpenAIClient.ts

@@ -0,0 +1,51 @@
+import {
+  RequestScheduler,
+  RequestAdapterConfig,
+  RequestAdapterFetch,
+  RequestAdapterFetchConfig,
+  FetchURLPlugin,
+  RequestAdapterResponse
+} from '@qlover/fe-utils';
+import { StreamResultType } from './StreamProcessor';
+import { OpenAIAuthPlugin } from './OpenAIAuthPlugin';
+import {
+  RequestCommonPlugin,
+  RequestCommonPluginConfig
+} from '@lib/request-common-plugin';
+export interface ApiMessage {
+  content: string;
+  role: 'user' | 'system' | 'assistant';
+}
+
+export interface OpenAIChatParmas {
+  model?: string;
+  messages: ApiMessage[];
+  stream?: boolean;
+}
+
+export type OpenAIAargs = {
+  commonPluginConfig: RequestCommonPluginConfig;
+  models: readonly string[];
+};
+
+export type OpenAIClientConfig = Partial<RequestAdapterFetchConfig> &
+  OpenAIAargs;
+
+export class OpenAIClient extends RequestScheduler<RequestAdapterConfig> {
+  constructor(config: OpenAIClientConfig) {
+    const { commonPluginConfig, ...rest } = config;
+    super(new RequestAdapterFetch(rest));
+
+    this.usePlugin(new FetchURLPlugin());
+    this.usePlugin(new RequestCommonPlugin(commonPluginConfig));
+    this.usePlugin(new OpenAIAuthPlugin());
+  }
+
+  async completion(
+    params: OpenAIChatParmas
+  ): Promise<RequestAdapterResponse<StreamResultType>> {
+    return this.post('/chat/completions', {
+      data: params
+    });
+  }
+}

package/templates/fe-react/lib/openAiApi/StreamProcessor.ts

@@ -0,0 +1,81 @@
+export type StreamResultType = {
+  content: string;
+};
+
+export class StreamProcessor {
+  private decoder = new TextDecoder('utf-8');
+  private buffer = '';
+
+  async processStream(
+    readableStream: ReadableStream<Uint8Array>
+  ): Promise<StreamResultType> {
+    let fullContent = '';
+
+    const reader = readableStream.getReader();
+
+    const shouldStop = (result: ReadableStreamReadResult<any>): boolean => {
+      return result.done;
+    };
+
+    try {
+      while (true) {
+        const readResult = await reader.read();
+        if (shouldStop(readResult)) break;
+
+        const decodedChunk = this.decoder.decode(readResult.value, {
+          stream: true
+        });
+
+        const processLineResult = await this.processChunk(decodedChunk);
+
+        fullContent += processLineResult.value;
+
+        if (processLineResult.done) break;
+      }
+    } finally {
+      reader.releaseLock();
+    }
+
+    return {
+      content: fullContent
+    };
+  }
+
+  processLine(line: string) {
+    const data = line.startsWith('data:') ? line.slice(6).trim() : '';
+
+    if (data === '[DONE]') {
+      return { done: true, value: '' };
+    }
+
+    const value = data ? JSON.parse(data).choices[0]?.delta?.content : '';
+
+    return { done: false, value: value };
+  }
+
+  async processChunk(chunk: string) {
+    let processedContent = '';
+    this.buffer += chunk;
+    const lines = this.buffer.split('\n');
+    this.buffer = lines.pop() || '';
+    for (const line of lines) {
+      try {
+        const lineResult = this.processLine(line);
+
+        if (lineResult.done) {
+          return { value: processedContent, done: true };
+        }
+
+        if (!lineResult.value) {
+          continue;
+        }
+
+        processedContent += lineResult.value;
+      } catch (error) {
+        console.error('Parsing error:', error);
+        this.buffer = line + '\n' + this.buffer;
+      }
+    }
+    return { value: processedContent, done: false };
+  }
+}

package/templates/fe-react/lib/openAiApi/index.ts

@@ -0,0 +1,3 @@
+export * from './OpenAIClient';
+export * from './OpenAIAuthPlugin';
+export * from './StreamProcessor';