@faasjs/react 3.6.1 → 3.7.0-beta.0

package/README.md

@@ -44,6 +44,7 @@ npm install @faasjs/react
 - [faas](functions/faas.md)
 - [FaasDataWrapper](functions/FaasDataWrapper.md)
 - [FaasReactClient](functions/FaasReactClient.md)
+- [Form](functions/Form.md)
 - [getClient](functions/getClient.md)
 - [OptionalWrapper](functions/OptionalWrapper.md)
 - [useConstant](functions/useConstant.md)

package/dist/index.d.mts

@@ -2,7 +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 { ReactNode, Dispatch, SetStateAction, ReactElement, Component, ComponentType, ComponentProps } from 'react';
+import { ReactNode, Dispatch, SetStateAction, ReactElement, Component, ComponentType, ComponentProps, JSXElementConstructor } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 /**
@@ -371,4 +371,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 FormInputComponentProps = {
+    name: string;
+    value: any;
+    onChange: (value: any) => void;
+};
+type FormInputComponent<Extra extends Record<string, any> = Record<string, any>> = ComponentType<FormInputComponentProps & Extra>;
+type InferFormInputProps<T extends FormInputComponent | JSXElementConstructor<any>> = T extends FormInputComponent ? Omit<ComponentProps<T>, 'name' | 'value' | 'onChange'> : Omit<ComponentProps<T>, 'name' | 'value'>;
+type FormInputProps<FormElements extends FormElementTypes = FormElementTypes> = {
+    Input: FormInputComponent;
+} | {
+    type?: 'input';
+    props?: InferFormInputProps<FormElements['input']>;
+} | {
+    type: 'select';
+    props?: InferFormInputProps<FormElements['select']>;
+};
+
+type FormLabelProps<FormElements extends FormElementTypes = FormElementTypes> = {
+    name: string;
+    rules?: FormRules;
+    label?: {
+        title?: ReactNode;
+        description?: ReactNode;
+        Label?: React.ComponentType<FormLabelProps>;
+    };
+    input?: FormInputProps<FormElements>;
+};
+
+type FormButtonProps = {
+    children?: React.ReactNode;
+    disabled?: boolean;
+    onClick?: () => void;
+};
+
+type FormSelectOption = {
+    value: string | number;
+    label: string;
+};
+type FormElementTypes = {
+    label: ComponentType<FormLabelProps>;
+    input: FormInputComponent;
+    select: FormInputComponent<{
+        options?: FormSelectOption[];
+    }>;
+    button: ComponentType<FormButtonProps>;
+};
+
+type FormProps<Values extends Record<string, any> = Record<string, any>, FormElements extends FormElementTypes = FormElementTypes> = {
+    items: FormLabelProps<FormElements>[];
+    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;
+
+export { ErrorBoundary, type ErrorBoundaryProps, type ErrorChildrenProps, type FaasDataInjection, FaasDataWrapper, type FaasDataWrapperProps, FaasReactClient, type FaasReactClientInstance, type FaasReactClientOptions, FormContainer as Form, type OnError, OptionalWrapper, type OptionalWrapperProps, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, type useFaasOptions, useSplittingState, withFaasData };

package/dist/index.d.ts

@@ -2,7 +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 { ReactNode, Dispatch, SetStateAction, ReactElement, Component, ComponentType, ComponentProps } from 'react';
+import { ReactNode, Dispatch, SetStateAction, ReactElement, Component, ComponentType, ComponentProps, JSXElementConstructor } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 /**
@@ -371,4 +371,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 FormInputComponentProps = {
+    name: string;
+    value: any;
+    onChange: (value: any) => void;
+};
+type FormInputComponent<Extra extends Record<string, any> = Record<string, any>> = ComponentType<FormInputComponentProps & Extra>;
+type InferFormInputProps<T extends FormInputComponent | JSXElementConstructor<any>> = T extends FormInputComponent ? Omit<ComponentProps<T>, 'name' | 'value' | 'onChange'> : Omit<ComponentProps<T>, 'name' | 'value'>;
+type FormInputProps<FormElements extends FormElementTypes = FormElementTypes> = {
+    Input: FormInputComponent;
+} | {
+    type?: 'input';
+    props?: InferFormInputProps<FormElements['input']>;
+} | {
+    type: 'select';
+    props?: InferFormInputProps<FormElements['select']>;
+};
+
+type FormLabelProps<FormElements extends FormElementTypes = FormElementTypes> = {
+    name: string;
+    rules?: FormRules;
+    label?: {
+        title?: ReactNode;
+        description?: ReactNode;
+        Label?: React.ComponentType<FormLabelProps>;
+    };
+    input?: FormInputProps<FormElements>;
+};
+
+type FormButtonProps = {
+    children?: React.ReactNode;
+    disabled?: boolean;
+    onClick?: () => void;
+};
+
+type FormSelectOption = {
+    value: string | number;
+    label: string;
+};
+type FormElementTypes = {
+    label: ComponentType<FormLabelProps>;
+    input: FormInputComponent;
+    select: FormInputComponent<{
+        options?: FormSelectOption[];
+    }>;
+    button: ComponentType<FormButtonProps>;
+};
+
+type FormProps<Values extends Record<string, any> = Record<string, any>, FormElements extends FormElementTypes = FormElementTypes> = {
+    items: FormLabelProps<FormElements>[];
+    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;
+
+export { ErrorBoundary, type ErrorBoundaryProps, type ErrorChildrenProps, type FaasDataInjection, FaasDataWrapper, type FaasDataWrapperProps, FaasReactClient, type FaasReactClientInstance, type FaasReactClientOptions, FormContainer as Form, type OnError, OptionalWrapper, type OptionalWrapperProps, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, type useFaasOptions, useSplittingState, withFaasData };

package/dist/index.js

@@ -334,9 +334,152 @@ 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?.Label) return /* @__PURE__ */ jsxRuntime.jsx(props.label.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));
+}
+function processValue(input, rules) {
+  let value = input;
+  if (typeof input === "object" && "target" in input) {
+    value = input.target.value;
+  }
+  switch (rules?.type) {
+    case "number":
+      return Number(value);
+    case "string":
+      return String(value);
+    default:
+      return value;
+  }
+}
+function FormInput({
+  name,
+  rules,
+  ...rest
+}) {
+  const { elements, values, setValues } = useFormContext();
+  const value = values?.[name];
+  if ("Input" in rest && rest.Input) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      rest.Input,
+      {
+        name,
+        value,
+        onChange: (v) => setValues((prev) => ({
+          ...prev,
+          [name]: v
+        }))
+      }
+    );
+  }
+  if ("type" in rest || "props" in rest) {
+    switch (rest.type) {
+      case "select":
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          elements.select,
+          {
+            name,
+            value,
+            onChange: (v) => setValues((prev) => ({
+              ...prev,
+              [name]: processValue(v, rules)
+            })),
+            ...rest.props
+          }
+        );
+      default:
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          elements.input,
+          {
+            name,
+            value,
+            onChange: (v) => setValues((prev) => ({
+              ...prev,
+              [name]: processValue(v, rules)
+            })),
+            ...rest.props
+          }
+        );
+    }
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    elements.input,
+    {
+      name,
+      value,
+      onChange: (v) => setValues((prev) => ({
+        ...prev,
+        [name]: processValue(v, rules)
+      }))
+    }
+  );
+}
+var FormElements = {
+  label: react.forwardRef(({ name, label, input, rules }, ref) => /* @__PURE__ */ jsxRuntime.jsxs("label", { ref, children: [
+    label?.title ?? name,
+    /* @__PURE__ */ jsxRuntime.jsx(FormInput, { name, rules, ...input }),
+    label?.description
+  ] })),
+  input: react.forwardRef(
+    (props, ref) => /* @__PURE__ */ jsxRuntime.jsx("input", { ...props, ref })
+  ),
+  select: react.forwardRef(({ options, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("select", { ...props, ref, children: options?.map((option) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: option.value, children: option.label }, option.value)) })),
+  button: react.forwardRef(({ disabled, children, onClick, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", disabled, onClick, ...props, ref, children }))
+};
+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(FormElements, 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.OptionalWrapper = OptionalWrapper;
 exports.createSplittingContext = createSplittingContext;
 exports.equal = equal;

package/dist/index.mjs

@@ -1,5 +1,5 @@
-import { useRef, useMemo, useEffect, useCallback, createContext, useState, cloneElement, Component, useContext } from 'react';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useRef, useMemo, useEffect, useCallback, createContext, useState, cloneElement, Component, useContext } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { FaasBrowserClient } from '@faasjs/browser';
 
 // src/constant.ts
@@ -332,4 +332,146 @@ 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?.Label) return /* @__PURE__ */ jsx(props.label.Label, { ...props });
+  return /* @__PURE__ */ jsx(elements.label, { ...props });
+}
+function FormBody() {
+  const { items } = useFormContext();
+  return items.map((item) => /* @__PURE__ */ jsx(FormLabel, { ...item }, item.name));
+}
+function processValue(input, rules) {
+  let value = input;
+  if (typeof input === "object" && "target" in input) {
+    value = input.target.value;
+  }
+  switch (rules?.type) {
+    case "number":
+      return Number(value);
+    case "string":
+      return String(value);
+    default:
+      return value;
+  }
+}
+function FormInput({
+  name,
+  rules,
+  ...rest
+}) {
+  const { elements, values, setValues } = useFormContext();
+  const value = values?.[name];
+  if ("Input" in rest && rest.Input) {
+    return /* @__PURE__ */ jsx(
+      rest.Input,
+      {
+        name,
+        value,
+        onChange: (v) => setValues((prev) => ({
+          ...prev,
+          [name]: v
+        }))
+      }
+    );
+  }
+  if ("type" in rest || "props" in rest) {
+    switch (rest.type) {
+      case "select":
+        return /* @__PURE__ */ jsx(
+          elements.select,
+          {
+            name,
+            value,
+            onChange: (v) => setValues((prev) => ({
+              ...prev,
+              [name]: processValue(v, rules)
+            })),
+            ...rest.props
+          }
+        );
+      default:
+        return /* @__PURE__ */ jsx(
+          elements.input,
+          {
+            name,
+            value,
+            onChange: (v) => setValues((prev) => ({
+              ...prev,
+              [name]: processValue(v, rules)
+            })),
+            ...rest.props
+          }
+        );
+    }
+  }
+  return /* @__PURE__ */ jsx(
+    elements.input,
+    {
+      name,
+      value,
+      onChange: (v) => setValues((prev) => ({
+        ...prev,
+        [name]: processValue(v, rules)
+      }))
+    }
+  );
+}
+var FormElements = {
+  label: forwardRef(({ name, label, input, rules }, ref) => /* @__PURE__ */ jsxs("label", { ref, children: [
+    label?.title ?? name,
+    /* @__PURE__ */ jsx(FormInput, { name, rules, ...input }),
+    label?.description
+  ] })),
+  input: forwardRef(
+    (props, ref) => /* @__PURE__ */ jsx("input", { ...props, ref })
+  ),
+  select: forwardRef(({ options, ...props }, ref) => /* @__PURE__ */ jsx("select", { ...props, ref, children: options?.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value)) })),
+  button: forwardRef(({ disabled, children, onClick, ...props }, ref) => /* @__PURE__ */ jsx("button", { type: "button", disabled, onClick, ...props, ref, children }))
+};
+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(FormElements, elements)
+  });
+  return /* @__PURE__ */ jsxs(
+    FormContextProvider,
+    {
+      value: {
+        ...states,
+        ...props
+      },
+      children: [
+        /* @__PURE__ */ jsx(FormBody, {}),
+        /* @__PURE__ */ jsx(FormFooter, {})
+      ]
+    }
+  );
+}
+
+export { ErrorBoundary, FaasDataWrapper, FaasReactClient, FormContainer as Form, OptionalWrapper, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, useSplittingState, withFaasData };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faasjs/react",
-  "version": "3.6.1",
+  "version": "3.7.0-beta.0",
   "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.0"
   },
   "devDependencies": {
+    "@faasjs/browser": "3.7.0-beta.0",
     "@types/react": "*",
-    "react": "*",
-    "@faasjs/browser": "3.6.1"
+    "react": "*"
   },
   "engines": {
     "node": ">=22.0.0",