@alextheman/components 7.0.1 → 7.0.2

package/dist/QueryBoundary/index.d.ts

@@ -92,7 +92,7 @@ interface QueryBoundaryErrorProps {
 declare function QueryBoundaryError({
   children,
   logError
-}: QueryBoundaryErrorProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+}: QueryBoundaryErrorProps): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
 //#endregion
 //#region src/QueryBoundary/QueryBoundaryNullable.d.ts
 interface QueryBoundaryNullablePropsWithUndefinedOrNull {

package/dist/form/index.d.ts

@@ -0,0 +1,95 @@
+import { createFormHook as createFormHook$1 } from "@tanstack/react-form";
+import { ButtonProps } from "@mui/material/Button";
+import { TextFieldProps } from "@mui/material/TextField";
+import { ComponentType } from "react";
+
+//#region src/form/createFormHook.d.ts
+interface AlexFieldComponents {
+  TextField: typeof TextField;
+}
+interface AlexFormComponents {
+  SubmitButton: typeof SubmitButton;
+}
+/** Create the hooks for your app form with `@tanstack/react-form` using our default configuration. */
+declare function createFormHook<FieldComponents extends Record<string, ComponentType<any>> = Record<string, never>, FormComponents extends Record<string, ComponentType<any>> = Record<string, never>>(options?: Partial<Omit<Parameters<typeof createFormHook$1>[0], "formComponents" | "fieldComponents"> & {
+  fieldComponents?: FieldComponents;
+  formComponents?: FormComponents;
+}>): ReturnType<typeof createFormHook$1<AlexFieldComponents & FieldComponents, AlexFormComponents & FormComponents>>;
+//#endregion
+//#region src/form/SubmitButton.d.ts
+interface SubmitButtonProps extends Omit<ButtonProps, "type"> {
+  /** An option to disable the button on submit if the form is not dirty. */
+  disableClean?: boolean;
+  /** The label for the button. */
+  label?: string;
+}
+/**
+ * A Submit Button for use with TanStack Form's app form pattern. Must be used in a `<form.AppForm />` context.
+ *
+ * This should be initialised in your app form in the following way:
+ *
+ * ```typescript
+ *  const { useAppForm } = createFormHook({
+ *     fieldContext,
+ *     formContext,
+ *     formComponents: {
+ *       SubmitButton,
+ *     },
+ *   });
+ * ```
+ * And then used as such:
+ *
+ * ```tsx
+ * <form.AppField>
+ *   ...
+ * </form.AppField>
+ * <form.AppForm>
+ *   <form.SubmitButton />
+ * </form.AppForm>
+ * ```
+ */
+declare function SubmitButton({
+  disableClean,
+  label,
+  ...buttonProps
+}: SubmitButtonProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+//#region src/form/TextField.d.ts
+/**
+ * A text field component for use with TanStack Form's app form pattern. Must be used in a `<form.AppField />` context.
+ *
+ * This should be initialised in your app form in the following way:
+ *
+ * ```typescript
+ *  const { useAppForm } = createFormHook({
+ *     fieldContext,
+ *     formContext,
+ *     fieldComponents: {
+ *       TextField,
+ *     },
+ *   });
+ * ```
+ * And then used as such:
+ *
+ * ```tsx
+ * <form.AppField name="firstName">
+ *   {(field) => {
+ *      return <field.TextField />
+ *    }}
+ * </form.AppField>
+ * <form.AppForm>
+ *   <form.SubmitButton />
+ * </form.AppForm>
+ * ```
+ */
+declare function TextField({
+  label,
+  type,
+  ...props
+}: TextFieldProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+//#region src/form/formHooks.d.ts
+declare const fieldContext: import("react").Context<import("@tanstack/react-form").AnyFieldApi>, formContext: import("react").Context<import("@tanstack/react-form").AnyFormApi>, useFieldContext: <TData>() => import("@tanstack/react-form").FieldApi<any, string, TData, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>, useFormContext: () => import("@tanstack/react-form").ReactFormExtendedApi<Record<string, never>, any, any, any, any, any, any, any, any, any, any, any>;
+//#endregion
+export { SubmitButton, type SubmitButtonProps, TextField, createFormHook, fieldContext, formContext, useFieldContext, useFormContext };
+//# sourceMappingURL=index.d.ts.map

package/dist/form/index.js

@@ -0,0 +1,2 @@
+import{omitProperties as e}from"@alextheman/utility";import{createFormHook as t,createFormHookContexts as n}from"@tanstack/react-form";import r from"@mui/material/Button";import{jsx as i}from"react/jsx-runtime";import a from"@mui/material/TextField";const{fieldContext:o,formContext:s,useFieldContext:c,useFormContext:l}=n();function u(n){return t({fieldContext:o,formContext:s,fieldComponents:{TextField:f,...n?.fieldComponents},formComponents:{SubmitButton:d,...n?.formComponents},...e(n??{},[`formComponents`,`fieldComponents`])})}function d({disableClean:e,label:t=`Submit`,...n}){let a=l();return i(r,{color:`primary`,disabled:n.disabled||e&&!a.state.isDirty,loading:a.state.isSubmitting,type:`submit`,variant:`contained`,...n,children:t})}function f({label:e,type:t,...n}){let r=c();return i(a,{...n,label:e,error:r.state.meta.errors.length!==0,type:t??`text`,value:r.state.value,onChange:e=>r.handleChange(e.target.value),onBlur:r.handleBlur,placeholder:typeof e==`string`?e:r.name,helperText:r.state.meta.errors[0]??``})}export{d as SubmitButton,f as TextField,u as createFormHook,o as fieldContext,s as formContext,c as useFieldContext,l as useFormContext};
+//# sourceMappingURL=index.js.map

package/dist/form/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["createTanstackFormHook"],"sources":["../../src/form/formHooks.ts","../../src/form/createFormHook.ts","../../src/form/SubmitButton.tsx","../../src/form/TextField.tsx"],"sourcesContent":["import { createFormHookContexts } from \"@tanstack/react-form\";\n\nexport const { fieldContext, formContext, useFieldContext, useFormContext } =\n  createFormHookContexts();\n","import type { ComponentType } from \"react\";\n\nimport { omitProperties } from \"@alextheman/utility\";\nimport { createFormHook as createTanstackFormHook } from \"@tanstack/react-form\";\n\nimport { SubmitButton, TextField } from \"src/form\";\nimport { fieldContext, formContext } from \"src/form/formHooks\";\n\nexport interface AlexFieldComponents {\n  TextField: typeof TextField;\n}\n\nexport interface AlexFormComponents {\n  SubmitButton: typeof SubmitButton;\n}\n\n/** Create the hooks for your app form with `@tanstack/react-form` using our default configuration. */\nfunction createFormHook<\n  FieldComponents extends Record<string, ComponentType<any>> = Record<string, never>,\n  FormComponents extends Record<string, ComponentType<any>> = Record<string, never>,\n>(\n  options?: Partial<\n    Omit<Parameters<typeof createTanstackFormHook>[0], \"formComponents\" | \"fieldComponents\"> & {\n      fieldComponents?: FieldComponents;\n      formComponents?: FormComponents;\n    }\n  >,\n): ReturnType<\n  typeof createTanstackFormHook<\n    AlexFieldComponents & FieldComponents,\n    AlexFormComponents & FormComponents\n  >\n> {\n  return createTanstackFormHook({\n    fieldContext,\n    formContext,\n    fieldComponents: {\n      TextField,\n      ...options?.fieldComponents,\n    } as AlexFieldComponents & FieldComponents,\n    formComponents: {\n      SubmitButton,\n      ...options?.formComponents,\n    } as AlexFormComponents & FormComponents,\n    ...omitProperties(options ?? {}, [\"formComponents\", \"fieldComponents\"]),\n  });\n}\n\nexport default createFormHook;\n","import type { ButtonProps } from \"@mui/material/Button\";\n\nimport Button from \"@mui/material/Button\";\n\nimport { useFormContext } from \"src/form/formHooks\";\n\nexport interface SubmitButtonProps extends Omit<ButtonProps, \"type\"> {\n  /** An option to disable the button on submit if the form is not dirty. */\n  disableClean?: boolean;\n  /** The label for the button. */\n  label?: string;\n}\n\n/**\n * A Submit Button for use with TanStack Form's app form pattern. Must be used in a `<form.AppForm />` context.\n *\n * This should be initialised in your app form in the following way:\n *\n * ```typescript\n *  const { useAppForm } = createFormHook({\n *     fieldContext,\n *     formContext,\n *     formComponents: {\n *       SubmitButton,\n *     },\n *   });\n * ```\n * And then used as such:\n *\n * ```tsx\n * <form.AppField>\n *   ...\n * </form.AppField>\n * <form.AppForm>\n *   <form.SubmitButton />\n * </form.AppForm>\n * ```\n */\nfunction SubmitButton({ disableClean, label = \"Submit\", ...buttonProps }: SubmitButtonProps) {\n  const form = useFormContext();\n\n  return (\n    <Button\n      color=\"primary\"\n      disabled={buttonProps.disabled || (disableClean && !form.state.isDirty)}\n      loading={form.state.isSubmitting}\n      type=\"submit\"\n      variant=\"contained\"\n      {...buttonProps}\n    >\n      {label}\n    </Button>\n  );\n}\n\nexport default SubmitButton;\n","import type { TextFieldProps as MUITextFieldProps } from \"@mui/material/TextField\";\n\nimport MUITextField from \"@mui/material/TextField\";\n\nimport { useFieldContext } from \"src/form/formHooks\";\n\n/**\n * A text field component for use with TanStack Form's app form pattern. Must be used in a `<form.AppField />` context.\n *\n * This should be initialised in your app form in the following way:\n *\n * ```typescript\n *  const { useAppForm } = createFormHook({\n *     fieldContext,\n *     formContext,\n *     fieldComponents: {\n *       TextField,\n *     },\n *   });\n * ```\n * And then used as such:\n *\n * ```tsx\n * <form.AppField name=\"firstName\">\n *   {(field) => {\n *      return <field.TextField />\n *    }}\n * </form.AppField>\n * <form.AppForm>\n *   <form.SubmitButton />\n * </form.AppForm>\n * ```\n */\nfunction TextField({ label, type, ...props }: MUITextFieldProps) {\n  const field = useFieldContext();\n\n  return (\n    <MUITextField\n      {...props}\n      label={label}\n      error={field.state.meta.errors.length !== 0}\n      type={type ?? \"text\"}\n      value={field.state.value}\n      onChange={(event) => {\n        return field.handleChange(event.target.value);\n      }}\n      onBlur={field.handleBlur}\n      placeholder={typeof label === \"string\" ? label : field.name}\n      helperText={field.state.meta.errors[0] ?? \"\"}\n    />\n  );\n}\n\nexport default TextField;\n"],"mappings":"0PAEA,KAAa,CAAE,eAAc,cAAa,kBAAiB,kBACzD,EAAuB,ECczB,SAAS,EAIP,EAWA,CACA,OAAOA,EAAuB,CAC5B,eACA,cACA,gBAAiB,CACf,YACA,GAAG,GAAS,eACd,EACA,eAAgB,CACd,eACA,GAAG,GAAS,cACd,EACA,GAAG,EAAe,GAAW,CAAC,EAAG,CAAC,iBAAkB,iBAAiB,CAAC,CACxE,CAAC,CACH,CCRA,SAAS,EAAa,CAAE,eAAc,QAAQ,SAAU,GAAG,GAAkC,CAC3F,IAAM,EAAO,EAAe,EAE5B,OACE,EAAC,EAAD,CACE,MAAM,UACN,SAAU,EAAY,UAAa,GAAgB,CAAC,EAAK,MAAM,QAC/D,QAAS,EAAK,MAAM,aACpB,KAAK,SACL,QAAQ,YACR,GAAI,WAEH,CACK,CAAA,CAEZ,CCpBA,SAAS,EAAU,CAAE,QAAO,OAAM,GAAG,GAA4B,CAC/D,IAAM,EAAQ,EAAgB,EAE9B,OACE,EAAC,EAAD,CACE,GAAI,EACG,QACP,MAAO,EAAM,MAAM,KAAK,OAAO,SAAW,EAC1C,KAAM,GAAQ,OACd,MAAO,EAAM,MAAM,MACnB,SAAW,GACF,EAAM,aAAa,EAAM,OAAO,KAAK,EAE9C,OAAQ,EAAM,WACd,YAAa,OAAO,GAAU,SAAW,EAAQ,EAAM,KACvD,WAAY,EAAM,MAAM,KAAK,OAAO,IAAM,EAC3C,CAAA,CAEL"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alextheman/components",
-  "version": "7.0.1",
+  "version": "7.0.2",
   "description": "A package containing common React components used across my projects.",
   "repository": {
     "type": "git",