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

package/dist/index.d.mts

@@ -153,7 +153,7 @@ declare function createSplittingContext<T extends Record<string, any>>(defaultVa
     use: <NewT extends T = T>() => Readonly<NewT>;
 };
 
-type SetPrefix<S extends string | number | symbol> = S extends string ? (S extends `${infer First}${infer Rest}` ? `set${Capitalize<First>}${Rest}` : never) : never;
+type SetPrefix<S extends string | number | symbol> = S extends string ? S extends `${infer First}${infer Rest}` ? `set${Capitalize<First>}${Rest}` : never : never;
 type StateSetters<T> = {
     [K in keyof T as SetPrefix<K>]: Dispatch<SetStateAction<T[K]>>;
 };
@@ -374,9 +374,10 @@ declare const OptionalWrapper: React.FC<OptionalWrapperProps> & {
     whyDidYouRender: boolean;
 };
 
-type FormRules = {
-    type?: 'string' | 'number';
-    required?: boolean;
+type FormButtonElementProps = {
+    children?: React.ReactNode;
+    disabled: boolean;
+    submit: () => Promise<void>;
 };
 
 type FormInputElementProps = {
@@ -385,6 +386,15 @@ type FormInputElementProps = {
     onChange: (value: any) => void;
 };
 
+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'>;
 type FormInputProps<FormElements extends FormElementTypes = FormElementTypes> = {
     Input?: ComponentType<FormInputElementProps>;
@@ -400,12 +410,6 @@ type FormLabelElementProps<FormElements extends FormElementTypes = FormElementTy
     input?: FormInputProps<FormElements>;
 };
 
-type FormButtonElementProps = {
-    children?: React.ReactNode;
-    disabled?: boolean;
-    onClick?: () => void;
-};
-
 type FormElementTypes = {
     Label: ComponentType<FormLabelElementProps>;
     Input: ComponentType<FormInputElementProps>;
@@ -430,9 +434,11 @@ type FormContextProps<Values extends Record<string, any> = Record<string, any>>
     onSubmit: (values: Values) => Promise<void>;
     Elements: FormElementTypes;
     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

@@ -153,7 +153,7 @@ declare function createSplittingContext<T extends Record<string, any>>(defaultVa
     use: <NewT extends T = T>() => Readonly<NewT>;
 };
 
-type SetPrefix<S extends string | number | symbol> = S extends string ? (S extends `${infer First}${infer Rest}` ? `set${Capitalize<First>}${Rest}` : never) : never;
+type SetPrefix<S extends string | number | symbol> = S extends string ? S extends `${infer First}${infer Rest}` ? `set${Capitalize<First>}${Rest}` : never : never;
 type StateSetters<T> = {
     [K in keyof T as SetPrefix<K>]: Dispatch<SetStateAction<T[K]>>;
 };
@@ -374,9 +374,10 @@ declare const OptionalWrapper: React.FC<OptionalWrapperProps> & {
     whyDidYouRender: boolean;
 };
 
-type FormRules = {
-    type?: 'string' | 'number';
-    required?: boolean;
+type FormButtonElementProps = {
+    children?: React.ReactNode;
+    disabled: boolean;
+    submit: () => Promise<void>;
 };
 
 type FormInputElementProps = {
@@ -385,6 +386,15 @@ type FormInputElementProps = {
     onChange: (value: any) => void;
 };
 
+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'>;
 type FormInputProps<FormElements extends FormElementTypes = FormElementTypes> = {
     Input?: ComponentType<FormInputElementProps>;
@@ -400,12 +410,6 @@ type FormLabelElementProps<FormElements extends FormElementTypes = FormElementTy
     input?: FormInputProps<FormElements>;
 };
 
-type FormButtonElementProps = {
-    children?: React.ReactNode;
-    disabled?: boolean;
-    onClick?: () => void;
-};
-
 type FormElementTypes = {
     Label: ComponentType<FormLabelElementProps>;
     Input: ComponentType<FormInputElementProps>;
@@ -430,9 +434,11 @@ type FormContextProps<Values extends Record<string, any> = Record<string, any>>
     onSubmit: (values: Values) => Promise<void>;
     Elements: FormElementTypes;
     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

@@ -122,7 +122,10 @@ 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] });
+    Object.assign(states, {
+      [key]: state[0],
+      [`set${String(key).charAt(0).toUpperCase()}${String(key).slice(1)}`]: state[1]
+    });
   }
   return states;
 }
@@ -163,6 +166,17 @@ FaasDataWrapper.whyDidYouRender = true;
 function withFaasData(Component2, faasProps) {
   return (props) => /* @__PURE__ */ jsxRuntime.jsx(FaasDataWrapper, { ...faasProps, children: /* @__PURE__ */ jsxRuntime.jsx(Component2, { ...props }) });
 }
+
+// src/faas.ts
+async function faas(action, params, options) {
+  const client = getClient(options?.baseUrl);
+  if (client.onError)
+    return client.browserClient.action(action, params, options).catch(async (res) => {
+      await client.onError(action, params)(res);
+      return Promise.reject(res);
+    });
+  return client.browserClient.action(action, params, options);
+}
 function useFaas(action, defaultParams, options = {}) {
   const [loading, setLoading] = react.useState(true);
   const [data, setData] = react.useState();
@@ -261,17 +275,6 @@ function useFaas(action, defaultParams, options = {}) {
   };
 }
 useFaas.whyDidYouRender = true;
-
-// src/faas.ts
-async function faas(action, params, options) {
-  const client = getClient(options?.baseUrl);
-  if (client.onError)
-    return client.browserClient.action(action, params, options).catch(async (res) => {
-      await client.onError(action, params)(res);
-      return Promise.reject(res);
-    });
-  return client.browserClient.action(action, params, options);
-}
 var clients = {};
 function FaasReactClient({ baseUrl, options, onError } = {
   baseUrl: "/"
@@ -340,7 +343,17 @@ OptionalWrapper.displayName = "OptionalWrapper";
 OptionalWrapper.whyDidYouRender = true;
 
 // src/Form/context.tsx
-var FormContext = createSplittingContext(["items", "onSubmit", "Elements", "submitting", "setSubmitting", "values", "setValues"]);
+var FormContext = createSplittingContext([
+  "items",
+  "onSubmit",
+  "Elements",
+  "submitting",
+  "setSubmitting",
+  "values",
+  "setValues",
+  "errors",
+  "setErrors"
+]);
 var FormContextProvider = FormContext.Provider;
 var useFormContext = FormContext.use;
 function FormLabel(props) {
@@ -356,6 +369,70 @@ function FormBody() {
 }
 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) {
+  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;
+    }
+  }
+  return errors;
+}
+function FormFooter() {
+  const {
+    submitting,
+    setSubmitting,
+    onSubmit,
+    values,
+    Elements,
+    items,
+    setErrors
+  } = useFormContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Elements.Button,
+    {
+      disabled: submitting,
+      submit: async () => {
+        setSubmitting(true);
+        const errors = await validValues(items, values);
+        if (Object.keys(errors).length) {
+          setErrors(errors);
+          setSubmitting(false);
+          return;
+        }
+        onSubmit(values).finally(() => setSubmitting(false));
+      },
+      children: "Submit"
+    }
+  );
+}
+FormFooter.displayName = "FormFooter";
+FormFooter.whyDidYouRender = true;
+var FormButtonElement = react.forwardRef(({ disabled, children, submit, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "button",
+  {
+    type: "button",
+    disabled,
+    onClick: submit,
+    ...props,
+    ref,
+    children
+  }
+));
+FormButtonElement.displayName = "FormButtonElement";
+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;
@@ -366,7 +443,7 @@ var FormLabelElement = ({
   Label,
   input
 }) => {
-  const { values, setValues } = useFormContext();
+  const { values, setValues, errors } = useFormContext();
   if (Label)
     return /* @__PURE__ */ jsxRuntime.jsx(
       Label,
@@ -400,24 +477,12 @@ var FormLabelElement = ({
         }))
       }
     ),
