create-bubbles 0.0.7 → 0.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-bubbles",
-  "version": "0.0.7",
+  "version": "0.0.11",
   "type": "module",
   "author": "bubbles plant",
   "bin": {
@@ -8,7 +8,7 @@
   },
   "files": [
     "index.js",
-    "template-*/*",
+    "template-*/**",
     "dist"
   ],
   "scripts": {

package/template-react-rsbuild/.env

@@ -0,0 +1,3 @@
+# port
+PUBLIC_PORT = 9200
+PUBLIC_PATH = '/'

package/template-react-rsbuild/.prettierignore

@@ -0,0 +1,34 @@
+**/*.png
+**/*.svg
+CODEOWNERS
+.dockerignore
+Dockerfile.ui-test
+.dumi/tmp
+.dumi/tmp-production
+!dumi
+# AUTHORS.txt
+lib/
+es/
+dist/
+# _site/
+# server
+# coverage/
+# CNAME
+LICENSE
+yarn.lock
+# netlify.toml
+yarn-error.log
+*.sh
+*.snap
+components/*/*.js
+components/*/*.jsx
+.gitignore
+.npmignore
+.prettierignore
+.DS_Store
+.editorconfig
+.eslintignore
+.history
+**/*.yml
+*.html
+CHANGELOG.*.md

package/template-react-rsbuild/.prettierrc

@@ -0,0 +1,17 @@
+{
+  "singleQuote": true,
+  "jsxSingleQuote": false,
+  "trailingComma": "all",
+  "printWidth": 100,
+  "proseWrap": "never",
+  "importOrder": ["^(react|react-dom)$", "^([a-z]|@[a-z])", "", ".*"],
+  "plugins": ["@ianvs/prettier-plugin-sort-imports"],
+  "overrides": [
+    {
+      "files": ".prettierrc",
+      "options": {
+        "parser": "json"
+      }
+    }
+  ]
+}

package/template-react-rsbuild/biome.json

@@ -0,0 +1,102 @@
+{
+  "files": {
+    "ignoreUnknown": true,
+    "ignore": ["dist/*", "node_modules", "package.json", "auto-import.d.ts", "*.js"]
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "lineWidth": 100,
+    "indentWidth": 2
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "single",
+      "semicolons": "asNeeded"
+    }
+  },
+  "organizeImports": {
+    "enabled": false
+  },
+  "linter": {
+    "rules": {
+      "style": {
+        "useImportType": "off",
+        "useNumberNamespace": "off",
+        "useNodejsImportProtocol": "off",
+        "noNonNullAssertion": "off",
+        "noUnusedTemplateLiteral": "off"
+      },
+      "complexity": {
+        "noUselessTypeConstraint": "off",
+        "noForEach": "off"
+      },
+      "correctness": {
+        "useExhaustiveDependencies": "off"
+      },
+      "suspicious": {
+        "noGlobalIsNan": "off",
+        "noGlobalIsFinite": "off",
+        "noExplicitAny": "off",
+        "noArrayIndexKey": "off",
+        "noConfusingVoidType": "off",
+        "noThenProperty": "off"
+      },
+      "performance": {
+        "noDelete": "off",
+        "noAccumulatingSpread": "off"
+      },
+      "a11y": {
+        "noAriaHiddenOnFocusable": "off",
+        "noLabelWithoutControl": "off",
+        "useFocusableInteractive": "off",
+        "useKeyWithClickEvents": "off",
+        "useSemanticElements": "off"
+      }
+    }
+  },
+  "css": {
+    "formatter": {
+      "quoteStyle": "single"
+    }
+  },
+  "overrides": [
+    {
+      "include": ["**/*.test.ts", "**/*.test.tsx", "tests/**/*", "scripts/**/*"],
+      "linter": {
+        "rules": {
+          "style": {
+            "noParameterAssign": "off"
+          },
+          "suspicious": {
+            "noThenProperty": "off",
+            "noImplicitAnyLet": "off"
+          },
+          "complexity": {
+            "noUselessFragments": "off"
+          },
+          "a11y": {
+            "useValidAnchor": "off",
+            "useAnchorContent": "off",
+            "useKeyWithClickEvents": "off"
+          }
+        }
+      }
+    },
+    {
+      "include": ["components/*/demo/*"],
+      "linter": {
+        "rules": {
+          "correctness": {
+            "noVoidTypeReturn": "off"
+          },
+          "a11y": {
+            "useValidAnchor": "off",
+            "useAnchorContent": "off",
+            "useKeyWithClickEvents": "off"
+          }
+        }
+      }
+    }
+  ]
+}

package/template-react-rsbuild/commitlint.config.js

@@ -0,0 +1 @@
+module.exports = { extends: ['@commitlint/config-conventional'] };

package/template-react-rsbuild/index.html

