@rws-aoa/react-library 4.0.0 → 5.0.0

package/dist/chunks/FieldError.DAUtZvvC.js

@@ -0,0 +1,143 @@
+import { jsx as r, jsxs as p } from "react/jsx-runtime";
+import { createFormHookContexts as A, createFormHook as C } from "@tanstack/react-form";
+import { AoaNotification as u } from "../components/atoms/notification/Notification.js";
+import { Dialog as v, DialogTitle as B, DialogContent as w, DialogActions as S } from "@mui/material";
+import { l as j } from "./lodash.DOeeRDpT.js";
+import { AoaButton as l } from "../components/atoms/button/Button.js";
+import { AoaModalCloseButton as T } from "../components/molecules/modal-close-button/ModalCloseButton.js";
+function k({ "data-qa": e }) {
+  const n = f();
+  return /* @__PURE__ */ r(n.Subscribe, { selector: (t) => t.errors, children: (t) => {
+    if (t.length) {
+      const i = t.at(0);
+      if (typeof i == "string")
+        return /* @__PURE__ */ r(u, { "data-qa": e ?? "form-error", message: i, severity: "error" });
+      if (i && typeof i == "object") {
+        const a = ["error", "info", "success", "warning"].includes(i.level) ? i.level : "error";
+        return /* @__PURE__ */ r(u, { "data-qa": e ?? "form-error", message: i.message, severity: a });
+      }
+    }
+    return null;
+  } });
+}
+function E({
+  formModalQas: e,
+  formLabels: n,
+  formName: t,
+  DialogProps: i,
+  DialogTitleProps: a,
+  DialogContentProps: s,
+  AoaSubmitButtonProps: { disableWithFormState: h, ...b } = {},
+  modalQas: o,
+  open: y,
+  topic: g,
+  dialogContent: F,
+  closeAction: x
+}) {
+  const m = f(), q = h ? /* @__PURE__ */ r(m.Subscribe, { selector: (c) => [c.isSubmitting, c.canSubmit], children: ([c, d]) => /* @__PURE__ */ r(
+    l,
+    {
+      ...b,
+      "aria-disabled": c || !d,
+      buttonType: "submit",
+      "data-qa": (e == null ? void 0 : e.submitButton) ?? "submit-form",
+      disabled: c || !d,
+      type: "primary",
+      children: n.submit
+    }
+  ) }) : /* @__PURE__ */ r(
+    l,
+    {
+      ...b,
+      buttonType: "submit",
+      "data-qa": (e == null ? void 0 : e.submitButton) ?? "submit-form",
+      type: "primary",
+      children: n.submit
+    }
+  );
+  return /* @__PURE__ */ p(v, { ...i, "data-qa": (o == null ? void 0 : o.modal) ?? "modal", open: !!y, children: [
+    /* @__PURE__ */ r(B, { ...a, "data-qa": (o == null ? void 0 : o.title) ?? "modal-title", maxWidth: "sm", sx: { m: 0, p: 2 }, children: g }),
+    /* @__PURE__ */ r(T, { closeAction: x }),
+    /* @__PURE__ */ p(
+      "form",
+      {
+        "data-qa": (e == null ? void 0 : e.form) ?? "form",
+        name: t,
+        onSubmit: async (c) => {
+          c.preventDefault(), c.stopPropagation(), await m.handleSubmit();
+        },
+        children: [
+          /* @__PURE__ */ r(
+            w,
+            {
+              ...s,
+              "data-qa": (o == null ? void 0 : o.content) ?? "modal-content",
+              sx: j.merge(
+                {
+                  padding: "0 3rem 2rem"
+                },
+                s == null ? void 0 : s.sx
+              ),
+              children: F
+            }
+          ),
+          /* @__PURE__ */ p(S, { "data-qa": (e == null ? void 0 : e.dialogActions) ?? "dialog-actions", children: [
+            /* @__PURE__ */ r(
+              l,
+              {
+                "data-qa": (e == null ? void 0 : e.cancelButton) ?? "cancel-form",
+                onClick: () => {
+                  m.reset(), x();
+                },
+                type: "secondary",
+                children: n.cancel
+              }
+            ),
+            q
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+const {
+  fieldContext: H,
+  formContext: N,
+  useFieldContext: W,
+  useFormContext: f
+} = A(), { useAppForm: R, withForm: U } = C({
+  fieldContext: H,
+  formContext: N,
+  fieldComponents: {
+    AoaFieldError: z
+  },
+  formComponents: {
+    AoaFormModal: E,
+    AoaFormError: k
+  }
+});
+function z({ "data-qa": e }) {
+  const n = W();
+  if (n.state.meta.isTouched && n.state.meta.errors.length) {
+    const t = n.state.meta.errors.at(0);
+    if (typeof t == "string")
+      return /* @__PURE__ */ r(u, { "data-qa": e ?? "field-error", message: t, severity: "error" });
+    if (t && typeof t == "object") {
+      const i = ["error", "info", "success", "warning"].includes(t.level) ? t.level : "error";
+      return /* @__PURE__ */ r(u, { "data-qa": e ?? "field-error", message: t.message, severity: i });
+    }
+  }
+  return null;
+}
+export {
+  z as A,
+  k as a,
+  E as b,
+  H as c,
+  N as d,
+  W as e,
+  f,
+  R as u,
+  U as w
+};
+//# sourceMappingURL=FieldError.DAUtZvvC.js.map

package/dist/chunks/FieldError.DAUtZvvC.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldError.DAUtZvvC.js","sources":["../../src/components/molecules/form-error/FormError.tsx","../../src/components/molecules/form-modal/FormModal.tsx","../../src/contexts/TanstackFormContext.ts","../../src/components/molecules/field-error/FieldError.tsx"],"sourcesContent":["import { useAoaFormContext } from '../../../contexts/TanstackFormContext';\nimport { AoaNotification, type Severity } from '../../atoms/notification/Notification';\n\nexport interface AoaFormErrorProps {\n  readonly 'data-qa'?: string;\n}\n\n/**\n * Constructs a custom error message for a form **using pre-defined Rijks styling**\n *\n * This component is intended for internal use only and should always be used through `<form.AoaFormError />`\n *\n * @internal\n * @param param0 - Props to pass to the form error\n * @returns A custom error message for a form\n * @example\n * ```jsx\n * <form.AppForm>\n *   <form.AoaFormError />\n * </form.AppForm>\n * ```\n */\nexport function AoaFormError({ 'data-qa': dataQa }: AoaFormErrorProps) {\n  const form = useAoaFormContext();\n\n  return (\n    <form.Subscribe selector={(state) => state.errors}>\n      {(errors) => {\n        if (errors.length) {\n          const error = errors.at(0);\n\n          if (typeof error === 'string') {\n            return <AoaNotification data-qa={dataQa ?? 'form-error'} message={error} severity='error' />;\n          } else if (error && typeof error === 'object') {\n            const parsedLevel = ['error', 'info', 'success', 'warning'].includes(error.level)\n              ? (error.level as Severity)\n              : 'error';\n            return <AoaNotification data-qa={dataQa ?? 'form-error'} message={error.message} severity={parsedLevel} />;\n          }\n        }\n\n        return null;\n      }}\n    </form.Subscribe>\n  );\n}\n","import { Dialog, DialogActions, DialogContent, DialogTitle } from '@mui/material';\nimport { merge } from 'lodash';\nimport { useAoaFormContext } from '../../../contexts/TanstackFormContext';\nimport { AoaButton, type AoaButtonProps } from '../../atoms/button/Button';\nimport type { AoaModalProps } from '../modal/Modal';\nimport { AoaModalCloseButton, type AoaModalCloseButtonProps } from '../modal-close-button/ModalCloseButton';\n\nexport interface AoaFormModalQAs {\n  /**\n   * Data-qa tag applied to the \"cancel\" button\n   */\n  cancelButton?: string;\n  /**\n   * Data-qa tag applied to the `DialogActions` component\n   */\n  dialogActions?: string;\n  /**\n   * Data-qa tag applied to the HTML `form` element\n   */\n  form?: string;\n  /**\n   * Data-qa tag applied to the \"submit\" button\n   */\n  submitButton?: string;\n}\n\nexport interface AoaFormModalLabels {\n  cancel: string;\n  submit: string;\n}\n\nexport interface AoaFormModalProps extends Omit<AoaModalProps, 'dialogActions'>, AoaModalCloseButtonProps {\n  /**\n   * Additional properties to provide to the {@link AoaButton | submit button}\n   */\n  AoaSubmitButtonProps?: Omit<AoaButtonProps, 'buttonType' | 'data-qa' | 'disabled' | 'onClick' | 'type'> & {\n    disableWithFormState?: boolean;\n  };\n  /**\n   * Labels for the buttons in {@link DialogActions}\n   */\n  formLabels: AoaFormModalLabels;\n  /**\n   * data-qa tags for the components in the form section of the modal\n   */\n  formModalQas?: AoaFormModalQAs;\n  /**\n   * Optionally the `name` property for the HTML form element\n   */\n  formName?: string;\n}\n\n/**\n * Constructs a modal **for holding a Form** using pre-defined Rijks styling\n *\n * For a modal without a form see `AoaModal`\n *\n * This component is intended for internal use only and should always be used through `<form.AoaFormModal />`\n *\n * @internal\n * @param props - Props to pass to the modal - {@link ModalProps}\n * @example\n * ```jsx\n * <form.AppForm>\n *   <form.AoaFormModal\n *     open={true}\n *     formLabels={{\n *       submit: 'submit',\n *       cancel: 'cancel'\n *     }}\n *     formModalQas={{\n *       cancelButton: 'cancel-button',\n *       dialogActions: 'dialog-actions,\n *       form: 'form',\n *       submitButton: 'confirm-button'\n *     }}\n *     closeAction={handleClose}\n *     topic='topic'\n *     modalQas={{\n *       modal: 'modal',\n *       content: 'modal-content',\n *       title: 'modal-title'\n *     }}\n *     formName='form'\n *     dialogContent={content}\n *   />\n * </form.AppForm>\n * ```\n */\nexport function AoaFormModal({\n  formModalQas,\n  formLabels,\n  formName,\n  DialogProps,\n  DialogTitleProps,\n  DialogContentProps,\n  AoaSubmitButtonProps: { disableWithFormState, ...AoaSubmitButtonProps } = {},\n  modalQas,\n  open,\n  topic,\n  dialogContent,\n  closeAction\n}: Readonly<AoaFormModalProps>) {\n  const form = useAoaFormContext();\n\n  const SubmitButton = disableWithFormState ? (\n    <form.Subscribe selector={(state) => [state.isSubmitting, state.canSubmit] as const}>\n      {([isSubmitting, canSubmit]) => (\n        <AoaButton\n          {...AoaSubmitButtonProps}\n          aria-disabled={isSubmitting || !canSubmit}\n          buttonType='submit'\n          data-qa={formModalQas?.submitButton ?? 'submit-form'}\n          disabled={isSubmitting || !canSubmit}\n          type='primary'\n        >\n          {formLabels.submit}\n        </AoaButton>\n      )}\n    </form.Subscribe>\n  ) : (\n    <AoaButton\n      {...AoaSubmitButtonProps}\n      buttonType='submit'\n      data-qa={formModalQas?.submitButton ?? 'submit-form'}\n      type='primary'\n    >\n      {formLabels.submit}\n    </AoaButton>\n  );\n\n  return (\n    <Dialog {...DialogProps} data-qa={modalQas?.modal ?? 'modal'} open={Boolean(open)}>\n      <DialogTitle {...DialogTitleProps} data-qa={modalQas?.title ?? 'modal-title'} maxWidth='sm' sx={{ m: 0, p: 2 }}>\n        {topic}\n      </DialogTitle>\n      <AoaModalCloseButton closeAction={closeAction} />\n      <form\n        data-qa={formModalQas?.form ?? 'form'}\n        name={formName}\n        onSubmit={async (event) => {\n          event.preventDefault();\n          event.stopPropagation();\n          await form.handleSubmit();\n        }}\n      >\n        <DialogContent\n          {...DialogContentProps}\n          data-qa={modalQas?.content ?? 'modal-content'}\n          sx={merge(\n            {\n              padding: '0 3rem 2rem'\n            },\n            DialogContentProps?.sx\n          )}\n        >\n          {dialogContent}\n        </DialogContent>\n        <DialogActions data-qa={formModalQas?.dialogActions ?? 'dialog-actions'}>\n          <AoaButton\n            data-qa={formModalQas?.cancelButton ?? 'cancel-form'}\n            onClick={() => {\n              form.reset();\n              closeAction();\n            }}\n            type='secondary'\n          >\n            {formLabels.cancel}\n          </AoaButton>\n          {SubmitButton}\n        </DialogActions>\n      </form>\n    </Dialog>\n  );\n}\n","import { createFormHook, createFormHookContexts } from '@tanstack/react-form';\nimport { AoaFieldError } from '../components/molecules/field-error/FieldError';\nimport { AoaFormError } from '../components/molecules/form-error/FormError';\nimport { AoaFormModal } from '../components/molecules/form-modal/FormModal';\n\nexport const {\n  fieldContext: aoaFieldContext,\n  formContext: aoaFormContext,\n  useFieldContext: useAoaFieldContext,\n  useFormContext: useAoaFormContext\n} = createFormHookContexts();\n\nexport const { useAppForm: useAoaAppForm, withForm: withAoaForm } = createFormHook({\n  fieldContext: aoaFieldContext,\n  formContext: aoaFormContext,\n  fieldComponents: {\n    AoaFieldError\n  },\n  formComponents: {\n    AoaFormModal,\n    AoaFormError\n  }\n});\n","import { useAoaFieldContext } from '../../../contexts/TanstackFormContext';\nimport { AoaNotification, type Severity } from '../../atoms/notification/Notification';\n\nexport interface AoaFieldErrorProps {\n  readonly 'data-qa'?: string;\n}\n\n/**\n * Constructs a custom error message for a field **using pre-defined Rijks styling**\n *\n * This component is intended for internal use only and should always be used through `<field.AoaFieldError />`\n *\n * @internal\n * @param param0 - Props to pass to the field error\n * @returns A custom error message for a field\n * @example\n * ```jsx\n * <form.AppField name='name'>\n *   {(field) => {\n *     return <field.AoaFieldError />;\n *   }}\n * </form.AppField>\n * ```\n */\nexport function AoaFieldError<TData>({ 'data-qa': dataQa }: AoaFieldErrorProps) {\n  const field = useAoaFieldContext<TData>();\n\n  if (field.state.meta.isTouched && field.state.meta.errors.length) {\n    const error = field.state.meta.errors.at(0);\n\n    if (typeof error === 'string') {\n      return <AoaNotification data-qa={dataQa ?? 'field-error'} message={error} severity='error' />;\n    } else if (error && typeof error === 'object') {\n      const parsedLevel = ['error', 'info', 'success', 'warning'].includes(error.level)\n        ? (error.level as Severity)\n        : 'error';\n      return <AoaNotification data-qa={dataQa ?? 'field-error'} message={error.message} severity={parsedLevel} />;\n    }\n  }\n\n  return null;\n}\n"],"names":["AoaFormError","dataQa","form","useAoaFormContext","jsx","state","errors","error","AoaNotification","parsedLevel","AoaFormModal","formModalQas","formLabels","formName","DialogProps","DialogTitleProps","DialogContentProps","disableWithFormState","AoaSubmitButtonProps","modalQas","open","topic","dialogContent","closeAction","SubmitButton","isSubmitting","canSubmit","AoaButton","jsxs","Dialog","DialogTitle","AoaModalCloseButton","event","DialogContent","merge","DialogActions","aoaFieldContext","aoaFormContext","useAoaFieldContext","createFormHookContexts","useAoaAppForm","withAoaForm","createFormHook","AoaFieldError","field"],"mappings":"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"}