-    description
+    description,
+    errors[name]?.message
   ] });
 };
 FormLabelElement.displayName = "FormLabelElement";
 FormLabelElement.whyDidYouRender = true;
-var FormButtonElement = react.forwardRef(({ disabled, children, onClick, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  "button",
-  {
-    type: "button",
-    disabled,
-    onClick,
-    ...props,
-    ref,
-    children
-  }
-));
-FormButtonElement.displayName = "FormButtonElement";
-FormButtonElement.whyDidYouRender = true;
 
 // src/Form/elements/index.ts
 var FormDefaultElements = {
@@ -425,22 +490,6 @@ var FormDefaultElements = {
   Input: FormInputElement,
   Button: FormButtonElement
 };
-function FormFooter() {
-  const { submitting, setSubmitting, onSubmit, values, Elements } = useFormContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Elements.Button,
-    {
-      disabled: submitting,
-      onClick: () => {
-        setSubmitting(true);
-        onSubmit(values).finally(() => setSubmitting(false));
-      },
-      children: "Submit"
-    }
-  );
-}
-FormFooter.displayName = "FormFooter";
-FormFooter.whyDidYouRender = true;
 function mergeValues(items, defaultValues = {}) {
   const values = {};
   for (const item of items)
@@ -450,6 +499,7 @@ function mergeValues(items, defaultValues = {}) {
 function FormContainer({ defaultValues, elements, ...props }) {
   const states = useSplittingState({
     values: mergeValues(props.items, defaultValues),
+    errors: {},
     submitting: false,
     Elements: Object.assign(FormDefaultElements, elements)
   });

package/dist/index.mjs

@@ -120,7 +120,10 @@ 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] });
+    Object.assign(states, {
+      [key]: state[0],
+      [`set${String(key).charAt(0).toUpperCase()}${String(key).slice(1)}`]: state[1]
+    });
   }
   return states;
 }
@@ -161,6 +164,17 @@ FaasDataWrapper.whyDidYouRender = true;
 function withFaasData(Component2, faasProps) {
   return (props) => /* @__PURE__ */ jsx(FaasDataWrapper, { ...faasProps, children: /* @__PURE__ */ jsx(Component2, { ...props }) });
 }
