@faasjs/react 3.6.1 → 3.7.0-beta.1

package/README.md

@@ -44,6 +44,8 @@ npm install @faasjs/react
 - [faas](functions/faas.md)
 - [FaasDataWrapper](functions/FaasDataWrapper.md)
 - [FaasReactClient](functions/FaasReactClient.md)
+- [Form](functions/Form.md)
+- [FormContextProvider](functions/FormContextProvider.md)
 - [getClient](functions/getClient.md)
 - [OptionalWrapper](functions/OptionalWrapper.md)
 - [useConstant](functions/useConstant.md)
@@ -52,6 +54,7 @@ npm install @faasjs/react
 - [useEqualMemo](functions/useEqualMemo.md)
 - [useEqualMemoize](functions/useEqualMemoize.md)
 - [useFaas](functions/useFaas.md)
+- [useFormContext](functions/useFormContext.md)
 - [useSplittingState](functions/useSplittingState.md)
 - [withFaasData](functions/withFaasData.md)
 
@@ -75,8 +78,15 @@ npm install @faasjs/react
 - [FaasParams](type-aliases/FaasParams.md)
 - [FaasReactClientInstance](type-aliases/FaasReactClientInstance.md)
 - [FaasReactClientOptions](type-aliases/FaasReactClientOptions.md)
+- [FormContextProps](type-aliases/FormContextProps.md)
+- [FormElementTypes](type-aliases/FormElementTypes.md)
+- [FormProps](type-aliases/FormProps.md)
 - [OnError](type-aliases/OnError.md)
 - [OptionalWrapperProps](type-aliases/OptionalWrapperProps.md)
 - [Options](type-aliases/Options.md)
 - [ResponseHeaders](type-aliases/ResponseHeaders.md)
 - [useFaasOptions](type-aliases/useFaasOptions.md)
+
+## Variables
+
+- [FormDefaultElements](variables/FormDefaultElements.md)

package/dist/index.d.mts

@@ -2,6 +2,7 @@ import { FaasAction, FaasData, FaasParams } from '@faasjs/types';
 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 } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
@@ -371,4 +372,64 @@ declare const OptionalWrapper: React.FC<OptionalWrapperProps> & {
     whyDidYouRender: boolean;
 };
 
-export { ErrorBoundary, type ErrorBoundaryProps, type ErrorChildrenProps, type FaasDataInjection, FaasDataWrapper, type FaasDataWrapperProps, FaasReactClient, type FaasReactClientInstance, type FaasReactClientOptions, type OnError, OptionalWrapper, type OptionalWrapperProps, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, type useFaasOptions, useSplittingState, withFaasData };
+type FormRules = {
+    type?: 'string' | 'number';
+    required?: boolean;
+};
+
+type FormInputElementProps = {
+    name: string;
+    value: any;
+    onChange: (value: any) => void;
+};
+
+type FormLabelElementProps = {
+    name: string;
+    rules?: FormRules;
+    title?: ReactNode;
+    description?: ReactNode;
+    Label?: React.ComponentType<FormLabelElementProps>;
+    input?: {
+        Input?: ComponentType<FormInputElementProps>;
+        props?: FormInputElementProps;
+    };
+};
+
+type FormButtonElementProps = {
+    children?: React.ReactNode;
+    disabled?: boolean;
+    onClick?: () => void;
+};
+
+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[];
+    onSubmit?: (values: Values) => Promise<void>;
+    elements?: FormElements;
+    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;
+
+type FormContextProps<Values extends Record<string, any> = Record<string, any>> = {
+    items: FormLabelElementProps[];
+    onSubmit: (values: Values) => Promise<void>;
+    Elements: FormElementTypes;
+    submitting: boolean;
+    setSubmitting: React.Dispatch<React.SetStateAction<boolean>>;
+    values: Values;
+    setValues: React.Dispatch<React.SetStateAction<Values>>;
+};
+declare const FormContextProvider: <NewT extends FormContextProps<Record<string, any>> = FormContextProps<Record<string, any>>>(props: {
+    value?: NewT;
+    children: react.ReactNode;
+    memo?: true | any[];
+}) => react.ReactNode;
+declare const useFormContext: <NewT extends FormContextProps<Record<string, any>> = FormContextProps<Record<string, any>>>() => Readonly<NewT>;
+
+export { ErrorBoundary, type ErrorBoundaryProps, type ErrorChildrenProps, type FaasDataInjection, FaasDataWrapper, type FaasDataWrapperProps, FaasReactClient, type FaasReactClientInstance, type FaasReactClientOptions, FormContainer as Form, type FormContextProps, FormContextProvider, FormDefaultElements, type FormElementTypes, type FormProps, type OnError, OptionalWrapper, type OptionalWrapperProps, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, type useFaasOptions, useFormContext, useSplittingState, withFaasData };

