@twintag/twintag-form 1.6.2-beta.1 → 1.7.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 (57) hide show
  1. package/.turbo/turbo-build.log +16 -16
  2. package/CHANGELOG.md +241 -221
  3. package/README.md +407 -407
  4. package/dev/index.css +32 -32
  5. package/dev/main.tsx +461 -460
  6. package/dist/common/button.d.ts +0 -1
  7. package/dist/common/form.d.ts +0 -1
  8. package/dist/common/icon.d.ts +0 -1
  9. package/dist/common/input.d.ts +0 -1
  10. package/dist/common/label.d.ts +0 -1
  11. package/dist/common/textarea.d.ts +0 -1
  12. package/dist/components/config.d.ts +0 -1
  13. package/dist/components/containers/accordion.d.ts +1 -2
  14. package/dist/components/containers/category.d.ts +0 -1
  15. package/dist/components/fields/checkbox.d.ts +0 -1
  16. package/dist/components/fields/file.d.ts +0 -1
  17. package/dist/components/fields/input.d.ts +0 -1
  18. package/dist/components/fields/radiogroup.d.ts +0 -1
  19. package/dist/components/fields/submit.d.ts +0 -1
  20. package/dist/components/fields/textarea.d.ts +0 -1
  21. package/dist/components/fields/toggle.d.ts +0 -1
  22. package/dist/components/fields/tri-toggle.d.ts +0 -1
  23. package/dist/components/form.d.ts +0 -1
  24. package/dist/components/input.d.ts +0 -1
  25. package/dist/components/label.d.ts +0 -1
  26. package/dist/components/provider.d.ts +1 -2
  27. package/dist/index.cjs +1 -1
  28. package/dist/index.d.ts +0 -1
  29. package/dist/index.js +1437 -1601
  30. package/dist/types/index.d.ts +0 -1
  31. package/dist/utils/data.d.ts +0 -1
  32. package/dist/utils/style.d.ts +0 -1
  33. package/dist/webcomponent.cjs +1 -1
  34. package/dist/webcomponent.js +1118 -1104
  35. package/lib/common/icon.tsx +2 -1
  36. package/lib/components/config.tsx +1 -0
  37. package/lib/components/containers/accordion.tsx +3 -2
  38. package/lib/components/containers/category.tsx +1 -1
  39. package/lib/components/fields/checkbox.tsx +3 -6
  40. package/lib/components/fields/date-picker.tsx +151 -154
  41. package/lib/components/fields/file.tsx +81 -84
  42. package/lib/components/fields/input.tsx +67 -70
  43. package/lib/components/fields/radiogroup.tsx +3 -6
  44. package/lib/components/fields/submit.tsx +1 -0
  45. package/lib/components/fields/textarea.tsx +69 -72
  46. package/lib/components/fields/toggle.tsx +3 -6
  47. package/lib/components/fields/tri-toggle.tsx +3 -4
  48. package/lib/components/input.tsx +2 -1
  49. package/lib/components/label.tsx +1 -0
  50. package/lib/components/provider.tsx +163 -162
  51. package/lib/components/renderer.tsx +2 -1
  52. package/lib/index.tsx +46 -45
  53. package/lib/types/index.ts +102 -102
  54. package/lib/webcomponent.ts +1 -2
  55. package/package.json +9 -10
  56. package/prettier.config.mjs +1 -17
  57. package/vite.config.ts +2 -1
