@ttoss/forms 0.17.11 → 0.17.13

package/README.md

@@ -5,7 +5,8 @@
 ## Installation
 
 ```shell
-yarn add @ttoss/forms
+pnpm i @ttoss/forms @ttoss/react-i18n
+pnpm i --save-dev @ttoss/i18n-cli
 ```
 
 ## Quick Start
@@ -13,6 +14,7 @@ yarn add @ttoss/forms
 ```tsx
 import { Button } from '@ttoss/ui';
 import { Form, FormField, yupResolver, useForm, yup } from '@ttoss/forms';
+import { I18nProvider } from '@ttoss/react-i18n';
 
 const schema = yup.object({
   firstName: yup.string().required('First name is required'),
@@ -27,16 +29,20 @@ export const FormComponent = () => {
   });
 
   return (
-    <Form {...formMethods} onSubmit={action('onSubmit')}>
-      <FormField.Input name="firstName" label="First Name" />
-      <FormField.Input name="age" label="Age" />
-      <FormField.Checkbox name="receiveEmails" label="Receive Emails" />
-      <Button type="submit">Submit</Button>
-    </Form>
+    <I18nProvider>
+      <Form {...formMethods} onSubmit={action('onSubmit')}>
+        <FormField.Input name="firstName" label="First Name" />
+        <FormField.Input name="age" label="Age" />
+        <FormField.Checkbox name="receiveEmails" label="Receive Emails" />
+        <Button type="submit">Submit</Button>
+      </Form>
+    </I18nProvider>
   );
 };
 ```
 
+**WARNING:** I18n is necessary as `Forms` module has some integrations with it.
+
 ## FormFieldSelect support for Default Value
 
 FormFieldSelect has support for default values, by assigning the first option defined or the value passed to it in the parameter `defaultValue`.
