@taicode/common-web 1.1.20 → 3.0.1

package/output/use-observer/use-observer.test.jsx

@@ -0,0 +1,134 @@
+import { describe, it, expect } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import { observable, action } from 'mobx';
+import { useObserver } from './use-observer';
+describe('useObserver', () => {
+    it('应该返回初始值当没有selector时', () => {
+        const initialValue = '初始值';
+        const { result } = renderHook(() => useObserver(initialValue));
+        expect(result.current).toBe(initialValue);
+    });
+    it('应该使用selector转换值', () => {
+        const initialValue = { count: 5 };
+        const selector = (value) => value.count * 2;
+        const { result } = renderHook(() => useObserver(initialValue, selector));
+        expect(result.current).toBe(10);
+    });
+    it('应该在观察对象变化时重新渲染', async () => {
+        const observableStore = observable({
+            count: 0,
+            increment: action(() => {
+                observableStore.count++;
+            })
+        });
+        const { result } = renderHook(() => useObserver(observableStore, (store) => store.count));
+        expect(result.current).toBe(0);
+        // 改变observable的值
+        act(() => {
+            observableStore.increment();
+        });
+        // 等待React更新
+        await new Promise(resolve => setTimeout(resolve, 0));
+        expect(result.current).toBe(1);
+    });
+    it('应该处理复杂的selector函数', () => {
+        const store = observable({
+            users: [
+                { id: 1, name: '张三', active: true },
+                { id: 2, name: '李四', active: false },
+                { id: 3, name: '王五', active: true }
+            ]
+        });
+        const selector = (store) => store.users.filter((user) => user.active).map((user) => user.name);
+        const { result } = renderHook(() => useObserver(store, selector));
+        expect(result.current).toEqual(['张三', '王五']);
+    });
+    it('应该在observable数组变化时重新渲染', async () => {
+        const store = observable({
+            items: ['项目1', '项目2'],
+            addItem: action((item) => {
+                store.items.push(item);
+            })
+        });
+        const { result } = renderHook(() => useObserver(store, (store) => store.items.length));
+        expect(result.current).toBe(2);
+        act(() => {
+            store.addItem('项目3');
+        });
+        await new Promise(resolve => setTimeout(resolve, 0));
+        expect(result.current).toBe(3);
+    });
+    it('应该处理null值的初始值', () => {
+        const { result } = renderHook(() => useObserver(null));
+        expect(result.current).toBeNull();
+    });
+    it('应该处理undefined值的初始值', () => {
+        const { result } = renderHook(() => useObserver(undefined));
+        expect(result.current).toBeUndefined();
+    });
+    it('应该在selector为null时返回原值', () => {
+        const initialValue = { data: '测试数据' };
+        const { result } = renderHook(() => useObserver(initialValue, null));
+        expect(result.current).toBe(initialValue);
+    });
+    it('应该处理嵌套observable对象', async () => {
+        const store = observable({
+            user: {
+                profile: {
+                    name: '测试用户',
+                    email: 'test@example.com'
+                }
+            },
+            updateName: action((name) => {
+                store.user.profile.name = name;
+            })
+        });
+        const { result } = renderHook(() => useObserver(store, (store) => store.user.profile.name));
+        expect(result.current).toBe('测试用户');
+        act(() => {
+            store.updateName('新用户名');
+        });
+        await new Promise(resolve => setTimeout(resolve, 0));
+        expect(result.current).toBe('新用户名');
+    });
+    it('应该处理多个observable属性的变化', async () => {
+        const store = observable({
+            firstName: '张',
+            lastName: '三',
+            updateFirstName: action((name) => {
+                store.firstName = name;
+            }),
+            updateLastName: action((name) => {
+                store.lastName = name;
+            })
+        });
+        const { result } = renderHook(() => useObserver(store, (store) => `${store.firstName}${store.lastName}`));
+        expect(result.current).toBe('张三');
+        act(() => {
+            store.updateFirstName('李');
+        });
+        await new Promise(resolve => setTimeout(resolve, 0));
+        expect(result.current).toBe('李三');
+        act(() => {
+            store.updateLastName('四');
+        });
+        await new Promise(resolve => setTimeout(resolve, 0));
+        expect(result.current).toBe('李四');
+    });
+    it('应该在组件卸载时清理reaction', () => {
+        const store = observable({ count: 0 });
+        const { unmount } = renderHook(() => useObserver(store, (store) => store.count));
+        // 卸载组件应该不会抛出错误
+        expect(() => unmount()).not.toThrow();
+    });
+    it('应该处理boolean类型的返回值', () => {
+        const store = observable({ isActive: true });
+        const { result } = renderHook(() => useObserver(store, (store) => store.isActive));
+        expect(result.current).toBe(true);
+    });
+    it('应该处理数字类型的返回值', () => {
+        const store = observable({ count: 42 });
+        const { result } = renderHook(() => useObserver(store, (store) => store.count));
+        expect(result.current).toBe(42);
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taicode/common-web",
-  "version": "1.1.20",
+  "version": "3.0.1",
   "author": "Alain",
   "license": "ISC",
   "description": "",
@@ -28,31 +28,37 @@
     "dev": "tsc -p tsconfig.json --watch"
   },
   "peerDependencies": {
-    "@taicode/common-base": ">=1.1.0",
-    "@needle-di/core": ">=1.0.0",
     "@heroicons/react": "^2.2.0",
-    "mobx-react-lite": "^4.1.1",
+    "@needle-di/core": ">=1.0.0",
+    "@taicode/common-base": "^3.0.1",
     "@types/react": ">=18",
     "mobx": ">=6",
+    "mobx-react-lite": "^4.1.1",
     "react": ">=18"
   },
   "dependencies": {
-    "react-toastify": "^11.0.5",
-    "@heroicons/react": "^2.2.0",
     "@headlessui/react": "^2.2.4",
+    "@heroicons/react": "^2.2.0",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-slot": "^1.2.4",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "framer-motion": "^12.19.2",
-    "clsx": "^2.1.1"
+    "sonner": "^1.7.1",
+    "tailwind-merge": "^3.4.0"
   },
   "devDependencies": {
-    "@testing-library/react": "^14.0.0",
+    "@needle-di/core": "^1.0.0",
     "@testing-library/jest-dom": "^6.1.0",
-    "jsdom": "^23.0.0",
-    "vitest": "^1.0.0",
-    "@vitest/ui": "^1.0.0",
+    "@testing-library/react": "^14.0.0",
     "@types/react": "^18.0.0",
-    "@needle-di/core": "^1.0.0",
-    "mobx-react-lite": "^4.1.1",
+    "@vitest/ui": "^1.0.0",
+    "execa": "^8.0.1",
+    "jsdom": "^23.0.0",
     "mobx": "^6.0.0",
-    "react": "^18.0.0"
+    "mobx-react-lite": "^4.1.1",
+    "react": "^18.0.0",
+    "type-detect": "^4.1.0",
+    "vitest": "^1.0.0"
   }
 }

package/output/loading-button/LoadingButtonDemo.d.ts

@@ -1,5 +0,0 @@
-/**
- * LoadingButton 组件演示
- */
-export declare function LoadingButtonDemo(): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=LoadingButtonDemo.d.ts.map

package/output/loading-button/LoadingButtonDemo.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"LoadingButtonDemo.d.ts","sourceRoot":"","sources":["../../source/loading-button/LoadingButtonDemo.tsx"],"names":[],"mappings":"AAGA;;GAEG;AACH,wBAAgB,iBAAiB,4CAsKhC"}

package/output/loading-button/LoadingButtonDemo.js

@@ -1,33 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { LoadingButton } from '../loading-button';
-/**
- * LoadingButton 组件演示
- */
-export function LoadingButtonDemo() {
-    const [result, setResult] = useState('');
-    // 模拟异步保存操作
-    const handleSave = async () => {
-        setResult('正在保存...');
-        await new Promise(resolve => setTimeout(resolve, 2000));
-        setResult('保存成功!');
-    };
-    // 模拟可能失败的操作
-    const handleDelete = async () => {
-        setResult('正在删除...');
-        await new Promise(resolve => setTimeout(resolve, 1500));
-        // 模拟随机失败
-        if (Math.random() > 0.5) {
-            setResult('删除成功!');
-        }
-        else {
-            setResult('删除失败!');
-            throw new Error('删除失败');
-        }
-    };
-    // 同步操作
-    const handleClick = () => {
-        setResult('立即点击!');
-    };
-    return (_jsxs("div", { className: "space-y-8 p-8", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-2xl font-bold mb-4", children: "LoadingButton \u7EC4\u4EF6\u6F14\u793A" }), _jsx("p", { className: "text-gray-600 mb-4", children: "\u6F14\u793A\u5982\u4F55\u4F7F\u7528 LoadingButton \u7EC4\u4EF6\u5904\u7406\u5F02\u6B65\u64CD\u4F5C" })] }), result && (_jsx("div", { className: "p-4 bg-gray-100 dark:bg-gray-800 rounded-lg", children: _jsx("p", { className: "text-sm font-medium", children: result }) })), _jsxs("section", { className: "space-y-4", children: [_jsx("h3", { className: "text-lg font-semibold", children: "\u57FA\u7840\u7528\u6CD5" }), _jsxs("div", { className: "flex gap-3 flex-wrap", children: [_jsx(LoadingButton, { color: "blue", onClick: handleSave, children: "\u4FDD\u5B58\u6570\u636E" }), _jsx(LoadingButton, { color: "red", onClick: handleDelete, children: "\u5220\u9664\u6570\u636E" }), _jsx(LoadingButton, { color: "green", onClick: handleClick, children: "\u540C\u6B65\u64CD\u4F5C" })] })] }), _jsxs("section", { className: "space-y-4", children: [_jsx("h3", { className: "text-lg font-semibold", children: "\u4E0D\u540C\u6837\u5F0F" }), _jsxs("div", { className: "flex gap-3 flex-wrap", children: [_jsx(LoadingButton, { color: "emerald", onClick: handleSave, children: "Solid \u6837\u5F0F" }), _jsx(LoadingButton, { outline: true, onClick: handleSave, children: "Outline \u6837\u5F0F" }), _jsx(LoadingButton, { plain: true, onClick: handleSave, children: "Plain \u6837\u5F0F" })] })] }), _jsxs("section", { className: "space-y-4", children: [_jsx("h3", { className: "text-lg font-semibold", children: "\u81EA\u5B9A\u4E49\u52A0\u8F7D\u6587\u672C" }), _jsxs("div", { className: "flex gap-3 flex-wrap", children: [_jsx(LoadingButton, { color: "blue", onClick: handleSave, loadingText: "\u6B63\u5728\u4FDD\u5B58\u6570\u636E...", children: "\u81EA\u5B9A\u4E49\u6587\u672C" }), _jsx(LoadingButton, { color: "purple", onClick: handleSave, loadingText: _jsxs("span", { className: "flex items-center gap-2", children: [_jsxs("svg", { className: "animate-spin h-4 w-4", viewBox: "0 0 24 24", children: [_jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4", fill: "none" }), _jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }), "\u5904\u7406\u4E2D"] }), children: "\u81EA\u5B9A\u4E49\u56FE\u6807" })] })] }), _jsxs("section", { className: "space-y-4", children: [_jsx("h3", { className: "text-lg font-semibold", children: "\u989C\u8272\u9009\u9879" }), _jsxs("div", { className: "flex gap-3 flex-wrap", children: [_jsx(LoadingButton, { color: "red", onClick: handleSave, children: "Red" }), _jsx(LoadingButton, { color: "orange", onClick: handleSave, children: "Orange" }), _jsx(LoadingButton, { color: "amber", onClick: handleSave, children: "Amber" }), _jsx(LoadingButton, { color: "yellow", onClick: handleSave, children: "Yellow" }), _jsx(LoadingButton, { color: "lime", onClick: handleSave, children: "Lime" }), _jsx(LoadingButton, { color: "green", onClick: handleSave, children: "Green" }), _jsx(LoadingButton, { color: "emerald", onClick: handleSave, children: "Emerald" }), _jsx(LoadingButton, { color: "teal", onClick: handleSave, children: "Teal" }), _jsx(LoadingButton, { color: "cyan", onClick: handleSave, children: "Cyan" }), _jsx(LoadingButton, { color: "sky", onClick: handleSave, children: "Sky" }), _jsx(LoadingButton, { color: "blue", onClick: handleSave, children: "Blue" }), _jsx(LoadingButton, { color: "indigo", onClick: handleSave, children: "Indigo" }), _jsx(LoadingButton, { color: "violet", onClick: handleSave, children: "Violet" }), _jsx(LoadingButton, { color: "purple", onClick: handleSave, children: "Purple" }), _jsx(LoadingButton, { color: "fuchsia", onClick: handleSave, children: "Fuchsia" }), _jsx(LoadingButton, { color: "pink", onClick: handleSave, children: "Pink" }), _jsx(LoadingButton, { color: "rose", onClick: handleSave, children: "Rose" })] })] }), _jsxs("section", { className: "space-y-4", children: [_jsx("h3", { className: "text-lg font-semibold", children: "\u7981\u7528\u72B6\u6001" }), _jsxs("div", { className: "flex gap-3 flex-wrap", children: [_jsx(LoadingButton, { color: "blue", disabled: true, onClick: handleSave, children: "\u7981\u7528\u6309\u94AE" }), _jsx(LoadingButton, { color: "green", onClick: handleSave, disableOnLoading: false, children: "\u52A0\u8F7D\u65F6\u4E0D\u7981\u7528" })] })] })] }));
-}