@fuf-stack/uniform 0.0.2 → 0.0.3

package/dist/Form/index.cjs

@@ -1,198 +1,75 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 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; }
 
-// src/Form/index.ts
-var Form_exports = {};
-__export(Form_exports, {
-  default: () => Form_default2
-});
-module.exports = __toCommonJS(Form_exports);
 
-// src/Form/Form.tsx
-var import_react4 = require("react");
-var import_react_hook_form3 = require("react-hook-form");
-var import_classnames2 = __toESM(require("classnames"), 1);
+var _chunkWQRM7G4Ccjs = require('../chunk-WQRM7G4C.cjs');
 
-// src/helpers/slugify.ts
-var import_slug = __toESM(require("slug"), 1);
-var slugify_default = (string, options) => {
-  const replacement = options?.replacement || "_";
-  return (0, import_slug.default)(string, {
-    ...import_slug.default.defaults.modes.rfc3986,
-    charmap: {
-      ...import_slug.default.defaults.modes.rfc3986.charmap,
-      // allow dots by default
-      ".": ".",
-      // convert hyphens to underscores (when replacement is not hyphen)
-      ...replacement !== "-" ? { "-": "_" } : {}
-    },
-    replacement,
-    ...options || {}
-  });
-};
 
-// src/Form/subcomponents/FormContext.tsx
-var import_react = __toESM(require("react"), 1);
-var import_react_hook_form = require("react-hook-form");
-var import_jsx_runtime = require("react/jsx-runtime");
-var ValidationSchemaContext = import_react.default.createContext(void 0);
-var FormProvider = ({
-  children,
-  validation = void 0,
-  ...hookFormProps
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ValidationSchemaContext.Provider, { value: validation, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_hook_form.FormProvider, { ...hookFormProps, children }) });
-};
-var FormContext_default = FormProvider;
+var _chunkBBB4FEY6cjs = require('../chunk-BBB4FEY6.cjs');
+
+// src/Form/Form.tsx
+var _react = require('react');
+var _reacthookform = require('react-hook-form');
+var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
 
 // src/Form/subcomponents/FormDebugViewer.tsx
-var import_react3 = require("react");
-var import_fa = require("react-icons/fa");
-var import_fa6 = require("react-icons/fa6");
-var import_classnames = __toESM(require("classnames"), 1);
-var import_Button = __toESM(require("@fuf-stack/pixels/Button"), 1);
-var import_Card = __toESM(require("@fuf-stack/pixels/Card"), 1);
-var import_useLocalStorage = __toESM(require("@fuf-stack/pixels/hooks/useLocalStorage"), 1);
-var import_Json = __toESM(require("@fuf-stack/pixels/Json"), 1);
 
-// src/hooks/useFormContext/useFormContext.ts
-var import_react2 = require("react");
-var import_react_hook_form2 = require("react-hook-form");
-var recursiveSearchInnerType = (schema) => {
-  if (schema?._def?.innerType) {
-    if (schema?._def?.innerType?._def?.typeName === "ZodOptional") {
-      return schema?._def?.innerType?._def?.typeName !== "ZodOptional";
-    }
-    return recursiveSearchInnerType(schema?._def?.innerType);
-  }
-  return true;
-};
-var recursiveFieldKeySearch = (schema, path) => {
-  const [current, ...rest] = path;
-  let currentSchema = schema;
-  if (schema?._def?.typeName === "ZodOptional") {
-    currentSchema = schema.unwrap();
-  } else if (schema?._def?.typeName === "ZodEffects") {
-    return recursiveFieldKeySearch(schema._def?.schema, path);
-  }
-  if (currentSchema?._def?.typeName === "ZodIntersection") {
-    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));
-  }
-  const shape = currentSchema?.shape ?? currentSchema?.element?.shape;
-  if (shape && shape[current]) {
-    if (rest.length === 0) {
-      return shape[current]?._def?.typeName !== "ZodOptional" && recursiveSearchInnerType(shape[current]);
-    }
-    return recursiveFieldKeySearch(shape[current], rest);
-  }
-  return null;
-};
-var useFormContext = () => {
-  const {
-    // https://react-hook-form.com/docs/useform/getfieldstate
-    // for getFieldState a subscription to formState properties is needed!
-    formState,
-    getFieldState: getFieldStateOrig,
-    ...otherMethods
-  } = (0, import_react_hook_form2.useFormContext)();
-  const validation = (0, import_react2.useContext)(ValidationSchemaContext);
-  const getFieldState = (name, testId) => {
-    const fieldPath = typeof name === "string" ? name.replace(/\[\d+\]/g, "").split(".") : name;
-    const required = validation && recursiveFieldKeySearch(validation.schema, fieldPath) || false;
-    const { error, ...rest } = getFieldStateOrig(name, formState);
-    return {
-      ...rest,
-      error,
-      // TODO: change to correct type @Hannes ;)
-      required,
-      testId: slugify_default(testId || name)
-    };
-  };
-  return {
-    ...otherMethods,
-    getFieldState,
-    validation,
-    formState
-  };
-};
+var _fa = require('react-icons/fa');
+var _fa6 = require('react-icons/fa6');
 