@@ -0,0 +1,7 @@
+<!doctype html>
+<html>
+  <head></head>
+  <body>
+    <div id="<%= mountId %>"></div>
+  </body>
+</html>

package/template-react-rsbuild/lefthook.yml

@@ -0,0 +1,14 @@
+pre-commit:
+  commands:
+    check:
+      glob: "*.{js,ts,cjs,mjs,d.cts,d.mts,jsx,tsx,json,jsonc,vue}"
+      run: npx @biomejs/biome check --write --no-errors-on-unmatched --files-ignore-unknown=true --colors=off {staged_files}
+      stage_fixed: true
+
+commit-msg:
+  commands:
+    "lint commit message":
+      run: npx commitlint --edit {1}
+
+
+

package/template-react-rsbuild/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "template-react",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "rsbuild dev --open",
+    "dev:prod": "rsbuild dev --env-mode production",
+    "build": "rsbuild build",
+    "check": "biome check --write",
+    "format": "prettier --write .",
+    "preview": "rsbuild preview",
+    "reinstall": "rimraf pnpm-lock.yaml && rimraf node_modules && pnpm install"
+  },
+  "dependencies": {
+    "ahooks": "^3.8.4",
+    "antd": "^5.24.5",
+    "axios": "^1.8.4",
+    "dayjs": "^1.11.13",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-router": "^7.4.1",
+    "zustand": "^5.0.3"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^1.9.4",
+    "@commitlint/config-conventional": "^19.8.0",
+    "@ianvs/prettier-plugin-sort-imports": "^4.4.1",
+    "@rsbuild/core": "^1.3.1",
+    "@rsbuild/plugin-react": "^1.1.1",
+    "@types/react": "^19.0.12",
+    "@types/react-dom": "^19.0.4",
+    "@unocss/postcss": "^0.65.4",
+    "lefthook": "^1.11.6",
+    "prettier": "^3.5.3",
+    "typescript": "^5.8.2",
+    "unocss": "^0.65.4",
+    "unplugin-auto-import": "^19.1.2"
+  }
+}

package/template-react-rsbuild/postcss.config.mjs

@@ -0,0 +1,5 @@
+import UnoCSS from '@unocss/postcss';
+
+export default {
+  plugins: [UnoCSS()],
+};

package/template-react-rsbuild/rsbuild.config.ts

@@ -0,0 +1,28 @@
+import { defineConfig } from '@rsbuild/core';
+import { pluginReact } from '@rsbuild/plugin-react';
+import AutoImport from 'unplugin-auto-import/rspack';
+
+export default defineConfig({
+  html: {
+    template: './index.html',
+  },
+  resolve: {
+    alias: {
+      '@': './src',
+    },
+  },
+  server: {
+    port: process.env.PUBLIC_PORT,
+  },
+  plugins: [pluginReact()],
+  tools: {
+    rspack: {
+      plugins: [
+        AutoImport({
+          imports: ['react', 'react-router', 'react-router-dom'],
+          dts: './src/types/auto-import.d.ts',
+        }),
+      ],
+    },
+  },
+});

package/template-react-rsbuild/src/App.tsx

@@ -0,0 +1,9 @@
+import { RouterProvider } from 'react-router';
+
+import router from './router';
+
+const App = () => {
+  return <RouterProvider router={router} />;
+};
+
+export default App;

package/template-react-rsbuild/src/components/Loading/PageLoading.tsx

@@ -0,0 +1,11 @@
+import { Spin } from 'antd';
+
+const Loading = () => {
+  return (
+    <div className="flex justify-center items-center w-full h-100%">
+      <Spin size="large" />
+    </div>
+  );
+};
+
+export default Loading;

package/template-react-rsbuild/src/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="@rsbuild/core/types" />

package/template-react-rsbuild/src/index.tsx

@@ -0,0 +1,20 @@
+import React, { Suspense } from 'react';
+import ReactDOM from 'react-dom/client';
+
+import App from './App';
+
+import '@/styles/index.css';
+
+import Loading from './components/Loading/PageLoading';
+
+const rootEl = document.getElementById('root');
+if (rootEl) {
+  const root = ReactDOM.createRoot(rootEl);
+  root.render(
+    <React.StrictMode>
+      <Suspense fallback={<Loading />}>
+        <App />
+      </Suspense>
+    </React.StrictMode>,
+  );
+}

package/template-react-rsbuild/src/pages/home/index.tsx

@@ -0,0 +1,26 @@
+import { use } from 'react';
+
+const fetchData = () => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve({
+        data: [
+          {
+            id: 1,
+            title: 'Album 1',
+          },
+          {
+            id: 2,
+            title: 'Album 2',
+          },
+        ],
+      });
+    }, 1000);
+  });
+};
+
+const Home = () => {
+  return <h1>111</h1>;
+};
+
+export default Home;