@@ -148,4 +154,71 @@ const RenderForm = () => {
 };
 ```
 
-> NOTE: You can also use yup and all of API from react-hook-form importing `import { yup, useForm } from @ttoss/forms`
+## Yup Validation
+
+You can also use yup and all of API from react-hook-form importing `import { yup, useForm } from @ttoss/forms`
+
+```tsx
+const FirstNameForm = () => {
+  const schema = yup.object({
+    firstName: yup.string().required(),
+  });
+
+  const formMethods = useForm({
+    resolver: yupResolver(schema),
+  });
+
+  return (
+    <Form {...formMethods} onSubmit={onSubmit}>
+      <FormField
+        name="firstName"
+        label="First Name"
+        defaultValue={''}
+        render={({ field }) => {
+          return <Input {...field} />;
+        }}
+      />
+      <Button type="submit">Submit</Button>
+    </Form>
+  );
+};
+```
+
+When field is invalid according with schema requirements, it gonna return the default. In this example, for required fields, it gonna be `Field is required`.
+
+You can translate the message or change the generic message by configuring the messages in the json i18n definition. To use this, please, refer to the docs on [React-i18n](https://ttoss.dev/docs/modules/packages/react-i18n/) and [i18n-CLI](https://ttoss.dev/docs/modules/packages/i18n-cli/).
+
+### Custom Error messages
+
+You can, also, pass custom error messages to the validation constraints in schema. It's really recommended that you use i18n pattern to create your custom message.
+
+```tsx
+const ComponentForm = () => {
+  const {
+    intl: { formatMessage },
+  } = useI18n();
+
+  const schema = useMemo(() => {
+    return yup.object({
+      name: yup.string().required(
+        formatMessage({
+          defaultMessage: 'Name must be not null',
+          description: 'Name required constraint',
+        })
+      ),
+      age: yup.number().min(
+        18,
+        formatMessage(
+          {
+            defaultMessage: 'You should be {age} years old or more',
+            description: 'Min Age Constriant message',
+          },
+          { age: 18 }
+        )
+      ),
+    });
+  }, [formatMessage]);
+
+  // ...
+};
+```

package/dist/esm/index.js

@@ -1,5 +1,66 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
 
+// tsup.inject.js
+import * as React from "react";
+
+// src/i18n.ts
+import { defineMessage } from "@ttoss/react-i18n";
+import { setLocale } from "yup";
+setLocale({
+  mixed: {
+    required: defineMessage({
+      id: "MfWGyg",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Field is required"
+      }]
+    }),
+    notType: ({
+      type
+    }) => {
+      return {
+        ...defineMessage({
+          id: "ZhaPt0",
+          defaultMessage: [{
+            "type": 0,
+            "value": "Invalid Value for Field of type "
+          }, {
+            "type": 1,
+            "value": "type"
+          }]
+        }),
+        values: {
+          type
+        }
+      };
+    }
+  },
+  string: {
+    min: ({
+      min
+    }) => {
+      return {
+        ...defineMessage({
+          id: "D1C6fR",
+          defaultMessage: [{
+            "type": 0,
+            "value": "Field must be at least "
+          }, {
+            "type": 1,
+            "value": "min"
+          }, {
+            "type": 0,
+            "value": " characters"
+          }]
+        }),
+        values: {
+          min
+        }
+      };
+    }
+  }
+});
+
 // src/index.ts
 import { yupResolver } from "@hookform/resolvers/yup";
 export * from "react-hook-form";
@@ -34,9 +95,12 @@ import * as React2 from "react";
 
 // src/ErrorMessage.tsx
 import { useFormContext } from "react-hook-form";
+import { FormattedMessage } from "@ttoss/react-i18n";
 import { HelpText } from "@ttoss/ui";
-import { ErrorMessage as HookFormErrorMessage } from "@hookform/error-message";
 import { jsx as jsx2 } from "react/jsx-runtime";
+var isMessageDescriptor = possibleMessageDescriptor => {
+  return possibleMessageDescriptor !== void 0 && possibleMessageDescriptor.defaultMessage !== void 0;
+};
 var ErrorMessage = ({
   name,
   disabled
@@ -46,13 +110,17 @@ var ErrorMessage = ({
       errors
     }
   } = useFormContext();
-  return /* @__PURE__ */jsx2(HookFormErrorMessage, {
-    errors,
-    name,
-    as: /* @__PURE__ */jsx2(HelpText, {
-      negative: true,
-      disabled
-    })
+  const error = errors[name];
+  if (!error) return null;
+  const {
+    message
+  } = error;
+  return error && /* @__PURE__ */jsx2(HelpText, {
+    negative: true,
+    disabled,
+    children: isMessageDescriptor(message) ? /* @__PURE__ */jsx2(FormattedMessage, {
+      ...message
+    }) : message
   });
 };
 

package/dist/index.js

@@ -50,10 +50,55 @@ __export(src_exports, {
   FormGroup: () => FormGroup,
   useFormGroup: () => useFormGroup,
   yup: () => yup,
-  yupResolver: () => import_yup.yupResolver
+  yupResolver: () => import_yup2.yupResolver
 });
 module.exports = __toCommonJS(src_exports);
-var import_yup = require("@hookform/resolvers/yup");
+
+// tsup.inject.js
+var React = __toESM(require("react"));
+
+// src/i18n.ts
+var import_react_i18n = require("@ttoss/react-i18n");
+var import_yup = require("yup");
+(0, import_yup.setLocale)({
+  mixed: {
+    required: (0, import_react_i18n.defineMessage)({
+      defaultMessage: "Field is required",
+      description: "Field is required"
+    }),
+    notType: ({
+      type
+    }) => {
+      return {
+        ...(0, import_react_i18n.defineMessage)({
+          defaultMessage: "Invalid Value for Field of type {type}",
+          description: "Invalid Value"
+        }),
+        values: {
+          type
+        }
+      };
+    }
+  },
+  string: {
+    min: ({
+      min
+    }) => {
+      return {
+        ...(0, import_react_i18n.defineMessage)({
+          defaultMessage: "Field must be at least {min} characters",
+          description: "Min length field"
+        }),
+        values: {
+          min
+        }
+      };
+    }
+  }
+});
+
+// src/index.ts
+var import_yup2 = require("@hookform/resolvers/yup");
 __reExport(src_exports, require("react-hook-form"), module.exports);
 var yup = __toESM(require("yup"));
 
@@ -86,9 +131,12 @@ var React2 = __toESM(require("react"));
 
 // src/ErrorMessage.tsx
 var import_react_hook_form2 = require("react-hook-form");
+var import_react_i18n2 = require("@ttoss/react-i18n");
 var import_ui2 = require("@ttoss/ui");
-var import_error_message = require("@hookform/error-message");
 var import_jsx_runtime2 = require("react/jsx-runtime");
+var isMessageDescriptor = possibleMessageDescriptor => {
+  return possibleMessageDescriptor !== void 0 && possibleMessageDescriptor.defaultMessage !== void 0;
+};
 var ErrorMessage = ({
   name,
   disabled
@@ -98,13 +146,17 @@ var ErrorMessage = ({
       errors
     }
   } = (0, import_react_hook_form2.useFormContext)();
-  return /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_error_message.ErrorMessage, {
-    errors,
-    name,
-    as: /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_ui2.HelpText, {
-      negative: true,
-      disabled
-    })
+  const error = errors[name];
+  if (!error) return null;
+  const {
+    message
+  } = error;
+  return error && /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_ui2.HelpText, {
+    negative: true,
+    disabled,
+    children: isMessageDescriptor(message) ? /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_react_i18n2.FormattedMessage, {
+      ...message
+    }) : message
   });
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/forms",
-  "version": "0.17.11",
+  "version": "0.17.13",
   "license": "UNLICENSED",
   "author": "ttoss",
   "contributors": [
@@ -12,30 +12,33 @@
     "dist",
     "src"
   ],
-  "sideEffects": false,
+  "sideEffects": true,
   "typings": "dist/index.d.ts",
   "dependencies": {
-    "@hookform/error-message": "^2.0.1",
     "@hookform/resolvers": "^3.1.0",
     "react-hook-form": "^7.43.9",
     "yup": "^1.1.1"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
-    "@ttoss/ui": "^1.36.10"
+    "@ttoss/react-i18n": "^1.23.0",
+    "@ttoss/ui": "^1.36.11"
   },
   "devDependencies": {
     "@types/jest": "^29.5.1",
     "@types/react": "^18.2.6",
     "jest": "^29.5.0",
     "react": "^18.2.0",
+    "react-error-boundary": "^4.0.9",
     "react-hook-form": "^7.43.9",
     "theme-ui": "^0.15.7",
     "tsup": "^6.7.0",
     "yup": "^1.1.1",
     "@ttoss/config": "^1.30.0",
+    "@ttoss/i18n-cli": "^0.5.0",
+    "@ttoss/react-i18n": "^1.23.0",
     "@ttoss/test-utils": "^1.23.1",
-    "@ttoss/ui": "^1.36.10"
+    "@ttoss/ui": "^1.36.11"
   },
   "publishConfig": {
     "access": "public"

package/src/ErrorMessage.tsx

@@ -1,6 +1,18 @@
 import { FieldName, FieldValues, useFormContext } from 'react-hook-form';
+import { FormattedMessage, MessageDescriptor } from '@ttoss/react-i18n';
 import { HelpText } from '@ttoss/ui';
-import { ErrorMessage as HookFormErrorMessage } from '@hookform/error-message';
+
+type ModifiedDescriptor = MessageDescriptor & { values?: any };
+
+const isMessageDescriptor = (
+  possibleMessageDescriptor: unknown
+): possibleMessageDescriptor is ModifiedDescriptor => {
+  return (
+    possibleMessageDescriptor !== undefined &&
+    (possibleMessageDescriptor as ModifiedDescriptor).defaultMessage !==
+      undefined
+  );
+};
 
 export const ErrorMessage = <TFieldValues extends FieldValues = FieldValues>({
   name,
@@ -13,11 +25,21 @@ export const ErrorMessage = <TFieldValues extends FieldValues = FieldValues>({
     formState: { errors },
   } = useFormContext<TFieldValues>();
 
+  const error = errors[name];
+
+  if (!error) return null;
+
+  const { message } = error;
+
   return (
-    <HookFormErrorMessage
-      errors={errors}
-      name={name as any}
-      as={<HelpText negative disabled={disabled} />}
-    />
+    error && (
+      <HelpText negative disabled={disabled}>
+        {isMessageDescriptor(message) ? (
+          <FormattedMessage {...message} />
+        ) : (
+          (message as string)
+        )}
+      </HelpText>
+    )
   );
 };

package/src/i18n.ts

@@ -0,0 +1,31 @@
+import { defineMessage } from '@ttoss/react-i18n';
+import { setLocale } from 'yup';
+
+setLocale({
+  mixed: {
+    required: defineMessage({
+      defaultMessage: 'Field is required',
+      description: 'Field is required',
+    }),
+    notType: ({ type }) => {
+      return {
+        ...defineMessage({
+          defaultMessage: 'Invalid Value for Field of type {type}',
+          description: 'Invalid Value',
+        }),
+        values: { type },
+      };
+    },
+  },
+  string: {
+    min: ({ min }) => {
+      return {
+        ...defineMessage({
+          defaultMessage: 'Field must be at least {min} characters',
+          description: 'Min length field',
+        }),
+        values: { min },
+      };
+    },
+  },
+});

package/src/index.ts

@@ -1,3 +1,5 @@
+import './i18n';
+
 export { yupResolver } from '@hookform/resolvers/yup';
 export * from 'react-hook-form';
 export * as yup from 'yup';