-// src/Form/subcomponents/FormDebugViewer.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var _Button = require('@fuf-stack/pixels/Button'); var _Button2 = _interopRequireDefault(_Button);
+var _Card = require('@fuf-stack/pixels/Card'); var _Card2 = _interopRequireDefault(_Card);
+var _useLocalStorage = require('@fuf-stack/pixels/hooks/useLocalStorage'); var _useLocalStorage2 = _interopRequireDefault(_useLocalStorage);
+var _Json = require('@fuf-stack/pixels/Json'); var _Json2 = _interopRequireDefault(_Json);
+var _jsxruntime = require('react/jsx-runtime');
 var LOCALSTORAGE_DEBUG_KEY = "uniform:form-debug-enabled";
 var FormDebugViewer = ({ className = void 0 }) => {
   const {
     watch,
     formState: { dirtyFields, isValid, isSubmitting },
     validation
-  } = useFormContext();
-  const [debug, setDebug] = (0, import_useLocalStorage.default)(LOCALSTORAGE_DEBUG_KEY, false);
-  const [validationErrors, setValidationErrors] = (0, import_react3.useState)(null);
+  } = _chunkWQRM7G4Ccjs.useFormContext.call(void 0, );
+  const [debug, setDebug] = _useLocalStorage2.default.call(void 0, LOCALSTORAGE_DEBUG_KEY, false);
+  const [validationErrors, setValidationErrors] = _react.useState.call(void 0, null);
   const formValues = watch();