package/lib/components/fields/input.tsx CHANGED
@@ -1,70 +1,67 @@
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
- };
1
+ import type { FC } from 'react';
2
+
3
+ import type { Props } from '@twintag/twintag-form/types';
4
+
5
+ import { AsteriskIcon } from 'lucide-react';
6
+ import { useFormContext } from 'react-hook-form';
7
+
8
+ import {
9
+ FormControl,
10
+ FormDescription,
11
+ FormField,
12
+ FormItem,
13
+ FormLabel,
14
+ FormMessage,
15
+ } from '@twintag/twintag-form/common/form';
16
+ import { Input as InputPrimitive } from '@twintag/twintag-form/common/input';
17
+ import { useTwintagForm } from '@twintag/twintag-form/components/provider';
18
+
19
+ export const DEFAULT_INPUT_VALUE = '';
20
+
21
+ export const Input: FC<Props<'input', 'text'>> = ({ label, bind, options }) => {
22
+ const { control } = useFormContext();
23
+
24
+ const { variant, size } = useTwintagForm();
25
+
26
+ const isOptional = options?.optionalField;
27
+
28
+ return (
29
+ <FormField
30
+ defaultValue={DEFAULT_INPUT_VALUE}
31
+ control={control}
32
+ name={bind}
33
+ rules={{
34
+ required: isOptional ? false : (options?.error ?? true),
35
+ }}
36
+ render={({ field }) => (
37
+ <FormItem variant={variant}>
38
+ <div className='space-y-1'>
39
+ <FormLabel size={size}>
40
+ {label}
41
+ {!isOptional ? (
42
+ <span className='ml-0.5 inline-block'>
43
+ <AsteriskIcon className='h-3 w-3 text-tf-destructive' />
44
+ </span>
45
+ ) : null}
46
+ </FormLabel>
47
+ {options?.description ? (
48
+ <FormDescription size={size}>
49
+ {options.description}
50
+ </FormDescription>
51
+ ) : null}
52
+ </div>
53
+ <FormControl>
54
+ <InputPrimitive
55
+ type='text'
56
+ size={size}
57
+ variant={variant}
58
+ placeholder={options?.placeholder ?? 'Write here...'}
59
+ {...field}
60
+ />
61
+ </FormControl>
62
+ <FormMessage size={size} className='pt-1' />
63
+ </FormItem>
64
+ )}
65
+ />
66
+ );
67
+ };
package/lib/components/fields/radiogroup.tsx CHANGED
@@ -1,4 +1,5 @@
1
1
  import type { FC } from 'react';
2
+
2
3
  import type { Props } from '@twintag/twintag-form/types';
3
4
 
4
5
  import { AsteriskIcon } from 'lucide-react';
@@ -47,17 +48,13 @@ export const RadioGroup: FC<
47
48
  <span className='ml-0.5 inline-block'>
48
49
  <AsteriskIcon className='h-3 w-3 text-tf-destructive' />
49
50
  </span>
50
- ) : (
51
- <></>
52
- )}
51
+ ) : null}
53
52
  </FormLabel>
54
53
  {options?.description ? (
55
54
  <FormDescription size={size}>
56
55
  {options.description}
57
56
  </FormDescription>
58
- ) : (
59
- <></>
60
- )}
57
+ ) : null}
61
58
  </div>
62
59
  <FormControl>
63
60
  <CommonRadioGroup
package/lib/components/fields/submit.tsx CHANGED
@@ -1,4 +1,5 @@
1
1
  import type { FC } from 'react';
2
+
2
3
  import type { Props } from '@twintag/twintag-form/types';
3
4
 
4
5
  import { Button } from '@twintag/twintag-form/common/button';
