@saas-ui/forms 2.0.0-next.2 → 2.0.0-next.5

Sign up to get free protection for your applications and to get access to all the features.
Files changed (49) hide show
  1. package/CHANGELOG.md +36 -0
  2. package/README.md +53 -6
  3. package/dist/ajv/index.d.ts +1 -1
  4. package/dist/ajv/index.js.map +1 -1
  5. package/dist/ajv/index.mjs.map +1 -1
  6. package/dist/index.d.ts +265 -166
  7. package/dist/index.js +2821 -556
  8. package/dist/index.js.map +1 -1
  9. package/dist/index.mjs +2814 -555
  10. package/dist/index.mjs.map +1 -1
  11. package/dist/yup/index.d.ts +98 -6
  12. package/dist/yup/index.js.map +1 -1
  13. package/dist/yup/index.mjs.map +1 -1
  14. package/dist/zod/index.d.ts +97 -4
  15. package/dist/zod/index.js.map +1 -1
  16. package/dist/zod/index.mjs.map +1 -1
  17. package/package.json +5 -3
  18. package/src/array-field.tsx +50 -30
  19. package/src/auto-form.tsx +7 -3
  20. package/src/base-field.tsx +59 -0
  21. package/src/create-field.tsx +143 -0
  22. package/src/create-form.tsx +31 -0
  23. package/src/default-fields.tsx +146 -0
  24. package/src/display-field.tsx +8 -9
  25. package/src/display-if.tsx +6 -5
  26. package/src/field-resolver.ts +1 -1
  27. package/src/field.tsx +14 -444
  28. package/src/fields-context.tsx +23 -0
  29. package/src/fields.tsx +18 -8
  30. package/src/form.tsx +27 -37
  31. package/src/index.ts +38 -0
  32. package/src/input-right-button/input-right-button.stories.tsx +1 -1
  33. package/src/input-right-button/input-right-button.tsx +0 -2
  34. package/src/layout.tsx +16 -11
  35. package/src/number-input/number-input.tsx +9 -5
  36. package/src/object-field.tsx +8 -7
  37. package/src/password-input/password-input.stories.tsx +23 -2
  38. package/src/password-input/password-input.tsx +5 -5
  39. package/src/pin-input/pin-input.tsx +1 -5
  40. package/src/radio/radio-input.stories.tsx +1 -1
  41. package/src/radio/radio-input.tsx +12 -10
  42. package/src/select/native-select.tsx +1 -4
  43. package/src/select/select.test.tsx +1 -1
  44. package/src/select/select.tsx +18 -14
  45. package/src/step-form.tsx +29 -11
  46. package/src/submit-button.tsx +5 -1
  47. package/src/types.ts +91 -0
  48. package/src/utils.ts +15 -0
  49. /package/src/radio/{radio.test.tsx → radio-input.test.tsx} +0 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,35 @@
1
1
  # @saas-ui/forms
2
2
 
3
+ ## 2.0.0-next.5
4
+
5
+ ### Minor Changes
6
+
7
+ - a8ea24da: PasswordInput now accepts leftAddon property.
8
+
9
+ ### Patch Changes
10
+
11
+ - Updated dependencies [61b27fa6]
12
+ - @saas-ui/core@2.0.0-next.5
13
+
14
+ ## 2.0.0-next.4
15
+
16
+ ### Patch Changes
17
+
18
+ - Updated dependencies [83f54180]
19
+ - Updated dependencies [ba61612f]
20
+ - Updated dependencies [83f54180]
21
+ - Updated dependencies [83f54180]
22
+ - Updated dependencies [83f54180]
23
+ - Updated dependencies [83f54180]
24
+ - Updated dependencies [27a68bca]
25
+ - @saas-ui/core@2.0.0-next.4
26
+
27
+ ## 2.0.0-next.3
28
+
29
+ ### Patch Changes
30
+
31
+ - @saas-ui/core@2.0.0-next.3
32
+
3
33
  ## 2.0.0-next.2
