@xiping/react-components 0.0.48

package/README.md

@@ -0,0 +1,3 @@
+# 
+
+based tailwindcss v3

package/dist/App.d.ts

@@ -0,0 +1,3 @@
+import "./App.css";
+declare function App(): import("react/jsx-runtime").JSX.Element;
+export default App;

package/dist/App.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { HashRouter, Route, Routes } from "react-router-dom";
+import Home from "@/pages/home/Home";
+import "./App.css";
+function App() {
+    return (_jsx(_Fragment, { children: _jsx(HashRouter, { children: _jsx(Routes, { children: _jsx(Route, { path: "/", element: _jsx(Home, {}) }) }) }) }));
+}
+export default App;

package/dist/components/button/Button.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode, ButtonHTMLAttributes } from "react";
+export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost';
+export type ButtonSize = 'small' | 'medium' | 'large';
+export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'disabled'> {
+    /** Button variant that changes the visual style */
+    variant?: ButtonVariant;
+    /** Size of the button */
+    size?: ButtonSize;
+    /** Custom class name */
+    className?: string;
+    /** Button contents */
+    children: ReactNode;
+    /** Optional icon to show before the button text */
+    leftIcon?: ReactNode;
+    /** Optional icon to show after the button text */
+    rightIcon?: ReactNode;
+    /** Whether the button is in loading state */
+    isLoading?: boolean;
+    /** Whether the button is disabled */
+    isDisabled?: boolean;
+    /** Full width button */
+    fullWidth?: boolean;
+}
+export declare const Button: ({ variant, size, className, children, leftIcon, rightIcon, isLoading, isDisabled, fullWidth, type, ...rest }: ButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/button/Button.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+export const Button = ({ variant = 'primary', size = 'medium', className, children, leftIcon, rightIcon, isLoading = false, isDisabled = false, fullWidth = false, type = 'button', ...rest }) => {
+    const baseStyles = "inline-flex items-center justify-center rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2";
+    const variantStyles = {
+        primary: "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500",
+        secondary: "bg-gray-600 text-white hover:bg-gray-700 focus:ring-gray-500",
+        outline: "border border-gray-300 bg-transparent hover:bg-gray-50 focus:ring-gray-500",
+        ghost: "bg-transparent hover:bg-gray-100 focus:ring-gray-500"
+    };
+    const sizeStyles = {
+        small: "px-3 py-1.5 text-sm",
+        medium: "px-4 py-2 text-base",
+        large: "px-6 py-3 text-lg"
+    };
+    const classes = clsx(baseStyles, variantStyles[variant], sizeStyles[size], {
+        'opacity-50 cursor-not-allowed': isDisabled,
+        'w-full': fullWidth,
+        'cursor-wait': isLoading
+    }, className);
+    return (_jsxs("button", { type: type, className: classes, disabled: isDisabled || isLoading, ...rest, children: [isLoading && (_jsxs("svg", { className: "animate-spin -ml-1 mr-2 h-4 w-4", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [_jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _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" })] })), !isLoading && leftIcon && _jsx("span", { className: "mr-2", children: leftIcon }), children, !isLoading && rightIcon && _jsx("span", { className: "ml-2", children: rightIcon })] }));
+};

package/dist/components/txt-reader/TxtReader.d.ts

@@ -0,0 +1,14 @@
+import { CSSProperties, FC } from "react";
+interface TxtReaderProps {
+    content: string;
+    lineHeight?: number;
+    fontSize?: number;
+    fontWeight?: number | string;
+    className?: string;
+    style?: CSSProperties;
+    onProgressChange?: (progress: number) => void;
+    initialScrollPosition?: number;
+    cacheKey?: string;
+}
+export declare const TxtReader: FC<TxtReaderProps>;
+export default TxtReader;

package/dist/components/txt-reader/TxtReader.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState, useCallback, } from "react";
+import { debounce } from "lodash-es";
+import clsx from "clsx";
+const DEFAULT_FONT_SIZE = 16;
+const DEFAULT_LINE_HEIGHT = 1.5;
+const DEFAULT_FONT_WEIGHT = "normal";
+export const TxtReader = ({ content, lineHeight = DEFAULT_LINE_HEIGHT, fontSize = DEFAULT_FONT_SIZE, fontWeight = DEFAULT_FONT_WEIGHT, className = "", style = {}, onProgressChange, initialScrollPosition, cacheKey, }) => {
+    const containerRef = useRef(null);
+    const [readingProgress, setReadingProgress] = useState(0);
+    // 计算阅读进度
+    const calculateProgress = useCallback(() => {
+        if (!containerRef.current)
+            return;
+        const container = containerRef.current;
+        const scrollTop = container.scrollTop;
+        const scrollHeight = container.scrollHeight;
+        const clientHeight = container.clientHeight;
+        const progress = Math.min(Math.round((scrollTop / (scrollHeight - clientHeight)) * 100), 100);
+        setReadingProgress(progress);
+        onProgressChange?.(progress);
+        // 保存阅读位置到 localStorage
+        if (cacheKey) {
+            localStorage.setItem(`txtReader-${cacheKey}`, scrollTop.toString());
+        }
+    }, [cacheKey, onProgressChange]);
+    // 使用 debounce 优化滚动事件处理
+    const debouncedCalculateProgress = useCallback(debounce(calculateProgress, 100), [calculateProgress]);
+    // 初始化滚动位置
+    useEffect(() => {
+        if (!containerRef.current)
+            return;
+        let scrollPosition = initialScrollPosition;
+        // 如果有缓存key，尝试从localStorage获取保存的位置
+        if (cacheKey) {
+            const savedPosition = localStorage.getItem(`txtReader-${cacheKey}`);
+            if (savedPosition) {
+                scrollPosition = parseInt(savedPosition, 10);
+            }
+        }
+        if (scrollPosition) {
+            containerRef.current.scrollTop = scrollPosition;
+            calculateProgress();
+        }
+    }, [cacheKey, initialScrollPosition, calculateProgress]);
+    // 监听滚动事件
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        container.addEventListener("scroll", debouncedCalculateProgress);
+        return () => {
+            container.removeEventListener("scroll", debouncedCalculateProgress);
+        };
+    }, [debouncedCalculateProgress]);
+    return (_jsxs("div", { className: "relative w-full h-full", children: [_jsx("div", { ref: containerRef, className: clsx("w-full overflow-auto whitespace-pre-wrap break-words", className), style: {
+                    fontSize: `${fontSize}px`,
+                    lineHeight: lineHeight,
+                    fontWeight: fontWeight,
+                    ...style,
+                }, children: content }), _jsxs("div", { className: "fixed text-white rounded text-sm bg-black bg-opacity-70 pl-2 pr-2 pb-1 pt-1 right-5 bottom-5", children: [readingProgress, "%"] })] }));
+};
+export default TxtReader;

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+import "./index.css";
+export * from "./components/button/Button";
+export * from "./components/txt-reader/TxtReader";

package/dist/index.js

@@ -0,0 +1,3 @@
+import "./index.css";
+export * from "./components/button/Button";
+export * from "./components/txt-reader/TxtReader";

package/dist/main.d.ts

@@ -0,0 +1 @@
+import "./index.css";

package/dist/main.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./App";
+const root = createRoot(document.getElementById("root"));
+root.render(
+// <StrictMode>
+_jsx(App, {}));

package/dist/pages/home/Home.d.ts

@@ -0,0 +1,2 @@
+declare const Home: () => import("react/jsx-runtime").JSX.Element;
+export default Home;

package/dist/pages/home/Home.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const Home = () => {
+    return _jsx("div", { children: "home" });
+};
+export default Home;

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "@xiping/react-components",
+  "private": false,
+  "version": "0.0.48",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -p tsconfig.build.json",
+    "lint": "eslint ",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "peerDependencies": {
+    "react": ">=18 || >= 19",
+    "react-dom": ">=18 || >= 19"
+  },
+  "dependencies": {
+    "ahooks": "^3.8.4",
+    "axios": "^1.7.9",
+    "clsx": "^2.1.1",
+    "dayjs": "^1.11.13",
+    "lodash-es": "^4.17.21",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-icons": "^5.4.0",
+    "react-router-dom": "^7.1.1",
+    "zustand": "^5.0.2"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.3",
+    "@eslint/js": "^9.17.0",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/addon-onboarding": "^8.4.7",
+    "@storybook/blocks": "^8.4.7",
+    "@storybook/react": "^8.4.7",
+    "@storybook/react-vite": "^8.4.7",
+    "@storybook/test": "^8.4.7",
+    "@types/lodash-es": "^4.17.12",
+    "@types/node": "^22.10.2",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^9.17.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.16",
+    "eslint-plugin-storybook": "^0.11.1",
+    "globals": "^15.14.0",
+    "postcss": "^8.4.49",
+    "prettier": "^3.4.2",
+    "sharp": "^0.33.5",
+    "storybook": "^8.4.7",
+    "svgo": "^3.3.2",
+    "tailwindcss": "^3.4.17",
+    "typescript": "~5.6.3",
+    "typescript-eslint": "^8.18.2",
+    "vite": "^6.0.5",
+    "vite-plugin-dts": "^4.4.0",
+    "vite-plugin-image-optimizer": "^1.1.8",
+    "vite-plugin-zip-pack": "^1.2.4",
+    "vite-tsconfig-paths": "^5.1.4"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "gitHead": "e7e62ae67bb40b5f3d4349e07b19caec17faeff9"
+}