@faasjs/react 3.7.0-beta.6 → 3.7.0-beta.8

package/README.md

@@ -34,7 +34,7 @@ React plugin for FaasJS.
 ## Install
 
 ```sh
-npm install @faasjs/react
+npm install @faasjs/react react
 ```
 
 ## Functions
@@ -46,6 +46,7 @@ npm install @faasjs/react
 - [FaasReactClient](functions/FaasReactClient.md)
 - [Form](functions/Form.md)
 - [FormContextProvider](functions/FormContextProvider.md)
+- [FormItem](functions/FormItem.md)
 - [getClient](functions/getClient.md)
 - [OptionalWrapper](functions/OptionalWrapper.md)
 - [useConstant](functions/useConstant.md)
@@ -56,6 +57,7 @@ npm install @faasjs/react
 - [useFaas](functions/useFaas.md)
 - [useFormContext](functions/useFormContext.md)
 - [useSplittingState](functions/useSplittingState.md)
+- [validValues](functions/validValues.md)
 - [withFaasData](functions/withFaasData.md)
 
 ## Classes
@@ -80,10 +82,16 @@ npm install @faasjs/react
 - [FaasReactClientOptions](type-aliases/FaasReactClientOptions.md)
 - [FormButtonElementProps](type-aliases/FormButtonElementProps.md)
 - [FormContextProps](type-aliases/FormContextProps.md)
+- [FormDefaultRulesOptions](type-aliases/FormDefaultRulesOptions.md)
 - [FormElementTypes](type-aliases/FormElementTypes.md)
 - [FormInputElementProps](type-aliases/FormInputElementProps.md)
+- [FormItemName](type-aliases/FormItemName.md)
+- [FormItemProps](type-aliases/FormItemProps.md)
 - [FormLabelElementProps](type-aliases/FormLabelElementProps.md)
 - [FormProps](type-aliases/FormProps.md)
+- [FormRule](type-aliases/FormRule.md)
+- [FormRules](type-aliases/FormRules.md)
+- [InferFormRulesOptions](type-aliases/InferFormRulesOptions.md)
 - [OnError](type-aliases/OnError.md)
 - [OptionalWrapperProps](type-aliases/OptionalWrapperProps.md)
 - [Options](type-aliases/Options.md)
@@ -93,3 +101,4 @@ npm install @faasjs/react
 ## Variables
 
 - [FormDefaultElements](variables/FormDefaultElements.md)
+- [FormDefaultRules](variables/FormDefaultRules.md)

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.
@@ -394,21 +408,39 @@ type FormInputElementProps = {
     onChange: (value: any) => void;
 };
 
+type FormLabelElementProps = {
+    name: string;
+    title?: ReactNode;
+    description?: ReactNode;
+    error?: Error;
+    /** as Input element */
+    children: ReactNode;
+};
+
+type FormElementTypes = {
+    Label: ComponentType<FormLabelElementProps>;
+    Input: ComponentType<FormInputElementProps>;
+    Button: ComponentType<FormButtonElementProps>;
+};
+declare const FormDefaultElements: FormElementTypes;
+
 declare const FormDefaultLang: {
     submit: string;
     required: string;
+    string: string;
     number: string;
 };
 type FormLang = typeof FormDefaultLang;
 