package/lib/components/fields/textarea.tsx CHANGED
@@ -1,72 +1,69 @@
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
- };
1
+ import type { FC } from 'react';
2
+
3
+ import type { Props } from '@twintag/twintag-form/types';
4
+
5
+ import { AsteriskIcon } from 'lucide-react';
6
+ import { useFormContext } from 'react-hook-form';
7
+
8
+ import {
9
+ FormControl,
10
+ FormDescription,
11
+ FormField,
12
+ FormItem,
13
+ FormLabel,
14
+ FormMessage,
15
+ } from '@twintag/twintag-form/common/form';
16
+ import { Textarea as CommonTextarea } from '@twintag/twintag-form/common/textarea';
17
+ import { useTwintagForm } from '@twintag/twintag-form/components/provider';
18
+
19
+ export const DEFAULT_TEXTAREA_VALUE = '';
20
+
21
+ export const Textarea: FC<Props<'input', 'text'>> = ({
22
+ label,
23
+ bind,
24
+ options,
25
+ }) => {
26
+ const { control } = useFormContext();
27
+ const { variant, size } = useTwintagForm();
28
+
29
+ const isOptional = options?.optionalField;
30
+
31
+ return (
32
+ <FormField
33
+ defaultValue={DEFAULT_TEXTAREA_VALUE}
34
+ control={control}
35
+ name={bind}
36
+ rules={{
37
+ required: isOptional ? false : (options?.error ?? true),
38
+ }}
39
+ render={({ field }) => (
40
+ <FormItem variant={variant}>
41
+ <div className='space-y-1'>
42
+ <FormLabel size={size}>
43
+ {label}
44
+ {!isOptional ? (
45
+ <span className='ml-0.5 inline-block'>
46
+ <AsteriskIcon className='h-3 w-3 text-tf-destructive' />
47
+ </span>
48
+ ) : null}
49
+ </FormLabel>
50
+ {options?.description ? (
51
+ <FormDescription size={size}>
52
+ {options.description}
53
+ </FormDescription>
54
+ ) : null}
55
+ </div>
56
+ <FormControl>
57
+ <CommonTextarea
58
+ {...field}
59
+ size={size}
60
+ variant={variant}
61
+ placeholder={options?.placeholder ?? 'Write here...'}
62
+ />
63
+ </FormControl>
64
+ <FormMessage size={size} className='pt-1' />
65
+ </FormItem>
66
+ )}
67
+ />
68
+ );
69
+ };
package/lib/components/fields/toggle.tsx CHANGED
@@ -1,4 +1,5 @@
1
1
  import type { FC } from 'react';
2
+
2
3
  import type { Props } from '@twintag/twintag-form/types';
3
4
 
4
5
  import { AsteriskIcon } from 'lucide-react';
@@ -41,17 +42,13 @@ export const Toggle: FC<Props<'input'>> = ({ label, bind, options }) => {
41
42
  <span className='ml-0.5 inline-block'>
42
43
  <AsteriskIcon className='h-3 w-3 text-tf-destructive' />
43
44
  </span>
44
- ) : (
45
- <></>
46
- )}
45
+ ) : null}
47
46
  </FormLabel>
48
47
  {options?.description ? (
49
48
  <FormDescription size={size}>
50
49
  {options.description}
51
50
  </FormDescription>
52
- ) : (
53
- <></>
54
- )}
51
+ ) : null}
55
52
  </div>
56
53
  <FormControl>
57
54
  <Switch
package/lib/components/fields/tri-toggle.tsx CHANGED
@@ -1,7 +1,8 @@
1
1
  import type { FC } from 'react';
2
- import type { Props } from '@twintag/twintag-form/types';
3
2
  import type { VariantProps } from 'tailwind-variants';
4
3
 
4
+ import type { Props } from '@twintag/twintag-form/types';
5
+
5
6
  import * as React from 'react';
6
7
  import * as SliderPrimitive from '@radix-ui/react-slider';
7
8
  import { useFormContext } from 'react-hook-form';
@@ -111,9 +112,7 @@ export const TriToggle: FC<Props<'input'>> = ({ label, bind, options }) => {
111
112
  <FormDescription size={size}>
112
113
  {options.description}
113
114
  </FormDescription>
114
- ) : (
115
- <></>
116
- )}
115
+ ) : null}
117
116
  </div>
118
117
  <FormControl>
119
118
  <Slider
package/lib/components/input.tsx CHANGED
@@ -1,4 +1,5 @@
1
1
  import type { FC } from 'react';
2
+
2
3
  import type { Props } from '../types';
3
4
 
4
5
  import { Inputs } from './config';
@@ -6,7 +7,7 @@ import { Inputs } from './config';
6
7
  export const Input: FC<Props<'input'>> = ({ subtype, ...rest }) => {
7
8
  const Comp = Inputs.get(subtype!)?.component;
8
9
 
9
- if (!Comp) return <></>;
10
+ if (!Comp) return null;
10
11
 
11
12
  return <Comp {...rest} />;
12
13
  };
package/lib/components/label.tsx CHANGED
@@ -1,4 +1,5 @@
1
1
  import type { FC } from 'react';
2
+
2
3
  import type { Props } from '../types';
3
4
 
4
5
  import { Label as LabelComp } from '../common/label';