@behivetech/forms.form-provider 0.0.0-stage → 0.1.5

package/README.md

@@ -1,3 +1,53 @@
-# Temporary Holding Version
+# form-provider
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+The single place `react-hook-form` is imported directly in this repo. Everything else should import form state/control from here instead of `react-hook-form` — that keeps the underlying library swappable from one spot later.
+
+Re-exports: `FormProvider` (thin wrapper around RHF's own `FormProvider`), `Form` (convenience `<form>` wired to `handleSubmit`, with `FormProvider` already applied), `useForm`, `useFormContext`, `useController`, `useFormState`, `useWatch`, `Controller`, plus the common RHF types (`UseFormReturn`, `FieldValues`, `SubmitHandler`, `Control`, `FieldErrors`, ...).
+
+## Usage
+
+The common case — a form with a real submit action — use `Form`:
+
+```jsx
+import { Form, useForm } from "@behivetech/forms.form-provider";
+import { FormField } from "@behivetech/forms.form-field";
+import { TextField } from "@behivetech/atoms.text-field";
+import { Button } from "@behivetech/atoms.button";
+
+function MyForm() {
+  const methods = useForm({ defaultValues: { email: "" } });
+  const { register } = methods;
+
+  return (
+    <Form methods={methods} onSubmit={(values) => console.log(values)}>
+      <FormField label="Email" htmlFor="email">
+        <TextField id="email" {...register("email")} />
+      </FormField>
+      <Button type="submit">Save</Button>
+    </Form>
+  );
+}
+```
+
+If you need the raw `<form>` element for something `Form` doesn't cover, use `FormProvider` + `handleSubmit` directly:
+
+```jsx
+import { FormProvider, useForm } from "@behivetech/forms.form-provider";
+import { TextField } from "@behivetech/atoms.text-field";
+import { Button } from "@behivetech/atoms.button";
+
+function Example() {
+  const methods = useForm({ defaultValues: { name: "" } });
+  const onSubmit = (values) => alert(JSON.stringify(values));
+  return (
+    <FormProvider methods={methods}>
+      <form onSubmit={methods.handleSubmit(onSubmit)}>
+        <TextField {...methods.register("name")} placeholder="Name" />
+        <Button type="submit">Save</Button>
+      </form>
+    </FormProvider>
+  );
+}
+```
+
+**Not every input needs this.** `TextField`, `Checkbox`, etc. all work standalone with plain `useState` for simple one-off cases, and UI with no real submit moment — live/instant field-by-field editing, for example — should just use the bare atoms + `FormField` for layout, not `Form`/`useForm`. Reach for this package when you actually need multi-field form state, validation, or a real submit action.

package/dist/index.cjs

@@ -0,0 +1,67 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// index.ts
+var index_exports = {};
+__export(index_exports, {
+  Controller: () => import_react_hook_form2.Controller,
+  Form: () => Form,
+  FormProvider: () => FormProvider,
+  useController: () => import_react_hook_form2.useController,
+  useForm: () => import_react_hook_form2.useForm,
+  useFormContext: () => import_react_hook_form2.useFormContext,
+  useFormState: () => import_react_hook_form2.useFormState,
+  useWatch: () => import_react_hook_form2.useWatch
+});
+module.exports = __toCommonJS(index_exports);
+
+// form-provider.tsx
+var import_react_hook_form = require("react-hook-form");
+var import_jsx_runtime = require("react/jsx-runtime");
+var FormProvider = ({
+  methods,
+  children
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_hook_form.FormProvider, { ...methods, children });
+};
+
+// form.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Form = ({
+  methods,
+  onSubmit,
+  children,
+  ...rest
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FormProvider, { methods, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("form", { ...rest, onSubmit: methods.handleSubmit(onSubmit), children }) });
+};
+
+// index.ts
+var import_react_hook_form2 = require("react-hook-form");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Controller,
+  Form,
+  FormProvider,
+  useController,
+  useForm,
+  useFormContext,
+  useFormState,
+  useWatch
+});

package/dist/index.d.ts

