@twintag/twintag-form 1.6.1 → 1.6.2-beta.1

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 (27) hide show
  1. package/.turbo/turbo-build.log +11 -11
  2. package/CHANGELOG.md +221 -209
  3. package/README.md +407 -370
  4. package/dev/index.css +32 -32
  5. package/dev/main.tsx +460 -459
  6. package/dist/components/fields/date-picker.d.ts +1 -1
  7. package/dist/components/fields/file.d.ts +1 -1
  8. package/dist/components/fields/input.d.ts +1 -1
  9. package/dist/components/fields/textarea.d.ts +1 -1
  10. package/dist/components/provider.d.ts +1 -6
  11. package/dist/index.cjs +1 -1
  12. package/dist/index.d.ts +4 -3
  13. package/dist/index.js +152 -143
  14. package/dist/types/index.d.ts +16 -6
  15. package/dist/webcomponent.cjs +1 -1
  16. package/dist/webcomponent.d.ts +1 -1
  17. package/dist/webcomponent.js +3 -0
  18. package/lib/components/fields/date-picker.tsx +154 -154
  19. package/lib/components/fields/file.tsx +84 -83
  20. package/lib/components/fields/input.tsx +70 -70
  21. package/lib/components/fields/textarea.tsx +72 -68
  22. package/lib/components/provider.tsx +162 -163
  23. package/lib/index.tsx +45 -41
  24. package/lib/types/index.ts +102 -82
  25. package/lib/webcomponent.ts +2 -2
  26. package/package.json +1 -1
  27. package/vite.config.ts +2 -1
