@twintag/twintag-form 0.5.0 → 1.0.0-beta.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 (80) hide show
  1. package/.eslintrc.cjs +6 -1
  2. package/.turbo/turbo-build.log +15 -10
  3. package/.turbo/turbo-lint.log +4 -0
  4. package/CHANGELOG.md +17 -0
  5. package/README.md +87 -59
  6. package/dev/index.css +29 -0
  7. package/dev/main.tsx +163 -0
  8. package/dist/common/button.d.ts +137 -0
  9. package/dist/common/checkbox.d.ts +4 -0
  10. package/dist/common/form.d.ts +24 -0
  11. package/dist/common/input.d.ts +4 -0
  12. package/dist/common/label.d.ts +4 -0
  13. package/dist/common/radiogroup.d.ts +5 -0
  14. package/dist/common/switch.d.ts +4 -0
  15. package/dist/common/textarea.d.ts +4 -0
  16. package/dist/components/Input/checkbox.d.ts +2 -6
  17. package/dist/components/Input/file.d.ts +2 -6
  18. package/dist/components/Input/index.d.ts +2 -2
  19. package/dist/components/Input/radiogroup.d.ts +3 -0
  20. package/dist/components/Input/simple.d.ts +2 -6
  21. package/dist/components/Input/submit.d.ts +2 -6
  22. package/dist/components/Input/textarea.d.ts +2 -6
  23. package/dist/components/Input/toggle.d.ts +2 -6
  24. package/dist/components/Render/index.d.ts +7 -0
  25. package/dist/components/Render/useJson.d.ts +2 -0
  26. package/dist/components/{Label/index.d.ts → category.d.ts} +3 -4
  27. package/dist/components/form.d.ts +7 -0
  28. package/dist/components/index.d.ts +8 -4
  29. package/dist/index.d.ts +8 -9
  30. package/dist/provider.d.ts +8 -0
  31. package/dist/twintag-form.react.js +7961 -8082
  32. package/dist/twintag-form.webcomponent.js +2003 -1765
  33. package/dist/types/index.d.ts +33 -0
  34. package/index.html +13 -0
  35. package/lib/common/button.tsx +49 -0
  36. package/lib/common/checkbox.tsx +40 -0
  37. package/lib/common/form.tsx +192 -0
  38. package/lib/common/input.tsx +55 -0
  39. package/lib/common/label.tsx +26 -0
  40. package/lib/common/radiogroup.tsx +56 -0
  41. package/lib/common/switch.tsx +39 -0
  42. package/lib/common/textarea.tsx +53 -0
  43. package/lib/components/Input/checkbox.tsx +55 -42
  44. package/lib/components/Input/file.tsx +64 -72
  45. package/lib/components/Input/index.tsx +15 -15
  46. package/lib/components/Input/radiogroup.tsx +84 -0
  47. package/lib/components/Input/simple.tsx +50 -28
  48. package/lib/components/Input/submit.tsx +4 -13
  49. package/lib/components/Input/textarea.tsx +49 -27
  50. package/lib/components/Input/toggle.tsx +54 -45
  51. package/lib/components/Render/index.tsx +30 -0
  52. package/lib/components/Render/useJson.ts +76 -0
  53. package/lib/components/category.tsx +31 -0
  54. package/lib/components/form.tsx +75 -0
  55. package/lib/components/index.tsx +27 -4
  56. package/lib/index.tsx +24 -48
  57. package/lib/provider.tsx +36 -0
  58. package/lib/types/index.ts +37 -0
  59. package/lib/webcomponent.ts +4 -4
  60. package/package.json +21 -12
  61. package/prettier.config.mjs +26 -0
  62. package/tailwind.config.ts +43 -0
  63. package/tsconfig.json +25 -6
  64. package/twind.config.ts +4 -21
  65. package/vite.config.ts +2 -2
  66. package/dist/components/Category/__styles.d.ts +0 -19
  67. package/dist/components/Category/index.d.ts +0 -8
  68. package/dist/components/Form/index.d.ts +0 -12
  69. package/dist/components/Input/__props.d.ts +0 -10
  70. package/dist/components/Input/__styles.d.ts +0 -245
  71. package/dist/styles.d.ts +0 -262
  72. package/lib/__stories__/Form.stories.tsx +0 -141
  73. package/lib/components/Category/__styles.ts +0 -12
  74. package/lib/components/Category/index.tsx +0 -26
  75. package/lib/components/Form/index.tsx +0 -86
  76. package/lib/components/Input/__props.ts +0 -10
  77. package/lib/components/Input/__styles.ts +0 -132
  78. package/lib/components/Label/index.tsx +0 -24
  79. package/lib/styles.ts +0 -143
  80. package/tailwind.config.cjs +0 -8
