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

package/dist/index.d.mts

@@ -264,6 +264,14 @@ type FaasReactClientOptions = {
     /** @default `/` */
     baseUrl?: BaseUrl;
     options?: Options;
+    /**
+     * @example
+     * ```ts
+     * onError: (action, params) => async (res) => {
+     *   console.error(action, params, res)
+     * }
+     * ```
+     */
     onError?: OnError;
 };
 type FaasReactClientInstance = {
@@ -376,8 +384,8 @@ declare const OptionalWrapper: React.FC<OptionalWrapperProps> & {
 
 type FormButtonElementProps = {
     children?: React.ReactNode;
-    disabled?: boolean;
-    submit?: () => void;
+    disabled: boolean;
+    submit: () => Promise<void>;
 };
 
 type FormInputElementProps = {
@@ -386,9 +394,20 @@ type FormInputElementProps = {
     onChange: (value: any) => void;
 };
 
+declare const FormDefaultLang: {
+    submit: string;
+    required: 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 InferFormInputProps<T extends ComponentType<FormInputElementProps> | JSXElementConstructor<any>> = T extends ComponentType<FormInputElementProps> ? Omit<ComponentProps<T>, 'name' | 'value' | 'onChange'> : Omit<ComponentProps<T>, 'name' | 'value'>;
@@ -416,10 +435,11 @@ declare const FormDefaultElements: FormElementTypes;
 type FormProps<Values extends Record<string, any> = Record<string, any>, FormElements extends FormElementTypes = FormElementTypes> = {
     items: FormLabelElementProps<FormElements>[];
     onSubmit?: (values: Values) => Promise<void>;
-    elements?: Partial<FormElements>;
+    Elements?: Partial<FormElements>;
+    lang?: Partial<FormLang>;
     defaultValues?: Values;
 };
-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>({ defaultValues, Elements, lang, ...props }: FormProps<Values, FormElements>): react_jsx_runtime.JSX.Element;
 declare namespace FormContainer {
     var displayName: string;
     var whyDidYouRender: boolean;
@@ -429,10 +449,13 @@ type FormContextProps<Values extends Record<string, any> = Record<string, any>>
     items: FormLabelElementProps[];
     onSubmit: (values: Values) => Promise<void>;
     Elements: FormElementTypes;
+    lang: FormLang;
     submitting: boolean;
-    setSubmitting: React.Dispatch<React.SetStateAction<boolean>>;
+    setSubmitting: Dispatch<SetStateAction<boolean>>;
     values: Values;
-    setValues: React.Dispatch<React.SetStateAction<Values>>;
+    setValues: Dispatch<SetStateAction<Values>>;
+    errors: Record<string, FormError>;
+    setErrors: Dispatch<SetStateAction<Record<string, FormError>>>;
 };
 declare const FormContextProvider: <NewT extends FormContextProps<Record<string, any>> = FormContextProps<Record<string, any>>>(props: {
     value?: NewT;

package/dist/index.d.ts

@@ -264,6 +264,14 @@ type FaasReactClientOptions = {
     /** @default `/` */
     baseUrl?: BaseUrl;
     options?: Options;
+    /**
+     * @example
+     * ```ts
+     * onError: (action, params) => async (res) => {
+     *   console.error(action, params, res)
+     * }
+     * ```
+     */
     onError?: OnError;
 };
 type FaasReactClientInstance = {
@@ -376,8 +384,8 @@ declare const OptionalWrapper: React.FC<OptionalWrapperProps> & {
 
 type FormButtonElementProps = {
     children?: React.ReactNode;
-    disabled?: boolean;
-    submit?: () => void;
+    disabled: boolean;
+    submit: () => Promise<void>;
 };
 
 type FormInputElementProps = {
@@ -386,9 +394,20 @@ type FormInputElementProps = {
     onChange: (value: any) => void;
 };
 
+declare const FormDefaultLang: {
+    submit: string;
+    required: 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 InferFormInputProps<T extends ComponentType<FormInputElementProps> | JSXElementConstructor<any>> = T extends ComponentType<FormInputElementProps> ? Omit<ComponentProps<T>, 'name' | 'value' | 'onChange'> : Omit<ComponentProps<T>, 'name' | 'value'>;
@@ -416,10 +435,11 @@ declare const FormDefaultElements: FormElementTypes;
 type FormProps<Values extends Record<string, any> = Record<string, any>, FormElements extends FormElementTypes = FormElementTypes> = {
     items: FormLabelElementProps<FormElements>[];
     onSubmit?: (values: Values) => Promise<void>;
-    elements?: Partial<FormElements>;
+    Elements?: Partial<FormElements>;
+    lang?: Partial<FormLang>;
     defaultValues?: Values;
 };
-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>({ defaultValues, Elements, lang, ...props }: FormProps<Values, FormElements>): react_jsx_runtime.JSX.Element;
 declare namespace FormContainer {
     var displayName: string;
     var whyDidYouRender: boolean;
@@ -429,10 +449,13 @@ type FormContextProps<Values extends Record<string, any> = Record<string, any>>
     items: FormLabelElementProps[];
     onSubmit: (values: Values) => Promise<void>;
     Elements: FormElementTypes;
+    lang: FormLang;
     submitting: boolean;
-    setSubmitting: React.Dispatch<React.SetStateAction<boolean>>;
+    setSubmitting: Dispatch<SetStateAction<boolean>>;
     values: Values;
-    setValues: React.Dispatch<React.SetStateAction<Values>>;
+    setValues: Dispatch<SetStateAction<Values>>;
+    errors: Record<string, FormError>;
+    setErrors: Dispatch<SetStateAction<Record<string, FormError>>>;
 };
 declare const FormContextProvider: <NewT extends FormContextProps<Record<string, any>> = FormContextProps<Record<string, any>>>(props: {
     value?: NewT;

package/dist/index.js

@@ -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) {
@@ -347,10 +348,13 @@ var FormContext = createSplittingContext([
   "items",
   "onSubmit",
   "Elements",
+  "lang",
   "submitting",
   "setSubmitting",
   "values",
-  "setValues"
+  "setValues",
+  "errors",
+  "setErrors"
 ]);
 var FormContextProvider = FormContext.Provider;
 var useFormContext = FormContext.use;
@@ -367,17 +371,53 @@ function FormBody() {
 }
 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) {
+  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;
+    }
+  }
+  return errors;
+}
 function FormFooter() {
-  const { submitting, setSubmitting, onSubmit, values, Elements } = useFormContext();
+  const {
+    submitting,
+    setSubmitting,
+    onSubmit,
+    values,
+    Elements,
+    items,
+    setErrors,
+    lang
+  } = useFormContext();
   return /* @__PURE__ */ jsxRuntime.jsx(
     Elements.Button,
     {
       disabled: submitting,
-      submit: () => {
+      submit: async () => {
         setSubmitting(true);
+        const errors = await validValues(items, values, lang);
+        if (Object.keys(errors).length) {
+          setErrors(errors);
+          setSubmitting(false);
+          return;
+        }
         onSubmit(values).finally(() => setSubmitting(false));
       },
-      children: "Submit"
+      children: lang.submit
     }
   );
 }
@@ -406,7 +446,7 @@ var FormLabelElement = ({
   Label,
   input
 }) => {
-  const { values, setValues } = useFormContext();
+  const { values, setValues, errors } = useFormContext();
   if (Label)
     return /* @__PURE__ */ jsxRuntime.jsx(
       Label,
@@ -440,7 +480,8 @@ var FormLabelElement = ({
         }))
       }
     ),
-    description
+    description,
+    errors[name]?.message
   ] });
 };
 FormLabelElement.displayName = "FormLabelElement";
@@ -452,17 +493,31 @@ var FormDefaultElements = {
   Input: FormInputElement,
   Button: FormButtonElement
 };
+
+// src/Form/lang.ts
+var FormDefaultLang = {
+  submit: "Submit",
+  required: "This field is required",
+  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 }) {
+function FormContainer({
+  defaultValues,
+  Elements,
+  lang,
+  ...props
+}) {
   const states = useSplittingState({
     values: mergeValues(props.items, defaultValues),
+    errors: {},
     submitting: false,
-    Elements: Object.assign(FormDefaultElements, elements)
+    Elements: Object.assign(FormDefaultElements, Elements),
+    lang: Object.assign(FormDefaultLang, lang)
   });
   return /* @__PURE__ */ jsxRuntime.jsxs(
     FormContextProvider,

package/dist/index.mjs

@@ -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) {
@@ -345,10 +346,13 @@ var FormContext = createSplittingContext([
   "items",
   "onSubmit",
   "Elements",
+  "lang",
   "submitting",
   "setSubmitting",
   "values",
-  "setValues"
+  "setValues",
+  "errors",
+  "setErrors"
 ]);
 var FormContextProvider = FormContext.Provider;
 var useFormContext = FormContext.use;
@@ -365,17 +369,53 @@ function FormBody() {
 }
 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) {
+  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;
+    }
+  }
+  return errors;
+}
 function FormFooter() {
-  const { submitting, setSubmitting, onSubmit, values, Elements } = useFormContext();
+  const {
+    submitting,
+    setSubmitting,
+    onSubmit,
+    values,
+    Elements,
+    items,
+    setErrors,
+    lang
+  } = useFormContext();
   return /* @__PURE__ */ jsx(
     Elements.Button,
     {
       disabled: submitting,
-      submit: () => {
+      submit: async () => {
         setSubmitting(true);
+        const errors = await validValues(items, values, lang);
+        if (Object.keys(errors).length) {
+          setErrors(errors);
+          setSubmitting(false);
+          return;
+        }
         onSubmit(values).finally(() => setSubmitting(false));
       },
-      children: "Submit"
+      children: lang.submit
     }
   );
 }
@@ -404,7 +444,7 @@ var FormLabelElement = ({
   Label,
   input
 }) => {
-  const { values, setValues } = useFormContext();
+  const { values, setValues, errors } = useFormContext();
   if (Label)
     return /* @__PURE__ */ jsx(
       Label,
@@ -438,7 +478,8 @@ var FormLabelElement = ({
         }))
       }
     ),
-    description
+    description,
+    errors[name]?.message
   ] });
 };
 FormLabelElement.displayName = "FormLabelElement";
@@ -450,17 +491,31 @@ var FormDefaultElements = {
   Input: FormInputElement,
   Button: FormButtonElement
 };
+
+// src/Form/lang.ts
+var FormDefaultLang = {
+  submit: "Submit",
+  required: "This field is required",
+  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 }) {
+function FormContainer({
+  defaultValues,
+  Elements,
+  lang,
+  ...props
+}) {
   const states = useSplittingState({
     values: mergeValues(props.items, defaultValues),
+    errors: {},
     submitting: false,
-    Elements: Object.assign(FormDefaultElements, elements)
+    Elements: Object.assign(FormDefaultElements, Elements),
+    lang: Object.assign(FormDefaultLang, lang)
   });
   return /* @__PURE__ */ jsxs(
     FormContextProvider,

package/package.json

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