package/template-react-rsbuild/src/router/index.tsx

@@ -0,0 +1,27 @@
+import { Suspense } from 'react';
+import { createBrowserRouter, type RouteObject } from 'react-router';
+
+import Loading from '@/components/Loading/PageLoading';
+
+export const lazyLoad = (path: string) => {
+  const Module = lazy(() => import(`@/pages/${path}.tsx`));
+  return (
+    <Suspense fallback={<Loading />}>
+      <Module />
+    </Suspense>
+  );
+};
+
+const routes: RouteObject[] = [
+  {
+    path: '/',
+    id: 'home',
+    element: lazyLoad('home/index'),
+  },
+];
+
+export const router = createBrowserRouter(routes, {
+  basename: import.meta.env.PUBLIC_PATH,
+});
+
+export default router;

package/template-react-rsbuild/src/store/modules/user.ts

@@ -0,0 +1,11 @@
+import { create } from 'zustand'
+
+interface searchFormState {
+  token?: string
+  setToken: (token?: string) => void
+}
+
+export const useUserStore = create<searchFormState>((set) => ({
+  token: undefined,
+  setToken: (token) => set(() => ({ token })),
+}))

package/template-react-rsbuild/src/styles/index.css

@@ -0,0 +1,16 @@
+@unocss;
+
+html,
+body,
+#root {
+  width: 100%;
+  height: 100%;
+}
+
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}

package/template-react-rsbuild/src/types/auto-import.d.ts

@@ -0,0 +1,47 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+// biome-ignore lint: disable
+export {};
+declare global {
+  const Link: typeof import('react-router-dom')['Link'];
+  const NavLink: typeof import('react-router-dom')['NavLink'];
+  const Navigate: typeof import('react-router-dom')['Navigate'];
+  const Outlet: typeof import('react-router-dom')['Outlet'];
+  const Route: typeof import('react-router-dom')['Route'];
+  const Routes: typeof import('react-router-dom')['Routes'];
+  const createRef: typeof import('react')['createRef'];
+  const forwardRef: typeof import('react')['forwardRef'];
+  const lazy: typeof import('react')['lazy'];
+  const memo: typeof import('react')['memo'];
+  const startTransition: typeof import('react')['startTransition'];
+  const useCallback: typeof import('react')['useCallback'];
+  const useContext: typeof import('react')['useContext'];
+  const useDebugValue: typeof import('react')['useDebugValue'];
+  const useDeferredValue: typeof import('react')['useDeferredValue'];
+  const useEffect: typeof import('react')['useEffect'];
+  const useHref: typeof import('react-router-dom')['useHref'];
+  const useId: typeof import('react')['useId'];
+  const useImperativeHandle: typeof import('react')['useImperativeHandle'];
+  const useInRouterContext: typeof import('react-router-dom')['useInRouterContext'];
+  const useInsertionEffect: typeof import('react')['useInsertionEffect'];
+  const useLayoutEffect: typeof import('react')['useLayoutEffect'];
+  const useLinkClickHandler: typeof import('react-router-dom')['useLinkClickHandler'];
+  const useLocation: typeof import('react-router-dom')['useLocation'];
+  const useMemo: typeof import('react')['useMemo'];
+  const useNavigate: typeof import('react-router-dom')['useNavigate'];
+  const useNavigationType: typeof import('react-router-dom')['useNavigationType'];
+  const useOutlet: typeof import('react-router-dom')['useOutlet'];
+  const useOutletContext: typeof import('react-router-dom')['useOutletContext'];
+  const useParams: typeof import('react-router-dom')['useParams'];
+  const useReducer: typeof import('react')['useReducer'];
+  const useRef: typeof import('react')['useRef'];
+  const useResolvedPath: typeof import('react-router-dom')['useResolvedPath'];
+  const useRoutes: typeof import('react-router-dom')['useRoutes'];
+  const useSearchParams: typeof import('react-router-dom')['useSearchParams'];
+  const useState: typeof import('react')['useState'];
+  const useSyncExternalStore: typeof import('react')['useSyncExternalStore'];
+  const useTransition: typeof import('react')['useTransition'];
+}

package/template-react-rsbuild/src/utils/request/axios.ts

