@fuf-stack/uniform 0.0.2 → 0.0.4
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 +5 -263
- package/dist/Form/index.cjs.map +1 -1
- package/dist/Form/index.d.cts +3 -2
- package/dist/Form/index.d.ts +3 -2
- package/dist/Form/index.js +6 -10
- package/dist/Form/index.js.map +1 -1
- package/dist/{Form/Form.d.cts → Form-Bv0R3QNk.d.cts} +1 -6
- package/dist/{Form/Form.d.ts → Form-Bv0R3QNk.d.ts} +1 -6
- package/dist/Grid/index.cjs +5 -47
- package/dist/Grid/index.cjs.map +1 -1
- package/dist/Grid/index.d.cts +3 -2
- package/dist/Grid/index.d.ts +3 -2
- package/dist/Grid/index.js +4 -5
- package/dist/Grid/index.js.map +1 -1
- package/dist/{Grid/Grid.d.cts → Grid-DF3L9NF3.d.cts} +1 -1
- package/dist/{Grid/Grid.d.ts → Grid-DF3L9NF3.d.ts} +1 -1
- package/dist/SubmitButton/index.cjs +15 -129
- package/dist/SubmitButton/index.cjs.map +1 -1
- package/dist/SubmitButton/index.d.cts +22 -6
- package/dist/SubmitButton/index.d.ts +22 -6
- package/dist/SubmitButton/index.js +37 -6
- package/dist/SubmitButton/index.js.map +1 -1
- package/dist/{chunk-KY2KCXOO.js → chunk-4MEKDDB2.js} +6 -2
- package/dist/chunk-4MEKDDB2.js.map +1 -0
- package/dist/chunk-BBB4FEY6.cjs +22 -0
- package/dist/chunk-BBB4FEY6.cjs.map +1 -0
- package/dist/{chunk-PMNBGDEZ.js → chunk-BCMPSLSG.js} +21 -7
- package/dist/chunk-BCMPSLSG.js.map +1 -0
- package/dist/{chunk-AV26PIKH.js → chunk-BQUVQMFA.js} +79 -3
- package/dist/chunk-BQUVQMFA.js.map +1 -0
- package/dist/chunk-II57W3V2.cjs +158 -0
- package/dist/chunk-II57W3V2.cjs.map +1 -0
- package/dist/{chunk-WIY7KIHU.js → chunk-V46BHM2U.js} +4 -4
- package/dist/chunk-V46BHM2U.js.map +1 -0
- package/dist/chunk-WQRM7G4C.cjs +87 -0
- package/dist/chunk-WQRM7G4C.cjs.map +1 -0
- package/dist/chunk-ZPFKVKGV.cjs +20 -0
- package/dist/chunk-ZPFKVKGV.cjs.map +1 -0
- package/dist/helpers/index.cjs +7 -0
- package/dist/helpers/index.cjs.map +1 -0
- package/dist/helpers/index.d.cts +5 -0
- package/dist/helpers/index.d.ts +5 -0
- package/dist/helpers/index.js +7 -0
- package/dist/hooks/index.cjs +4 -123
- package/dist/hooks/index.cjs.map +1 -1
- package/dist/hooks/index.d.cts +40 -4
- package/dist/hooks/index.d.ts +40 -4
- package/dist/hooks/index.js +2 -4
- package/dist/index.cjs +13 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +6 -0
- package/dist/index.d.ts +6 -0
- package/dist/index.js +13 -0
- package/dist/partials/FieldCopyTestIdButton/index.cjs +14 -47
- package/dist/partials/FieldCopyTestIdButton/index.cjs.map +1 -1
- package/dist/partials/FieldCopyTestIdButton/index.d.cts +6 -3
- package/dist/partials/FieldCopyTestIdButton/index.d.ts +6 -3
- package/dist/partials/FieldCopyTestIdButton/index.js +29 -3
- package/dist/partials/FieldCopyTestIdButton/index.js.map +1 -1
- package/dist/partials/FieldValidationError/index.cjs +9 -56
- package/dist/partials/FieldValidationError/index.cjs.map +1 -1
- package/dist/partials/FieldValidationError/index.d.cts +10 -4
- package/dist/partials/FieldValidationError/index.d.ts +10 -4
- package/dist/partials/FieldValidationError/index.js +35 -3
- package/dist/partials/FieldValidationError/index.js.map +1 -1
- package/package.json +45 -10
- package/dist/Form/Form.cjs +0 -269
- package/dist/Form/Form.cjs.map +0 -1
- package/dist/Form/Form.js +0 -14
- package/dist/Form/subcomponents/FormContext.cjs +0 -53
- package/dist/Form/subcomponents/FormContext.cjs.map +0 -1
- package/dist/Form/subcomponents/FormContext.d.cts +0 -20
- package/dist/Form/subcomponents/FormContext.d.ts +0 -20
- package/dist/Form/subcomponents/FormContext.js +0 -9
- package/dist/Form/subcomponents/FormDebugViewer.cjs +0 -197
- package/dist/Form/subcomponents/FormDebugViewer.cjs.map +0 -1
- package/dist/Form/subcomponents/FormDebugViewer.d.cts +0 -10
- package/dist/Form/subcomponents/FormDebugViewer.d.ts +0 -10
- package/dist/Form/subcomponents/FormDebugViewer.js +0 -11
- package/dist/Form/subcomponents/FormDebugViewer.js.map +0 -1
- package/dist/Grid/Grid.cjs +0 -46
- package/dist/Grid/Grid.cjs.map +0 -1
- package/dist/Grid/Grid.js +0 -7
- package/dist/Grid/Grid.js.map +0 -1
- package/dist/SubmitButton/SubmitButton.cjs +0 -154
- package/dist/SubmitButton/SubmitButton.cjs.map +0 -1
- package/dist/SubmitButton/SubmitButton.d.cts +0 -24
- package/dist/SubmitButton/SubmitButton.d.ts +0 -24
- package/dist/SubmitButton/SubmitButton.js +0 -11
- package/dist/SubmitButton/SubmitButton.js.map +0 -1
- package/dist/chunk-AV26PIKH.js.map +0 -1
- package/dist/chunk-BJ36HK7L.js +0 -42
- package/dist/chunk-BJ36HK7L.js.map +0 -1
- package/dist/chunk-EDUZKOTL.js +0 -41
- package/dist/chunk-EDUZKOTL.js.map +0 -1
- package/dist/chunk-GATZOHQ6.js +0 -1
- package/dist/chunk-GATZOHQ6.js.map +0 -1
- package/dist/chunk-IQVKBQ7W.js +0 -19
- package/dist/chunk-IQVKBQ7W.js.map +0 -1
- package/dist/chunk-KY2KCXOO.js.map +0 -1
- package/dist/chunk-PMNBGDEZ.js.map +0 -1
- package/dist/chunk-UMTFPEVF.js +0 -34
- package/dist/chunk-UMTFPEVF.js.map +0 -1
- package/dist/chunk-WIY7KIHU.js.map +0 -1
- package/dist/chunk-X4VXTRJB.js +0 -74
- package/dist/chunk-X4VXTRJB.js.map +0 -1
- package/dist/helpers/slugify.cjs +0 -52
- package/dist/helpers/slugify.cjs.map +0 -1
- package/dist/helpers/slugify.d.cts +0 -5
- package/dist/helpers/slugify.d.ts +0 -5
- package/dist/helpers/slugify.js +0 -7
- package/dist/helpers/slugify.js.map +0 -1
- package/dist/hooks/useFormContext/useFormContext.cjs +0 -127
- package/dist/hooks/useFormContext/useFormContext.cjs.map +0 -1
- package/dist/hooks/useFormContext/useFormContext.d.cts +0 -40
- package/dist/hooks/useFormContext/useFormContext.d.ts +0 -40
- package/dist/hooks/useFormContext/useFormContext.js +0 -11
- package/dist/hooks/useFormContext/useFormContext.js.map +0 -1
- package/dist/partials/FieldCopyTestIdButton/FieldCopyTestIdButton.cjs +0 -64
- package/dist/partials/FieldCopyTestIdButton/FieldCopyTestIdButton.cjs.map +0 -1
- package/dist/partials/FieldCopyTestIdButton/FieldCopyTestIdButton.d.cts +0 -9
- package/dist/partials/FieldCopyTestIdButton/FieldCopyTestIdButton.d.ts +0 -9
- package/dist/partials/FieldCopyTestIdButton/FieldCopyTestIdButton.js +0 -7
- package/dist/partials/FieldCopyTestIdButton/FieldCopyTestIdButton.js.map +0 -1
- package/dist/partials/FieldValidationError/FieldValidationError.cjs +0 -87
- package/dist/partials/FieldValidationError/FieldValidationError.cjs.map +0 -1
- package/dist/partials/FieldValidationError/FieldValidationError.d.cts +0 -13
- package/dist/partials/FieldValidationError/FieldValidationError.d.ts +0 -13
- package/dist/partials/FieldValidationError/FieldValidationError.js +0 -8
- package/dist/partials/FieldValidationError/FieldValidationError.js.map +0 -1
- /package/dist/{Form/Form.js.map → helpers/index.js.map} +0 -0
- /package/dist/{Form/subcomponents/FormContext.js.map → index.js.map} +0 -0
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
|
|
3
|
-
interface FormDebugViewerProps {
|
|
4
|
-
/** CSS class name */
|
|
5
|
-
className?: string;
|
|
6
|
-
}
|
|
7
|
-
/** Renders a form debug panel with information about the current form state */
|
|
8
|
-
declare const FormDebugViewer: ({ className }: FormDebugViewerProps) => react_jsx_runtime.JSX.Element;
|
|
9
|
-
|
|
10
|
-
export { FormDebugViewer as default };
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
|
|
3
|
-
interface FormDebugViewerProps {
|
|
4
|
-
/** CSS class name */
|
|
5
|
-
className?: string;
|
|
6
|
-
}
|
|
7
|
-
/** Renders a form debug panel with information about the current form state */
|
|
8
|
-
declare const FormDebugViewer: ({ className }: FormDebugViewerProps) => react_jsx_runtime.JSX.Element;
|
|
9
|
-
|
|
10
|
-
export { FormDebugViewer as default };
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
FormDebugViewer_default
|
|
3
|
-
} from "../../chunk-AV26PIKH.js";
|
|
4
|
-
import "../../chunk-GATZOHQ6.js";
|
|
5
|
-
import "../../chunk-PMNBGDEZ.js";
|
|
6
|
-
import "../../chunk-IQVKBQ7W.js";
|
|
7
|
-
import "../../chunk-WIY7KIHU.js";
|
|
8
|
-
export {
|
|
9
|
-
FormDebugViewer_default as default
|
|
10
|
-
};
|
|
11
|
-
//# sourceMappingURL=FormDebugViewer.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
package/dist/Grid/Grid.cjs
DELETED
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __create = Object.create;
|
|
3
|
-
var __defProp = Object.defineProperty;
|
|
4
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
-
var __export = (target, all) => {
|
|
9
|
-
for (var name in all)
|
|
10
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
-
};
|
|
12
|
-
var __copyProps = (to, from, except, desc) => {
|
|
13
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
-
for (let key of __getOwnPropNames(from))
|
|
15
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
-
}
|
|
18
|
-
return to;
|
|
19
|
-
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
-
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
-
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
-
mod
|
|
27
|
-
));
|
|
28
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
-
|
|
30
|
-
// src/Grid/Grid.tsx
|
|
31
|
-
var Grid_exports = {};
|
|
32
|
-
__export(Grid_exports, {
|
|
33
|
-
default: () => Grid_default
|
|
34
|
-
});
|
|
35
|
-
module.exports = __toCommonJS(Grid_exports);
|
|
36
|
-
var import_classnames = __toESM(require("classnames"), 1);
|
|
37
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
38
|
-
var Grid = ({
|
|
39
|
-
children = null,
|
|
40
|
-
className = void 0,
|
|
41
|
-
testId = void 0
|
|
42
|
-
}) => {
|
|
43
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_classnames.default)("grid gap-6", className), "data-testid": testId, children });
|
|
44
|
-
};
|
|
45
|
-
var Grid_default = Grid;
|
|
46
|
-
//# sourceMappingURL=Grid.cjs.map
|
package/dist/Grid/Grid.cjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Grid/Grid.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport cn from 'classnames';\n\ninterface 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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,wBAAe;AAoBX;AANJ,IAAM,OAAO,CAAC;AAAA,EACZ,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,SAAS;AACX,MAAiB;AACf,SACE,4CAAC,SAAI,eAAW,kBAAAA,SAAG,cAAc,SAAS,GAAG,eAAa,QACvD,UACH;AAEJ;AAEA,IAAO,eAAQ;","names":["cn"]}
|
package/dist/Grid/Grid.js
DELETED
package/dist/Grid/Grid.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -1,154 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __create = Object.create;
|
|
3
|
-
var __defProp = Object.defineProperty;
|
|
4
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
-
var __export = (target, all) => {
|
|
9
|
-
for (var name in all)
|
|
10
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
-
};
|
|
12
|
-
var __copyProps = (to, from, except, desc) => {
|
|
13
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
-
for (let key of __getOwnPropNames(from))
|
|
15
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
-
}
|
|
18
|
-
return to;
|
|
19
|
-
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
-
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
-
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
-
mod
|
|
27
|
-
));
|
|
28
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
-
|
|
30
|
-
// src/SubmitButton/SubmitButton.tsx
|
|
31
|
-
var SubmitButton_exports = {};
|
|
32
|
-
__export(SubmitButton_exports, {
|
|
33
|
-
default: () => SubmitButton_default
|
|
34
|
-
});
|
|
35
|
-
module.exports = __toCommonJS(SubmitButton_exports);
|
|
36
|
-
var import_classnames = __toESM(require("classnames"), 1);
|
|
37
|
-
var import_Button = __toESM(require("@fuf-stack/pixels/Button"), 1);
|
|
38
|
-
|
|
39
|
-
// src/helpers/slugify.ts
|
|
40
|
-
var import_slug = __toESM(require("slug"), 1);
|
|
41
|
-
var slugify_default = (string, options) => {
|
|
42
|
-
const replacement = options?.replacement || "_";
|
|
43
|
-
return (0, import_slug.default)(string, {
|
|
44
|
-
...import_slug.default.defaults.modes.rfc3986,
|
|
45
|
-
charmap: {
|
|
46
|
-
...import_slug.default.defaults.modes.rfc3986.charmap,
|
|
47
|
-
// allow dots by default
|
|
48
|
-
".": ".",
|
|
49
|
-
// convert hyphens to underscores (when replacement is not hyphen)
|
|
50
|
-
...replacement !== "-" ? { "-": "_" } : {}
|
|
51
|
-
},
|
|
52
|
-
replacement,
|
|
53
|
-
...options || {}
|
|
54
|
-
});
|
|
55
|
-
};
|
|
56
|
-
|
|
57
|
-
// src/hooks/useFormContext/useFormContext.ts
|
|
58
|
-
var import_react2 = require("react");
|
|
59
|
-
var import_react_hook_form2 = require("react-hook-form");
|
|
60
|
-
|
|
61
|
-
// src/Form/subcomponents/FormContext.tsx
|
|
62
|
-
var import_react = __toESM(require("react"), 1);
|
|
63
|
-
var import_react_hook_form = require("react-hook-form");
|
|
64
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
65
|
-
var ValidationSchemaContext = import_react.default.createContext(void 0);
|
|
66
|
-
|
|
67
|
-
// src/hooks/useFormContext/useFormContext.ts
|
|
68
|
-
var recursiveSearchInnerType = (schema) => {
|
|
69
|
-
if (schema?._def?.innerType) {
|
|
70
|
-
if (schema?._def?.innerType?._def?.typeName === "ZodOptional") {
|
|
71
|
-
return schema?._def?.innerType?._def?.typeName !== "ZodOptional";
|
|
72
|
-
}
|
|
73
|
-
return recursiveSearchInnerType(schema?._def?.innerType);
|
|
74
|
-
}
|
|
75
|
-
return true;
|
|
76
|
-
};
|
|
77
|
-
var recursiveFieldKeySearch = (schema, path) => {
|
|
78
|
-
const [current, ...rest] = path;
|
|
79
|
-
let currentSchema = schema;
|
|
80
|
-
if (schema?._def?.typeName === "ZodOptional") {
|
|
81
|
-
currentSchema = schema.unwrap();
|
|
82
|
-
} else if (schema?._def?.typeName === "ZodEffects") {
|
|
83
|
-
return recursiveFieldKeySearch(schema._def?.schema, path);
|
|
84
|
-
}
|
|
85
|
-
if (currentSchema?._def?.typeName === "ZodIntersection") {
|
|
86
|
-
return (currentSchema._def.left?.schema ? recursiveFieldKeySearch(currentSchema._def.left.schema, path) : recursiveFieldKeySearch(currentSchema._def.left, path)) || (currentSchema._def.right?.schema ? recursiveFieldKeySearch(currentSchema._def.right.schema, path) : recursiveFieldKeySearch(currentSchema._def.right, path));
|
|
87
|
-
}
|
|
88
|
-
const shape = currentSchema?.shape ?? currentSchema?.element?.shape;
|
|
89
|
-
if (shape && shape[current]) {
|
|
90
|
-
if (rest.length === 0) {
|
|
91
|
-
return shape[current]?._def?.typeName !== "ZodOptional" && recursiveSearchInnerType(shape[current]);
|
|
92
|
-
}
|
|
93
|
-
return recursiveFieldKeySearch(shape[current], rest);
|
|
94
|
-
}
|
|
95
|
-
return null;
|
|
96
|
-
};
|
|
97
|
-
var useFormContext = () => {
|
|
98
|
-
const {
|
|
99
|
-
// https://react-hook-form.com/docs/useform/getfieldstate
|
|
100
|
-
// for getFieldState a subscription to formState properties is needed!
|
|
101
|
-
formState,
|
|
102
|
-
getFieldState: getFieldStateOrig,
|
|
103
|
-
...otherMethods
|
|
104
|
-
} = (0, import_react_hook_form2.useFormContext)();
|
|
105
|
-
const validation = (0, import_react2.useContext)(ValidationSchemaContext);
|
|
106
|
-
const getFieldState = (name, testId) => {
|
|
107
|
-
const fieldPath = typeof name === "string" ? name.replace(/\[\d+\]/g, "").split(".") : name;
|
|
108
|
-
const required = validation && recursiveFieldKeySearch(validation.schema, fieldPath) || false;
|
|
109
|
-
const { error, ...rest } = getFieldStateOrig(name, formState);
|
|
110
|
-
return {
|
|
111
|
-
...rest,
|
|
112
|
-
error,
|
|
113
|
-
// TODO: change to correct type @Hannes ;)
|
|
114
|
-
required,
|
|
115
|
-
testId: slugify_default(testId || name)
|
|
116
|
-
};
|
|
117
|
-
};
|
|
118
|
-
return {
|
|
119
|
-
...otherMethods,
|
|
120
|
-
getFieldState,
|
|
121
|
-
validation,
|
|
122
|
-
formState
|
|
123
|
-
};
|
|
124
|
-
};
|
|
125
|
-
|
|
126
|
-
// src/SubmitButton/SubmitButton.tsx
|
|
127
|
-
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
128
|
-
var SubmitButton = ({
|
|
129
|
-
children = "Submit",
|
|
130
|
-
className = void 0,
|
|
131
|
-
color = "success",
|
|
132
|
-
loading = false,
|
|
133
|
-
onClick = void 0,
|
|
134
|
-
testId = "form_submit_button"
|
|
135
|
-
}) => {
|
|
136
|
-
const {
|
|
137
|
-
formState: { isValid, isSubmitting, isValidating }
|
|
138
|
-
} = useFormContext();
|
|
139
|
-
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
140
|
-
import_Button.default,
|
|
141
|
-
{
|
|
142
|
-
className: (0, import_classnames.default)(className),
|
|
143
|
-
color,
|
|
144
|
-
testId: slugify_default(testId),
|
|
145
|
-
disabled: !isValid || isSubmitting || isValidating,
|
|
146
|
-
loading,
|
|
147
|
-
onClick,
|
|
148
|
-
type: "submit",
|
|
149
|
-
children
|
|
150
|
-
}
|
|
151
|
-
);
|
|
152
|
-
};
|
|
153
|
-
var SubmitButton_default = SubmitButton;
|
|
154
|
-
//# sourceMappingURL=SubmitButton.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/SubmitButton/SubmitButton.tsx","../../src/helpers/slugify.ts","../../src/hooks/useFormContext/useFormContext.ts","../../src/Form/subcomponents/FormContext.tsx"],"sourcesContent":["import type { ButtonProps } from '@fuf-stack/pixels/Button';\nimport type { ReactNode } from 'react';\n\nimport cn from 'classnames';\n\nimport Button from '@fuf-stack/pixels/Button';\n\nimport slugify from '../helpers/slugify';\nimport { useFormContext } from '../hooks';\n\ninterface SubmitButtonProps {\n /** child components */\n children?: ReactNode;\n /** CSS class name */\n className?: string | 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 /** 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 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 type=\"submit\"\n >\n {children}\n </Button>\n );\n};\n\nexport default SubmitButton;\n","import type { Options as SlugOptions } from 'slug';\n\nimport slug from 'slug';\n\nexport default (string: string, options?: SlugOptions) => {\n const replacement = options?.replacement || '_';\n return slug(string, {\n ...slug.defaults.modes.rfc3986,\n charmap: {\n ...slug.defaults.modes.rfc3986.charmap,\n // allow dots by default\n '.': '.',\n // convert hyphens to underscores (when replacement is not hyphen)\n ...(replacement !== '-' ? { '-': '_' } : {}),\n },\n replacement,\n ...(options || {}),\n });\n};\n","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/slugify';\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAAe;AAEf,oBAAmB;;;ACHnB,kBAAiB;AAEjB,IAAO,kBAAQ,CAAC,QAAgB,YAA0B;AACxD,QAAM,cAAc,SAAS,eAAe;AAC5C,aAAO,YAAAA,SAAK,QAAQ;AAAA,IAClB,GAAG,YAAAA,QAAK,SAAS,MAAM;AAAA,IACvB,SAAS;AAAA,MACP,GAAG,YAAAA,QAAK,SAAS,MAAM,QAAQ;AAAA;AAAA,MAE/B,KAAK;AAAA;AAAA,MAEL,GAAI,gBAAgB,MAAM,EAAE,KAAK,IAAI,IAAI,CAAC;AAAA,IAC5C;AAAA,IACA;AAAA,IACA,GAAI,WAAW,CAAC;AAAA,EAClB,CAAC;AACH;;;ACfA,IAAAC,gBAA2B;AAC3B,IAAAC,0BAAqD;;;ACDrD,mBAAkB;AAClB,6BAAiD;AAoB3C;AAlBC,IAAM,0BAA0B,aAAAC,QAAM,cAE3C,MAAS;;;ADEX,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,QAAI,wBAAAC,gBAAmB;AACvB,QAAM,iBAAa,0BAAW,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,gBAAQ,UAAU,IAAI;AAAA,IAChC;AAAA,EACF;AAEA,SAAO;AAAA,IACL,GAAG;AAAA,IACH;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;;;AF7DI,IAAAC,sBAAA;AAbJ,IAAM,eAAe,CAAC;AAAA,EACpB,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS;AACX,MAAyB;AACvB,QAAM;AAAA,IACJ,WAAW,EAAE,SAAS,cAAc,aAAa;AAAA,EACnD,IAAI,eAAe;AAEnB,SACE;AAAA,IAAC,cAAAC;AAAA,IAAA;AAAA,MACC,eAAW,kBAAAC,SAAG,SAAS;AAAA,MACvB;AAAA,MACA,QAAQ,gBAAQ,MAAM;AAAA,MACtB,UAAU,CAAC,WAAW,gBAAgB;AAAA,MACtC;AAAA,MACA;AAAA,MACA,MAAK;AAAA,MAEJ;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,uBAAQ;","names":["slug","import_react","import_react_hook_form","React","useHookFormContext","import_jsx_runtime","Button","cn"]}
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import { ButtonProps } from '@fuf-stack/pixels/Button';
|
|
3
|
-
import { ReactNode } from 'react';
|
|
4
|
-
|
|
5
|
-
interface SubmitButtonProps {
|
|
6
|
-
/** child components */
|
|
7
|
-
children?: ReactNode;
|
|
8
|
-
/** CSS class name */
|
|
9
|
-
className?: string | string[];
|
|
10
|
-
/** color of the button */
|
|
11
|
-
color?: ButtonProps['color'];
|
|
12
|
-
/** If set loading animation is shown */
|
|
13
|
-
loading?: boolean;
|
|
14
|
-
/** function called when the button is pressed. */
|
|
15
|
-
onClick?: ButtonProps['onClick'];
|
|
16
|
-
/** HTML data-testid attribute used in e2e tests */
|
|
17
|
-
testId?: string;
|
|
18
|
-
}
|
|
19
|
-
/**
|
|
20
|
-
* From SubmitButton
|
|
21
|
-
*/
|
|
22
|
-
declare const SubmitButton: ({ children, className, color, loading, onClick, testId, }: SubmitButtonProps) => react_jsx_runtime.JSX.Element;
|
|
23
|
-
|
|
24
|
-
export { SubmitButton as default };
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import { ButtonProps } from '@fuf-stack/pixels/Button';
|
|
3
|
-
import { ReactNode } from 'react';
|
|
4
|
-
|
|
5
|
-
interface SubmitButtonProps {
|
|
6
|
-
/** child components */
|
|
7
|
-
children?: ReactNode;
|
|
8
|
-
/** CSS class name */
|
|
9
|
-
className?: string | string[];
|
|
10
|
-
/** color of the button */
|
|
11
|
-
color?: ButtonProps['color'];
|
|
12
|
-
/** If set loading animation is shown */
|
|
13
|
-
loading?: boolean;
|
|
14
|
-
/** function called when the button is pressed. */
|
|
15
|
-
onClick?: ButtonProps['onClick'];
|
|
16
|
-
/** HTML data-testid attribute used in e2e tests */
|
|
17
|
-
testId?: string;
|
|
18
|
-
}
|
|
19
|
-
/**
|
|
20
|
-
* From SubmitButton
|
|
21
|
-
*/
|
|
22
|
-
declare const SubmitButton: ({ children, className, color, loading, onClick, testId, }: SubmitButtonProps) => react_jsx_runtime.JSX.Element;
|
|
23
|
-
|
|
24
|
-
export { SubmitButton as default };
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
SubmitButton_default
|
|
3
|
-
} from "../chunk-BJ36HK7L.js";
|
|
4
|
-
import "../chunk-GATZOHQ6.js";
|
|
5
|
-
import "../chunk-PMNBGDEZ.js";
|
|
6
|
-
import "../chunk-IQVKBQ7W.js";
|
|
7
|
-
import "../chunk-WIY7KIHU.js";
|
|
8
|
-
export {
|
|
9
|
-
SubmitButton_default as default
|
|
10
|
-
};
|
|
11
|
-
//# sourceMappingURL=SubmitButton.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Form/subcomponents/FormDebugViewer.tsx"],"sourcesContent":["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 from '@fuf-stack/pixels/Button';\nimport Card from '@fuf-stack/pixels/Card';\nimport useLocalStorage from '@fuf-stack/pixels/hooks/useLocalStorage';\nimport Json from '@fuf-stack/pixels/Json';\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 const updateValidationErrors = async () => {\n if (validation) {\n const validateResult = await validation?.validateAsync(formValues);\n setValidationErrors(validateResult?.errors);\n }\n };\n updateValidationErrors();\n }, [JSON.stringify(formValues)]);\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"],"mappings":";;;;;AAEA,SAAS,WAAW,gBAAgB;AACpC,SAAS,eAAe;AACxB,SAAS,aAAa;AAEtB,OAAO,QAAQ;AAEf,OAAO,YAAY;AACnB,OAAO,UAAU;AACjB,OAAO,qBAAqB;AAC5B,OAAO,UAAU;AA4CH,cASN,YATM;AAnCd,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,YAAU,MAAM;AACd,UAAM,yBAAyB,YAAY;AACzC,UAAI,YAAY;AACd,cAAM,iBAAiB,MAAM,YAAY,cAAc,UAAU;AACjE,4BAAoB,gBAAgB,MAAM;AAAA,MAC5C;AAAA,IACF;AACA,2BAAuB;AAAA,EACzB,GAAG,CAAC,KAAK,UAAU,UAAU,CAAC,CAAC;AAE/B,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;","names":[]}
|
package/dist/chunk-BJ36HK7L.js
DELETED
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
useFormContext
|
|
3
|
-
} from "./chunk-PMNBGDEZ.js";
|
|
4
|
-
import {
|
|
5
|
-
slugify_default
|
|
6
|
-
} from "./chunk-WIY7KIHU.js";
|
|
7
|
-
|
|
8
|
-
// src/SubmitButton/SubmitButton.tsx
|
|
9
|
-
import cn from "classnames";
|
|
10
|
-
import Button from "@fuf-stack/pixels/Button";
|
|
11
|
-
import { jsx } from "react/jsx-runtime";
|
|
12
|
-
var SubmitButton = ({
|
|
13
|
-
children = "Submit",
|
|
14
|
-
className = void 0,
|
|
15
|
-
color = "success",
|
|
16
|
-
loading = false,
|
|
17
|
-
onClick = void 0,
|
|
18
|
-
testId = "form_submit_button"
|
|
19
|
-
}) => {
|
|
20
|
-
const {
|
|
21
|
-
formState: { isValid, isSubmitting, isValidating }
|
|
22
|
-
} = useFormContext();
|
|
23
|
-
return /* @__PURE__ */ jsx(
|
|
24
|
-
Button,
|
|
25
|
-
{
|
|
26
|
-
className: cn(className),
|
|
27
|
-
color,
|
|
28
|
-
testId: slugify_default(testId),
|
|
29
|
-
disabled: !isValid || isSubmitting || isValidating,
|
|
30
|
-
loading,
|
|
31
|
-
onClick,
|
|
32
|
-
type: "submit",
|
|
33
|
-
children
|
|
34
|
-
}
|
|
35
|
-
);
|
|
36
|
-
};
|
|
37
|
-
var SubmitButton_default = SubmitButton;
|
|
38
|
-
|
|
39
|
-
export {
|
|
40
|
-
SubmitButton_default
|
|
41
|
-
};
|
|
42
|
-
//# sourceMappingURL=chunk-BJ36HK7L.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/SubmitButton/SubmitButton.tsx"],"sourcesContent":["import type { ButtonProps } from '@fuf-stack/pixels/Button';\nimport type { ReactNode } from 'react';\n\nimport cn from 'classnames';\n\nimport Button from '@fuf-stack/pixels/Button';\n\nimport slugify from '../helpers/slugify';\nimport { useFormContext } from '../hooks';\n\ninterface SubmitButtonProps {\n /** child components */\n children?: ReactNode;\n /** CSS class name */\n className?: string | 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 /** 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 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 type=\"submit\"\n >\n {children}\n </Button>\n );\n};\n\nexport default SubmitButton;\n"],"mappings":";;;;;;;;AAGA,OAAO,QAAQ;AAEf,OAAO,YAAY;AAoCf;AAbJ,IAAM,eAAe,CAAC;AAAA,EACpB,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,UAAU;AAAA,EACV,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,gBAAQ,MAAM;AAAA,MACtB,UAAU,CAAC,WAAW,gBAAgB;AAAA,MACtC;AAAA,MACA;AAAA,MACA,MAAK;AAAA,MAEJ;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,uBAAQ;","names":[]}
|
package/dist/chunk-EDUZKOTL.js
DELETED
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
slugify_default
|
|
3
|
-
} from "./chunk-WIY7KIHU.js";
|
|
4
|
-
|
|
5
|
-
// src/partials/FieldValidationError/FieldValidationError.tsx
|
|
6
|
-
import { jsx } from "react/jsx-runtime";
|
|
7
|
-
var FieldValidationError = ({
|
|
8
|
-
error,
|
|
9
|
-
testId = void 0
|
|
10
|
-
}) => {
|
|
11
|
-
if (!error) {
|
|
12
|
-
return null;
|
|
13
|
-
}
|
|
14
|
-
let tmp_errors = [];
|
|
15
|
-
if (typeof error === "object" && !(error instanceof Array)) {
|
|
16
|
-
const error_object = error;
|
|
17
|
-
Object.keys(error).forEach((key) => {
|
|
18
|
-
tmp_errors = [...tmp_errors, ...error_object[key]];
|
|
19
|
-
});
|
|
20
|
-
}
|
|
21
|
-
const errorArray = JSON.stringify(tmp_errors) !== "[]" ? tmp_errors : error;
|
|
22
|
-
const errorStrings = errorArray.map((e) => e.message);
|
|
23
|
-
const ariaString = `Error: ${errorStrings.join("\n")}`;
|
|
24
|
-
return /* @__PURE__ */ jsx(
|
|
25
|
-
"ul",
|
|
26
|
-
{
|
|
27
|
-
"data-testid": slugify_default(testId || errorStrings.join()),
|
|
28
|
-
"aria-label": ariaString,
|
|
29
|
-
children: errorStrings.map((errorString, i) => (
|
|
30
|
-
// eslint-disable-next-line react/no-array-index-key
|
|
31
|
-
/* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("div", { children: errorString }) }, `error_${i}`)
|
|
32
|
-
))
|
|
33
|
-
}
|
|
34
|
-
);
|
|
35
|
-
};
|
|
36
|
-
var FieldValidationError_default = FieldValidationError;
|
|
37
|
-
|
|
38
|
-
export {
|
|
39
|
-
FieldValidationError_default
|
|
40
|
-
};
|
|
41
|
-
//# sourceMappingURL=chunk-EDUZKOTL.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/partials/FieldValidationError/FieldValidationError.tsx"],"sourcesContent":["import type { FieldError } from 'react-hook-form';\n\nimport slugify from '../../helpers/slugify';\n\ninterface 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"],"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,gBAAQ,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;","names":[]}
|
package/dist/chunk-GATZOHQ6.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
//# sourceMappingURL=chunk-GATZOHQ6.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
package/dist/chunk-IQVKBQ7W.js
DELETED
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
// src/Form/subcomponents/FormContext.tsx
|
|
2
|
-
import React from "react";
|
|
3
|
-
import { FormProvider as HookFormProvider } from "react-hook-form";
|
|
4
|
-
import { jsx } from "react/jsx-runtime";
|
|
5
|
-
var ValidationSchemaContext = React.createContext(void 0);
|
|
6
|
-
var FormProvider = ({
|
|
7
|
-
children,
|
|
8
|
-
validation = void 0,
|
|
9
|
-
...hookFormProps
|
|
10
|
-
}) => {
|
|
11
|
-
return /* @__PURE__ */ jsx(ValidationSchemaContext.Provider, { value: validation, children: /* @__PURE__ */ jsx(HookFormProvider, { ...hookFormProps, children }) });
|
|
12
|
-
};
|
|
13
|
-
var FormContext_default = FormProvider;
|
|
14
|
-
|
|
15
|
-
export {
|
|
16
|
-
ValidationSchemaContext,
|
|
17
|
-
FormContext_default
|
|
18
|
-
};
|
|
19
|
-
//# sourceMappingURL=chunk-IQVKBQ7W.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Form/subcomponents/FormContext.tsx"],"sourcesContent":["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,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;","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Grid/Grid.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport cn from 'classnames';\n\ninterface 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"],"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;","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useFormContext/useFormContext.ts"],"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/slugify';\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"],"mappings":";;;;;;;;AAGA,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB,0BAA0B;AAMrD,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,gBAAQ,UAAU,IAAI;AAAA,IAChC;AAAA,EACF;AAEA,SAAO;AAAA,IACL,GAAG;AAAA,IACH;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":[]}
|
package/dist/chunk-UMTFPEVF.js
DELETED
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
// src/partials/FieldCopyTestIdButton/FieldCopyTestIdButton.tsx
|
|
2
|
-
import { FaBullseye } from "react-icons/fa6";
|
|
3
|
-
import cn from "classnames";
|
|
4
|
-
import Button from "@fuf-stack/pixels/Button";
|
|
5
|
-
import useLocalStorage from "@fuf-stack/pixels/hooks/useLocalStorage";
|
|
6
|
-
import { jsx } from "react/jsx-runtime";
|
|
7
|
-
var LOCALSTORAGE_DEBUG_KEY = "uniform:form-debug-enabled";
|
|
8
|
-
var TestIdDebug = ({ className = void 0, testId }) => {
|
|
9
|
-
const [debug] = useLocalStorage(LOCALSTORAGE_DEBUG_KEY, false);
|
|
10
|
-
const copyToClipboard = () => {
|
|
11
|
-
navigator.clipboard.writeText(testId).catch((err) => {
|
|
12
|
-
console.error("Error copying TestId to clipboard", err);
|
|
13
|
-
});
|
|
14
|
-
};
|
|
15
|
-
if (!debug) {
|
|
16
|
-
return null;
|
|
17
|
-
}
|
|
18
|
-
return /* @__PURE__ */ jsx(
|
|
19
|
-
Button,
|
|
20
|
-
{
|
|
21
|
-
className: cn(className, "pointer-events-auto"),
|
|
22
|
-
variant: "light",
|
|
23
|
-
onClick: copyToClipboard,
|
|
24
|
-
icon: /* @__PURE__ */ jsx(FaBullseye, {}),
|
|
25
|
-
size: "sm"
|
|
26
|
-
}
|
|
27
|
-
);
|
|
28
|
-
};
|
|
29
|
-
var FieldCopyTestIdButton_default = TestIdDebug;
|
|
30
|
-
|
|
31
|
-
export {
|
|
32
|
-
FieldCopyTestIdButton_default
|
|
33
|
-
};
|
|
34
|
-
//# sourceMappingURL=chunk-UMTFPEVF.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/partials/FieldCopyTestIdButton/FieldCopyTestIdButton.tsx"],"sourcesContent":["import { FaBullseye } from 'react-icons/fa6';\n\nimport cn from 'classnames';\n\nimport Button from '@fuf-stack/pixels/Button';\nimport useLocalStorage from '@fuf-stack/pixels/hooks/useLocalStorage';\n\ninterface FormDebugProps {\n className?: string;\n testId: string;\n}\n\nconst LOCALSTORAGE_DEBUG_KEY = 'uniform:form-debug-enabled';\n\nconst TestIdDebug = ({ className = undefined, testId }: FormDebugProps) => {\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 TestIdDebug;\n"],"mappings":";AAAA,SAAS,kBAAkB;AAE3B,OAAO,QAAQ;AAEf,OAAO,YAAY;AACnB,OAAO,qBAAqB;AA2BhB;AApBZ,IAAM,yBAAyB;AAE/B,IAAM,cAAc,CAAC,EAAE,YAAY,QAAW,OAAO,MAAsB;AACzE,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;","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/helpers/slugify.ts"],"sourcesContent":["import type { Options as SlugOptions } from 'slug';\n\nimport slug from 'slug';\n\nexport default (string: string, options?: SlugOptions) => {\n const replacement = options?.replacement || '_';\n return slug(string, {\n ...slug.defaults.modes.rfc3986,\n charmap: {\n ...slug.defaults.modes.rfc3986.charmap,\n // allow dots by default\n '.': '.',\n // convert hyphens to underscores (when replacement is not hyphen)\n ...(replacement !== '-' ? { '-': '_' } : {}),\n },\n replacement,\n ...(options || {}),\n });\n};\n"],"mappings":";AAEA,OAAO,UAAU;AAEjB,IAAO,kBAAQ,CAAC,QAAgB,YAA0B;AACxD,QAAM,cAAc,SAAS,eAAe;AAC5C,SAAO,KAAK,QAAQ;AAAA,IAClB,GAAG,KAAK,SAAS,MAAM;AAAA,IACvB,SAAS;AAAA,MACP,GAAG,KAAK,SAAS,MAAM,QAAQ;AAAA;AAAA,MAE/B,KAAK;AAAA;AAAA,MAEL,GAAI,gBAAgB,MAAM,EAAE,KAAK,IAAI,IAAI,CAAC;AAAA,IAC5C;AAAA,IACA;AAAA,IACA,GAAI,WAAW,CAAC;AAAA,EAClB,CAAC;AACH;","names":[]}
|
package/dist/chunk-X4VXTRJB.js
DELETED
|
@@ -1,74 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
FormDebugViewer_default
|
|
3
|
-
} from "./chunk-AV26PIKH.js";
|
|
4
|
-
import {
|
|
5
|
-
FormContext_default
|
|
6
|
-
} from "./chunk-IQVKBQ7W.js";
|
|
7
|
-
import {
|
|
8
|
-
slugify_default
|
|
9
|
-
} from "./chunk-WIY7KIHU.js";
|
|
10
|
-
|
|
11
|
-
// src/Form/Form.tsx
|
|
12
|
-
import { useEffect } from "react";
|
|
13
|
-
import { useForm } from "react-hook-form";
|
|
14
|
-
import cn from "classnames";
|
|
15
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
16
|
-
var removeNullishFields = (obj) => {
|
|
17
|
-
return JSON.parse(
|
|
18
|
-
JSON.stringify(obj, (_key, value) => {
|
|
19
|
-
return value === null ? void 0 : value;
|
|
20
|
-
})
|
|
21
|
-
);
|
|
22
|
-
};
|
|
23
|
-
var Form = ({
|
|
24
|
-
children,
|
|
25
|
-
className = void 0,
|
|
26
|
-
initialValues = void 0,
|
|
27
|
-
name = void 0,
|
|
28
|
-
onSubmit,
|
|
29
|
-
testId = void 0,
|
|
30
|
-
validation = void 0,
|
|
31
|
-
validationTrigger = "all"
|
|
32
|
-
}) => {
|
|
33
|
-
const methods = useForm(
|
|
34
|
-
validation ? {
|
|
35
|
-
defaultValues: initialValues,
|
|
36
|
-
resolver: async (values) => {
|
|
37
|
-
const { data, errors, ...rest } = await validation.validateAsync(
|
|
38
|
-
removeNullishFields(values)
|
|
39
|
-
);
|
|
40
|
-
return { values: data || {}, errors: errors || {}, ...rest };
|
|
41
|
-
},
|
|
42
|
-
// set rhf mode
|
|
43
|
-
// see: https://react-hook-form.com/docs/useform#mode
|
|
44
|
-
mode: validationTrigger === "all-instant" ? "all" : validationTrigger
|
|
45
|
-
} : {
|
|
46
|
-
defaultValues: initialValues
|
|
47
|
-
}
|
|
48
|
-
);
|
|
49
|
-
useEffect(() => {
|
|
50
|
-
if (validationTrigger === "all-instant") {
|
|
51
|
-
methods.trigger();
|
|
52
|
-
}
|
|
53
|
-
}, []);
|
|
54
|
-
return /* @__PURE__ */ jsx(FormContext_default, { ...methods, validation, children: /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-row justify-between gap-6", children: [
|
|
55
|
-
/* @__PURE__ */ jsx(
|
|
56
|
-
"form",
|
|
57
|
-
{
|
|
58
|
-
className: cn("flex-grow", className),
|
|
59
|
-
"data-testid": slugify_default(testId || name || ""),
|
|
60
|
-
name,
|
|
61
|
-
onSubmit: methods.handleSubmit(onSubmit),
|
|
62
|
-
children
|
|
63
|
-
}
|
|
64
|
-
),
|
|
65
|
-
/* @__PURE__ */ jsx(FormDebugViewer_default, { className: "w-96 flex-shrink" })
|
|
66
|
-
] }) });
|
|
67
|
-
};
|
|
68
|
-
var Form_default = Form;
|
|
69
|
-
|
|
70
|
-
export {
|
|
71
|
-
removeNullishFields,
|
|
72
|
-
Form_default
|
|
73
|
-
};
|
|
74
|
-
//# sourceMappingURL=chunk-X4VXTRJB.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Form/Form.tsx"],"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/slugify';\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\ninterface 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 if (validationTrigger === 'all-instant') {\n methods.trigger();\n }\n }, []);\n\n return (\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"],"mappings":";;;;;;;;;;;AAIA,SAAS,iBAAiB;AAC1B,SAAS,eAAe;AAExB,OAAO,QAAQ;AAoFT,SACE,KADF;AA1EC,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,YAAU,MAAM;AACd,QAAI,sBAAsB,eAAe;AACvC,cAAQ,QAAQ;AAAA,IAClB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SACE,oBAAC,uBAAc,GAAG,SAAS,YACzB,+BAAC,SAAI,WAAU,8CACb;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,GAAG,aAAa,SAAS;AAAA,QACpC,eAAa,gBAAQ,UAAU,QAAQ,EAAE;AAAA,QACzC;AAAA,QACA,UAAU,QAAQ,aAAa,QAAQ;AAAA,QAEtC;AAAA;AAAA,IACH;AAAA,IACA,oBAAC,2BAAgB,WAAU,oBAAmB;AAAA,KAChD,GACF;AAEJ;AAEA,IAAO,eAAQ;","names":[]}
|