publish 0.0.1

Author: coderlzw-cn

.github/workflows/npm-publish.yml

@@ -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 }}

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.npmrc

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

.prettierrc

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

README.md

@@ -0,0 +1,105 @@
+# React Number Animation
+
+一个用于数字动画过渡的 React 组件库，提供了两种组件：`AnimatedNumber` 和 `Statistic`。
+
+## 安装
+
+```bash
+npm install react-number-animation
+# 或
+yarn add react-number-animation
+```
+
+## 使用方法
+
+### AnimatedNumber
+
+一个简单的数字动画组件，支持数字的上下滑动过渡效果。
+
+```tsx
+import { AnimatedNumber } from 'react-number-animation';
+
+function App() {
+    const [value, setValue] = useState(0);
+
+    return (
+        <div>
+            <AnimatedNumber value={value} className="text-4xl" />
+            <button onClick={() => setValue((v) => v + 1)}>增加</button>
+            <button onClick={() => setValue((v) => v - 1)}>减少</button>
+        </div>
+    );
+}
+```
+
+### Statistic
+
+一个统计数字组件，支持数字的平滑过渡动画，以及格式化选项。
+
+```tsx
+import { Statistic } from 'react-number-animation';
+
+function App() {
+    return (
+        <div>
+            {/* 基础用法 */}
+            <Statistic value={14.56} title="销售额" prefix="¥" />
+
+            {/* 带小数点的用法 */}
+            <Statistic value={1234.56} decimals={2} title="增长率" suffix="%" />
+
+            {/* 自定义格式化 */}
+            <Statistic
+                value={1234567}
+                separator=" " // 使用空格作为千位分隔符
+                title="访问量"
+                suffix="次"
+            />
+
+            {/* 不使用分组 */}
+            <Statistic value={123} useGrouping={false} title="ID" />
+        </div>
+    );
+}
+```
+
+## Props
+
+### AnimatedNumber
+
+| 属性名    | 类型   | 默认值 | 说明         |
+| --------- | ------ | ------ | ------------ |
+| value     | number | -      | 要显示的数字 |
+| className | string | ""     | 自定义类名   |
+
+### Statistic
+
+| 属性名      | 类型      | 默认值 | 说明                 |
+| ----------- | --------- | ------ | -------------------- |
+| value       | number    | -      | 要显示的数字         |
+| title       | ReactNode | -      | 标题                 |
+| prefix      | ReactNode | -      | 前缀                 |
+| suffix      | ReactNode | -      | 后缀                 |
+| className   | string    | ""     | 自定义类名           |
+| duration    | number    | 2000   | 动画持续时间（毫秒） |
+| decimals    | number    | 0      | 小数位数             |
+| separator   | string    | ","    | 千位分隔符           |
+| decimal     | string    | "."    | 小数点符号           |
+| useGrouping | boolean   | true   | 是否使用千位分组     |
+
+## 开发
+
+```bash
+# 安装依赖
+npm install
+
+# 构建
+npm run build
+
+# 测试
+npm test
+```
+
+## License
+
+MIT

eslint.config.js

@@ -0,0 +1,28 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
+
+import eslintConfigPrettier from 'eslint-config-prettier/flat';
+
+export default tseslint.config(
+    { ignores: ['dist'] },
+    {
+        extends: [js.configs.recommended, ...tseslint.configs.recommended],
+        files: ['**/*.{ts,tsx}'],
+        languageOptions: {
+            ecmaVersion: 2020,
+            globals: globals.browser,
+        },
+        plugins: {
+            'react-hooks': reactHooks,
+            'react-refresh': reactRefresh,
+        },
+        rules: {
+            ...reactHooks.configs.recommended.rules,
+            'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+        },
+    },
+    eslintConfigPrettier,
+);

package.json

@@ -0,0 +1,68 @@
+{
+    "name": "@coderlzw/react-number-animation",
+    "version": "0.0.1",
+    "description": "A React component for animated number transitions with smooth animations and customizable options",
+    "type": "module",
+    "main": "./dist/index.js",
+    "module": "./dist/index.mjs",
+    "types": "./dist/index.d.ts",
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.mjs",
+            "require": "./dist/index.js"
+        }
+    },
+    "files": [
+        "dist"
+    ],
+    "publishConfig": {
+        "access": "public"
+    },
+    "scripts": {
+        "build": "tsup",
+        "dev": "tsup --watch",
+        "lint": "eslint --fix src/**/*.ts",
+        "lint:check": "eslint src/**/*.ts",
+        "format": "prettier --write src/**/*.ts",
+        "format:check": "prettier --check src/**/*.ts"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/coderlzw/react-number-animation"
+    },
+    "bugs": {
+        "url": "https://github.com/coderlzw/react-number-animation/issues"
+    },
+    "homepage": "https://github.com/coderlzw/react-number-animation#readme",
+    "keywords": [
+        "react",
+        "animation",
+        "number",
+        "statistic",
+        "transition"
+    ],
+    "author": "coderlzw",
+    "license": "MIT",
+    "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+    },
+    "dependencies": {
+        "motion": "^12.12.1"
+    },
+    "devDependencies": {
+        "@eslint/js": "^9.25.0",
+        "@types/react": "^18.0.0",
+        "@types/react-dom": "^18.0.0",
+        "eslint": "^9.25.0",
+        "eslint-config-prettier": "^10.1.5",
+        "eslint-plugin-react-hooks": "^5.2.0",
+        "eslint-plugin-react-refresh": "^0.4.19",
+        "globals": "^16.1.0",
+        "prettier": "3.5.3",
+        "tsup": "^8.5.0",
+        "typescript": "^5.0.0",
+        "typescript-eslint": "^8.32.1"
+    }
+}