@faasjs/react 3.7.0 → 4.0.0

package/dist/index.d.mts

@@ -3,7 +3,7 @@ export { FaasAction, FaasData, FaasParams } from '@faasjs/types';
 import { Response, BaseUrl, ResponseError, Options, FaasBrowserClient } from '@faasjs/browser';
 export { Options, Response, ResponseError, ResponseHeaders } from '@faasjs/browser';
 import * as react from 'react';
-import { ReactNode, Dispatch, SetStateAction, ReactElement, Component, ComponentType, ComponentProps, JSXElementConstructor } from 'react';
+import { ReactNode, Dispatch, SetStateAction, JSX, ReactElement, Component, ComponentType, ComponentProps, JSXElementConstructor } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 /**
@@ -371,7 +371,7 @@ declare class ErrorBoundary extends Component<ErrorBoundaryProps, {
     static whyDidYouRender: boolean;
     constructor(props: ErrorBoundaryProps);
     componentDidCatch(error: Error | null, info: any): void;
-    render(): string | number | boolean | Iterable<ReactNode> | react_jsx_runtime.JSX.Element;
+    render(): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode>> | react_jsx_runtime.JSX.Element;
 }
 
 type OptionalWrapperProps<TWrapper extends ComponentType<{
@@ -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;
+    submitting?: 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

@@ -3,7 +3,7 @@ export { FaasAction, FaasData, FaasParams } from '@faasjs/types';
 import { Response, BaseUrl, ResponseError, Options, FaasBrowserClient } from '@faasjs/browser';
 export { Options, Response, ResponseError, ResponseHeaders } from '@faasjs/browser';
 import * as react from 'react';
-import { ReactNode, Dispatch, SetStateAction, ReactElement, Component, ComponentType, ComponentProps, JSXElementConstructor } from 'react';
+import { ReactNode, Dispatch, SetStateAction, JSX, ReactElement, Component, ComponentType, ComponentProps, JSXElementConstructor } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 /**
@@ -371,7 +371,7 @@ declare class ErrorBoundary extends Component<ErrorBoundaryProps, {
     static whyDidYouRender: boolean;
     constructor(props: ErrorBoundaryProps);
     componentDidCatch(error: Error | null, info: any): void;
-    render(): string | number | boolean | Iterable<ReactNode> | react_jsx_runtime.JSX.Element;
+    render(): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode>> | react_jsx_runtime.JSX.Element;
 }
 
 type OptionalWrapperProps<TWrapper extends ComponentType<{
@@ -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;
+    submitting?: 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

@@ -6,7 +6,7 @@ var browser = require('@faasjs/browser');
 
 // src/constant.ts
 function useConstant(fn) {
-  const ref = react.useRef();
+  const ref = react.useRef(null);
   if (!ref.current) {
     ref.current = { v: fn() };
   }
@@ -78,7 +78,7 @@ function useEqualCallback(callback, dependencies) {
   );
 }
 function usePrevious(value) {
-  const ref = react.useRef();
+  const ref = react.useRef(void 0);
   react.useEffect(() => {
     ref.current = value;
   });
@@ -193,7 +193,7 @@ function useFaas(action, defaultParams, options = {}) {
   const [skip, setSkip] = react.useState(
     typeof options.skip === "function" ? options.skip(defaultParams) : options.skip
   );
-  const promiseRef = react.useRef();
+  const promiseRef = react.useRef(null);
   const controllerRef = react.useRef(null);
   useEqualEffect(() => {
     setSkip(
@@ -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;
@@ -443,7 +478,7 @@ function FormFooter() {
   return /* @__PURE__ */ jsxRuntime.jsx(
     Elements.Button,
     {
-      disabled: submitting,
+      submitting,
       submit: async () => {
         setSubmitting(true);
         const errors = await validValues(rules, items, values, lang);
@@ -460,11 +495,11 @@ function FormFooter() {
 }
 FormFooter.displayName = "FormFooter";
 FormFooter.whyDidYouRender = true;
-var FormButtonElement = react.forwardRef(({ disabled, children, submit, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var FormButtonElement = react.forwardRef(({ children, submit, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "button",
   {
     type: "button",
-    disabled,
+    disabled: props.submitting,
     onClick: submit,
     ...props,
     ref,
@@ -472,10 +507,10 @@ var FormButtonElement = react.forwardRef(({ disabled, children, submit, ...props
   }
 ));
 FormButtonElement.displayName = "FormButtonElement";
-FormButtonElement.whyDidYouRender = true;
+Object.assign(FormButtonElement, { whyDidYouRender: true });
 var FormInputElement = react.forwardRef(({ onChange, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("input", { ...props, onChange: (e) => onChange(e.target.value), ref }));
 FormInputElement.displayName = "FormInputElement";
-FormInputElement.whyDidYouRender = true;
+Object.assign(FormInputElement, { whyDidYouRender: true });
 var FormLabelElement = ({
   name,
   title,

package/dist/index.mjs

@@ -4,7 +4,7 @@ import { FaasBrowserClient } from '@faasjs/browser';
 
 // src/constant.ts
 function useConstant(fn) {
-  const ref = useRef();
+  const ref = useRef(null);
   if (!ref.current) {
     ref.current = { v: fn() };
   }
@@ -76,7 +76,7 @@ function useEqualCallback(callback, dependencies) {
   );
 }
 function usePrevious(value) {
-  const ref = useRef();
+  const ref = useRef(void 0);
   useEffect(() => {
     ref.current = value;
   });
@@ -191,7 +191,7 @@ function useFaas(action, defaultParams, options = {}) {
   const [skip, setSkip] = useState(
     typeof options.skip === "function" ? options.skip(defaultParams) : options.skip
   );
-  const promiseRef = useRef();
+  const promiseRef = useRef(null);
   const controllerRef = useRef(null);
   useEqualEffect(() => {
     setSkip(
@@ -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;
@@ -441,7 +476,7 @@ function FormFooter() {
   return /* @__PURE__ */ jsx(
     Elements.Button,
     {
-      disabled: submitting,
+      submitting,
       submit: async () => {
         setSubmitting(true);
         const errors = await validValues(rules, items, values, lang);
@@ -458,11 +493,11 @@ function FormFooter() {
 }
 FormFooter.displayName = "FormFooter";
 FormFooter.whyDidYouRender = true;
-var FormButtonElement = forwardRef(({ disabled, children, submit, ...props }, ref) => /* @__PURE__ */ jsx(
+var FormButtonElement = forwardRef(({ children, submit, ...props }, ref) => /* @__PURE__ */ jsx(
   "button",
   {
     type: "button",
-    disabled,
+    disabled: props.submitting,
     onClick: submit,
     ...props,
     ref,
@@ -470,10 +505,10 @@ var FormButtonElement = forwardRef(({ disabled, children, submit, ...props }, re
   }
 ));
 FormButtonElement.displayName = "FormButtonElement";
-FormButtonElement.whyDidYouRender = true;
+Object.assign(FormButtonElement, { whyDidYouRender: true });
 var FormInputElement = forwardRef(({ onChange, ...props }, ref) => /* @__PURE__ */ jsx("input", { ...props, onChange: (e) => onChange(e.target.value), ref }));
 FormInputElement.displayName = "FormInputElement";
-FormInputElement.whyDidYouRender = true;
+Object.assign(FormInputElement, { whyDidYouRender: true });
 var FormLabelElement = ({
   name,
   title,

package/package.json

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