@faasjs/react 3.7.0-beta.4 → 3.7.0-beta.5

package/dist/index.d.mts

@@ -376,8 +376,8 @@ declare const OptionalWrapper: React.FC<OptionalWrapperProps> & {
 
 type FormButtonElementProps = {
     children?: React.ReactNode;
-    disabled?: boolean;
-    submit?: () => void;
+    disabled: boolean;
+    submit: () => Promise<void>;
 };
 
 type FormInputElementProps = {
@@ -389,6 +389,10 @@ type FormInputElementProps = {
 type FormRules = {
     type?: 'string' | 'number';
     required?: boolean;
+    custom?: (value: any) => Promise<FormError | undefined>;
+};
+type FormError = {
+    message: string;
 };
 
 type InferFormInputProps<T extends ComponentType<FormInputElementProps> | JSXElementConstructor<any>> = T extends ComponentType<FormInputElementProps> ? Omit<ComponentProps<T>, 'name' | 'value' | 'onChange'> : Omit<ComponentProps<T>, 'name' | 'value'>;
@@ -430,9 +434,11 @@ type FormContextProps<Values extends Record<string, any> = Record<string, any>>
     onSubmit: (values: Values) => Promise<void>;
     Elements: FormElementTypes;
     submitting: boolean;
-    setSubmitting: React.Dispatch<React.SetStateAction<boolean>>;
+    setSubmitting: Dispatch<SetStateAction<boolean>>;
     values: Values;
-    setValues: React.Dispatch<React.SetStateAction<Values>>;
+    setValues: Dispatch<SetStateAction<Values>>;
+    errors: Record<string, FormError>;
+    setErrors: Dispatch<SetStateAction<Record<string, FormError>>>;
 };
 declare const FormContextProvider: <NewT extends FormContextProps<Record<string, any>> = FormContextProps<Record<string, any>>>(props: {
     value?: NewT;

package/dist/index.d.ts

@@ -376,8 +376,8 @@ declare const OptionalWrapper: React.FC<OptionalWrapperProps> & {
 
 type FormButtonElementProps = {
     children?: React.ReactNode;
-    disabled?: boolean;
-    submit?: () => void;
+    disabled: boolean;
+    submit: () => Promise<void>;
 };
 
 type FormInputElementProps = {
@@ -389,6 +389,10 @@ type FormInputElementProps = {
 type FormRules = {
     type?: 'string' | 'number';
     required?: boolean;
+    custom?: (value: any) => Promise<FormError | undefined>;
+};
+type FormError = {
+    message: string;
 };
 
 type InferFormInputProps<T extends ComponentType<FormInputElementProps> | JSXElementConstructor<any>> = T extends ComponentType<FormInputElementProps> ? Omit<ComponentProps<T>, 'name' | 'value' | 'onChange'> : Omit<ComponentProps<T>, 'name' | 'value'>;
@@ -430,9 +434,11 @@ type FormContextProps<Values extends Record<string, any> = Record<string, any>>
     onSubmit: (values: Values) => Promise<void>;
     Elements: FormElementTypes;
     submitting: boolean;
-    setSubmitting: React.Dispatch<React.SetStateAction<boolean>>;
+    setSubmitting: Dispatch<SetStateAction<boolean>>;
     values: Values;
-    setValues: React.Dispatch<React.SetStateAction<Values>>;
+    setValues: Dispatch<SetStateAction<Values>>;
+    errors: Record<string, FormError>;
+    setErrors: Dispatch<SetStateAction<Record<string, FormError>>>;
 };
 declare const FormContextProvider: <NewT extends FormContextProps<Record<string, any>> = FormContextProps<Record<string, any>>>(props: {
     value?: NewT;

package/dist/index.js

@@ -350,7 +350,9 @@ var FormContext = createSplittingContext([
   "submitting",
   "setSubmitting",
   "values",
-  "setValues"
+  "setValues",
+  "errors",
+  "setErrors"
 ]);
 var FormContextProvider = FormContext.Provider;
 var useFormContext = FormContext.use;
@@ -367,14 +369,49 @@ function FormBody() {
 }
 FormBody.displayName = "FormBody";
 FormBody.whyDidYouRender = true;
+
+// src/Form/rules.ts
+async function validValue(rules, value) {
+  if (rules.required && (value === null || value === void 0 || value === "" || Number.isNaN(value)))
+    return { message: "This field is required" };
+  if (rules.type === "number" && Number.isNaN(Number(value)))
+    return { message: "This field must be a number" };
+  return rules.custom?.(value);
+}
+async function validValues(items, values) {
+  const errors = {};
+  for (const item of items) {
+    const value = values[item.name];
+    const rules = item.rules;
+    if (rules) {
+      const error = await validValue(rules, value);
+      if (error) errors[item.name] = error;
+    }
+  }
+  return errors;
+}
 function FormFooter() {
-  const { submitting, setSubmitting, onSubmit, values, Elements } = useFormContext();
+  const {
+    submitting,
+    setSubmitting,
+    onSubmit,
+    values,
+    Elements,
+    items,
+    setErrors
+  } = useFormContext();
   return /* @__PURE__ */ jsxRuntime.jsx(
     Elements.Button,
     {
       disabled: submitting,
-      submit: () => {
+      submit: async () => {
         setSubmitting(true);
+        const errors = await validValues(items, values);
+        if (Object.keys(errors).length) {
+          setErrors(errors);
+          setSubmitting(false);
+          return;
+        }
         onSubmit(values).finally(() => setSubmitting(false));
       },
       children: "Submit"
@@ -406,7 +443,7 @@ var FormLabelElement = ({
   Label,
   input
 }) => {
-  const { values, setValues } = useFormContext();
+  const { values, setValues, errors } = useFormContext();
   if (Label)
     return /* @__PURE__ */ jsxRuntime.jsx(
       Label,
@@ -440,7 +477,8 @@ var FormLabelElement = ({
         }))
       }
     ),
-    description
+    description,
+    errors[name]?.message
   ] });
 };
 FormLabelElement.displayName = "FormLabelElement";
@@ -461,6 +499,7 @@ function mergeValues(items, defaultValues = {}) {
 function FormContainer({ defaultValues, elements, ...props }) {
   const states = useSplittingState({
     values: mergeValues(props.items, defaultValues),
+    errors: {},
     submitting: false,
     Elements: Object.assign(FormDefaultElements, elements)
   });

package/dist/index.mjs

@@ -348,7 +348,9 @@ var FormContext = createSplittingContext([
   "submitting",
   "setSubmitting",
   "values",
-  "setValues"
+  "setValues",
+  "errors",
+  "setErrors"
 ]);
 var FormContextProvider = FormContext.Provider;
 var useFormContext = FormContext.use;
@@ -365,14 +367,49 @@ function FormBody() {
 }
 FormBody.displayName = "FormBody";
 FormBody.whyDidYouRender = true;
+
+// src/Form/rules.ts
+async function validValue(rules, value) {
+  if (rules.required && (value === null || value === void 0 || value === "" || Number.isNaN(value)))
+    return { message: "This field is required" };
+  if (rules.type === "number" && Number.isNaN(Number(value)))
+    return { message: "This field must be a number" };
+  return rules.custom?.(value);
+}
+async function validValues(items, values) {
+  const errors = {};
+  for (const item of items) {
+    const value = values[item.name];
+    const rules = item.rules;
+    if (rules) {
+      const error = await validValue(rules, value);
+      if (error) errors[item.name] = error;
+    }
+  }
+  return errors;
+}
 function FormFooter() {
-  const { submitting, setSubmitting, onSubmit, values, Elements } = useFormContext();
+  const {
+    submitting,
+    setSubmitting,
+    onSubmit,
+    values,
+    Elements,
+    items,
+    setErrors
+  } = useFormContext();
   return /* @__PURE__ */ jsx(
     Elements.Button,
     {
       disabled: submitting,
-      submit: () => {
+      submit: async () => {
         setSubmitting(true);
+        const errors = await validValues(items, values);
+        if (Object.keys(errors).length) {
+          setErrors(errors);
+          setSubmitting(false);
+          return;
+        }
         onSubmit(values).finally(() => setSubmitting(false));
       },
       children: "Submit"
@@ -404,7 +441,7 @@ var FormLabelElement = ({
   Label,
   input
 }) => {
-  const { values, setValues } = useFormContext();
+  const { values, setValues, errors } = useFormContext();
   if (Label)
     return /* @__PURE__ */ jsx(
       Label,
@@ -438,7 +475,8 @@ var FormLabelElement = ({
         }))
       }
     ),
-    description
+    description,
+    errors[name]?.message
   ] });
 };
 FormLabelElement.displayName = "FormLabelElement";
@@ -459,6 +497,7 @@ function mergeValues(items, defaultValues = {}) {
 function FormContainer({ defaultValues, elements, ...props }) {
   const states = useSplittingState({
     values: mergeValues(props.items, defaultValues),
+    errors: {},
     submitting: false,
     Elements: Object.assign(FormDefaultElements, elements)
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faasjs/react",
-  "version": "3.7.0-beta.4",
+  "version": "3.7.0-beta.5",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -34,10 +34,10 @@
     "dist"
   ],
   "peerDependencies": {
-    "@faasjs/browser": "3.7.0-beta.4"
+    "@faasjs/browser": "3.7.0-beta.5"
   },
   "devDependencies": {
-    "@faasjs/browser": "3.7.0-beta.4",
+    "@faasjs/browser": "3.7.0-beta.5",
     "@types/react": "*",
     "react": "*"
   },