@fuf-stack/uniform 0.10.1 → 0.10.3
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/dist/CheckboxGroup/index.cjs +3 -3
- package/dist/CheckboxGroup/index.js +2 -2
- package/dist/FieldArray/index.cjs +3 -3
- package/dist/FieldArray/index.js +2 -2
- package/dist/Form/index.cjs +3 -3
- package/dist/Form/index.d.cts +3 -2
- package/dist/Form/index.d.ts +3 -2
- package/dist/Form/index.js +2 -2
- package/dist/{Form-nJbG1hNH.d.ts → Form-D0grgL6G.d.cts} +4 -1
- package/dist/{Form-nJbG1hNH.d.cts → Form-DX5NTR-H.d.ts} +4 -1
- package/dist/FormContext-ldCpxKnY.d.cts +8 -0
- package/dist/FormContext-ldCpxKnY.d.ts +8 -0
- package/dist/Input/index.cjs +3 -3
- package/dist/Input/index.js +2 -2
- package/dist/RadioGroup/index.cjs +3 -3
- package/dist/RadioGroup/index.js +2 -2
- package/dist/Select/index.cjs +3 -3
- package/dist/Select/index.js +2 -2
- package/dist/SubmitButton/index.cjs +3 -3
- package/dist/SubmitButton/index.js +2 -2
- package/dist/Switch/index.cjs +3 -3
- package/dist/Switch/index.js +2 -2
- package/dist/TextArea/index.cjs +3 -3
- package/dist/TextArea/index.js +2 -2
- package/dist/{chunk-PTJDXWBN.cjs → chunk-2OVE7FAF.cjs} +3 -3
- package/dist/{chunk-PTJDXWBN.cjs.map → chunk-2OVE7FAF.cjs.map} +1 -1
- package/dist/{chunk-KVJNGHAP.cjs → chunk-3HCROPXY.cjs} +3 -3
- package/dist/{chunk-KVJNGHAP.cjs.map → chunk-3HCROPXY.cjs.map} +1 -1
- package/dist/{chunk-7XOJIVJG.js → chunk-5S7YSUSV.js} +2 -2
- package/dist/{chunk-TPQE3IFL.js → chunk-6QXNSRCS.js} +2 -2
- package/dist/{chunk-VBDGQ5T3.js → chunk-AWAGKOHK.js} +2 -2
- package/dist/{chunk-ASNWVMAK.js → chunk-D3E4GLA2.js} +5 -3
- package/dist/chunk-D3E4GLA2.js.map +1 -0
- package/dist/{chunk-DW5HZXZO.cjs → chunk-F23KFEVZ.cjs} +3 -3
- package/dist/{chunk-DW5HZXZO.cjs.map → chunk-F23KFEVZ.cjs.map} +1 -1
- package/dist/{chunk-MK2PLALW.cjs → chunk-G5H3WD7X.cjs} +4 -4
- package/dist/{chunk-MK2PLALW.cjs.map → chunk-G5H3WD7X.cjs.map} +1 -1
- package/dist/{chunk-ZFF2GFNX.js → chunk-JM2PZT2K.js} +2 -2
- package/dist/{chunk-R4SIKN2S.cjs → chunk-OBNBG56H.cjs} +3 -3
- package/dist/{chunk-R4SIKN2S.cjs.map → chunk-OBNBG56H.cjs.map} +1 -1
- package/dist/{chunk-4YV5S72F.js → chunk-OX2WPUIY.js} +2 -2
- package/dist/{chunk-K6PIOPQN.cjs → chunk-QKF4FL3X.cjs} +3 -3
- package/dist/{chunk-K6PIOPQN.cjs.map → chunk-QKF4FL3X.cjs.map} +1 -1
- package/dist/{chunk-3KT6EELT.cjs → chunk-R3Q52RLG.cjs} +3 -3
- package/dist/{chunk-3KT6EELT.cjs.map → chunk-R3Q52RLG.cjs.map} +1 -1
- package/dist/{chunk-NAGQKQ7C.js → chunk-R4ILETYI.js} +8 -5
- package/dist/chunk-R4ILETYI.js.map +1 -0
- package/dist/{chunk-R3IBN7K6.cjs → chunk-TCL7YWB6.cjs} +3 -3
- package/dist/{chunk-R3IBN7K6.cjs.map → chunk-TCL7YWB6.cjs.map} +1 -1
- package/dist/{chunk-ORFZIRSW.js → chunk-TYJNJH65.js} +2 -2
- package/dist/{chunk-6LIAYPMV.js → chunk-XJULYTGW.js} +2 -2
- package/dist/{chunk-WFCHVVNU.cjs → chunk-YQH5YPBW.cjs} +7 -5
- package/dist/chunk-YQH5YPBW.cjs.map +1 -0
- package/dist/{chunk-S4GIEBID.cjs → chunk-Z7ETEIY7.cjs} +18 -15
- package/dist/chunk-Z7ETEIY7.cjs.map +1 -0
- package/dist/{chunk-ZNVGXKHS.js → chunk-ZZCZS4QM.js} +2 -2
- package/dist/hooks/index.cjs +2 -2
- package/dist/hooks/index.d.cts +4 -2
- package/dist/hooks/index.d.ts +4 -2
- package/dist/hooks/index.js +1 -1
- package/dist/index.cjs +14 -14
- package/dist/index.d.cts +2 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.js +15 -15
- package/package.json +5 -5
- package/dist/chunk-ASNWVMAK.js.map +0 -1
- package/dist/chunk-NAGQKQ7C.js.map +0 -1
- package/dist/chunk-S4GIEBID.cjs.map +0 -1
- package/dist/chunk-WFCHVVNU.cjs.map +0 -1
- /package/dist/{chunk-7XOJIVJG.js.map → chunk-5S7YSUSV.js.map} +0 -0
- /package/dist/{chunk-TPQE3IFL.js.map → chunk-6QXNSRCS.js.map} +0 -0
- /package/dist/{chunk-VBDGQ5T3.js.map → chunk-AWAGKOHK.js.map} +0 -0
- /package/dist/{chunk-ZFF2GFNX.js.map → chunk-JM2PZT2K.js.map} +0 -0
- /package/dist/{chunk-4YV5S72F.js.map → chunk-OX2WPUIY.js.map} +0 -0
- /package/dist/{chunk-ORFZIRSW.js.map → chunk-TYJNJH65.js.map} +0 -0
- /package/dist/{chunk-6LIAYPMV.js.map → chunk-XJULYTGW.js.map} +0 -0
- /package/dist/{chunk-ZNVGXKHS.js.map → chunk-ZZCZS4QM.js.map} +0 -0
|
@@ -6,7 +6,7 @@ import {
|
|
|
6
6
|
} from "./chunk-WKM2D7LF.js";
|
|
7
7
|
import {
|
|
8
8
|
useFormContext
|
|
9
|
-
} from "./chunk-
|
|
9
|
+
} from "./chunk-R4ILETYI.js";
|
|
10
10
|
import {
|
|
11
11
|
slugify
|
|
12
12
|
} from "./chunk-V46BHM2U.js";
|
|
@@ -127,4 +127,4 @@ export {
|
|
|
127
127
|
CheckboxGroup_default,
|
|
128
128
|
CheckboxGroup_default2
|
|
129
129
|
};
|
|
130
|
-
//# sourceMappingURL=chunk-
|
|
130
|
+
//# sourceMappingURL=chunk-TYJNJH65.js.map
|
|
@@ -6,7 +6,7 @@ import {
|
|
|
6
6
|
} from "./chunk-WKM2D7LF.js";
|
|
7
7
|
import {
|
|
8
8
|
useFormContext
|
|
9
|
-
} from "./chunk-
|
|
9
|
+
} from "./chunk-R4ILETYI.js";
|
|
10
10
|
import {
|
|
11
11
|
slugify
|
|
12
12
|
} from "./chunk-V46BHM2U.js";
|
|
@@ -236,4 +236,4 @@ export {
|
|
|
236
236
|
RadioGroup_default,
|
|
237
237
|
RadioGroup_default2
|
|
238
238
|
};
|
|
239
|
-
//# sourceMappingURL=chunk-
|
|
239
|
+
//# sourceMappingURL=chunk-XJULYTGW.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
var
|
|
4
|
+
var _chunkZ7ETEIY7cjs = require('./chunk-Z7ETEIY7.cjs');
|
|
5
5
|
|
|
6
6
|
|
|
7
7
|
var _chunkBBB4FEY6cjs = require('./chunk-BBB4FEY6.cjs');
|
|
@@ -23,7 +23,7 @@ var FormDebugViewer = ({ className = void 0 }) => {
|
|
|
23
23
|
setDebugMode,
|
|
24
24
|
validation,
|
|
25
25
|
watch
|
|
26
|
-
} =
|
|
26
|
+
} = _chunkZ7ETEIY7cjs.useFormContext.call(void 0, );
|
|
27
27
|
const [validationErrors, setValidationErrors] = _react.useState.call(void 0, null);
|
|
28
28
|
const formValues = watch();
|
|
29
29
|
const debugTestIdsEnabled = debugMode === "debug-testids";
|
|
@@ -102,6 +102,7 @@ var FormDebugViewer_default = FormDebugViewer;
|
|
|
102
102
|
var Form = ({
|
|
103
103
|
children,
|
|
104
104
|
className = void 0,
|
|
105
|
+
debug = void 0,
|
|
105
106
|
initialValues = void 0,
|
|
106
107
|
name = void 0,
|
|
107
108
|
onSubmit,
|
|
@@ -110,8 +111,9 @@ var Form = ({
|
|
|
110
111
|
validationTrigger = "all"
|
|
111
112
|
}) => {
|
|
112
113
|
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
113
|
-
|
|
114
|
+
_chunkZ7ETEIY7cjs.FormContext_default,
|
|
114
115
|
{
|
|
116
|
+
debugModeSettings: debug,
|
|
115
117
|
initialValues,
|
|
116
118
|
onSubmit,
|
|
117
119
|
validation,
|
|
@@ -127,7 +129,7 @@ var Form = ({
|
|
|
127
129
|
children
|
|
128
130
|
}
|
|
129
131
|
),
|
|
130
|
-
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormDebugViewer_default, { className: "w-96 flex-shrink" })
|
|
132
|
+
!_optionalChain([debug, 'optionalAccess', _4 => _4.disable]) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormDebugViewer_default, { className: "w-96 flex-shrink" })
|
|
131
133
|
] })
|
|
132
134
|
}
|
|
133
135
|
);
|
|
@@ -141,4 +143,4 @@ var Form_default2 = Form_default;
|
|
|
141
143
|
|
|
142
144
|
|
|
143
145
|
exports.Form_default = Form_default; exports.Form_default2 = Form_default2;
|
|
144
|
-
//# sourceMappingURL=chunk-
|
|
146
|
+
//# sourceMappingURL=chunk-YQH5YPBW.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/uniform/uniform/packages/uniform/dist/chunk-YQH5YPBW.cjs","../src/Form/Form.tsx","../src/Form/subcomponents/FormDebugViewer.tsx","../src/Form/index.ts"],"names":["jsx","jsxs","cn","Form_default"],"mappings":"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","file":"/home/runner/work/uniform/uniform/packages/uniform/dist/chunk-YQH5YPBW.cjs","sourcesContent":[null,"import type { VetoInstance } from '@fuf-stack/veto';\nimport type { ReactNode } from 'react';\nimport type { FieldValues, SubmitHandler } from 'react-hook-form';\nimport type { DebugModeSettings } from './subcomponents/FormContext';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\nimport { slugify } from '../helpers';\nimport FormProvider from './subcomponents/FormContext';\nimport FormDebugViewer from './subcomponents/FormDebugViewer';\n\nexport interface FormProps {\n /** form children */\n children: ReactNode | ReactNode[];\n /** CSS class name */\n className?: string | string[];\n /** settings for from debug mode */\n debug?: DebugModeSettings;\n /** initial form values */\n initialValues?: FieldValues;\n /** name of the form */\n name?: string;\n /** form submit handler */\n onSubmit: SubmitHandler<FieldValues>;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n /** veto validation schema */\n validation?: VetoInstance;\n /** when the validation should be triggered */\n validationTrigger?: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';\n}\n\n/**\n * Form component that has to wrap every uniform\n */\nconst Form = ({\n children,\n className = undefined,\n debug = undefined,\n initialValues = undefined,\n name = undefined,\n onSubmit,\n testId = undefined,\n validation = undefined,\n validationTrigger = 'all',\n}: FormProps) => {\n return (\n <FormProvider\n debugModeSettings={debug}\n initialValues={initialValues}\n onSubmit={onSubmit}\n validation={validation}\n validationTrigger={validationTrigger}\n >\n {({ handleSubmit }) => (\n <div className=\"flex w-full flex-row justify-between gap-6\">\n <form\n className={cn('flex-grow', className)}\n data-testid={slugify(testId || name || '')}\n name={name}\n onSubmit={handleSubmit}\n >\n {children}\n </form>\n {!debug?.disable && <FormDebugViewer className=\"w-96 flex-shrink\" />}\n </div>\n )}\n </FormProvider>\n );\n};\n\nexport default Form;\n","import type { VetoError } from '@fuf-stack/veto';\n\nimport { useEffect, useState } from 'react';\nimport { FaTimes } from 'react-icons/fa';\nimport { FaBug, FaBullseye } from 'react-icons/fa6';\n\nimport { cn } from '@fuf-stack/pixel-utils';\nimport { Button, Card, Json } from '@fuf-stack/pixels';\n\nimport { useFormContext } from '../../hooks';\n\ninterface FormDebugViewerProps {\n /** CSS class name */\n className?: string;\n}\n\n/** Renders a form debug panel with information about the current form state */\nconst FormDebugViewer = ({ className = undefined }: FormDebugViewerProps) => {\n const {\n debugMode,\n formState: { dirtyFields, isValid, isSubmitting },\n setDebugMode,\n validation,\n watch,\n } = useFormContext();\n\n const [validationErrors, setValidationErrors] = useState<\n VetoError['errors'] | null\n >(null);\n\n const formValues = watch();\n const debugTestIdsEnabled = debugMode === 'debug-testids';\n\n useEffect(\n () => {\n const updateValidationErrors = async () => {\n if (validation) {\n const validateResult = await validation?.validateAsync(formValues);\n setValidationErrors(validateResult?.errors);\n }\n };\n updateValidationErrors();\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [JSON.stringify(formValues)],\n );\n\n if (!debugMode || debugMode === 'off') {\n return (\n <Button\n ariaLabel=\"Enable form debug mode\"\n onClick={() => setDebugMode('debug')}\n className=\"absolute bottom-2.5 right-2.5 w-5 text-default-400\"\n variant=\"light\"\n icon={<FaBug />}\n />\n );\n }\n\n return (\n <Card\n className={cn(className)}\n header={\n <div className=\"flex w-full flex-row justify-between\">\n <span className=\"text-lg\">Debug Mode</span>\n <Button\n icon={<FaTimes className=\"text-danger\" />}\n onClick={() => setDebugMode('off')}\n size=\"sm\"\n variant=\"flat\"\n />\n </div>\n }\n >\n <Button\n variant={debugTestIdsEnabled ? 'solid' : 'light'}\n icon={<FaBullseye />}\n className=\"mb-4 ml-auto mr-auto\"\n onClick={() =>\n setDebugMode(debugMode === 'debug' ? 'debug-testids' : 'debug')\n }\n >\n {debugTestIdsEnabled ? 'Hide CopyButton' : 'Show CopyButton'}\n </Button>\n <Json\n value={{\n values: formValues,\n errors: validationErrors,\n dirtyFields,\n isValid,\n isSubmitting,\n }}\n />\n </Card>\n );\n};\nexport default FormDebugViewer;\n","import Form from './Form';\n\nexport type { FormProps } from './Form';\n\nexport { Form };\n\nexport default Form;\n"]}
|
|
@@ -18,15 +18,16 @@ var removeNullishFields = (obj) => {
|
|
|
18
18
|
})
|
|
19
19
|
);
|
|
20
20
|
};
|
|
21
|
+
var DEBUG_MODE_LOCAL_STORAGE_KEY_DEFAULT = "uniform:debug-mode";
|
|
21
22
|
var UniformContext = _react2.default.createContext({
|
|
22
23
|
debugMode: "off",
|
|
23
24
|
preventSubmit: () => void 0,
|
|
24
25
|
setDebugMode: () => void 0,
|
|
25
26
|
validation: void 0
|
|
26
27
|
});
|
|
27
|
-
var LOCALSTORAGE_DEBUG_MODE_KEY = "uniform:debug-mode";
|
|
28
28
|
var FormProvider = ({
|
|
29
29
|
children,
|
|
30
|
+
debugModeSettings = void 0,
|
|
30
31
|
initialValues = void 0,
|
|
31
32
|
onSubmit,
|
|
32
33
|
validation = void 0,
|
|
@@ -34,12 +35,14 @@ var FormProvider = ({
|
|
|
34
35
|
}) => {
|
|
35
36
|
const [preventSubmit, setPreventSubmit] = _react.useState.call(void 0, false);
|
|
36
37
|
const [debugMode, setDebugMode] = _pixels.useLocalStorage.call(void 0,
|
|
37
|
-
|
|
38
|
+
_optionalChain([debugModeSettings, 'optionalAccess', _ => _.localStorageKey]) || DEBUG_MODE_LOCAL_STORAGE_KEY_DEFAULT,
|
|
38
39
|
"off"
|
|
39
40
|
);
|
|
40
41
|
const contextValue = _react.useMemo.call(void 0,
|
|
41
42
|
() => ({
|
|
42
|
-
debugMode
|
|
43
|
+
// set debugMode to disabled when debugModeSettings.disable is true
|
|
44
|
+
// otherwise use current debug mode from localStorage
|
|
45
|
+
debugMode: _optionalChain([debugModeSettings, 'optionalAccess', _2 => _2.disable]) ? "disabled" : debugMode,
|
|
43
46
|
preventSubmit: (prevent) => {
|
|
44
47
|
setPreventSubmit(prevent);
|
|
45
48
|
},
|
|
@@ -47,7 +50,7 @@ var FormProvider = ({
|
|
|
47
50
|
validation
|
|
48
51
|
}),
|
|
49
52
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
50
|
-
[debugMode]
|
|
53
|
+
[debugMode, _optionalChain([debugModeSettings, 'optionalAccess', _3 => _3.disable])]
|
|
51
54
|
);
|
|
52
55
|
const methods = _reacthookform.useForm.call(void 0, {
|
|
53
56
|
defaultValues: initialValues,
|
|
@@ -69,7 +72,7 @@ var FormProvider = ({
|
|
|
69
72
|
console.warn(
|
|
70
73
|
"[FormProvider] form submit was prevented because preventSubmit is true..."
|
|
71
74
|
);
|
|
72
|
-
_optionalChain([e, 'optionalAccess',
|
|
75
|
+
_optionalChain([e, 'optionalAccess', _4 => _4.preventDefault, 'call', _5 => _5()]);
|
|
73
76
|
return Promise.resolve();
|
|
74
77
|
}
|
|
75
78
|
await methods.handleSubmit(onSubmit)(e);
|
|
@@ -81,9 +84,9 @@ var FormContext_default = FormProvider;
|
|
|
81
84
|
// src/hooks/useFormContext/useFormContext.ts
|
|
82
85
|
var recursiveSearchInnerType = (schema) => {
|
|
83
86
|
let currentSchema = schema;
|
|
84
|
-
while (_optionalChain([currentSchema, 'optionalAccess',
|
|
87
|
+
while (_optionalChain([currentSchema, 'optionalAccess', _6 => _6._def, 'optionalAccess', _7 => _7.innerType])) {
|
|
85
88
|
currentSchema = currentSchema._def.innerType;
|
|
86
|
-
if (_optionalChain([currentSchema, 'optionalAccess',
|
|
89
|
+
if (_optionalChain([currentSchema, 'optionalAccess', _8 => _8._def, 'optionalAccess', _9 => _9.typeName]) === "ZodOptional") {
|
|
87
90
|
return false;
|
|
88
91
|
}
|
|
89
92
|
}
|
|
@@ -92,19 +95,19 @@ var recursiveSearchInnerType = (schema) => {
|
|
|
92
95
|
var recursiveFieldKeySearch = (schema, path) => {
|
|
93
96
|
const [current, ...rest] = path;
|
|
94
97
|
let currentSchema = schema;
|
|
95
|
-
if (_optionalChain([schema, 'optionalAccess',
|
|
98
|
+
if (_optionalChain([schema, 'optionalAccess', _10 => _10._def, 'optionalAccess', _11 => _11.typeName]) === "ZodOptional") {
|
|
96
99
|
currentSchema = schema.unwrap();
|
|
97
100
|
}
|
|
98
|
-
if (_optionalChain([schema, 'optionalAccess',
|
|
101
|
+
if (_optionalChain([schema, 'optionalAccess', _12 => _12._def, 'optionalAccess', _13 => _13.typeName]) === "ZodEffects") {
|
|
99
102
|
return recursiveFieldKeySearch(schema._def.schema, path);
|
|
100
103
|
}
|
|
101
|
-
if (_optionalChain([currentSchema, 'optionalAccess',
|
|
102
|
-
return (_optionalChain([currentSchema, 'access',
|
|
104
|
+
if (_optionalChain([currentSchema, 'optionalAccess', _14 => _14._def, 'optionalAccess', _15 => _15.typeName]) === "ZodIntersection") {
|
|
105
|
+
return (_optionalChain([currentSchema, 'access', _16 => _16._def, 'access', _17 => _17.left, 'optionalAccess', _18 => _18.schema]) ? recursiveFieldKeySearch(currentSchema._def.left.schema, path) : recursiveFieldKeySearch(currentSchema._def.left, path)) || (_optionalChain([currentSchema, 'access', _19 => _19._def, 'access', _20 => _20.right, 'optionalAccess', _21 => _21.schema]) ? recursiveFieldKeySearch(currentSchema._def.right.schema, path) : recursiveFieldKeySearch(currentSchema._def.right, path));
|
|
103
106
|
}
|
|
104
|
-
const shape = _nullishCoalesce(_optionalChain([currentSchema, 'optionalAccess',
|
|
107
|
+
const shape = _nullishCoalesce(_optionalChain([currentSchema, 'optionalAccess', _22 => _22.shape]), () => ( _optionalChain([currentSchema, 'optionalAccess', _23 => _23.element, 'optionalAccess', _24 => _24.shape])));
|
|
105
108
|
if (shape && shape[current]) {
|
|
106
109
|
if (rest.length === 0) {
|
|
107
|
-
return _optionalChain([shape, 'access',
|
|
110
|
+
return _optionalChain([shape, 'access', _25 => _25[current], 'optionalAccess', _26 => _26._def, 'optionalAccess', _27 => _27.typeName]) !== "ZodOptional" && recursiveSearchInnerType(shape[current]);
|
|
108
111
|
}
|
|
109
112
|
return recursiveFieldKeySearch(shape[current], rest);
|
|
110
113
|
}
|
|
@@ -121,7 +124,7 @@ var useFormContext = () => {
|
|
|
121
124
|
const uniformContext = _react.useContext.call(void 0, UniformContext);
|
|
122
125
|
const getFieldState = (name, testId) => {
|
|
123
126
|
const fieldPath = typeof name === "string" ? name.replace(/\[\d+\]/g, "").split(".") : name;
|
|
124
|
-
const required = _optionalChain([uniformContext, 'optionalAccess',
|
|
127
|
+
const required = _optionalChain([uniformContext, 'optionalAccess', _28 => _28.validation]) && recursiveFieldKeySearch(uniformContext.validation.schema, fieldPath) || false;
|
|
125
128
|
const { error, ...rest } = getFieldStateOrig(name, formState);
|
|
126
129
|
return {
|
|
127
130
|
...rest,
|
|
@@ -144,4 +147,4 @@ var useFormContext = () => {
|
|
|
144
147
|
|
|
145
148
|
|
|
146
149
|
exports.FormContext_default = FormContext_default; exports.recursiveFieldKeySearch = recursiveFieldKeySearch; exports.useFormContext = useFormContext;
|
|
147
|
-
//# sourceMappingURL=chunk-
|
|
150
|
+
//# sourceMappingURL=chunk-Z7ETEIY7.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/uniform/uniform/packages/uniform/dist/chunk-Z7ETEIY7.cjs","../src/hooks/useFormContext/useFormContext.ts","../src/Form/subcomponents/FormContext.tsx"],"names":[],"mappings":"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","file":"/home/runner/work/uniform/uniform/packages/uniform/dist/chunk-Z7ETEIY7.cjs","sourcesContent":[null,"import type { VetoSchema } from '@fuf-stack/veto';\nimport type { FieldError } from 'react-hook-form';\n\nimport { useContext } from 'react';\nimport { useFormContext as useHookFormContext } from 'react-hook-form';\n\nimport { UniformContext } from '../../Form/subcomponents/FormContext';\nimport { slugify } from '../../helpers';\n\n/** Checks whether the field is an optional type by recursively checking inner types */\nconst recursiveSearchInnerType = (schema: VetoSchema): boolean => {\n let currentSchema = schema;\n\n // Loop through inner types to find the root type\n while (currentSchema?._def?.innerType) {\n currentSchema = currentSchema._def.innerType;\n if (currentSchema?._def?.typeName === 'ZodOptional') {\n // Stop recursion if optional is found\n return false;\n }\n }\n // If no optional was found, assume it's required\n return true;\n};\n\n/** Recursive search to check whether a field is required or optional */\nexport const recursiveFieldKeySearch = (\n schema: VetoSchema,\n path: string[],\n): boolean | null => {\n const [current, ...rest] = path;\n\n let currentSchema = schema;\n\n // Handle ZodOptional schema: unwrap and continue searching\n if (schema?._def?.typeName === 'ZodOptional') {\n // @ts-expect-error not sure here\n currentSchema = schema.unwrap();\n }\n\n // Handle ZodEffects (transformations or validation effects)\n if (schema?._def?.typeName === 'ZodEffects') {\n // Unwrap and continue\n return recursiveFieldKeySearch(schema._def.schema, path);\n }\n\n // Handle ZodIntersection (intersection types)\n if (currentSchema?._def?.typeName === 'ZodIntersection') {\n return (\n (currentSchema._def.left?.schema\n ? recursiveFieldKeySearch(currentSchema._def.left.schema, path)\n : recursiveFieldKeySearch(currentSchema._def.left, path)) ||\n (currentSchema._def.right?.schema\n ? recursiveFieldKeySearch(currentSchema._def.right.schema, path)\n : recursiveFieldKeySearch(currentSchema._def.right, path))\n );\n }\n\n // Get the shape of an object or elements of an array schema\n // @ts-expect-error not sure here\n const shape = currentSchema?.shape ?? currentSchema?.element?.shape;\n\n if (shape && shape[current]) {\n if (rest.length === 0) {\n // At the end of the path, check if the field is optional\n return (\n shape[current]?._def?.typeName !== 'ZodOptional' &&\n recursiveSearchInnerType(shape[current])\n );\n }\n return recursiveFieldKeySearch(shape[current], rest);\n }\n // Return null if field not found\n return null;\n};\n\n/**\n * Custom hook that extends react-hook-form's useFormContext to add validation and state management.\n */\nexport const useFormContext = () => {\n const {\n formState,\n // https://react-hook-form.com/docs/useform/getfieldstate\n // for getFieldState a subscription to formState properties is needed!\n getFieldState: getFieldStateOrig,\n ...otherMethods\n } = useHookFormContext();\n\n const uniformContext = useContext(UniformContext);\n\n /**\n * Updated getFieldState method which returns:\n * - Whether the field is required by checking the validation schema\n * - Existing field state information (errors, etc.)\n */\n const getFieldState = (name: string, testId?: string) => {\n const fieldPath =\n typeof name === 'string' ? name.replace(/\\[\\d+\\]/g, '').split('.') : name;\n\n // Check if the field is required using the validation schema\n const required =\n (uniformContext?.validation &&\n recursiveFieldKeySearch(uniformContext.validation.schema, fieldPath)) ||\n false;\n\n // Get the original field state (errors, etc.) from react-hook-form\n const { error, ...rest } = getFieldStateOrig(name, formState);\n\n return {\n ...rest,\n error: error as FieldError[] | undefined, // Ensure correct type for error\n required,\n testId: slugify(testId || name),\n };\n };\n\n return {\n ...otherMethods,\n ...uniformContext,\n getFieldState,\n formState,\n };\n};\n","import type { VetoInstance } from '@fuf-stack/veto';\nimport type { ReactNode } from 'react';\nimport type { FieldValues, SubmitHandler } from 'react-hook-form';\n\nimport React, { useMemo, useState } from 'react';\nimport { FormProvider as HookFormProvider, useForm } from 'react-hook-form';\n\nimport { useLocalStorage } from '@fuf-stack/pixels';\n\n/**\n * recursively removes all fields that are null or undefined before\n * the form data is passed to the veto validation function\n */\nexport const removeNullishFields = (obj: Record<string, unknown>) => {\n return JSON.parse(\n JSON.stringify(obj, (_key, value) => {\n return value === null ? undefined : value;\n }),\n );\n};\n\ntype DebugMode = 'debug' | 'debug-testids' | 'off' | 'disabled';\n\nexport type DebugModeSettings = {\n /** disable form debug completely */\n disable?: boolean;\n /** custom localStorage key to save debug mode state */\n localStorageKey?: string;\n};\n\nconst DEBUG_MODE_LOCAL_STORAGE_KEY_DEFAULT = 'uniform:debug-mode';\n\n/**\n * The `UniformContext` provides control over the form's submission behavior and may optionally include\n * a Veto validation schema for form validation.\n *\n * Specifically, this context offers:\n * 1. **Form Submission Control**: The `preventSubmit` function allows components to enable or disable\n * form submissions.\n * 2. **Optional Validation Schema**: The `validation` property may hold a Veto validation schema instance\n * that can be used to validate form fields and handle validation logic.\n *\n * This context is useful for components that need to interact with or control the form submission state,\n * or access the validation schema for managing form validation logic.\n */\nexport const UniformContext = React.createContext<{\n /** Form debug mode enabled or not */\n debugMode: DebugMode;\n /** settings for from debug mode */\n debugModeSettings?: DebugModeSettings;\n /** Function to update if the form can currently be submitted */\n preventSubmit: (prevent: boolean) => void;\n /** Setter to enable or disable form debug mode */\n setDebugMode: (debugMode: DebugMode) => void;\n /** Optional Veto validation schema instance for form validation */\n validation?: VetoInstance;\n}>({\n debugMode: 'off',\n preventSubmit: () => undefined,\n setDebugMode: () => undefined,\n validation: undefined,\n});\n\n// Define props for the FormProvider component, extending HookForm's props\ninterface FormProviderProps {\n /** children form render function */\n children: (childProps: {\n handleSubmit: (e?: React.BaseSyntheticEvent) => Promise<void>;\n }) => ReactNode;\n /** settings for from debug mode */\n debugModeSettings?: DebugModeSettings;\n /** initial form values */\n initialValues?: FieldValues;\n /** form submit handler */\n onSubmit: SubmitHandler<FieldValues>;\n /** Veto validation schema instance */\n validation?: VetoInstance;\n /** when the validation should be triggered */\n validationTrigger: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';\n}\n\n/**\n * FormProvider component provides:\n * - The veto validation schema context\n * - Submit handler creation and submission control with preventSubmit\n * - Form Debug Mode state\n * - React Hook Form context\n */\nconst FormProvider: React.FC<FormProviderProps> = ({\n children,\n debugModeSettings = undefined,\n initialValues = undefined,\n onSubmit,\n validation = undefined,\n validationTrigger,\n}) => {\n // Control if the form can currently be submitted\n const [preventSubmit, setPreventSubmit] = useState(false);\n\n // Form Debug mode state is handled in the form context\n const [debugMode, setDebugMode] = useLocalStorage<DebugMode>(\n debugModeSettings?.localStorageKey || DEBUG_MODE_LOCAL_STORAGE_KEY_DEFAULT,\n 'off',\n );\n\n // Memoize the context value to prevent re-renders\n const contextValue = useMemo(\n () => ({\n // set debugMode to disabled when debugModeSettings.disable is true\n // otherwise use current debug mode from localStorage\n debugMode: debugModeSettings?.disable ? 'disabled' : debugMode,\n preventSubmit: (prevent: boolean) => {\n setPreventSubmit(prevent);\n },\n setDebugMode,\n validation,\n }),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [debugMode, debugModeSettings?.disable],\n );\n\n // Initialize react hook form\n const methods = useForm({\n defaultValues: initialValues,\n // add validation config when validation schema provided\n ...(validation\n ? {\n // set rhf mode\n // see: https://react-hook-form.com/docs/useform#mode\n mode: validationTrigger,\n resolver: async (values) => {\n const { data, errors, ...rest } = await validation.validateAsync(\n removeNullishFields(values),\n );\n // https://github.com/react-hook-form/resolvers/blob/master/zod/src/zod.ts\n return { values: data || {}, errors: errors || {}, ...rest };\n },\n }\n : {}),\n });\n\n // Create submit handler\n // eslint-disable-next-line consistent-return\n const handleSubmit = async (e?: React.BaseSyntheticEvent) => {\n // only prevent submit when form state is valid, because otherwise\n // submit will only trigger validation and add errors / focus invalid fields\n if (methods.formState.isValid && preventSubmit) {\n console.warn(\n '[FormProvider] form submit was prevented because preventSubmit is true...',\n );\n e?.preventDefault();\n return Promise.resolve();\n }\n await methods.handleSubmit(onSubmit)(e);\n };\n\n return (\n <UniformContext.Provider value={contextValue}>\n {/* Spread all hook form props into HookFormProvider */}\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n <HookFormProvider {...methods}>\n {children({ handleSubmit })}\n </HookFormProvider>\n </UniformContext.Provider>\n );\n};\n\nexport default FormProvider;\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
useFormContext
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-R4ILETYI.js";
|
|
4
4
|
import {
|
|
5
5
|
slugify
|
|
6
6
|
} from "./chunk-V46BHM2U.js";
|
|
@@ -45,4 +45,4 @@ export {
|
|
|
45
45
|
SubmitButton_default,
|
|
46
46
|
SubmitButton_default2
|
|
47
47
|
};
|
|
48
|
-
//# sourceMappingURL=chunk-
|
|
48
|
+
//# sourceMappingURL=chunk-ZZCZS4QM.js.map
|
package/dist/hooks/index.cjs
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
var
|
|
4
|
+
var _chunkZ7ETEIY7cjs = require('../chunk-Z7ETEIY7.cjs');
|
|
5
5
|
require('../chunk-BBB4FEY6.cjs');
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
|
9
|
-
exports.recursiveFieldKeySearch =
|
|
9
|
+
exports.recursiveFieldKeySearch = _chunkZ7ETEIY7cjs.recursiveFieldKeySearch; exports.useFormContext = _chunkZ7ETEIY7cjs.useFormContext;
|
|
10
10
|
//# sourceMappingURL=index.cjs.map
|
package/dist/hooks/index.d.cts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as _fuf_stack_veto from '@fuf-stack/veto';
|
|
2
2
|
import { VetoSchema } from '@fuf-stack/veto';
|
|
3
|
+
import { D as DebugModeSettings } from '../FormContext-ldCpxKnY.cjs';
|
|
3
4
|
import * as react_hook_form from 'react-hook-form';
|
|
4
5
|
import { FieldError } from 'react-hook-form';
|
|
5
6
|
|
|
@@ -19,9 +20,10 @@ declare const useFormContext: () => {
|
|
|
19
20
|
isValidating: boolean;
|
|
20
21
|
};
|
|
21
22
|
formState: react_hook_form.FormState<react_hook_form.FieldValues>;
|
|
22
|
-
debugMode: "debug" | "debug-testids" | "off";
|
|
23
|
+
debugMode: "debug" | "debug-testids" | "off" | "disabled";
|
|
24
|
+
debugModeSettings?: DebugModeSettings;
|
|
23
25
|
preventSubmit: (prevent: boolean) => void;
|
|
24
|
-
setDebugMode: (debugMode: "debug" | "debug-testids" | "off") => void;
|
|
26
|
+
setDebugMode: (debugMode: "debug" | "debug-testids" | "off" | "disabled") => void;
|
|
25
27
|
validation?: _fuf_stack_veto.VetoInstance;
|
|
26
28
|
watch: react_hook_form.UseFormWatch<react_hook_form.FieldValues>;
|
|
27
29
|
getValues: react_hook_form.UseFormGetValues<react_hook_form.FieldValues>;
|
package/dist/hooks/index.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as _fuf_stack_veto from '@fuf-stack/veto';
|
|
2
2
|
import { VetoSchema } from '@fuf-stack/veto';
|
|
3
|
+
import { D as DebugModeSettings } from '../FormContext-ldCpxKnY.js';
|
|
3
4
|
import * as react_hook_form from 'react-hook-form';
|
|
4
5
|
import { FieldError } from 'react-hook-form';
|
|
5
6
|
|
|
@@ -19,9 +20,10 @@ declare const useFormContext: () => {
|
|
|
19
20
|
isValidating: boolean;
|
|
20
21
|
};
|
|
21
22
|
formState: react_hook_form.FormState<react_hook_form.FieldValues>;
|
|
22
|
-
debugMode: "debug" | "debug-testids" | "off";
|
|
23
|
+
debugMode: "debug" | "debug-testids" | "off" | "disabled";
|
|
24
|
+
debugModeSettings?: DebugModeSettings;
|
|
23
25
|
preventSubmit: (prevent: boolean) => void;
|
|
24
|
-
setDebugMode: (debugMode: "debug" | "debug-testids" | "off") => void;
|
|
26
|
+
setDebugMode: (debugMode: "debug" | "debug-testids" | "off" | "disabled") => void;
|
|
25
27
|
validation?: _fuf_stack_veto.VetoInstance;
|
|
26
28
|
watch: react_hook_form.UseFormWatch<react_hook_form.FieldValues>;
|
|
27
29
|
getValues: react_hook_form.UseFormGetValues<react_hook_form.FieldValues>;
|
package/dist/hooks/index.js
CHANGED
package/dist/index.cjs
CHANGED
|
@@ -1,43 +1,43 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _chunk2OVE7FAFcjs = require('./chunk-2OVE7FAF.cjs');
|
|
4
4
|
|
|
5
5
|
|
|
6
|
-
var
|
|
6
|
+
var _chunkR3Q52RLGcjs = require('./chunk-R3Q52RLG.cjs');
|
|
7
7
|
|
|
8
8
|
|
|
9
|
-
var
|
|
9
|
+
var _chunkTCL7YWB6cjs = require('./chunk-TCL7YWB6.cjs');
|
|
10
10
|
|
|
11
11
|
|
|
12
|
-
var
|
|
12
|
+
var _chunk3HCROPXYcjs = require('./chunk-3HCROPXY.cjs');
|
|
13
13
|
|
|
14
14
|
|
|
15
|
-
var
|
|
15
|
+
var _chunkG5H3WD7Xcjs = require('./chunk-G5H3WD7X.cjs');
|
|
16
16
|
|
|
17
17
|
|
|
18
|
-
var
|
|
18
|
+
var _chunkYQH5YPBWcjs = require('./chunk-YQH5YPBW.cjs');
|
|
19
19
|
|
|
20
20
|
|
|
21
|
-
var
|
|
21
|
+
var _chunk6GN255GPcjs = require('./chunk-6GN255GP.cjs');
|
|
22
22
|
|
|
23
23
|
|
|
24
|
-
var
|
|
24
|
+
var _chunkF23KFEVZcjs = require('./chunk-F23KFEVZ.cjs');
|
|
25
25
|
|
|
26
26
|
|
|
27
|
-
var
|
|
27
|
+
var _chunkQKF4FL3Xcjs = require('./chunk-QKF4FL3X.cjs');
|
|
28
28
|
|
|
29
29
|
|
|
30
|
-
var
|
|
30
|
+
var _chunkOBNBG56Hcjs = require('./chunk-OBNBG56H.cjs');
|
|
31
31
|
|
|
32
32
|
|
|
33
|
-
var
|
|
33
|
+
var _chunkJU5RT22Ycjs = require('./chunk-JU5RT22Y.cjs');
|
|
34
34
|
|
|
35
35
|
|
|
36
|
-
var
|
|
36
|
+
var _chunkOHJYXA6Rcjs = require('./chunk-OHJYXA6R.cjs');
|
|
37
37
|
|
|
38
38
|
|
|
39
39
|
|
|
40
|
-
var
|
|
40
|
+
var _chunkZ7ETEIY7cjs = require('./chunk-Z7ETEIY7.cjs');
|
|
41
41
|
|
|
42
42
|
|
|
43
43
|
var _chunkBBB4FEY6cjs = require('./chunk-BBB4FEY6.cjs');
|
|
@@ -57,5 +57,5 @@ var _chunkBBB4FEY6cjs = require('./chunk-BBB4FEY6.cjs');
|
|
|
57
57
|
|
|
58
58
|
|
|
59
59
|
|
|
60
|
-
exports.CheckboxGroup =
|
|
60
|
+
exports.CheckboxGroup = _chunk3HCROPXYcjs.CheckboxGroup_default; exports.FieldArray = _chunkG5H3WD7Xcjs.FieldArray_default; exports.FieldCopyTestIdButton = _chunkJU5RT22Ycjs.FieldCopyTestIdButton_default; exports.FieldValidationError = _chunkOHJYXA6Rcjs.FieldValidationError_default; exports.Form = _chunkYQH5YPBWcjs.Form_default; exports.Grid = _chunk6GN255GPcjs.Grid_default; exports.Input = _chunkF23KFEVZcjs.Input_default; exports.RadioGroup = _chunkQKF4FL3Xcjs.RadioGroup_default; exports.Select = _chunkOBNBG56Hcjs.Select_default; exports.SubmitButton = _chunk2OVE7FAFcjs.SubmitButton_default; exports.Switch = _chunkR3Q52RLGcjs.Switch_default; exports.TextArea = _chunkTCL7YWB6cjs.TextArea_default; exports.recursiveFieldKeySearch = _chunkZ7ETEIY7cjs.recursiveFieldKeySearch; exports.slugify = _chunkBBB4FEY6cjs.slugify; exports.useFormContext = _chunkZ7ETEIY7cjs.useFormContext;
|
|
61
61
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.d.cts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export { C as CheckboxGroup, b as CheckboxGroupOption, a as CheckboxGroupProps } from './CheckboxGroup-o-qWkWe1.cjs';
|
|
2
2
|
export { F as FieldArray, c as FieldArrayFieldChildren, b as FieldArrayHideOption, a as FieldArrayProps } from './FieldArray-DUvn98Fe.cjs';
|
|
3
|
-
export { F as Form, a as FormProps } from './Form-
|
|
3
|
+
export { F as Form, a as FormProps } from './Form-D0grgL6G.cjs';
|
|
4
4
|
export { G as Grid, a as GridProps } from './Grid-DF3L9NF3.cjs';
|
|
5
5
|
export { slugify } from './helpers/index.cjs';
|
|
6
6
|
export { recursiveFieldKeySearch, useFormContext } from './hooks/index.cjs';
|
|
@@ -19,6 +19,7 @@ import '@fuf-stack/pixel-utils';
|
|
|
19
19
|
import 'react-hook-form';
|
|
20
20
|
import '@fuf-stack/veto';
|
|
21
21
|
import 'react';
|
|
22
|
+
import './FormContext-ldCpxKnY.cjs';
|
|
22
23
|
import 'slug';
|
|
23
24
|
import 'react-select';
|
|
24
25
|
import '@fuf-stack/pixels';
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export { C as CheckboxGroup, b as CheckboxGroupOption, a as CheckboxGroupProps } from './CheckboxGroup-o-qWkWe1.js';
|
|
2
2
|
export { F as FieldArray, c as FieldArrayFieldChildren, b as FieldArrayHideOption, a as FieldArrayProps } from './FieldArray-DUvn98Fe.js';
|
|
3
|
-
export { F as Form, a as FormProps } from './Form-
|
|
3
|
+
export { F as Form, a as FormProps } from './Form-DX5NTR-H.js';
|
|
4
4
|
export { G as Grid, a as GridProps } from './Grid-DF3L9NF3.js';
|
|
5
5
|
export { slugify } from './helpers/index.js';
|
|
6
6
|
export { recursiveFieldKeySearch, useFormContext } from './hooks/index.js';
|
|
@@ -19,6 +19,7 @@ import '@fuf-stack/pixel-utils';
|
|
|
19
19
|
import 'react-hook-form';
|
|
20
20
|
import '@fuf-stack/veto';
|
|
21
21
|
import 'react';
|
|
22
|
+
import './FormContext-ldCpxKnY.js';
|
|
22
23
|
import 'slug';
|
|
23
24
|
import 'react-select';
|
|
24
25
|
import '@fuf-stack/pixels';
|
package/dist/index.js
CHANGED
|
@@ -1,43 +1,43 @@
|
|
|
1
1
|
import {
|
|
2
|
-
|
|
3
|
-
} from "./chunk-
|
|
2
|
+
SubmitButton_default
|
|
3
|
+
} from "./chunk-ZZCZS4QM.js";
|
|
4
4
|
import {
|
|
5
5
|
Switch_default
|
|
6
|
-
} from "./chunk-
|
|
6
|
+
} from "./chunk-5S7YSUSV.js";
|
|
7
7
|
import {
|
|
8
8
|
TextArea_default
|
|
9
|
-
} from "./chunk-
|
|
9
|
+
} from "./chunk-6QXNSRCS.js";
|
|
10
10
|
import {
|
|
11
11
|
CheckboxGroup_default
|
|
12
|
-
} from "./chunk-
|
|
12
|
+
} from "./chunk-TYJNJH65.js";
|
|
13
|
+
import {
|
|
14
|
+
FieldArray_default
|
|
15
|
+
} from "./chunk-JM2PZT2K.js";
|
|
16
|
+
import {
|
|
17
|
+
Form_default
|
|
18
|
+
} from "./chunk-D3E4GLA2.js";
|
|
13
19
|
import {
|
|
14
20
|
Grid_default
|
|
15
21
|
} from "./chunk-PDCEKC3G.js";
|
|
16
22
|
import {
|
|
17
23
|
Input_default
|
|
18
|
-
} from "./chunk-
|
|
24
|
+
} from "./chunk-OX2WPUIY.js";
|
|
19
25
|
import {
|
|
20
26
|
RadioGroup_default
|
|
21
|
-
} from "./chunk-
|
|
27
|
+
} from "./chunk-XJULYTGW.js";
|
|
22
28
|
import {
|
|
23
29
|
Select_default
|
|
24
|
-
} from "./chunk-
|
|
25
|
-
import {
|
|
26
|
-
FieldArray_default
|
|
27
|
-
} from "./chunk-ZFF2GFNX.js";
|
|
30
|
+
} from "./chunk-AWAGKOHK.js";
|
|
28
31
|
import {
|
|
29
32
|
FieldCopyTestIdButton_default
|
|
30
33
|
} from "./chunk-2CRY7VDQ.js";
|
|
31
34
|
import {
|
|
32
35
|
FieldValidationError_default
|
|
33
36
|
} from "./chunk-WKM2D7LF.js";
|
|
34
|
-
import {
|
|
35
|
-
SubmitButton_default
|
|
36
|
-
} from "./chunk-ZNVGXKHS.js";
|
|
37
37
|
import {
|
|
38
38
|
recursiveFieldKeySearch,
|
|
39
39
|
useFormContext
|
|
40
|
-
} from "./chunk-
|
|
40
|
+
} from "./chunk-R4ILETYI.js";
|
|
41
41
|
import {
|
|
42
42
|
slugify
|
|
43
43
|
} from "./chunk-V46BHM2U.js";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fuf-stack/uniform",
|
|
3
|
-
"version": "0.10.
|
|
3
|
+
"version": "0.10.3",
|
|
4
4
|
"description": "fuf react form library",
|
|
5
5
|
"author": "Hannes Tiede",
|
|
6
6
|
"homepage": "https://github.com/fuf-stack/uniform#readme",
|
|
@@ -121,12 +121,12 @@
|
|
|
121
121
|
"@react-aria/visually-hidden": "3.8.17",
|
|
122
122
|
"framer-motion": "11.11.11",
|
|
123
123
|
"react-icons": "5.3.0",
|
|
124
|
-
"react-hook-form": "7.53.
|
|
125
|
-
"react-select": "5.8.
|
|
124
|
+
"react-hook-form": "7.53.2",
|
|
125
|
+
"react-select": "5.8.3",
|
|
126
126
|
"slug": "9.1.0",
|
|
127
127
|
"@fuf-stack/pixel-utils": "0.3.1",
|
|
128
|
-
"@fuf-stack/
|
|
129
|
-
"@fuf-stack/
|
|
128
|
+
"@fuf-stack/pixels": "0.27.2",
|
|
129
|
+
"@fuf-stack/veto": "0.5.0"
|
|
130
130
|
},
|
|
131
131
|
"devDependencies": {
|
|
132
132
|
"@types/debug": "4.1.12",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Form/Form.tsx","../src/Form/subcomponents/FormDebugViewer.tsx","../src/Form/index.ts"],"sourcesContent":["import type { VetoInstance } from '@fuf-stack/veto';\nimport type { ReactNode } from 'react';\nimport type { FieldValues, SubmitHandler } from 'react-hook-form';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\nimport { slugify } from '../helpers';\nimport FormProvider from './subcomponents/FormContext';\nimport FormDebugViewer from './subcomponents/FormDebugViewer';\n\nexport interface FormProps {\n /** form children */\n children: ReactNode | ReactNode[];\n /** CSS class name */\n className?: string | string[];\n /** initial form values */\n initialValues?: FieldValues;\n /** name of the form */\n name?: string;\n /** form submit handler */\n onSubmit: SubmitHandler<FieldValues>;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n /** veto validation schema */\n validation?: VetoInstance;\n /** when the validation should be triggered */\n validationTrigger?: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';\n}\n\n/**\n * Form component that has to wrap every uniform\n */\nconst Form = ({\n children,\n className = undefined,\n initialValues = undefined,\n name = undefined,\n onSubmit,\n testId = undefined,\n validation = undefined,\n validationTrigger = 'all',\n}: FormProps) => {\n return (\n <FormProvider\n initialValues={initialValues}\n onSubmit={onSubmit}\n validation={validation}\n validationTrigger={validationTrigger}\n >\n {({ handleSubmit }) => (\n <div className=\"flex w-full flex-row justify-between gap-6\">\n <form\n className={cn('flex-grow', className)}\n data-testid={slugify(testId || name || '')}\n name={name}\n onSubmit={handleSubmit}\n >\n {children}\n </form>\n <FormDebugViewer className=\"w-96 flex-shrink\" />\n </div>\n )}\n </FormProvider>\n );\n};\n\nexport default Form;\n","import type { VetoError } from '@fuf-stack/veto';\n\nimport { useEffect, useState } from 'react';\nimport { FaTimes } from 'react-icons/fa';\nimport { FaBug, FaBullseye } from 'react-icons/fa6';\n\nimport { cn } from '@fuf-stack/pixel-utils';\nimport { Button, Card, Json } from '@fuf-stack/pixels';\n\nimport { useFormContext } from '../../hooks';\n\ninterface FormDebugViewerProps {\n /** CSS class name */\n className?: string;\n}\n\n/** Renders a form debug panel with information about the current form state */\nconst FormDebugViewer = ({ className = undefined }: FormDebugViewerProps) => {\n const {\n debugMode,\n formState: { dirtyFields, isValid, isSubmitting },\n setDebugMode,\n validation,\n watch,\n } = useFormContext();\n\n const [validationErrors, setValidationErrors] = useState<\n VetoError['errors'] | null\n >(null);\n\n const formValues = watch();\n const debugTestIdsEnabled = debugMode === 'debug-testids';\n\n useEffect(\n () => {\n const updateValidationErrors = async () => {\n if (validation) {\n const validateResult = await validation?.validateAsync(formValues);\n setValidationErrors(validateResult?.errors);\n }\n };\n updateValidationErrors();\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [JSON.stringify(formValues)],\n );\n\n if (!debugMode || debugMode === 'off') {\n return (\n <Button\n ariaLabel=\"Enable form debug mode\"\n onClick={() => setDebugMode('debug')}\n className=\"absolute bottom-2.5 right-2.5 w-5 text-default-400\"\n variant=\"light\"\n icon={<FaBug />}\n />\n );\n }\n\n return (\n <Card\n className={cn(className)}\n header={\n <div className=\"flex w-full flex-row justify-between\">\n <span className=\"text-lg\">Debug Mode</span>\n <Button\n icon={<FaTimes className=\"text-danger\" />}\n onClick={() => setDebugMode('off')}\n size=\"sm\"\n variant=\"flat\"\n />\n </div>\n }\n >\n <Button\n variant={debugTestIdsEnabled ? 'solid' : 'light'}\n icon={<FaBullseye />}\n className=\"mb-4 ml-auto mr-auto\"\n onClick={() =>\n setDebugMode(debugMode === 'debug' ? 'debug-testids' : 'debug')\n }\n >\n {debugTestIdsEnabled ? 'Hide CopyButton' : 'Show CopyButton'}\n </Button>\n <Json\n value={{\n values: formValues,\n errors: validationErrors,\n dirtyFields,\n isValid,\n isSubmitting,\n }}\n />\n </Card>\n );\n};\nexport default FormDebugViewer;\n","import Form from './Form';\n\nexport type { FormProps } from './Form';\n\nexport { Form };\n\nexport default Form;\n"],"mappings":";;;;;;;;;AAIA,SAAS,MAAAA,WAAU;;;ACFnB,SAAS,WAAW,gBAAgB;AACpC,SAAS,eAAe;AACxB,SAAS,OAAO,kBAAkB;AAElC,SAAS,UAAU;AACnB,SAAS,QAAQ,MAAM,YAAY;AA+CrB,cASN,YATM;AArCd,IAAM,kBAAkB,CAAC,EAAE,YAAY,OAAU,MAA4B;AAC3E,QAAM;AAAA,IACJ;AAAA,IACA,WAAW,EAAE,aAAa,SAAS,aAAa;AAAA,IAChD;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,eAAe;AAEnB,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAE9C,IAAI;AAEN,QAAM,aAAa,MAAM;AACzB,QAAM,sBAAsB,cAAc;AAE1C;AAAA,IACE,MAAM;AACJ,YAAM,yBAAyB,YAAY;AACzC,YAAI,YAAY;AACd,gBAAM,iBAAiB,MAAM,YAAY,cAAc,UAAU;AACjE,8BAAoB,gBAAgB,MAAM;AAAA,QAC5C;AAAA,MACF;AACA,6BAAuB;AAAA,IACzB;AAAA;AAAA,IAEA,CAAC,KAAK,UAAU,UAAU,CAAC;AAAA,EAC7B;AAEA,MAAI,CAAC,aAAa,cAAc,OAAO;AACrC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,SAAS,MAAM,aAAa,OAAO;AAAA,QACnC,WAAU;AAAA,QACV,SAAQ;AAAA,QACR,MAAM,oBAAC,SAAM;AAAA;AAAA,IACf;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,SAAS;AAAA,MACvB,QACE,qBAAC,SAAI,WAAU,wCACb;AAAA,4BAAC,UAAK,WAAU,WAAU,wBAAU;AAAA,QACpC;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,oBAAC,WAAQ,WAAU,eAAc;AAAA,YACvC,SAAS,MAAM,aAAa,KAAK;AAAA,YACjC,MAAK;AAAA,YACL,SAAQ;AAAA;AAAA,QACV;AAAA,SACF;AAAA,MAGF;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,SAAS,sBAAsB,UAAU;AAAA,YACzC,MAAM,oBAAC,cAAW;AAAA,YAClB,WAAU;AAAA,YACV,SAAS,MACP,aAAa,cAAc,UAAU,kBAAkB,OAAO;AAAA,YAG/D,gCAAsB,oBAAoB;AAAA;AAAA,QAC7C;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,QAAQ;AAAA,cACR,QAAQ;AAAA,cACR;AAAA,cACA;AAAA,cACA;AAAA,YACF;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;AACA,IAAO,0BAAQ;;;AD9CP,SACE,OAAAC,MADF,QAAAC,aAAA;AAlBR,IAAM,OAAO,CAAC;AAAA,EACZ;AAAA,EACA,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,OAAO;AAAA,EACP;AAAA,EACA,SAAS;AAAA,EACT,aAAa;AAAA,EACb,oBAAoB;AACtB,MAAiB;AACf,SACE,gBAAAD;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEC,WAAC,EAAE,aAAa,MACf,gBAAAC,MAAC,SAAI,WAAU,8CACb;AAAA,wBAAAD;AAAA,UAAC;AAAA;AAAA,YACC,WAAWE,IAAG,aAAa,SAAS;AAAA,YACpC,eAAa,QAAQ,UAAU,QAAQ,EAAE;AAAA,YACzC;AAAA,YACA,UAAU;AAAA,YAET;AAAA;AAAA,QACH;AAAA,QACA,gBAAAF,KAAC,2BAAgB,WAAU,oBAAmB;AAAA,SAChD;AAAA;AAAA,EAEJ;AAEJ;AAEA,IAAO,eAAQ;;;AE5Df,IAAOG,gBAAQ;","names":["cn","jsx","jsxs","cn","Form_default"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useFormContext/useFormContext.ts","../src/Form/subcomponents/FormContext.tsx"],"sourcesContent":["import type { VetoSchema } from '@fuf-stack/veto';\nimport type { FieldError } from 'react-hook-form';\n\nimport { useContext } from 'react';\nimport { useFormContext as useHookFormContext } from 'react-hook-form';\n\nimport { UniformContext } from '../../Form/subcomponents/FormContext';\nimport { slugify } from '../../helpers';\n\n/** Checks whether the field is an optional type by recursively checking inner types */\nconst recursiveSearchInnerType = (schema: VetoSchema): boolean => {\n let currentSchema = schema;\n\n // Loop through inner types to find the root type\n while (currentSchema?._def?.innerType) {\n currentSchema = currentSchema._def.innerType;\n if (currentSchema?._def?.typeName === 'ZodOptional') {\n // Stop recursion if optional is found\n return false;\n }\n }\n // If no optional was found, assume it's required\n return true;\n};\n\n/** Recursive search to check whether a field is required or optional */\nexport const recursiveFieldKeySearch = (\n schema: VetoSchema,\n path: string[],\n): boolean | null => {\n const [current, ...rest] = path;\n\n let currentSchema = schema;\n\n // Handle ZodOptional schema: unwrap and continue searching\n if (schema?._def?.typeName === 'ZodOptional') {\n // @ts-expect-error not sure here\n currentSchema = schema.unwrap();\n }\n\n // Handle ZodEffects (transformations or validation effects)\n if (schema?._def?.typeName === 'ZodEffects') {\n // Unwrap and continue\n return recursiveFieldKeySearch(schema._def.schema, path);\n }\n\n // Handle ZodIntersection (intersection types)\n if (currentSchema?._def?.typeName === 'ZodIntersection') {\n return (\n (currentSchema._def.left?.schema\n ? recursiveFieldKeySearch(currentSchema._def.left.schema, path)\n : recursiveFieldKeySearch(currentSchema._def.left, path)) ||\n (currentSchema._def.right?.schema\n ? recursiveFieldKeySearch(currentSchema._def.right.schema, path)\n : recursiveFieldKeySearch(currentSchema._def.right, path))\n );\n }\n\n // Get the shape of an object or elements of an array schema\n // @ts-expect-error not sure here\n const shape = currentSchema?.shape ?? currentSchema?.element?.shape;\n\n if (shape && shape[current]) {\n if (rest.length === 0) {\n // At the end of the path, check if the field is optional\n return (\n shape[current]?._def?.typeName !== 'ZodOptional' &&\n recursiveSearchInnerType(shape[current])\n );\n }\n return recursiveFieldKeySearch(shape[current], rest);\n }\n // Return null if field not found\n return null;\n};\n\n/**\n * Custom hook that extends react-hook-form's useFormContext to add validation and state management.\n */\nexport const useFormContext = () => {\n const {\n formState,\n // https://react-hook-form.com/docs/useform/getfieldstate\n // for getFieldState a subscription to formState properties is needed!\n getFieldState: getFieldStateOrig,\n ...otherMethods\n } = useHookFormContext();\n\n const uniformContext = useContext(UniformContext);\n\n /**\n * Updated getFieldState method which returns:\n * - Whether the field is required by checking the validation schema\n * - Existing field state information (errors, etc.)\n */\n const getFieldState = (name: string, testId?: string) => {\n const fieldPath =\n typeof name === 'string' ? name.replace(/\\[\\d+\\]/g, '').split('.') : name;\n\n // Check if the field is required using the validation schema\n const required =\n (uniformContext?.validation &&\n recursiveFieldKeySearch(uniformContext.validation.schema, fieldPath)) ||\n false;\n\n // Get the original field state (errors, etc.) from react-hook-form\n const { error, ...rest } = getFieldStateOrig(name, formState);\n\n return {\n ...rest,\n error: error as FieldError[] | undefined, // Ensure correct type for error\n required,\n testId: slugify(testId || name),\n };\n };\n\n return {\n ...otherMethods,\n ...uniformContext,\n getFieldState,\n formState,\n };\n};\n","import type { VetoInstance } from '@fuf-stack/veto';\nimport type { ReactNode } from 'react';\nimport type { FieldValues, SubmitHandler } from 'react-hook-form';\n\nimport React, { useMemo, useState } from 'react';\nimport { FormProvider as HookFormProvider, useForm } from 'react-hook-form';\n\nimport { useLocalStorage } from '@fuf-stack/pixels';\n\n/**\n * recursively removes all fields that are null or undefined before\n * the form data is passed to the veto validation function\n */\nexport const removeNullishFields = (obj: Record<string, unknown>) => {\n return JSON.parse(\n JSON.stringify(obj, (_key, value) => {\n return value === null ? undefined : value;\n }),\n );\n};\n\ntype DebugMode = 'debug' | 'debug-testids' | 'off';\n\n/**\n * The `UniformContext` provides control over the form's submission behavior and may optionally include\n * a Veto validation schema for form validation.\n *\n * Specifically, this context offers:\n * 1. **Form Submission Control**: The `preventSubmit` function allows components to enable or disable\n * form submissions.\n * 2. **Optional Validation Schema**: The `validation` property may hold a Veto validation schema instance\n * that can be used to validate form fields and handle validation logic.\n *\n * This context is useful for components that need to interact with or control the form submission state,\n * or access the validation schema for managing form validation logic.\n */\nexport const UniformContext = React.createContext<{\n /** Form debug mode enabled or not */\n debugMode: DebugMode;\n /** Function to update if the form can currently be submitted */\n preventSubmit: (prevent: boolean) => void;\n /** Setter to enable or disable form debug mode */\n setDebugMode: (debugMode: DebugMode) => void;\n /** Optional Veto validation schema instance for form validation */\n validation?: VetoInstance;\n}>({\n debugMode: 'off',\n preventSubmit: () => undefined,\n setDebugMode: () => undefined,\n validation: undefined,\n});\n\n// Define props for the FormProvider component, extending HookForm's props\ninterface FormProviderProps {\n /** children form render function */\n children: (childProps: {\n handleSubmit: (e?: React.BaseSyntheticEvent) => Promise<void>;\n }) => ReactNode;\n /** initial form values */\n initialValues?: FieldValues;\n /** form submit handler */\n onSubmit: SubmitHandler<FieldValues>;\n /** Veto validation schema instance */\n validation?: VetoInstance;\n /** when the validation should be triggered */\n validationTrigger: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';\n}\n\nconst LOCALSTORAGE_DEBUG_MODE_KEY = 'uniform:debug-mode';\n\n/**\n * FormProvider component provides:\n * - The veto validation schema context\n * - Submit handler creation and submission control with preventSubmit\n * - Form Debug Mode state\n * - React Hook Form context\n */\nconst FormProvider: React.FC<FormProviderProps> = ({\n children,\n initialValues = undefined,\n onSubmit,\n validation = undefined,\n validationTrigger,\n}) => {\n // Control if the form can currently be submitted\n const [preventSubmit, setPreventSubmit] = useState(false);\n\n // Form Debug mode state is handled in the form context\n const [debugMode, setDebugMode] = useLocalStorage<DebugMode>(\n LOCALSTORAGE_DEBUG_MODE_KEY,\n 'off',\n );\n\n // Memoize the context value to prevent re-renders\n const contextValue = useMemo(\n () => ({\n debugMode,\n preventSubmit: (prevent: boolean) => {\n setPreventSubmit(prevent);\n },\n setDebugMode,\n validation,\n }),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [debugMode],\n );\n\n // Initialize react hook form\n const methods = useForm({\n defaultValues: initialValues,\n // add validation config when validation schema provided\n ...(validation\n ? {\n // set rhf mode\n // see: https://react-hook-form.com/docs/useform#mode\n mode: validationTrigger,\n resolver: async (values) => {\n const { data, errors, ...rest } = await validation.validateAsync(\n removeNullishFields(values),\n );\n // https://github.com/react-hook-form/resolvers/blob/master/zod/src/zod.ts\n return { values: data || {}, errors: errors || {}, ...rest };\n },\n }\n : {}),\n });\n\n // Create submit handler\n // eslint-disable-next-line consistent-return\n const handleSubmit = async (e?: React.BaseSyntheticEvent) => {\n // only prevent submit when form state is valid, because otherwise\n // submit will only trigger validation and add errors / focus invalid fields\n if (methods.formState.isValid && preventSubmit) {\n console.warn(\n '[FormProvider] form submit was prevented because preventSubmit is true...',\n );\n e?.preventDefault();\n return Promise.resolve();\n }\n await methods.handleSubmit(onSubmit)(e);\n };\n\n return (\n <UniformContext.Provider value={contextValue}>\n {/* Spread all hook form props into HookFormProvider */}\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n <HookFormProvider {...methods}>\n {children({ handleSubmit })}\n </HookFormProvider>\n </UniformContext.Provider>\n );\n};\n\nexport default FormProvider;\n"],"mappings":"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","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/work/uniform/uniform/packages/uniform/dist/chunk-S4GIEBID.cjs","../src/hooks/useFormContext/useFormContext.ts","../src/Form/subcomponents/FormContext.tsx"],"names":[],"mappings":"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","file":"/home/runner/work/uniform/uniform/packages/uniform/dist/chunk-S4GIEBID.cjs","sourcesContent":[null,"import type { VetoSchema } from '@fuf-stack/veto';\nimport type { FieldError } from 'react-hook-form';\n\nimport { useContext } from 'react';\nimport { useFormContext as useHookFormContext } from 'react-hook-form';\n\nimport { UniformContext } from '../../Form/subcomponents/FormContext';\nimport { slugify } from '../../helpers';\n\n/** Checks whether the field is an optional type by recursively checking inner types */\nconst recursiveSearchInnerType = (schema: VetoSchema): boolean => {\n let currentSchema = schema;\n\n // Loop through inner types to find the root type\n while (currentSchema?._def?.innerType) {\n currentSchema = currentSchema._def.innerType;\n if (currentSchema?._def?.typeName === 'ZodOptional') {\n // Stop recursion if optional is found\n return false;\n }\n }\n // If no optional was found, assume it's required\n return true;\n};\n\n/** Recursive search to check whether a field is required or optional */\nexport const recursiveFieldKeySearch = (\n schema: VetoSchema,\n path: string[],\n): boolean | null => {\n const [current, ...rest] = path;\n\n let currentSchema = schema;\n\n // Handle ZodOptional schema: unwrap and continue searching\n if (schema?._def?.typeName === 'ZodOptional') {\n // @ts-expect-error not sure here\n currentSchema = schema.unwrap();\n }\n\n // Handle ZodEffects (transformations or validation effects)\n if (schema?._def?.typeName === 'ZodEffects') {\n // Unwrap and continue\n return recursiveFieldKeySearch(schema._def.schema, path);\n }\n\n // Handle ZodIntersection (intersection types)\n if (currentSchema?._def?.typeName === 'ZodIntersection') {\n return (\n (currentSchema._def.left?.schema\n ? recursiveFieldKeySearch(currentSchema._def.left.schema, path)\n : recursiveFieldKeySearch(currentSchema._def.left, path)) ||\n (currentSchema._def.right?.schema\n ? recursiveFieldKeySearch(currentSchema._def.right.schema, path)\n : recursiveFieldKeySearch(currentSchema._def.right, path))\n );\n }\n\n // Get the shape of an object or elements of an array schema\n // @ts-expect-error not sure here\n const shape = currentSchema?.shape ?? currentSchema?.element?.shape;\n\n if (shape && shape[current]) {\n if (rest.length === 0) {\n // At the end of the path, check if the field is optional\n return (\n shape[current]?._def?.typeName !== 'ZodOptional' &&\n recursiveSearchInnerType(shape[current])\n );\n }\n return recursiveFieldKeySearch(shape[current], rest);\n }\n // Return null if field not found\n return null;\n};\n\n/**\n * Custom hook that extends react-hook-form's useFormContext to add validation and state management.\n */\nexport const useFormContext = () => {\n const {\n formState,\n // https://react-hook-form.com/docs/useform/getfieldstate\n // for getFieldState a subscription to formState properties is needed!\n getFieldState: getFieldStateOrig,\n ...otherMethods\n } = useHookFormContext();\n\n const uniformContext = useContext(UniformContext);\n\n /**\n * Updated getFieldState method which returns:\n * - Whether the field is required by checking the validation schema\n * - Existing field state information (errors, etc.)\n */\n const getFieldState = (name: string, testId?: string) => {\n const fieldPath =\n typeof name === 'string' ? name.replace(/\\[\\d+\\]/g, '').split('.') : name;\n\n // Check if the field is required using the validation schema\n const required =\n (uniformContext?.validation &&\n recursiveFieldKeySearch(uniformContext.validation.schema, fieldPath)) ||\n false;\n\n // Get the original field state (errors, etc.) from react-hook-form\n const { error, ...rest } = getFieldStateOrig(name, formState);\n\n return {\n ...rest,\n error: error as FieldError[] | undefined, // Ensure correct type for error\n required,\n testId: slugify(testId || name),\n };\n };\n\n return {\n ...otherMethods,\n ...uniformContext,\n getFieldState,\n formState,\n };\n};\n","import type { VetoInstance } from '@fuf-stack/veto';\nimport type { ReactNode } from 'react';\nimport type { FieldValues, SubmitHandler } from 'react-hook-form';\n\nimport React, { useMemo, useState } from 'react';\nimport { FormProvider as HookFormProvider, useForm } from 'react-hook-form';\n\nimport { useLocalStorage } from '@fuf-stack/pixels';\n\n/**\n * recursively removes all fields that are null or undefined before\n * the form data is passed to the veto validation function\n */\nexport const removeNullishFields = (obj: Record<string, unknown>) => {\n return JSON.parse(\n JSON.stringify(obj, (_key, value) => {\n return value === null ? undefined : value;\n }),\n );\n};\n\ntype DebugMode = 'debug' | 'debug-testids' | 'off';\n\n/**\n * The `UniformContext` provides control over the form's submission behavior and may optionally include\n * a Veto validation schema for form validation.\n *\n * Specifically, this context offers:\n * 1. **Form Submission Control**: The `preventSubmit` function allows components to enable or disable\n * form submissions.\n * 2. **Optional Validation Schema**: The `validation` property may hold a Veto validation schema instance\n * that can be used to validate form fields and handle validation logic.\n *\n * This context is useful for components that need to interact with or control the form submission state,\n * or access the validation schema for managing form validation logic.\n */\nexport const UniformContext = React.createContext<{\n /** Form debug mode enabled or not */\n debugMode: DebugMode;\n /** Function to update if the form can currently be submitted */\n preventSubmit: (prevent: boolean) => void;\n /** Setter to enable or disable form debug mode */\n setDebugMode: (debugMode: DebugMode) => void;\n /** Optional Veto validation schema instance for form validation */\n validation?: VetoInstance;\n}>({\n debugMode: 'off',\n preventSubmit: () => undefined,\n setDebugMode: () => undefined,\n validation: undefined,\n});\n\n// Define props for the FormProvider component, extending HookForm's props\ninterface FormProviderProps {\n /** children form render function */\n children: (childProps: {\n handleSubmit: (e?: React.BaseSyntheticEvent) => Promise<void>;\n }) => ReactNode;\n /** initial form values */\n initialValues?: FieldValues;\n /** form submit handler */\n onSubmit: SubmitHandler<FieldValues>;\n /** Veto validation schema instance */\n validation?: VetoInstance;\n /** when the validation should be triggered */\n validationTrigger: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';\n}\n\nconst LOCALSTORAGE_DEBUG_MODE_KEY = 'uniform:debug-mode';\n\n/**\n * FormProvider component provides:\n * - The veto validation schema context\n * - Submit handler creation and submission control with preventSubmit\n * - Form Debug Mode state\n * - React Hook Form context\n */\nconst FormProvider: React.FC<FormProviderProps> = ({\n children,\n initialValues = undefined,\n onSubmit,\n validation = undefined,\n validationTrigger,\n}) => {\n // Control if the form can currently be submitted\n const [preventSubmit, setPreventSubmit] = useState(false);\n\n // Form Debug mode state is handled in the form context\n const [debugMode, setDebugMode] = useLocalStorage<DebugMode>(\n LOCALSTORAGE_DEBUG_MODE_KEY,\n 'off',\n );\n\n // Memoize the context value to prevent re-renders\n const contextValue = useMemo(\n () => ({\n debugMode,\n preventSubmit: (prevent: boolean) => {\n setPreventSubmit(prevent);\n },\n setDebugMode,\n validation,\n }),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [debugMode],\n );\n\n // Initialize react hook form\n const methods = useForm({\n defaultValues: initialValues,\n // add validation config when validation schema provided\n ...(validation\n ? {\n // set rhf mode\n // see: https://react-hook-form.com/docs/useform#mode\n mode: validationTrigger,\n resolver: async (values) => {\n const { data, errors, ...rest } = await validation.validateAsync(\n removeNullishFields(values),\n );\n // https://github.com/react-hook-form/resolvers/blob/master/zod/src/zod.ts\n return { values: data || {}, errors: errors || {}, ...rest };\n },\n }\n : {}),\n });\n\n // Create submit handler\n // eslint-disable-next-line consistent-return\n const handleSubmit = async (e?: React.BaseSyntheticEvent) => {\n // only prevent submit when form state is valid, because otherwise\n // submit will only trigger validation and add errors / focus invalid fields\n if (methods.formState.isValid && preventSubmit) {\n console.warn(\n '[FormProvider] form submit was prevented because preventSubmit is true...',\n );\n e?.preventDefault();\n return Promise.resolve();\n }\n await methods.handleSubmit(onSubmit)(e);\n };\n\n return (\n <UniformContext.Provider value={contextValue}>\n {/* Spread all hook form props into HookFormProvider */}\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n <HookFormProvider {...methods}>\n {children({ handleSubmit })}\n </HookFormProvider>\n </UniformContext.Provider>\n );\n};\n\nexport default FormProvider;\n"]}
|