-  (0, import_react3.useEffect)(() => {
+  _react.useEffect.call(void 0, () => {
     const updateValidationErrors = async () => {
       if (validation) {
-        const validateResult = await validation?.validateAsync(formValues);
-        setValidationErrors(validateResult?.errors);
+        const validateResult = await _optionalChain([validation, 'optionalAccess', _ => _.validateAsync, 'call', _2 => _2(formValues)]);
+        setValidationErrors(_optionalChain([validateResult, 'optionalAccess', _3 => _3.errors]));
       }
     };
     updateValidationErrors();
   }, [JSON.stringify(formValues)]);
   if (!debug) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      import_Button.default,
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _Button2.default,
       {
         ariaLabel: "Enable form debug mode",
         onClick: () => setDebug(!debug),
         className: "absolute bottom-2.5 right-2.5 w-5 text-default-400",
         variant: "light",
-        icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_fa6.FaBug, {})
+        icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _fa6.FaBug, {})
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    import_Card.default,
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _Card2.default,
     {
-      className: (0, import_classnames.default)(className),
-      header: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex w-full flex-row justify-between", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-lg", children: "Debug Mode" }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          import_Button.default,
+      className: _classnames2.default.call(void 0, className),
+      header: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex w-full flex-row justify-between", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-lg", children: "Debug Mode" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _Button2.default,
           {
-            icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_fa.FaTimes, { className: "text-danger" }),
+            icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _fa.FaTimes, { className: "text-danger" }),
             onClick: () => setDebug(false),
             size: "sm",
             variant: "flat"
           }
         )
       ] }),
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        import_Json.default,
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _Json2.default,
         {
           value: {
             values: formValues,
@@ -209,7 +86,7 @@ var FormDebugViewer = ({ className = void 0 }) => {
 var FormDebugViewer_default = FormDebugViewer;
 
 // src/Form/Form.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+
 var removeNullishFields = (obj) => {
   return JSON.parse(
     JSON.stringify(obj, (_key, value) => {
@@ -227,7 +104,7 @@ var Form = ({
   validation = void 0,
   validationTrigger = "all"
 }) => {
-  const methods = (0, import_react_hook_form3.useForm)(
+  const methods = _reacthookform.useForm.call(void 0, 
     validation ? {
       defaultValues: initialValues,
       resolver: async (values) => {
@@ -243,27 +120,30 @@ var Form = ({
       defaultValues: initialValues
     }
   );
-  (0, import_react4.useEffect)(() => {
+  _react.useEffect.call(void 0, () => {
     if (validationTrigger === "all-instant") {
       methods.trigger();
     }
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FormContext_default, { ...methods, validation, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex w-full flex-row justify-between gap-6", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWQRM7G4Ccjs.FormContext_default, { ...methods, validation, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex w-full flex-row justify-between gap-6", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "form",
       {
-        className: (0, import_classnames2.default)("flex-grow", className),
-        "data-testid": slugify_default(testId || name || ""),
+        className: _classnames2.default.call(void 0, "flex-grow", className),
+        "data-testid": _chunkBBB4FEY6cjs.slugify.call(void 0, testId || name || ""),
         name,
         onSubmit: methods.handleSubmit(onSubmit),
         children
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FormDebugViewer_default, { className: "w-96 flex-shrink" })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormDebugViewer_default, { className: "w-96 flex-shrink" })
   ] }) });
 };
 var Form_default = Form;
 
 // src/Form/index.ts
 var Form_default2 = Form_default;
+
+
+exports.default = Form_default2;
 //# sourceMappingURL=index.cjs.map

package/dist/Form/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Form/index.ts","../../src/Form/Form.tsx","../../src/helpers/slugify.ts","../../src/Form/subcomponents/FormContext.tsx","../../src/Form/subcomponents/FormDebugViewer.tsx","../../src/hooks/useFormContext/useFormContext.ts"],"sourcesContent":["import Form from './Form';\n\nexport default Form;\n","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","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 { 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","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","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":"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","names":["Form_default","import_react","import_react_hook_form","import_classnames","slug","React","HookFormProvider","import_react","import_react","import_react_hook_form","useHookFormContext","import_jsx_runtime","useLocalStorage","Button","Card","cn","Json","import_jsx_runtime","cn","Form_default"]}
+{"version":3,"sources":["../../src/Form/Form.tsx","../../src/Form/subcomponents/FormDebugViewer.tsx","../../src/Form/index.ts"],"names":["useEffect","cn","jsx","jsxs","Form_default"],"mappings":"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","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\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","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","import Form from './Form';\n\nexport default Form;\n"]}

package/dist/Form/index.d.cts

@@ -1,9 +1,29 @@
-import Form from './Form.cjs';
-import 'react/jsx-runtime';
-import '@fuf-stack/veto';
-import 'react';
-import 'react-hook-form';
-
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { VetoInstance } from '@fuf-stack/veto';
+import { ReactNode } from 'react';
+import { FieldValues, SubmitHandler } from 'react-hook-form';
 
+interface FormProps {
+    /** form children */
+    children: ReactNode | ReactNode[];
+    /** CSS class name */
+    className?: string | string[];
+    /** initial form values */
+    initialValues?: FieldValues;
+    /** name of the form */
+    name?: string;
+    /** form submit handler */
+    onSubmit: SubmitHandler<FieldValues>;
+    /** HTML data-testid attribute used in e2e tests */
+    testId?: string;
+    /** veto validation schema */
+    validation?: VetoInstance;
+    /** when the validation should be triggered */
+    validationTrigger?: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all' | 'all-instant';
+}
+/**
+ * Form component that has to wrap every uniform
+ */
+declare const Form: ({ children, className, initialValues, name, onSubmit, testId, validation, validationTrigger, }: FormProps) => react_jsx_runtime.JSX.Element;
 
 export { Form as default };

package/dist/Form/index.d.ts

@@ -1,9 +1,29 @@
-import Form from './Form.js';
-import 'react/jsx-runtime';
-import '@fuf-stack/veto';
-import 'react';
-import 'react-hook-form';
-
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { VetoInstance } from '@fuf-stack/veto';
+import { ReactNode } from 'react';
+import { FieldValues, SubmitHandler } from 'react-hook-form';
 
+interface FormProps {
+    /** form children */
+    children: ReactNode | ReactNode[];
+    /** CSS class name */
+    className?: string | string[];
+    /** initial form values */
+    initialValues?: FieldValues;
+    /** name of the form */
+    name?: string;
+    /** form submit handler */
+    onSubmit: SubmitHandler<FieldValues>;
+    /** HTML data-testid attribute used in e2e tests */
+    testId?: string;
+    /** veto validation schema */
+    validation?: VetoInstance;
+    /** when the validation should be triggered */
+    validationTrigger?: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all' | 'all-instant';
+}
+/**
+ * Form component that has to wrap every uniform
+ */
+declare const Form: ({ children, className, initialValues, name, onSubmit, testId, validation, validationTrigger, }: FormProps) => react_jsx_runtime.JSX.Element;
 
 export { Form as default };

package/dist/Form/index.js

@@ -1,11 +1,145 @@
 import {
-  Form_default
-} from "../chunk-X4VXTRJB.js";
-import "../chunk-AV26PIKH.js";
-import "../chunk-GATZOHQ6.js";
-import "../chunk-PMNBGDEZ.js";
-import "../chunk-IQVKBQ7W.js";
-import "../chunk-WIY7KIHU.js";
+  FormContext_default,
+  useFormContext
+} from "../chunk-BCMPSLSG.js";
+import {
+  slugify
+} from "../chunk-V46BHM2U.js";
+
+// src/Form/Form.tsx
+import { useEffect as useEffect2 } from "react";
+import { useForm } from "react-hook-form";
+import cn2 from "classnames";
+
+// src/Form/subcomponents/FormDebugViewer.tsx
+import { useEffect, useState } from "react";
+import { FaTimes } from "react-icons/fa";
+import { FaBug } from "react-icons/fa6";
+import cn from "classnames";
+import Button from "@fuf-stack/pixels/Button";
+import Card from "@fuf-stack/pixels/Card";
+import useLocalStorage from "@fuf-stack/pixels/hooks/useLocalStorage";
+import Json from "@fuf-stack/pixels/Json";
+import { jsx, jsxs } from "react/jsx-runtime";
+var LOCALSTORAGE_DEBUG_KEY = "uniform:form-debug-enabled";
+var FormDebugViewer = ({ className = void 0 }) => {
+  const {
+    watch,
+    formState: { dirtyFields, isValid, isSubmitting },
+    validation
+  } = useFormContext();
+  const [debug, setDebug] = useLocalStorage(LOCALSTORAGE_DEBUG_KEY, false);
+  const [validationErrors, setValidationErrors] = useState(null);
+  const formValues = watch();
+  useEffect(() => {
+    const updateValidationErrors = async () => {
+      if (validation) {
+        const validateResult = await validation?.validateAsync(formValues);
+        setValidationErrors(validateResult?.errors);
+      }
+    };
+    updateValidationErrors();
+  }, [JSON.stringify(formValues)]);
+  if (!debug) {
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        ariaLabel: "Enable form debug mode",
+        onClick: () => setDebug(!debug),
+        className: "absolute bottom-2.5 right-2.5 w-5 text-default-400",
+        variant: "light",
+        icon: /* @__PURE__ */ jsx(FaBug, {})
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Card,
+    {
+      className: cn(className),
+      header: /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-row justify-between", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-lg", children: "Debug Mode" }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            icon: /* @__PURE__ */ jsx(FaTimes, { className: "text-danger" }),
+            onClick: () => setDebug(false),
+            size: "sm",
+            variant: "flat"
+          }
+        )
+      ] }),
+      children: /* @__PURE__ */ jsx(
+        Json,
+        {
+          value: {
+            values: formValues,
+            errors: validationErrors,
+            dirtyFields,
+            isValid,
+            isSubmitting
+          }
+        }
+      )
+    }
+  );
+};
+var FormDebugViewer_default = FormDebugViewer;
+
+// src/Form/Form.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var removeNullishFields = (obj) => {
+  return JSON.parse(
+    JSON.stringify(obj, (_key, value) => {
+      return value === null ? void 0 : value;
+    })
+  );
+};
+var Form = ({
+  children,
+  className = void 0,
+  initialValues = void 0,
+  name = void 0,
+  onSubmit,
+  testId = void 0,
+  validation = void 0,
+  validationTrigger = "all"
+}) => {
+  const methods = useForm(
+    validation ? {
+      defaultValues: initialValues,
+      resolver: async (values) => {
+        const { data, errors, ...rest } = await validation.validateAsync(
+          removeNullishFields(values)
+        );
+        return { values: data || {}, errors: errors || {}, ...rest };
+      },
+      // set rhf mode
+      // see: https://react-hook-form.com/docs/useform#mode
+      mode: validationTrigger === "all-instant" ? "all" : validationTrigger
+    } : {
+      defaultValues: initialValues
+    }
+  );
+  useEffect2(() => {
+    if (validationTrigger === "all-instant") {
+      methods.trigger();
+    }
+  }, []);
+  return /* @__PURE__ */ jsx2(FormContext_default, { ...methods, validation, children: /* @__PURE__ */ jsxs2("div", { className: "flex w-full flex-row justify-between gap-6", children: [
+    /* @__PURE__ */ jsx2(
+      "form",
+      {
+        className: cn2("flex-grow", className),
+        "data-testid": slugify(testId || name || ""),
+        name,
+        onSubmit: methods.handleSubmit(onSubmit),
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx2(FormDebugViewer_default, { className: "w-96 flex-shrink" })
+  ] }) });
+};
+var Form_default = Form;
 
 // src/Form/index.ts
 var Form_default2 = Form_default;

package/dist/Form/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Form/index.ts"],"sourcesContent":["import Form from './Form';\n\nexport default Form;\n"],"mappings":";;;;;;;;;;AAEA,IAAOA,gBAAQ;","names":["Form_default"]}
+{"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\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","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","import Form from './Form';\n\nexport default Form;\n"],"mappings":"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","names":["useEffect","cn","jsx","jsxs","useEffect","cn","Form_default"]}