-type FormRules = {
-    type?: 'string' | 'number';
-    required?: boolean;
-    custom?: (value: any) => Promise<FormError | undefined>;
-};
-type FormError = {
-    message: string;
+type FormRule<Options = any> = (value: any, options?: Options, lang?: FormLang) => Promise<void>;
+type InferRuleOption<T> = T extends (value: any, options: infer O, lang?: FormLang) => Promise<void> ? 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>;
+declare function validValues(rules: FormRules, items: FormItemProps[], values: Record<string, any>, lang: FormLang): Promise<Record<string, Error>>;
 
 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> = {
@@ -416,52 +448,71 @@ type FormInputProps<FormElements extends FormElementTypes = FormElementTypes> =
     props?: InferFormInputProps<FormElements['Input']>;
 };
 
-type FormLabelElementProps<FormElements extends FormElementTypes = FormElementTypes> = {
-    name: string;
-    rules?: FormRules;
-    title?: ReactNode;
-    description?: ReactNode;
-    Label?: FormElements['Label'];
+type FormItemName = string;
+type FormItemProps<FormElements extends FormElementTypes = FormElementTypes, FormRulesOptions extends Record<string, any> = FormDefaultRulesOptions> = {
+    name: FormItemName;
+    label?: Omit<FormLabelElementProps, 'name'> & {
+        Label?: ComponentType<FormLabelElementProps>;
+    };
     input?: FormInputProps<FormElements>;
+    rules?: FormRulesOptions;
 };
+declare function FormItem(props: FormItemProps): react_jsx_runtime.JSX.Element;
+declare namespace FormItem {
+    var displayName: string;
+    var whyDidYouRender: boolean;
+}
 
-type FormElementTypes = {
-    Label: ComponentType<FormLabelElementProps>;
-    Input: ComponentType<FormInputElementProps>;
-    Button: ComponentType<FormButtonElementProps>;
-};
-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: FormItemProps<FormElements, InferFormRulesOptions<Rules>>[];
     onSubmit?: (values: Values) => Promise<void>;
     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, lang, ...props }: FormProps<Values, FormElements>): react_jsx_runtime.JSX.Element;
+/**
+ * FormContainer component is a wrapper that provides context and state management for form elements.
+ * It initializes form states such as values, errors, submitting status, elements, language, and rules.
+ *
+ * @template Values - The type of form values, defaults to Record<string, any>.
+ * @template FormElements - The type of form elements, defaults to FormElementTypes.
+ * @template Rules - The type of form rules, defaults to FormDefaultRules.
+ *
+ * @param {FormProps<Values, FormElements, Rules>} props - The properties for the FormContainer component.
+ * @param {Values} props.defaultValues - The default values for the form fields.
+ * @param {FormElements} props.Elements - The form elements to be used in the form.
+ * @param {Rules} props.rules - The validation rules for the form fields.
+ * @param {FormLang} props.lang - The language settings for the form.
+ * @param {Partial<FormContextProps>} props - Additional properties for the form context.
+ *
+ * @returns {JSX.Element} The FormContainer component.
+ */
+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;
     setValues: Dispatch<SetStateAction<Values>>;
-    errors: Record<string, FormError>;
-    setErrors: Dispatch<SetStateAction<Record<string, FormError>>>;
+    errors: Record<string, Error>;
+    setErrors: Dispatch<SetStateAction<Record<string, Error>>>;
 };
-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 };
+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, FormDefaultRules, type FormDefaultRulesOptions, type FormElementTypes, type FormInputElementProps, FormItem, type FormItemName, type FormItemProps, type FormLabelElementProps, type FormProps, type FormRule, type FormRules, type InferFormRulesOptions, type OnError, OptionalWrapper, type OptionalWrapperProps, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, type useFaasOptions, useFormContext, useSplittingState, validValues, 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.
@@ -394,21 +408,39 @@ type FormInputElementProps = {
     onChange: (value: any) => void;
 };
 
+type FormLabelElementProps = {
+    name: string;
+    title?: ReactNode;
+    description?: ReactNode;
+    error?: Error;
+    /** as Input element */
+    children: ReactNode;
+};
+
+type FormElementTypes = {
+    Label: ComponentType<FormLabelElementProps>;
+    Input: ComponentType<FormInputElementProps>;
+    Button: ComponentType<FormButtonElementProps>;
+};
+declare const FormDefaultElements: FormElementTypes;
+
 declare const FormDefaultLang: {
     submit: string;
     required: string;
+    string: string;
     number: string;
 };
 type FormLang = typeof FormDefaultLang;
 
