@qlover/create-app 0.3.1 → 0.3.3

package/templates/react-app/lib/tailwind/root10px.js

@@ -1,178 +0,0 @@
-import plugin from 'tailwindcss/plugin';
-
-/**
- * Tailwind CSS 配置 - 10px 根字体大小
- *
- * 注意事项：
- * 1. 所有的 rem 值都基于 10px 计算
- * 2. 16px = 1.6rem
- * 3. spacing 中的值需要乘以 1.6 来保持与原来的单位一致
- *
- * 由于移动端开发需求，方便计算，重置像素 10px, 将默认 16px 变成 10px
- *
- * 但是 tailwind 中的单位间距都是有个 rem 做单位， 16px 变成 10px 基数改变, 需要在原来不变像素上用 10px 基数重写一遍
- *
- * @see https://redpixelthemes.com/blog/change-tailwindcss-base-font-size/
- * @type {import('tailwindcss').Config['theme']}
- *
- * @example
- * // 使用示例
- * text-base -> 1.6rem -> 16px
- * p-4 -> 1.6rem -> 16px
- * w-40 -> 16rem -> 160px
- */
-const root10pxThemes = {
-  lineHeight: {
-    3: '1.2rem',
-    4: '1.6rem',
-    5: '2.0rem',
-    6: '2.4rem',
-    7: '2.8rem',
-    8: '3.2rem',
-    9: '3.6rem',
-    10: '4.0rem',
-    none: 1,
-    tight: 1.25,
-    snug: 1.375,
-    normal: 1.5,
-    relaxed: 1.625,
-    loose: 2
-  },
-  maxWidth: {
-    xs: '32.0rem',
-    sm: '38.4rem',
-    md: '44.8rem',
-    lg: '51.2rem',
-    xl: '57.6rem',
-    '2xl': '67.2rem',
-    '3xl': '76.8rem',
-    '4xl': '89.6rem',
-    '5xl': '102.4rem',
-    '6xl': '115.2rem',
-    '7xl': '128.0rem'
-  },
-
-  //
-  // 为了兼容之前的写法，在10的倍数上以 16px 作为基准单位计算
-  // 默认是以 4的倍数作为基数计算间距，但是由于 html font-size 变为了 10px
-  // 现在版本从之前的16px -> 10px 整体缩小，所以，这里需要手动将间距放大，去适应以前的环境
-  // TODO： 后期将所有间距调整为基准值， 不使用放大值
-
-  /**
-   * 因为之前版本 root size 为默认 16px,  tailwind 默认就以 16px 为基准设置 spacing
-   *
-   * 而现在版本 root size 为 10px, 为了兼容以前代码, 将所有 spacing 重写
-   *
-   * @see https://tailwindcss.com/docs/customizing-spacing#default-spacing-scale
-   *
-   * 例如：
-   *   以前版本 1 -> 4px -> 0.25rem， 而现在 1 -> 4px -> 0.1rem
-   *   以前版本 4 -> 16px -> 1rem 而现在 4 -> 16px -> 1.6rem
-   *
-   * 注意只是 spaceing 使用这规则，也就是将默认的 px 间距用 10 重新换算一遍，间距并未改变
-   */
-  spacing: {
-    0.5: '0.2rem',
-    1: '0.4rem',
-    1.5: '0.6rem',
-    2: '0.8rem',
-    2.5: '1rem',
-    3: '1.2rem',
-    3.5: '1.4rem',
-    4: '1.6rem',
-    5: '2rem',
-    6: '2.4rem',
-    7: '2.8rem',
-    8: '3.2rem',
-    9: '3.6rem',
-    10: '4rem',
-    11: '4.4rem',
-    12: '4.8rem',
-    14: '5.6rem',
-    16: '6.4rem',
-    20: '8rem',
-    24: '9.6rem',
-    28: '11.2rem',
-    32: '12.8rem',
-    36: '14.4rem',
-    40: '16rem',
-    44: '17.6rem',
-    48: '19.2rem',
-    52: '20.8rem',
-    56: '22.4rem',
-    60: '24rem',
-    64: '25.6rem',
-    72: '28.8rem',
-    80: '32rem',
-    96: '38.4rem'
-  },
-
-  /**
-   * 字体对应 font-size 和 line-height
-   *
-   * @see https://tailwindcss.com/docs/font-size
-   */
-  fontSize: {
-    xxs: ['2rem', '1.2rem'],
-    xs: ['1.2rem', '1.6rem'],
-    sm: ['1.4rem', '2rem'],
-    base: ['1.6rem', '2.4rem'],
-    lg: ['1.8rem', '2.8rem'],
-    xl: ['2rem', '2.8rem'],
-    '2xl': ['2.4rem', '3.2rem'],
-    '3xl': ['3rem', '3.6rem'],
-    '4xl': ['3.6rem', '4rem'],
-    '5xl': ['4.8rem', 1],
-    '6xl': ['6rem', 1],
-    '7xl': ['7.2rem', 1],
-    '8xl': ['9.6rem', 1],
-    '9xl': ['12.8rem', 1],
-    12: ['1.2rem'],
-    14: ['1.4rem'],
-    16: ['1.6rem'],
-    18: ['1.8rem'],
-    20: ['2rem'],
-    22: ['2.2rem'],
-    24: ['2.4rem'],
-    26: ['2.6rem'],
-    32: ['3.2rem'],
-    34: ['3.4rem'],
-    36: ['3.6rem'],
-    40: ['4rem'],
-    46: ['4.6rem'],
-    50: ['5rem'],
-    54: ['5.4rem'],
-    60: ['6rem'],
-    70: ['7rem'],
-    80: ['8rem'],
-    90: ['9rem'],
-    100: ['10rem']
-  },
-
-  screens: {
-    /** @media (min-width: 375px) { ... } */
-    xs: '375px',
-    /** @media (min-width: 640px) { ... } */
-    sm: '640px',
-    /** @media (min-width: 768px) { ... } */
-    md: '768px',
-    /** @media (min-width: 1024px) { ... } */
-    lg: '1024px',
-    /** @media (min-width: 1280px) { ... } */
-    xl: '1280px',
-    /** @media (min-width: 1536px) { ... } */
-    '2xl': '1536px',
-    /** @media (min-width: 1640px) { ... } */
-    '3xl': '1640px',
-    /** @media (min-width: 1920px) { ... } */
-    maxxl: '1920px'
-  }
-};
-
-const root10pxPlugin = plugin(({ addBase }) => {
-  addBase({
-    html: { fontSize: '10px' }
-  });
-});
-
-export default { themes: root10pxThemes, plugin: root10pxPlugin };

