lulichat 1.0.2 → 1.0.4

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.
@@ -1,174 +0,0 @@
1
- import { cn } from "@/utils";
2
- import React, { useRef, useImperativeHandle, useCallback } from "react";
3
- import Input from "./Input";
4
-
5
- interface FormProps<T> extends React.FormHTMLAttributes<HTMLFormElement> {
6
- onValuesChange?: (values: T) => void;
7
- initialValues?: T;
8
- onFinish?: (values: T) => void;
9
- }
10
-
11
- export interface FormRefObject<T> {
12
- getValues(): T;
13
- getFieldValue: <K extends keyof T>(fieldName: K) => T[K];
14
- elementRef: () => HTMLFormElement | null;
15
- setFieldValue: <K extends keyof T>(fieldName: K, value: T[K]) => void;
16
- }
17
-
18
- const FormContext = React.createContext<FormRefObject<any> | undefined>(
19
- undefined
20
- );
21
-
22
- type FormComponent = React.ForwardRefExoticComponent<
23
- FormProps<Record<string, any>> &
24
- React.RefAttributes<FormRefObject<Record<string, any>>>
25
- > & {
26
- Item: typeof FormItem;
27
- Label: typeof FormLabel;
28
- useForm: typeof useForm;
29
- };
30
-
31
- const Form: FormComponent = React.forwardRef(
32
- <T extends Record<string, any>>(
33
- { children, onValuesChange, initialValues, ...props }: FormProps<T>,
34
- ref: React.Ref<FormRefObject<T>>
35
- ) => {
36
- const values = useRef<T>(initialValues || ({} as T));
37
- const self = useRef<HTMLFormElement>(null);
38
-
39
- const setFieldValue = useCallback(
40
- <K extends keyof T>(fieldName: K, value: T[K]) => {
41
- values.current[fieldName] = value;
42
- if (onValuesChange) onValuesChange({ ...values.current });
43
- },
44
- [onValuesChange]
45
- );
46
-
47
- const methods: FormRefObject<T> = {
48
- getValues: () => values.current!,
49
- getFieldValue: (fieldName) => values.current?.[fieldName]!,
50
- elementRef: () => self.current,
51
- setFieldValue,
52
- };
53
-
54
- useImperativeHandle(ref, () => methods);
55
-
56
- return (
57
- <FormContext.Provider value={methods}>
58
- <form {...props} ref={self} onSubmit={props.onSubmit}>
59
- {children}
60
- </form>
61
- </FormContext.Provider>
62
- );
63
- }
64
- ) as FormComponent;
65
-
66
- interface FormItemProps extends React.HTMLAttributes<HTMLDivElement> {
67
- name?: string;
68
- children?: React.ReactNode;
69
- label?: string;
70
- required?: boolean;
71
- error?: string;
72
- }
73
-
74
- const FormItem = React.forwardRef<HTMLDivElement, FormItemProps>(
75
- ({ name, children, ...props }, ref) => {
76
- const context = React.useContext(FormContext)!;
77
-
78
- const handleChange = function (
79
- this: React.ReactElement<
80
- React.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>
81
- >,
82
- e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
83
- ) {
84
- if (context && name) {
85
- context.setFieldValue(name, e.target.value);
86
- }
87
-
88
- this.props.onChange?.(e);
89
- };
90
-
91
- // Clone children and inject value and onChange if name is provided
92
- const enhancedChildren = React.Children.map(children, (child) => {
93
- if (React.isValidElement(child) && name && child.type === Input) {
94
- let _child = child as React.ReactElement<
95
- React.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>
96
- >;
97
- return React.cloneElement(_child, {
98
- ..._child.props,
99
- name,
100
- value: context?.getFieldValue(name) ?? "",
101
- onChange: handleChange.bind(_child),
102
- required: props.required,
103
- });
104
- }
105
- return child;
106
- });
107
-
108
- const _props = Object.create(props);
109
- delete _props.required;
110
- delete _props.label;
111
-
112
- return (
113
- <div className="lulichat-form-item" ref={ref} {..._props}>
114
- {props.label && (
115
- <FormLabel htmlFor={name} required={props.required}>
116
- {props.label}
117
- </FormLabel>
118
- )}
119
- {enhancedChildren}
120
- {props.error && <p className="error">{props.error}</p>}
121
- </div>
122
- );
123
- }
124
- );
125
-
126
- interface FormLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
127
- required?: boolean;
128
- htmlFor?: string;
129
- }
130
-
131
- const FormLabel = React.forwardRef<HTMLLabelElement, FormLabelProps>(
132
- (props, ref) => {
133
- const required = props.required;
134
- const children = props.children;
135
-
136
- return (
137
- <label
138
- {...props}
139
- className={cn("lulichat-form-label", props.className)}
140
- ref={ref}
141
- >
142
- {children}
143
- {required && <b style={{ color: "red" }}>*</b>}
144
- </label>
145
- );
146
- }
147
- );
148
-
149
- const useForm = <T,>(initialValues: T) => {
150
- const values = useRef<T>(initialValues || ({} as T));
151
- const self = useRef<HTMLFormElement>(null);
152
-
153
- const setFieldValue = useCallback(
154
- <K extends keyof T>(fieldName: K, value: T[K]) => {
155
- values.current[fieldName] = value;
156
- },
157
- []
158
- );
159
-
160
- const methods: FormRefObject<T> = {
161
- getValues: () => values.current!,
162
- getFieldValue: (fieldName) => values.current?.[fieldName]!,
163
- elementRef: () => self.current,
164
- setFieldValue,
165
- };
166
-
167
- return [methods];
168
- };
169
-
170
- Form.Item = FormItem;
171
- Form.Label = FormLabel;
172
- Form.useForm = useForm;
173
-
174
- export default Form;
@@ -1,443 +0,0 @@
1
- export const Uploading: React.FC<React.SVGProps<any>> = (props) => (
2
- <svg
3
- xmlns="http://www.w3.org/2000/svg"
4
- width="48"
5
- height="48"
6
- viewBox="0 0 24 24"
7
- {...props}
8
- >
9
- <g
10
- fill="none"
11
- stroke="currentColor"
12
- stroke-linecap="round"
13
- stroke-linejoin="round"
14
- stroke-width="2"
15
- >
16
- <path
17
- stroke-dasharray="2 4"
18
- stroke-dashoffset="6"
19
- d="M12 21c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9"
20
- >
21
- <animate
22
- attributeName="stroke-dashoffset"
23
- dur="0.6s"
24
- repeatCount="indefinite"
25
- values="6;0"
26
- />
27
- </path>
28
- <path
29
- stroke-dasharray="32"
30
- stroke-dashoffset="32"
31
- d="M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9"
32
- >
33
- <animate
34
- fill="freeze"
35
- attributeName="stroke-dashoffset"
36
- begin="0.1s"
37
- dur="0.4s"
38
- values="32;0"
39
- />
40
- </path>
41
- <path stroke-dasharray="10" stroke-dashoffset="10" d="M12 16v-7.5">
42
- <animate
43
- fill="freeze"
44
- attributeName="stroke-dashoffset"
45
- begin="0.5s"
46
- dur="0.2s"
47
- values="10;0"
48
- />
49
- </path>
50
- <path
51
- stroke-dasharray="6"
52
- stroke-dashoffset="6"
53
- d="M12 8.5l3.5 3.5M12 8.5l-3.5 3.5"
54
- >
55
- <animate
56
- fill="freeze"
57
- attributeName="stroke-dashoffset"
58
- begin="0.7s"
59
- dur="0.2s"
60
- values="6;0"
61
- />
62
- </path>
63
- </g>
64
- </svg>
65
- );
66
-
67
- export const DropdownArrow: React.FC<React.SVGProps<any>> = (props) => (
68
- <svg
69
- xmlns="http://www.w3.org/2000/svg"
70
- width="48"
71
- height="48"
72
- viewBox="0 0 18 18"
73
- {...props}
74
- >
75
- <path
76
- fill="none"
77
- stroke="currentColor"
78
- stroke-dasharray="10"
79
- stroke-dashoffset="10"
80
- stroke-linecap="round"
81
- stroke-linejoin="round"
82
- stroke-width="2"
83
- d="M12 15l-5 -5M12 15l5 -5"
84
- >
85
- <animate
86
- fill="freeze"
87
- attributeName="stroke-dashoffset"
88
- dur="0.3s"
89
- values="10;0"
90
- />
91
- </path>
92
- </svg>
93
- );
94
-
95
- export const Attachment: React.FC<React.SVGProps<any>> = (props) => (
96
- <svg
97
- xmlns="http://www.w3.org/2000/svg"
98
- width="48"
99
- height="48"
100
- viewBox="0 0 24 24"
101
- {...props}
102
- >
103
- <mask id="lineMdFileDocumentFilled0">
104
- <g
105
- fill="none"
106
- stroke="#fff"
107
- stroke-linecap="round"
108
- stroke-linejoin="round"
109
- stroke-width="2"
110
- >
111
- <path
112
- fill="#fff"
113
- fill-opacity="0"
114
- stroke-dasharray="64"
115
- stroke-dashoffset="64"
116
- d="M13.5 3l5.5 5.5v11.5c0 0.55 -0.45 1 -1 1h-12c-0.55 0 -1 -0.45 -1 -1v-16c0 -0.55 0.45 -1 1 -1Z"
117
- >
118
- <animate
119
- fill="freeze"
120
- attributeName="fill-opacity"
121
- begin="0.6s"
122
- dur="0.5s"
123
- values="0;1"
124
- />
125
- <animate
126
- fill="freeze"
127
- attributeName="stroke-dashoffset"
128
- dur="0.6s"
129
- values="64;0"
130
- />
131
- </path>
132
- <path fill="#000" stroke="#000" d="M14.5 3.5l0 4.5l4.5 0z" opacity="0">
133
- <set fill="freeze" attributeName="opacity" begin="0.6s" to="1" />
134
- </path>
135
- <path d="M13.5 3l5.5 5.5" opacity="0">
136
- <set fill="freeze" attributeName="opacity" begin="0.6s" to="1" />
137
- </path>
138
- <path
139
- stroke="#000"
140
- stroke-dasharray="12"
141
- stroke-dashoffset="12"
142
- d="M7 13h10"
143
- >
144
- <animate
145
- fill="freeze"
146
- attributeName="stroke-dashoffset"
147
- begin="1.1s"
148
- dur="0.2s"
149
- values="12;0"
150
- />
151
- </path>
152
- <path
153
- stroke="#000"
154
- stroke-dasharray="8"
155
- stroke-dashoffset="8"
156
- d="M7 17h7"
157
- >
158
- <animate
159
- fill="freeze"
160
- attributeName="stroke-dashoffset"
161
- begin="1.3s"
162
- dur="0.2s"
163
- values="8;0"
164
- />
165
- </path>
166
- </g>
167
- </mask>
168
- <rect
169
- width="24"
170
- height="24"
171
- fill="currentColor"
172
- mask="url(#lineMdFileDocumentFilled0)"
173
- />
174
- </svg>
175
- );
176
-
177
- export const Close: React.FC<React.SVGProps<any>> = (props) => (
178
- <svg
179
- xmlns="http://www.w3.org/2000/svg"
180
- width="48"
181
- height="48"
182
- viewBox="0 0 24 24"
183
- {...props}
184
- >
185
- <path
186
- fill="none"
187
- stroke="currentColor"
188
- stroke-linecap="round"
189
- stroke-linejoin="round"
190
- stroke-width="2"
191
- d="M5 5L12 5L19 5M5 12H19M5 19L12 19L19 19"
192
- >
193
- <animate
194
- fill="freeze"
195
- attributeName="d"
196
- dur="0.4s"
197
- values="M5 5L12 5L19 5M5 12H19M5 19L12 19L19 19;M5 5L12 12L19 5M12 12H12M5 19L12 12L19 19"
198
- />
199
- </path>
200
- </svg>
201
- );
202
-
203
- export const Hello: React.FC<React.SVGProps<any>> = (props) => {
204
- return (
205
- <svg
206
- xmlns="http://www.w3.org/2000/svg"
207
- width="48"
208
- height="48"
209
- viewBox="0 0 22 22"
210
- {...props}
211
- >
212
- <path
213
- fill="currentColor"
214
- d="M1.5 4v1.5c0 4.15 2.21 7.78 5.5 9.8V20h15v-2c0-2.66-5.33-4-8-4h-.25C9 14 5 10 5 5.5V4m9 0a4 4 0 0 0-4 4a4 4 0 0 0 4 4a4 4 0 0 0 4-4a4 4 0 0 0-4-4"
215
- />
216
- </svg>
217
- );
218
- };
219
-
220
- export const Headphones: React.FC<React.SVGProps<any>> = (props) => (
221
- <svg
222
- xmlns="http://www.w3.org/2000/svg"
223
- width="24"
224
- height="24"
225
- viewBox="0 0 24 24"
226
- {...props}
227
- >
228
- <path
229
- fill="currentColor"
230
- d="M12 2.25A9.75 9.75 0 0 0 2.25 12v5q0 .04.004.08v.05c-.003 1.278.602 2.682 1.963 3.25l.071.03c.11.044.22.12.362.25c.07.064.138.132.22.213l.008.008c.08.08.175.175.277.265c.204.183.474.388.83.506c.37.122.77.131 1.208.022c.723-.18 1.266-.752 1.469-1.454c.089-.309.089-.668.088-1.084v-4.094c0-.285 0-.528-.01-.728a2.3 2.3 0 0 0-.107-.627c-.23-.683-.786-1.223-1.504-1.377a2.25 2.25 0 0 0-1.264.065c-.37.133-.652.354-.87.558c-.12.11-.269.267-.391.396l-.164.17a1.8 1.8 0 0 1-.427.338q-.136.07-.263.152V12a8.25 8.25 0 1 1 16.5 0v1.864a3 3 0 0 0-.538-.274a1.2 1.2 0 0 1-.362-.25c-.07-.064-.138-.132-.22-.213l-.008-.008a7 7 0 0 0-.277-.265a2.4 2.4 0 0 0-.83-.506q-.553-.184-1.208-.022c-.723.18-1.266.752-1.469 1.454c-.089.309-.088.668-.088 1.085v4.093c0 .285 0 .528.01.728c.012.208.037.418.107.627c.23.683.786 1.223 1.504 1.377c.463.1.883.073 1.264-.065c.37-.133.652-.354.87-.558c.12-.11.269-.267.391-.395c.065-.069.123-.13.164-.17a1.8 1.8 0 0 1 .427-.34c1.11-.573 1.755-1.724 1.758-2.936v-.143L21.75 17v-5A9.75 9.75 0 0 0 12 2.25"
231
- />
232
- </svg>
233
- );
234
- export const User: React.FC<React.SVGProps<any>> = (props) => (
235
- <svg
236
- xmlns="http://www.w3.org/2000/svg"
237
- width="24"
238
- height="24"
239
- viewBox="0 0 24 24"
240
- {...props}
241
- >
242
- <g
243
- fill="none"
244
- stroke="currentColor"
245
- stroke-dasharray="28"
246
- stroke-dashoffset="28"
247
- stroke-linecap="round"
248
- stroke-linejoin="round"
249
- stroke-width="2"
250
- >
251
- <path d="M4 21v-1c0 -3.31 2.69 -6 6 -6h4c3.31 0 6 2.69 6 6v1">
252
- <animate
253
- fill="freeze"
254
- attributeName="stroke-dashoffset"
255
- dur="0.4s"
256
- values="28;0"
257
- />
258
- </path>
259
- <path d="M12 11c-2.21 0 -4 -1.79 -4 -4c0 -2.21 1.79 -4 4 -4c2.21 0 4 1.79 4 4c0 2.21 -1.79 4 -4 4Z">
260
- <animate
261
- fill="freeze"
262
- attributeName="stroke-dashoffset"
263
- begin="0.4s"
264
- dur="0.4s"
265
- values="28;0"
266
- />
267
- </path>
268
- </g>
269
- </svg>
270
- );
271
-
272
- export const Send: React.FC<React.SVGProps<any>> = () => (
273
- <svg
274
- xmlns="http://www.w3.org/2000/svg"
275
- width="24"
276
- height="24"
277
- viewBox="0 0 24 24"
278
- >
279
- <path
280
- fill="none"
281
- stroke="currentColor"
282
- stroke-linecap="round"
283
- stroke-linejoin="round"
284
- stroke-width="2"
285
- d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11zm7.318-19.539l-10.94 10.939"
286
- />
287
- </svg>
288
- );
289
-
290
- export const Loader: React.FC<React.SVGProps<any>> = (props) => (
291
- <svg
292
- xmlns="http://www.w3.org/2000/svg"
293
- width="24"
294
- height="24"
295
- viewBox="0 0 24 24"
296
- {...props}
297
- >
298
- <g
299
- fill="none"
300
- stroke="currentColor"
301
- stroke-linecap="round"
302
- stroke-linejoin="round"
303
- stroke-width="2"
304
- >
305
- <path
306
- stroke-dasharray="16"
307
- stroke-dashoffset="16"
308
- d="M12 3c4.97 0 9 4.03 9 9"
309
- >
310
- <animate
311
- fill="freeze"
312
- attributeName="stroke-dashoffset"
313
- dur="0.3s"
314
- values="16;0"
315
- />
316
- <animateTransform
317
- attributeName="transform"
318
- dur="1.5s"
319
- repeatCount="indefinite"
320
- type="rotate"
321
- values="0 12 12;360 12 12"
322
- />
323
- </path>
324
- <path
325
- stroke-dasharray="64"
326
- stroke-dashoffset="64"
327
- stroke-opacity="0.3"
328
- d="M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9Z"
329
- >
330
- <animate
331
- fill="freeze"
332
- attributeName="stroke-dashoffset"
333
- dur="1.2s"
334
- values="64;0"
335
- />
336
- </path>
337
- </g>
338
- </svg>
339
- );
340
-
341
- export const MessageCircle: React.FC<React.SVGProps<any>> = (props) => (
342
- <svg
343
- xmlns="http://www.w3.org/2000/svg"
344
- width="24"
345
- height="24"
346
- viewBox="0 0 24 24"
347
- {...props}
348
- >
349
- <mask id="lineMdChatRoundDotsFilled0">
350
- <path
351
- fill="#fff"
352
- fill-opacity="0"
353
- d="M5 15.5c1 1 2.5 2 4 2.5c-0.71 -0.24 -1.43 -0.59 -2.09 -1c-0.72 -0.45 -1.39 -0.98 -1.91 -1.5Z"
354
- >
355
- <animate
356
- fill="freeze"
357
- attributeName="d"
358
- begin="0.6s"
359
- dur="0.2s"
360
- values="M5 15.5c1 1 2.5 2 4 2.5c-0.71 -0.24 -1.43 -0.59 -2.09 -1c-0.72 -0.45 -1.39 -0.98 -1.91 -1.5Z;M5 15.5c1 1 2.5 2 4 2.5c-2 2 -5 3 -7 3c2 -2 3 -3.5 3 -5.5Z"
361
- />
362
- <set fill="freeze" attributeName="fill-opacity" begin="0.6s" to="1" />
363
- </path>
364
- <g
365
- fill="none"
366
- stroke="#fff"
367
- stroke-linecap="round"
368
- stroke-linejoin="round"
369
- stroke-width="2"
370
- >
371
- <path
372
- fill="transparent"
373
- fill-opacity="0"
374
- stroke-dasharray="56"
375
- stroke-dashoffset="56"
376
- d="M7 16.82c-2.41 -1.25 -4 -3.39 -4 -5.82c0 -3.87 4.03 -7 9 -7c4.97 0 9 3.13 9 7c0 3.87 -4.03 7 -9 7c-1.85 0 -3.57 -0.43 -5 -1.18Z"
377
- >
378
- <animate
379
- fill="freeze"
380
- attributeName="fill-opacity"
381
- begin="0.9s"
382
- dur="0.5s"
383
- values="0;1"
384
- />
385
- <animate
386
- fill="freeze"
387
- attributeName="stroke-dashoffset"
388
- dur="0.6s"
389
- values="56;0"
390
- />
391
- </path>
392
- <path
393
- stroke="currentColor"
394
- stroke-dasharray="2"
395
- stroke-dashoffset="2"
396
- d="M8 11h0.01"
397
- >
398
- <animate
399
- fill="freeze"
400
- attributeName="stroke-dashoffset"
401
- begin="1.4s"
402
- dur="0.2s"
403
- values="2;0"
404
- />
405
- </path>
406
- <path
407
- stroke="currentColor"
408
- stroke-dasharray="2"
409
- stroke-dashoffset="2"
410
- d="M12 11h0.01"
411
- >
412
- <animate
413
- fill="freeze"
414
- attributeName="stroke-dashoffset"
415
- begin="1.7s"
416
- dur="0.2s"
417
- values="2;0"
418
- />
419
- </path>
420
- <path
421
- stroke="currentColor"
422
- stroke-dasharray="2"
423
- stroke-dashoffset="2"
424
- d="M16 11h0.01"
425
- >
426
- <animate
427
- fill="freeze"
428
- attributeName="stroke-dashoffset"
429
- begin="2s"
430
- dur="0.2s"
431
- values="2;0"
432
- />
433
- </path>
434
- </g>
435
- </mask>
436
- <rect
437
- width="24"
438
- height="24"
439
- fill="currentColor"
440
- mask="url(#lineMdChatRoundDotsFilled0)"
441
- />
442
- </svg>
443
- );
@@ -1,31 +0,0 @@
1
- import { cn } from "@/utils";
2
- import React from "react";
3
-
4
- interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
5
-
6
- type InputComponent = React.ForwardRefExoticComponent<
7
- InputProps & React.RefAttributes<HTMLInputElement>
8
- > & {
9
- Password: typeof Password;
10
- };
11
-
12
- const Input: InputComponent = React.forwardRef<HTMLInputElement, InputProps>(
13
- (props, ref) => {
14
- return (
15
- <input
16
- {...props}
17
- autoComplete={props.autoComplete || props.name || "off"}
18
- ref={ref}
19
- className={cn("lulichat-input", props.className)}
20
- />
21
- );
22
- }
23
- ) as InputComponent;
24
-
25
- const Password = React.forwardRef<HTMLInputElement, InputProps>(
26
- (props, ref) => {
27
- return <input className="" {...props} ref={ref} />;
28
- }
29
- );
30
-
31
- export default Input;
package/src/constants.ts DELETED
@@ -1,32 +0,0 @@
1
- export const Colors = {
2
- primary: "#0E0E2C",
3
- secondary: "#755AE2",
4
- dark: "#0D0D0D",
5
- mood2: "#131313",
6
- dark2: "#8770E6",
7
- light_Dark: "#D3D3F1",
8
- secondary_dark: "#9278FA",
9
- helper: "#F5F3FF",
10
- cod: "#E4E4E4",
11
- yellow_500: "#BF6700",
12
- darkgreen: "#099976",
13
- light_gray: "#F8F9FB",
14
- orange: "#FF6B00",
15
- text: "#242424",
16
- BodyText: "#4A4A68",
17
- BodyTextAlpha: "#56566A",
18
- BodyTextLight: "#8C8CA1",
19
- green: "#12B669",
20
- blue: "#24214E",
21
- white: "#fff",
22
- gray: "#F5F7F9",
23
- sand: "#818181",
24
- icon: "#4E4E4E",
25
- tag: "#F3F4F6",
26
- outline: "#F1F8FF",
27
- modal: "#F9FAFB",
28
- border: "#E9E9E9",
29
- flat: "#F6F6F6",
30
- pale: "#EAEDF0;",
31
- grey: "#F8F8F8",
32
- } as const;