@@ -0,0 +1,38 @@
+import * as react from 'react';
+import { ReactNode, FormHTMLAttributes } from 'react';
+import { FieldValues, UseFormReturn, SubmitHandler } from 'react-hook-form';
+export { Control, Controller, ControllerFieldState, ControllerProps, ControllerRenderProps, FieldErrors, FieldPath, FieldValues, RegisterOptions, SubmitHandler, UseFormProps, UseFormReturn, useController, useForm, useFormContext, useFormState, useWatch } from 'react-hook-form';
+
+interface FormProviderProps<TFieldValues extends FieldValues = FieldValues> {
+    /** The return value of `useForm()` (re-exported from this package) */
+    methods: UseFormReturn<TFieldValues>;
+    /** Descendants that will consume the form context via `useFormContext()` */
+    children: ReactNode;
+}
+/**
+ * Thin wrapper around react-hook-form's `FormProvider`. Import this (and
+ * `useForm`, `Controller`, etc.) from this package instead of importing
+ * `react-hook-form` directly anywhere else — this is the one place that
+ * knows about the underlying form library, so it can be swapped later
+ * without touching every consumer.
+ */
+declare const FormProvider: <TFieldValues extends FieldValues = FieldValues>({ methods, children, }: FormProviderProps<TFieldValues>) => react.JSX.Element;
+
+interface FormProps<TFieldValues extends FieldValues = FieldValues> extends Omit<FormHTMLAttributes<HTMLFormElement>, "onSubmit"> {
+    /** The return value of `useForm()` */
+    methods: UseFormReturn<TFieldValues>;
+    /** Called with the validated values when the form is submitted */
+    onSubmit: SubmitHandler<TFieldValues>;
+    /** Form content, typically FormField-wrapped controls */
+    children: ReactNode;
+}
+/**
+ * Convenience wrapper for the common case: a `<form>` whose submit is wired
+ * to react-hook-form's `handleSubmit`, with `FormProvider` already applied
+ * so descendants can use `useFormContext()`. For editing UIs with no submit
+ * moment (live/instant field-by-field updates), use the bare atoms +
+ * `FormField` instead — this component assumes a real submit action exists.
+ */
+declare const Form: <TFieldValues extends FieldValues = FieldValues>({ methods, onSubmit, children, ...rest }: FormProps<TFieldValues>) => react.JSX.Element;
+
+export { Form, type FormProps, FormProvider, type FormProviderProps };

package/dist/index.js

@@ -0,0 +1,42 @@
+// form-provider.tsx
+import {
+  FormProvider as RHFFormProvider
+} from "react-hook-form";
+import { jsx } from "react/jsx-runtime";
+var FormProvider = ({
+  methods,
+  children
+}) => {
+  return /* @__PURE__ */ jsx(RHFFormProvider, { ...methods, children });
+};
+
+// form.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Form = ({
+  methods,
+  onSubmit,
+  children,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx2(FormProvider, { methods, children: /* @__PURE__ */ jsx2("form", { ...rest, onSubmit: methods.handleSubmit(onSubmit), children }) });
+};
+
+// index.ts
+import {
+  useForm,
+  useFormContext,
+  useController,
+  useFormState,
+  useWatch,
+  Controller
+} from "react-hook-form";
+export {
+  Controller,
+  Form,
+  FormProvider,
+  useController,
+  useForm,
+  useFormContext,
+  useFormState,
+  useWatch
+};

package/form-provider.example.tsx