package/lib/components/fields/file.tsx CHANGED
@@ -1,83 +1,84 @@
1
- import type { FC } from 'react';
2
- import type { Props } from '@twintag/twintag-form/types';
3
-
4
- import { AsteriskIcon } from 'lucide-react';
5
- import { useFormContext } from 'react-hook-form';
6
-
7
- import {
8
- FormControl,
9
- FormDescription,
10
- FormField,
11
- FormItem,
12
- FormLabel,
13
- FormMessage,
14
- } from '@twintag/twintag-form/common/form';
15
- import { Input } from '@twintag/twintag-form/common/input';
16
- import { useTwintagForm } from '@twintag/twintag-form/components/provider';
17
-
18
- export const DEFAULT_FILE_VALUE = '';
19
-
20
- export const File: FC<Props<'input'>> = ({ label, bind, options }) => {
21
- const { control } = useFormContext();
22
- const { variant, size } = useTwintagForm();
23
-
24
- const isOptional = options?.optionalField;
25
-
26
- return (
27
- <FormField
28
- defaultValue={DEFAULT_FILE_VALUE}
29
- control={control}
30
- name={bind}
31
- rules={{
32
- required: isOptional ? false : (options?.error ?? true),
33
- }}
34
- render={({ field, formState }) => (
35
- <FormItem variant={variant}>
36
- <div className='space-y-1'>
37
- <FormLabel htmlFor={bind} size={size}>
38
- {label}
39
- {!isOptional ? (
40
- <span className='ml-0.5 inline-block'>
41
- <AsteriskIcon className='h-3 w-3 text-tf-destructive' />
42
- </span>
43
- ) : (
44
- <></>
45
- )}
46
- </FormLabel>
47
- {options?.description ? (
48
- <FormDescription size={size}>
49
- {options.description}
50
- </FormDescription>
51
- ) : (
52
- <></>
53
- )}
54
- </div>
55
- <FormControl>
56
- <Input
57
- ref={(el) => {
58
- field.ref(el);
59
-
60
- if (el && formState.isSubmitSuccessful) {
61
- el.value = '';
62
- }
63
- }}
64
- id={bind}
65
- type='file'
66
- name={field.name}
67
- size={size}
68
- variant={variant}
69
- multiple
70
- onBlur={field.onBlur}
71
- onChange={(e) => {
72
- if (e.target.files) {
73
- field.onChange(e.target.files);
74
- }
75
- }}
76
- />
77
- </FormControl>
78
- <FormMessage size={size} className='pt-1.5' />
79
- </FormItem>
80
- )}
81
- />
82
- );
83
- };
1
+ import type { FC } from 'react';
2
+ import type { Props } from '@twintag/twintag-form/types';
3
+
4
+ import { AsteriskIcon } from 'lucide-react';
5
+ import { useFormContext } from 'react-hook-form';
6
+
7
+ import {
8
+ FormControl,
9
+ FormDescription,
10
+ FormField,
11
+ FormItem,
12
+ FormLabel,
13
+ FormMessage,
14
+ } from '@twintag/twintag-form/common/form';
15
+ import { Input } from '@twintag/twintag-form/common/input';
16
+ import { useTwintagForm } from '@twintag/twintag-form/components/provider';
17
+
18
+ export const DEFAULT_FILE_VALUE = '';
19
+
20
+ export const File: FC<Props<'input', 'file'>> = ({ label, bind, options }) => {
21
+ const { control } = useFormContext();
22
+ const { variant, size, acceptFileType } = useTwintagForm();
23
+
24
+ const isOptional = options?.optionalField;
25
+
26
+ return (
27
+ <FormField
28
+ defaultValue={DEFAULT_FILE_VALUE}
29
+ control={control}
30
+ name={bind}
31
+ rules={{
32
+ required: isOptional ? false : (options?.error ?? true),
33
+ }}
34
+ render={({ field, formState }) => (
35
+ <FormItem variant={variant}>
36
+ <div className='space-y-1'>
37
+ <FormLabel htmlFor={bind} size={size}>
38
+ {label}
39
+ {!isOptional ? (
40
+ <span className='ml-0.5 inline-block'>
41
+ <AsteriskIcon className='h-3 w-3 text-tf-destructive' />
42
+ </span>
43
+ ) : (
44
+ <></>
45
+ )}
46
+ </FormLabel>
47
+ {options?.description ? (
48
+ <FormDescription size={size}>
49
+ {options.description}
50
+ </FormDescription>
51
+ ) : (
52
+ <></>
53
+ )}
54
+ </div>
55
+ <FormControl>
56
+ <Input
57
+ ref={(el) => {
58
+ field.ref(el);
59
+
60
+ if (el && formState.isSubmitSuccessful) {
61
+ el.value = '';
62
+ }
63
+ }}
64
+ id={bind}
65
+ type='file'
66
+ accept={options?.accept ?? acceptFileType}
67
+ name={field.name}
68
+ size={size}
69
+ variant={variant}
70
+ multiple
71
+ onBlur={field.onBlur}
72
+ onChange={(e) => {
73
+ if (e.target.files) {
74
+ field.onChange(e.target.files);
75
+ }
76
+ }}
77
+ />
78
+ </FormControl>
79
+ <FormMessage size={size} className='pt-1.5' />
80
+ </FormItem>
81
+ )}
82
+ />
83
+ );
84
+ };
package/lib/components/fields/input.tsx CHANGED
@@ -1,70 +1,70 @@
1
- import type { FC } from 'react';
2
- import type { Props } from '@twintag/twintag-form/types';
3
-
4
- import { AsteriskIcon } from 'lucide-react';
5
- import { useFormContext } from 'react-hook-form';
6
-
7
- import {
8
- FormControl,
9
- FormDescription,
10
- FormField,
11
- FormItem,
12
- FormLabel,
13
- FormMessage,
14
- } from '@twintag/twintag-form/common/form';
15
- import { Input as InputPrimitive } from '@twintag/twintag-form/common/input';
16
- import { useTwintagForm } from '@twintag/twintag-form/components/provider';
17
-
18
- export const DEFAULT_INPUT_VALUE = '';
19
-
20
- export const Input: FC<Props<'input'>> = ({ label, bind, options }) => {
21
- const { control } = useFormContext();
22
-
23
- const { variant, size } = useTwintagForm();
24
-
25
- const isOptional = options?.optionalField;
26
-
27
- return (
28
- <FormField
29
- defaultValue={DEFAULT_INPUT_VALUE}
30
- control={control}
31
- name={bind}
32
- rules={{
33
- required: isOptional ? false : (options?.error ?? true),
34
- }}
35
- render={({ field }) => (
36
- <FormItem variant={variant}>
37
- <div className='space-y-1'>
38
- <FormLabel size={size}>
39
- {label}
40
- {!isOptional ? (
41
- <span className='ml-0.5 inline-block'>
42
- <AsteriskIcon className='h-3 w-3 text-tf-destructive' />
43
- </span>
44
- ) : (
45
- <></>
46
- )}
47
- </FormLabel>
48
- {options?.description ? (
49
- <FormDescription size={size}>
50
- {options.description}
51
- </FormDescription>
52
- ) : (
53
- <></>
54
- )}
55
- </div>
56
- <FormControl>
57
- <InputPrimitive
58
- type='text'
59
- size={size}
60
- variant={variant}
61
- placeholder={options?.placeholder ?? 'Write here...'}
62
- {...field}
63
- />
64
- </FormControl>
65
- <FormMessage size={size} className='pt-1' />
66
- </FormItem>
67
- )}
68
- />
69
- );
70
- };
1
+ import type { FC } from 'react';
2
+ import type { Props } from '@twintag/twintag-form/types';
3
+
4
+ import { AsteriskIcon } from 'lucide-react';
5
+ import { useFormContext } from 'react-hook-form';
6
+
7
+ import {
8
+ FormControl,
9
+ FormDescription,
10
+ FormField,
11
+ FormItem,
12
+ FormLabel,
13
+ FormMessage,
14
+ } from '@twintag/twintag-form/common/form';
15
+ import { Input as InputPrimitive } from '@twintag/twintag-form/common/input';
16
+ import { useTwintagForm } from '@twintag/twintag-form/components/provider';
17
+
18
+ export const DEFAULT_INPUT_VALUE = '';
19
+
20
+ export const Input: FC<Props<'input', 'text'>> = ({ label, bind, options }) => {
21
+ const { control } = useFormContext();
22
+
23
+ const { variant, size } = useTwintagForm();
24
+
25
+ const isOptional = options?.optionalField;
26
+
27
+ return (
28
+ <FormField
29
+ defaultValue={DEFAULT_INPUT_VALUE}
30
+ control={control}
31
+ name={bind}
32
+ rules={{
33
+ required: isOptional ? false : (options?.error ?? true),
34
+ }}
35
+ render={({ field }) => (
36
+ <FormItem variant={variant}>
37
+ <div className='space-y-1'>
38
+ <FormLabel size={size}>
39
+ {label}
40
+ {!isOptional ? (
41
+ <span className='ml-0.5 inline-block'>
42
+ <AsteriskIcon className='h-3 w-3 text-tf-destructive' />
43
+ </span>
44
+ ) : (
45
+ <></>
46
+ )}
47
+ </FormLabel>
48
+ {options?.description ? (
49
+ <FormDescription size={size}>
50
+ {options.description}
51
+ </FormDescription>
52
+ ) : (
53
+ <></>
54
+ )}
55
+ </div>
56
+ <FormControl>
57
+ <InputPrimitive
58
+ type='text'
59
+ size={size}
60
+ variant={variant}
61
+ placeholder={options?.placeholder ?? 'Write here...'}
62
+ {...field}
63
+ />
64
+ </FormControl>
65
+ <FormMessage size={size} className='pt-1' />
66
+ </FormItem>
67
+ )}
68
+ />
69
+ );
70
+ };
package/lib/components/fields/textarea.tsx CHANGED
@@ -1,68 +1,72 @@
1
- import type { FC } from 'react';
2
- import type { Props } from '@twintag/twintag-form/types';
3
-
4
- import { AsteriskIcon } from 'lucide-react';
5
- import { useFormContext } from 'react-hook-form';
6
-
7
- import {
8
- FormControl,
9
- FormDescription,
10
- FormField,
11
- FormItem,
12
- FormLabel,
13
- FormMessage,
14
- } from '@twintag/twintag-form/common/form';
15
- import { Textarea as CommonTextarea } from '@twintag/twintag-form/common/textarea';
16
- import { useTwintagForm } from '@twintag/twintag-form/components/provider';
17
-
18
- export const DEFAULT_TEXTAREA_VALUE = '';
19
-
20
- export const Textarea: FC<Props<'input'>> = ({ label, bind, options }) => {
21
- const { control } = useFormContext();
22
- const { variant, size } = useTwintagForm();
23
-
24
- const isOptional = options?.optionalField;
25
-
26
- return (
27
- <FormField
28
- defaultValue={DEFAULT_TEXTAREA_VALUE}
29
- control={control}
30
- name={bind}
31
- rules={{
32
- required: isOptional ? false : (options?.error ?? true),
33
- }}
34
- render={({ field }) => (
35
- <FormItem variant={variant}>
36
- <div className='space-y-1'>
37
- <FormLabel size={size}>
38
- {label}
39
- {!isOptional ? (
40
- <span className='ml-0.5 inline-block'>
41
- <AsteriskIcon className='h-3 w-3 text-tf-destructive' />
42
- </span>
43
- ) : (
44
- <></>
45
- )}
46
- </FormLabel>
47
- {options?.description ? (
48
- <FormDescription size={size}>
49
- {options.description}
50
- </FormDescription>
51
- ) : (
52
- <></>
53
- )}
54
- </div>
55
- <FormControl>
56
- <CommonTextarea
57
- {...field}
58
- size={size}
59
- variant={variant}
60
- placeholder={options?.placeholder ?? 'Write here...'}
61
- />
62
- </FormControl>
63
- <FormMessage size={size} className='pt-1' />
64
- </FormItem>
65
- )}
66
- />
67
- );
68
- };
1
+ import type { FC } from 'react';
2
+ import type { Props } from '@twintag/twintag-form/types';
3
+
4
+ import { AsteriskIcon } from 'lucide-react';
5
+ import { useFormContext } from 'react-hook-form';
6
+
7
+ import {
8
+ FormControl,
9
+ FormDescription,
10
+ FormField,
11
+ FormItem,
12
+ FormLabel,
13
+ FormMessage,
14
+ } from '@twintag/twintag-form/common/form';
15
+ import { Textarea as CommonTextarea } from '@twintag/twintag-form/common/textarea';
16
+ import { useTwintagForm } from '@twintag/twintag-form/components/provider';
17
+
18
+ export const DEFAULT_TEXTAREA_VALUE = '';
19
+
20
+ export const Textarea: FC<Props<'input', 'text'>> = ({
21
+ label,
22
+ bind,
23
+ options,
24
+ }) => {
25
+ const { control } = useFormContext();
26
+ const { variant, size } = useTwintagForm();
27
+
28
+ const isOptional = options?.optionalField;
29
+
30
+ return (
31
+ <FormField
32
+ defaultValue={DEFAULT_TEXTAREA_VALUE}
33
+ control={control}
34
+ name={bind}
35
+ rules={{
36
+ required: isOptional ? false : (options?.error ?? true),
37
+ }}
38
+ render={({ field }) => (
39
+ <FormItem variant={variant}>
40
+ <div className='space-y-1'>
41
+ <FormLabel size={size}>
42
+ {label}
43
+ {!isOptional ? (
44
+ <span className='ml-0.5 inline-block'>
45
+ <AsteriskIcon className='h-3 w-3 text-tf-destructive' />
46
+ </span>
47
+ ) : (
48
+ <></>
49
+ )}
50
+ </FormLabel>
51
+ {options?.description ? (
52
+ <FormDescription size={size}>
53
+ {options.description}
54
+ </FormDescription>
55
+ ) : (
56
+ <></>
57
+ )}
58
+ </div>
59
+ <FormControl>
60
+ <CommonTextarea
61
+ {...field}
62
+ size={size}
63
+ variant={variant}
64
+ placeholder={options?.placeholder ?? 'Write here...'}
65
+ />
66
+ </FormControl>
67
+ <FormMessage size={size} className='pt-1' />
68
+ </FormItem>
69
+ )}
70
+ />
71
+ );
72
+ };