@@ -0,0 +1,82 @@
+import { message } from 'antd'
+import axios, { type AxiosResponse } from 'axios'
+
+import { router } from '@/router'
+import { useUserStore } from '@/store/modules/user'
+
+export interface CustomConfig {
+  /** 直接返回响应体 */
+  isTransformResponse?: boolean
+  // 成功需要提示
+  isShowSuccessMsg?: boolean
+}
+
+export enum CodeEnum {
+  SUCCESS = 200,
+  UNAUTHORIZED = 401,
+}
+
+const unAuthFunc = () => {
+  message.error('暂未登录或登录已过期，请重新登录')
+  router.navigate('/login')
+}
+export default (customConfig?: CustomConfig) => {
+  const token = useUserStore((state) => state.token)
+
+  const instance = axios.create({
+    baseURL: import.meta.env.PUBLIC_API_AFFIX,
+  })
+
+  instance.interceptors.request.use(
+    (config) => {
+      config.headers.set('X-Access-Token', token)
+      config.headers.set('Allow-Control-Allow-Origin', '*')
+      return config
+    },
+    (error) => {
+      message.error('请求错误')
+      return Promise.reject(error)
+    },
+  )
+
+  interface ResponseData<T = any> {
+    code: number
+    message: string
+    requestId: string
+    responseTime: number
+    result: T
+  }
+
+  instance.interceptors.response.use(
+    (response: AxiosResponse<ResponseData>) => {
+      const { status, data } = response
+      if (status === 200) {
+        if (customConfig?.isTransformResponse === false) return data
+        const { code, message: msg } = data
+        if (code === CodeEnum.SUCCESS) {
+          if (customConfig?.isShowSuccessMsg) {
+            message.success(msg)
+          }
+          return data.result
+        }
+        message.error(msg)
+        return Promise.reject(data)
+      }
+      if (status === CodeEnum.UNAUTHORIZED) {
+        unAuthFunc()
+      } else return Promise.reject(data.message)
+    },
+    (error) => {
+      const response = error.response
+      const { status, data } = response
+      if (status === CodeEnum.UNAUTHORIZED) {
+        unAuthFunc()
+      } else {
+        message.error(data?.message || '系统异常')
+        return Promise.reject(error)
+      }
+    },
+  )
+
+  return instance
+}

package/template-react-rsbuild/src/utils/request/index.ts

@@ -0,0 +1,77 @@
+import type { AxiosRequestConfig } from 'axios'
+
+import request, { type CustomConfig } from './axios'
+
+interface createAxiosType {
+  get: <T = any>(
+    config: {
+      url: string
+      params?: AxiosRequestConfig['params']
+      config?: AxiosRequestConfig<any>
+    },
+    option?: CustomConfig,
+  ) => Promise<T>
+  post: <T = any>(
+    config: {
+      url: string
+      data?: AxiosRequestConfig['data']
+      params?: AxiosRequestConfig['params']
+      config?: AxiosRequestConfig<any>
+    },
+    option?: CustomConfig,
+  ) => Promise<T>
+  put: <T = any>(
+    config: {
+      url: string
+      data?: AxiosRequestConfig['data']
+      config?: AxiosRequestConfig<any>
+    },
+    option?: CustomConfig,
+  ) => Promise<T>
+  delete: <T = any>(
+    config: {
+      url: string
+      data?: AxiosRequestConfig['data']
+      config?: AxiosRequestConfig<any>
+    },
+    option?: CustomConfig,
+  ) => Promise<T>
+}
+
+const createAxios: createAxiosType = {
+  get: (config, option) =>
+    request(option).get(config.url, {
+      params: config.params,
+      ...config?.config,
+    }),
+  post: (
+    config: {
+      url: string
+      params?: Record<string, string>
+      data?: any
+      config?: AxiosRequestConfig<any>
+    },
+    option?: CustomConfig,
+  ) => {
+    let url = config.url
+    if (config.params instanceof Object) {
+      url += '?'
+      const entries = Object.entries(config.params)
+      for (let i = 0; i < entries.length; i++) {
+        const [key, value] = entries[i]
+        url += `${key}=${value}${i < entries.length - 1 ? '&' : ''}`
+      }
+    }
+    return request(option).post(url, config?.data, config?.config)
+  },
+  put: (
+    config: { url: string; data?: any; config?: AxiosRequestConfig<any> },
+    option?: CustomConfig,
+  ) => request(option).put(config.url, config?.data, config?.config),
+  delete: (
+    config: { url: string; config?: AxiosRequestConfig<any> },
+    customConfig?: CustomConfig,
+  ) => request(customConfig).delete(config.url, config?.config),
+}
+
+export default createAxios

package/template-react-rsbuild/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "lib": ["DOM", "ES2020"],
+    "jsx": "react-jsx",
+    "target": "ES2020",
+    "noEmit": true,
+    "skipLibCheck": true,
+    "useDefineForClassFields": true,
+
+    /* modules */
+    "module": "ESNext",
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+
+    /* type checking */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}

package/template-react-rsbuild/uno.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig, presetUno } from 'unocss';
+
+export default defineConfig({
+  content: {
+    filesystem: ['**/*.{html,js,ts,jsx,tsx,vue,svelte,astro}'],
+  },
+  presets: [presetUno()],
+});