package/dist/components/Input/__styles.d.ts DELETED
@@ -1,245 +0,0 @@
1
- import { TVConfig } from 'tailwind-variants/dist/config.js';
2
- import { TVReturnType, TVVariantsDefault, ClassValue, SlotsClassValue } from 'tailwind-variants';
3
- export declare const labelStyle: TVReturnType<TVVariantsDefault<undefined, "text-label"> | {
4
- [x: string]: {
5
- [x: string]: ClassValue | SlotsClassValue<undefined, "text-label">;
6
- } | undefined;
7
- } | {}, undefined, "text-label", TVConfig<unknown, TVVariantsDefault<undefined, "text-label"> | {}>, TVVariantsDefault<undefined, "text-label"> | {}, undefined>;
8
- export declare const containerStyle: TVReturnType<TVVariantsDefault<undefined, ""> | {
9
- [x: string]: {
10
- [x: string]: ClassValue | SlotsClassValue<undefined, "">;
11
- } | undefined;
12
- } | {}, undefined, "", TVConfig<unknown, TVVariantsDefault<undefined, ""> | {}>, TVVariantsDefault<undefined, ""> | {}, undefined>;
13
- export declare const checkboxStyle: TVReturnType<{
14
- variant: {
15
- alpha: {
16
- checkbox: string;
17
- };
18
- beta: {
19
- checkbox: string;
20
- };
21
- };
22
- }, {
23
- container: string;
24
- checkbox: string;
25
- }, undefined, TVConfig<{
26
- variant: {
27
- alpha: {
28
- checkbox: string;
29
- };
30
- beta: {
31
- checkbox: string;
32
- };
33
- };
34
- }, {
35
- variant: {
36
- alpha: {
37
- checkbox: string;
38
- };
39
- beta: {
40
- checkbox: string;
41
- };
42
- };
43
- }>, {
44
- variant: {
45
- alpha: {
46
- checkbox: string;
47
- };
48
- beta: {
49
- checkbox: string;
50
- };
51
- };
52
- }, {
53
- container: string;
54
- checkbox: string;
55
- }>;
56
- export declare const fileStyle: TVReturnType<{
57
- variant: {
58
- alpha: {
59
- container: string;
60
- input: string;
61
- };
62
- beta: {
63
- container: string;
64
- input: string;
65
- };
66
- };
67
- }, {
68
- container: string;
69
- span: string;
70
- input: string;
71
- }, undefined, TVConfig<{
72
- variant: {
73
- alpha: {
74
- container: string;
75
- input: string;
76
- };
77
- beta: {
78
- container: string;
79
- input: string;
80
- };
81
- };
82
- }, {
83
- variant: {
84
- alpha: {
85
- container: string;
86
- input: string;
87
- };
88
- beta: {
89
- container: string;
90
- input: string;
91
- };
92
- };
93
- }>, {
94
- variant: {
95
- alpha: {
96
- container: string;
97
- input: string;
98
- };
99
- beta: {
100
- container: string;
101
- input: string;
102
- };
103
- };
104
- }, {
105
- container: string;
106
- span: string;
107
- input: string;
108
- }>;
109
- export declare const simpleStyle: TVReturnType<{
110
- variant: {
111
- alpha: {
112
- container: string;
113
- input: string;
114
- };
115
- beta: {
116
- container: string;
117
- input: string;
118
- };
119
- };
120
- }, {
121
- container: string;
122
- span: string;
123
- input: string;
124
- }, undefined, TVConfig<{
125
- variant: {
126
- alpha: {
127
- container: string;
128
- input: string;
129
- };
130
- beta: {
131
- container: string;
132
- input: string;
133
- };
134
- };
135
- }, {
136
- variant: {
137
- alpha: {
138
- container: string;
139
- input: string;
140
- };
141
- beta: {
142
- container: string;
143
- input: string;
144
- };
145
- };
146
- }>, {
147
- variant: {
148
- alpha: {
149
- container: string;
150
- input: string;
151
- };
152
- beta: {
153
- container: string;
154
- input: string;
155
- };
156
- };
157
- }, {
158
- container: string;
159
- span: string;
160
- input: string;
161
- }>;
162
- export declare const toggleStyle: TVReturnType<{
163
- variant: {
164
- alpha: {
165
- container: string;
166
- input: string;
167
- thumb: string;
168
- };
169
- beta: {
170
- container: string;
171
- input: string;
172
- thumb: string;
173
- };
174
- };
175
- }, {
176
- container: string;
177
- span: string;
178
- input: string;
179
- thumb: string;
180
- }, undefined, TVConfig<{
181
- variant: {
182
- alpha: {
183
- container: string;
184
- input: string;
185
- thumb: string;
186
- };
187
- beta: {
188
- container: string;
189
- input: string;
190
- thumb: string;
191
- };
192
- };
193
- }, {
194
- variant: {
195
- alpha: {
196
- container: string;
197
- input: string;
198
- thumb: string;
199
- };
200
- beta: {
201
- container: string;
202
- input: string;
203
- thumb: string;
204
- };
205
- };
206
- }>, {
207
- variant: {
208
- alpha: {
209
- container: string;
210
- input: string;
211
- thumb: string;
212
- };
213
- beta: {
214
- container: string;
215
- input: string;
216
- thumb: string;
217
- };
218
- };
219
- }, {
220
- container: string;
221
- span: string;
222
- input: string;
223
- thumb: string;
224
- }>;
225
- export declare const submitStyle: TVReturnType<{
226
- variant: {
227
- alpha: "bg-primary text-white px-4 py-2 rounded-md";
228
- beta: "bg-primary text-white px-4 py-2";
229
- };
230
- }, undefined, "w-max max-w-full mt-2", TVConfig<{
231
- variant: {
232
- alpha: "bg-primary text-white px-4 py-2 rounded-md";
233
- beta: "bg-primary text-white px-4 py-2";
234
- };
235
- }, {
236
- variant: {
237
- alpha: "bg-primary text-white px-4 py-2 rounded-md";
238
- beta: "bg-primary text-white px-4 py-2";
239
- };
240
- }>, {
241
- variant: {
242
- alpha: "bg-primary text-white px-4 py-2 rounded-md";
243
- beta: "bg-primary text-white px-4 py-2";
244
- };
245
- }, undefined>;
package/dist/styles.d.ts DELETED
@@ -1,262 +0,0 @@
1
- import { TVConfig } from 'tailwind-variants/dist/config.js';
2
- import { TVReturnType, TVVariantsDefault, ClassValue, SlotsClassValue } from 'tailwind-variants';
3
- export declare const labelStyle: TVReturnType<TVVariantsDefault<undefined, "text-label"> | {
4
- [x: string]: {
5
- [x: string]: ClassValue | SlotsClassValue<undefined, "text-label">;
6
- } | undefined;
7
- } | {}, undefined, "text-label", TVConfig<unknown, TVVariantsDefault<undefined, "text-label"> | {}>, TVVariantsDefault<undefined, "text-label"> | {}, undefined>;
8
- export declare const containerStyle: TVReturnType<TVVariantsDefault<undefined, "my-2"> | {
9
- [x: string]: {
10
- [x: string]: ClassValue | SlotsClassValue<undefined, "my-2">;
11
- } | undefined;
12
- } | {}, undefined, "my-2", TVConfig<unknown, TVVariantsDefault<undefined, "my-2"> | {}>, TVVariantsDefault<undefined, "my-2"> | {}, undefined>;
13
- export declare const categoryStyle: TVReturnType<{
14
- variant: {};
15
- }, {
16
- container: string;
17
- span: string;
18
- items: string;
19
- }, undefined, TVConfig<{
20
- variant: {};
21
- }, {
22
- variant: {};
23
- }>, {
24
- variant: {};
25
- }, {
26
- container: string;
27
- span: string;
28
- items: string;
29
- }>;
30
- export declare const checkboxStyle: TVReturnType<{
31
- variant: {
32
- alpha: {
33
- checkbox: string;
34
- };
35
- beta: {
36
- checkbox: string;
37
- };
38
- };
39
- }, {
40
- container: string;
41
- checkbox: string;
42
- }, undefined, TVConfig<{
43
- variant: {
44
- alpha: {
45
- checkbox: string;
46
- };
47
- beta: {
48
- checkbox: string;
49
- };
50
- };
51
- }, {
52
- variant: {
53
- alpha: {
54
- checkbox: string;
55
- };
56
- beta: {
57
- checkbox: string;
58
- };
59
- };
60
- }>, {
61
- variant: {
62
- alpha: {
63
- checkbox: string;
64
- };
65
- beta: {
66
- checkbox: string;
67
- };
68
- };
69
- }, {
70
- container: string;
71
- checkbox: string;
72
- }>;
73
- export declare const fileStyle: TVReturnType<{
74
- variant: {
75
- alpha: {
76
- container: string;
77
- input: string;
78
- };
79
- beta: {
80
- container: string;
81
- input: string;
82
- };
83
- };
84
- }, {
85
- container: string;
86
- span: string;
87
- input: string;
88
- }, undefined, TVConfig<{
89
- variant: {
90
- alpha: {
91
- container: string;
92
- input: string;
93
- };
94
- beta: {
95
- container: string;
96
- input: string;
97
- };
98
- };
99
- }, {
100
- variant: {
101
- alpha: {
102
- container: string;
103
- input: string;
104
- };
105
- beta: {
106
- container: string;
107
- input: string;
108
- };
109
- };
110
- }>, {
111
- variant: {
112
- alpha: {
113
- container: string;
114
- input: string;
115
- };
116
- beta: {
117
- container: string;
118
- input: string;
119
- };
120
- };
121
- }, {
122
- container: string;
123
- span: string;
124
- input: string;
125
- }>;
126
- export declare const simpleStyle: TVReturnType<{
127
- variant: {
128
- alpha: {
129
- container: string;
130
- input: string;
131
- };
132
- beta: {
133
- container: string;
134
- input: string;
135
- };
136
- };
137
- }, {
138
- container: string;
139
- span: string;
140
- input: string;
141
- }, undefined, TVConfig<{
142
- variant: {
143
- alpha: {
144
- container: string;
145
- input: string;
146
- };
147
- beta: {
148
- container: string;
149
- input: string;
150
- };
151
- };
152
- }, {
153
- variant: {
154
- alpha: {
155
- container: string;
156
- input: string;
157
- };
158
- beta: {
159
- container: string;
160
- input: string;
161
- };
162
- };
163
- }>, {
164
- variant: {
165
- alpha: {
166
- container: string;
167
- input: string;
168
- };
169
- beta: {
170
- container: string;
171
- input: string;
172
- };
173
- };
174
- }, {
175
- container: string;
176
- span: string;
177
- input: string;
178
- }>;
179
- export declare const toggleStyle: TVReturnType<{
180
- variant: {
181
- alpha: {
182
- container: string;
183
- input: string;
184
- thumb: string;
185
- };
186
- beta: {
187
- container: string;
188
- input: string;
189
- thumb: string;
190
- };
191
- };
192
- }, {
193
- container: string;
194
- span: string;
195
- input: string;
196
- thumb: string;
197
- }, undefined, TVConfig<{
198
- variant: {
199
- alpha: {
200
- container: string;
201
- input: string;
202
- thumb: string;
203
- };
204
- beta: {
205
- container: string;
206
- input: string;
207
- thumb: string;
208
- };
209
- };
210
- }, {
211
- variant: {
212
- alpha: {
213
- container: string;
214
- input: string;
215
- thumb: string;
216
- };
217
- beta: {
218
- container: string;
219
- input: string;
220
- thumb: string;
221
- };
222
- };
223
- }>, {
224
- variant: {
225
- alpha: {
226
- container: string;
227
- input: string;
228
- thumb: string;
229
- };
230
- beta: {
231
- container: string;
232
- input: string;
233
- thumb: string;
234
- };
235
- };
236
- }, {
237
- container: string;
238
- span: string;
239
- input: string;
240
- thumb: string;
241
- }>;
242
- export declare const submitStyle: TVReturnType<{
243
- variant: {
244
- alpha: "bg-primary text-white px-4 py-2 rounded-md";
245
- beta: "bg-primary text-white px-4 py-2";
246
- };
247
- }, undefined, "w-max max-w-full mt-2", TVConfig<{
248
- variant: {
249
- alpha: "bg-primary text-white px-4 py-2 rounded-md";
250
- beta: "bg-primary text-white px-4 py-2";
251
- };
252
- }, {
253
- variant: {
254
- alpha: "bg-primary text-white px-4 py-2 rounded-md";
255
- beta: "bg-primary text-white px-4 py-2";
256
- };
257
- }>, {
258
- variant: {
259
- alpha: "bg-primary text-white px-4 py-2 rounded-md";
260
- beta: "bg-primary text-white px-4 py-2";
261
- };
262
- }, undefined>;
package/lib/__stories__/Form.stories.tsx DELETED
@@ -1,141 +0,0 @@
1
- import { TwintagForm } from '@twintag-form/index';
2
-
3
- // Replace your-framework with the name of your framework
4
- import type { Meta, StoryObj } from '@storybook/react';
5
-
6
- import { withActions } from '@storybook/addon-actions/decorator';
7
-
8
- const meta: Meta<typeof TwintagForm> = {
9
- /* 👇 The title prop is optional.
10
- * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
11
- * to learn how to generate automatic titles
12
- */
13
- title: 'Form',
14
- component: TwintagForm,
15
- parameters: {
16
- actions: {
17
- handles: ['twintag-form-valid', 'twintag-form-invalid'],
18
- },
19
- },
20
- decorators: [withActions as any],
21
- };
22
-
23
- export default meta;
24
-
25
- type Story = StoryObj<typeof TwintagForm>;
26
-
27
- export const Example: Story = {
28
- args: {
29
- config: [
30
- {
31
- id: 'category-123',
32
- type: 'category',
33
- props: {
34
- label: 'Category 1st',
35
- },
36
- content: [],
37
- children: [
38
- {
39
- id: 'input-123',
40
- type: 'input',
41
- props: {
42
- subtype: 'toggle',
43
- label: 'Require',
44
- bind: 'require',
45
- },
46
- content: [],
47
- children: [],
48
- },
49
- ],
50
- },
51
- {
52
- id: 'category-456',
53
- type: 'category',
54
- props: {
55
- label: 'Category 2nd',
56
- },
57
- content: [],
58
- children: [
59
- {
60
- id: 'input-123',
61
- type: 'input',
62
- props: {
63
- subtype: 'simple',
64
- label: 'Name',
65
- bind: 'name',
66
- },
67
- content: [],
68
- children: [],
69
- },
70
- {
71
- id: 'input-456',
72
- type: 'input',
73
- props: {
74
- subtype: 'simple',
75
- label: 'Email',
76
- bind: 'email',
77
- },
78
- content: [],
79
- children: [],
80
- },
81
- ],
82
- },
83
- {
84
- id: 'category-789',
85
- type: 'category',
86
- props: {
87
- label: 'Category 3rd',
88
- },
89
- content: [],
90
- children: [
91
- {
92
- id: 'input-789',
93
- type: 'input',
94
- props: {
95
- subtype: 'file',
96
- label: 'File',
97
- bind: 'file',
98
- },
99
- content: [],
100
- children: [],
101
- },
102
- ],
103
- },
104
- {
105
- id: 'category-321',
106
- type: 'category',
107
- props: {
108
- label: 'Category 4th',
109
- },
110
- content: [],
111
- children: [
112
- {
113
- id: 'input-123',
114
- type: 'input',
115
- props: {
116
- subtype: 'checkbox',
117
- label: 'Checkbox',
118
- bind: 'checkbox',
119
- },
120
- content: [],
121
- children: [],
122
- },
123
- ],
124
- },
125
- {
126
- id: 'input-654',
127
- type: 'input',
128
- props: {
129
- subtype: 'submit',
130
- label: 'Submit',
131
- },
132
- content: [],
133
- children: [],
134
- },
135
- ],
136
- options: {
137
- variant: 'beta',
138
- resetOnSubmit: true,
139
- },
140
- },
141
- };
package/lib/components/Category/__styles.ts DELETED
@@ -1,12 +0,0 @@
1
- import { tv } from 'tailwind-variants';
2
-
3
- export const categoryStyle = tv({
4
- slots: {
5
- container: 'w-full space-y-4',
6
- span: 'text-category-label',
7
- items: 'space-y-2',
8
- },
9
- variants: {
10
- variant: {},
11
- },
12
- });
package/lib/components/Category/index.tsx DELETED
@@ -1,26 +0,0 @@
1
- import type { FC } from 'react';
2
- import type { VariantProps } from 'tailwind-variants';
3
- import type { WithChildren } from 'twintag-types/dom';
4
-
5
- import type { CommonProps } from '../Input/__props';
6
-
7
- import { categoryStyle } from './__styles';
8
-
9
- type Props = CommonProps<VariantProps<typeof categoryStyle>['variant']> &
10
- WithChildren;
11
-
12
- const Category: FC<Props> = ({ label, options, children }) => {
13
- const { container, span, items } = categoryStyle({
14
- variant: options?.variant,
15
- });
16
-
17
- return (
18
- <section className={container()}>
19
- {label ? <span className={span()}>{label}</span> : <></>}
20
-
21
- <div className={items()}>{children}</div>
22
- </section>
23
- );
24
- };
25
-
26
- export default Category;