package/dist/index.d.ts

@@ -2,6 +2,7 @@ import { FaasAction, FaasData, FaasParams } from '@faasjs/types';
 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 } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
@@ -371,4 +372,64 @@ declare const OptionalWrapper: React.FC<OptionalWrapperProps> & {
     whyDidYouRender: boolean;
 };
 
-export { ErrorBoundary, type ErrorBoundaryProps, type ErrorChildrenProps, type FaasDataInjection, FaasDataWrapper, type FaasDataWrapperProps, FaasReactClient, type FaasReactClientInstance, type FaasReactClientOptions, type OnError, OptionalWrapper, type OptionalWrapperProps, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, type useFaasOptions, useSplittingState, withFaasData };
+type FormRules = {
+    type?: 'string' | 'number';
+    required?: boolean;
+};
+
+type FormInputElementProps = {
+    name: string;
+    value: any;
+    onChange: (value: any) => void;
+};
+
+type FormLabelElementProps = {
+    name: string;
+    rules?: FormRules;
+    title?: ReactNode;
+    description?: ReactNode;
+    Label?: React.ComponentType<FormLabelElementProps>;
+    input?: {
+        Input?: ComponentType<FormInputElementProps>;
+        props?: FormInputElementProps;
+    };
+};
+
+type FormButtonElementProps = {
+    children?: React.ReactNode;
+    disabled?: boolean;
+    onClick?: () => void;
+};
+
+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[];
+    onSubmit?: (values: Values) => Promise<void>;
+    elements?: FormElements;
+    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;
+
+type FormContextProps<Values extends Record<string, any> = Record<string, any>> = {
+    items: FormLabelElementProps[];
+    onSubmit: (values: Values) => Promise<void>;
+    Elements: FormElementTypes;
+    submitting: boolean;
+    setSubmitting: React.Dispatch<React.SetStateAction<boolean>>;
+    values: Values;
+    setValues: React.Dispatch<React.SetStateAction<Values>>;
+};
+declare const FormContextProvider: <NewT extends FormContextProps<Record<string, any>> = FormContextProps<Record<string, any>>>(props: {
+    value?: NewT;
+    children: react.ReactNode;
+    memo?: true | any[];
+}) => react.ReactNode;
+declare const useFormContext: <NewT extends FormContextProps<Record<string, any>> = FormContextProps<Record<string, any>>>() => Readonly<NewT>;
+
+export { ErrorBoundary, type ErrorBoundaryProps, type ErrorChildrenProps, type FaasDataInjection, FaasDataWrapper, type FaasDataWrapperProps, FaasReactClient, type FaasReactClientInstance, type FaasReactClientOptions, FormContainer as Form, type FormContextProps, FormContextProvider, FormDefaultElements, type FormElementTypes, type FormProps, type OnError, OptionalWrapper, type OptionalWrapperProps, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, type useFaasOptions, useFormContext, useSplittingState, withFaasData };

package/dist/index.js

@@ -334,9 +334,120 @@ var OptionalWrapper = ({ condition, Wrapper, wrapperProps, children }) => {
 };
 OptionalWrapper.whyDidYouRender = true;
 
