@react-component-library-nlxx/components 1.0.1

package/dist/index.mjs

@@ -0,0 +1,652 @@
+import React, { createContext, forwardRef, memo, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import styled, { ThemeProvider as ThemeProvider$1, css } from "styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Subject, fromEvent } from "rxjs";
+import { debounceTime, distinctUntilChanged, filter, map, throttleTime } from "rxjs/operators";
+
+//#region src/Button/style.ts
+const sizeStyles = {
+	small: css`
+    height: 24px;
+    padding: 0 8px;
+    font-size: 12px;
+  `,
+	medium: css`
+    height: 32px;
+    padding: 0 16px;
+    font-size: 14px;
+  `,
+	large: css`
+    height: 40px;
+    padding: 0 24px;
+    font-size: 16px;
+  `
+};
+const variantStyles = {
+	primary: css`
+    background: #1890ff;
+    color: white;
+    border: none;
+    &:hover:not(:disabled) { background: #40a9ff; }
+    &:active:not(:disabled) { background: #096dd9; }
+  `,
+	secondary: css`
+    background: #f0f2f5;
+    color: #333;
+    border: none;
+    &:hover:not(:disabled) { background: #e6e9f0; }
+  `,
+	outline: css`
+    background: transparent;
+    color: #1890ff;
+    border: 1px solid #1890ff;
+    &:hover:not(:disabled) { background: #e6f7ff; }
+  `,
+	ghost: css`
+    background: transparent;
+    color: #1890ff;
+    border: none;
+    &:hover:not(:disabled) { background: rgba(24, 144, 255, 0.1); }
+  `
+};
+const shapeStyles = {
+	default: css`border-radius: 4px;`,
+	round: css`border-radius: 32px;`,
+	circle: css`
+    border-radius: 50%;
+    padding: 0;
+    width: ${(props) => {
+		const size = props.size || "medium";
+		return size === "small" ? "24px" : size === "medium" ? "32px" : "40px";
+	}};
+  `
+};
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  cursor: pointer;
+  transition: all 0.2s;
+  font-weight: 400;
+  white-space: nowrap;
+
+  /* 尺寸 */
+  ${({ size = "medium" }) => sizeStyles[size]}
+
+  /* 变体 */
+  ${({ variant = "primary" }) => variantStyles[variant]}
+
+  /* 形状 */
+  ${({ shape = "default" }) => shapeStyles[shape]}
+
+  /* 块级按钮 */
+  ${({ block }) => block && css`width: 100%;`}
+
+  /* 加载状态 */
+  ${({ loading }) => loading && css`
+    opacity: 0.7;
+    cursor: not-allowed;
+    pointer-events: none;
+  `}
+
+  /* 禁用状态 */
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  /* 图标样式 */
+  .btn-icon {
+    display: inline-flex;
+    align-items: center;
+  }
+`;
+
+//#endregion
+//#region src/Button/index.tsx
+const Button = forwardRef((props, ref) => {
+	const { children, size = "medium", variant = "primary", shape = "default", loading = false, disabled = false, block = false, icon, iconPosition = "left", type = "button", ...rest } = props;
+	const renderIcon = () => {
+		if (!icon) return null;
+		return /* @__PURE__ */ jsx("span", {
+			className: `btn-icon btn-icon-${iconPosition}`,
+			children: icon
+		});
+	};
+	return /* @__PURE__ */ jsxs(StyledButton, {
+		ref,
+		size,
+		variant,
+		shape,
+		loading,
+		disabled: disabled || loading,
+		block,
+		type,
+		...rest,
+		children: [
+			iconPosition === "left" && renderIcon(),
+			children,
+			iconPosition === "right" && renderIcon()
+		]
+	});
+});
+Button.displayName = "Button";
+
+//#endregion
+//#region src/Input/index.tsx
+const ThemeContext$1 = React.createContext("light");
+/**
+* 非受控组件将状态交给 DOM 自己管理
+*  - 子组件：通过 forwardRef 接收 ref，并将其附加到内部的 input 元素，通过 ref 调用 clear()、直接操作 DOM（不推荐）。
+* 
+* 受控组件将状态
+*  - 动态更新值，应采用受控模式（即使用 value 和 onChange）
+*/
+const Input = memo(forwardRef((props, ref) => {
+	const { name, placeholder, value, onChange, disabled, clearable, onClear, ...rest } = props;
+	const inputRef = useRef(null);
+	const theme = useContext(ThemeContext$1);
+	useImperativeHandle(ref, () => ({
+		focus: () => inputRef.current?.focus(),
+		blur: () => inputRef.current?.blur(),
+		clear: () => {
+			if (inputRef.current) {
+				inputRef.current.value = "";
+				if (onChange) {
+					const event = new Event("input", { bubbles: true });
+					Object.defineProperty(event, "target", { value: { value: "" } });
+					onChange(event);
+				}
+			}
+		},
+		getValue: () => inputRef.current?.value
+	}));
+	/**
+	* 清除逻辑同时兼容受控和非受控模式：受控时调用 onChange 更新父组件状态；非受控时直接修改 DOM。
+	* 通过 onClear 可额外执行清除后的操作
+	*/
+	const handleClear = () => {
+		if (onChange) {
+			const event = new Event("input", { bubbles: true });
+			Object.defineProperty(event, "target", {
+				writable: false,
+				value: { value: "" }
+			});
+			onChange(event);
+		} else if (inputRef.current) inputRef.current.value = "";
+		onClear?.();
+	};
+	/**
+	* 兼容 受控 和 非受控 两种状态
+	* 受控模式下，value 和 onChange 必须同时存在且正确传递。
+	* 非受控模式下，不要传 value，可以传 defaultValue。
+	*/
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			position: "relative",
+			display: "inline-block"
+		},
+		children: [/* @__PURE__ */ jsx("input", {
+			ref: inputRef,
+			name,
+			placeholder,
+			value,
+			onChange,
+			disabled,
+			className: `input-${theme}`,
+			style: { paddingRight: clearable ? "20px" : void 0 },
+			...rest
+		}), clearable && (value || inputRef.current?.value) && /* @__PURE__ */ jsx("span", {
+			role: "button",
+			"aria-label": "clear",
+			onClick: handleClear,
+			style: {
+				position: "absolute",
+				right: "5px",
+				top: "50%",
+				transform: "translateY(-50%)",
+				cursor: "pointer"
+			},
+			children: "✕"
+		})]
+	});
+}));
+
+//#endregion
+//#region src/SearchInput/style.ts
+const Container$1 = styled.div`position:relative; width:100%;`;
+const Input$1 = styled.input`
+  width:100%; padding:8px 12px; border:1px solid #d9d9d9; border-radius:4px; font-size:14px;
+  &:focus { outline:none; border-color:#1890ff; box-shadow:0 0 0 2px rgba(24,144,255,0.2); }
+  &:disabled { background:#f5f5f5; cursor:not-allowed; }
+`;
+const SuggestionsList = styled.ul`
+  position:absolute; top:100%; left:0; right:0; margin:4px 0 0; padding:4px 0;
+  list-style:none; background:white; border:1px solid #d9d9d9; border-radius:4px;
+  box-shadow:0 2px 8px rgba(0,0,0,0.15); z-index:1000; max-height:200px; overflow-y:auto;
+`;
+const SuggestionItem = styled.li`
+  padding:8px 12px; cursor:pointer; transition:background 0.2s;
+  &:hover { background:#f5f5f5; }
+  &.selected { background:#e6f7ff; }
+`;
+
+//#endregion
+//#region src/SearchInput/index.tsx
+const SearchInput = ({ debounceTime: debounceMs = 300, minSearchLength = 2, onSearch, searchResults$, showSuggestions = true, placeholder = "搜索...", ...rest }) => {
+	const [value, setValue] = useState("");
+	const [suggestions, setSuggestions] = useState([]);
+	const [showList, setShowList] = useState(false);
+	const [selectedIndex, setSelectedIndex] = useState(-1);
+	const inputRef = useRef(null);
+	const containerRef = useRef(null);
+	const input$ = useMemo(() => {
+		if (!inputRef.current) return null;
+		return fromEvent(inputRef.current, "input").pipe(map((e) => e.target.value), filter((v) => v.length >= minSearchLength || v.length === 0), debounceTime(debounceMs), distinctUntilChanged());
+	}, [debounceMs, minSearchLength]);
+	useEffect(() => {
+		if (!input$) return;
+		const subscription = input$.subscribe((value) => {
+			setValue(value);
+			onSearch?.(value);
+		});
+		return () => subscription.unsubscribe();
+	}, [input$, onSearch]);
+	useEffect(() => {
+		if (!searchResults$) {
+			setSuggestions([]);
+			return;
+		}
+		const subscription = searchResults$.subscribe((results) => {
+			setSuggestions(results);
+			if (results.length > 0) setShowList(true);
+		});
+		return () => subscription.unsubscribe();
+	}, [searchResults$]);
+	useEffect(() => {
+		if (searchResults$) return;
+		if (value.length >= minSearchLength) setSuggestions([`结果1: ${value}`, `结果2: ${value}`]);
+		else setSuggestions([]);
+	}, [
+		value,
+		minSearchLength,
+		searchResults$
+	]);
+	useEffect(() => {
+		const handleClickOutside = (event) => {
+			if (containerRef.current && !containerRef.current.contains(event.target)) setShowList(false);
+		};
+		document.addEventListener("mousedown", handleClickOutside);
+		return () => document.removeEventListener("mousedown", handleClickOutside);
+	}, []);
+	const handleKeyDown = (e) => {
+		switch (e.key) {
+			case "ArrowDown":
+				e.preventDefault();
+				setSelectedIndex((i) => Math.min(i + 1, suggestions.length - 1));
+				break;
+			case "ArrowUp":
+				e.preventDefault();
+				setSelectedIndex((i) => Math.max(i - 1, -1));
+				break;
+			case "Enter":
+				if (selectedIndex >= 0) {
+					const selected = suggestions[selectedIndex];
+					setValue(selected);
+					setShowList(false);
+					onSearch?.(selected);
+				}
+				break;
+			case "Escape":
+				setShowList(false);
+				break;
+		}
+	};
+	return /* @__PURE__ */ jsxs(Container$1, {
+		ref: containerRef,
+		children: [/* @__PURE__ */ jsx(Input$1, {
+			ref: inputRef,
+			value,
+			onChange: (e) => setValue(e.target.value),
+			onFocus: () => suggestions.length > 0 && setShowList(true),
+			onKeyDown: handleKeyDown,
+			placeholder,
+			...rest
+		}), showSuggestions && showList && suggestions.length > 0 && /* @__PURE__ */ jsx(SuggestionsList, { children: suggestions.map((s, i) => /* @__PURE__ */ jsx(SuggestionItem, {
+			className: i === selectedIndex ? "selected" : "",
+			onClick: () => {
+				setValue(s);
+				setShowList(false);
+				onSearch?.(s);
+			},
+			children: s
+		}, i)) })]
+	});
+};
+
+//#endregion
+//#region src/Card/style.ts
+const CardContainer = styled.div`
+  background: ${({ theme }) => theme.colors.background};
+  border-radius: ${({ theme }) => theme.borderRadius.md}px;
+  transition: all ${({ theme }) => theme.transitions.normal};
+  overflow: hidden;
+
+  /* 边框 */
+  ${({ bordered, theme }) => bordered && css`
+    border: 1px solid ${theme.colors.border};
+  `}
+
+  /* 阴影 */
+  ${({ shadow, theme }) => {
+	if (shadow === "always") return css`box-shadow: ${theme.shadows.md};`;
+	if (shadow === "hover") return css`
+        &:hover {
+          box-shadow: ${theme.shadows.md};
+        }
+      `;
+	if (shadow === true) return css`box-shadow: ${theme.shadows.sm};`;
+	return "";
+}}
+
+  /* 悬停效果 */
+  ${({ hoverable, theme }) => hoverable && css`
+    cursor: pointer;
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: ${theme.shadows.lg};
+    }
+  `}
+
+  /* 尺寸 */
+  ${({ size, theme }) => {
+	return css`
+      padding: ${{
+		small: theme.spacing.sm,
+		default: theme.spacing.md,
+		large: theme.spacing.lg
+	}[size || "default"]}px;
+    `;
+}}
+`;
+const CardHeader = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: ${({ theme }) => theme.spacing.sm}px;
+  
+  h3 {
+    margin: 0;
+    font-size: ${({ theme }) => theme.typography.fontSize.md}px;
+    font-weight: ${({ theme }) => theme.typography.fontWeight.medium};
+    color: ${({ theme }) => theme.colors.text.primary};
+  }
+`;
+const CardCover = styled.div`
+  margin: -${({ theme }) => theme.spacing.md}px -${({ theme }) => theme.spacing.md}px 
+          ${({ theme }) => theme.spacing.md}px -${({ theme }) => theme.spacing.md}px;
+  
+  img {
+    width: 100%;
+    height: auto;
+    display: block;
+  }
+`;
+const CardContent = styled.div`
+  color: ${({ theme }) => theme.colors.text.secondary};
+  font-size: ${({ theme }) => theme.typography.fontSize.sm}px;
+  line-height: 1.5;
+`;
+const CardActions = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  margin-top: ${({ theme }) => theme.spacing.md}px;
+  padding-top: ${({ theme }) => theme.spacing.sm}px;
+  border-top: 1px solid ${({ theme }) => theme.colors.border};
+`;
+const CardAction = styled.div`
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: ${({ theme }) => theme.spacing.xs}px;
+  transition: color ${({ theme }) => theme.transitions.fast};
+
+  &:hover {
+    color: ${({ theme }) => theme.colors.primary};
+  }
+`;
+const CardLoading = styled.div`
+  .loading-line {
+    height: 16px;
+    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+    background-size: 200% 100%;
+    animation: loading 1.5s infinite;
+    border-radius: ${({ theme }) => theme.borderRadius.sm}px;
+    margin-bottom: ${({ theme }) => theme.spacing.xs}px;
+
+    &:last-child {
+      width: 60%;
+    }
+  }
+
+  @keyframes loading {
+    0% { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+  }
+`;
+
+//#endregion
+//#region src/Card/index.tsx
+const Card = ({ title, extra, children, bordered = true, shadow = false, size = "default", hoverable = false, cover, actions, loading = false, onClick, className }) => {
+	const renderLoading = () => /* @__PURE__ */ jsxs(CardLoading, { children: [
+		/* @__PURE__ */ jsx("div", {
+			className: "loading-line",
+			style: { width: "40%" }
+		}),
+		/* @__PURE__ */ jsx("div", { className: "loading-line" }),
+		/* @__PURE__ */ jsx("div", { className: "loading-line" }),
+		/* @__PURE__ */ jsx("div", { className: "loading-line" })
+	] });
+	const renderActions = () => {
+		if (!actions?.length) return null;
+		return /* @__PURE__ */ jsx(CardActions, { children: actions.map((action, index) => /* @__PURE__ */ jsx(CardAction, { children: action }, index)) });
+	};
+	return /* @__PURE__ */ jsxs(CardContainer, {
+		bordered,
+		shadow,
+		size,
+		hoverable,
+		onClick,
+		className,
+		children: [
+			cover && /* @__PURE__ */ jsx(CardCover, { children: cover }),
+			(title || extra) && /* @__PURE__ */ jsxs(CardHeader, { children: [/* @__PURE__ */ jsx("h3", { children: title }), /* @__PURE__ */ jsx("div", { children: extra })] }),
+			/* @__PURE__ */ jsx(CardContent, { children: loading ? renderLoading() : children }),
+			renderActions()
+		]
+	});
+};
+
+//#endregion
+//#region src/VirtualList/index.tsx
+const Container = styled.div`
+  position: relative;
+  overflow-y: auto;
+  height: 100%;
+`;
+const Content = styled.div`
+  position: relative;
+  width: 100%;
+`;
+const Item = styled.div`
+  position: absolute;
+  top: ${({ top }) => top}px;
+  left: 0;
+  right: 0;
+  height: ${({ height }) => height}px;
+`;
+function VirtualList({ data, renderItem, itemHeight, height, overscan = 3, keyExtractor = (_, index) => index.toString() }) {
+	const [scrollTop, setScrollTop] = useState(0);
+	const containerRef = useRef(null);
+	useEffect(() => {
+		if (!containerRef.current) return;
+		const subscription = fromEvent(containerRef.current, "scroll").pipe(throttleTime(16)).subscribe(() => {
+			if (containerRef.current) setScrollTop(containerRef.current.scrollTop);
+		});
+		return () => subscription.unsubscribe();
+	}, []);
+	const totalHeight = data.length * itemHeight;
+	const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);
+	const endIndex = Math.min(data.length, Math.ceil((scrollTop + height) / itemHeight) + overscan);
+	const visibleData = data.slice(startIndex, endIndex);
+	useCallback((index) => ({
+		top: index * itemHeight,
+		height: itemHeight
+	}), [itemHeight]);
+	return /* @__PURE__ */ jsx(Container, {
+		ref: containerRef,
+		style: { height },
+		children: /* @__PURE__ */ jsx(Content, {
+			style: { height: totalHeight },
+			children: visibleData.map((item, index) => {
+				const actualIndex = startIndex + index;
+				return /* @__PURE__ */ jsx(Item, {
+					top: actualIndex * itemHeight,
+					height: itemHeight,
+					children: renderItem(item, actualIndex)
+				}, keyExtractor(item, actualIndex));
+			})
+		})
+	});
+}
+
+//#endregion
+//#region src/hooks/useDebounce.ts
+/**
+* 对传入的值进行防抖处理
+* @param value 需要防抖的值
+* @param delay 延迟时间（毫秒），默认 300ms
+* @returns 防抖后的值
+*/
+function useDebounce(value, delay = 300) {
+	const [debouncedValue, setDebouncedValue] = useState(value);
+	useEffect(() => {
+		const subject = new Subject();
+		const subscription = subject.pipe(debounceTime(delay), distinctUntilChanged()).subscribe(setDebouncedValue);
+		subject.next(value);
+		return () => {
+			subject.complete();
+			subscription.unsubscribe();
+		};
+	}, [value, delay]);
+	return debouncedValue;
+}
+
+//#endregion
+//#region src/hooks/useObservable.ts
+function useObservable(observable, initialValue) {
+	const [value, setValue] = useState(initialValue);
+	useEffect(() => {
+		const subscription = observable.subscribe(setValue);
+		return () => subscription.unsubscribe();
+	}, [observable]);
+	return value;
+}
+
+//#endregion
+//#region ../theme/src/tokens.ts
+const defaultTheme = {
+	colors: {
+		primary: "#1890ff",
+		secondary: "#f0f2f5",
+		success: "#52c41a",
+		warning: "#faad14",
+		error: "#f5222d",
+		info: "#1890ff",
+		background: "#ffffff",
+		text: {
+			primary: "#333333",
+			secondary: "#666666",
+			disabled: "#999999"
+		},
+		border: "#d9d9d9"
+	},
+	spacing: {
+		xs: 4,
+		sm: 8,
+		md: 16,
+		lg: 24,
+		xl: 32
+	},
+	typography: {
+		fontSize: {
+			xs: 12,
+			sm: 14,
+			md: 16,
+			lg: 18,
+			xl: 20
+		},
+		fontWeight: {
+			normal: 400,
+			medium: 500,
+			bold: 600
+		}
+	},
+	borderRadius: {
+		xs: 2,
+		sm: 4,
+		md: 6,
+		lg: 8,
+		xl: 12,
+		round: "50%"
+	},
+	shadows: {
+		sm: "0 2px 4px rgba(0, 0, 0, 0.1)",
+		md: "0 4px 8px rgba(0, 0, 0, 0.15)",
+		lg: "0 8px 16px rgba(0, 0, 0, 0.2)"
+	},
+	transitions: {
+		fast: "0.1s ease",
+		normal: "0.2s ease",
+		slow: "0.3s ease"
+	}
+};
+
+//#endregion
+//#region ../theme/src/index.tsx
+function deepMerge(target, source) {
+	const output = { ...target };
+	if (isObject(target) && isObject(source)) Object.keys(source).forEach((key) => {
+		const k = key;
+		if (isObject(source[k])) if (!(k in target)) output[k] = source[k];
+		else output[k] = deepMerge(target[k], source[k]);
+		else output[k] = source[k];
+	});
+	return output;
+}
+function isObject(item) {
+	return item && typeof item === "object" && !Array.isArray(item);
+}
+const ThemeContext = createContext(defaultTheme);
+const useTheme = () => {
+	const theme = useContext(ThemeContext);
+	if (!theme) throw new Error("useTheme must be used within a ThemeProvider");
+	return theme;
+};
+const ThemeProvider = ({ theme = {}, children }) => {
+	const mergedTheme = useMemo(() => deepMerge(defaultTheme, theme), [theme]);
+	return /* @__PURE__ */ jsx(ThemeContext.Provider, {
+		value: mergedTheme,
+		children: /* @__PURE__ */ jsx(ThemeProvider$1, {
+			theme: mergedTheme,
+			children
+		})
+	});
+};
+
+//#endregion
+export { Button, Card, Input, SearchInput, ThemeProvider, VirtualList, useDebounce, useObservable, useTheme };

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@react-component-library-nlxx/components",
+  "version": "1.0.1",
+  "description": "A React component library",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build:components": "tsdown"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "rxjs": ">=7",
+    "styled-components": ">=6"
+  },
+  "private": false,
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://gitee.com/li-jun-xun/react-component-library.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "react",
+    "components",
+    "ui"
+  ],
+  "dependencies": {
+    "@react-component-library/theme": "workspace:*",
+    "react-hook-form": "^7.71.2"
+  },
+  "devDependencies": {
+    "tsdown": "^0.20.3"
+  }
+}