@prokodo/ui 0.0.26 → 0.0.28

package/dist/components/form/Form.js

@@ -1,194 +1,258 @@
-import { jsx as b, jsxs as g } from "react/jsx-runtime";
-import { memo as Y, useState as j, useEffect as Z, useCallback as m, useMemo as R, Fragment as S } from "react";
-import { create as f } from "../../helpers/bem.js";
-import { isArray as _, isString as F } from "../../helpers/validations.js";
-import rr from "./Form.module.scss.js";
-import { FormField as or } from "./FormField.js";
-import { FormResponse as nr } from "./FormResponse.js";
-import { Grid as tr } from "../grid/Grid.js";
-import { Headline as ar } from "../headline/Headline.js";
-import { Button as sr } from "../button/Button.js";
-const y = f(rr, "Form"), er = Y(
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useState, useEffect, useCallback, useMemo, Fragment } from "react";
+import { create } from "../../helpers/bem.js";
+import { isArray, isString } from "../../helpers/validations.js";
+import styles from "./Form.module.scss.js";
+import { FormField } from "./FormField.js";
+import { FormResponse } from "./FormResponse.js";
+import { Grid } from "../grid/Grid.js";
+import { Button } from "../button/Button.js";
+import { Headline } from "../headline/Headline.server.js";
+const bem = create(styles, "Form");
+const Form = memo(
   ({
-    variant: l = "primary",
-    action: B,
-    label: $,
-    className: k,
-    fields: G,
-    disableFields: E,
-    hideResponse: x,
-    defaultFields: c,
-    messages: v,
-    messagesFields: p,
-    button: z,
-    children: J,
-    onSubmit: q,
-    onChangeForm: d,
-    ...K
+    variant = "primary",
+    action,
+    label,
+    className,
+    fields,
+    disableFields,
+    hideResponse,
+    defaultFields,
+    messages,
+    messagesFields,
+    button,
+    children,
+    onSubmit,
+    onChangeForm,
+    ...props
   }) => {
-    const [s, L] = j(G ?? []), [T, A] = j(
-      v
-    ), [I, Q] = j("");
-    Z(() => {
-      v !== void 0 && A(v);
-    }, [v]);
-    const h = m(
-      (r, o) => {
-        L((t) => {
-          const a = [...t];
-          return a[r] = {
-            ...a[r],
-            ...o
-          }, a;
-        }), d && d({
-          ...s[r],
-          ...o
+    const [form, setForm] = useState(fields ?? []);
+    const [formMessages, setFormMessages] = useState(
+      messages
+    );
+    const [hp, setHp] = useState("");
+    useEffect(() => {
+      if (messages !== void 0) {
+        setFormMessages(messages);
+      }
+    }, [messages]);
+    const updateFormState = useCallback(
+      (index, props2) => {
+        setForm((prevData) => {
+          const newArray = [...prevData];
+          newArray[index] = {
+            ...newArray[index],
+            ...props2
+          };
+          return newArray;
         });
+        if (onChangeForm) {
+          onChangeForm({
+            ...form[index],
+            ...props2
+          });
+        }
       },
-      [s, d]
-    ), C = m(
-      (r, o) => r.filter((t) => o === void 0 || t.equalTo === void 0 || typeof t.equalTo == "boolean" && t.equalTo === o ? !0 : typeof t.equalTo == "string" ? t.equalTo === o : Array.isArray(t.equalTo) && typeof o == "string" ? t.equalTo.includes(o) : !1),
+      [form, onChangeForm]
+    );
+    const filterConditions = useCallback(
+      (conditions, value) => conditions.filter((e) => {
+        if (value === void 0 || e.equalTo === void 0 || typeof e.equalTo === "boolean" && e.equalTo === value)
+          return true;
+        if (typeof e.equalTo === "string") {
+          return e.equalTo === value;
+        }
+        if (Array.isArray(e.equalTo) && typeof value === "string") {
+          return e.equalTo.includes(value);
+        }
+        return false;
+      }),
       []
-    ), V = m(
-      (r, o) => o !== void 0 && _(o) ? o.flatMap(
-        (t) => C(r, t)
-      ) : C(r, o),
-      [C]
-    ), N = m(
-      (r) => s.findIndex((o) => (o == null ? void 0 : o.name) === (r == null ? void 0 : r.name)),
-      [s]
-    ), w = m(
-      (r) => {
-        var a, n;
-        const o = s.findIndex(
-          (e) => (e == null ? void 0 : e.name) === (r == null ? void 0 : r.name)
+    );
+    const handleFilterConditions = useCallback(
+      (conditions, value) => {
+        if (value !== void 0 && isArray(value)) {
+          return value.flatMap(
+            (val) => filterConditions(conditions, val)
+          );
+        }
+        return filterConditions(conditions, value);
+      },
+      [filterConditions]
+    );
+    const getFieldIndex = useCallback(
+      (field) => form.findIndex((e) => (e == null ? void 0 : e.name) === (field == null ? void 0 : field.name)),
+      [form]
+    );
+    const resetFieldConditions = useCallback(
+      (changedField) => {
+        var _a, _b;
+        const fieldIndex = form.findIndex(
+          (field) => (field == null ? void 0 : field.name) === (changedField == null ? void 0 : changedField.name)
         );
-        (c == null ? void 0 : c[o]) !== void 0 && ((n = (a = c == null ? void 0 : c[o]) == null ? void 0 : a.conditions) == null || n.forEach((e) => {
-          const i = c.findIndex(
-            (u) => (u == null ? void 0 : u.name) === (e == null ? void 0 : e.fieldId)
+        const defaultField = defaultFields == null ? void 0 : defaultFields[fieldIndex];
+        if (defaultField === void 0) return;
+        (_b = (_a = defaultFields == null ? void 0 : defaultFields[fieldIndex]) == null ? void 0 : _a.conditions) == null ? void 0 : _b.forEach((con) => {
+          const index = defaultFields.findIndex(
+            (field) => (field == null ? void 0 : field.name) === (con == null ? void 0 : con.fieldId)
           );
-          c[i] !== void 0 && h(i, c[i]);
-        }));
+          if (defaultFields[index] === void 0) return;
+          updateFormState(index, defaultFields[index]);
+        });
+        return;
       },
-      [c, s, h]
-    ), H = m(
-      (r, o) => {
-        const t = r == null ? void 0 : r.conditions;
-        if (!t || (t == null ? void 0 : t.length) <= 0) {
-          const n = N(r);
-          h(n, { value: o });
+      [defaultFields, form, updateFormState]
+    );
+    const handleChangeField = useCallback(
+      (field, value) => {
+        const conditions = field == null ? void 0 : field.conditions;
+        if (!conditions || (conditions == null ? void 0 : conditions.length) <= 0) {
+          const index2 = getFieldIndex(field);
+          updateFormState(index2, { value });
           return;
         }
-        w(r), V(t, o).forEach((n) => {
-          const e = s.findIndex(
-            (i) => (i == null ? void 0 : i.name) === (n == null ? void 0 : n.fieldId)
+        resetFieldConditions(field);
+        handleFilterConditions(conditions, value).forEach((con) => {
+          const conditionalFieldIndex = form.findIndex(
+            (field2) => (field2 == null ? void 0 : field2.name) === (con == null ? void 0 : con.fieldId)
           );
-          h(e, n.updateProps);
+          updateFormState(conditionalFieldIndex, con.updateProps);
         });
-        const a = N(r);
-        h(a, { value: o });
+        const index = getFieldIndex(field);
+        updateFormState(index, { value });
       },
       [
-        s,
-        N,
-        w,
-        V,
-        h
+        form,
+        getFieldIndex,
+        resetFieldConditions,
+        handleFilterConditions,
+        updateFormState
       ]
-    ), O = m(
-      (r, o) => {
-        const t = s.findIndex((n) => (n == null ? void 0 : n.name) === (r == null ? void 0 : r.name));
-        h(t, {
-          errorText: o
+    );
+    const handleValidationField = useCallback(
+      (field, errorText) => {
+        const fieldIndex = form.findIndex((e) => (e == null ? void 0 : e.name) === (field == null ? void 0 : field.name));
+        updateFormState(fieldIndex, {
+          errorText
         });
-        const a = (r == null ? void 0 : r.label) ?? "";
-        A((n) => {
-          const e = { ...n == null ? void 0 : n.errors }, i = o !== void 0 ? [o] : [];
-          return i.length > 0 ? e[a] = i : delete e[a], {
-            ...n,
-            errors: Object.keys(e).length > 0 ? e : void 0
+        const label2 = (field == null ? void 0 : field.label) ?? "";
+        setFormMessages((prevState) => {
+          const updatedErrors = { ...prevState == null ? void 0 : prevState.errors };
+          const newErrors = errorText !== void 0 ? [errorText] : [];
+          if (newErrors.length > 0) {
+            updatedErrors[label2] = newErrors;
+          } else {
+            delete updatedErrors[label2];
+          }
+          return {
+            ...prevState,
+            errors: Object.keys(updatedErrors).length > 0 ? updatedErrors : void 0
             // Only keep errors if there are any
           };
         });
       },
-      [s, h]
-    ), P = m(
-      (r) => /* @__PURE__ */ b(
-        or,
+      [form, updateFormState]
+    );
+    const renderField = useCallback(
+      (field) => /* @__PURE__ */ jsx(
+        FormField,
         {
-          ...r,
-          "aria-labelledby": `${r == null ? void 0 : r.label}-label`,
-          "aria-required": r != null && r.required ? "true" : void 0,
-          messagesFields: p,
-          variant: l,
-          disabled: E !== void 0 ? E : r == null ? void 0 : r.disabled,
-          onChange: H,
-          onValidate: O
+          ...field,
+          "aria-labelledby": `${field == null ? void 0 : field.label}-label`,
+          "aria-required": Boolean(field == null ? void 0 : field.required) ? "true" : void 0,
+          messagesFields,
+          variant,
+          disabled: disableFields !== void 0 ? disableFields : field == null ? void 0 : field.disabled,
+          onChange: handleChangeField,
+          onValidate: handleValidationField
         }
       ),
       [
-        l,
-        E,
-        p,
-        H,
-        O
+        variant,
+        disableFields,
+        messagesFields,
+        handleChangeField,
+        handleValidationField
       ]
-    ), D = m(() => {
-      var t;
-      const r = {};
-      for (const a of s) {
-        const { required: n, visible: e, value: i, label: u, fieldType: M } = a;
-        if (u === void 0)
+    );
+    const handleValidationForm = useCallback(() => {
+      var _a;
+      const errors = {};
+      for (const field of form) {
+        const { required, visible, value, label: label2, fieldType } = field;
+        if (label2 === void 0) {
           continue;
-        if (r[u] || (r[u] = []), M !== "slider" && M !== "switch" && F(a == null ? void 0 : a.errorText)) {
-          r[u].push(a == null ? void 0 : a.errorText);
+        }
+        if (!errors[label2]) {
+          errors[label2] = [];
+        }
+        const hasErrorText = fieldType !== "slider" && fieldType !== "switch" && isString(field == null ? void 0 : field.errorText);
+        if (hasErrorText) {
+          errors[label2].push(field == null ? void 0 : field.errorText);
           continue;
         }
-        n && (i === void 0 || i === "") && e !== !1 && r[u].push(
-          ((t = p == null ? void 0 : p.errors) == null ? void 0 : t.required) ?? "This field is required. Please fill it out."
-        );
+        if (Boolean(required) && (value === void 0 || value === "") && visible !== false) {
+          errors[label2].push(
+            ((_a = messagesFields == null ? void 0 : messagesFields.errors) == null ? void 0 : _a.required) ?? "This field is required. Please fill it out."
+          );
+        }
       }
-      const o = Object.keys(r).reduce((a, n) => (r[n] && r[n].length > 0 && (a[n] = r[n]), a), {});
+      const cleanedErrors = Object.keys(errors).reduce((acc, key) => {
+        if (errors[key] && errors[key].length > 0) {
+          acc[key] = errors[key];
+        }
+        return acc;
+      }, {});
       return {
-        errors: Object.keys(o).length > 0 ? o : void 0
+        errors: Object.keys(cleanedErrors).length > 0 ? cleanedErrors : void 0
       };
-    }, [s, p]), U = m(
-      (r) => {
-        r.preventDefault();
-        const { errors: o } = D();
-        A({
-          errors: o !== void 0 ? o : void 0
-        }), o === void 0 && (q == null || q(s));
+    }, [form, messagesFields]);
+    const handleSubmitForm = useCallback(
+      (e) => {
+        e.preventDefault();
+        const { errors } = handleValidationForm();
+        setFormMessages({
+          errors: errors !== void 0 ? errors : void 0
+        });
+        if (errors === void 0) {
+          onSubmit == null ? void 0 : onSubmit(form);
+        }
       },
-      [s, D, q]
-    ), W = m(
-      (r) => {
-        var o;
-        return Q((o = r == null ? void 0 : r.target) == null ? void 0 : o.value);
+      [form, handleValidationForm, onSubmit]
+    );
+    const handleHpChange = useCallback(
+      (e) => {
+        var _a;
+        return setHp((_a = e == null ? void 0 : e.target) == null ? void 0 : _a.value);
       },
       []
-    ), X = R(
-      () => x ? s.every((r) => {
-        const { value: o } = r;
-        return !(r != null && r.required && (o === void 0 || o === "" || Array.isArray(o) && (o == null ? void 0 : o.length) <= 0) && (r == null ? void 0 : r.visible) !== !1);
-      }) : !0,
-      [s, x]
     );
-    return /* @__PURE__ */ g(
+    const isFormValid = useMemo(
+      () => Boolean(hideResponse) ? form.every((field) => {
+        const { value } = field;
+        if (Boolean(field == null ? void 0 : field.required) && (value === void 0 || value === "" || Array.isArray(value) && (value == null ? void 0 : value.length) <= 0) && (field == null ? void 0 : field.visible) !== false) {
+          return false;
+        }
+        return true;
+      }) : true,
+      [form, hideResponse]
+    );
+    return /* @__PURE__ */ jsxs(
       "form",
       {
-        ...K,
-        noValidate: !0,
-        action: B,
+        ...props,
+        noValidate: true,
+        action,
         "aria-labelledby": "form-heading",
-        className: y(void 0, void 0, k),
-        onSubmit: B === void 0 ? U : void 0,
+        className: bem(void 0, void 0, className),
+        onSubmit: action === void 0 ? handleSubmitForm : void 0,
         children: [
-          /* @__PURE__ */ b(ar, { className: y("label"), id: "form-heading", type: "h2", children: $ }),
-          /* @__PURE__ */ g(tr, { spacing: 2, children: [
-            _(s) && s.map((r) => /* @__PURE__ */ b(S, { children: P(r) }, `form-input-${r.name}`)),
-            J,
-            P({
+          /* @__PURE__ */ jsx(Headline, { className: bem("label"), id: "form-heading", type: "h2", children: label }),
+          /* @__PURE__ */ jsxs(Grid, { spacing: 2, children: [
+            isArray(form) && form.map((field) => /* @__PURE__ */ jsx(Fragment, { children: renderField(field) }, `form-input-${field.name}`)),
+            children,
+            renderField({
               fieldType: "input",
               label: "Do not fill this field",
               labelProps: {
@@ -198,22 +262,22 @@ const y = f(rr, "Form"), er = Y(
               id: "hp",
               "aria-hidden": "true",
               // Hide honeypot field from assistive technology
-              className: y("hp"),
-              value: I,
-              onChange: W
+              className: bem("hp"),
+              value: hp,
+              onChange: handleHpChange
             })
           ] }),
-          /* @__PURE__ */ g("div", { className: y("footer"), children: [
-            (x === !1 || x === void 0) && /* @__PURE__ */ b(nr, { messages: T }),
-            (I == null ? void 0 : I.length) <= 0 && /* @__PURE__ */ b(
-              sr,
+          /* @__PURE__ */ jsxs("div", { className: bem("footer"), children: [
+            (hideResponse === false || hideResponse === void 0) && /* @__PURE__ */ jsx(FormResponse, { messages: formMessages }),
+            (hp == null ? void 0 : hp.length) <= 0 && /* @__PURE__ */ jsx(
+              Button,
               {
                 "aria-label": "Submit form",
-                className: y("footer__submit"),
-                color: l,
+                className: bem("footer__submit"),
+                color: variant,
                 type: "submit",
-                ...z,
-                disabled: (T == null ? void 0 : T.errors) !== void 0 || !X
+                ...button,
+                disabled: (formMessages == null ? void 0 : formMessages.errors) !== void 0 || !isFormValid
               }
             )
           ] })
@@ -222,7 +286,7 @@ const y = f(rr, "Form"), er = Y(
     );
   }
 );
-er.displayName = "Form";
+Form.displayName = "Form";
 export {
-  er as Form
+  Form
 };

package/dist/components/form/Form.module.scss.js

@@ -1,13 +1,15 @@
-const o = "gradientMove", r = "fadeInKeyframe", e = {
+const gradientMove = "gradientMove";
+const fadeInKeyframe = "fadeInKeyframe";
+const styles = {
   "prokodo-Form__label": "prokodo-Form__label",
   "prokodo-Form__hp": "prokodo-Form__hp",
   "prokodo-Form__footer": "prokodo-Form__footer",
   "prokodo-Form__footer__submit": "prokodo-Form__footer__submit",
-  gradientMove: o,
-  fadeInKeyframe: r
+  gradientMove,
+  fadeInKeyframe
 };
 export {
-  e as default,
-  r as fadeInKeyframe,
-  o as gradientMove
+  styles as default,
+  fadeInKeyframe,
+  gradientMove
 };

package/dist/components/form/FormField.js

@@ -1,87 +1,90 @@
-import { jsx as o } from "react/jsx-runtime";
-import { memo as y, useCallback as D } from "react";
-import { create as T } from "../../helpers/bem.js";
-import b from "./FormField.module.scss.js";
-import { GridRow as k } from "../grid/GridRow.js";
-import { DatePicker as H } from "../datePicker/DatePicker.js";
-import { Select as M } from "../select/Select.js";
-import { Slider as N } from "../slider/Slider.js";
-import { Switch as j } from "../switch/Switch.js";
-import { Input as l } from "../input/Input.js";
-const G = T(b, "FormField"), I = y(
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import { memo, useCallback } from "react";
+import { create } from "../../helpers/bem.js";
+import styles from "./FormField.module.scss.js";
+import { GridRow } from "../grid/GridRow.js";
+import { DatePicker } from "../datePicker/DatePicker.js";
+import { Select } from "../select/Select.js";
+import { Slider } from "../slider/Slider.js";
+import { Switch } from "../switch/Switch.js";
+import { Input } from "../input/Input.js";
+const bem = create(styles, "FormField");
+const FormField = memo(
   ({
-    fieldType: Y,
-    visible: x,
-    variant: _ = "primary",
-    messagesFields: f,
-    onChange: r,
-    onValidate: i,
-    ...t
+    fieldType,
+    visible,
+    variant = "primary",
+    messagesFields,
+    onChange,
+    onValidate,
+    ...props
   }) => {
-    var w, S;
-    const u = D(
-      (m) => /* @__PURE__ */ o(k, { className: G(), xs: 12, children: m }),
+    var _a, _b;
+    const renderFieldContainer = useCallback(
+      (children) => /* @__PURE__ */ jsx(GridRow, { className: bem(), xs: 12, children }),
       []
     );
-    if (x === !1) return null;
-    switch (Y) {
+    if (visible === false) return null;
+    switch (fieldType) {
       case "switch":
-        return u(
-          /* @__PURE__ */ o(
-            j,
+        return renderFieldContainer(
+          /* @__PURE__ */ jsx(
+            Switch,
             {
-              color: _,
-              ...t,
-              onChange: (m, c) => r == null ? void 0 : r(t, c)
+              color: variant,
+              ...props,
+              onChange: /* @__PURE__ */ __name((_, checked) => onChange == null ? void 0 : onChange(props, checked), "onChange")
             }
           )
         );
       case "slider":
-        return u(
-          /* @__PURE__ */ o(
-            N,
+        return renderFieldContainer(
+          /* @__PURE__ */ jsx(
+            Slider,
             {
-              ...t,
-              onChange: (m, c) => r == null ? void 0 : r(t, c == null ? void 0 : c.toString())
+              ...props,
+              onChange: /* @__PURE__ */ __name((_, value) => onChange == null ? void 0 : onChange(props, value == null ? void 0 : value.toString()), "onChange")
             }
           )
         );
       case "select":
-        return u(
-          /* @__PURE__ */ o(
-            M,
+        return renderFieldContainer(
+          /* @__PURE__ */ jsx(
+            Select,
             {
-              color: _,
-              ...t,
-              onChange: (m, c) => r == null ? void 0 : r(t, c ?? void 0)
+              color: variant,
+              ...props,
+              onChange: /* @__PURE__ */ __name((_, value) => onChange == null ? void 0 : onChange(props, value ?? void 0), "onChange")
             }
           )
         );
       case "input":
-        return u(
-          /* @__PURE__ */ o(
-            l,
+        return renderFieldContainer(
+          /* @__PURE__ */ jsx(
+            Input,
             {
-              color: _,
-              errorTranslations: (w = f == null ? void 0 : f.errors) == null ? void 0 : w.input,
-              onValidate: (m, c) => i == null ? void 0 : i(t, c),
-              onChange: (m) => r == null ? void 0 : r(t, m.target.value),
-              ...t
+              color: variant,
+              errorTranslations: (_a = messagesFields == null ? void 0 : messagesFields.errors) == null ? void 0 : _a.input,
+              onValidate: /* @__PURE__ */ __name((_, err) => onValidate == null ? void 0 : onValidate(props, err), "onValidate"),
+              onChange: /* @__PURE__ */ __name((e) => onChange == null ? void 0 : onChange(props, e.target.value), "onChange"),
+              ...props
             }
           )
         );
       case "date":
-        return u(
-          /* @__PURE__ */ o(
-            H,
+        return renderFieldContainer(
+          /* @__PURE__ */ jsx(
+            DatePicker,
             {
-              ...t,
-              errorTranslations: (S = f == null ? void 0 : f.errors) == null ? void 0 : S.date,
-              onValidate: (m, c) => i == null ? void 0 : i(t, c),
-              onChange: (m) => r == null ? void 0 : r(
-                t,
-                m == null ? void 0 : m.format("YYYY-MM-DDTHH:mm:ssZ")
-              )
+              ...props,
+              errorTranslations: (_b = messagesFields == null ? void 0 : messagesFields.errors) == null ? void 0 : _b.date,
+              onValidate: /* @__PURE__ */ __name((_, err) => onValidate == null ? void 0 : onValidate(props, err), "onValidate"),
+              onChange: /* @__PURE__ */ __name((value) => onChange == null ? void 0 : onChange(
+                props,
+                value == null ? void 0 : value.format("YYYY-MM-DDTHH:mm:ssZ")
+              ), "onChange")
             }
           )
         );
@@ -90,7 +93,7 @@ const G = T(b, "FormField"), I = y(
     }
   }
 );
-I.displayName = "FormField";
+FormField.displayName = "FormField";
 export {
-  I as FormField
+  FormField
 };