@saas-ui/forms 2.0.0-next.3 → 2.0.0-next.5
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +30 -0
- package/README.md +53 -6
- package/dist/ajv/index.d.ts +1 -1
- package/dist/ajv/index.js.map +1 -1
- package/dist/ajv/index.mjs.map +1 -1
- package/dist/index.d.ts +265 -166
- package/dist/index.js +2821 -556
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +2814 -555
- package/dist/index.mjs.map +1 -1
- package/dist/yup/index.d.ts +98 -6
- package/dist/yup/index.js.map +1 -1
- package/dist/yup/index.mjs.map +1 -1
- package/dist/zod/index.d.ts +97 -4
- package/dist/zod/index.js.map +1 -1
- package/dist/zod/index.mjs.map +1 -1
- package/package.json +5 -3
- package/src/array-field.tsx +50 -30
- package/src/auto-form.tsx +7 -3
- package/src/base-field.tsx +59 -0
- package/src/create-field.tsx +143 -0
- package/src/create-form.tsx +31 -0
- package/src/default-fields.tsx +146 -0
- package/src/display-field.tsx +8 -9
- package/src/display-if.tsx +6 -5
- package/src/field-resolver.ts +1 -1
- package/src/field.tsx +14 -444
- package/src/fields-context.tsx +23 -0
- package/src/fields.tsx +18 -8
- package/src/form.tsx +27 -37
- package/src/index.ts +38 -0
- package/src/input-right-button/input-right-button.stories.tsx +1 -1
- package/src/input-right-button/input-right-button.tsx +0 -2
- package/src/layout.tsx +16 -11
- package/src/number-input/number-input.tsx +9 -5
- package/src/object-field.tsx +8 -7
- package/src/password-input/password-input.stories.tsx +23 -2
- package/src/password-input/password-input.tsx +5 -5
- package/src/pin-input/pin-input.tsx +1 -5
- package/src/radio/radio-input.stories.tsx +1 -1
- package/src/radio/radio-input.tsx +12 -10
- package/src/select/native-select.tsx +1 -4
- package/src/select/select.test.tsx +1 -1
- package/src/select/select.tsx +18 -14
- package/src/step-form.tsx +29 -11
- package/src/submit-button.tsx +5 -1
- package/src/types.ts +91 -0
- package/src/utils.ts +15 -0
- /package/src/radio/{radio.test.tsx → radio-input.test.tsx} +0 -0
package/CHANGELOG.md
CHANGED
@@ -1,5 +1,29 @@
|
|
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
|
+
|
3
27
|
## 2.0.0-next.3
|
4
28
|
|
5
29
|
### Patch Changes
|
@@ -39,6 +63,12 @@
|
|
39
63
|
- Updated dependencies [3a15e8c8]
|
40
64
|
- @saas-ui/core@2.0.0-next.0
|
41
65
|
|
66
|
+
## 1.5.3
|
67
|
+
|
68
|
+
### Patch Changes
|
69
|
+
|
70
|
+
- 382e095: InputRightButton no longer exported from forms package to prevent conflicts.
|
71
|
+
|
42
72
|
## 1.5.2
|
43
73
|
|
44
74
|
### Patch Changes
|
package/README.md
CHANGED
@@ -1,10 +1,11 @@
|
|
1
|
-
#
|
1
|
+
# Forms Manager
|
2
2
|
|
3
|
-
Chakra UI
|
3
|
+
Powerfull forms library for Chakra UI.
|
4
|
+
Create typesafe React forms with speed.
|
4
5
|
|
5
|
-
|
6
|
+
Supports Zod, Yup and AJV for validation and form generation.
|
6
7
|
|
7
|
-
|
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
|
-
##
|
20
|
+
## Usage with Zod
|
20
21
|
|
21
|
-
|
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
|
|
package/dist/ajv/index.d.ts
CHANGED
@@ -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
|
}
|
package/dist/ajv/index.js.map
CHANGED
@@ -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"]}
|
package/dist/ajv/index.mjs.map
CHANGED
@@ -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"]}
|