4
34
 
5
35
  ### Patch Changes
@@ -33,6 +63,12 @@
33
63
  - Updated dependencies [3a15e8c8]
34
64
  - @saas-ui/core@2.0.0-next.0
35
65
 
66
+ ## 1.5.3
67
+
68
+ ### Patch Changes
69
+
70
+ - 382e095: InputRightButton no longer exported from forms package to prevent conflicts.
71
+
36
72
  ## 1.5.2
37
73
 
38
74
  ### Patch Changes
package/README.md CHANGED
@@ -1,10 +1,11 @@
1
- # @saas-ui/forms
1
+ # Forms Manager
2
2
 
3
- Chakra UI Forms.
3
+ Powerfull forms library for Chakra UI.
4
+ Create typesafe React forms with speed.
4
5
 
5
- Create fully functional React forms with just a few lines of code.
6
+ Supports Zod, Yup and AJV for validation and form generation.
6
7
 
7
- Uses React Hook Form under the hood.
8
+ - [Docs](https://www.saas-ui.dev/docs/forms/form)
8
9
 
9
10
  ## Installation
10
11
 
@@ -16,9 +17,55 @@ $ yarn add @saas-ui/forms
16
17
  $ npm i @saas-ui/forms --save
17
18
  ```
18
19
 
19
- ## Docs
20
+ ## Usage with Zod
20
21
 
21
- https://www.saas-ui.dev/docs/forms/form
22
+ ### AutoForm
23
+
24
+ Generate forms from schema.
25
+
26
+ ```tsx
27
+ import { createZodForm } from '@saas-ui/forms/zod'
28
+
29
+ const { AutoForm } = createZodForm()
30
+
31
+ const schema = z.object({
32
+ name: z.string(),
33
+ })
34
+
35
+ function App() {
36
+ const onSubmit = (data: z.infer<typeof schema>) => {}
37
+ return <AutoForm schema={schema} onSubmit={onSubmit} />
38
+ }
39
+ ```
40
+
41
+ ### Form
42
+
43
+ Create custom typesafe forms.
44
+
45
+ ```tsx
46
+ import { FormLayout, createZodForm } from '@saas-ui/forms/zod'
47
+
48
+ const { Form, SubmitButton } = createZodForm()
49
+
50
+ const schema = z.object({
51
+ name: z.string()
52
+ })
53
+
54
+ function App() {
55
+ const onSubmit = (data: z.infer<typeof schema>) => {}
56
+
57
+ return (
58
+ <Form schema={schema} onSubmit={onSubmit}>
59
+ {({ Field }) => (
60
+ <FormLayout>
61
+ <Field name="name" type="text" />
62
+ <SubmitButton>Save</SubmitButton>
63
+ </FormLayotu>
64
+ )}
65
+ </Form>
66
+ )
67
+ }
68
+ ```
22
69
 
23
70
  ## Source
24
71
 
@@ -12,7 +12,7 @@ interface JsonSchemaFormReturn {
12
12
  declare const jsonSchemaForm: (schema: JSONSchemaType<unknown>) => JsonSchemaFormReturn;
13
13
 
14
14
  type ResolverArgs = Parameters<typeof ajvResolver>;
15
- interface CreateAjvFormProps extends CreateFormProps {
15
+ interface CreateAjvFormProps extends CreateFormProps<any> {
16
16
  schemaOptions?: ResolverArgs[1];
17
17
  resolverOptions?: ResolverArgs[2];
18
18
  }
@@ -1 +1 @@
1
- {"version":3,"sources":["../../ajv/src/ajv-resolver.ts","../../ajv/src/create-ajv-form.ts"],"names":[],"mappings":";AAAA,SAAS,mBAAmB;AAC5B,SAAS,2BAA0C;AAMnD,IAAM,0BAA0B,CAAC,WAAoC;AACnE,SAAO,oBAAoB,OAAO,UAAU;AAC9C;AAQO,IAAM,iBAAiB,CAC5B,WACyB;AACzB,SAAO;AAAA,IACL;AAAA,IACA,eAAe,wBAAwB,MAAM;AAAA,IAC7C,UAAU,YAAY,MAAM;AAAA,EAC9B;AACF;;;ACzBA;AAAA,EACE;AAAA,OAIK;AAWA,SAAS,cAAc,SAAmC;AAC/D,SAAO,WAAW;AAAA,IAChB,UAAU,CAAC,WACT,YAAY,QAAQ,mCAAS,eAAe,mCAAS,eAAe;AAAA,IACtE,GAAG;AAAA,EACL,CAAC;AAOH","sourcesContent":["import { ajvResolver } from '@hookform/resolvers/ajv'\nimport { objectFieldResolver, FieldResolver } from '@saas-ui/forms'\n\nimport { JSONSchemaType } from 'ajv'\n\nexport { ajvResolver }\n\nconst jsonSchemaFieldResolver = (schema: JSONSchemaType<unknown>) => {\n return objectFieldResolver(schema.properties)\n}\n\ninterface JsonSchemaFormReturn {\n schema: JSONSchemaType<unknown>\n fieldResolver: FieldResolver\n resolver: ReturnType<typeof ajvResolver>\n}\n\nexport const jsonSchemaForm = (\n schema: JSONSchemaType<unknown>\n): JsonSchemaFormReturn => {\n return {\n schema,\n fieldResolver: jsonSchemaFieldResolver(schema),\n resolver: ajvResolver(schema),\n }\n}\n","import {\n createForm,\n CreateFormProps,\n FieldValues,\n FormProps,\n} from '@saas-ui/forms'\nimport { ajvResolver } from './ajv-resolver'\nimport { JSONSchemaType } from 'ajv'\n\ntype ResolverArgs = Parameters<typeof ajvResolver>\n\nexport interface CreateAjvFormProps extends CreateFormProps {\n schemaOptions?: ResolverArgs[1]\n resolverOptions?: ResolverArgs[2]\n}\n\nexport function createAjvForm(options?: CreateAjvFormProps): any {\n return createForm({\n resolver: (schema) =>\n ajvResolver(schema, options?.schemaOptions, options?.resolverOptions),\n ...options,\n }) as <\n TFieldValues extends FieldValues = FieldValues,\n TSchema extends JSONSchemaType<TFieldValues> = JSONSchemaType<TFieldValues>,\n TContext extends object = object\n >(\n props: FormProps<TFieldValues, TContext, TSchema>\n ) => React.ReactElement\n}\n"]}
1
+ {"version":3,"sources":["../../ajv/src/ajv-resolver.ts","../../ajv/src/create-ajv-form.ts"],"names":[],"mappings":";AAAA,SAAS,mBAAmB;AAC5B,SAAS,2BAA0C;AAMnD,IAAM,0BAA0B,CAAC,WAAoC;AACnE,SAAO,oBAAoB,OAAO,UAAU;AAC9C;AAQO,IAAM,iBAAiB,CAC5B,WACyB;AACzB,SAAO;AAAA,IACL;AAAA,IACA,eAAe,wBAAwB,MAAM;AAAA,IAC7C,UAAU,YAAY,MAAM;AAAA,EAC9B;AACF;;;ACzBA;AAAA,EACE;AAAA,OAIK;AAWA,SAAS,cAAc,SAAmC;AAC/D,SAAO,WAAW;AAAA,IAChB,UAAU,CAAC,WACT,YAAY,QAAQ,mCAAS,eAAe,mCAAS,eAAe;AAAA,IACtE,GAAG;AAAA,EACL,CAAC;AAOH","sourcesContent":["import { ajvResolver } from '@hookform/resolvers/ajv'\nimport { objectFieldResolver, FieldResolver } from '@saas-ui/forms'\n\nimport { JSONSchemaType } from 'ajv'\n\nexport { ajvResolver }\n\nconst jsonSchemaFieldResolver = (schema: JSONSchemaType<unknown>) => {\n return objectFieldResolver(schema.properties)\n}\n\ninterface JsonSchemaFormReturn {\n schema: JSONSchemaType<unknown>\n fieldResolver: FieldResolver\n resolver: ReturnType<typeof ajvResolver>\n}\n\nexport const jsonSchemaForm = (\n schema: JSONSchemaType<unknown>\n): JsonSchemaFormReturn => {\n return {\n schema,\n fieldResolver: jsonSchemaFieldResolver(schema),\n resolver: ajvResolver(schema),\n }\n}\n","import {\n createForm,\n CreateFormProps,\n FieldValues,\n FormProps,\n} from '@saas-ui/forms'\nimport { ajvResolver } from './ajv-resolver'\nimport { JSONSchemaType } from 'ajv'\n\ntype ResolverArgs = Parameters<typeof ajvResolver>\n\nexport interface CreateAjvFormProps extends CreateFormProps<any> {\n schemaOptions?: ResolverArgs[1]\n resolverOptions?: ResolverArgs[2]\n}\n\nexport function createAjvForm(options?: CreateAjvFormProps): any {\n return createForm({\n resolver: (schema) =>\n ajvResolver(schema, options?.schemaOptions, options?.resolverOptions),\n ...options,\n }) as <\n TFieldValues extends FieldValues = FieldValues,\n TSchema extends JSONSchemaType<TFieldValues> = JSONSchemaType<TFieldValues>,\n TContext extends object = object\n >(\n props: FormProps<TFieldValues, TContext, TSchema>\n ) => React.ReactElement\n}\n"]}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../ajv/src/ajv-resolver.ts","../../ajv/src/create-ajv-form.ts"],"names":[],"mappings":";AAAA,SAAS,mBAAmB;AAC5B,SAAS,2BAA0C;AAMnD,IAAM,0BAA0B,CAAC,WAAoC;AACnE,SAAO,oBAAoB,OAAO,UAAU;AAC9C;AAQO,IAAM,iBAAiB,CAC5B,WACyB;AACzB,SAAO;AAAA,IACL;AAAA,IACA,eAAe,wBAAwB,MAAM;AAAA,IAC7C,UAAU,YAAY,MAAM;AAAA,EAC9B;AACF;;;ACzBA;AAAA,EACE;AAAA,OAIK;AAWA,SAAS,cAAc,SAAmC;AAC/D,SAAO,WAAW;AAAA,IAChB,UAAU,CAAC,WACT,YAAY,QAAQ,mCAAS,eAAe,mCAAS,eAAe;AAAA,IACtE,GAAG;AAAA,EACL,CAAC;AAOH","sourcesContent":["import { ajvResolver } from '@hookform/resolvers/ajv'\nimport { objectFieldResolver, FieldResolver } from '@saas-ui/forms'\n\nimport { JSONSchemaType } from 'ajv'\n\nexport { ajvResolver }\n\nconst jsonSchemaFieldResolver = (schema: JSONSchemaType<unknown>) => {\n return objectFieldResolver(schema.properties)\n}\n\ninterface JsonSchemaFormReturn {\n schema: JSONSchemaType<unknown>\n fieldResolver: FieldResolver\n resolver: ReturnType<typeof ajvResolver>\n}\n\nexport const jsonSchemaForm = (\n schema: JSONSchemaType<unknown>\n): JsonSchemaFormReturn => {\n return {\n schema,\n fieldResolver: jsonSchemaFieldResolver(schema),\n resolver: ajvResolver(schema),\n }\n}\n","import {\n createForm,\n CreateFormProps,\n FieldValues,\n FormProps,\n} from '@saas-ui/forms'\nimport { ajvResolver } from './ajv-resolver'\nimport { JSONSchemaType } from 'ajv'\n\ntype ResolverArgs = Parameters<typeof ajvResolver>\n\nexport interface CreateAjvFormProps extends CreateFormProps {\n schemaOptions?: ResolverArgs[1]\n resolverOptions?: ResolverArgs[2]\n}\n\nexport function createAjvForm(options?: CreateAjvFormProps): any {\n return createForm({\n resolver: (schema) =>\n ajvResolver(schema, options?.schemaOptions, options?.resolverOptions),\n ...options,\n }) as <\n TFieldValues extends FieldValues = FieldValues,\n TSchema extends JSONSchemaType<TFieldValues> = JSONSchemaType<TFieldValues>,\n TContext extends object = object\n >(\n props: FormProps<TFieldValues, TContext, TSchema>\n ) => React.ReactElement\n}\n"]}
1
+ {"version":3,"sources":["../../ajv/src/ajv-resolver.ts","../../ajv/src/create-ajv-form.ts"],"names":[],"mappings":";AAAA,SAAS,mBAAmB;AAC5B,SAAS,2BAA0C;AAMnD,IAAM,0BAA0B,CAAC,WAAoC;AACnE,SAAO,oBAAoB,OAAO,UAAU;AAC9C;AAQO,IAAM,iBAAiB,CAC5B,WACyB;AACzB,SAAO;AAAA,IACL;AAAA,IACA,eAAe,wBAAwB,MAAM;AAAA,IAC7C,UAAU,YAAY,MAAM;AAAA,EAC9B;AACF;;;ACzBA;AAAA,EACE;AAAA,OAIK;AAWA,SAAS,cAAc,SAAmC;AAC/D,SAAO,WAAW;AAAA,IAChB,UAAU,CAAC,WACT,YAAY,QAAQ,mCAAS,eAAe,mCAAS,eAAe;AAAA,IACtE,GAAG;AAAA,EACL,CAAC;AAOH","sourcesContent":["import { ajvResolver } from '@hookform/resolvers/ajv'\nimport { objectFieldResolver, FieldResolver } from '@saas-ui/forms'\n\nimport { JSONSchemaType } from 'ajv'\n\nexport { ajvResolver }\n\nconst jsonSchemaFieldResolver = (schema: JSONSchemaType<unknown>) => {\n return objectFieldResolver(schema.properties)\n}\n\ninterface JsonSchemaFormReturn {\n schema: JSONSchemaType<unknown>\n fieldResolver: FieldResolver\n resolver: ReturnType<typeof ajvResolver>\n}\n\nexport const jsonSchemaForm = (\n schema: JSONSchemaType<unknown>\n): JsonSchemaFormReturn => {\n return {\n schema,\n fieldResolver: jsonSchemaFieldResolver(schema),\n resolver: ajvResolver(schema),\n }\n}\n","import {\n createForm,\n CreateFormProps,\n FieldValues,\n FormProps,\n} from '@saas-ui/forms'\nimport { ajvResolver } from './ajv-resolver'\nimport { JSONSchemaType } from 'ajv'\n\ntype ResolverArgs = Parameters<typeof ajvResolver>\n\nexport interface CreateAjvFormProps extends CreateFormProps<any> {\n schemaOptions?: ResolverArgs[1]\n resolverOptions?: ResolverArgs[2]\n}\n\nexport function createAjvForm(options?: CreateAjvFormProps): any {\n return createForm({\n resolver: (schema) =>\n ajvResolver(schema, options?.schemaOptions, options?.resolverOptions),\n ...options,\n }) as <\n TFieldValues extends FieldValues = FieldValues,\n TSchema extends JSONSchemaType<TFieldValues> = JSONSchemaType<TFieldValues>,\n TContext extends object = object\n >(\n props: FormProps<TFieldValues, TContext, TSchema>\n ) => React.ReactElement\n}\n"]}