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

package/dist/index.d.mts

@@ -124,7 +124,7 @@ declare function createSplittingContext<T extends Record<string, any>>(defaultVa
      * ```
      */
     Provider<NewT extends T = T>(props: {
-        value?: NewT;
+        value?: Partial<NewT>;
         children: ReactNode;
         /**
          * Whether to use memoization for the children.
@@ -135,6 +135,20 @@ declare function createSplittingContext<T extends Record<string, any>>(defaultVa
          * `any[]`: memoize the children with specific dependencies.
          */
         memo?: true | any[];
+        /**
+         * An object containing initial values that will be automatically converted into state variables using {@link useSplittingState} hook. Each property will create both a state value and its setter following the pattern: value/setValue.
+         *
+         * @example
+         * ```tsx
+         * <Provider
+         *  initializeStates={{
+         *    value: 0,
+         *  }}
+         * >
+         *   // Children will have access to: value, setValue
+         * </Provider>
+         */
+        initializeStates?: Partial<NewT>;
     }): ReactNode;
     /**
      * The hook to use the splitting context.
@@ -264,6 +278,14 @@ type FaasReactClientOptions = {
     /** @default `/` */
     baseUrl?: BaseUrl;
     options?: Options;
+    /**
+     * @example
+     * ```ts
+     * onError: (action, params) => async (res) => {
+     *   console.error(action, params, res)
+     * }
+     * ```
+     */
     onError?: OnError;
 };
 type FaasReactClientInstance = {
@@ -386,14 +408,25 @@ type FormInputElementProps = {
     onChange: (value: any) => void;
 };
 
-type FormRules = {
-    type?: 'string' | 'number';
-    required?: boolean;
-    custom?: (value: any) => Promise<FormError | undefined>;
+declare const FormDefaultLang: {
+    submit: string;
+    required: string;
+    string: string;
+    number: string;
 };
+type FormLang = typeof FormDefaultLang;
+
 type FormError = {
     message: string;
 };
+type FormRule<Options = any> = (value: any, options?: Options, lang?: FormLang) => Promise<FormError | undefined>;
+type InferRuleOption<T> = T extends (value: any, options: infer O, lang?: FormLang) => Promise<FormError | undefined> ? O : never;
+type FormRules = Record<string, FormRule>;
+type InferFormRulesOptions<T> = {
+    [K in keyof T]: InferRuleOption<T[K]>;
+};
+declare const FormDefaultRules: FormRules;
+type FormDefaultRulesOptions = InferFormRulesOptions<typeof FormDefaultRules>;
 
 type InferFormInputProps<T extends ComponentType<FormInputElementProps> | JSXElementConstructor<any>> = T extends ComponentType<FormInputElementProps> ? Omit<ComponentProps<T>, 'name' | 'value' | 'onChange'> : Omit<ComponentProps<T>, 'name' | 'value'>;
 type FormInputProps<FormElements extends FormElementTypes = FormElementTypes> = {
@@ -401,9 +434,9 @@ type FormInputProps<FormElements extends FormElementTypes = FormElementTypes> =
     props?: InferFormInputProps<FormElements['Input']>;
 };
 
-type FormLabelElementProps<FormElements extends FormElementTypes = FormElementTypes> = {
+type FormLabelElementProps<FormElements extends FormElementTypes = FormElementTypes, FormRulesOptions extends Record<string, any> = FormDefaultRulesOptions> = {
     name: string;
-    rules?: FormRules;
+    rules?: FormRulesOptions;
     title?: ReactNode;
     description?: ReactNode;
     Label?: FormElements['Label'];
@@ -417,22 +450,26 @@ type FormElementTypes = {
 };
 declare const FormDefaultElements: FormElementTypes;
 
-type FormProps<Values extends Record<string, any> = Record<string, any>, FormElements extends FormElementTypes = FormElementTypes> = {
-    items: FormLabelElementProps<FormElements>[];
+type FormProps<Values extends Record<string, any> = Record<string, any>, FormElements extends FormElementTypes = FormElementTypes, Rules extends FormRules = typeof FormDefaultRules> = {
+    items: FormLabelElementProps<FormElements, InferFormRulesOptions<Rules>>[];
     onSubmit?: (values: Values) => Promise<void>;
-    elements?: Partial<FormElements>;
+    Elements?: Partial<FormElements>;
+    lang?: Partial<FormLang>;
     defaultValues?: Values;
+    rules?: typeof FormDefaultRules & Rules;
 };
-declare function FormContainer<Values extends Record<string, any> = Record<string, any>, FormElements extends FormElementTypes = FormElementTypes>({ defaultValues, elements, ...props }: FormProps<Values, FormElements>): react_jsx_runtime.JSX.Element;
+declare function FormContainer<Values extends Record<string, any> = Record<string, any>, FormElements extends FormElementTypes = FormElementTypes, Rules extends FormRules = typeof FormDefaultRules>({ defaultValues, Elements, rules, lang, ...props }: FormProps<Values, FormElements, Rules>): react_jsx_runtime.JSX.Element;
 declare namespace FormContainer {
     var displayName: string;
     var whyDidYouRender: boolean;
 }
 
-type FormContextProps<Values extends Record<string, any> = Record<string, any>> = {
+type FormContextProps<Values extends Record<string, any> = Record<string, any>, Rules extends FormRules = typeof FormDefaultRules> = {
     items: FormLabelElementProps[];
     onSubmit: (values: Values) => Promise<void>;
     Elements: FormElementTypes;
+    lang: FormLang;
+    rules: typeof FormDefaultRules & Rules;
     submitting: boolean;
     setSubmitting: Dispatch<SetStateAction<boolean>>;
     values: Values;
@@ -440,11 +477,12 @@ type FormContextProps<Values extends Record<string, any> = Record<string, any>>
     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;
+declare const FormContextProvider: <NewT extends FormContextProps<Record<string, any>, FormRules> = FormContextProps<Record<string, any>, FormRules>>(props: {
+    value?: Partial<NewT>;
     children: react.ReactNode;
     memo?: true | any[];
+    initializeStates?: Partial<NewT>;
 }) => react.ReactNode;
-declare const useFormContext: <NewT extends FormContextProps<Record<string, any>> = FormContextProps<Record<string, any>>>() => Readonly<NewT>;
+declare const useFormContext: <NewT extends FormContextProps<Record<string, any>, FormRules> = FormContextProps<Record<string, any>, FormRules>>() => Readonly<NewT>;
 
 export { ErrorBoundary, type ErrorBoundaryProps, type ErrorChildrenProps, type FaasDataInjection, FaasDataWrapper, type FaasDataWrapperProps, FaasReactClient, type FaasReactClientInstance, type FaasReactClientOptions, FormContainer as Form, type FormButtonElementProps, type FormContextProps, FormContextProvider, FormDefaultElements, type FormElementTypes, type FormInputElementProps, type FormLabelElementProps, type FormProps, type OnError, OptionalWrapper, type OptionalWrapperProps, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, type useFaasOptions, useFormContext, useSplittingState, withFaasData };

package/dist/index.d.ts

@@ -124,7 +124,7 @@ declare function createSplittingContext<T extends Record<string, any>>(defaultVa
      * ```
      */
     Provider<NewT extends T = T>(props: {
-        value?: NewT;
+        value?: Partial<NewT>;
         children: ReactNode;
         /**
          * Whether to use memoization for the children.
@@ -135,6 +135,20 @@ declare function createSplittingContext<T extends Record<string, any>>(defaultVa
          * `any[]`: memoize the children with specific dependencies.
          */
         memo?: true | any[];
+        /**
+         * An object containing initial values that will be automatically converted into state variables using {@link useSplittingState} hook. Each property will create both a state value and its setter following the pattern: value/setValue.
+         *
+         * @example
+         * ```tsx
+         * <Provider
+         *  initializeStates={{
+         *    value: 0,
+         *  }}
+         * >
+         *   // Children will have access to: value, setValue
+         * </Provider>
+         */
+        initializeStates?: Partial<NewT>;
     }): ReactNode;
     /**
      * The hook to use the splitting context.
@@ -264,6 +278,14 @@ type FaasReactClientOptions = {
     /** @default `/` */
     baseUrl?: BaseUrl;
     options?: Options;
+    /**
+     * @example
+     * ```ts
+     * onError: (action, params) => async (res) => {
+     *   console.error(action, params, res)
+     * }
+     * ```
+     */
     onError?: OnError;
 };
 type FaasReactClientInstance = {
@@ -386,14 +408,25 @@ type FormInputElementProps = {
     onChange: (value: any) => void;
 };
 
-type FormRules = {
-    type?: 'string' | 'number';
-    required?: boolean;
-    custom?: (value: any) => Promise<FormError | undefined>;
+declare const FormDefaultLang: {
+    submit: string;
+    required: string;
+    string: string;
+    number: string;
 };
+type FormLang = typeof FormDefaultLang;
+
 type FormError = {
     message: string;
 };
+type FormRule<Options = any> = (value: any, options?: Options, lang?: FormLang) => Promise<FormError | undefined>;
+type InferRuleOption<T> = T extends (value: any, options: infer O, lang?: FormLang) => Promise<FormError | undefined> ? O : never;
+type FormRules = Record<string, FormRule>;
+type InferFormRulesOptions<T> = {
+    [K in keyof T]: InferRuleOption<T[K]>;
+};
+declare const FormDefaultRules: FormRules;
+type FormDefaultRulesOptions = InferFormRulesOptions<typeof FormDefaultRules>;
 
 type InferFormInputProps<T extends ComponentType<FormInputElementProps> | JSXElementConstructor<any>> = T extends ComponentType<FormInputElementProps> ? Omit<ComponentProps<T>, 'name' | 'value' | 'onChange'> : Omit<ComponentProps<T>, 'name' | 'value'>;
 type FormInputProps<FormElements extends FormElementTypes = FormElementTypes> = {
@@ -401,9 +434,9 @@ type FormInputProps<FormElements extends FormElementTypes = FormElementTypes> =
     props?: InferFormInputProps<FormElements['Input']>;
 };
 
-type FormLabelElementProps<FormElements extends FormElementTypes = FormElementTypes> = {
+type FormLabelElementProps<FormElements extends FormElementTypes = FormElementTypes, FormRulesOptions extends Record<string, any> = FormDefaultRulesOptions> = {
     name: string;
-    rules?: FormRules;
+    rules?: FormRulesOptions;
     title?: ReactNode;
     description?: ReactNode;
     Label?: FormElements['Label'];
@@ -417,22 +450,26 @@ type FormElementTypes = {
 };
 declare const FormDefaultElements: FormElementTypes;
 
-type FormProps<Values extends Record<string, any> = Record<string, any>, FormElements extends FormElementTypes = FormElementTypes> = {
-    items: FormLabelElementProps<FormElements>[];
+type FormProps<Values extends Record<string, any> = Record<string, any>, FormElements extends FormElementTypes = FormElementTypes, Rules extends FormRules = typeof FormDefaultRules> = {
+    items: FormLabelElementProps<FormElements, InferFormRulesOptions<Rules>>[];
     onSubmit?: (values: Values) => Promise<void>;
-    elements?: Partial<FormElements>;
+    Elements?: Partial<FormElements>;
+    lang?: Partial<FormLang>;
     defaultValues?: Values;
+    rules?: typeof FormDefaultRules & Rules;
 };
-declare function FormContainer<Values extends Record<string, any> = Record<string, any>, FormElements extends FormElementTypes = FormElementTypes>({ defaultValues, elements, ...props }: FormProps<Values, FormElements>): react_jsx_runtime.JSX.Element;
+declare function FormContainer<Values extends Record<string, any> = Record<string, any>, FormElements extends FormElementTypes = FormElementTypes, Rules extends FormRules = typeof FormDefaultRules>({ defaultValues, Elements, rules, lang, ...props }: FormProps<Values, FormElements, Rules>): react_jsx_runtime.JSX.Element;
 declare namespace FormContainer {
     var displayName: string;
     var whyDidYouRender: boolean;
 }
 
-type FormContextProps<Values extends Record<string, any> = Record<string, any>> = {
+type FormContextProps<Values extends Record<string, any> = Record<string, any>, Rules extends FormRules = typeof FormDefaultRules> = {
     items: FormLabelElementProps[];
     onSubmit: (values: Values) => Promise<void>;
     Elements: FormElementTypes;
+    lang: FormLang;
+    rules: typeof FormDefaultRules & Rules;
     submitting: boolean;
     setSubmitting: Dispatch<SetStateAction<boolean>>;
     values: Values;
@@ -440,11 +477,12 @@ type FormContextProps<Values extends Record<string, any> = Record<string, any>>
     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;
+declare const FormContextProvider: <NewT extends FormContextProps<Record<string, any>, FormRules> = FormContextProps<Record<string, any>, FormRules>>(props: {
+    value?: Partial<NewT>;
     children: react.ReactNode;
     memo?: true | any[];
+    initializeStates?: Partial<NewT>;
 }) => react.ReactNode;
-declare const useFormContext: <NewT extends FormContextProps<Record<string, any>> = FormContextProps<Record<string, any>>>() => Readonly<NewT>;
+declare const useFormContext: <NewT extends FormContextProps<Record<string, any>, FormRules> = FormContextProps<Record<string, any>, FormRules>>() => Readonly<NewT>;
 
 export { ErrorBoundary, type ErrorBoundaryProps, type ErrorChildrenProps, type FaasDataInjection, FaasDataWrapper, type FaasDataWrapperProps, FaasReactClient, type FaasReactClientInstance, type FaasReactClientOptions, FormContainer as Form, type FormButtonElementProps, type FormContextProps, FormContextProvider, FormDefaultElements, type FormElementTypes, type FormInputElementProps, type FormLabelElementProps, type FormProps, type OnError, OptionalWrapper, type OptionalWrapperProps, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, type useFaasOptions, useFormContext, useSplittingState, withFaasData };

package/dist/index.js

@@ -20,6 +20,7 @@ function equal(a, b) {
   if ((a === null || a === void 0) && (b === null || b === void 0))
     return true;
   if (typeof a !== typeof b) return false;
+  if (b === null || b === void 0) return false;
   const ctor = a.constructor;
   if (ctor !== b.constructor) return false;
   switch (ctor) {
@@ -79,6 +80,17 @@ function useEqualCallback(callback, dependencies) {
     useEqualMemoize(dependencies)
   );
 }
+function useSplittingState(initialStates) {
+  const states = {};
+  for (const key of Object.keys(initialStates)) {
+    const state = react.useState(initialStates[key]);
+    Object.assign(states, {
+      [key]: state[0],
+      [`set${String(key).charAt(0).toUpperCase()}${String(key).slice(1)}`]: state[1]
+    });
+  }
+  return states;
+}
 function createSplittingContext(defaultValue) {
   const keys = Array.isArray(defaultValue) ? defaultValue : Object.keys(defaultValue);
   const defaultValues = Array.isArray(defaultValue) ? keys.reduce((prev, cur) => {
@@ -88,13 +100,14 @@ function createSplittingContext(defaultValue) {
   const contexts = {};
   for (const key of keys) contexts[key] = react.createContext(defaultValues[key]);
   function Provider(props) {
+    const states = props.initializeStates ? useSplittingState(props.initializeStates) : {};
     let children = props.memo ? useEqualMemo(
       () => props.children,
       props.memo === true ? [] : props.memo
     ) : props.children;
     for (const key of keys) {
       const Context = contexts[key];
-      const value = props.value?.[key] ?? defaultValues[key];
+      const value = props.value?.[key] ?? states[key] ?? defaultValues[key];
       children = /* @__PURE__ */ jsxRuntime.jsx(Context.Provider, { value, children });
     }
     return children;
@@ -118,17 +131,6 @@ function createSplittingContext(defaultValue) {
     use
   };
 }
-function useSplittingState(initialStates) {
-  const states = {};
-  for (const key of Object.keys(initialStates)) {
-    const state = react.useState(initialStates[key]);
-    Object.assign(states, {
-      [key]: state[0],
-      [`set${String(key).charAt(0).toUpperCase()}${String(key).slice(1)}`]: state[1]
-    });
-  }
-  return states;
-}
 function FaasDataWrapper(props) {
   const request = getClient(props.baseUrl).useFaas(
     props.action,
@@ -347,12 +349,14 @@ var FormContext = createSplittingContext([
   "items",
   "onSubmit",
   "Elements",
+  "lang",
   "submitting",
   "setSubmitting",
   "values",
   "setValues",
   "errors",
-  "setErrors"
+  "setErrors",
+  "rules"
 ]);
 var FormContextProvider = FormContext.Provider;
 var useFormContext = FormContext.use;
@@ -371,21 +375,48 @@ 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) {
+var FormDefaultRules = {
+  required: async (value, _, lang) => {
+    if (value === null || value === void 0 || value === "" || Number.isNaN(value)) {
+      return { message: lang?.required };
+    }
+  },
+  type: async (value, options, lang) => {
+    switch (options) {
+      case "string":
+        if (typeof value !== "string") {
+          return { message: lang?.string };
+        }
+        break;
+      case "number":
+        if (Number.isNaN(Number(value))) {
+          return { message: lang?.number };
+        }
+        break;
+    }
+  },
+  custom: async (value, options) => {
+    return options(value);
+  }
+};
+async function validValues(rules, items, values, lang) {
   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;
+    const rulesOptions = item.rules;
+    if (rulesOptions) {
+      for (const [name, options] of Object.entries(rulesOptions)) {
+        const handler = rules[name];
+        if (!handler) {
+          console.warn(`Rule "${name}" is not defined`);
+          continue;
+        }
+        const error = await handler(value, options, lang);
+        if (error) {
+          errors[item.name] = error;
+          break;
+        }
+      }
     }
   }
   return errors;
@@ -398,7 +429,9 @@ function FormFooter() {
     values,
     Elements,
     items,
-    setErrors
+    setErrors,
+    lang,
+    rules
   } = useFormContext();
   return /* @__PURE__ */ jsxRuntime.jsx(
     Elements.Button,
@@ -406,7 +439,7 @@ function FormFooter() {
       disabled: submitting,
       submit: async () => {
         setSubmitting(true);
-        const errors = await validValues(items, values);
+        const errors = await validValues(rules, items, values, lang);
         if (Object.keys(errors).length) {
           setErrors(errors);
           setSubmitting(false);
@@ -414,7 +447,7 @@ function FormFooter() {
         }
         onSubmit(values).finally(() => setSubmitting(false));
       },
-      children: "Submit"
+      children: lang.submit
     }
   );
 }
@@ -490,26 +523,42 @@ var FormDefaultElements = {
   Input: FormInputElement,
   Button: FormButtonElement
 };
+
+// src/Form/lang.ts
+var FormDefaultLang = {
+  submit: "Submit",
+  required: "This field is required",
+  string: "This field must be a string",
+  number: "This field must be a number"
+};
 function mergeValues(items, defaultValues = {}) {
   const values = {};
   for (const item of items)
     values[item.name] = defaultValues[item.name] ?? "";
   return values;
 }
-function FormContainer({ defaultValues, elements, ...props }) {
-  const states = useSplittingState({
-    values: mergeValues(props.items, defaultValues),
-    errors: {},
-    submitting: false,
-    Elements: Object.assign(FormDefaultElements, elements)
-  });
+function FormContainer({
+  defaultValues,
+  Elements,
+  rules,
+  lang,
+  ...props
+}) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     FormContextProvider,
     {
-      value: {
-        ...states,
-        ...props
+      initializeStates: {
+        values: mergeValues(props.items, defaultValues),
+        errors: {},
+        submitting: false,
+        Elements: Object.assign(
+          FormDefaultElements,
+          Elements
+        ),
+        lang: Object.assign(FormDefaultLang, lang),
+        rules: Object.assign(FormDefaultRules, rules)
       },
+      value: props,
       memo: true,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(FormBody, {}),

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { forwardRef, useRef, useMemo, useEffect, useCallback, createContext, useState, cloneElement, Component, useContext } from 'react';
+import { forwardRef, useRef, useMemo, useEffect, useCallback, useState, createContext, cloneElement, Component, useContext } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { FaasBrowserClient } from '@faasjs/browser';
 
@@ -18,6 +18,7 @@ function equal(a, b) {
   if ((a === null || a === void 0) && (b === null || b === void 0))
     return true;
   if (typeof a !== typeof b) return false;
+  if (b === null || b === void 0) return false;
   const ctor = a.constructor;
   if (ctor !== b.constructor) return false;
   switch (ctor) {
@@ -77,6 +78,17 @@ function useEqualCallback(callback, dependencies) {
     useEqualMemoize(dependencies)
   );
 }
+function useSplittingState(initialStates) {
+  const states = {};
+  for (const key of Object.keys(initialStates)) {
+    const state = useState(initialStates[key]);
+    Object.assign(states, {
+      [key]: state[0],
+      [`set${String(key).charAt(0).toUpperCase()}${String(key).slice(1)}`]: state[1]
+    });
+  }
+  return states;
+}
 function createSplittingContext(defaultValue) {
   const keys = Array.isArray(defaultValue) ? defaultValue : Object.keys(defaultValue);
   const defaultValues = Array.isArray(defaultValue) ? keys.reduce((prev, cur) => {
@@ -86,13 +98,14 @@ function createSplittingContext(defaultValue) {
   const contexts = {};
   for (const key of keys) contexts[key] = createContext(defaultValues[key]);
   function Provider(props) {
+    const states = props.initializeStates ? useSplittingState(props.initializeStates) : {};
     let children = props.memo ? useEqualMemo(
       () => props.children,
       props.memo === true ? [] : props.memo
     ) : props.children;
     for (const key of keys) {
       const Context = contexts[key];
-      const value = props.value?.[key] ?? defaultValues[key];
+      const value = props.value?.[key] ?? states[key] ?? defaultValues[key];
       children = /* @__PURE__ */ jsx(Context.Provider, { value, children });
     }
     return children;
@@ -116,17 +129,6 @@ function createSplittingContext(defaultValue) {
     use
   };
 }
-function useSplittingState(initialStates) {
-  const states = {};
-  for (const key of Object.keys(initialStates)) {
-    const state = useState(initialStates[key]);
-    Object.assign(states, {
-      [key]: state[0],
-      [`set${String(key).charAt(0).toUpperCase()}${String(key).slice(1)}`]: state[1]
-    });
-  }
-  return states;
-}
 function FaasDataWrapper(props) {
   const request = getClient(props.baseUrl).useFaas(
     props.action,
@@ -345,12 +347,14 @@ var FormContext = createSplittingContext([
   "items",
   "onSubmit",
   "Elements",
+  "lang",
   "submitting",
   "setSubmitting",
   "values",
   "setValues",
   "errors",
-  "setErrors"
+  "setErrors",
+  "rules"
 ]);
 var FormContextProvider = FormContext.Provider;
 var useFormContext = FormContext.use;
@@ -369,21 +373,48 @@ 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) {
+var FormDefaultRules = {
+  required: async (value, _, lang) => {
+    if (value === null || value === void 0 || value === "" || Number.isNaN(value)) {
+      return { message: lang?.required };
+    }
+  },
+  type: async (value, options, lang) => {
+    switch (options) {
+      case "string":
+        if (typeof value !== "string") {
+          return { message: lang?.string };
+        }
+        break;
+      case "number":
+        if (Number.isNaN(Number(value))) {
+          return { message: lang?.number };
+        }
+        break;
+    }
+  },
+  custom: async (value, options) => {
+    return options(value);
+  }
+};
+async function validValues(rules, items, values, lang) {
   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;
+    const rulesOptions = item.rules;
+    if (rulesOptions) {
+      for (const [name, options] of Object.entries(rulesOptions)) {
+        const handler = rules[name];
+        if (!handler) {
+          console.warn(`Rule "${name}" is not defined`);
+          continue;
+        }
+        const error = await handler(value, options, lang);
+        if (error) {
+          errors[item.name] = error;
+          break;
+        }
+      }
     }
   }
   return errors;
@@ -396,7 +427,9 @@ function FormFooter() {
     values,
     Elements,
     items,
-    setErrors
+    setErrors,
+    lang,
+    rules
   } = useFormContext();
   return /* @__PURE__ */ jsx(
     Elements.Button,
@@ -404,7 +437,7 @@ function FormFooter() {
       disabled: submitting,
       submit: async () => {
         setSubmitting(true);
-        const errors = await validValues(items, values);
+        const errors = await validValues(rules, items, values, lang);
         if (Object.keys(errors).length) {
           setErrors(errors);
           setSubmitting(false);
@@ -412,7 +445,7 @@ function FormFooter() {
         }
         onSubmit(values).finally(() => setSubmitting(false));
       },
-      children: "Submit"
+      children: lang.submit
     }
   );
 }
@@ -488,26 +521,42 @@ var FormDefaultElements = {
   Input: FormInputElement,
   Button: FormButtonElement
 };
+
+// src/Form/lang.ts
+var FormDefaultLang = {
+  submit: "Submit",
+  required: "This field is required",
+  string: "This field must be a string",
+  number: "This field must be a number"
+};
 function mergeValues(items, defaultValues = {}) {
   const values = {};
   for (const item of items)
     values[item.name] = defaultValues[item.name] ?? "";
   return values;
 }
-function FormContainer({ defaultValues, elements, ...props }) {
-  const states = useSplittingState({
-    values: mergeValues(props.items, defaultValues),
-    errors: {},
-    submitting: false,
-    Elements: Object.assign(FormDefaultElements, elements)
-  });
+function FormContainer({
+  defaultValues,
+  Elements,
+  rules,
+  lang,
+  ...props
+}) {
   return /* @__PURE__ */ jsxs(
     FormContextProvider,
     {
-      value: {
-        ...states,
-        ...props
+      initializeStates: {
+        values: mergeValues(props.items, defaultValues),
+        errors: {},
+        submitting: false,
+        Elements: Object.assign(
+          FormDefaultElements,
+          Elements
+        ),
+        lang: Object.assign(FormDefaultLang, lang),
+        rules: Object.assign(FormDefaultRules, rules)
       },
+      value: props,
       memo: true,
       children: [
         /* @__PURE__ */ jsx(FormBody, {}),

package/package.json

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