pejay-ui 1.0.3 → 1.1.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 +108 -150
- package/bin/cli.js +83 -20
- package/package.json +2 -1
- package/registry.json +72 -224
- package/templates/scaffolds/tanstack-query/api-base.ts +68 -0
- package/templates/scaffolds/tanstack-query/api-mutations.ts +15 -0
- package/templates/scaffolds/tanstack-query/api-queries.ts +274 -0
- package/templates/scaffolds/tanstack-query/client.ts +63 -0
- package/templates/scaffolds/tanstack-query/module/index.ts +12 -0
- package/templates/scaffolds/tanstack-query/module/keys.ts +17 -0
- package/templates/scaffolds/tanstack-query/module/mappers.ts +15 -0
- package/templates/scaffolds/tanstack-query/module/mutations.ts +55 -0
- package/templates/scaffolds/tanstack-query/module/queries.ts +133 -0
- package/templates/scaffolds/tanstack-query/module/services.ts +66 -0
package/registry.json
CHANGED
|
@@ -2,328 +2,174 @@
|
|
|
2
2
|
"button": {
|
|
3
3
|
"name": "Button",
|
|
4
4
|
"category": "button",
|
|
5
|
-
"files": [
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
],
|
|
9
|
-
"utils": [
|
|
10
|
-
"cn.ts"
|
|
11
|
-
],
|
|
12
|
-
"peerDependencies": [
|
|
13
|
-
"clsx",
|
|
14
|
-
"tailwind-merge"
|
|
15
|
-
]
|
|
5
|
+
"files": ["templates/button/Button.tsx", "templates/button/tooltip.tsx"],
|
|
6
|
+
"utils": ["cn.ts"],
|
|
7
|
+
"peerDependencies": ["clsx", "tailwind-merge"]
|
|
16
8
|
},
|
|
17
9
|
"form/input": {
|
|
18
10
|
"name": "Input",
|
|
19
11
|
"category": "form",
|
|
20
|
-
"files": [
|
|
21
|
-
|
|
22
|
-
]
|
|
23
|
-
"utils": [
|
|
24
|
-
"cn.ts"
|
|
25
|
-
],
|
|
26
|
-
"peerDependencies": [
|
|
27
|
-
"clsx",
|
|
28
|
-
"tailwind-merge",
|
|
29
|
-
"lucide-react"
|
|
30
|
-
]
|
|
12
|
+
"files": ["templates/form/input.tsx"],
|
|
13
|
+
"utils": ["cn.ts"],
|
|
14
|
+
"peerDependencies": ["clsx", "tailwind-merge", "lucide-react"]
|
|
31
15
|
},
|
|
32
16
|
"form/amount-input": {
|
|
33
17
|
"name": "AmountInput",
|
|
34
18
|
"category": "form",
|
|
35
|
-
"files": [
|
|
36
|
-
|
|
37
|
-
]
|
|
38
|
-
"utils": [
|
|
39
|
-
"cn.ts"
|
|
40
|
-
],
|
|
41
|
-
"peerDependencies": [
|
|
42
|
-
"clsx",
|
|
43
|
-
"tailwind-merge",
|
|
44
|
-
"lucide-react"
|
|
45
|
-
]
|
|
19
|
+
"files": ["templates/form/amount-input.tsx"],
|
|
20
|
+
"utils": ["cn.ts"],
|
|
21
|
+
"peerDependencies": ["clsx", "tailwind-merge", "lucide-react"]
|
|
46
22
|
},
|
|
47
23
|
"form/checkbox": {
|
|
48
24
|
"name": "Checkbox",
|
|
49
25
|
"category": "form",
|
|
50
|
-
"files": [
|
|
51
|
-
|
|
52
|
-
]
|
|
53
|
-
"utils": [
|
|
54
|
-
"cn.ts"
|
|
55
|
-
],
|
|
56
|
-
"peerDependencies": [
|
|
57
|
-
"clsx",
|
|
58
|
-
"tailwind-merge",
|
|
59
|
-
"lucide-react"
|
|
60
|
-
]
|
|
26
|
+
"files": ["templates/form/checkbox.tsx"],
|
|
27
|
+
"utils": ["cn.ts"],
|
|
28
|
+
"peerDependencies": ["clsx", "tailwind-merge", "lucide-react"]
|
|
61
29
|
},
|
|
62
30
|
"form/checkbox-group": {
|
|
63
31
|
"name": "CheckboxGroup",
|
|
64
32
|
"category": "form",
|
|
65
|
-
"files": [
|
|
66
|
-
|
|
67
|
-
],
|
|
68
|
-
"
|
|
69
|
-
"cn.ts"
|
|
70
|
-
],
|
|
71
|
-
"peerDependencies": [
|
|
72
|
-
"clsx",
|
|
73
|
-
"tailwind-merge"
|
|
74
|
-
],
|
|
75
|
-
"dependencies": [
|
|
76
|
-
"form/checkbox"
|
|
77
|
-
]
|
|
33
|
+
"files": ["templates/form/checkbox-group.tsx"],
|
|
34
|
+
"utils": ["cn.ts"],
|
|
35
|
+
"peerDependencies": ["clsx", "tailwind-merge"],
|
|
36
|
+
"dependencies": ["form/checkbox"]
|
|
78
37
|
},
|
|
79
38
|
"form/date-picker": {
|
|
80
39
|
"name": "DatePicker",
|
|
81
40
|
"category": "form",
|
|
82
|
-
"files": [
|
|
83
|
-
|
|
84
|
-
],
|
|
85
|
-
"utils": [
|
|
86
|
-
"cn.ts"
|
|
87
|
-
],
|
|
41
|
+
"files": ["templates/form/date-picker.tsx"],
|
|
42
|
+
"utils": ["cn.ts"],
|
|
88
43
|
"peerDependencies": [
|
|
89
44
|
"clsx",
|
|
90
45
|
"tailwind-merge",
|
|
91
46
|
"lucide-react",
|
|
92
47
|
"@floating-ui/react"
|
|
93
48
|
],
|
|
94
|
-
"dependencies": [
|
|
95
|
-
"select-dropdown/select-input"
|
|
96
|
-
]
|
|
49
|
+
"dependencies": ["select-dropdown/select-input"]
|
|
97
50
|
},
|
|
98
51
|
"form/date-range-picker": {
|
|
99
52
|
"name": "DateRangePicker",
|
|
100
53
|
"category": "form",
|
|
101
|
-
"files": [
|
|
102
|
-
|
|
103
|
-
],
|
|
104
|
-
"utils": [
|
|
105
|
-
"cn.ts"
|
|
106
|
-
],
|
|
54
|
+
"files": ["templates/form/date-range-picker.tsx"],
|
|
55
|
+
"utils": ["cn.ts"],
|
|
107
56
|
"peerDependencies": [
|
|
108
57
|
"clsx",
|
|
109
58
|
"tailwind-merge",
|
|
110
59
|
"lucide-react",
|
|
111
60
|
"@floating-ui/react"
|
|
112
61
|
],
|
|
113
|
-
"dependencies": [
|
|
114
|
-
"select-dropdown/select-input"
|
|
115
|
-
]
|
|
62
|
+
"dependencies": ["select-dropdown/select-input"]
|
|
116
63
|
},
|
|
117
64
|
"form/email-input": {
|
|
118
65
|
"name": "EmailInput",
|
|
119
66
|
"category": "form",
|
|
120
|
-
"files": [
|
|
121
|
-
|
|
122
|
-
]
|
|
123
|
-
"utils": [
|
|
124
|
-
"cn.ts"
|
|
125
|
-
],
|
|
126
|
-
"peerDependencies": [
|
|
127
|
-
"clsx",
|
|
128
|
-
"tailwind-merge",
|
|
129
|
-
"lucide-react"
|
|
130
|
-
]
|
|
67
|
+
"files": ["templates/form/email-input.tsx"],
|
|
68
|
+
"utils": ["cn.ts"],
|
|
69
|
+
"peerDependencies": ["clsx", "tailwind-merge", "lucide-react"]
|
|
131
70
|
},
|
|
132
71
|
"form/file-input": {
|
|
133
72
|
"name": "FileInput",
|
|
134
73
|
"category": "form",
|
|
135
|
-
"files": [
|
|
136
|
-
|
|
137
|
-
]
|
|
138
|
-
"utils": [
|
|
139
|
-
"cn.ts"
|
|
140
|
-
],
|
|
141
|
-
"peerDependencies": [
|
|
142
|
-
"clsx",
|
|
143
|
-
"tailwind-merge",
|
|
144
|
-
"lucide-react"
|
|
145
|
-
]
|
|
74
|
+
"files": ["templates/form/file-input.tsx"],
|
|
75
|
+
"utils": ["cn.ts"],
|
|
76
|
+
"peerDependencies": ["clsx", "tailwind-merge", "lucide-react"]
|
|
146
77
|
},
|
|
147
78
|
"form/number-input": {
|
|
148
79
|
"name": "NumberInput",
|
|
149
80
|
"category": "form",
|
|
150
|
-
"files": [
|
|
151
|
-
|
|
152
|
-
]
|
|
153
|
-
"utils": [
|
|
154
|
-
"cn.ts"
|
|
155
|
-
],
|
|
156
|
-
"peerDependencies": [
|
|
157
|
-
"clsx",
|
|
158
|
-
"tailwind-merge",
|
|
159
|
-
"lucide-react"
|
|
160
|
-
]
|
|
81
|
+
"files": ["templates/form/number-input.tsx"],
|
|
82
|
+
"utils": ["cn.ts"],
|
|
83
|
+
"peerDependencies": ["clsx", "tailwind-merge", "lucide-react"]
|
|
161
84
|
},
|
|
162
85
|
"form/password-input": {
|
|
163
86
|
"name": "PasswordInput",
|
|
164
87
|
"category": "form",
|
|
165
|
-
"files": [
|
|
166
|
-
|
|
167
|
-
]
|
|
168
|
-
"utils": [
|
|
169
|
-
"cn.ts"
|
|
170
|
-
],
|
|
171
|
-
"peerDependencies": [
|
|
172
|
-
"clsx",
|
|
173
|
-
"tailwind-merge",
|
|
174
|
-
"lucide-react"
|
|
175
|
-
]
|
|
88
|
+
"files": ["templates/form/password-input.tsx"],
|
|
89
|
+
"utils": ["cn.ts"],
|
|
90
|
+
"peerDependencies": ["clsx", "tailwind-merge", "lucide-react"]
|
|
176
91
|
},
|
|
177
92
|
"form/phone-input": {
|
|
178
93
|
"name": "PhoneInput",
|
|
179
94
|
"category": "form",
|
|
180
|
-
"files": [
|
|
181
|
-
|
|
182
|
-
]
|
|
183
|
-
"utils": [
|
|
184
|
-
"cn.ts"
|
|
185
|
-
],
|
|
186
|
-
"peerDependencies": [
|
|
187
|
-
"clsx",
|
|
188
|
-
"tailwind-merge",
|
|
189
|
-
"lucide-react"
|
|
190
|
-
]
|
|
95
|
+
"files": ["templates/form/phone-input.tsx"],
|
|
96
|
+
"utils": ["cn.ts"],
|
|
97
|
+
"peerDependencies": ["clsx", "tailwind-merge", "lucide-react"]
|
|
191
98
|
},
|
|
192
99
|
"form/radio": {
|
|
193
100
|
"name": "Radio",
|
|
194
101
|
"category": "form",
|
|
195
|
-
"files": [
|
|
196
|
-
|
|
197
|
-
]
|
|
198
|
-
"utils": [
|
|
199
|
-
"cn.ts"
|
|
200
|
-
],
|
|
201
|
-
"peerDependencies": [
|
|
202
|
-
"clsx",
|
|
203
|
-
"tailwind-merge"
|
|
204
|
-
]
|
|
102
|
+
"files": ["templates/form/radio.tsx"],
|
|
103
|
+
"utils": ["cn.ts"],
|
|
104
|
+
"peerDependencies": ["clsx", "tailwind-merge"]
|
|
205
105
|
},
|
|
206
106
|
"form/radio-group": {
|
|
207
107
|
"name": "RadioGroup",
|
|
208
108
|
"category": "form",
|
|
209
|
-
"files": [
|
|
210
|
-
|
|
211
|
-
],
|
|
212
|
-
"
|
|
213
|
-
"cn.ts"
|
|
214
|
-
],
|
|
215
|
-
"peerDependencies": [
|
|
216
|
-
"clsx",
|
|
217
|
-
"tailwind-merge"
|
|
218
|
-
],
|
|
219
|
-
"dependencies": [
|
|
220
|
-
"form/radio"
|
|
221
|
-
]
|
|
109
|
+
"files": ["templates/form/radio-group.tsx"],
|
|
110
|
+
"utils": ["cn.ts"],
|
|
111
|
+
"peerDependencies": ["clsx", "tailwind-merge"],
|
|
112
|
+
"dependencies": ["form/radio"]
|
|
222
113
|
},
|
|
223
114
|
"form/range-slider": {
|
|
224
115
|
"name": "RangeSlider",
|
|
225
116
|
"category": "form",
|
|
226
|
-
"files": [
|
|
227
|
-
|
|
228
|
-
]
|
|
229
|
-
"utils": [
|
|
230
|
-
"cn.ts"
|
|
231
|
-
],
|
|
232
|
-
"peerDependencies": [
|
|
233
|
-
"clsx",
|
|
234
|
-
"tailwind-merge"
|
|
235
|
-
]
|
|
117
|
+
"files": ["templates/form/range-slider.tsx"],
|
|
118
|
+
"utils": ["cn.ts"],
|
|
119
|
+
"peerDependencies": ["clsx", "tailwind-merge"]
|
|
236
120
|
},
|
|
237
121
|
"form/switch": {
|
|
238
122
|
"name": "Switch",
|
|
239
123
|
"category": "form",
|
|
240
|
-
"files": [
|
|
241
|
-
|
|
242
|
-
]
|
|
243
|
-
"utils": [
|
|
244
|
-
"cn.ts"
|
|
245
|
-
],
|
|
246
|
-
"peerDependencies": [
|
|
247
|
-
"clsx",
|
|
248
|
-
"tailwind-merge"
|
|
249
|
-
]
|
|
124
|
+
"files": ["templates/form/switch.tsx"],
|
|
125
|
+
"utils": ["cn.ts"],
|
|
126
|
+
"peerDependencies": ["clsx", "tailwind-merge"]
|
|
250
127
|
},
|
|
251
128
|
"form/textarea": {
|
|
252
129
|
"name": "Textarea",
|
|
253
130
|
"category": "form",
|
|
254
|
-
"files": [
|
|
255
|
-
|
|
256
|
-
]
|
|
257
|
-
"utils": [
|
|
258
|
-
"cn.ts"
|
|
259
|
-
],
|
|
260
|
-
"peerDependencies": [
|
|
261
|
-
"clsx",
|
|
262
|
-
"tailwind-merge"
|
|
263
|
-
]
|
|
131
|
+
"files": ["templates/form/textarea.tsx"],
|
|
132
|
+
"utils": ["cn.ts"],
|
|
133
|
+
"peerDependencies": ["clsx", "tailwind-merge"]
|
|
264
134
|
},
|
|
265
135
|
"form/time-picker": {
|
|
266
136
|
"name": "TimePicker",
|
|
267
137
|
"category": "form",
|
|
268
|
-
"files": [
|
|
269
|
-
|
|
270
|
-
],
|
|
271
|
-
"utils": [
|
|
272
|
-
"cn.ts"
|
|
273
|
-
],
|
|
138
|
+
"files": ["templates/form/time-picker.tsx"],
|
|
139
|
+
"utils": ["cn.ts"],
|
|
274
140
|
"peerDependencies": [
|
|
275
141
|
"clsx",
|
|
276
142
|
"tailwind-merge",
|
|
277
143
|
"lucide-react",
|
|
278
144
|
"@floating-ui/react"
|
|
279
145
|
],
|
|
280
|
-
"dependencies": [
|
|
281
|
-
"select-dropdown/select-input"
|
|
282
|
-
]
|
|
146
|
+
"dependencies": ["select-dropdown/select-input"]
|
|
283
147
|
},
|
|
284
148
|
"form/time-range-picker": {
|
|
285
149
|
"name": "TimeRangePicker",
|
|
286
150
|
"category": "form",
|
|
287
|
-
"files": [
|
|
288
|
-
|
|
289
|
-
],
|
|
290
|
-
"utils": [
|
|
291
|
-
"cn.ts"
|
|
292
|
-
],
|
|
151
|
+
"files": ["templates/form/time-range-picker.tsx"],
|
|
152
|
+
"utils": ["cn.ts"],
|
|
293
153
|
"peerDependencies": [
|
|
294
154
|
"clsx",
|
|
295
155
|
"tailwind-merge",
|
|
296
156
|
"lucide-react",
|
|
297
157
|
"@floating-ui/react"
|
|
298
158
|
],
|
|
299
|
-
"dependencies": [
|
|
300
|
-
"select-dropdown/select-input"
|
|
301
|
-
]
|
|
159
|
+
"dependencies": ["select-dropdown/select-input"]
|
|
302
160
|
},
|
|
303
161
|
"form/url-input": {
|
|
304
162
|
"name": "UrlInput",
|
|
305
163
|
"category": "form",
|
|
306
|
-
"files": [
|
|
307
|
-
|
|
308
|
-
]
|
|
309
|
-
"utils": [
|
|
310
|
-
"cn.ts"
|
|
311
|
-
],
|
|
312
|
-
"peerDependencies": [
|
|
313
|
-
"clsx",
|
|
314
|
-
"tailwind-merge",
|
|
315
|
-
"lucide-react"
|
|
316
|
-
]
|
|
164
|
+
"files": ["templates/form/url-input.tsx"],
|
|
165
|
+
"utils": ["cn.ts"],
|
|
166
|
+
"peerDependencies": ["clsx", "tailwind-merge", "lucide-react"]
|
|
317
167
|
},
|
|
318
168
|
"dropdown/select-input": {
|
|
319
169
|
"name": "SelectInput",
|
|
320
170
|
"category": "select-dropdown",
|
|
321
|
-
"files": [
|
|
322
|
-
|
|
323
|
-
],
|
|
324
|
-
"utils": [
|
|
325
|
-
"cn.ts"
|
|
326
|
-
],
|
|
171
|
+
"files": ["templates/select-dropdown/select-input.tsx"],
|
|
172
|
+
"utils": ["cn.ts"],
|
|
327
173
|
"peerDependencies": [
|
|
328
174
|
"clsx",
|
|
329
175
|
"tailwind-merge",
|
|
@@ -334,17 +180,19 @@
|
|
|
334
180
|
"dropdown/multiselect-input": {
|
|
335
181
|
"name": "MultiselectInput",
|
|
336
182
|
"category": "select-dropdown",
|
|
337
|
-
"files": [
|
|
338
|
-
|
|
339
|
-
],
|
|
340
|
-
"utils": [
|
|
341
|
-
"cn.ts"
|
|
342
|
-
],
|
|
183
|
+
"files": ["templates/select-dropdown/multiselect-input.tsx"],
|
|
184
|
+
"utils": ["cn.ts"],
|
|
343
185
|
"peerDependencies": [
|
|
344
186
|
"clsx",
|
|
345
187
|
"tailwind-merge",
|
|
346
188
|
"lucide-react",
|
|
347
189
|
"@floating-ui/react"
|
|
348
190
|
]
|
|
191
|
+
},
|
|
192
|
+
"tanstack-query-client": {
|
|
193
|
+
"name": "TanstackQueryClient",
|
|
194
|
+
"category": "tanstack-query",
|
|
195
|
+
"files": ["templates/scaffolds/tanstack-query"],
|
|
196
|
+
"peerDependencies": ["@tanstack/react-query"]
|
|
349
197
|
}
|
|
350
198
|
}
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
/*
|
|
2
|
+
#ANCHOR : TYPE:1 VITE PROJECT
|
|
3
|
+
const BASE_URL = import.meta.env.VITE_API_URL;
|
|
4
|
+
|
|
5
|
+
Environment variables must start with VITE_ to be exposed to client-side code in Vite.
|
|
6
|
+
|
|
7
|
+
---------------------------------------------------------
|
|
8
|
+
|
|
9
|
+
#ANCHOR : TYPE:2 NEXT.JS / NON-VITE PROJECTS
|
|
10
|
+
const BASE_URL = process.env.NEXT_PUBLIC_API_URL;
|
|
11
|
+
|
|
12
|
+
Environment variables must start with NEXT_PUBLIC_ to be available in Next.js browser code.
|
|
13
|
+
|
|
14
|
+
---------------------------------------------------------
|
|
15
|
+
#ANCHOR
|
|
16
|
+
Vite doesn't automatically provide Node's process.env in browser code.
|
|
17
|
+
|
|
18
|
+
| Framework | Access Method | Public Prefix |
|
|
19
|
+
| --------------- | ------------------- | ---------------- |
|
|
20
|
+
| Next.js | `process.env.X` | `NEXT_PUBLIC_` |
|
|
21
|
+
| Vite | `import.meta.env.X` | `VITE_` |
|
|
22
|
+
| Node.js Backend | `process.env.X` | No prefix needed |
|
|
23
|
+
|
|
24
|
+
*/
|
|
25
|
+
|
|
26
|
+
export const API_CONFIG = {
|
|
27
|
+
// NOTE: Change this BASE_URL to match your actual API endpoint
|
|
28
|
+
baseUrl: "http://localhost:5000/api",
|
|
29
|
+
timeout: 10000,
|
|
30
|
+
headers: {
|
|
31
|
+
"Accept": "application/json",
|
|
32
|
+
"Content-Type": "application/json",
|
|
33
|
+
},
|
|
34
|
+
} as const;
|
|
35
|
+
|
|
36
|
+
export const QUERY_CLIENT_CONFIG = {
|
|
37
|
+
defaultOptions: {
|
|
38
|
+
queries: {
|
|
39
|
+
// # NOTE: Global TanStack Query configurations
|
|
40
|
+
retry: 3, // Automatically retries failed requests 3 times on failure
|
|
41
|
+
refetchOnWindowFocus: false, // Refetches stale active queries when the browser tab gets focused
|
|
42
|
+
staleTime: 1000 * 60 * 5, // Data is considered fresh for 5 minutes (prevents duplicate requests)
|
|
43
|
+
},
|
|
44
|
+
},
|
|
45
|
+
} as const;
|
|
46
|
+
|
|
47
|
+
/*
|
|
48
|
+
# NOTE: HOW AND WHERE TO USE QUERY_CLIENT_CONFIG
|
|
49
|
+
|
|
50
|
+
This configuration is imported and passed when initializing the QueryClient at the root of your application (e.g., in App.tsx, main.tsx, or layout.tsx):
|
|
51
|
+
|
|
52
|
+
```typescript
|
|
53
|
+
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
|
54
|
+
import { QUERY_CLIENT_CONFIG } from "./api-base";
|
|
55
|
+
|
|
56
|
+
const queryClient = new QueryClient(QUERY_CLIENT_CONFIG);
|
|
57
|
+
|
|
58
|
+
export default function Providers({ children }) {
|
|
59
|
+
return (
|
|
60
|
+
<QueryClientProvider client={queryClient}>
|
|
61
|
+
{children}
|
|
62
|
+
</QueryClientProvider>
|
|
63
|
+
);
|
|
64
|
+
}
|
|
65
|
+
```
|
|
66
|
+
*/
|
|
67
|
+
|
|
68
|
+
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { ModuleMutations } from "./module";
|
|
2
|
+
|
|
3
|
+
export const apiMutations = {
|
|
4
|
+
module: ModuleMutations,
|
|
5
|
+
};
|
|
6
|
+
|
|
7
|
+
export * from "./module";
|
|
8
|
+
|
|
9
|
+
/*
|
|
10
|
+
# NOTE : here you export all the mutations from the module folder so it will be easy to import in components
|
|
11
|
+
|
|
12
|
+
const queryClient = useQueryClient();
|
|
13
|
+
const mutation_name_example = useMutation(ModuleMutations.create_query_name_example(queryClient));
|
|
14
|
+
mutation_name_example.mutate({input_name: data})
|
|
15
|
+
*/
|