@saas-ui/forms 1.0.0-rc.2 → 1.0.0-rc.5
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.
- package/CHANGELOG.md +42 -0
- package/ajv/package.json +18 -0
- package/dist/ajv/ajv-resolver.d.ts +11 -0
- package/dist/ajv/ajv-resolver.d.ts.map +1 -0
- package/dist/ajv/index.d.ts +2 -0
- package/dist/ajv/index.d.ts.map +1 -0
- package/dist/ajv/index.js +97 -0
- package/dist/ajv/index.js.map +1 -0
- package/dist/ajv/index.modern.mjs +97 -0
- package/dist/ajv/index.modern.mjs.map +1 -0
- package/dist/auto-form.d.ts +13 -1
- package/dist/auto-form.d.ts.map +1 -1
- package/dist/field.d.ts +1 -1
- package/dist/field.d.ts.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.modern.mjs +1 -1
- package/dist/index.modern.mjs.map +1 -1
- package/dist/layout.d.ts +0 -1
- package/dist/layout.d.ts.map +1 -1
- package/dist/step-form.d.ts.map +1 -1
- package/dist/use-step-form.d.ts +1 -1
- package/dist/use-step-form.d.ts.map +1 -1
- package/dist/zod/index.js +1 -1
- package/dist/zod/index.js.map +1 -1
- package/dist/zod/index.modern.mjs +1 -1
- package/dist/zod/index.modern.mjs.map +1 -1
- package/package.json +25 -17
- package/src/auto-form.tsx +22 -3
- package/src/field-resolver.ts +2 -2
- package/src/field.tsx +19 -19
- package/src/object-field.tsx +3 -3
- package/src/step-form.tsx +9 -11
- package/src/use-step-form.tsx +3 -2
- package/yup/package.json +2 -2
- package/zod/package.json +4 -4
package/src/field.tsx
CHANGED
@@ -227,7 +227,7 @@ const createField = (
|
|
227
227
|
ref={ref}
|
228
228
|
id={id}
|
229
229
|
name={name}
|
230
|
-
label={label}
|
230
|
+
label={hideLabel ? label : undefined} // Only pass down the label when it should be inline.
|
231
231
|
rules={inputRules}
|
232
232
|
{...inputProps}
|
233
233
|
/>
|
@@ -292,7 +292,7 @@ export interface RegisterFieldTypeOptions {
|
|
292
292
|
* @param component The React component
|
293
293
|
* @param options
|
294
294
|
* @param options.isControlled Set this to true if this is a controlled field.
|
295
|
-
* @param options.hideLabel Hide the field label, for example for checkbox
|
295
|
+
* @param options.hideLabel Hide the field label, for example for the checkbox field.
|
296
296
|
*/
|
297
297
|
export const registerFieldType = (
|
298
298
|
type: string,
|
@@ -320,9 +320,12 @@ export const registerFieldType = (
|
|
320
320
|
return Field
|
321
321
|
}
|
322
322
|
|
323
|
-
|
324
|
-
|
325
|
-
|
323
|
+
export const InputField = registerFieldType(
|
324
|
+
'text',
|
325
|
+
forwardRef(({ type = 'text', ...rest }, ref) => {
|
326
|
+
return <Input type={type} {...rest} ref={ref} />
|
327
|
+
})
|
328
|
+
)
|
326
329
|
export const NumberInputField = registerFieldType('number', NumberInput, {
|
327
330
|
isControlled: true,
|
328
331
|
})
|
@@ -330,16 +333,11 @@ export const PasswordInputFIeld = registerFieldType('password', PasswordInput)
|
|
330
333
|
export const TextareaField = registerFieldType('textarea', Textarea)
|
331
334
|
export const SwitchField = registerFieldType(
|
332
335
|
'switch',
|
333
|
-
forwardRef(({
|
334
|
-
return
|
335
|
-
<Switch ref={ref} {...props}>
|
336
|
-
{label}
|
337
|
-
</Switch>
|
338
|
-
)
|
336
|
+
forwardRef(({ type, ...rest }, ref) => {
|
337
|
+
return <Switch {...rest} ref={ref} />
|
339
338
|
}),
|
340
339
|
{
|
341
340
|
isControlled: true,
|
342
|
-
hideLabel: true,
|
343
341
|
}
|
344
342
|
)
|
345
343
|
export const SelectField = registerFieldType('select', Select, {
|
@@ -347,13 +345,15 @@ export const SelectField = registerFieldType('select', Select, {
|
|
347
345
|
})
|
348
346
|
export const CheckboxField = registerFieldType(
|
349
347
|
'checkbox',
|
350
|
-
forwardRef(
|
351
|
-
|
352
|
-
|
353
|
-
{
|
354
|
-
|
355
|
-
|
356
|
-
|
348
|
+
forwardRef(
|
349
|
+
({ label, type, ...props }: { label?: string; type: string }, ref) => {
|
350
|
+
return (
|
351
|
+
<Checkbox ref={ref} {...props}>
|
352
|
+
{label}
|
353
|
+
</Checkbox>
|
354
|
+
)
|
355
|
+
}
|
356
|
+
),
|
357
357
|
{
|
358
358
|
hideLabel: true,
|
359
359
|
}
|
package/src/object-field.tsx
CHANGED
@@ -4,7 +4,7 @@ import {
|
|
4
4
|
FormLabel,
|
5
5
|
FormLabelProps,
|
6
6
|
ResponsiveValue,
|
7
|
-
|
7
|
+
useStyleConfig,
|
8
8
|
} from '@chakra-ui/react'
|
9
9
|
import { __DEV__ } from '@chakra-ui/utils'
|
10
10
|
|
@@ -21,8 +21,8 @@ export interface ObjectFieldProps extends FieldProps {
|
|
21
21
|
}
|
22
22
|
|
23
23
|
export const FormLegend = (props: FormLabelProps) => {
|
24
|
-
const styles =
|
25
|
-
return <FormLabel as="legend" sx={styles
|
24
|
+
const styles = useStyleConfig('FormLegend')
|
25
|
+
return <FormLabel as="legend" sx={styles} {...props} />
|
26
26
|
}
|
27
27
|
|
28
28
|
export const ObjectField: React.FC<ObjectFieldProps> = (props) => {
|
package/src/step-form.tsx
CHANGED
@@ -2,13 +2,7 @@ import * as React from 'react'
|
|
2
2
|
|
3
3
|
import { FieldValues, UseFormReturn } from 'react-hook-form'
|
4
4
|
|
5
|
-
import {
|
6
|
-
chakra,
|
7
|
-
HTMLChakraProps,
|
8
|
-
useMultiStyleConfig,
|
9
|
-
StylesProvider,
|
10
|
-
SystemStyleObject,
|
11
|
-
} from '@chakra-ui/system'
|
5
|
+
import { chakra, HTMLChakraProps } from '@chakra-ui/system'
|
12
6
|
|
13
7
|
import { callAllHandlers, runIfFn, cx, __DEV__ } from '@chakra-ui/utils'
|
14
8
|
|
@@ -18,6 +12,7 @@ import {
|
|
18
12
|
StepperStepsProps,
|
19
13
|
StepperStep,
|
20
14
|
useStepperContext,
|
15
|
+
StepperContainer,
|
21
16
|
} from '@saas-ui/stepper'
|
22
17
|
import { Button, ButtonProps } from '@saas-ui/button'
|
23
18
|
|
@@ -29,7 +24,6 @@ import {
|
|
29
24
|
useFormStep,
|
30
25
|
StepFormProvider,
|
31
26
|
UseStepFormProps,
|
32
|
-
UseStepFormReturn,
|
33
27
|
} from './use-step-form'
|
34
28
|
|
35
29
|
export interface StepFormProps<TFieldValues extends FieldValues = FieldValues>
|
@@ -80,7 +74,7 @@ export interface FormStepOptions {
|
|
80
74
|
}
|
81
75
|
|
82
76
|
export const FormStepper: React.FC<StepperStepsProps> = (props) => {
|
83
|
-
const
|
77
|
+
const { activeIndex, setIndex } = useStepperContext()
|
84
78
|
|
85
79
|
const { children } = props
|
86
80
|
|
@@ -100,12 +94,16 @@ export const FormStepper: React.FC<StepperStepsProps> = (props) => {
|
|
100
94
|
return child
|
101
95
|
})
|
102
96
|
|
97
|
+
const onChange = React.useCallback((i: number) => {
|
98
|
+
setIndex(i)
|
99
|
+
}, [])
|
100
|
+
|
103
101
|
return (
|
104
|
-
<
|
102
|
+
<StepperContainer step={activeIndex} onChange={onChange}>
|
105
103
|
<StepperSteps mb="4" {...props}>
|
106
104
|
{elements}
|
107
105
|
</StepperSteps>
|
108
|
-
</
|
106
|
+
</StepperContainer>
|
109
107
|
)
|
110
108
|
}
|
111
109
|
|
package/src/use-step-form.tsx
CHANGED
@@ -32,7 +32,7 @@ import { FormProps } from './form'
|
|
32
32
|
|
33
33
|
export interface UseStepFormProps<
|
34
34
|
TFieldValues extends FieldValues = FieldValues
|
35
|
-
> extends UseStepperProps,
|
35
|
+
> extends Omit<UseStepperProps, 'onChange'>,
|
36
36
|
Omit<FormProps<TFieldValues>, 'children'> {
|
37
37
|
children:
|
38
38
|
| React.ReactNode
|
@@ -54,7 +54,8 @@ export interface UseStepFormReturn<
|
|
54
54
|
export function useStepForm<TFieldValues extends FieldValues = FieldValues>(
|
55
55
|
props: UseStepFormProps<TFieldValues>
|
56
56
|
): UseStepFormReturn<TFieldValues> {
|
57
|
-
const
|
57
|
+
const { onChange, ...rest } = props
|
58
|
+
const stepper = useStepper(rest)
|
58
59
|
|
59
60
|
const { activeStep, isLastStep, nextStep } = stepper
|
60
61
|
|
package/yup/package.json
CHANGED
@@ -10,8 +10,8 @@
|
|
10
10
|
"author": "Eelco Wiersma <eelco@appulse.nl>",
|
11
11
|
"license": "MIT",
|
12
12
|
"peerDependencies": {
|
13
|
-
"@hookform/resolvers": "^2.
|
14
|
-
"react-hook-form": "^7.
|
13
|
+
"@hookform/resolvers": "^2.9.0",
|
14
|
+
"react-hook-form": "^7.31.3",
|
15
15
|
"yup": "^0.32.11"
|
16
16
|
}
|
17
17
|
}
|
package/zod/package.json
CHANGED
@@ -10,9 +10,9 @@
|
|
10
10
|
"author": "Eelco Wiersma <eelco@appulse.nl>",
|
11
11
|
"license": "MIT",
|
12
12
|
"peerDependencies": {
|
13
|
-
"@chakra-ui/utils": "^2.0.
|
14
|
-
"@hookform/resolvers": "^2.
|
15
|
-
"react-hook-form": "^7.
|
16
|
-
"zod": "^3.
|
13
|
+
"@chakra-ui/utils": "^2.0.2",
|
14
|
+
"@hookform/resolvers": "^2.9.0",
|
15
|
+
"react-hook-form": "^7.31.3",
|
16
|
+
"zod": "^3.17.3"
|
17
17
|
}
|
18
18
|
}
|