@@ -0,0 +1,39 @@
+import { FormField } from "@behivetech/forms.form-field";
+import { TextField } from "@behivetech/atoms.text-field";
+import { Button } from "@behivetech/atoms.button";
+import { Form, FormProvider, useForm } from "./index.js";
+
+interface DemoValues {
+  email: string;
+}
+
+export const BasicFormProvider = () => {
+  const methods = useForm<DemoValues>({ defaultValues: { email: "" } });
+  const { register, handleSubmit } = methods;
+
+  return (
+    <FormProvider methods={methods}>
+      <form onSubmit={handleSubmit((values) => console.log(values))}>
+        <FormField label="Email" htmlFor="email">
+          <TextField id="email" {...register("email")} />
+        </FormField>
+      </form>
+    </FormProvider>
+  );
+};
+
+export const BasicForm = () => {
+  const methods = useForm<DemoValues>({ defaultValues: { email: "" } });
+  const { register } = methods;
+
+  return (
+    <Form methods={methods} onSubmit={(values) => console.log(values)}>
+      <FormField label="Email" htmlFor="email-form">
+        <TextField id="email-form" {...register("email")} />
+      </FormField>
+      <Button type="submit" variant="primary" size="sm">
+        Save
+      </Button>
+    </Form>
+  );
+};

package/form-provider.tsx

@@ -0,0 +1,29 @@
+import { type ReactNode } from "react";
+import {
+  FormProvider as RHFFormProvider,
+  type FieldValues,
+  type UseFormReturn,
+} from "react-hook-form";
+
+export interface FormProviderProps<
+  TFieldValues extends FieldValues = FieldValues,
+> {
+  /** The return value of `useForm()` (re-exported from this package) */
+  methods: UseFormReturn<TFieldValues>;
+  /** Descendants that will consume the form context via `useFormContext()` */
+  children: ReactNode;
+}
+
+/**
+ * Thin wrapper around react-hook-form's `FormProvider`. Import this (and
+ * `useForm`, `Controller`, etc.) from this package instead of importing
+ * `react-hook-form` directly anywhere else — this is the one place that
+ * knows about the underlying form library, so it can be swapped later
+ * without touching every consumer.
+ */
+export const FormProvider = <TFieldValues extends FieldValues = FieldValues>({
+  methods,
+  children,
+}: FormProviderProps<TFieldValues>) => {
+  return <RHFFormProvider {...methods}>{children}</RHFFormProvider>;
+};

package/index.ts

@@ -0,0 +1,27 @@
+export { FormProvider } from "./form-provider.js";
+export type { FormProviderProps } from "./form-provider.js";
+
+export { Form } from "./form.js";
+export type { FormProps } from "./form.js";
+
+export {
+  useForm,
+  useFormContext,
+  useController,
+  useFormState,
+  useWatch,
+  Controller,
+} from "react-hook-form";
+export type {
+  UseFormReturn,
+  UseFormProps,
+  FieldValues,
+  SubmitHandler,
+  Control,
+  ControllerProps,
+  ControllerRenderProps,
+  ControllerFieldState,
+  FieldPath,
+  RegisterOptions,
+  FieldErrors,
+} from "react-hook-form";

package/package.json

@@ -1,6 +1,64 @@
 {
   "name": "@behivetech/forms.form-provider",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.5",
+  "license": "MIT",
+  "type": "module",
+  "private": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./styles.css": "./dist/index.css"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "index.ts",
+    "form-provider.tsx",
+    "form-provider.module.scss",
+    "*.example.tsx",
+    "docs.json"
+  ],
+  "registry": {
+    "status": "stable",
+    "tags": []
+  },
+  "dependencies": {
+    "react-hook-form": "^7.83.0"
+  },
+  "peerDependencies": {
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7"
+  },
+  "devDependencies": {
+    "@types/react": "19.2.17",
+    "@types/react-dom": "19.2.3",
+    "eslint": "^9.39.5",
+    "tsup": "^8.5.1",
+    "typescript": "^6.0.3",
+    "vitest": "^4.1.10",
+    "@behivetech/atoms.button": "0.4.3",
+    "@behivetech/atoms.text-field": "0.3.3",
+    "@behivetech/forms.form-field": "0.3.3",
+    "@bht-component-registry/env": "0.1.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/behivetech/bht-galaxy.git",
+    "directory": "registry/behivetech/forms/form-provider"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public",
+    "provenance": true
+  },
+  "scripts": {
+    "build": "tsup && bht-registry-docgen",
+    "dev": "tsup --watch",
+    "lint": "eslint . --max-warnings 0",
+    "check-types": "tsc --noEmit",
+    "test": "vitest run"
+  }
 }