@faasjs/react 3.7.0 → 3.7.1

package/dist/index.d.mts

@@ -404,18 +404,42 @@ declare const OptionalWrapper: React.FC<OptionalWrapperProps> & {
     whyDidYouRender: boolean;
 };
 
+/**
+ * Props for the FormButtonElement component.
+ *
+ * @property {React.ReactNode} [children] - The content to be displayed inside the button.
+ * @property {boolean} disabled - Indicates whether the button is disabled.
+ * @property {() => Promise<void>} submit - A function to be called when the button is clicked, which returns a promise.
+ */
 type FormButtonElementProps = {
     children?: React.ReactNode;
     disabled: boolean;
     submit: () => Promise<void>;
 };
 
+/**
+ * Props for the Form Input Element component.
+ *
+ * @property {string} name - The name of the input element.
+ * @property {any} value - The current value of the input element.
+ * @property {(value: any) => void} onChange - Callback function to handle changes to the input value.
+ */
 type FormInputElementProps = {
     name: string;
     value: any;
     onChange: (value: any) => void;
 };
 
+/**
+ * Props for the FormLabelElement component.
+ *
+ * @typedef {Object} FormLabelElementProps
+ * @property {string} name - The name of the form element.
+ * @property {ReactNode} [title] - Optional title for the form element.
+ * @property {ReactNode} [description] - Optional description for the form element.
+ * @property {Error} [error] - Optional error associated with the form element.
+ * @property {ReactNode} children - The child elements, typically an input element.
+ */
 type FormLabelElementProps = {
     name: string;
     title?: ReactNode;
@@ -425,6 +449,14 @@ type FormLabelElementProps = {
     children: ReactNode;
 };
 
+/**
+ * Represents the types of form elements used in the form.
+ *
+ * @typedef {Object} FormElementTypes
+ * @property {ComponentType<FormLabelElementProps>} Label - The component type for the form label element.
+ * @property {ComponentType<FormInputElementProps>} Input - The component type for the form input element.
+ * @property {ComponentType<FormButtonElementProps>} Button - The component type for the form button element.
+ */
 type FormElementTypes = {
     Label: ComponentType<FormLabelElementProps>;
     Input: ComponentType<FormInputElementProps>;
@@ -440,12 +472,44 @@ declare const FormDefaultLang: {
 };
 type FormLang = typeof FormDefaultLang;
 
+/**
+ * A type representing a form validation rule.
+ *
+ * @template Options - The type of the options that can be passed to the rule.
+ *
+ * @param value - The value to be validated.
+ * @param options - Optional. Additional options that can be used in the validation.
+ * @param lang - Optional. The language settings that can be used in the validation.
+ *
+ * @returns A promise that resolves if the validation is successful, or rejects with an error if the validation fails.
+ *
+ * @example
+ * ```ts
+ * async function required(value: any, options: boolean, lang?: FormLang) {
+ *   if (value === null || value === undefined || value === '' || Number.isNaN(value))
+ *     throw Error(lang?.required)
+ * }
+ * ```
+ */
 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;
+/**
+ * A type representing a set of form validation rules.
+ *
+ * @typedef {Record<string, FormRule>} FormRules
+ *
+ * Each key in the record represents the name of a form field, and the corresponding value is a `FormRule` object that defines the validation rules for that field.
+ */
 type FormRules = Record<string, FormRule>;
 type InferFormRulesOptions<T> = {
     [K in keyof T]: InferRuleOption<T[K]>;
 };
+/**
+ * Default validation rules for a form.
+ *
+ * @constant
+ * @type {FormRules}
+ */
 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>>;
@@ -495,6 +559,19 @@ type FormProps<Values extends Record<string, any> = Record<string, any>, FormEle
  * @param {Partial<FormContextProps>} props - Additional properties for the form context.
  *
  * @returns {JSX.Element} The FormContainer component.
+ *
+ * @example
+ * ```tsx
+ * import { Form } from '@faasjs/react'
+ *
+ * function MyForm() {
+ *   return <Form
+ *     items={[
+ *       { name: 'name' },
+ *     ]}
+ *   />
+ * }
+ * ```
  */
 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 {

package/dist/index.d.ts

@@ -404,18 +404,42 @@ declare const OptionalWrapper: React.FC<OptionalWrapperProps> & {
     whyDidYouRender: boolean;
 };
 
+/**
+ * Props for the FormButtonElement component.
+ *
+ * @property {React.ReactNode} [children] - The content to be displayed inside the button.
+ * @property {boolean} disabled - Indicates whether the button is disabled.
+ * @property {() => Promise<void>} submit - A function to be called when the button is clicked, which returns a promise.
+ */
 type FormButtonElementProps = {
     children?: React.ReactNode;
     disabled: boolean;
     submit: () => Promise<void>;
 };
 
+/**
+ * Props for the Form Input Element component.
+ *
+ * @property {string} name - The name of the input element.
+ * @property {any} value - The current value of the input element.
+ * @property {(value: any) => void} onChange - Callback function to handle changes to the input value.
+ */
 type FormInputElementProps = {
     name: string;
     value: any;
     onChange: (value: any) => void;
 };
 
+/**
+ * Props for the FormLabelElement component.
+ *
+ * @typedef {Object} FormLabelElementProps
+ * @property {string} name - The name of the form element.
+ * @property {ReactNode} [title] - Optional title for the form element.
+ * @property {ReactNode} [description] - Optional description for the form element.
+ * @property {Error} [error] - Optional error associated with the form element.
+ * @property {ReactNode} children - The child elements, typically an input element.
+ */
 type FormLabelElementProps = {
     name: string;
     title?: ReactNode;
@@ -425,6 +449,14 @@ type FormLabelElementProps = {
     children: ReactNode;
 };
 
+/**
+ * Represents the types of form elements used in the form.
+ *
+ * @typedef {Object} FormElementTypes
+ * @property {ComponentType<FormLabelElementProps>} Label - The component type for the form label element.
+ * @property {ComponentType<FormInputElementProps>} Input - The component type for the form input element.
+ * @property {ComponentType<FormButtonElementProps>} Button - The component type for the form button element.
+ */
 type FormElementTypes = {
     Label: ComponentType<FormLabelElementProps>;
     Input: ComponentType<FormInputElementProps>;
@@ -440,12 +472,44 @@ declare const FormDefaultLang: {
 };
 type FormLang = typeof FormDefaultLang;
 
+/**
+ * A type representing a form validation rule.
+ *
+ * @template Options - The type of the options that can be passed to the rule.
+ *
+ * @param value - The value to be validated.
+ * @param options - Optional. Additional options that can be used in the validation.
+ * @param lang - Optional. The language settings that can be used in the validation.
+ *
+ * @returns A promise that resolves if the validation is successful, or rejects with an error if the validation fails.
+ *
+ * @example
+ * ```ts
+ * async function required(value: any, options: boolean, lang?: FormLang) {
+ *   if (value === null || value === undefined || value === '' || Number.isNaN(value))
+ *     throw Error(lang?.required)
+ * }
+ * ```
+ */
 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;
+/**
+ * A type representing a set of form validation rules.
+ *
+ * @typedef {Record<string, FormRule>} FormRules
+ *
+ * Each key in the record represents the name of a form field, and the corresponding value is a `FormRule` object that defines the validation rules for that field.
+ */
 type FormRules = Record<string, FormRule>;
 type InferFormRulesOptions<T> = {
     [K in keyof T]: InferRuleOption<T[K]>;
 };
+/**
+ * Default validation rules for a form.
+ *
+ * @constant
+ * @type {FormRules}
+ */
 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>>;
@@ -495,6 +559,19 @@ type FormProps<Values extends Record<string, any> = Record<string, any>, FormEle
  * @param {Partial<FormContextProps>} props - Additional properties for the form context.
  *
  * @returns {JSX.Element} The FormContainer component.
+ *
+ * @example
+ * ```tsx
+ * import { Form } from '@faasjs/react'
+ *
+ * function MyForm() {
+ *   return <Form
+ *     items={[
+ *       { name: 'name' },
+ *     ]}
+ *   />
+ * }
+ * ```
  */
 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 {

package/dist/index.js

@@ -364,21 +364,56 @@ var FormContext = createSplittingContext([
 ]);
 var FormContextProvider = FormContext.Provider;
 var useFormContext = FormContext.use;
-function FormItem(props) {
-  const { Elements, values, setValues, errors } = 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, error: errors[props.name], children: /* @__PURE__ */ jsxRuntime.jsx(
-    Input,
+function processValue(input, rules) {
+  switch (rules?.type) {
+    case "number":
+      return Number(input);
+    case "string":
+      return String(input);
+    default:
+      return input;
+  }
+}
+function FormInput({
+  name,
+  rules,
+  ...rest
+}) {
+  const { Elements, values, setValues } = useFormContext();
+  const value = values?.[name];
+  if (rest.Input) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      rest.Input,
+      {
+        name,
+        value,
+        onChange: (v) => setValues((prev) => ({
+          ...prev,
+          [name]: processValue(v, rules)
+        })),
+        ...rest.props
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Elements.Input,
     {
-      name: props.name,
-      value: values[props.name],
+      name,
+      value,
       onChange: (v) => setValues((prev) => ({
         ...prev,
-        [props.name]: v
-      }))
+        [name]: processValue(v, rules)
+      })),
+      ...rest.props
     }
-  ) });
+  );
+}
+FormInput.displayName = "FormInput";
+FormInput.whyDidYouRender = true;
+function FormItem(props) {
+  const { Elements, errors } = useFormContext();
+  const Label = props.label?.Label ?? Elements.Label;
+  return /* @__PURE__ */ jsxRuntime.jsx(Label, { name: props.name, ...props.label, error: errors[props.name], children: /* @__PURE__ */ jsxRuntime.jsx(FormInput, { name: props.name, rules: props.rules, ...props.input }) });
 }
 FormItem.displayName = "FormItem";
 FormItem.whyDidYouRender = true;

package/dist/index.mjs

@@ -362,21 +362,56 @@ var FormContext = createSplittingContext([
 ]);
 var FormContextProvider = FormContext.Provider;
 var useFormContext = FormContext.use;
-function FormItem(props) {
-  const { Elements, values, setValues, errors } = useFormContext();
-  const Label = props.label?.Label ?? Elements.Label;
-  const Input = props.input?.Input ?? Elements.Input;
-  return /* @__PURE__ */ jsx(Label, { name: props.name, ...props.label, error: errors[props.name], children: /* @__PURE__ */ jsx(
-    Input,
+function processValue(input, rules) {
+  switch (rules?.type) {
+    case "number":
+      return Number(input);
+    case "string":
+      return String(input);
+    default:
+      return input;
+  }
+}
+function FormInput({
+  name,
+  rules,
+  ...rest
+}) {
+  const { Elements, values, setValues } = useFormContext();
+  const value = values?.[name];
+  if (rest.Input) {
+    return /* @__PURE__ */ jsx(
+      rest.Input,
+      {
+        name,
+        value,
+        onChange: (v) => setValues((prev) => ({
+          ...prev,
+          [name]: processValue(v, rules)
+        })),
+        ...rest.props
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Elements.Input,
     {
-      name: props.name,
-      value: values[props.name],
+      name,
+      value,
       onChange: (v) => setValues((prev) => ({
         ...prev,
-        [props.name]: v
-      }))
+        [name]: processValue(v, rules)
+      })),
+      ...rest.props
     }
-  ) });
+  );
+}
+FormInput.displayName = "FormInput";
+FormInput.whyDidYouRender = true;
+function FormItem(props) {
+  const { Elements, errors } = useFormContext();
+  const Label = props.label?.Label ?? Elements.Label;
+  return /* @__PURE__ */ jsx(Label, { name: props.name, ...props.label, error: errors[props.name], children: /* @__PURE__ */ jsx(FormInput, { name: props.name, rules: props.rules, ...props.input }) });
 }
 FormItem.displayName = "FormItem";
 FormItem.whyDidYouRender = true;

package/package.json

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