@rachelallyson/hero-hook-form 1.2.0 → 2.1.0

package/CHANGELOG.md

@@ -2,6 +2,102 @@
 
 All notable changes to this project will be documented in this file.
 
+## [2.1.0] - 2025-01-28
+
+### Added
+
+#### Next.js Server Actions Support
+
+- **ServerActionForm Component**: New component for seamless integration with Next.js Server Actions
+- **Native Form Submission**: Uses native HTML form submission with `FormData` for Server Actions
+- **Optional Client-Side Validation**: Can combine client-side Zod validation with server-side validation
+- **HeroUI Integration**: Full HeroUI component support with controlled components and hidden inputs
+- **Error Handling**: Comprehensive error display for both client and server validation errors
+- **Success Messages**: Built-in success message display (with redirect handling documentation)
+- **Callbacks**: `onError` and `onSuccess` callbacks for custom handling
+- **Default Values**: Support for pre-filling form fields with default values
+- **Documentation**: Complete guide at `docs/guides/nextjs-server-actions.md`
+
+## [2.0.0] - 2025-01-27
+
+### 🎉 Major Release - Enhanced Form Experience
+
+This is a major release with significant new features, performance improvements, and some breaking changes. See the [Migration Guide](./docs/migration-v2.md) for upgrade instructions.
+
+### Added
+
+#### Dynamic Form Sections
+
+- **Conditional Fields**: Show/hide fields based on form data with `ConditionalField` component
+- **Field Arrays**: Dynamic repeating field groups with `FieldArrayField` component  
+- **Dynamic Sections**: Grouped conditional fields with `DynamicSectionField` component
+- Builder methods: `conditionalField()`, `fieldArray()`, `dynamicSection()`
+
+#### Enhanced Form State Management
+
+- **Enhanced Form State Hook**: `useEnhancedFormState` with comprehensive state tracking
+- **Form Status Component**: `FormStatus` with loading, success, and error states
+- **Automatic State Management**: Built-in loading indicators and success feedback
+- **Toast Notifications**: Optional toast notifications with `FormToast` component
+
+#### Performance Optimizations
+
+- **Memoized Components**: All field components now use `React.memo` for better performance
+- **Debounced Validation**: `useDebouncedValidation` hook for configurable validation delays
+- **Performance Utilities**: `usePerformanceMonitor`, `useBatchedFieldUpdates`, and optimization helpers
+- **Memory Optimization**: Better memory usage with proper cleanup and memoization
+
+#### Type-Inferred Forms (Alternative API)
+
+- **Type-Inferred Builder**: `TypeInferredBuilder` for automatic schema and field generation
+- **Define Inferred Form**: `defineInferredForm` function for single-call form definition
+- **Field Type Builders**: Individual field builders with proper type inference
+- **Auto-Generated Schemas**: Automatic Zod schema generation from field definitions
+
+#### Enhanced Validation Patterns
+
+- **Cross-Field Validation**: Password confirmation, date ranges, conditional requirements
+- **Validation Patterns**: Common patterns for emails, phones, passwords, credit cards
+- **Async Validation**: Server-side validation integration with `asyncValidation` helpers
+- **Validation Utilities**: Comprehensive validation utilities and error message helpers
+
+#### New Hooks and Utilities
+
+- `useEnhancedFormState`: Comprehensive form state management
+- `useDebouncedValidation`: Debounced field validation
+- `useInferredForm`: Type-inferred form hook
+- `usePerformanceMonitor`: Performance monitoring utilities
+- `useBatchedFieldUpdates`: Batched field updates for better performance
+
+### Changed
+
+#### Breaking Changes
+
+- **Field Props**: `isDisabled` → `disabled` for consistency with HeroUI
+- **Form State**: Enhanced form state structure with additional properties and methods
+- **Field Configuration**: `FormFieldConfig` → `ZodFormFieldConfig` (removed `rules` property)
+- **Type Definitions**: Updated type definitions for better TypeScript support
+
+#### API Improvements
+
+- **Consistent Naming**: Standardized prop names across all components
+- **Better Type Safety**: Enhanced TypeScript support with better type inference
+- **Simplified API**: Cleaner, more intuitive API design
+- **Performance**: Significant performance improvements across all components
+
+### Fixed
+
+- **Memory Leaks**: Fixed potential memory leaks in form components
+- **Type Safety**: Resolved TypeScript compilation issues
+- **Build Process**: Improved build process and bundle optimization
+- **Component Re-renders**: Reduced unnecessary re-renders with proper memoization
+
+### Removed
+
+- **Deprecated APIs**: Removed deprecated field prop names
+- **Legacy Code**: Cleaned up legacy code and unused utilities
+- **Redundant Types**: Simplified type definitions by removing redundant types
+
 ## [1.0.2] - 2025-01-27
 
 ### Enhanced