package/templates/react-app/lib/tailwind/theme-generator.js

@@ -1,238 +0,0 @@
-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/react-app/public/locales/en/about.json

@@ -1,3 +0,0 @@
-{
-  "title": "About"
-}

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

@@ -1,6 +0,0 @@
-{
-  "executorDemo": "Executor Demo",
-  "requestTimeout": "Request Timeout",
-  "executorTestPlugin": "Executor Test Plugin",
-  "testPlugin": "Test Plugin"
-}

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

@@ -1,10 +0,0 @@
-{
-  "welcome": "Welcome to the home page",
-  "description": "A modern frontend utility library collection providing various practical tools and components",
-  "about": "About Us",
-  "about_description": "Learn more about our project and team information",
-  "jsonstorage": "JSONStorage",
-  "jsonstorage_description": "Efficient JSON data storage solution",
-  "request": "Request",
-  "request_description": "A modern frontend utility library collection providing various practical tools and components"
-}

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

@@ -1,11 +0,0 @@
-{
-  "title": "JSONStorage Demo",
-  "title2": "Permanent storage test",
-  "title3": "Expire time test",
-  "title4": "Request Timeout",
-  "format.title": "Test key: ${key}, Random value range: ${min}~${max}",
-  "setRandomValue": "Set random value",
-  "currentValue": "Current value",
-  "ms": "ms",
-  "setExpireTime": "Set random value(with expire time)"
-}

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

