@fuf-stack/uniform 0.2.3 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Form/index.cjs +3 -5
- package/dist/Form/index.js +2 -4
- package/dist/Grid/index.cjs +2 -4
- package/dist/Grid/index.js +1 -3
- package/dist/Input/index.cjs +13 -0
- package/dist/Input/index.d.cts +8 -0
- package/dist/Input/index.d.ts +8 -0
- package/dist/Input/index.js +13 -0
- package/dist/Input-B_rP1h4X.d.cts +27 -0
- package/dist/Input-B_rP1h4X.d.ts +27 -0
- package/dist/SubmitButton/index.cjs +3 -5
- package/dist/SubmitButton/index.js +2 -4
- package/dist/{chunk-DBNZWU3T.cjs → chunk-22AA557I.cjs} +5 -12
- package/dist/chunk-22AA557I.cjs.map +1 -0
- package/dist/chunk-2O53LMR3.cjs +79 -0
- package/dist/chunk-2O53LMR3.cjs.map +1 -0
- package/dist/chunk-3DMR7T4D.js +79 -0
- package/dist/chunk-3DMR7T4D.js.map +1 -0
- package/dist/{chunk-UFEO2WD4.cjs → chunk-4BELEHDQ.cjs} +21 -28
- package/dist/chunk-4BELEHDQ.cjs.map +1 -0
- package/dist/chunk-4MEKDDB2.js +20 -0
- package/dist/{chunk-YNN5AVDW.js.map → chunk-4MEKDDB2.js.map} +1 -1
- package/dist/{chunk-YMSVB2DX.js → chunk-6XKDXQ4A.js} +20 -27
- package/dist/{chunk-YMSVB2DX.js.map → chunk-6XKDXQ4A.js.map} +1 -1
- package/dist/{chunk-BQTJHSDU.js → chunk-BCMPSLSG.js} +7 -14
- package/dist/{chunk-BQTJHSDU.js.map → chunk-BCMPSLSG.js.map} +1 -1
- package/dist/{chunk-ZWSYKQT7.js → chunk-DBLODROX.js} +4 -10
- package/dist/{chunk-ZWSYKQT7.js.map → chunk-DBLODROX.js.map} +1 -1
- package/dist/{chunk-WT2BR5B5.js → chunk-FNVT6LS4.js} +4 -11
- package/dist/{chunk-WT2BR5B5.js.map → chunk-FNVT6LS4.js.map} +1 -1
- package/dist/{chunk-HW65ROPB.cjs → chunk-QTL5FREE.cjs} +4 -10
- package/dist/chunk-QTL5FREE.cjs.map +1 -0
- package/dist/{chunk-73CQ3KWD.js → chunk-TEJGV6NC.js} +4 -10
- package/dist/{chunk-73CQ3KWD.js.map → chunk-TEJGV6NC.js.map} +1 -1
- package/dist/{chunk-AAESGATO.cjs → chunk-WQRM7G4C.cjs} +8 -15
- package/dist/chunk-WQRM7G4C.cjs.map +1 -0
- package/dist/{chunk-RU72JRAY.cjs → chunk-XUKBLFTR.cjs} +5 -11
- package/dist/chunk-XUKBLFTR.cjs.map +1 -0
- package/dist/chunk-ZPFKVKGV.cjs +20 -0
- package/dist/chunk-ZPFKVKGV.cjs.map +1 -0
- package/dist/helpers/index.cjs +0 -1
- package/dist/helpers/index.js +0 -1
- package/dist/hooks/index.cjs +2 -4
- package/dist/hooks/index.js +1 -3
- package/dist/index.cjs +11 -9
- package/dist/index.d.cts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +14 -12
- package/dist/partials/FieldCopyTestIdButton/index.cjs +2 -4
- package/dist/partials/FieldCopyTestIdButton/index.js +1 -3
- package/dist/partials/FieldValidationError/index.cjs +2 -4
- package/dist/partials/FieldValidationError/index.js +1 -3
- package/package.json +19 -10
- package/dist/chunk-AAESGATO.cjs.map +0 -1
- package/dist/chunk-AT5DS6MS.cjs +0 -31
- package/dist/chunk-DBNZWU3T.cjs.map +0 -1
- package/dist/chunk-HW65ROPB.cjs.map +0 -1
- package/dist/chunk-LAHYQUKQ.cjs +0 -27
- package/dist/chunk-LAHYQUKQ.cjs.map +0 -1
- package/dist/chunk-LMMDXQ4L.cjs +0 -3170
- package/dist/chunk-LMMDXQ4L.cjs.map +0 -1
- package/dist/chunk-LQ2VYIYD.js +0 -31
- package/dist/chunk-RBXONCYN.js +0 -3170
- package/dist/chunk-RBXONCYN.js.map +0 -1
- package/dist/chunk-RU72JRAY.cjs.map +0 -1
- package/dist/chunk-UFEO2WD4.cjs.map +0 -1
- package/dist/chunk-YNN5AVDW.js +0 -27
- /package/dist/{chunk-AT5DS6MS.cjs.map → Input/index.cjs.map} +0 -0
- /package/dist/{chunk-LQ2VYIYD.js.map → Input/index.js.map} +0 -0
|
@@ -1,30 +1,23 @@
|
|
|
1
1
|
import {
|
|
2
2
|
FormContext_default,
|
|
3
3
|
useFormContext
|
|
4
|
-
} from "./chunk-
|
|
4
|
+
} from "./chunk-BCMPSLSG.js";
|
|
5
5
|
import {
|
|
6
6
|
slugify
|
|
7
7
|
} from "./chunk-V46BHM2U.js";
|
|
8
|
-
import {
|
|
9
|
-
require_jsx_runtime,
|
|
10
|
-
require_react
|
|
11
|
-
} from "./chunk-RBXONCYN.js";
|
|
12
|
-
import {
|
|
13
|
-
__toESM
|
|
14
|
-
} from "./chunk-LQ2VYIYD.js";
|
|
15
8
|
|
|
16
9
|
// src/Form/Form.tsx
|
|
17
|
-
|
|
10
|
+
import { useEffect as useEffect2 } from "react";
|
|
18
11
|
import { useForm } from "react-hook-form";
|
|
19
12
|
import cn2 from "classnames";
|
|
20
13
|
|
|
21
14
|
// src/Form/subcomponents/FormDebugViewer.tsx
|
|
22
|
-
|
|
15
|
+
import { useEffect, useState } from "react";
|
|
23
16
|
import { FaTimes } from "react-icons/fa";
|
|
24
17
|
import { FaBug } from "react-icons/fa6";
|
|
25
18
|
import cn from "classnames";
|
|
26
19
|
import { Button, Card, Json, useLocalStorage } from "@fuf-stack/pixels";
|
|
27
|
-
|
|
20
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
28
21
|
var LOCALSTORAGE_DEBUG_KEY = "uniform:form-debug-enabled";
|
|
29
22
|
var FormDebugViewer = ({ className = void 0 }) => {
|
|
30
23
|
const {
|
|
@@ -33,9 +26,9 @@ var FormDebugViewer = ({ className = void 0 }) => {
|
|
|
33
26
|
validation
|
|
34
27
|
} = useFormContext();
|
|
35
28
|
const [debug, setDebug] = useLocalStorage(LOCALSTORAGE_DEBUG_KEY, false);
|
|
36
|
-
const [validationErrors, setValidationErrors] =
|
|
29
|
+
const [validationErrors, setValidationErrors] = useState(null);
|
|
37
30
|
const formValues = watch();
|
|
38
|
-
|
|
31
|
+
useEffect(
|
|
39
32
|
() => {
|
|
40
33
|
const updateValidationErrors = async () => {
|
|
41
34
|
if (validation) {
|
|
@@ -49,34 +42,34 @@ var FormDebugViewer = ({ className = void 0 }) => {
|
|
|
49
42
|
[JSON.stringify(formValues)]
|
|
50
43
|
);
|
|
51
44
|
if (!debug) {
|
|
52
|
-
return /* @__PURE__ */
|
|
45
|
+
return /* @__PURE__ */ jsx(
|
|
53
46
|
Button,
|
|
54
47
|
{
|
|
55
48
|
ariaLabel: "Enable form debug mode",
|
|
56
49
|
onClick: () => setDebug(!debug),
|
|
57
50
|
className: "absolute bottom-2.5 right-2.5 w-5 text-default-400",
|
|
58
51
|
variant: "light",
|
|
59
|
-
icon: /* @__PURE__ */
|
|
52
|
+
icon: /* @__PURE__ */ jsx(FaBug, {})
|
|
60
53
|
}
|
|
61
54
|
);
|
|
62
55
|
}
|
|
63
|
-
return /* @__PURE__ */
|
|
56
|
+
return /* @__PURE__ */ jsx(
|
|
64
57
|
Card,
|
|
65
58
|
{
|
|
66
59
|
className: cn(className),
|
|
67
|
-
header: /* @__PURE__ */
|
|
68
|
-
/* @__PURE__ */
|
|
69
|
-
/* @__PURE__ */
|
|
60
|
+
header: /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-row justify-between", children: [
|
|
61
|
+
/* @__PURE__ */ jsx("span", { className: "text-lg", children: "Debug Mode" }),
|
|
62
|
+
/* @__PURE__ */ jsx(
|
|
70
63
|
Button,
|
|
71
64
|
{
|
|
72
|
-
icon: /* @__PURE__ */
|
|
65
|
+
icon: /* @__PURE__ */ jsx(FaTimes, { className: "text-danger" }),
|
|
73
66
|
onClick: () => setDebug(false),
|
|
74
67
|
size: "sm",
|
|
75
68
|
variant: "flat"
|
|
76
69
|
}
|
|
77
70
|
)
|
|
78
71
|
] }),
|
|
79
|
-
children: /* @__PURE__ */
|
|
72
|
+
children: /* @__PURE__ */ jsx(
|
|
80
73
|
Json,
|
|
81
74
|
{
|
|
82
75
|
value: {
|
|
@@ -94,7 +87,7 @@ var FormDebugViewer = ({ className = void 0 }) => {
|
|
|
94
87
|
var FormDebugViewer_default = FormDebugViewer;
|
|
95
88
|
|
|
96
89
|
// src/Form/Form.tsx
|
|
97
|
-
|
|
90
|
+
import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
98
91
|
var removeNullishFields = (obj) => {
|
|
99
92
|
return JSON.parse(
|
|
100
93
|
JSON.stringify(obj, (_key, value) => {
|
|
@@ -128,7 +121,7 @@ var Form = ({
|
|
|
128
121
|
defaultValues: initialValues
|
|
129
122
|
}
|
|
130
123
|
);
|
|
131
|
-
(
|
|
124
|
+
useEffect2(
|
|
132
125
|
() => {
|
|
133
126
|
if (validationTrigger === "all-instant") {
|
|
134
127
|
methods.trigger();
|
|
@@ -139,8 +132,8 @@ var Form = ({
|
|
|
139
132
|
);
|
|
140
133
|
return (
|
|
141
134
|
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
142
|
-
/* @__PURE__ */ (
|
|
143
|
-
/* @__PURE__ */ (
|
|
135
|
+
/* @__PURE__ */ jsx2(FormContext_default, { ...methods, validation, children: /* @__PURE__ */ jsxs2("div", { className: "flex w-full flex-row justify-between gap-6", children: [
|
|
136
|
+
/* @__PURE__ */ jsx2(
|
|
144
137
|
"form",
|
|
145
138
|
{
|
|
146
139
|
className: cn2("flex-grow", className),
|
|
@@ -150,7 +143,7 @@ var Form = ({
|
|
|
150
143
|
children
|
|
151
144
|
}
|
|
152
145
|
),
|
|
153
|
-
/* @__PURE__ */ (
|
|
146
|
+
/* @__PURE__ */ jsx2(FormDebugViewer_default, { className: "w-96 flex-shrink" })
|
|
154
147
|
] }) })
|
|
155
148
|
);
|
|
156
149
|
};
|
|
@@ -163,4 +156,4 @@ export {
|
|
|
163
156
|
Form_default,
|
|
164
157
|
Form_default2
|
|
165
158
|
};
|
|
166
|
-
//# sourceMappingURL=chunk-
|
|
159
|
+
//# sourceMappingURL=chunk-6XKDXQ4A.js.map
|
|
@@ -1 +1 @@
|
|
|
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 { useEffect } from 'react';\nimport { useForm } from 'react-hook-form';\n\nimport cn from 'classnames';\n\nimport { slugify } from '../helpers';\nimport FormProvider from './subcomponents/FormContext';\nimport FormDebugViewer from './subcomponents/FormDebugViewer';\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\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?:\n | 'onChange'\n | 'onBlur'\n | 'onSubmit'\n | 'onTouched'\n | 'all'\n | 'all-instant';\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 const methods = useForm(\n validation\n ? {\n defaultValues: initialValues,\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 // set rhf mode\n // see: https://react-hook-form.com/docs/useform#mode\n mode: validationTrigger === 'all-instant' ? 'all' : validationTrigger,\n }\n : {\n defaultValues: initialValues,\n },\n );\n\n useEffect(\n () => {\n if (validationTrigger === 'all-instant') {\n methods.trigger();\n }\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [validationTrigger],\n );\n\n return (\n // eslint-disable-next-line react/jsx-props-no-spreading\n <FormProvider {...methods} validation={validation}>\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={methods.handleSubmit(onSubmit)}\n >\n {children}\n </form>\n <FormDebugViewer className=\"w-96 flex-shrink\" />\n </div>\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 } from 'react-icons/fa6';\n\nimport cn from 'classnames';\n\nimport { Button, Card, Json, useLocalStorage } from '@fuf-stack/pixels';\n\nimport { useFormContext } from '../../hooks';\n\ninterface FormDebugViewerProps {\n /** CSS class name */\n className?: string;\n}\n\nconst LOCALSTORAGE_DEBUG_KEY = 'uniform:form-debug-enabled';\n\n/** Renders a form debug panel with information about the current form state */\nconst FormDebugViewer = ({ className = undefined }: FormDebugViewerProps) => {\n const {\n watch,\n formState: { dirtyFields, isValid, isSubmitting },\n validation,\n } = useFormContext();\n\n const [debug, setDebug] = useLocalStorage(LOCALSTORAGE_DEBUG_KEY, false);\n\n const [validationErrors, setValidationErrors] = useState<\n VetoError['errors'] | null\n >(null);\n\n const formValues = watch();\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 (!debug) {\n return (\n <Button\n ariaLabel=\"Enable form debug mode\"\n onClick={() => setDebug(!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={() => setDebug(false)}\n size=\"sm\"\n variant=\"flat\"\n />\n </div>\n }\n >\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":"
|
|
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 { useEffect } from 'react';\nimport { useForm } from 'react-hook-form';\n\nimport cn from 'classnames';\n\nimport { slugify } from '../helpers';\nimport FormProvider from './subcomponents/FormContext';\nimport FormDebugViewer from './subcomponents/FormDebugViewer';\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\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?:\n | 'onChange'\n | 'onBlur'\n | 'onSubmit'\n | 'onTouched'\n | 'all'\n | 'all-instant';\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 const methods = useForm(\n validation\n ? {\n defaultValues: initialValues,\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 // set rhf mode\n // see: https://react-hook-form.com/docs/useform#mode\n mode: validationTrigger === 'all-instant' ? 'all' : validationTrigger,\n }\n : {\n defaultValues: initialValues,\n },\n );\n\n useEffect(\n () => {\n if (validationTrigger === 'all-instant') {\n methods.trigger();\n }\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [validationTrigger],\n );\n\n return (\n // eslint-disable-next-line react/jsx-props-no-spreading\n <FormProvider {...methods} validation={validation}>\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={methods.handleSubmit(onSubmit)}\n >\n {children}\n </form>\n <FormDebugViewer className=\"w-96 flex-shrink\" />\n </div>\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 } from 'react-icons/fa6';\n\nimport cn from 'classnames';\n\nimport { Button, Card, Json, useLocalStorage } from '@fuf-stack/pixels';\n\nimport { useFormContext } from '../../hooks';\n\ninterface FormDebugViewerProps {\n /** CSS class name */\n className?: string;\n}\n\nconst LOCALSTORAGE_DEBUG_KEY = 'uniform:form-debug-enabled';\n\n/** Renders a form debug panel with information about the current form state */\nconst FormDebugViewer = ({ className = undefined }: FormDebugViewerProps) => {\n const {\n watch,\n formState: { dirtyFields, isValid, isSubmitting },\n validation,\n } = useFormContext();\n\n const [debug, setDebug] = useLocalStorage(LOCALSTORAGE_DEBUG_KEY, false);\n\n const [validationErrors, setValidationErrors] = useState<\n VetoError['errors'] | null\n >(null);\n\n const formValues = watch();\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 (!debug) {\n return (\n <Button\n ariaLabel=\"Enable form debug mode\"\n onClick={() => setDebug(!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={() => setDebug(false)}\n size=\"sm\"\n variant=\"flat\"\n />\n </div>\n }\n >\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,aAAAA,kBAAiB;AAC1B,SAAS,eAAe;AAExB,OAAOC,SAAQ;;;ACLf,SAAS,WAAW,gBAAgB;AACpC,SAAS,eAAe;AACxB,SAAS,aAAa;AAEtB,OAAO,QAAQ;AAEf,SAAS,QAAQ,MAAM,MAAM,uBAAuB;AAgDtC,cASN,YATM;AAvCd,IAAM,yBAAyB;AAG/B,IAAM,kBAAkB,CAAC,EAAE,YAAY,OAAU,MAA4B;AAC3E,QAAM;AAAA,IACJ;AAAA,IACA,WAAW,EAAE,aAAa,SAAS,aAAa;AAAA,IAChD;AAAA,EACF,IAAI,eAAe;AAEnB,QAAM,CAAC,OAAO,QAAQ,IAAI,gBAAgB,wBAAwB,KAAK;AAEvE,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAE9C,IAAI;AAEN,QAAM,aAAa,MAAM;AAEzB;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,OAAO;AACV,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,SAAS,MAAM,SAAS,CAAC,KAAK;AAAA,QAC9B,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,SAAS,KAAK;AAAA,YAC7B,MAAK;AAAA,YACL,SAAQ;AAAA;AAAA,QACV;AAAA,SACF;AAAA,MAGF;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,YACL,QAAQ;AAAA,YACR,QAAQ;AAAA,YACR;AAAA,YACA;AAAA,YACA;AAAA,UACF;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AACA,IAAO,0BAAQ;;;ADQT,SACE,OAAAC,MADF,QAAAC,aAAA;AA/EC,IAAM,sBAAsB,CAAC,QAAiC;AACnE,SAAO,KAAK;AAAA,IACV,KAAK,UAAU,KAAK,CAAC,MAAM,UAAU;AACnC,aAAO,UAAU,OAAO,SAAY;AAAA,IACtC,CAAC;AAAA,EACH;AACF;AA8BA,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,QAAM,UAAU;AAAA,IACd,aACI;AAAA,MACE,eAAe;AAAA,MACf,UAAU,OAAO,WAAW;AAC1B,cAAM,EAAE,MAAM,QAAQ,GAAG,KAAK,IAAI,MAAM,WAAW;AAAA,UACjD,oBAAoB,MAAM;AAAA,QAC9B;AAEE,eAAO,EAAE,QAAQ,QAAQ,CAAC,GAAG,QAAQ,UAAU,CAAC,GAAG,GAAG,KAAK;AAAA,MAC7D;AAAA;AAAA;AAAA,MAGA,MAAM,sBAAsB,gBAAgB,QAAQ;AAAA,IACtD,IACA;AAAA,MACE,eAAe;AAAA,IACjB;AAAA,EACN;AAEA,EAAAC;AAAA,IACE,MAAM;AACJ,UAAI,sBAAsB,eAAe;AACvC,gBAAQ,QAAQ;AAAA,MAClB;AAAA,IACF;AAAA;AAAA,IAEA,CAAC,iBAAiB;AAAA,EACpB;AAEA;AAAA;AAAA,IAEE,gBAAAF,KAAC,uBAAc,GAAG,SAAS,YACzB,0BAAAC,MAAC,SAAI,WAAU,8CACb;AAAA,sBAAAD;AAAA,QAAC;AAAA;AAAA,UACC,WAAWG,IAAG,aAAa,SAAS;AAAA,UACpC,eAAa,QAAQ,UAAU,QAAQ,EAAE;AAAA,UACzC;AAAA,UACA,UAAU,QAAQ,aAAa,QAAQ;AAAA,UAEtC;AAAA;AAAA,MACH;AAAA,MACA,gBAAAH,KAAC,2BAAgB,WAAU,oBAAmB;AAAA,OAChD,GACF;AAAA;AAEJ;AAEA,IAAO,eAAQ;;;AEzGf,IAAOI,gBAAQ;","names":["useEffect","cn","jsx","jsxs","useEffect","cn","Form_default"]}
|
|
@@ -1,29 +1,22 @@
|
|
|
1
1
|
import {
|
|
2
2
|
slugify
|
|
3
3
|
} from "./chunk-V46BHM2U.js";
|
|
4
|
-
import {
|
|
5
|
-
require_jsx_runtime,
|
|
6
|
-
require_react
|
|
7
|
-
} from "./chunk-RBXONCYN.js";
|
|
8
|
-
import {
|
|
9
|
-
__toESM
|
|
10
|
-
} from "./chunk-LQ2VYIYD.js";
|
|
11
4
|
|
|
12
5
|
// src/hooks/useFormContext/useFormContext.ts
|
|
13
|
-
|
|
6
|
+
import { useContext } from "react";
|
|
14
7
|
import { useFormContext as useHookFormContext } from "react-hook-form";
|
|
15
8
|
|
|
16
9
|
// src/Form/subcomponents/FormContext.tsx
|
|
17
|
-
|
|
18
|
-
var import_jsx_runtime = __toESM(require_jsx_runtime(), 1);
|
|
10
|
+
import React from "react";
|
|
19
11
|
import { FormProvider as HookFormProvider } from "react-hook-form";
|
|
20
|
-
|
|
12
|
+
import { jsx } from "react/jsx-runtime";
|
|
13
|
+
var ValidationSchemaContext = React.createContext(void 0);
|
|
21
14
|
var FormProvider = ({
|
|
22
15
|
children,
|
|
23
16
|
validation = void 0,
|
|
24
17
|
...hookFormProps
|
|
25
18
|
}) => {
|
|
26
|
-
return /* @__PURE__ */
|
|
19
|
+
return /* @__PURE__ */ jsx(ValidationSchemaContext.Provider, { value: validation, children: /* @__PURE__ */ jsx(HookFormProvider, { ...hookFormProps, children }) });
|
|
27
20
|
};
|
|
28
21
|
var FormContext_default = FormProvider;
|
|
29
22
|
|
|
@@ -65,7 +58,7 @@ var useFormContext = () => {
|
|
|
65
58
|
getFieldState: getFieldStateOrig,
|
|
66
59
|
...otherMethods
|
|
67
60
|
} = useHookFormContext();
|
|
68
|
-
const validation =
|
|
61
|
+
const validation = useContext(ValidationSchemaContext);
|
|
69
62
|
const getFieldState = (name, testId) => {
|
|
70
63
|
const fieldPath = typeof name === "string" ? name.replace(/\[\d+\]/g, "").split(".") : name;
|
|
71
64
|
const required = validation && recursiveFieldKeySearch(validation.schema, fieldPath) || false;
|
|
@@ -91,4 +84,4 @@ export {
|
|
|
91
84
|
recursiveFieldKeySearch,
|
|
92
85
|
useFormContext
|
|
93
86
|
};
|
|
94
|
-
//# sourceMappingURL=chunk-
|
|
87
|
+
//# sourceMappingURL=chunk-BCMPSLSG.js.map
|
|
@@ -1 +1 @@
|
|
|
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 { ValidationSchemaContext } from '../../Form/subcomponents/FormContext';\nimport { slugify } from '../../helpers';\n\n// FIX: This fixes the problem that the innerType is not checked for optionals...\nconst recursiveSearchInnerType = (schema: VetoSchema): boolean => {\n if (schema?._def?.innerType) {\n if (schema?._def?.innerType?._def?.typeName === 'ZodOptional') {\n return schema?._def?.innerType?._def?.typeName !== 'ZodOptional';\n }\n return recursiveSearchInnerType(schema?._def?.innerType);\n }\n return true;\n};\n\n// TODO: Fix problem \".optional().nullable()\" is required, \".nullable().optional()\" is not required...\nexport const recursiveFieldKeySearch = (\n schema: VetoSchema,\n path: string[],\n): boolean | null => {\n const [current, ...rest] = path;\n // ignore optionals on the path to the desired field\n\n let currentSchema = schema;\n\n if (schema?._def?.typeName === 'ZodOptional') {\n // @ts-expect-error not sure here\n currentSchema = schema.unwrap();\n } else if (schema?._def?.typeName === 'ZodEffects') {\n // in case of an effect, unwrap the effect and call with schema (clould be optional) and complete path.\n return recursiveFieldKeySearch(schema._def?.schema, path);\n }\n\n // TODO: This needs further investigation. It is nor yet completely clear how to handle intersections!\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 shape of an object or objects of an array\n // @ts-expect-error not sure here\n const shape = currentSchema?.shape ?? currentSchema?.element?.shape; // ??\n\n if (shape && shape[current]) {\n // currentSchema?._def.schema.unwrap()?.shape;\n if (rest.length === 0) {\n // At the end of the path check if the field is optional or required\n return (\n shape[current]?._def?.typeName !== 'ZodOptional' &&\n recursiveSearchInnerType(shape[current])\n );\n }\n return recursiveFieldKeySearch(shape[current], rest);\n }\n\n return null; // field not found\n};\n\n/** TODO: add description */\nexport const useFormContext = () => {\n const {\n // https://react-hook-form.com/docs/useform/getfieldstate\n // for getFieldState a subscription to formState properties is needed!\n formState,\n getFieldState: getFieldStateOrig,\n ...otherMethods\n } = useHookFormContext();\n const validation = useContext(ValidationSchemaContext);\n\n // update getFieldState\n const getFieldState = (name: string, testId?: string) => {\n const fieldPath =\n typeof name === 'string' ? name.replace(/\\[\\d+\\]/g, '').split('.') : name;\n const required =\n (validation && recursiveFieldKeySearch(validation.schema, fieldPath)) ||\n false;\n const { error, ...rest } = getFieldStateOrig(name, formState);\n return {\n ...rest,\n error: error as FieldError[] | undefined, // TODO: change to correct type @Hannes ;)\n required,\n testId: slugify(testId || name),\n };\n };\n\n return {\n ...otherMethods,\n getFieldState,\n validation,\n formState,\n };\n};\n","import type { VetoInstance } from '@fuf-stack/veto';\nimport type { FormProviderProps as HookFormProviderProps } from 'react-hook-form';\n\nimport React from 'react';\nimport { FormProvider as HookFormProvider } from 'react-hook-form';\n\nexport const ValidationSchemaContext = React.createContext<\n VetoInstance | undefined\n>(undefined);\n\ninterface FormProviderProps\n extends HookFormProviderProps<Record<string, any>, any, undefined> {\n /** veto validation schema */\n validation?: VetoInstance;\n}\n\n/** Provides the veto validation context to the form */\nconst FormProvider = ({\n children,\n validation = undefined,\n ...hookFormProps\n}: FormProviderProps) => {\n return (\n <ValidationSchemaContext.Provider value={validation}>\n <HookFormProvider {...hookFormProps}>{children}</HookFormProvider>\n </ValidationSchemaContext.Provider>\n );\n};\n\nexport default FormProvider;\n"],"mappings":"
|
|
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 { ValidationSchemaContext } from '../../Form/subcomponents/FormContext';\nimport { slugify } from '../../helpers';\n\n// FIX: This fixes the problem that the innerType is not checked for optionals...\nconst recursiveSearchInnerType = (schema: VetoSchema): boolean => {\n if (schema?._def?.innerType) {\n if (schema?._def?.innerType?._def?.typeName === 'ZodOptional') {\n return schema?._def?.innerType?._def?.typeName !== 'ZodOptional';\n }\n return recursiveSearchInnerType(schema?._def?.innerType);\n }\n return true;\n};\n\n// TODO: Fix problem \".optional().nullable()\" is required, \".nullable().optional()\" is not required...\nexport const recursiveFieldKeySearch = (\n schema: VetoSchema,\n path: string[],\n): boolean | null => {\n const [current, ...rest] = path;\n // ignore optionals on the path to the desired field\n\n let currentSchema = schema;\n\n if (schema?._def?.typeName === 'ZodOptional') {\n // @ts-expect-error not sure here\n currentSchema = schema.unwrap();\n } else if (schema?._def?.typeName === 'ZodEffects') {\n // in case of an effect, unwrap the effect and call with schema (clould be optional) and complete path.\n return recursiveFieldKeySearch(schema._def?.schema, path);\n }\n\n // TODO: This needs further investigation. It is nor yet completely clear how to handle intersections!\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 shape of an object or objects of an array\n // @ts-expect-error not sure here\n const shape = currentSchema?.shape ?? currentSchema?.element?.shape; // ??\n\n if (shape && shape[current]) {\n // currentSchema?._def.schema.unwrap()?.shape;\n if (rest.length === 0) {\n // At the end of the path check if the field is optional or required\n return (\n shape[current]?._def?.typeName !== 'ZodOptional' &&\n recursiveSearchInnerType(shape[current])\n );\n }\n return recursiveFieldKeySearch(shape[current], rest);\n }\n\n return null; // field not found\n};\n\n/** TODO: add description */\nexport const useFormContext = () => {\n const {\n // https://react-hook-form.com/docs/useform/getfieldstate\n // for getFieldState a subscription to formState properties is needed!\n formState,\n getFieldState: getFieldStateOrig,\n ...otherMethods\n } = useHookFormContext();\n const validation = useContext(ValidationSchemaContext);\n\n // update getFieldState\n const getFieldState = (name: string, testId?: string) => {\n const fieldPath =\n typeof name === 'string' ? name.replace(/\\[\\d+\\]/g, '').split('.') : name;\n const required =\n (validation && recursiveFieldKeySearch(validation.schema, fieldPath)) ||\n false;\n const { error, ...rest } = getFieldStateOrig(name, formState);\n return {\n ...rest,\n error: error as FieldError[] | undefined, // TODO: change to correct type @Hannes ;)\n required,\n testId: slugify(testId || name),\n };\n };\n\n return {\n ...otherMethods,\n getFieldState,\n validation,\n formState,\n };\n};\n","import type { VetoInstance } from '@fuf-stack/veto';\nimport type { FormProviderProps as HookFormProviderProps } from 'react-hook-form';\n\nimport React from 'react';\nimport { FormProvider as HookFormProvider } from 'react-hook-form';\n\nexport const ValidationSchemaContext = React.createContext<\n VetoInstance | undefined\n>(undefined);\n\ninterface FormProviderProps\n extends HookFormProviderProps<Record<string, any>, any, undefined> {\n /** veto validation schema */\n validation?: VetoInstance;\n}\n\n/** Provides the veto validation context to the form */\nconst FormProvider = ({\n children,\n validation = undefined,\n ...hookFormProps\n}: FormProviderProps) => {\n return (\n <ValidationSchemaContext.Provider value={validation}>\n <HookFormProvider {...hookFormProps}>{children}</HookFormProvider>\n </ValidationSchemaContext.Provider>\n );\n};\n\nexport default FormProvider;\n"],"mappings":";;;;;AAGA,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB,0BAA0B;;;ACDrD,OAAO,WAAW;AAClB,SAAS,gBAAgB,wBAAwB;AAoB3C;AAlBC,IAAM,0BAA0B,MAAM,cAE3C,MAAS;AASX,IAAM,eAAe,CAAC;AAAA,EACpB;AAAA,EACA,aAAa;AAAA,EACb,GAAG;AACL,MAAyB;AACvB,SACE,oBAAC,wBAAwB,UAAxB,EAAiC,OAAO,YACvC,8BAAC,oBAAkB,GAAG,eAAgB,UAAS,GACjD;AAEJ;AAEA,IAAO,sBAAQ;;;ADnBf,IAAM,2BAA2B,CAAC,WAAgC;AAChE,MAAI,QAAQ,MAAM,WAAW;AAC3B,QAAI,QAAQ,MAAM,WAAW,MAAM,aAAa,eAAe;AAC7D,aAAO,QAAQ,MAAM,WAAW,MAAM,aAAa;AAAA,IACrD;AACA,WAAO,yBAAyB,QAAQ,MAAM,SAAS;AAAA,EACzD;AACA,SAAO;AACT;AAGO,IAAM,0BAA0B,CACrC,QACA,SACmB;AACnB,QAAM,CAAC,SAAS,GAAG,IAAI,IAAI;AAG3B,MAAI,gBAAgB;AAEpB,MAAI,QAAQ,MAAM,aAAa,eAAe;AAE5C,oBAAgB,OAAO,OAAO;AAAA,EAChC,WAAW,QAAQ,MAAM,aAAa,cAAc;AAElD,WAAO,wBAAwB,OAAO,MAAM,QAAQ,IAAI;AAAA,EAC1D;AAGA,MAAI,eAAe,MAAM,aAAa,mBAAmB;AACvD,YACG,cAAc,KAAK,MAAM,SACtB,wBAAwB,cAAc,KAAK,KAAK,QAAQ,IAAI,IAC5D,wBAAwB,cAAc,KAAK,MAAM,IAAI,OACxD,cAAc,KAAK,OAAO,SACvB,wBAAwB,cAAc,KAAK,MAAM,QAAQ,IAAI,IAC7D,wBAAwB,cAAc,KAAK,OAAO,IAAI;AAAA,EAE9D;AAIA,QAAM,QAAQ,eAAe,SAAS,eAAe,SAAS;AAE9D,MAAI,SAAS,MAAM,OAAO,GAAG;AAE3B,QAAI,KAAK,WAAW,GAAG;AAErB,aACE,MAAM,OAAO,GAAG,MAAM,aAAa,iBACnC,yBAAyB,MAAM,OAAO,CAAC;AAAA,IAE3C;AACA,WAAO,wBAAwB,MAAM,OAAO,GAAG,IAAI;AAAA,EACrD;AAEA,SAAO;AACT;AAGO,IAAM,iBAAiB,MAAM;AAClC,QAAM;AAAA;AAAA;AAAA,IAGJ;AAAA,IACA,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAAI,mBAAmB;AACvB,QAAM,aAAa,WAAW,uBAAuB;AAGrD,QAAM,gBAAgB,CAAC,MAAc,WAAoB;AACvD,UAAM,YACJ,OAAO,SAAS,WAAW,KAAK,QAAQ,YAAY,EAAE,EAAE,MAAM,GAAG,IAAI;AACvE,UAAM,WACH,cAAc,wBAAwB,WAAW,QAAQ,SAAS,KACnE;AACF,UAAM,EAAE,OAAO,GAAG,KAAK,IAAI,kBAAkB,MAAM,SAAS;AAC5D,WAAO;AAAA,MACL,GAAG;AAAA,MACH;AAAA;AAAA,MACA;AAAA,MACA,QAAQ,QAAQ,UAAU,IAAI;AAAA,IAChC;AAAA,EACF;AAEA,SAAO;AAAA,IACL,GAAG;AAAA,IACH;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":[]}
|
|
@@ -1,15 +1,9 @@
|
|
|
1
1
|
import {
|
|
2
2
|
slugify
|
|
3
3
|
} from "./chunk-V46BHM2U.js";
|
|
4
|
-
import {
|
|
5
|
-
require_jsx_runtime
|
|
6
|
-
} from "./chunk-RBXONCYN.js";
|
|
7
|
-
import {
|
|
8
|
-
__toESM
|
|
9
|
-
} from "./chunk-LQ2VYIYD.js";
|
|
10
4
|
|
|
11
5
|
// src/partials/FieldValidationError/FieldValidationError.tsx
|
|
12
|
-
|
|
6
|
+
import { jsx } from "react/jsx-runtime";
|
|
13
7
|
var FieldValidationError = ({
|
|
14
8
|
error,
|
|
15
9
|
testId = void 0
|
|
@@ -27,14 +21,14 @@ var FieldValidationError = ({
|
|
|
27
21
|
const errorArray = JSON.stringify(tmp_errors) !== "[]" ? tmp_errors : error;
|
|
28
22
|
const errorStrings = errorArray.map((e) => e.message);
|
|
29
23
|
const ariaString = `Error: ${errorStrings.join("\n")}`;
|
|
30
|
-
return /* @__PURE__ */
|
|
24
|
+
return /* @__PURE__ */ jsx(
|
|
31
25
|
"ul",
|
|
32
26
|
{
|
|
33
27
|
"data-testid": slugify(testId || errorStrings.join()),
|
|
34
28
|
"aria-label": ariaString,
|
|
35
29
|
children: errorStrings.map((errorString, i) => (
|
|
36
30
|
// eslint-disable-next-line react/no-array-index-key
|
|
37
|
-
/* @__PURE__ */
|
|
31
|
+
/* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("div", { children: errorString }) }, `error_${i}`)
|
|
38
32
|
))
|
|
39
33
|
}
|
|
40
34
|
);
|
|
@@ -48,4 +42,4 @@ export {
|
|
|
48
42
|
FieldValidationError_default,
|
|
49
43
|
FieldValidationError_default2
|
|
50
44
|
};
|
|
51
|
-
//# sourceMappingURL=chunk-
|
|
45
|
+
//# sourceMappingURL=chunk-DBLODROX.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/partials/FieldValidationError/FieldValidationError.tsx","../src/partials/FieldValidationError/index.ts"],"sourcesContent":["import type { FieldError } from 'react-hook-form';\n\nimport { slugify } from '../../helpers';\n\nexport interface FieldValidationErrorProps {\n error: FieldError[] | Record<string, FieldError[]>;\n testId?: string;\n}\n\n/**\n * Renders a validation error of a field\n */\nconst FieldValidationError = ({\n error,\n testId = undefined,\n}: FieldValidationErrorProps) => {\n if (!error) {\n return null;\n }\n\n let tmp_errors: FieldError[] = [];\n\n if (typeof error === 'object' && !(error instanceof Array)) {\n const error_object = error as Record<string, FieldError[]>;\n Object.keys(error).forEach((key) => {\n tmp_errors = [...tmp_errors, ...error_object[key]];\n });\n }\n\n const errorArray: FieldError[] =\n JSON.stringify(tmp_errors) !== '[]' ? tmp_errors : (error as FieldError[]);\n const errorStrings: string[] = errorArray.map((e) => e.message) as string[];\n const ariaString = `Error: ${errorStrings.join('\\n')}`;\n\n return (\n <ul\n data-testid={slugify(testId || errorStrings.join())}\n aria-label={ariaString} // TODO: ist das richtig @Hannes?\n >\n {errorStrings.map((errorString: string, i: number) => (\n // eslint-disable-next-line react/no-array-index-key\n <li key={`error_${i}`}>\n <div>{errorString}</div>\n </li>\n ))}\n </ul>\n );\n};\n\nexport default FieldValidationError;\n","import FieldValidationError from './FieldValidationError';\n\nexport type { FieldValidationErrorProps } from './FieldValidationError';\n\nexport { FieldValidationError };\n\nexport default FieldValidationError;\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../src/partials/FieldValidationError/FieldValidationError.tsx","../src/partials/FieldValidationError/index.ts"],"sourcesContent":["import type { FieldError } from 'react-hook-form';\n\nimport { slugify } from '../../helpers';\n\nexport interface FieldValidationErrorProps {\n error: FieldError[] | Record<string, FieldError[]>;\n testId?: string;\n}\n\n/**\n * Renders a validation error of a field\n */\nconst FieldValidationError = ({\n error,\n testId = undefined,\n}: FieldValidationErrorProps) => {\n if (!error) {\n return null;\n }\n\n let tmp_errors: FieldError[] = [];\n\n if (typeof error === 'object' && !(error instanceof Array)) {\n const error_object = error as Record<string, FieldError[]>;\n Object.keys(error).forEach((key) => {\n tmp_errors = [...tmp_errors, ...error_object[key]];\n });\n }\n\n const errorArray: FieldError[] =\n JSON.stringify(tmp_errors) !== '[]' ? tmp_errors : (error as FieldError[]);\n const errorStrings: string[] = errorArray.map((e) => e.message) as string[];\n const ariaString = `Error: ${errorStrings.join('\\n')}`;\n\n return (\n <ul\n data-testid={slugify(testId || errorStrings.join())}\n aria-label={ariaString} // TODO: ist das richtig @Hannes?\n >\n {errorStrings.map((errorString: string, i: number) => (\n // eslint-disable-next-line react/no-array-index-key\n <li key={`error_${i}`}>\n <div>{errorString}</div>\n </li>\n ))}\n </ul>\n );\n};\n\nexport default FieldValidationError;\n","import FieldValidationError from './FieldValidationError';\n\nexport type { FieldValidationErrorProps } from './FieldValidationError';\n\nexport { FieldValidationError };\n\nexport default FieldValidationError;\n"],"mappings":";;;;;AA0CU;AA9BV,IAAM,uBAAuB,CAAC;AAAA,EAC5B;AAAA,EACA,SAAS;AACX,MAAiC;AAC/B,MAAI,CAAC,OAAO;AACV,WAAO;AAAA,EACT;AAEA,MAAI,aAA2B,CAAC;AAEhC,MAAI,OAAO,UAAU,YAAY,EAAE,iBAAiB,QAAQ;AAC1D,UAAM,eAAe;AACrB,WAAO,KAAK,KAAK,EAAE,QAAQ,CAAC,QAAQ;AAClC,mBAAa,CAAC,GAAG,YAAY,GAAG,aAAa,GAAG,CAAC;AAAA,IACnD,CAAC;AAAA,EACH;AAEA,QAAM,aACJ,KAAK,UAAU,UAAU,MAAM,OAAO,aAAc;AACtD,QAAM,eAAyB,WAAW,IAAI,CAAC,MAAM,EAAE,OAAO;AAC9D,QAAM,aAAa,UAAU,aAAa,KAAK,IAAI,CAAC;AAEpD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,QAAQ,UAAU,aAAa,KAAK,CAAC;AAAA,MAClD,cAAY;AAAA,MAEX,uBAAa,IAAI,CAAC,aAAqB;AAAA;AAAA,QAEtC,oBAAC,QACC,8BAAC,SAAK,uBAAY,KADX,SAAS,CAAC,EAEnB;AAAA,OACD;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,+BAAQ;;;AC3Cf,IAAOA,gCAAQ;","names":["FieldValidationError_default"]}
|
|
@@ -1,15 +1,8 @@
|
|
|
1
|
-
import {
|
|
2
|
-
require_jsx_runtime
|
|
3
|
-
} from "./chunk-RBXONCYN.js";
|
|
4
|
-
import {
|
|
5
|
-
__toESM
|
|
6
|
-
} from "./chunk-LQ2VYIYD.js";
|
|
7
|
-
|
|
8
1
|
// src/partials/FieldCopyTestIdButton/FieldCopyTestIdButton.tsx
|
|
9
|
-
var import_jsx_runtime = __toESM(require_jsx_runtime(), 1);
|
|
10
2
|
import { FaBullseye } from "react-icons/fa6";
|
|
11
3
|
import cn from "classnames";
|
|
12
4
|
import { Button, useLocalStorage } from "@fuf-stack/pixels";
|
|
5
|
+
import { jsx } from "react/jsx-runtime";
|
|
13
6
|
var LOCALSTORAGE_DEBUG_KEY = "uniform:form-debug-enabled";
|
|
14
7
|
var FieldCopyTestIdButton = ({
|
|
15
8
|
className = void 0,
|
|
@@ -24,13 +17,13 @@ var FieldCopyTestIdButton = ({
|
|
|
24
17
|
if (!debug) {
|
|
25
18
|
return null;
|
|
26
19
|
}
|
|
27
|
-
return /* @__PURE__ */
|
|
20
|
+
return /* @__PURE__ */ jsx(
|
|
28
21
|
Button,
|
|
29
22
|
{
|
|
30
23
|
className: cn(className, "pointer-events-auto"),
|
|
31
24
|
variant: "light",
|
|
32
25
|
onClick: copyToClipboard,
|
|
33
|
-
icon: /* @__PURE__ */
|
|
26
|
+
icon: /* @__PURE__ */ jsx(FaBullseye, {}),
|
|
34
27
|
size: "sm"
|
|
35
28
|
}
|
|
36
29
|
);
|
|
@@ -44,4 +37,4 @@ export {
|
|
|
44
37
|
FieldCopyTestIdButton_default,
|
|
45
38
|
FieldCopyTestIdButton_default2
|
|
46
39
|
};
|
|
47
|
-
//# sourceMappingURL=chunk-
|
|
40
|
+
//# sourceMappingURL=chunk-FNVT6LS4.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/partials/FieldCopyTestIdButton/FieldCopyTestIdButton.tsx","../src/partials/FieldCopyTestIdButton/index.ts"],"sourcesContent":["import { FaBullseye } from 'react-icons/fa6';\n\nimport cn from 'classnames';\n\nimport { Button, useLocalStorage } from '@fuf-stack/pixels';\n\nexport interface FieldCopyTestIdButtonProps {\n className?: string;\n testId: string;\n}\n\nconst LOCALSTORAGE_DEBUG_KEY = 'uniform:form-debug-enabled';\n\nconst FieldCopyTestIdButton = ({\n className = undefined,\n testId,\n}: FieldCopyTestIdButtonProps) => {\n const [debug] = useLocalStorage(LOCALSTORAGE_DEBUG_KEY, false);\n\n const copyToClipboard = () => {\n navigator.clipboard.writeText(testId).catch((err) => {\n console.error('Error copying TestId to clipboard', err);\n });\n };\n\n if (!debug) {\n return null;\n }\n\n return (\n <Button\n className={cn(className, 'pointer-events-auto')}\n variant=\"light\"\n onClick={copyToClipboard}\n icon={<FaBullseye />}\n size=\"sm\"\n />\n );\n};\nexport default FieldCopyTestIdButton;\n","import FieldCopyTestIdButton from './FieldCopyTestIdButton';\n\nexport type { FieldCopyTestIdButtonProps } from './FieldCopyTestIdButton';\n\nexport { FieldCopyTestIdButton };\n\nexport default FieldCopyTestIdButton;\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../src/partials/FieldCopyTestIdButton/FieldCopyTestIdButton.tsx","../src/partials/FieldCopyTestIdButton/index.ts"],"sourcesContent":["import { FaBullseye } from 'react-icons/fa6';\n\nimport cn from 'classnames';\n\nimport { Button, useLocalStorage } from '@fuf-stack/pixels';\n\nexport interface FieldCopyTestIdButtonProps {\n className?: string;\n testId: string;\n}\n\nconst LOCALSTORAGE_DEBUG_KEY = 'uniform:form-debug-enabled';\n\nconst FieldCopyTestIdButton = ({\n className = undefined,\n testId,\n}: FieldCopyTestIdButtonProps) => {\n const [debug] = useLocalStorage(LOCALSTORAGE_DEBUG_KEY, false);\n\n const copyToClipboard = () => {\n navigator.clipboard.writeText(testId).catch((err) => {\n console.error('Error copying TestId to clipboard', err);\n });\n };\n\n if (!debug) {\n return null;\n }\n\n return (\n <Button\n className={cn(className, 'pointer-events-auto')}\n variant=\"light\"\n onClick={copyToClipboard}\n icon={<FaBullseye />}\n size=\"sm\"\n />\n );\n};\nexport default FieldCopyTestIdButton;\n","import FieldCopyTestIdButton from './FieldCopyTestIdButton';\n\nexport type { FieldCopyTestIdButtonProps } from './FieldCopyTestIdButton';\n\nexport { FieldCopyTestIdButton };\n\nexport default FieldCopyTestIdButton;\n"],"mappings":";AAAA,SAAS,kBAAkB;AAE3B,OAAO,QAAQ;AAEf,SAAS,QAAQ,uBAAuB;AA8B5B;AAvBZ,IAAM,yBAAyB;AAE/B,IAAM,wBAAwB,CAAC;AAAA,EAC7B,YAAY;AAAA,EACZ;AACF,MAAkC;AAChC,QAAM,CAAC,KAAK,IAAI,gBAAgB,wBAAwB,KAAK;AAE7D,QAAM,kBAAkB,MAAM;AAC5B,cAAU,UAAU,UAAU,MAAM,EAAE,MAAM,CAAC,QAAQ;AACnD,cAAQ,MAAM,qCAAqC,GAAG;AAAA,IACxD,CAAC;AAAA,EACH;AAEA,MAAI,CAAC,OAAO;AACV,WAAO;AAAA,EACT;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,WAAW,qBAAqB;AAAA,MAC9C,SAAQ;AAAA,MACR,SAAS;AAAA,MACT,MAAM,oBAAC,cAAW;AAAA,MAClB,MAAK;AAAA;AAAA,EACP;AAEJ;AACA,IAAO,gCAAQ;;;ACjCf,IAAOA,iCAAQ;","names":["FieldCopyTestIdButton_default"]}
|
|
@@ -2,14 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
var _chunkBBB4FEY6cjs = require('./chunk-BBB4FEY6.cjs');
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
var _chunkLMMDXQ4Lcjs = require('./chunk-LMMDXQ4L.cjs');
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
var _chunkAT5DS6MScjs = require('./chunk-AT5DS6MS.cjs');
|
|
10
|
-
|
|
11
5
|
// src/partials/FieldValidationError/FieldValidationError.tsx
|
|
12
|
-
var
|
|
6
|
+
var _jsxruntime = require('react/jsx-runtime');
|
|
13
7
|
var FieldValidationError = ({
|
|
14
8
|
error,
|
|
15
9
|
testId = void 0
|
|
@@ -27,14 +21,14 @@ var FieldValidationError = ({
|
|
|
27
21
|
const errorArray = JSON.stringify(tmp_errors) !== "[]" ? tmp_errors : error;
|
|
28
22
|
const errorStrings = errorArray.map((e) => e.message);
|
|
29
23
|
const ariaString = `Error: ${errorStrings.join("\n")}`;
|
|
30
|
-
return /* @__PURE__ */ (0,
|
|
24
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
31
25
|
"ul",
|
|
32
26
|
{
|
|
33
27
|
"data-testid": _chunkBBB4FEY6cjs.slugify.call(void 0, testId || errorStrings.join()),
|
|
34
28
|
"aria-label": ariaString,
|
|
35
29
|
children: errorStrings.map((errorString, i) => (
|
|
36
30
|
// eslint-disable-next-line react/no-array-index-key
|
|
37
|
-
/* @__PURE__ */ (0,
|
|
31
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "li", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: errorString }) }, `error_${i}`)
|
|
38
32
|
))
|
|
39
33
|
}
|
|
40
34
|
);
|
|
@@ -48,4 +42,4 @@ var FieldValidationError_default2 = FieldValidationError_default;
|
|
|
48
42
|
|
|
49
43
|
|
|
50
44
|
exports.FieldValidationError_default = FieldValidationError_default; exports.FieldValidationError_default2 = FieldValidationError_default2;
|
|
51
|
-
//# sourceMappingURL=chunk-
|
|
45
|
+
//# sourceMappingURL=chunk-QTL5FREE.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/partials/FieldValidationError/FieldValidationError.tsx","../src/partials/FieldValidationError/index.ts"],"names":["FieldValidationError_default"],"mappings":";;;;;AA0CU;AA9BV,IAAM,uBAAuB,CAAC;AAAA,EAC5B;AAAA,EACA,SAAS;AACX,MAAiC;AAC/B,MAAI,CAAC,OAAO;AACV,WAAO;AAAA,EACT;AAEA,MAAI,aAA2B,CAAC;AAEhC,MAAI,OAAO,UAAU,YAAY,EAAE,iBAAiB,QAAQ;AAC1D,UAAM,eAAe;AACrB,WAAO,KAAK,KAAK,EAAE,QAAQ,CAAC,QAAQ;AAClC,mBAAa,CAAC,GAAG,YAAY,GAAG,aAAa,GAAG,CAAC;AAAA,IACnD,CAAC;AAAA,EACH;AAEA,QAAM,aACJ,KAAK,UAAU,UAAU,MAAM,OAAO,aAAc;AACtD,QAAM,eAAyB,WAAW,IAAI,CAAC,MAAM,EAAE,OAAO;AAC9D,QAAM,aAAa,UAAU,aAAa,KAAK,IAAI,CAAC;AAEpD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,QAAQ,UAAU,aAAa,KAAK,CAAC;AAAA,MAClD,cAAY;AAAA,MAEX,uBAAa,IAAI,CAAC,aAAqB;AAAA;AAAA,QAEtC,oBAAC,QACC,8BAAC,SAAK,uBAAY,KADX,SAAS,CAAC,EAEnB;AAAA,OACD;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,+BAAQ;;;AC3Cf,IAAOA,gCAAQ","sourcesContent":["import type { FieldError } from 'react-hook-form';\n\nimport { slugify } from '../../helpers';\n\nexport interface FieldValidationErrorProps {\n error: FieldError[] | Record<string, FieldError[]>;\n testId?: string;\n}\n\n/**\n * Renders a validation error of a field\n */\nconst FieldValidationError = ({\n error,\n testId = undefined,\n}: FieldValidationErrorProps) => {\n if (!error) {\n return null;\n }\n\n let tmp_errors: FieldError[] = [];\n\n if (typeof error === 'object' && !(error instanceof Array)) {\n const error_object = error as Record<string, FieldError[]>;\n Object.keys(error).forEach((key) => {\n tmp_errors = [...tmp_errors, ...error_object[key]];\n });\n }\n\n const errorArray: FieldError[] =\n JSON.stringify(tmp_errors) !== '[]' ? tmp_errors : (error as FieldError[]);\n const errorStrings: string[] = errorArray.map((e) => e.message) as string[];\n const ariaString = `Error: ${errorStrings.join('\\n')}`;\n\n return (\n <ul\n data-testid={slugify(testId || errorStrings.join())}\n aria-label={ariaString} // TODO: ist das richtig @Hannes?\n >\n {errorStrings.map((errorString: string, i: number) => (\n // eslint-disable-next-line react/no-array-index-key\n <li key={`error_${i}`}>\n <div>{errorString}</div>\n </li>\n ))}\n </ul>\n );\n};\n\nexport default FieldValidationError;\n","import FieldValidationError from './FieldValidationError';\n\nexport type { FieldValidationErrorProps } from './FieldValidationError';\n\nexport { FieldValidationError };\n\nexport default FieldValidationError;\n"]}
|
|
@@ -1,20 +1,14 @@
|
|
|
1
1
|
import {
|
|
2
2
|
useFormContext
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-BCMPSLSG.js";
|
|
4
4
|
import {
|
|
5
5
|
slugify
|
|
6
6
|
} from "./chunk-V46BHM2U.js";
|
|
7
|
-
import {
|
|
8
|
-
require_jsx_runtime
|
|
9
|
-
} from "./chunk-RBXONCYN.js";
|
|
10
|
-
import {
|
|
11
|
-
__toESM
|
|
12
|
-
} from "./chunk-LQ2VYIYD.js";
|
|
13
7
|
|
|
14
8
|
// src/SubmitButton/SubmitButton.tsx
|
|
15
9
|
import cn from "classnames";
|
|
16
10
|
import { Button } from "@fuf-stack/pixels";
|
|
17
|
-
|
|
11
|
+
import { jsx } from "react/jsx-runtime";
|
|
18
12
|
var SubmitButton = ({
|
|
19
13
|
children = "Submit",
|
|
20
14
|
className = void 0,
|
|
@@ -27,7 +21,7 @@ var SubmitButton = ({
|
|
|
27
21
|
const {
|
|
28
22
|
formState: { isValid, isSubmitting, isValidating }
|
|
29
23
|
} = useFormContext();
|
|
30
|
-
return /* @__PURE__ */
|
|
24
|
+
return /* @__PURE__ */ jsx(
|
|
31
25
|
Button,
|
|
32
26
|
{
|
|
33
27
|
className: cn(className),
|
|
@@ -51,4 +45,4 @@ export {
|
|
|
51
45
|
SubmitButton_default,
|
|
52
46
|
SubmitButton_default2
|
|
53
47
|
};
|
|
54
|
-
//# sourceMappingURL=chunk-
|
|
48
|
+
//# sourceMappingURL=chunk-TEJGV6NC.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/SubmitButton/SubmitButton.tsx","../src/SubmitButton/index.ts"],"sourcesContent":["import type { ButtonProps } from '@fuf-stack/pixels';\nimport type { ReactNode } from 'react';\n\nimport cn from 'classnames';\n\nimport { Button } from '@fuf-stack/pixels';\n\nimport { slugify } from '../helpers';\nimport { useFormContext } from '../hooks';\n\nexport interface SubmitButtonProps {\n /** child components */\n children?: ReactNode;\n /** CSS class name */\n className?: string;\n /** color of the button */\n color?: ButtonProps['color'];\n /** If set loading animation is shown */\n loading?: boolean;\n /** function called when the button is pressed. */\n onClick?: ButtonProps['onClick'];\n /** size of the button */\n size?: ButtonProps['size'];\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n}\n\n/**\n * From SubmitButton\n */\nconst SubmitButton = ({\n children = 'Submit',\n className = undefined,\n color = 'success',\n loading = false,\n onClick = undefined,\n size = 'md',\n testId = 'form_submit_button',\n}: SubmitButtonProps) => {\n const {\n formState: { isValid, isSubmitting, isValidating },\n } = useFormContext();\n\n return (\n <Button\n className={cn(className)}\n color={color}\n testId={slugify(testId)}\n disabled={!isValid || isSubmitting || isValidating}\n loading={loading}\n onClick={onClick}\n size={size}\n type=\"submit\"\n >\n {children}\n </Button>\n );\n};\n\nexport default SubmitButton;\n","import SubmitButton from './SubmitButton';\n\nexport type { SubmitButtonProps } from './SubmitButton';\n\nexport { SubmitButton };\n\nexport default SubmitButton;\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../src/SubmitButton/SubmitButton.tsx","../src/SubmitButton/index.ts"],"sourcesContent":["import type { ButtonProps } from '@fuf-stack/pixels';\nimport type { ReactNode } from 'react';\n\nimport cn from 'classnames';\n\nimport { Button } from '@fuf-stack/pixels';\n\nimport { slugify } from '../helpers';\nimport { useFormContext } from '../hooks';\n\nexport interface SubmitButtonProps {\n /** child components */\n children?: ReactNode;\n /** CSS class name */\n className?: string;\n /** color of the button */\n color?: ButtonProps['color'];\n /** If set loading animation is shown */\n loading?: boolean;\n /** function called when the button is pressed. */\n onClick?: ButtonProps['onClick'];\n /** size of the button */\n size?: ButtonProps['size'];\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n}\n\n/**\n * From SubmitButton\n */\nconst SubmitButton = ({\n children = 'Submit',\n className = undefined,\n color = 'success',\n loading = false,\n onClick = undefined,\n size = 'md',\n testId = 'form_submit_button',\n}: SubmitButtonProps) => {\n const {\n formState: { isValid, isSubmitting, isValidating },\n } = useFormContext();\n\n return (\n <Button\n className={cn(className)}\n color={color}\n testId={slugify(testId)}\n disabled={!isValid || isSubmitting || isValidating}\n loading={loading}\n onClick={onClick}\n size={size}\n type=\"submit\"\n >\n {children}\n </Button>\n );\n};\n\nexport default SubmitButton;\n","import SubmitButton from './SubmitButton';\n\nexport type { SubmitButtonProps } from './SubmitButton';\n\nexport { SubmitButton };\n\nexport default SubmitButton;\n"],"mappings":";;;;;;;;AAGA,OAAO,QAAQ;AAEf,SAAS,cAAc;AAuCnB;AAdJ,IAAM,eAAe,CAAC;AAAA,EACpB,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,UAAU;AAAA,EACV,OAAO;AAAA,EACP,SAAS;AACX,MAAyB;AACvB,QAAM;AAAA,IACJ,WAAW,EAAE,SAAS,cAAc,aAAa;AAAA,EACnD,IAAI,eAAe;AAEnB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,SAAS;AAAA,MACvB;AAAA,MACA,QAAQ,QAAQ,MAAM;AAAA,MACtB,UAAU,CAAC,WAAW,gBAAgB;AAAA,MACtC;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAK;AAAA,MAEJ;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,uBAAQ;;;ACrDf,IAAOA,wBAAQ;","names":["SubmitButton_default"]}
|
|
@@ -1,29 +1,22 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } 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; }
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } 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
|
var _chunkBBB4FEY6cjs = require('./chunk-BBB4FEY6.cjs');
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
var _chunkLMMDXQ4Lcjs = require('./chunk-LMMDXQ4L.cjs');
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
var _chunkAT5DS6MScjs = require('./chunk-AT5DS6MS.cjs');
|
|
11
|
-
|
|
12
5
|
// src/hooks/useFormContext/useFormContext.ts
|
|
13
|
-
var
|
|
6
|
+
var _react = require('react'); var _react2 = _interopRequireDefault(_react);
|
|
14
7
|
var _reacthookform = require('react-hook-form');
|
|
15
8
|
|
|
16
9
|
// src/Form/subcomponents/FormContext.tsx
|
|
17
|
-
var import_react = _chunkAT5DS6MScjs.__toESM.call(void 0, _chunkLMMDXQ4Lcjs.require_react.call(void 0, ), 1);
|
|
18
|
-
var import_jsx_runtime = _chunkAT5DS6MScjs.__toESM.call(void 0, _chunkLMMDXQ4Lcjs.require_jsx_runtime.call(void 0, ), 1);
|
|
19
10
|
|
|
20
|
-
|
|
11
|
+
|
|
12
|
+
var _jsxruntime = require('react/jsx-runtime');
|
|
13
|
+
var ValidationSchemaContext = _react2.default.createContext(void 0);
|
|
21
14
|
var FormProvider = ({
|
|
22
15
|
children,
|
|
23
16
|
validation = void 0,
|
|
24
17
|
...hookFormProps
|
|
25
18
|
}) => {
|
|
26
|
-
return /* @__PURE__ */ (0,
|
|
19
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ValidationSchemaContext.Provider, { value: validation, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacthookform.FormProvider, { ...hookFormProps, children }) });
|
|
27
20
|
};
|
|
28
21
|
var FormContext_default = FormProvider;
|
|
29
22
|
|
|
@@ -65,7 +58,7 @@ var useFormContext = () => {
|
|
|
65
58
|
getFieldState: getFieldStateOrig,
|
|
66
59
|
...otherMethods
|
|
67
60
|
} = _reacthookform.useFormContext.call(void 0, );
|
|
68
|
-
const validation = (0,
|
|
61
|
+
const validation = _react.useContext.call(void 0, ValidationSchemaContext);
|
|
69
62
|
const getFieldState = (name, testId) => {
|
|
70
63
|
const fieldPath = typeof name === "string" ? name.replace(/\[\d+\]/g, "").split(".") : name;
|
|
71
64
|
const required = validation && recursiveFieldKeySearch(validation.schema, fieldPath) || false;
|
|
@@ -91,4 +84,4 @@ var useFormContext = () => {
|
|
|
91
84
|
|
|
92
85
|
|
|
93
86
|
exports.FormContext_default = FormContext_default; exports.recursiveFieldKeySearch = recursiveFieldKeySearch; exports.useFormContext = useFormContext;
|
|
94
|
-
//# sourceMappingURL=chunk-
|
|
87
|
+
//# sourceMappingURL=chunk-WQRM7G4C.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/hooks/useFormContext/useFormContext.ts","../src/Form/subcomponents/FormContext.tsx"],"names":[],"mappings":";;;;;AAGA,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB,0BAA0B;;;ACDrD,OAAO,WAAW;AAClB,SAAS,gBAAgB,wBAAwB;AAoB3C;AAlBC,IAAM,0BAA0B,MAAM,cAE3C,MAAS;AASX,IAAM,eAAe,CAAC;AAAA,EACpB;AAAA,EACA,aAAa;AAAA,EACb,GAAG;AACL,MAAyB;AACvB,SACE,oBAAC,wBAAwB,UAAxB,EAAiC,OAAO,YACvC,8BAAC,oBAAkB,GAAG,eAAgB,UAAS,GACjD;AAEJ;AAEA,IAAO,sBAAQ;;;ADnBf,IAAM,2BAA2B,CAAC,WAAgC;AAChE,MAAI,QAAQ,MAAM,WAAW;AAC3B,QAAI,QAAQ,MAAM,WAAW,MAAM,aAAa,eAAe;AAC7D,aAAO,QAAQ,MAAM,WAAW,MAAM,aAAa;AAAA,IACrD;AACA,WAAO,yBAAyB,QAAQ,MAAM,SAAS;AAAA,EACzD;AACA,SAAO;AACT;AAGO,IAAM,0BAA0B,CACrC,QACA,SACmB;AACnB,QAAM,CAAC,SAAS,GAAG,IAAI,IAAI;AAG3B,MAAI,gBAAgB;AAEpB,MAAI,QAAQ,MAAM,aAAa,eAAe;AAE5C,oBAAgB,OAAO,OAAO;AAAA,EAChC,WAAW,QAAQ,MAAM,aAAa,cAAc;AAElD,WAAO,wBAAwB,OAAO,MAAM,QAAQ,IAAI;AAAA,EAC1D;AAGA,MAAI,eAAe,MAAM,aAAa,mBAAmB;AACvD,YACG,cAAc,KAAK,MAAM,SACtB,wBAAwB,cAAc,KAAK,KAAK,QAAQ,IAAI,IAC5D,wBAAwB,cAAc,KAAK,MAAM,IAAI,OACxD,cAAc,KAAK,OAAO,SACvB,wBAAwB,cAAc,KAAK,MAAM,QAAQ,IAAI,IAC7D,wBAAwB,cAAc,KAAK,OAAO,IAAI;AAAA,EAE9D;AAIA,QAAM,QAAQ,eAAe,SAAS,eAAe,SAAS;AAE9D,MAAI,SAAS,MAAM,OAAO,GAAG;AAE3B,QAAI,KAAK,WAAW,GAAG;AAErB,aACE,MAAM,OAAO,GAAG,MAAM,aAAa,iBACnC,yBAAyB,MAAM,OAAO,CAAC;AAAA,IAE3C;AACA,WAAO,wBAAwB,MAAM,OAAO,GAAG,IAAI;AAAA,EACrD;AAEA,SAAO;AACT;AAGO,IAAM,iBAAiB,MAAM;AAClC,QAAM;AAAA;AAAA;AAAA,IAGJ;AAAA,IACA,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAAI,mBAAmB;AACvB,QAAM,aAAa,WAAW,uBAAuB;AAGrD,QAAM,gBAAgB,CAAC,MAAc,WAAoB;AACvD,UAAM,YACJ,OAAO,SAAS,WAAW,KAAK,QAAQ,YAAY,EAAE,EAAE,MAAM,GAAG,IAAI;AACvE,UAAM,WACH,cAAc,wBAAwB,WAAW,QAAQ,SAAS,KACnE;AACF,UAAM,EAAE,OAAO,GAAG,KAAK,IAAI,kBAAkB,MAAM,SAAS;AAC5D,WAAO;AAAA,MACL,GAAG;AAAA,MACH;AAAA;AAAA,MACA;AAAA,MACA,QAAQ,QAAQ,UAAU,IAAI;AAAA,IAChC;AAAA,EACF;AAEA,SAAO;AAAA,IACL,GAAG;AAAA,IACH;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF","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 { ValidationSchemaContext } from '../../Form/subcomponents/FormContext';\nimport { slugify } from '../../helpers';\n\n// FIX: This fixes the problem that the innerType is not checked for optionals...\nconst recursiveSearchInnerType = (schema: VetoSchema): boolean => {\n if (schema?._def?.innerType) {\n if (schema?._def?.innerType?._def?.typeName === 'ZodOptional') {\n return schema?._def?.innerType?._def?.typeName !== 'ZodOptional';\n }\n return recursiveSearchInnerType(schema?._def?.innerType);\n }\n return true;\n};\n\n// TODO: Fix problem \".optional().nullable()\" is required, \".nullable().optional()\" is not required...\nexport const recursiveFieldKeySearch = (\n schema: VetoSchema,\n path: string[],\n): boolean | null => {\n const [current, ...rest] = path;\n // ignore optionals on the path to the desired field\n\n let currentSchema = schema;\n\n if (schema?._def?.typeName === 'ZodOptional') {\n // @ts-expect-error not sure here\n currentSchema = schema.unwrap();\n } else if (schema?._def?.typeName === 'ZodEffects') {\n // in case of an effect, unwrap the effect and call with schema (clould be optional) and complete path.\n return recursiveFieldKeySearch(schema._def?.schema, path);\n }\n\n // TODO: This needs further investigation. It is nor yet completely clear how to handle intersections!\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 shape of an object or objects of an array\n // @ts-expect-error not sure here\n const shape = currentSchema?.shape ?? currentSchema?.element?.shape; // ??\n\n if (shape && shape[current]) {\n // currentSchema?._def.schema.unwrap()?.shape;\n if (rest.length === 0) {\n // At the end of the path check if the field is optional or required\n return (\n shape[current]?._def?.typeName !== 'ZodOptional' &&\n recursiveSearchInnerType(shape[current])\n );\n }\n return recursiveFieldKeySearch(shape[current], rest);\n }\n\n return null; // field not found\n};\n\n/** TODO: add description */\nexport const useFormContext = () => {\n const {\n // https://react-hook-form.com/docs/useform/getfieldstate\n // for getFieldState a subscription to formState properties is needed!\n formState,\n getFieldState: getFieldStateOrig,\n ...otherMethods\n } = useHookFormContext();\n const validation = useContext(ValidationSchemaContext);\n\n // update getFieldState\n const getFieldState = (name: string, testId?: string) => {\n const fieldPath =\n typeof name === 'string' ? name.replace(/\\[\\d+\\]/g, '').split('.') : name;\n const required =\n (validation && recursiveFieldKeySearch(validation.schema, fieldPath)) ||\n false;\n const { error, ...rest } = getFieldStateOrig(name, formState);\n return {\n ...rest,\n error: error as FieldError[] | undefined, // TODO: change to correct type @Hannes ;)\n required,\n testId: slugify(testId || name),\n };\n };\n\n return {\n ...otherMethods,\n getFieldState,\n validation,\n formState,\n };\n};\n","import type { VetoInstance } from '@fuf-stack/veto';\nimport type { FormProviderProps as HookFormProviderProps } from 'react-hook-form';\n\nimport React from 'react';\nimport { FormProvider as HookFormProvider } from 'react-hook-form';\n\nexport const ValidationSchemaContext = React.createContext<\n VetoInstance | undefined\n>(undefined);\n\ninterface FormProviderProps\n extends HookFormProviderProps<Record<string, any>, any, undefined> {\n /** veto validation schema */\n validation?: VetoInstance;\n}\n\n/** Provides the veto validation context to the form */\nconst FormProvider = ({\n children,\n validation = undefined,\n ...hookFormProps\n}: FormProviderProps) => {\n return (\n <ValidationSchemaContext.Provider value={validation}>\n <HookFormProvider {...hookFormProps}>{children}</HookFormProvider>\n </ValidationSchemaContext.Provider>\n );\n};\n\nexport default FormProvider;\n"]}
|
|
@@ -1,20 +1,14 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _chunkWQRM7G4Ccjs = require('./chunk-WQRM7G4C.cjs');
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
var _chunkBBB4FEY6cjs = require('./chunk-BBB4FEY6.cjs');
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
var _chunkLMMDXQ4Lcjs = require('./chunk-LMMDXQ4L.cjs');
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
var _chunkAT5DS6MScjs = require('./chunk-AT5DS6MS.cjs');
|
|
13
|
-
|
|
14
8
|
// src/SubmitButton/SubmitButton.tsx
|
|
15
9
|
var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
|
|
16
10
|
var _pixels = require('@fuf-stack/pixels');
|
|
17
|
-
var
|
|
11
|
+
var _jsxruntime = require('react/jsx-runtime');
|
|
18
12
|
var SubmitButton = ({
|
|
19
13
|
children = "Submit",
|
|
20
14
|
className = void 0,
|
|
@@ -26,8 +20,8 @@ var SubmitButton = ({
|
|
|
26
20
|
}) => {
|
|
27
21
|
const {
|
|
28
22
|
formState: { isValid, isSubmitting, isValidating }
|
|
29
|
-
} =
|
|
30
|
-
return /* @__PURE__ */ (0,
|
|
23
|
+
} = _chunkWQRM7G4Ccjs.useFormContext.call(void 0, );
|
|
24
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
31
25
|
_pixels.Button,
|
|
32
26
|
{
|
|
33
27
|
className: _classnames2.default.call(void 0, className),
|
|
@@ -51,4 +45,4 @@ var SubmitButton_default2 = SubmitButton_default;
|
|
|
51
45
|
|
|
52
46
|
|
|
53
47
|
exports.SubmitButton_default = SubmitButton_default; exports.SubmitButton_default2 = SubmitButton_default2;
|
|
54
|
-
//# sourceMappingURL=chunk-
|
|
48
|
+
//# sourceMappingURL=chunk-XUKBLFTR.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/SubmitButton/SubmitButton.tsx","../src/SubmitButton/index.ts"],"names":["SubmitButton_default"],"mappings":";;;;;;;;AAGA,OAAO,QAAQ;AAEf,SAAS,cAAc;AAuCnB;AAdJ,IAAM,eAAe,CAAC;AAAA,EACpB,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,UAAU;AAAA,EACV,OAAO;AAAA,EACP,SAAS;AACX,MAAyB;AACvB,QAAM;AAAA,IACJ,WAAW,EAAE,SAAS,cAAc,aAAa;AAAA,EACnD,IAAI,eAAe;AAEnB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,SAAS;AAAA,MACvB;AAAA,MACA,QAAQ,QAAQ,MAAM;AAAA,MACtB,UAAU,CAAC,WAAW,gBAAgB;AAAA,MACtC;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAK;AAAA,MAEJ;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,uBAAQ;;;ACrDf,IAAOA,wBAAQ","sourcesContent":["import type { ButtonProps } from '@fuf-stack/pixels';\nimport type { ReactNode } from 'react';\n\nimport cn from 'classnames';\n\nimport { Button } from '@fuf-stack/pixels';\n\nimport { slugify } from '../helpers';\nimport { useFormContext } from '../hooks';\n\nexport interface SubmitButtonProps {\n /** child components */\n children?: ReactNode;\n /** CSS class name */\n className?: string;\n /** color of the button */\n color?: ButtonProps['color'];\n /** If set loading animation is shown */\n loading?: boolean;\n /** function called when the button is pressed. */\n onClick?: ButtonProps['onClick'];\n /** size of the button */\n size?: ButtonProps['size'];\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n}\n\n/**\n * From SubmitButton\n */\nconst SubmitButton = ({\n children = 'Submit',\n className = undefined,\n color = 'success',\n loading = false,\n onClick = undefined,\n size = 'md',\n testId = 'form_submit_button',\n}: SubmitButtonProps) => {\n const {\n formState: { isValid, isSubmitting, isValidating },\n } = useFormContext();\n\n return (\n <Button\n className={cn(className)}\n color={color}\n testId={slugify(testId)}\n disabled={!isValid || isSubmitting || isValidating}\n loading={loading}\n onClick={onClick}\n size={size}\n type=\"submit\"\n >\n {children}\n </Button>\n );\n};\n\nexport default SubmitButton;\n","import SubmitButton from './SubmitButton';\n\nexport type { SubmitButtonProps } from './SubmitButton';\n\nexport { SubmitButton };\n\nexport default SubmitButton;\n"]}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }// src/Grid/Grid.tsx
|
|
2
|
+
var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
|
|
3
|
+
var _jsxruntime = require('react/jsx-runtime');
|
|
4
|
+
var Grid = ({
|
|
5
|
+
children = null,
|
|
6
|
+
className = void 0,
|
|
7
|
+
testId = void 0
|
|
8
|
+
}) => {
|
|
9
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _classnames2.default.call(void 0, "grid gap-6", className), "data-testid": testId, children });
|
|
10
|
+
};
|
|
11
|
+
var Grid_default = Grid;
|
|
12
|
+
|
|
13
|
+
// src/Grid/index.ts
|
|
14
|
+
var Grid_default2 = Grid_default;
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
exports.Grid_default = Grid_default; exports.Grid_default2 = Grid_default2;
|
|
20
|
+
//# sourceMappingURL=chunk-ZPFKVKGV.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/Grid/Grid.tsx","../src/Grid/index.ts"],"names":["Grid_default"],"mappings":";AAEA,OAAO,QAAQ;AAoBX;AANJ,IAAM,OAAO,CAAC;AAAA,EACZ,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,SAAS;AACX,MAAiB;AACf,SACE,oBAAC,SAAI,WAAW,GAAG,cAAc,SAAS,GAAG,eAAa,QACvD,UACH;AAEJ;AAEA,IAAO,eAAQ;;;ACtBf,IAAOA,gBAAQ","sourcesContent":["import type { ReactNode } from 'react';\n\nimport cn from 'classnames';\n\nexport interface GridProps {\n /** child components */\n children?: ReactNode;\n /** CSS class name */\n className?: string;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n}\n\n/**\n * Defines the default grid for form components\n */\nconst Grid = ({\n children = null,\n className = undefined,\n testId = undefined,\n}: GridProps) => {\n return (\n <div className={cn('grid gap-6', className)} data-testid={testId}>\n {children}\n </div>\n );\n};\n\nexport default Grid;\n","import Grid from './Grid';\n\nexport type { GridProps } from './Grid';\n\nexport { Grid };\n\nexport default Grid;\n"]}
|