+
+// src/faas.ts
+async function faas(action, params, options) {
+  const client = getClient(options?.baseUrl);
+  if (client.onError)
+    return client.browserClient.action(action, params, options).catch(async (res) => {
+      await client.onError(action, params)(res);
+      return Promise.reject(res);
+    });
+  return client.browserClient.action(action, params, options);
+}
 function useFaas(action, defaultParams, options = {}) {
   const [loading, setLoading] = useState(true);
   const [data, setData] = useState();
@@ -259,17 +273,6 @@ function useFaas(action, defaultParams, options = {}) {
   };
 }
 useFaas.whyDidYouRender = true;
-
-// src/faas.ts
-async function faas(action, params, options) {
-  const client = getClient(options?.baseUrl);
-  if (client.onError)
-    return client.browserClient.action(action, params, options).catch(async (res) => {
-      await client.onError(action, params)(res);
-      return Promise.reject(res);
-    });
-  return client.browserClient.action(action, params, options);
-}
 var clients = {};
 function FaasReactClient({ baseUrl, options, onError } = {
   baseUrl: "/"
@@ -338,7 +341,17 @@ OptionalWrapper.displayName = "OptionalWrapper";
 OptionalWrapper.whyDidYouRender = true;
 
 // src/Form/context.tsx
-var FormContext = createSplittingContext(["items", "onSubmit", "Elements", "submitting", "setSubmitting", "values", "setValues"]);
+var FormContext = createSplittingContext([
+  "items",
+  "onSubmit",
+  "Elements",
+  "submitting",
+  "setSubmitting",
+  "values",
+  "setValues",
+  "errors",
+  "setErrors"
+]);
 var FormContextProvider = FormContext.Provider;
 var useFormContext = FormContext.use;
 function FormLabel(props) {
@@ -354,6 +367,70 @@ function FormBody() {
 }
 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) {
+  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;
+    }
+  }
+  return errors;
+}
+function FormFooter() {
+  const {
+    submitting,
+    setSubmitting,
+    onSubmit,
+    values,
+    Elements,
+    items,
+    setErrors
+  } = useFormContext();
+  return /* @__PURE__ */ jsx(
+    Elements.Button,
+    {
+      disabled: submitting,
+      submit: async () => {
+        setSubmitting(true);
+        const errors = await validValues(items, values);
+        if (Object.keys(errors).length) {
+          setErrors(errors);
+          setSubmitting(false);
+          return;
+        }
+        onSubmit(values).finally(() => setSubmitting(false));
+      },
+      children: "Submit"
+    }
+  );
+}
+FormFooter.displayName = "FormFooter";
+FormFooter.whyDidYouRender = true;
+var FormButtonElement = forwardRef(({ disabled, children, submit, ...props }, ref) => /* @__PURE__ */ jsx(
+  "button",
+  {
+    type: "button",
+    disabled,
+    onClick: submit,
+    ...props,
+    ref,
+    children
+  }
+));
+FormButtonElement.displayName = "FormButtonElement";
+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;
@@ -364,7 +441,7 @@ var FormLabelElement = ({
   Label,
   input
 }) => {
-  const { values, setValues } = useFormContext();
+  const { values, setValues, errors } = useFormContext();
   if (Label)
     return /* @__PURE__ */ jsx(
       Label,
@@ -398,24 +475,12 @@ var FormLabelElement = ({
         }))
       }
     ),
-    description
+    description,
+    errors[name]?.message
   ] });
 };
 FormLabelElement.displayName = "FormLabelElement";
 FormLabelElement.whyDidYouRender = true;
-var FormButtonElement = forwardRef(({ disabled, children, onClick, ...props }, ref) => /* @__PURE__ */ jsx(
-  "button",
-  {
-    type: "button",
-    disabled,
-    onClick,
-    ...props,
-    ref,
-    children
-  }
-));
-FormButtonElement.displayName = "FormButtonElement";
-FormButtonElement.whyDidYouRender = true;
 
 // src/Form/elements/index.ts
 var FormDefaultElements = {
@@ -423,22 +488,6 @@ var FormDefaultElements = {
   Input: FormInputElement,
   Button: FormButtonElement
 };
-function FormFooter() {
-  const { submitting, setSubmitting, onSubmit, values, Elements } = useFormContext();
-  return /* @__PURE__ */ jsx(
-    Elements.Button,
-    {
-      disabled: submitting,
-      onClick: () => {
-        setSubmitting(true);
-        onSubmit(values).finally(() => setSubmitting(false));
-      },
-      children: "Submit"
-    }
-  );
-}
-FormFooter.displayName = "FormFooter";
-FormFooter.whyDidYouRender = true;
 function mergeValues(items, defaultValues = {}) {
   const values = {};
   for (const item of items)
@@ -448,6 +497,7 @@ function mergeValues(items, defaultValues = {}) {
 function FormContainer({ defaultValues, elements, ...props }) {
   const states = useSplittingState({
     values: mergeValues(props.items, defaultValues),
+    errors: {},
     submitting: false,
     Elements: Object.assign(FormDefaultElements, elements)
   });

package/package.json

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