@gateweb/react-utils 2.3.0 → 2.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +6 -84
- package/package.json +17 -3
package/README.md
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
# @gateweb/react-utils
|
|
2
2
|
|
|
3
|
-
**`@gateweb/react-utils`**
|
|
3
|
+
**`@gateweb/react-utils`** 是 GateWeb 的 TypeScript-first utility library，包含常用的 functions / hooks / types（日期、格式化、轉換、驗證、web、React hooks 等），並且有測試與自動化文件。
|
|
4
|
+
|
|
5
|
+
> This repo also provides a docs site + auto-generated API reference.
|
|
4
6
|
|
|
5
7
|
[](https://www.npmjs.com/package/@gateweb/react-utils)
|
|
6
8
|
|
|
@@ -27,95 +29,15 @@ npm install @gateweb/react-utils
|
|
|
27
29
|
yarn add @gateweb/react-utils
|
|
28
30
|
```
|
|
29
31
|
|
|
30
|
-
## 🚀
|
|
31
|
-
|
|
32
|
-
Here are some examples of the most common utilities.
|
|
33
|
-
|
|
34
|
-
### React Hooks
|
|
35
|
-
|
|
36
|
-
#### `useCountdown`
|
|
37
|
-
|
|
38
|
-
A hook to manage a countdown timer.
|
|
39
|
-
|
|
40
|
-
```tsx
|
|
41
|
-
import { useCountdown } from '@gateweb/react-utils';
|
|
42
|
-
|
|
43
|
-
function MyComponent() {
|
|
44
|
-
const { count, start, stop, reset } = useCountdown({ initialValue: 60 });
|
|
45
|
-
|
|
46
|
-
return (
|
|
47
|
-
<div>
|
|
48
|
-
<p>Countdown: {count}</p>
|
|
49
|
-
<button onClick={start}>Start</button>
|
|
50
|
-
<button onClick={stop}>Stop</button>
|
|
51
|
-
<button onClick={reset}>Reset</button>
|
|
52
|
-
</div>
|
|
53
|
-
);
|
|
54
|
-
}
|
|
55
|
-
```
|
|
56
|
-
|
|
57
|
-
### Date Utilities
|
|
58
|
-
|
|
59
|
-
#### `formatDate`
|
|
60
|
-
|
|
61
|
-
Format a date object or string into a custom format.
|
|
62
|
-
|
|
63
|
-
```ts
|
|
64
|
-
import { formatDate } from '@gateweb/react-utils';
|
|
65
|
-
|
|
66
|
-
const formattedDate = formatDate(new Date(), 'YYYY-MM-DD');
|
|
67
|
-
console.log(formattedDate); // e.g., "2023-10-27"
|
|
68
|
-
```
|
|
69
|
-
|
|
70
|
-
#### `getPeriod`
|
|
71
|
-
|
|
72
|
-
Get a predefined date period, like "last 7 days".
|
|
73
|
-
|
|
74
|
-
```ts
|
|
75
|
-
import { getPeriod } from '@gateweb/react-utils';
|
|
76
|
-
|
|
77
|
-
const last7Days = getPeriod('last_7_days');
|
|
78
|
-
console.log(last7Days); // { startDate: Dayjs, endDate: Dayjs }
|
|
79
|
-
```
|
|
80
|
-
|
|
81
|
-
### Core Utilities
|
|
82
|
-
|
|
83
|
-
#### `toCamelCase`
|
|
84
|
-
|
|
85
|
-
Convert a string from snake_case or kebab-case to camelCase.
|
|
86
|
-
|
|
87
|
-
```ts
|
|
88
|
-
import { toCamelCase } from '@gateweb/react-utils';
|
|
89
|
-
|
|
90
|
-
const camel = toCamelCase('hello_world-example');
|
|
91
|
-
console.log(camel); // "helloWorldExample"
|
|
92
|
-
```
|
|
93
|
-
|
|
94
|
-
#### `bytesToSize`
|
|
95
|
-
|
|
96
|
-
Convert bytes to a human-readable format (KB, MB, GB).
|
|
32
|
+
## 🚀 快速開始（Quick Start）
|
|
97
33
|
|
|
98
34
|
```ts
|
|
99
35
|
import { bytesToSize } from '@gateweb/react-utils';
|
|
100
36
|
|
|
101
|
-
|
|
102
|
-
console.log(size); // "5 MB"
|
|
37
|
+
bytesToSize(1024);
|
|
103
38
|
```
|
|
104
39
|
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
#### `download`
|
|
108
|
-
|
|
109
|
-
A simple utility to trigger a file download in the browser.
|
|
110
|
-
|
|
111
|
-
```ts
|
|
112
|
-
import { download } from '@gateweb/react-utils';
|
|
113
|
-
|
|
114
|
-
function handleDownload() {
|
|
115
|
-
const blob = new Blob(['Hello, world!'], { type: 'text/plain' });
|
|
116
|
-
download(blob, 'hello.txt');
|
|
117
|
-
}
|
|
118
|
-
```
|
|
40
|
+
更多範例與用法請看 [react-utils docs](https://crispy-dollop-o765k9n.pages.github.io/)
|
|
119
41
|
|
|
120
42
|
## 🤝 Contributing
|
|
121
43
|
|
package/package.json
CHANGED
|
@@ -1,8 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gateweb/react-utils",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.4.0",
|
|
4
4
|
"description": "React Utils for GateWeb",
|
|
5
|
-
"homepage": "https://github.com/
|
|
5
|
+
"homepage": "https://github.com/GW-VAT-BPSP-Team/react-utils",
|
|
6
|
+
"repository": {
|
|
7
|
+
"type": "git",
|
|
8
|
+
"url": "git+https://github.com/GW-VAT-BPSP-Team/react-utils.git"
|
|
9
|
+
},
|
|
6
10
|
"files": [
|
|
7
11
|
"dist"
|
|
8
12
|
],
|
|
@@ -69,9 +73,12 @@
|
|
|
69
73
|
"jest-environment-jsdom": "^30.0.5",
|
|
70
74
|
"lint-staged": "^16.1.2",
|
|
71
75
|
"prettier": "^3.6.2",
|
|
76
|
+
"typedoc": "^0.28.0",
|
|
77
|
+
"typedoc-plugin-markdown": "^4.8.0",
|
|
72
78
|
"ts-jest": "^29.4.0",
|
|
73
79
|
"ts-node": "^10.9.2",
|
|
74
80
|
"typescript": "^5.8.3",
|
|
81
|
+
"vitepress": "^1.6.3",
|
|
75
82
|
"vitest": "^3.2.4"
|
|
76
83
|
},
|
|
77
84
|
"commitlint": {
|
|
@@ -86,6 +93,13 @@
|
|
|
86
93
|
"test:coverage": "vitest run --coverage",
|
|
87
94
|
"test:ui": "vitest --ui --coverage.enabled=true",
|
|
88
95
|
"build": "bunchee",
|
|
89
|
-
"build:prepare": "bunchee --prepare"
|
|
96
|
+
"build:prepare": "bunchee --prepare",
|
|
97
|
+
"api-docs:main": "typedoc --options typedoc.base.json --out docs/api/main src/index.ts && node scripts/generate-api-file-pages.js main",
|
|
98
|
+
"api-docs:client": "typedoc --options typedoc.base.json --out docs/api/client src/client.ts && node scripts/generate-api-file-pages.js client",
|
|
99
|
+
"api-docs:types": "typedoc --options typedoc.base.json --out docs/api/types src/types/index.ts && node scripts/generate-api-file-pages.js types",
|
|
100
|
+
"api-docs:build": "pnpm api-docs:main && pnpm api-docs:client && pnpm api-docs:types",
|
|
101
|
+
"docs:dev": "pnpm api-docs:build && vitepress dev docs",
|
|
102
|
+
"docs:build": "pnpm api-docs:build && vitepress build docs",
|
|
103
|
+
"docs:preview": "vitepress preview docs"
|
|
90
104
|
}
|
|
91
105
|
}
|