+// src/Form/context.tsx
+var FormContext = createSplittingContext(["items", "onSubmit", "Elements", "submitting", "setSubmitting", "values", "setValues"]);
+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 FormBody() {
+  const { items } = useFormContext();
+  return items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { ...item }, item.name));
+}
+var FormInputElement = react.forwardRef(({ onChange, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("input", { ...props, onChange: (e) => onChange(e.target.value), ref }));
+var FormLabelElement = ({
+  name,
+  title,
+  description,
+  Label,
+  input
+}) => {
+  const { values, setValues } = 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
+        }))
+      }
+    ),
+    description
+  ] });
+};
+var FormButtonElement = react.forwardRef(({ disabled, children, onClick, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "button",
+  {
+    type: "button",
+    disabled,
+    onClick,
+    ...props,
+    ref,
+    children
+  }
+));
+
+// src/Form/elements/index.ts
+var FormDefaultElements = {
+  Label: FormLabelElement,
+  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"
+    }
+  );
+}
+function mergeValues(items, defaultValues = {}) {
+  const values = {};
+  for (const item of items)
+    values[item.name] = defaultValues[item.name] ?? "";
+  return values;
+}
+function FormContainer({ defaultValues, elements, ...props }) {
+  const states = useSplittingState({
+    values: mergeValues(props.items, defaultValues),
+    submitting: false,
+    Elements: Object.assign(FormDefaultElements, elements)
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    FormContextProvider,
+    {
+      value: {
+        ...states,
+        ...props
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(FormBody, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(FormFooter, {})
+      ]
+    }
+  );
+}
+
 exports.ErrorBoundary = ErrorBoundary;
 exports.FaasDataWrapper = FaasDataWrapper;
 exports.FaasReactClient = FaasReactClient;
+exports.Form = FormContainer;
+exports.FormContextProvider = FormContextProvider;
+exports.FormDefaultElements = FormDefaultElements;
 exports.OptionalWrapper = OptionalWrapper;
 exports.createSplittingContext = createSplittingContext;
 exports.equal = equal;
@@ -348,5 +459,6 @@ exports.useEqualEffect = useEqualEffect;
 exports.useEqualMemo = useEqualMemo;
 exports.useEqualMemoize = useEqualMemoize;
 exports.useFaas = useFaas;
+exports.useFormContext = useFormContext;
 exports.useSplittingState = useSplittingState;
 exports.withFaasData = withFaasData;

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { useRef, useMemo, useEffect, useCallback, createContext, useState, cloneElement, Component, useContext } from 'react';
+import { forwardRef, useRef, useMemo, useEffect, useCallback, createContext, useState, cloneElement, Component, useContext } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { FaasBrowserClient } from '@faasjs/browser';
 
@@ -332,4 +332,112 @@ var OptionalWrapper = ({ condition, Wrapper, wrapperProps, children }) => {
 };
 OptionalWrapper.whyDidYouRender = true;
 
-export { ErrorBoundary, FaasDataWrapper, FaasReactClient, OptionalWrapper, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, useSplittingState, withFaasData };
+// src/Form/context.tsx
+var FormContext = createSplittingContext(["items", "onSubmit", "Elements", "submitting", "setSubmitting", "values", "setValues"]);
+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 FormBody() {
+  const { items } = useFormContext();
+  return items.map((item) => /* @__PURE__ */ jsx(FormLabel, { ...item }, item.name));
+}
+var FormInputElement = forwardRef(({ onChange, ...props }, ref) => /* @__PURE__ */ jsx("input", { ...props, onChange: (e) => onChange(e.target.value), ref }));
+var FormLabelElement = ({
+  name,
+  title,
+  description,
+  Label,
+  input
+}) => {
+  const { values, setValues } = 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
+        }))
+      }
+    ),
+    description
+  ] });
+};
+var FormButtonElement = forwardRef(({ disabled, children, onClick, ...props }, ref) => /* @__PURE__ */ jsx(
+  "button",
+  {
+    type: "button",
+    disabled,
+    onClick,
+    ...props,
+    ref,
+    children
+  }
+));
+
+// src/Form/elements/index.ts
+var FormDefaultElements = {
+  Label: FormLabelElement,
+  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"
+    }
+  );
+}
+function mergeValues(items, defaultValues = {}) {
+  const values = {};
+  for (const item of items)
+    values[item.name] = defaultValues[item.name] ?? "";
+  return values;
+}
+function FormContainer({ defaultValues, elements, ...props }) {
+  const states = useSplittingState({
+    values: mergeValues(props.items, defaultValues),
+    submitting: false,
+    Elements: Object.assign(FormDefaultElements, elements)
+  });
+  return /* @__PURE__ */ jsxs(
+    FormContextProvider,
+    {
+      value: {
+        ...states,
+        ...props
+      },
+      children: [
+        /* @__PURE__ */ jsx(FormBody, {}),
+        /* @__PURE__ */ jsx(FormFooter, {})
+      ]
+    }
+  );
+}
+
+export { ErrorBoundary, FaasDataWrapper, FaasReactClient, FormContainer as Form, FormContextProvider, FormDefaultElements, OptionalWrapper, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, useFormContext, useSplittingState, withFaasData };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faasjs/react",
-  "version": "3.6.1",
+  "version": "3.7.0-beta.1",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -28,19 +28,18 @@
   },
   "funding": "https://github.com/sponsors/faasjs",
   "scripts": {
-    "build": "tsup src/index.tsx --config ../../tsup.config.json"
+    "build": "tsup src/index.tsx --config ../../tsup.config.json --external react"
   },
   "files": [
     "dist"
   ],
   "peerDependencies": {
-    "react": "*",
-    "@faasjs/browser": "3.6.1"
+    "@faasjs/browser": "3.7.0-beta.1"
   },
   "devDependencies": {
+    "@faasjs/browser": "3.7.0-beta.1",
     "@types/react": "*",
-    "react": "*",
-    "@faasjs/browser": "3.6.1"
+    "react": "*"
   },
   "engines": {
     "node": ">=22.0.0",