@@ -1,7 +0,0 @@
-{
-  "title": "Login",
-  "email": "Email",
-  "username": "Username",
-  "password": "Password",
-  "login": "Login"
-}

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

@@ -1,15 +0,0 @@
-{
-  "requestTimeout": "Request Timeout",
-  "helloResult": "Hello result is",
-  "helloError": "Hello error is",
-  "ipInfoResult": "IpInfo result is",
-  "ipInfo": "IpInfo",
-  "randomUser": "RandomUser",
-  "loading": "Loading...",
-  "randomUserResult": "RandomUser result is",
-  "randomUserError": "RandomUser error is",
-  "triggerAbortRequest": "Trigger Abort Request",
-  "stopAbortRequest": "Stop Abort Request",
-  "abortRequestResult": "Abort Request Result",
-  "abortRequestError": "Abort Request Error"
-}

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

@@ -1,3 +0,0 @@
-{
-  "title": "关于我们"
-}

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

@@ -1,7 +0,0 @@
-{
-  "executorDemo": "执行器 Demo",
-  "requestTimeout": "请求超时",
-  "executorTestPlugin": "执行器 测试插件",
-  "testPlugin": "测试插件"
-}
-

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

@@ -1,10 +0,0 @@
-{
-  "welcome": "欢迎来到主页",
-  "description": "一个现代前端实用库集合，提供各种实用工具和组件",
-  "about": "关于我们",
-  "about_description": "了解更多关于我们的项目和团队信息",
-  "jsonstorage": "JSON存储",
-  "jsonstorage_description": "高效的JSON数据存储解决方案",
-  "request": "请求",
-  "request_description": "一个现代前端实用库集合，提供各种实用工具和组件"
-}

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

@@ -1,11 +0,0 @@
-{
-  "title": "JSONStorage Demo",
-  "title2": "永久存储测试",
-  "title3": "过期时间测试",
-  "title4": "请求超时时间设置",
-  "format.title": "测试 key: ${key}, 随机值范围: ${min}~${max}",
-  "setRandomValue": "设置随机值",
-  "currentValue": "当前值",
-  "ms": "毫秒",
-  "setExpireTime": "设置随机值(带过期时间)"
-}

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

@@ -1,8 +0,0 @@
-{
-  "title": "登录",
-  "email": "邮箱",
-  "username": "用户名",
-  "password": "密码",
-  "login": "登录"
-}
-

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

@@ -1,15 +0,0 @@
-{
-  "requestTimeout": "请求超时",
-  "helloResult": "Hello 结果是",
-  "helloError": "Hello 错误是",
-  "ipInfoResult": "IpInfo 结果是",
-  "ipInfo": "IpInfo",
-  "randomUser": "随机用户",
-  "loading": "加载中...",
-  "randomUserResult": "随机用户 结果是",
-  "randomUserError": "随机用户 错误是",
-  "triggerAbortRequest": "触发中止请求",
-  "stopAbortRequest": "停止中止请求",
-  "abortRequestResult": "中止请求 结果是",
-  "abortRequestError": "中止请求 错误是"
-}

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

@@ -1,9 +0,0 @@
-import type { IOCRegisterInterface } from '@qlover/corekit-bridge';
-import type { Container } from 'inversify';
-
-export type InversifyRegisterContainer = Container;
-/**
- * Inversify register interface.
- */
-export interface InversifyRegisterInterface
-  extends IOCRegisterInterface<InversifyRegisterContainer> {}

package/templates/react-app/src/uikit/styles/css/page.css

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

package/templates/react-app/src/uikit/styles/css/tailwind.css

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