@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.
Files changed (2) hide show
  1. package/README.md +6 -84
  2. package/package.json +17 -3
package/README.md CHANGED
@@ -1,6 +1,8 @@
1
1
  # @gateweb/react-utils
2
2
 
3
- **`@gateweb/react-utils`** is a comprehensive, TypeScript-first utility library designed to streamline development in React projects at GateWeb. It provides a collection of robust, well-tested, and reusable functions and hooks, covering everything from date manipulation and type conversion to custom hooks and web APIs.
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
  [![npm version](https://img.shields.io/npm/v/@gateweb/react-utils.svg)](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
- ## 🚀 Usage
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
- const size = bytesToSize(1024 * 1024 * 5); // 5MB
102
- console.log(size); // "5 MB"
37
+ bytesToSize(1024);
103
38
  ```
104
39
 
105
- ### Web APIs
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.0",
3
+ "version": "2.4.0",
4
4
  "description": "React Utils for GateWeb",
5
- "homepage": "https://github.com/GatewebSolutions/react-utils",
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
  }