package/README.md

@@ -1,412 +1,176 @@
 # Hero Hook Form
 
-[![npm version](https://badge.fury.io/js/%40rachelallyson%2Fhero-hook-form.svg)](https://badge.fury.io/js/%40rachelallyson%2Fhero-hook-form)
-[![License: ISC](https://img.shields.io/badge/License-ISC-blue.svg)](https://opensource.org/licenses/ISC)
-[![TypeScript](https://img.shields.io/badge/TypeScript-5.9-blue.svg)](https://www.typescriptlang.org/)
-[![React](https://img.shields.io/badge/React-18.2+-blue.svg)](https://reactjs.org/)
-[![HeroUI](https://img.shields.io/badge/HeroUI-2.x-purple.svg)](https://heroui.com/)
+**Typed form helpers that combine React Hook Form and HeroUI components.**
 
-> **Type-safe form components that combine React Hook Form with HeroUI's design system.**
+Hero Hook Form provides a comprehensive solution for building accessible, performant forms in React applications. It combines the power of React Hook Form with HeroUI's beautiful design system, offering type-safe form building with minimal boilerplate.
 
-Build beautiful, accessible forms with full TypeScript support, comprehensive validation, and HeroUI's modern design system. Perfect for React applications that need robust form handling with excellent developer experience.
-
-## ✨ Features
-
-- 🎯 **Strongly-typed** field components with automatic TypeScript inference
-- 🏗️ **Dual entrypoints** for maximum flexibility:
-  - Default entrypoint for individual HeroUI packages (better tree-shaking)
-  - `/react` entrypoint for the aggregate `@heroui/react` (convenient single dependency)
-- 📦 **Optional dependencies** - install only what you need
-- 🔧 **Global configuration** system for consistent styling across your app
-- ✅ **Zod integration** for schema-based validation with type safety
-- 🎨 **Multiple layouts** (vertical, horizontal, grid) with responsive design
-- ♿ **Accessibility-first** with HeroUI's built-in ARIA support
-- 🌳 **Tree-shakeable** for optimal bundle sizes
-- 🚀 **Rapid prototyping** with ConfigurableForm component
-- 🎨 **Optional font picker** with Google Fonts integration
-
-## 🚀 Quick Start
-
-### Option 1: All-in-One HeroUI Package (Recommended for Development)
-
-```bash
-npm install @rachelallyson/hero-hook-form @heroui/react react-hook-form zod
-```
-
-### Option 2: Individual HeroUI Packages (Recommended for Production)
-
-```bash
-npm install @rachelallyson/hero-hook-form react-hook-form zod
-npm install @heroui/button @heroui/input @heroui/select  # Only what you need
-```
+## 📚 Documentation
 
-### Option 3: With Optional Font Picker
+**Full documentation available at: [https://rachelallyson.github.io/hero-hook-form/](https://rachelallyson.github.io/hero-hook-form/)**
 
-For advanced font selection with Google Fonts integration:
+## Installation
 
 ```bash
-npm install @rachelallyson/hero-hook-form @rachelallyson/heroui-font-picker
+npm install @rachelallyson/hero-hook-form
 ```
 
-The `FontPickerField` will automatically use the font picker package if available, with a helpful fallback message if not installed.
-
-### Basic Usage
+## Quick Start
 
 ```tsx
-import { ZodForm } from "@rachelallyson/hero-hook-form";
+import { ZodForm, FormFieldHelpers } from "@rachelallyson/hero-hook-form";
 import { z } from "zod";
 
 const schema = z.object({
-  email: z.string().email("Invalid email"),
-  name: z.string().min(1, "Name is required"),
+  email: z.string().email(),
+  name: z.string().min(2),
 });
 
-const config = {
-  schema,
-  fields: [
-    { name: "name", type: "input", label: "Name" },
-    { name: "email", type: "input", label: "Email", inputProps: { type: "email" } },
-  ],
-};
-
 export function ContactForm() {
-  return <ZodForm config={config} onSubmit={console.log} />;
-}
-```
-
-> 📚 **See [Installation Guide](./docs/installation.md) for detailed setup instructions and bundle optimization tips.**
-
-## 📊 Why Hero Hook Form?
-
-| Feature | Manual Setup | Hero Hook Form |
-|---------|--------------|----------------|
-| TypeScript | ❌ Manual types | ✅ Automatic inference |
-| Validation | ❌ Complex setup | ✅ Built-in + Zod |
-| Styling | ❌ Inconsistent | ✅ Global defaults |
-| Accessibility | ❌ Manual work | ✅ HeroUI built-in |
-| Bundle size | ❌ Large | ✅ Tree-shakeable |
-| Development | ❌ Slow | ✅ Rapid prototyping |
-
-## Requirements
-
-- **React**: >=18.2 <20
-- **React DOM**: >=18.2 <20  
-- **React Hook Form**: >=7 <8
-- **HeroUI**: >=2 <3 (either individual packages or `@heroui/react`)
-
-## Installation Options
-
-### Option A: Individual HeroUI Packages (Recommended for Production)
-
-Install only the HeroUI components you actually use for optimal bundle size:
-
-```bash
-# Minimal set that covers all included fields
-npm i @rachelallyson/hero-hook-form react-hook-form \
-  @heroui/input @heroui/checkbox @heroui/radio @heroui/select \
-  @heroui/switch @heroui/button @heroui/spinner
-```
-
-Import from the package root:
-
-```tsx
-import { InputField, SelectField, CheckboxField, RadioGroupField, SwitchField, TextareaField, SubmitButton } from "@rachelallyson/hero-hook-form";
-```
-
-### Option B: Aggregate HeroUI Package (Recommended for Development)
-
-Install the all-in-one HeroUI package for convenience:
-
-```bash
-npm i @rachelallyson/hero-hook-form react-hook-form @heroui/react
-```
-
-Import from the `/react` subpath:
-
-```tsx
-import { InputField, SelectField, CheckboxField, RadioGroupField, SwitchField, TextareaField, SubmitButton } from "@rachelallyson/hero-hook-form/react";
-```
-
-## Setup (recommended)
-
-Most HeroUI apps wrap the app with the `HeroUIProvider` from `@heroui/system` and typically set up theming via `next-themes` or similar. Example (Next.js):
-
-```tsx
-import { HeroUIProvider } from "@heroui/system";
-import { ThemeProvider } from "next-themes";
-
-export function Providers({ children }: { children: React.ReactNode }) {
-  return (
-    <HeroUIProvider>
-      <ThemeProvider attribute="class" defaultTheme="dark">
-        {children}
-      </ThemeProvider>
-    </HeroUIProvider>
-  );
-}
-```
-
-## Global configuration (defaults)
-
-Set global defaults for all fields with `HeroHookFormProvider`. You can set a `common` bucket (applies to all supported components) and/or per-component buckets. Per-instance props always win.
-
-Import the provider from the entrypoint you use (root or `/react`):
-
-```tsx
-import { HeroHookFormProvider } from "@rachelallyson/hero-hook-form"; // or "/react"
-
-export function AppProviders({ children }: { children: React.ReactNode }) {
   return (
-    <HeroHookFormProvider
-      defaults={{
-        // Common keys shared across text-like controls (Input, Textarea, Select)
-        // and safely narrowed for toggles and the submit button.
-        common: {
-          color: "primary",
-          size: "md",
-          variant: "faded",
-          radius: "sm",
-          labelPlacement: "outside",
-        },
-        // Component-specific defaults override 'common' for that component
-        input: { variant: "underlined" },
-        select: { variant: "flat" },
-        submitButton: { color: "secondary" },
+    <ZodForm
+      config={{
+        schema,
+        fields: [
+          FormFieldHelpers.input("name", "Name"),
+          FormFieldHelpers.input("email", "Email", "email"),
+        ],
       }}
-    >
-      {children}
-    </HeroHookFormProvider>
+      onSubmit={(data) => console.log(data)}
+    />
   );
 }
 ```
 
-- Precedence (highest last):
-  1) `defaults.common`
-  2) `defaults.{component}` (e.g., `input`, `select`, `checkbox`, `radioGroup`, `switch`, `textarea`, `submitButton`)
-  3) Per-instance props (e.g., `inputProps`, `selectProps`, `checkboxProps`, etc.)
-
-- Supported `common` keys (strongly typed and intersected across text-like controls):
-  - `color`, `size`, `variant`, `radius`, `labelPlacement`
-  - For toggles (`checkbox`, `radioGroup`, `switch`) and `submitButton`, only `color` and `size` are applied.
-
-- Example instance override:
-
-```tsx
-<InputField
-  control={methods.control}
-  label="Name"
-  name="name"
-  inputProps={{ color: "danger" }} // overrides global defaults for this field
-/>
-```
+## Key Features
 
-- Scoping defaults: you can nest providers to scope different defaults to specific sections of your app.
+- **🎯 Type Safety** - Full TypeScript support with automatic type inference
+- **🎨 HeroUI Integration** - Beautiful, accessible components out of the box
+- **⚡ Performance** - Optimized with React.memo and debounced validation
+- **🔧 Flexible APIs** - Multiple form building patterns to suit your needs
+- **📝 Zod Integration** - Seamless schema validation with Zod
+- **🔄 Dynamic Forms** - Conditional fields, field arrays, and dynamic sections
+- **🧪 Testing Ready** - Built-in testing utilities for Cypress
+- **🚀 Next.js Server Actions** - Compatible with Next.js authentication patterns
 
-## Zod Integration (Optional)
+## Form Building Patterns
 
-For type-safe validation with Zod schemas, install the additional dependencies:
+### 1. Helper Functions (Recommended)
 
-```bash
-npm i zod @hookform/resolvers
+```tsx
+const fields = [
+  FormFieldHelpers.input("name", "Name"),
+  FormFieldHelpers.textarea("message", "Message"),
+  FormFieldHelpers.select("country", "Country", options),
+];
 ```
 
-Then use the `ZodForm` component with Zod schemas:
+### 2. Builder Pattern
 
 ```tsx
-import { z } from "zod";
-import { ZodForm, createZodFormConfig } from "@rachelallyson/hero-hook-form";
-
-// Define your schema
-const contactSchema = z.object({
-  firstName: z.string().min(2, "First name must be at least 2 characters"),
-  email: z.string().email("Please enter a valid email address"),
-  message: z.string().min(10, "Message must be at least 10 characters"),
-  terms: z.boolean().refine((val) => val === true, "You must agree to the terms"),
-});
+import { createBasicFormBuilder } from "@rachelallyson/hero-hook-form";
 
-// Create form configuration
-const config = createZodFormConfig(contactSchema, [
-  { name: "firstName", type: "input", label: "First Name" },
-  { name: "email", type: "input", label: "Email", inputProps: { type: "email" } },
-  { name: "message", type: "textarea", label: "Message" },
-  { name: "terms", type: "checkbox", label: "I agree to the terms" },
-]);
-
-// Use in your component
-<ZodForm
-  config={config}
-  onSubmit={handleSubmit}
-  title="Contact Form"
-  showResetButton={true}
-/>
+const fields = createBasicFormBuilder()
+  .input("name", "Name")
+  .textarea("message", "Message")
+  .select("country", "Country", options)
+  .build();
 ```
 
-### Nested Fields and Radio Buttons
-
-For nested field names and radio buttons:
+### 3. Type-Inferred Forms
 
 ```tsx
-const settingsSchema = z.object({
-  fonts: z.object({
-    scale: z.enum(["small", "medium", "large"]).default("medium"),
-  }),
-  layout: z.object({
-    sidebarPosition: z.enum(["left", "right", "hidden"]).default("left"),
-  }),
-  style: z.object({
-    theme: z.enum(["light", "dark", "auto"]).default("auto"),
-  }),
-});
+import { defineInferredForm, field } from "@rachelallyson/hero-hook-form";
 
-const config = createZodFormConfig(settingsSchema, [
-  {
-    name: "fonts.scale",
-    type: "radio",
-    label: "Font Scale",
-    radioOptions: [
-      { label: "Small", value: "small" },
-      { label: "Medium", value: "medium" },
-      { label: "Large", value: "large" },
-    ],
-  },
-  {
-    name: "layout.sidebarPosition",
-    type: "radio",
-    label: "Sidebar Position",
-    radioOptions: [
-      { label: "Left", value: "left" },
-      { label: "Right", value: "right" },
-      { label: "Hidden", value: "hidden" },
-    ],
-  },
-  {
-    name: "style.theme",
-    type: "radio",
-    label: "Theme",
-    radioOptions: [
-      { label: "Light", value: "light" },
-      { label: "Dark", value: "dark" },
-      { label: "Auto", value: "auto" },
-    ],
-  },
-], {
-  defaultValues: {
-    fonts: { scale: "large" },
-    layout: { sidebarPosition: "right" },
-    style: { theme: "auto" },
-  },
+const form = defineInferredForm({
+  name: field.string("Name"),
+  email: field.email("Email"),
+  age: field.number("Age"),
 });
 ```
 
-### Zod Features
-
-- **Type Safety**: Full TypeScript support with automatic type inference
-- **Nested Fields**: Support for nested field names like "fonts.scale"
-- **Default Values**: Proper handling of default values with nested structure
-- **Radio Buttons**: Easy configuration with `radioOptions`
-
-## 🎯 Examples
+### 4. Next.js Server Actions
 
-Check out our [comprehensive demo](../example/app/comprehensive-demo/page.tsx) to see Hero Hook Form in action with all field types and layouts!
-
-## 📚 Documentation
-
-For comprehensive guides and examples, visit our [documentation](./docs/README.md):
-
-- [🚀 Getting Started](./docs/getting-started.md) - Installation, setup, and first form
-- [🧩 Components](./docs/components.md) - All available field components  
-- [⚙️ Configuration](./docs/configuration.md) - Global configuration and providers
-- [📝 Form Builder](./docs/form-builder.md) - ConfigurableForm component
-- [✅ Validation](./docs/validation.md) - Form validation patterns
-- [🔮 Zod Integration](./docs/zod-integration.md) - Schema-based validation with Zod
-- [🎨 Layouts](./docs/layouts.md) - Form layout options
-- [📖 API Reference](./docs/api-reference.md) - Complete API documentation
-
-## 🔧 API Overview
-
-### Field Components
-
-All field components are strongly typed and expose component-specific props:
-
-- **`InputField`** - Text inputs with validation
-- **`TextareaField`** - Multi-line text inputs  
-- **`SelectField`** - Dropdown selections
-- **`RadioGroupField`** - Radio button groups
-- **`CheckboxField`** - Single checkboxes
-- **`SwitchField`** - Toggle switches
-- **`SliderField`** - Range slider inputs
-- **`DateField`** - Date picker inputs
-- **`FileField`** - File upload inputs
-- **`FontPickerField`** - Optional font selection (requires `@rachelallyson/heroui-font-picker`)
-
-### Form Components
-
-- **`Form`** - Light wrapper around React Hook Form's FormProvider
-- **`FormField`** - Generic field wrapper component
-- **`ZodForm`** - Schema-based forms with Zod validation
-- **`ConfigurableForm`** - Rapid form development with declarative config
-
-### Utilities & Hooks
-
-- **`applyServerErrors`** - Map API validation errors to form fields
-- **`HeroHookFormProvider`** - Global configuration for consistent styling
-- **`useHeroForm`** - Enhanced form hook with additional utilities
-- **`useFormHelper`** - Form helper utilities
-
-For complete API documentation, see [API Reference](./docs/api-reference.md).
-
-## 🎯 Entrypoint Selection
-
-- **Default entrypoint**: For apps using individual HeroUI packages (better tree-shaking)
-- **`/react` entrypoint**: For apps using `@heroui/react` (convenient single dependency)
-
-Both entrypoints are fully tree-shakeable and support all features.
-
-## ❓ FAQ
-
-<details>
-<summary><strong>Do I need to wrap with HeroUIProvider?</strong></summary>
-
-Recommended for proper styling and navigation integration. Most HeroUI apps already do this.
+```tsx
+import { ServerActionForm, FormFieldHelpers } from "@rachelallyson/hero-hook-form";
+import { signup } from "@/app/actions/auth";
+
+<ServerActionForm
+  action={signup}
+  fields={[
+    FormFieldHelpers.input("name", "Name"),
+    FormFieldHelpers.input("email", "Email", { type: "email" }),
+  ]}
+/>
+```
 
-</details>
+## What's Included
 
-<details>
-<summary><strong>Can I tree-shake?</strong></summary>
+- **Components**: `Form`, `FormField`, `ZodForm`, `ServerActionForm`, field components, `FormStatus`
+- **Hooks**: `useFormHelper`, `useHeroForm`, `useEnhancedFormState`, `useDebouncedValidation`, `useInferredForm`
+- **Builders**: `createBasicFormBuilder`, `createAdvancedBuilder`, `createTypeInferredBuilder`
+- **Utils**: `applyServerErrors`, validation helpers, performance utilities, testing utilities
+- **Zod Integration**: `ZodForm` component with automatic schema validation
+- **Next.js Support**: `ServerActionForm` for Next.js Server Actions and authentication
 
-Yes! Both entrypoints are tree-shakeable. Individual packages make size more explicit, while the aggregate is convenient.
+## Setup
 
-</details>
+1. **Install the package**:
 
-<details>
-<summary><strong>Do I have to install all individual packages?</strong></summary>
+   ```bash
+   npm install @rachelallyson/hero-hook-form
+   ```
 
-No! Install only the components you actually render. If you don't use `RadioGroupField`, you can omit `@heroui/radio`.
+2. **Set up your provider**:
 
-</details>
+   ```tsx
+   import { HeroHookFormProvider } from "@rachelallyson/hero-hook-form";
+   
+   function App() {
+     return (
+       <HeroHookFormProvider>
+         <YourForms />
+       </HeroHookFormProvider>
+     );
+   }
+   ```
 
-<details>
-<summary><strong>What's the difference between the two entrypoints?</strong></summary>
+3. **Create your first form**:
 
-- **Default**: For apps using individual HeroUI packages (better tree-shaking)
-- **/react**: For apps using the aggregate `@heroui/react` (convenient single dependency)
+   ```tsx
+   import { ZodForm, FormFieldHelpers } from "@rachelallyson/hero-hook-form";
+   ```
 
-</details>
+## Documentation Links
 
-## 🤝 Contributing
+- **Quick Start Guide**: [https://rachelallyson.github.io/hero-hook-form/guides/quickstart](https://rachelallyson.github.io/hero-hook-form/guides/quickstart)
+- **API Reference**: [https://rachelallyson.github.io/hero-hook-form/api/README](https://rachelallyson.github.io/hero-hook-form/api/README)
+- **Next.js Server Actions**: [Next.js Authentication Guide](./docs/guides/nextjs-server-actions.md) - Use with Next.js auth forms
+- **Dynamic Forms**: [https://rachelallyson.github.io/hero-hook-form/guides/dynamic-forms](https://rachelallyson.github.io/hero-hook-form/guides/dynamic-forms)
+- **Error Handling**: [https://rachelallyson.github.io/hero-hook-form/guides/error-handling](https://rachelallyson.github.io/hero-hook-form/guides/error-handling)
+- **Testing Guide**: [https://rachelallyson.github.io/hero-hook-form/guides/testing-guide](https://rachelallyson.github.io/hero-hook-form/guides/testing-guide)
+- **Live Demos**: [https://rachelallyson.github.io/hero-hook-form/demo](https://rachelallyson.github.io/hero-hook-form/demo)
 
-We welcome contributions! Please see our [contributing guidelines](CONTRIBUTING.md) for details.
+## What's New in v2.0
 
-## 📄 License
+- **Dynamic Form Sections** - Conditional fields and field arrays
+- **Enhanced Performance** - Memoized components and debounced validation
+- **Type-Inferred Forms** - Alternative API with automatic schema generation
+- **Form State Management** - Enhanced state tracking and status components
+- **Validation Patterns** - Cross-field validation and common patterns
 
-ISC License - see [LICENSE](LICENSE) file for details.
+## Requirements
 
----
+- React >= 18.2.0
+- React Hook Form >= 7
+- Zod >= 4
+- HeroUI components (peer dependencies)
 
-<div align="center">
+## License
 
-**Built with ❤️ by [Rachel Higley](https://github.com/rachelallyson)**
+ISC License - see [LICENSE](LICENSE) for details.
 
-[Report Bug](https://github.com/rachelallyson/hero-hook-form/issues) · [Request Feature](https://github.com/rachelallyson/hero-hook-form/issues) · [View Examples](../example/app/comprehensive-demo/page.tsx)
+## Community
 
-</div>
+- **GitHub**: [rachelallyson/hero-hook-form](https://github.com/rachelallyson/hero-hook-form)
+- **Issues**: [Report bugs or request features](https://github.com/rachelallyson/hero-hook-form/issues)
+- **Documentation**: [https://rachelallyson.github.io/hero-hook-form/](https://rachelallyson.github.io/hero-hook-form/)