-type FormRules = {
-    type?: 'string' | 'number';
-    required?: boolean;
-    custom?: (value: any) => Promise<FormError | undefined>;
-};
-type FormError = {
-    message: string;
+type FormRule<Options = any> = (value: any, options?: Options, lang?: FormLang) => Promise<void>;
+type InferRuleOption<T> = T extends (value: any, options: infer O, lang?: FormLang) => Promise<void> ? 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>;
+declare function validValues(rules: FormRules, items: FormItemProps[], values: Record<string, any>, lang: FormLang): Promise<Record<string, Error>>;
 
 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> = {
@@ -416,52 +448,71 @@ type FormInputProps<FormElements extends FormElementTypes = FormElementTypes> =
     props?: InferFormInputProps<FormElements['Input']>;
 };
 
-type FormLabelElementProps<FormElements extends FormElementTypes = FormElementTypes> = {
-    name: string;
-    rules?: FormRules;
-    title?: ReactNode;
-    description?: ReactNode;
-    Label?: FormElements['Label'];
+type FormItemName = string;
+type FormItemProps<FormElements extends FormElementTypes = FormElementTypes, FormRulesOptions extends Record<string, any> = FormDefaultRulesOptions> = {
+    name: FormItemName;
+    label?: Omit<FormLabelElementProps, 'name'> & {
+        Label?: ComponentType<FormLabelElementProps>;
+    };
     input?: FormInputProps<FormElements>;
+    rules?: FormRulesOptions;
 };
+declare function FormItem(props: FormItemProps): react_jsx_runtime.JSX.Element;
+declare namespace FormItem {
+    var displayName: string;
+    var whyDidYouRender: boolean;
+}
 
-type FormElementTypes = {
-    Label: ComponentType<FormLabelElementProps>;
-    Input: ComponentType<FormInputElementProps>;
-    Button: ComponentType<FormButtonElementProps>;
-};
-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: FormItemProps<FormElements, InferFormRulesOptions<Rules>>[];
     onSubmit?: (values: Values) => Promise<void>;
     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, lang, ...props }: FormProps<Values, FormElements>): react_jsx_runtime.JSX.Element;
+/**
+ * FormContainer component is a wrapper that provides context and state management for form elements.
+ * It initializes form states such as values, errors, submitting status, elements, language, and rules.
+ *
+ * @template Values - The type of form values, defaults to Record<string, any>.
+ * @template FormElements - The type of form elements, defaults to FormElementTypes.
+ * @template Rules - The type of form rules, defaults to FormDefaultRules.
+ *
+ * @param {FormProps<Values, FormElements, Rules>} props - The properties for the FormContainer component.
+ * @param {Values} props.defaultValues - The default values for the form fields.
+ * @param {FormElements} props.Elements - The form elements to be used in the form.
+ * @param {Rules} props.rules - The validation rules for the form fields.
+ * @param {FormLang} props.lang - The language settings for the form.
+ * @param {Partial<FormContextProps>} props - Additional properties for the form context.
+ *
+ * @returns {JSX.Element} The FormContainer component.
+ */
+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;
     setValues: Dispatch<SetStateAction<Values>>;
-    errors: Record<string, FormError>;
-    setErrors: Dispatch<SetStateAction<Record<string, FormError>>>;
+    errors: Record<string, Error>;
+    setErrors: Dispatch<SetStateAction<Record<string, Error>>>;
 };
-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 };
+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, FormDefaultRules, type FormDefaultRulesOptions, type FormElementTypes, type FormInputElementProps, FormItem, type FormItemName, type FormItemProps, type FormLabelElementProps, type FormProps, type FormRule, type FormRules, type InferFormRulesOptions, type OnError, OptionalWrapper, type OptionalWrapperProps, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, type useFaasOptions, useFormContext, useSplittingState, validValues, withFaasData };

package/dist/index.js

