rfhook 1.0.0

package/.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "cSpell.words": [
+    "rfhook"
+  ]
+}

package/README.md

@@ -0,0 +1,270 @@
+# @eji/form-hook
+
+A lightweight React hook for handling form submissions with advanced form data parsing capabilities. Supports nested objects, arrays, and dot notation for complex form structures.
+
+## Features
+
+- 🚀 **Simple API** - Just one hook to handle all your form needs
+- 🎯 **TypeScript Support** - Fully typed with generic support
+- 🔧 **Nested Objects** - Parse nested form data with dot notation (`user.name`)
+- 📋 **Array Support** - Handle arrays with indexed notation (`items[0]`)
+- 📦 **Lightweight** - Zero dependencies (except React)
+- 🎨 **Framework Agnostic** - Works with any form structure
+
+## Installation
+
+```bash
+npm install @eji/form-hook
+```
+
+```bash
+pnpm add @eji/form-hook
+```
+
+```bash
+yarn add @eji/form-hook
+```
+
+## Quick Start
+
+```tsx
+import React from 'react';
+import { useForm } from '@eji/form-hook';
+
+interface FormData {
+  email: string;
+  password: string;
+}
+
+function LoginForm() {
+  const { ref, submit } = useForm<FormData>({
+    handleSubmit: (data) => {
+      console.log(data); // { email: "user@example.com", password: "secret" }
+    }
+  });
+
+  return (
+    <form ref={ref} onSubmit={submit}>
+      <input name="email" type="email" />
+      <input name="password" type="password" />
+      <button type="submit">Login</button>
+    </form>
+  );
+}
+```
+
+## Advanced Usage
+
+### Nested Objects
+
+Use dot notation to create nested objects:
+
+```tsx
+interface UserForm {
+  user: {
+    profile: {
+      name: string;
+      age: number;
+    };
+    preferences: {
+      theme: string;
+    };
+  };
+}
+
+function UserForm() {
+  const { ref, submit } = useForm<UserForm>({
+    handleSubmit: (data) => {
+      console.log(data);
+      // {
+      //   user: {
+      //     profile: {
+      //       name: "John Doe",
+      //       age: "30"
+      //     },
+      //     preferences: {
+      //       theme: "dark"
+      //     }
+      //   }
+      // }
+    }
+  });
+
+  return (
+    <form ref={ref} onSubmit={submit}>
+      <input name="user.profile.name" placeholder="Name" />
+      <input name="user.profile.age" type="number" placeholder="Age" />
+      <select name="user.preferences.theme">
+        <option value="light">Light</option>
+        <option value="dark">Dark</option>
+      </select>
+      <button type="submit">Submit</button>
+    </form>
+  );
+}
+```
+
+### Arrays
+
+Use bracket notation to handle arrays:
+
+```tsx
+interface TodoForm {
+  todos: Array<{
+    title: string;
+    completed: boolean;
+  }>;
+}
+
+function TodoForm() {
+  const { ref, submit } = useForm<TodoForm>({
+    handleSubmit: (data) => {
+      console.log(data);
+      // {
+      //   todos: [
+      //     { title: "Buy groceries", completed: false },
+      //     { title: "Walk the dog", completed: true }
+      //   ]
+      // }
+    }
+  });
+
+  return (
+    <form ref={ref} onSubmit={submit}>
+      <input name="todos[0].title" placeholder="First todo" />
+      <input name="todos[0].completed" type="checkbox" />
+
+      <input name="todos[1].title" placeholder="Second todo" />
+      <input name="todos[1].completed" type="checkbox" />
+
+      <button type="submit">Submit</button>
+    </form>
+  );
+}
+```
+
+## API Reference
+
+### `useForm<T>(options)`
+
+#### Parameters
+
+- `options.handleSubmit: (data: T) => void` - Callback function called when form is submitted
+
+#### Returns
+
+- `ref: RefObject<HTMLFormElement>` - React ref to attach to your form element
+- `submit: (event: React.FormEvent) => void` - Submit handler to attach to form's `onSubmit`
+
+### Form Data Parsing Rules
+
+The `parseFormData` utility converts FormData into structured objects using these rules:
+
+1. **Dot notation** creates nested objects: `user.name` → `{ user: { name: "value" } }`
+2. **Bracket notation** creates arrays: `items[0]` → `{ items: ["value"] }`
+3. **Combined notation** works: `users[0].name` → `{ users: [{ name: "value" }] }`
+
+## Examples
+
+### Contact Form
+
+```tsx
+import { useForm } from '@eji/form-hook';
+
+interface ContactData {
+  name: string;
+  email: string;
+  message: string;
+  preferences: {
+    newsletter: boolean;
+    notifications: boolean;
+  };
+}
+
+function ContactForm() {
+  const { ref, submit } = useForm<ContactData>({
+    handleSubmit: async (data) => {
+      try {
+        const response = await fetch('/api/contact', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(data)
+        });
+
+        if (response.ok) {
+          alert('Message sent successfully!');
+        }
+      } catch (error) {
+        console.error('Failed to send message:', error);
+      }
+    }
+  });
+
+  return (
+    <form ref={ref} onSubmit={submit}>
+      <input name="name" placeholder="Your Name" required />
+      <input name="email" type="email" placeholder="Your Email" required />
+      <textarea name="message" placeholder="Your Message" required />
+
+      <fieldset>
+        <legend>Preferences</legend>
+        <label>
+          <input name="preferences.newsletter" type="checkbox" />
+          Subscribe to newsletter
+        </label>
+        <label>
+          <input name="preferences.notifications" type="checkbox" />
+          Enable notifications
+        </label>
+      </fieldset>
+
+      <button type="submit">Send Message</button>
+    </form>
+  );
+}
+```
+
+## TypeScript Support
+
+The hook is fully typed and supports generic type parameters for form data:
+
+```tsx
+interface MyFormData {
+  // Define your form structure here
+}
+
+const { ref, submit } = useForm<MyFormData>({
+  handleSubmit: (data) => {
+    // data is typed as MyFormData
+  }
+});
+```
+
+## Browser Support
+
+- All modern browsers that support ES2020
+- React 16.8+ (hooks support required)
+
+## Contributing
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add some amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+## License
+
+ISC
+
+## Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Build the package
+pnpm run build
+
+# The built files will be in the `dist/` directory
+```

package/dist/index.cjs

@@ -0,0 +1,65 @@
+'use strict';
+
+var react = require('react');
+
+const ARRAY_KEY_REGEX = /^(\w+)\[(\d+)\]$/;
+function parseFormData(formData) {
+    const data = Object.fromEntries(formData.entries());
+    const result = {};
+    for (const [path, value] of Object.entries(data)) {
+        const keys = path.split('.');
+        let current = result;
+        for (let i = 0; i < keys.length; i++) {
+            const key = keys[i];
+            const isLastKey = i === keys.length - 1;
+            const arrayMatch = key.match(ARRAY_KEY_REGEX);
+            // Handle array notation like items[0]
+            if (arrayMatch) {
+                const [, arrayKey, indexStr] = arrayMatch;
+                const index = parseInt(indexStr, 10);
+                // Initialize array if it doesn't exist
+                if (!Array.isArray(current[arrayKey])) {
+                    current[arrayKey] = [];
+                }
+                const array = current[arrayKey];
+                // Set value and continue if this is the last key
+                if (isLastKey) {
+                    array[index] = value;
+                    continue;
+                }
+                // Initialize nested object and move to it
+                if (!array[index] || typeof array[index] !== 'object') {
+                    array[index] = {};
+                }
+                current = array[index];
+                continue;
+            }
+            // Handle regular keys - set value and continue if this is the last key
+            if (isLastKey) {
+                current[key] = value;
+                continue;
+            }
+            // Initialize nested object and move to it
+            if (!current[key] || typeof current[key] !== 'object' || Array.isArray(current[key])) {
+                current[key] = {};
+            }
+            current = current[key];
+        }
+    }
+    return result;
+}
+
+function useForm({ handleSubmit }) {
+    const ref = react.useRef(null);
+    const submit = (event) => {
+        event.preventDefault();
+        if (!ref.current)
+            return;
+        const formData = new FormData(ref.current);
+        const data = parseFormData(formData);
+        handleSubmit(data);
+    };
+    return { ref, submit };
+}
+
+exports.useForm = useForm;

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { useForm } from './useForm.hook';

package/dist/index.js

@@ -0,0 +1,63 @@
+import { useRef } from 'react';
+
+const ARRAY_KEY_REGEX = /^(\w+)\[(\d+)\]$/;
+function parseFormData(formData) {
+    const data = Object.fromEntries(formData.entries());
+    const result = {};
+    for (const [path, value] of Object.entries(data)) {
+        const keys = path.split('.');
+        let current = result;
+        for (let i = 0; i < keys.length; i++) {
+            const key = keys[i];
+            const isLastKey = i === keys.length - 1;
+            const arrayMatch = key.match(ARRAY_KEY_REGEX);
+            // Handle array notation like items[0]
+            if (arrayMatch) {
+                const [, arrayKey, indexStr] = arrayMatch;
+                const index = parseInt(indexStr, 10);
+                // Initialize array if it doesn't exist
+                if (!Array.isArray(current[arrayKey])) {
+                    current[arrayKey] = [];
+                }
+                const array = current[arrayKey];
+                // Set value and continue if this is the last key
+                if (isLastKey) {
+                    array[index] = value;
+                    continue;
+                }
+                // Initialize nested object and move to it
+                if (!array[index] || typeof array[index] !== 'object') {
+                    array[index] = {};
+                }
+                current = array[index];
+                continue;
+            }
+            // Handle regular keys - set value and continue if this is the last key
+            if (isLastKey) {
+                current[key] = value;
+                continue;
+            }
+            // Initialize nested object and move to it
+            if (!current[key] || typeof current[key] !== 'object' || Array.isArray(current[key])) {
+                current[key] = {};
+            }
+            current = current[key];
+        }
+    }
+    return result;
+}
+
+function useForm({ handleSubmit }) {
+    const ref = useRef(null);
+    const submit = (event) => {
+        event.preventDefault();
+        if (!ref.current)
+            return;
+        const formData = new FormData(ref.current);
+        const data = parseFormData(formData);
+        handleSubmit(data);
+    };
+    return { ref, submit };
+}
+
+export { useForm };

package/dist/useForm.hook.d.ts

@@ -0,0 +1,8 @@
+interface UseForm<T> {
+    handleSubmit: (data: T) => void;
+}
+export declare function useForm<T = object>({ handleSubmit }: UseForm<T>): {
+    ref: import("react").RefObject<HTMLFormElement | null>;
+    submit: (event: React.FormEvent) => void;
+};
+export {};

package/dist/utils/parseFormData.d.ts

@@ -0,0 +1 @@
+export declare function parseFormData(formData: FormData): Record<string, unknown>;

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "rfhook",
+  "version": "1.0.0",
+  "description": "",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "type": "module",
+  "types": "dist/index.d.ts",
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3"
+  },
+  "devDependencies": {
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-typescript": "^12.3.0",
+    "@types/react": "^19.2.8",
+    "@types/react-dom": "^19.2.3",
+    "rollup": "^4.55.2",
+    "tslib": "^2.8.1",
+    "typescript": "^5.9.3"
+  },
+  "scripts": {
+    "build": "rollup -c"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,18 @@
+import typescript from '@rollup/plugin-typescript';
+import nodeResolve from '@rollup/plugin-node-resolve';
+
+export default {
+  input: 'src/index.ts',
+  external: ['react'],
+  plugins: [typescript(), nodeResolve()],
+  output: [
+    {
+      file: 'dist/index.js',
+      format: 'esm'
+    },
+    {
+      file: 'dist/index.cjs',
+      format: 'cjs'
+    }
+  ]
+};

package/src/index.ts

@@ -0,0 +1 @@
+export { useForm } from './useForm.hook';

package/src/useForm.hook.ts

@@ -0,0 +1,25 @@
+import { useRef } from 'react';
+
+import { parseFormData } from './utils/parseFormData';
+
+interface UseForm<T> {
+  handleSubmit: (data: T) => void;
+}
+
+export function useForm<T = object>({ handleSubmit }: UseForm<T>) {
+  const ref = useRef<HTMLFormElement>(null);
+
+  const submit = (event: React.FormEvent) => {
+      event.preventDefault();
+
+      if (!ref.current) return
+
+      const formData = new FormData(ref.current);
+
+      const data: object = parseFormData(formData);
+
+      handleSubmit(data as T);
+    }
+
+  return { ref, submit };
+}

package/src/utils/parseFormData.ts

@@ -0,0 +1,60 @@
+const ARRAY_KEY_REGEX = /^(\w+)\[(\d+)\]$/;
+
+export function parseFormData(formData: FormData): Record<string, unknown> {
+  const data = Object.fromEntries(formData.entries());
+  const result: Record<string, unknown> = {};
+
+  for (const [path, value] of Object.entries(data)) {
+    const keys = path.split('.')
+    let current = result;
+
+    for (let i = 0; i < keys.length; i++) {
+      const key = keys[i];
+      const isLastKey = i === keys.length - 1;
+      const arrayMatch = key.match(ARRAY_KEY_REGEX);
+
+      // Handle array notation like items[0]
+      if (arrayMatch) {
+        const [, arrayKey, indexStr] = arrayMatch;
+        const index = parseInt(indexStr, 10);
+
+        // Initialize array if it doesn't exist
+        if (!Array.isArray(current[arrayKey])) {
+          current[arrayKey] = [];
+        }
+
+        const array = current[arrayKey] as unknown[];
+
+        // Set value and continue if this is the last key
+        if (isLastKey) {
+          array[index] = value;
+          continue;
+        }
+
+        // Initialize nested object and move to it
+        if (!array[index] || typeof array[index] !== 'object') {
+          array[index] = {};
+        }
+
+        current = array[index] as Record<string, unknown>;
+
+        continue;
+      }
+
+      // Handle regular keys - set value and continue if this is the last key
+      if (isLastKey) {
+        current[key] = value;
+        continue;
+      }
+
+      // Initialize nested object and move to it
+      if (!current[key] || typeof current[key] !== 'object' || Array.isArray(current[key])) {
+        current[key] = {};
+      }
+
+      current = current[key] as Record<string, unknown>;
+    }
+  }
+
+  return result;
+}

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "declaration": true,
+    "outDir": "dist",
+    "strict": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
+}