feat(custom): v0.0.1

Author: coderlzw-cn

.cz-config.json

@@ -0,0 +1,8 @@
+{
+  "path": "cz-customizable",
+  "config": {
+    "cz-customizable": {
+      "format": "{type}: {subject}"
+    }
+  }
+}

.czrc

@@ -0,0 +1,28 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# 表示是最顶层的配置文件
+root = true
+
+# 匹配全部文件
+[*]
+# 设置字符集
+charset = utf-8
+# 缩进风格，可选 space、tab
+indent_style = space
+# 缩进的空格数
+indent_size = 2
+# 结尾换行符，可选 lf、cr、crlf
+end_of_line = lf
+# 在文件结尾插入新行
+insert_final_newline = true
+# 删除一行中的前后空格
+trim_trailing_whitespace = true
+
+# 匹配 md 结尾的文件
+[*.md]
+trim_trailing_whitespace = false
+
+# 匹配 package.json 和 .travis.yml
+[{package.json,.travis.yml}]
+indent_style = space
+indent_size = 2

.editorconfig

@@ -0,0 +1,30 @@
+name: npm publish # 定义工作流名称
+
+on:
+  workflow_dispatch: # 允许手动触发工作流，默认是不开启的
+  push: # 当有代码推送到仓库时触发
+    branches:
+      - main
+
+jobs:
+  build: # 工作流程中的一个作业
+    runs-on: ubuntu-latest # 指定运行作业的虚拟环境
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          registry-url: https://registry.npmjs.org/
+      - name: enable pnpm
+        run: corepack enable
+      - name: install Dependencies
+        run: |
+          ls -al
+          pnpm i
+          pnpm build
+      - name: Publish to NPM
+        run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/npm-publish.yml

@@ -0,0 +1,12 @@
+export default {
+    '*.{js,ts}': [
+      "npm run lint",
+      "npm run format",
+      "npm run lint:check",
+      "npm run format:check",
+    ],
+    '*.{json,md}': [
+      "npm run format",
+      "npm run format:check",
+    ],
+  };

.lintstagedrc.mjs

@@ -0,0 +1 @@
+registry=https://registry.npmjs.org

.npmrc

@@ -0,0 +1,7 @@
+{
+    "printWidth": 120,
+    "tabWidth": 4,
+    "useTabs": false,
+    "singleQuote": true,
+    "trailingComma": "all"
+}

.prettierrc

@@ -0,0 +1,240 @@
+一个实用的 React Hooks 集合，为你的日常开发提供便利。
+
+## 安装
+
+```bash
+# 使用 npm
+npm install r-hooks
+
+# 使用 yarn
+yarn add r-hooks
+
+# 使用 pnpm
+pnpm add r-hooks
+```
+
+## 可用的 Hooks
+
+### useTheme
+
+用于管理主题（暗色/亮色/系统）的 Hook，支持持久化存储。
+
+```tsx
+import { useTheme, ThemeProvider } from 'r-hooks';
+
+function App() {
+    const { theme, setTheme, resolvedTheme } = useTheme();
+
+    return (
+        <div>
+            <button onClick={() => setTheme('dark')}>暗色</button>
+            <button onClick={() => setTheme('light')}>亮色</button>
+            <button onClick={() => setTheme('system')}>跟随系统</button>
+        </div>
+    );
+}
+```
+
+### useResizeObserver
+
+用于监听元素尺寸变化的 Hook。
+
+```tsx
+import { useResizeObserver } from 'r-hooks';
+
+function Component() {
+    const [ref, size] = useResizeObserver();
+
+    return (
+        <div ref={ref}>
+            宽度: {size.width}, 高度: {size.height}
+        </div>
+    );
+}
+```
+
+### useThrottle
+
+用于节流函数调用的 Hook。
+
+```tsx
+import { useThrottle } from 'r-hooks';
+
+function Component() {
+    const throttledFn = useThrottle(() => {
+        // 你的函数
+    }, 1000);
+}
+```
+
+### useDebounce
+
+用于防抖函数调用的 Hook。
+
+```tsx
+import { useDebounce } from 'r-hooks';
+
+function Component() {
+    const debouncedFn = useDebounce(() => {
+        // 你的函数
+    }, 1000);
+}
+```
+
+### useScroll
+
+用于追踪滚动位置的 Hook。
+
+```tsx
+import { useScroll } from 'r-hooks';
+
+function Component() {
+    const { x, y, direction } = useScroll();
+
+    return (
+        <div>
+            横向滚动: {x}, 纵向滚动: {y}, 方向: {direction}
+        </div>
+    );
+}
+```
+
+### useMediaQuery
+
+用于响应媒体查询的 Hook。
+
+```tsx
+import { useMediaQuery } from 'r-hooks';
+
+function Component() {
+    const isMobile = useMediaQuery('(max-width: 768px)');
+
+    return isMobile ? <移动端视图 /> : <桌面端视图 />;
+}
+```
+
+### useQueryParams
+
+用于管理 URL 查询参数的 Hook。
+
+```tsx
+import { useQueryParams } from 'r-hooks';
+
+function Component() {
+    const [params, setParams] = useQueryParams();
+
+    return (
+        <div>
+            <button onClick={() => setParams({ page: 2 })}>跳转到第 2 页</button>
+        </div>
+    );
+}
+```
+
+### useAsync
+
+用于处理异步操作的 Hook。
+
+```tsx
+import { useAsync } from 'r-hooks';
+
+function Component() {
+    const [execute, { data, loading, error }] = useAsync(async () => {
+        const response = await fetch('/api/data');
+        return response.json();
+    });
+
+    return (
+        <div>
+            {loading && <div>加载中...</div>}
+            {error && <div>错误: {error.message}</div>}
+            {data && <div>数据: {JSON.stringify(data)}</div>}
+        </div>
+    );
+}
+```
+
+### useClickOutside
+
+用于检测元素外部点击的 Hook。
+
+```tsx
+import { useClickOutside } from 'r-hooks';
+
+function Component() {
+    const ref = useRef(null);
+
+    useClickOutside(ref, () => {
+        // 处理外部点击
+    });
+
+    return <div ref={ref}>点击我外部</div>;
+}
+```
+
+### useWindowSize
+
+用于追踪窗口尺寸的 Hook。
+
+```tsx
+import { useWindowSize } from 'r-hooks';
+
+function Component() {
+    const { width, height } = useWindowSize();
+
+    return (
+        <div>
+            窗口尺寸: {width}x{height}
+        </div>
+    );
+}
+```
+
+### usePagination
+
+用于管理分页状态的 Hook。
+
+```tsx
+import { usePagination } from 'r-hooks';
+
+function Component() {
+    const { pagination, paginationState, setPageIndex, setPageSize, nextPage, prevPage, hasNextPage, hasPrevPage } =
+        usePagination({
+            initialPage: 1,
+            initialPageSize: 10,
+            total: 100,
+        });
+
+    return (
+        <div>
+            <button onClick={prevPage} disabled={!hasPrevPage}>
+                上一页
+            </button>
+            <span>第 {pagination.pageIndex} 页</span>
+            <button onClick={nextPage} disabled={!hasNextPage}>
+                下一页
+            </button>
+        </div>
+    );
+}
+```
+
+## 开发
+
+```bash
+# 安装依赖
+pnpm install
+
+# 开始开发
+pnpm dev
+
+# 构建
+pnpm build
+
+# 代码检查
+pnpm lint
+```
+
+## 许可证
+
+ISC © coderlzw