@@ -49,7 +49,6 @@ function equal(a, b) {
       return a === b;
     case Object: {
       const keys = Object.keys(a);
-      if (keys.length !== Object.keys(b).length) return false;
       for (const key of keys) {
         if (!equal(a[key], b[key])) return false;
       }
@@ -80,6 +79,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) => {
@@ -89,13 +99,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;
@@ -119,17 +130,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,
@@ -354,40 +354,71 @@ var FormContext = createSplittingContext([
   "values",
   "setValues",
   "errors",
-  "setErrors"
+  "setErrors",
+  "rules"
 ]);
 var FormContextProvider = FormContext.Provider;
 var useFormContext = FormContext.use;
-function FormLabel(props) {
-  const { Elements } = useFormContext();
-  if (props.Label) return /* @__PURE__ */ jsxRuntime.jsx(props.Label, { ...props });
-  return /* @__PURE__ */ jsxRuntime.jsx(Elements.Label, { ...props });
+function FormItem(props) {
+  const { Elements, values, setValues } = useFormContext();
+  const Label = props.label?.Label ?? Elements.Label;
+  const Input = props.input?.Input ?? Elements.Input;
+  return /* @__PURE__ */ jsxRuntime.jsx(Label, { name: props.name, ...props.label, children: /* @__PURE__ */ jsxRuntime.jsx(
+    Input,
+    {
+      name: props.name,
+      value: values[props.name],
+      onChange: (v) => setValues((prev) => ({
+        ...prev,
+        [props.name]: v
+      }))
+    }
+  ) });
 }
-FormLabel.displayName = "FormLabel";
-FormLabel.whyDidYouRender = true;
+FormItem.displayName = "FormItem";
+FormItem.whyDidYouRender = true;
 function FormBody() {
   const { items } = useFormContext();
-  return items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { ...item }, item.name));
+  return items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(FormItem, { ...item }, item.name));
 }
 FormBody.displayName = "FormBody";
 FormBody.whyDidYouRender = true;
 
 // src/Form/rules.ts
-async function validValue(rules, value, lang) {
-  if (rules.required && (value === null || value === void 0 || value === "" || Number.isNaN(value)))
-    return { message: lang.required };
-  if (rules.type === "number" && Number.isNaN(Number(value)))
-    return { message: lang.number };
-  return rules.custom?.(value);
-}
-async function validValues(items, values, lang) {
+var FormDefaultRules = {
+  required: async (value, _, lang) => {
+    if (value === null || value === void 0 || value === "" || Number.isNaN(value)) {
+      throw Error(lang?.required);
+    }
+  },
+  type: async (value, options, lang) => {
+    switch (options) {
+      case "string":
+        if (typeof value !== "string") throw Error(lang?.string);
+        break;
+      case "number":
+        if (Number.isNaN(Number(value))) throw Error(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, lang);
-      if (error) errors[item.name] = error;
+    const rulesOptions = item.rules;
+    if (rulesOptions) {
+      for (const [name, options] of Object.entries(rulesOptions)) {
+        try {
+          await rules[name](value, options, lang);
+        } catch (error) {
+          errors[item.name] = error;
+          break;
+        }
+      }
     }
   }
   return errors;
@@ -401,7 +432,8 @@ function FormFooter() {
     Elements,
     items,
     setErrors,
-    lang
+    lang,
+    rules
   } = useFormContext();
   return /* @__PURE__ */ jsxRuntime.jsx(
     Elements.Button,
@@ -409,7 +441,7 @@ function FormFooter() {
       disabled: submitting,
       submit: async () => {
         setSubmitting(true);
-        const errors = await validValues(items, values, lang);
+        const errors = await validValues(rules, items, values, lang);
         if (Object.keys(errors).length) {
           setErrors(errors);
           setSubmitting(false);
@@ -443,45 +475,14 @@ var FormLabelElement = ({
   name,
   title,
   description,
-  Label,
-  input
+  error,
+  children
 }) => {
-  const { values, setValues, errors } = useFormContext();
-  if (Label)
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Label,
-      {
-        name,
-        title,
-        description,
-        input
-      }
-    );
   return /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
     title ?? name,
-    input?.Input ? /* @__PURE__ */ jsxRuntime.jsx(
-      input.Input,
-      {
-        name,
-        value: values[name],
-        onChange: (v) => setValues((prev) => ({
-          ...prev,
-          [name]: v
-        }))
-      }
-    ) : /* @__PURE__ */ jsxRuntime.jsx(
-      FormInputElement,
-      {
-        name,
-        value: values[name],
-        onChange: (v) => setValues((prev) => ({
-          ...prev,
-          [name]: v
-        }))
-      }
-    ),
+    children,
     description,
-    errors[name]?.message
+    error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "red" }, children: error.message })
   ] });
 };
 FormLabelElement.displayName = "FormLabelElement";
