reykit 1.0.246 → 1.0.248
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 +407 -3
- package/dist/index.js +3 -3
- package/dist/src/component/index.d.ts +1 -1
- package/dist/src/index.d.ts +1 -1
- package/dist/src/lib/base.d.ts +1 -1
- package/dist/src/lib/captcha/index.d.ts +1 -1
- package/dist/src/lib/data.d.ts +1 -1
- package/dist/src/lib/image.d.ts +1 -1
- package/dist/src/lib/index.d.ts +6 -0
- package/dist/src/lib/net.d.ts +1 -1
- package/dist/src/lib/rand.d.ts +1 -1
- package/dist/src/lib/re.d.ts +1 -1
- package/dist/src/lib/react.d.ts +4 -3
- package/dist/src/lib/text.d.ts +1 -1
- package/dist/src/lib/time.d.ts +1 -1
- package/package.json +14 -4
package/README.md
CHANGED
|
@@ -1,10 +1,414 @@
|
|
|
1
|
+
[中文](README_zh.md)
|
|
1
2
|
|
|
2
3
|
# reykit
|
|
3
4
|
|
|
4
|
-
|
|
5
|
+
**reykit** is a general-purpose JavaScript utility method package.
|
|
5
6
|
|
|
6
|
-
|
|
7
|
+
It provides integrated components, low-level UI components, CSS styles, and various utility functions, covering common functionality for UI, React, networking, images, random values, regular expressions, text, time, browsers, and more.
|
|
7
8
|
|
|
8
|
-
|
|
9
|
+
It also provides **shadcn**-based UI components and integrated components for rapidly building Web applications with consistent styles and interaction logic.
|
|
10
|
+
|
|
11
|
+
## Features
|
|
12
|
+
|
|
13
|
+
* General-purpose JavaScript utility method set
|
|
14
|
+
* Provides low-level UI components based on shadcn
|
|
15
|
+
* Provides integrated components with responsive desktop and mobile styles
|
|
16
|
+
* Provides unified CSS base styles
|
|
17
|
+
* Provides Debug styles
|
|
18
|
+
* Provides graphical CAPTCHA functionality
|
|
19
|
+
* Provides JavaScript data processing utilities
|
|
20
|
+
* Provides image and QR code processing utilities
|
|
21
|
+
* Provides HTTP network request utilities
|
|
22
|
+
* Provides random value generation utilities
|
|
23
|
+
* Provides commonly used regular expressions
|
|
24
|
+
* Provides React-related utilities and Hooks
|
|
25
|
+
* Provides text processing utilities
|
|
26
|
+
* Provides time processing utilities
|
|
27
|
+
* Provides Tailwind CSS utilities
|
|
28
|
+
* Provides browser and local storage utilities
|
|
29
|
+
* Supports unified access to the entire toolkit through the default export
|
|
30
|
+
|
|
31
|
+
---
|
|
32
|
+
|
|
33
|
+
## Installation
|
|
34
|
+
|
|
35
|
+
Requires a JavaScript environment that supports ES Modules.
|
|
36
|
+
|
|
37
|
+
```bash
|
|
9
38
|
npm install reykit
|
|
10
39
|
```
|
|
40
|
+
|
|
41
|
+
---
|
|
42
|
+
|
|
43
|
+
## Quick Start
|
|
44
|
+
|
|
45
|
+
The most basic usage:
|
|
46
|
+
|
|
47
|
+
```javascript
|
|
48
|
+
import kit from 'reykit'
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
The default export provides unified access to the various modules provided by reykit.
|
|
52
|
+
|
|
53
|
+
For example:
|
|
54
|
+
|
|
55
|
+
```javascript
|
|
56
|
+
kit.ui
|
|
57
|
+
|
|
58
|
+
kit.component
|
|
59
|
+
|
|
60
|
+
kit.data
|
|
61
|
+
|
|
62
|
+
kit.net
|
|
63
|
+
|
|
64
|
+
kit.react
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
---
|
|
68
|
+
|
|
69
|
+
# Styles
|
|
70
|
+
|
|
71
|
+
reykit provides default component styles based on **shadcn**.
|
|
72
|
+
|
|
73
|
+
The styles can be imported as follows:
|
|
74
|
+
|
|
75
|
+
```css
|
|
76
|
+
@import "reykit/base";
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
Default style configuration:
|
|
80
|
+
|
|
81
|
+
| Configuration | Type |
|
|
82
|
+
| ------------- | --------- |
|
|
83
|
+
| Style | `Vega` |
|
|
84
|
+
| Font | `Inter` |
|
|
85
|
+
| Base color | `Zinc` |
|
|
86
|
+
| Menu color | `Default` |
|
|
87
|
+
| Menu accent | `Bold` |
|
|
88
|
+
|
|
89
|
+
---
|
|
90
|
+
|
|
91
|
+
## `base` — Base styles
|
|
92
|
+
|
|
93
|
+
**Base styles.**
|
|
94
|
+
|
|
95
|
+
Provides the default CSS styles used by reykit components, based on **shadcn**.
|
|
96
|
+
|
|
97
|
+
It is mainly used to provide consistent basic visual styles and interaction behavior for components.
|
|
98
|
+
|
|
99
|
+
---
|
|
100
|
+
|
|
101
|
+
## `debug` — Debug styles
|
|
102
|
+
|
|
103
|
+
**Debug styles.**
|
|
104
|
+
|
|
105
|
+
The styles can be imported as follows:
|
|
106
|
+
|
|
107
|
+
```css
|
|
108
|
+
@import "reykit/debug";
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
Used for page debugging in Debug mode.
|
|
112
|
+
|
|
113
|
+
Debug mode displays outlines around all elements, making it easier to inspect element dimensions, layouts, and hierarchy.
|
|
114
|
+
|
|
115
|
+
Debug mode can be activated by adding the `debug` attribute to the `html` element:
|
|
116
|
+
|
|
117
|
+
```html
|
|
118
|
+
<html debug>
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
---
|
|
122
|
+
|
|
123
|
+
# Modules
|
|
124
|
+
|
|
125
|
+
reykit is divided into multiple modules by functionality. Each module provides different UI, component, and utility functions.
|
|
126
|
+
|
|
127
|
+
## `kit.ui` — UI components
|
|
128
|
+
|
|
129
|
+
**Low-level UI component module.**
|
|
130
|
+
|
|
131
|
+
Provides various low-level UI components based on **shadcn**.
|
|
132
|
+
|
|
133
|
+
It is mainly used to build basic page UI and provides a unified UI foundation for higher-level integrated components.
|
|
134
|
+
|
|
135
|
+
---
|
|
136
|
+
|
|
137
|
+
## `kit.component` — Integrated components
|
|
138
|
+
|
|
139
|
+
**Integrated component module.**
|
|
140
|
+
|
|
141
|
+
Provides encapsulated comprehensive UI components with responsive designs for desktop and mobile devices.
|
|
142
|
+
|
|
143
|
+
Main components include:
|
|
144
|
+
|
|
145
|
+
* `Table`: Table component
|
|
146
|
+
|
|
147
|
+
* Automatic pagination
|
|
148
|
+
* Page navigation
|
|
149
|
+
* Rows per page
|
|
150
|
+
* Data value formatting
|
|
151
|
+
* Field sorting
|
|
152
|
+
* Data grouping
|
|
153
|
+
* Multiple selection
|
|
154
|
+
* Option buttons
|
|
155
|
+
|
|
156
|
+
* `Notice`: Banner notification component
|
|
157
|
+
|
|
158
|
+
* Provides global banner notifications
|
|
159
|
+
* Provides message trigger functions
|
|
160
|
+
|
|
161
|
+
* `CarouselMedia`: Carousel media component
|
|
162
|
+
|
|
163
|
+
* Supports image playback
|
|
164
|
+
* Supports video playback
|
|
165
|
+
* Supports button-based scrolling
|
|
166
|
+
* Supports drag scrolling
|
|
167
|
+
|
|
168
|
+
* `Form`: Form component
|
|
169
|
+
|
|
170
|
+
* Intercepts default page navigation
|
|
171
|
+
* Provides form handling functions
|
|
172
|
+
|
|
173
|
+
* `MarkdownText`: Markdown text component
|
|
174
|
+
|
|
175
|
+
* Supports GitHub-style Markdown syntax
|
|
176
|
+
* Provides unified Markdown text styles
|
|
177
|
+
|
|
178
|
+
---
|
|
179
|
+
|
|
180
|
+
## `kit.captcha` — Captcha methods
|
|
181
|
+
|
|
182
|
+
**Graphical CAPTCHA module.**
|
|
183
|
+
|
|
184
|
+
Provides graphical CAPTCHA functionality based on **Alibaba Cloud** services.
|
|
185
|
+
|
|
186
|
+
It is mainly used for scenarios that require human verification.
|
|
187
|
+
|
|
188
|
+
---
|
|
189
|
+
|
|
190
|
+
## `kit.base` — Base methods
|
|
191
|
+
|
|
192
|
+
**Base methods module.**
|
|
193
|
+
|
|
194
|
+
Provides basic methods and common functionality required by other modules.
|
|
195
|
+
|
|
196
|
+
It is mainly used to provide common dependencies and basic processing capabilities for other modules.
|
|
197
|
+
|
|
198
|
+
---
|
|
199
|
+
|
|
200
|
+
## `kit.data` — Data methods
|
|
201
|
+
|
|
202
|
+
**Data processing module.**
|
|
203
|
+
|
|
204
|
+
Provides methods for processing JavaScript primitive data types.
|
|
205
|
+
|
|
206
|
+
Main functions include:
|
|
207
|
+
|
|
208
|
+
* Value comparison
|
|
209
|
+
* Array sorting
|
|
210
|
+
* Array deduplication
|
|
211
|
+
* Array counting
|
|
212
|
+
* Other data processing methods
|
|
213
|
+
|
|
214
|
+
---
|
|
215
|
+
|
|
216
|
+
## `kit.image` — Image methods
|
|
217
|
+
|
|
218
|
+
**Image processing module.**
|
|
219
|
+
|
|
220
|
+
Provides image and QR code processing methods.
|
|
221
|
+
|
|
222
|
+
Main functions include:
|
|
223
|
+
|
|
224
|
+
* QR code image generation
|
|
225
|
+
* QR code image rendering
|
|
226
|
+
* Other image processing methods
|
|
227
|
+
|
|
228
|
+
---
|
|
229
|
+
|
|
230
|
+
## `kit.net` — Network methods
|
|
231
|
+
|
|
232
|
+
**Network module.**
|
|
233
|
+
|
|
234
|
+
Provides network request-related methods.
|
|
235
|
+
|
|
236
|
+
It mainly provides HTTP request functionality and handles requests and responses in a unified manner.
|
|
237
|
+
|
|
238
|
+
Main functions include:
|
|
239
|
+
|
|
240
|
+
* HTTP requests
|
|
241
|
+
* Automatic `Content-Type` handling
|
|
242
|
+
* Automatic response data type conversion
|
|
243
|
+
* Response result validation
|
|
244
|
+
* Other network request processing methods
|
|
245
|
+
|
|
246
|
+
---
|
|
247
|
+
|
|
248
|
+
## `kit.rand` — Random methods
|
|
249
|
+
|
|
250
|
+
**Random value module.**
|
|
251
|
+
|
|
252
|
+
Provides random value generation methods.
|
|
253
|
+
|
|
254
|
+
It is mainly used to generate random strings and other random data.
|
|
255
|
+
|
|
256
|
+
---
|
|
257
|
+
|
|
258
|
+
## `kit.re` — Regular expression methods
|
|
259
|
+
|
|
260
|
+
**Regular expression module.**
|
|
261
|
+
|
|
262
|
+
Provides commonly used regular expressions and related processing methods.
|
|
263
|
+
|
|
264
|
+
Main functions include:
|
|
265
|
+
|
|
266
|
+
* IP address regular expressions
|
|
267
|
+
* Mobile phone number regular expressions
|
|
268
|
+
* Other commonly used data format regular expressions
|
|
269
|
+
|
|
270
|
+
---
|
|
271
|
+
|
|
272
|
+
## `kit.react` — React methods
|
|
273
|
+
|
|
274
|
+
**React utility module.**
|
|
275
|
+
|
|
276
|
+
Provides React framework-related methods and Hook functions.
|
|
277
|
+
|
|
278
|
+
Main functions include:
|
|
279
|
+
|
|
280
|
+
* React framework mounting
|
|
281
|
+
* Hooks for triggering re-rendering
|
|
282
|
+
* Counter Hooks
|
|
283
|
+
* Mobile device detection Hooks
|
|
284
|
+
* Hooks for delayed execution after rendering
|
|
285
|
+
* Other React-related methods
|
|
286
|
+
|
|
287
|
+
---
|
|
288
|
+
|
|
289
|
+
## `kit.text` — Text methods
|
|
290
|
+
|
|
291
|
+
**Text processing module.**
|
|
292
|
+
|
|
293
|
+
Provides text and character-related processing methods.
|
|
294
|
+
|
|
295
|
+
Main functions include:
|
|
296
|
+
|
|
297
|
+
* Whitespace character lists
|
|
298
|
+
* Numeric character lists
|
|
299
|
+
* Uppercase and lowercase letter character lists
|
|
300
|
+
* Other commonly used character lists
|
|
301
|
+
|
|
302
|
+
---
|
|
303
|
+
|
|
304
|
+
## `kit.time` — Time methods
|
|
305
|
+
|
|
306
|
+
**Time processing module.**
|
|
307
|
+
|
|
308
|
+
Provides time-related processing methods.
|
|
309
|
+
|
|
310
|
+
Main functions include:
|
|
311
|
+
|
|
312
|
+
* Generating time strings
|
|
313
|
+
* Generating time strings conforming to the **ISO 8601 standard time representation**
|
|
314
|
+
* Other time processing methods
|
|
315
|
+
|
|
316
|
+
---
|
|
317
|
+
|
|
318
|
+
## `kit.twc` — Tailwind CSS methods
|
|
319
|
+
|
|
320
|
+
**Tailwind CSS utility module.**
|
|
321
|
+
|
|
322
|
+
Provides **Tailwind CSS**-related processing methods.
|
|
323
|
+
|
|
324
|
+
It is mainly used to combine and process Tailwind CSS `className` styles.
|
|
325
|
+
|
|
326
|
+
For example, it provides a `className` style combination function with comment support.
|
|
327
|
+
|
|
328
|
+
---
|
|
329
|
+
|
|
330
|
+
## `kit.window` — Browser methods
|
|
331
|
+
|
|
332
|
+
**Browser utility module.**
|
|
333
|
+
|
|
334
|
+
Provides methods related to the browser environment.
|
|
335
|
+
|
|
336
|
+
Main functions include:
|
|
337
|
+
|
|
338
|
+
* Browser local storage
|
|
339
|
+
* Creating, reading, updating, and deleting local storage data
|
|
340
|
+
* Opening files through the browser
|
|
341
|
+
* Starting file downloads
|
|
342
|
+
* Byte data file processing
|
|
343
|
+
* Other browser-related methods
|
|
344
|
+
|
|
345
|
+
---
|
|
346
|
+
|
|
347
|
+
# Module Overview
|
|
348
|
+
|
|
349
|
+
| Module | Function |
|
|
350
|
+
| --------------- | --------------------------------------- |
|
|
351
|
+
| `kit.ui` | Low-level UI components based on shadcn |
|
|
352
|
+
| `kit.component` | Integrated UI and responsive components |
|
|
353
|
+
| `kit.captcha` | Graphical CAPTCHA |
|
|
354
|
+
| `kit.base` | Base methods and common dependencies |
|
|
355
|
+
| `kit.data` | JavaScript data processing |
|
|
356
|
+
| `kit.image` | Image and QR code processing |
|
|
357
|
+
| `kit.net` | HTTP network requests |
|
|
358
|
+
| `kit.rand` | Random value generation |
|
|
359
|
+
| `kit.re` | Regular expressions |
|
|
360
|
+
| `kit.react` | React methods and Hooks |
|
|
361
|
+
| `kit.text` | Text and character processing |
|
|
362
|
+
| `kit.time` | Time processing |
|
|
363
|
+
| `kit.twc` | Tailwind CSS utilities |
|
|
364
|
+
| `kit.window` | Browser and local storage |
|
|
365
|
+
|
|
366
|
+
---
|
|
367
|
+
|
|
368
|
+
# Dependencies
|
|
369
|
+
|
|
370
|
+
Main runtime dependencies:
|
|
371
|
+
|
|
372
|
+
* `@base-ui/react`
|
|
373
|
+
* `@fontsource-variable/inter`
|
|
374
|
+
* `@tanstack/react-query`
|
|
375
|
+
* `class-variance-authority`
|
|
376
|
+
* `clsx`
|
|
377
|
+
* `cmdk`
|
|
378
|
+
* `date-fns`
|
|
379
|
+
* `embla-carousel-react`
|
|
380
|
+
* `github-markdown-css`
|
|
381
|
+
* `input-otp`
|
|
382
|
+
* `lucide-react`
|
|
383
|
+
* `next-themes`
|
|
384
|
+
* `qrcode`
|
|
385
|
+
* `react`
|
|
386
|
+
* `react-day-picker`
|
|
387
|
+
* `react-dom`
|
|
388
|
+
* `react-markdown`
|
|
389
|
+
* `react-resizable-panels`
|
|
390
|
+
* `react-router-dom`
|
|
391
|
+
* `recharts`
|
|
392
|
+
* `remark-gfm`
|
|
393
|
+
* `sonner`
|
|
394
|
+
* `tailwind-merge`
|
|
395
|
+
* `vaul`
|
|
396
|
+
|
|
397
|
+
---
|
|
398
|
+
|
|
399
|
+
# Project Information
|
|
400
|
+
|
|
401
|
+
| Project | Information |
|
|
402
|
+
| ----------- | ------------ |
|
|
403
|
+
| Name | `reykit` |
|
|
404
|
+
| Version | `1.0.247` |
|
|
405
|
+
| Type | `JavaScript` |
|
|
406
|
+
| Module type | `ES Module` |
|
|
407
|
+
| Author | `reyxbo` |
|
|
408
|
+
| License | `MIT` |
|
|
409
|
+
| Homepage | `reyxbo.com` |
|
|
410
|
+
| Repository | `reykit-js` |
|
|
411
|
+
|
|
412
|
+
## Keywords
|
|
413
|
+
|
|
414
|
+
`rey` · `reyxbo` · `kit` · `component` · `ui` · `style` · `react` · `tailwind` · `shadcn` · `captcha` · `image` · `net` · `random` · `regex` · `text` · `time` · `window`
|
package/dist/index.js
CHANGED
|
@@ -27554,12 +27554,12 @@ function U0() {
|
|
|
27554
27554
|
function C0(a, i) {
|
|
27555
27555
|
return U0() ? a : i;
|
|
27556
27556
|
}
|
|
27557
|
-
function lD(a,
|
|
27557
|
+
function lD(a, i = [], u = []) {
|
|
27558
27558
|
j0(
|
|
27559
27559
|
() => {
|
|
27560
|
-
a(...
|
|
27560
|
+
a(...u);
|
|
27561
27561
|
},
|
|
27562
|
-
|
|
27562
|
+
i
|
|
27563
27563
|
);
|
|
27564
27564
|
}
|
|
27565
27565
|
const M6 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
package/dist/src/index.d.ts
CHANGED
|
@@ -3,7 +3,7 @@ import { captcha, base, data, image, net, rand, re, react, text, time, twc, wind
|
|
|
3
3
|
* @Time : 2026-03-11
|
|
4
4
|
* @Author : Rey
|
|
5
5
|
* @Contact : reyxbo@163.com
|
|
6
|
-
* @Explain :
|
|
6
|
+
* @Explain : General-purpose JavaScript utility method package.
|
|
7
7
|
*/
|
|
8
8
|
import * as component from './component';
|
|
9
9
|
import * as ui from './component/ui';
|
package/dist/src/lib/base.d.ts
CHANGED
package/dist/src/lib/data.d.ts
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* @Time : 2026-03-17
|
|
3
3
|
* @Author : Rey
|
|
4
4
|
* @Contact : reyxbo@163.com
|
|
5
|
-
* @Explain : Data
|
|
5
|
+
* @Explain : Data processing module.
|
|
6
6
|
*/
|
|
7
7
|
export declare function range(stop: number): Generator<number>;
|
|
8
8
|
export declare function range(start: number, stop: number, step?: number): Generator<number>;
|
package/dist/src/lib/image.d.ts
CHANGED
package/dist/src/lib/index.d.ts
CHANGED
package/dist/src/lib/net.d.ts
CHANGED
package/dist/src/lib/rand.d.ts
CHANGED
package/dist/src/lib/re.d.ts
CHANGED
package/dist/src/lib/react.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
1
|
+
import { ReactNode, DependencyList } from 'react';
|
|
2
2
|
/**
|
|
3
3
|
* Render react note.
|
|
4
4
|
* Note: `react` and `react-dom` packages version must be `19.2.4`.
|
|
@@ -59,9 +59,10 @@ export declare function useIsMobile(): boolean;
|
|
|
59
59
|
*/
|
|
60
60
|
export declare function useValueByMobile<Value, MobileValue>(mobileValue: MobileValue, value: Value): Value | MobileValue;
|
|
61
61
|
/**
|
|
62
|
-
* Execute
|
|
62
|
+
* Execute after rendering or effecting.
|
|
63
63
|
*
|
|
64
64
|
* @param func - Execute function.
|
|
65
|
+
* @param deps - Effect dependency list.
|
|
65
66
|
* @param args - Execute arguments.
|
|
66
67
|
*/
|
|
67
|
-
export declare function useExec<T extends any>(func: (...args: T
|
|
68
|
+
export declare function useExec<T extends any[]>(func: (...args: T) => any | Promise<any>, deps?: DependencyList, args?: T): void;
|
package/dist/src/lib/text.d.ts
CHANGED
package/dist/src/lib/time.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,16 +1,26 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "reykit",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "1.0.248",
|
|
4
|
+
"description": "General-purpose JavaScript utility method package.",
|
|
5
5
|
"author": "reyxbo",
|
|
6
6
|
"keywords": [
|
|
7
7
|
"rey",
|
|
8
8
|
"reyxbo",
|
|
9
9
|
"kit",
|
|
10
|
-
"
|
|
10
|
+
"component",
|
|
11
|
+
"ui",
|
|
12
|
+
"style",
|
|
11
13
|
"react",
|
|
12
14
|
"tailwind",
|
|
13
|
-
"shadcn"
|
|
15
|
+
"shadcn",
|
|
16
|
+
"captcha",
|
|
17
|
+
"image",
|
|
18
|
+
"net",
|
|
19
|
+
"random",
|
|
20
|
+
"regex",
|
|
21
|
+
"text",
|
|
22
|
+
"time",
|
|
23
|
+
"window"
|
|
14
24
|
],
|
|
15
25
|
"repository": {
|
|
16
26
|
"type": "git",
|