@@ -498,6 +499,7 @@ var FormDefaultElements = {
 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 = {}) {
@@ -509,23 +511,25 @@ function mergeValues(items, defaultValues = {}) {
 function FormContainer({
   defaultValues,
   Elements,
+  rules,
   lang,
   ...props
 }) {
-  const states = useSplittingState({
-    values: mergeValues(props.items, defaultValues),
-    errors: {},
-    submitting: false,
-    Elements: Object.assign(FormDefaultElements, Elements),
-    lang: Object.assign(FormDefaultLang, lang)
-  });
   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, {}),
@@ -543,6 +547,8 @@ exports.FaasReactClient = FaasReactClient;
 exports.Form = FormContainer;
 exports.FormContextProvider = FormContextProvider;
 exports.FormDefaultElements = FormDefaultElements;
+exports.FormDefaultRules = FormDefaultRules;
+exports.FormItem = FormItem;
 exports.OptionalWrapper = OptionalWrapper;
 exports.createSplittingContext = createSplittingContext;
 exports.equal = equal;
@@ -556,4 +562,5 @@ exports.useEqualMemoize = useEqualMemoize;
 exports.useFaas = useFaas;
 exports.useFormContext = useFormContext;
 exports.useSplittingState = useSplittingState;
+exports.validValues = validValues;
 exports.withFaasData = withFaasData;

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';
 
@@ -47,7 +47,6 @@ function equal(a, b) {
       return a === b;
     case Object: {
       const keys = Object.keys(a);
-      if (keys.length !== Object.keys(b).length) return false;
       for (const key of keys) {
         if (!equal(a[key], b[key])) return false;
       }
@@ -78,6 +77,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) => {
@@ -87,13 +97,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;
@@ -117,17 +128,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,
@@ -352,40 +352,71 @@ var FormContext = createSplittingContext([
   "values",
   "setValues",
   "errors",
-  "setErrors"
+  "setErrors",
+  "rules"
 ]);
 var FormContextProvider = FormContext.Provider;
 var useFormContext = FormContext.use;
-function FormLabel(props) {
-  const { Elements } = useFormContext();
-  if (props.Label) return /* @__PURE__ */ jsx(props.Label, { ...props });
-  return /* @__PURE__ */ jsx(Elements.Label, { ...props });
+function FormItem(props) {
+  const { Elements, values, setValues } = useFormContext();
+  const Label = props.label?.Label ?? Elements.Label;
+  const Input = props.input?.Input ?? Elements.Input;
+  return /* @__PURE__ */ jsx(Label, { name: props.name, ...props.label, children: /* @__PURE__ */ jsx(
+    Input,
+    {
+      name: props.name,
+      value: values[props.name],
+      onChange: (v) => setValues((prev) => ({
+        ...prev,
+        [props.name]: v
+      }))
+    }
+  ) });
 }
-FormLabel.displayName = "FormLabel";
-FormLabel.whyDidYouRender = true;
+FormItem.displayName = "FormItem";
+FormItem.whyDidYouRender = true;
 function FormBody() {
   const { items } = useFormContext();
-  return items.map((item) => /* @__PURE__ */ jsx(FormLabel, { ...item }, item.name));
+  return items.map((item) => /* @__PURE__ */ jsx(FormItem, { ...item }, item.name));
 }
 FormBody.displayName = "FormBody";
 FormBody.whyDidYouRender = true;
 
 // src/Form/rules.ts
-async function validValue(rules, value, lang) {
-  if (rules.required && (value === null || value === void 0 || value === "" || Number.isNaN(value)))
-    return { message: lang.required };
-  if (rules.type === "number" && Number.isNaN(Number(value)))
-    return { message: lang.number };
-  return rules.custom?.(value);
-}
-async function validValues(items, values, lang) {
+var FormDefaultRules = {
+  required: async (value, _, lang) => {
+    if (value === null || value === void 0 || value === "" || Number.isNaN(value)) {
+      throw Error(lang?.required);
+    }
+  },
+  type: async (value, options, lang) => {
+    switch (options) {
+      case "string":
+        if (typeof value !== "string") throw Error(lang?.string);
+        break;
+      case "number":
+        if (Number.isNaN(Number(value))) throw Error(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, lang);
-      if (error) errors[item.name] = error;
+    const rulesOptions = item.rules;
+    if (rulesOptions) {
+      for (const [name, options] of Object.entries(rulesOptions)) {
+        try {
+          await rules[name](value, options, lang);
+        } catch (error) {
+          errors[item.name] = error;
+          break;
+        }
+      }
     }
   }
   return errors;
@@ -399,7 +430,8 @@ function FormFooter() {
     Elements,
     items,
     setErrors,
-    lang
+    lang,
+    rules
   } = useFormContext();
   return /* @__PURE__ */ jsx(
     Elements.Button,
@@ -407,7 +439,7 @@ function FormFooter() {
       disabled: submitting,
       submit: async () => {
         setSubmitting(true);
-        const errors = await validValues(items, values, lang);
+        const errors = await validValues(rules, items, values, lang);
         if (Object.keys(errors).length) {
           setErrors(errors);
           setSubmitting(false);
@@ -441,45 +473,14 @@ var FormLabelElement = ({
   name,
   title,
   description,
-  Label,
-  input
+  error,
+  children
 }) => {
-  const { values, setValues, errors } = useFormContext();
-  if (Label)
-    return /* @__PURE__ */ jsx(
-      Label,
-      {
-        name,
-        title,
-        description,
-        input
-      }
-    );
   return /* @__PURE__ */ jsxs("label", { children: [
     title ?? name,
-    input?.Input ? /* @__PURE__ */ jsx(
-      input.Input,
-      {
-        name,
-        value: values[name],
-        onChange: (v) => setValues((prev) => ({
-          ...prev,
-          [name]: v
-        }))
-      }
-    ) : /* @__PURE__ */ jsx(
-      FormInputElement,
-      {
-        name,
-        value: values[name],
-        onChange: (v) => setValues((prev) => ({
-          ...prev,
-          [name]: v
-        }))
-      }
-    ),
+    children,
     description,
-    errors[name]?.message
+    error && /* @__PURE__ */ jsx("div", { style: { color: "red" }, children: error.message })
   ] });
 };
 FormLabelElement.displayName = "FormLabelElement";
@@ -496,6 +497,7 @@ var FormDefaultElements = {
 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 = {}) {
@@ -507,23 +509,25 @@ function mergeValues(items, defaultValues = {}) {
 function FormContainer({
   defaultValues,
   Elements,
+  rules,
   lang,
   ...props
 }) {
-  const states = useSplittingState({
-    values: mergeValues(props.items, defaultValues),
-    errors: {},
-    submitting: false,
-    Elements: Object.assign(FormDefaultElements, Elements),
-    lang: Object.assign(FormDefaultLang, lang)
-  });
   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, {}),
@@ -535,4 +539,4 @@ function FormContainer({
 FormContainer.displayName = "FormContainer";
 FormContainer.whyDidYouRender = true;
 
-export { ErrorBoundary, FaasDataWrapper, FaasReactClient, FormContainer as Form, FormContextProvider, FormDefaultElements, OptionalWrapper, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, useFormContext, useSplittingState, withFaasData };
+export { ErrorBoundary, FaasDataWrapper, FaasReactClient, FormContainer as Form, FormContextProvider, FormDefaultElements, FormDefaultRules, FormItem, OptionalWrapper, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, useFormContext, useSplittingState, validValues, withFaasData };

package/package.json

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