feat: add documentation for custom hooks including useAutosizeTextArea, useClickAway, useDebouncedCallback, useIsMobile, useMarkdownEditor, useServerFile, and useToggle

Author: kingRayhan

docs/hooks/useAutosizeTextArea.md

@@ -0,0 +1,144 @@
+# useAutosizeTextArea Hook
+
+A custom hook that automatically resizes a textarea element to fit its content, eliminating the need for manual scrolling.
+
+## Location
+`src/hooks/use-auto-resize-textarea.ts`
+
+## Signature
+```typescript
+function useAutosizeTextArea(
+  textAreaRef: React.RefObject<HTMLTextAreaElement | null>,
+  value: string,
+  initialHeight?: string
+): void
+```
+
+## Parameters
+- `textAreaRef`: React ref object pointing to the textarea element
+- `value`: Current text content of the textarea (triggers resize when changed)
+- `initialHeight` (optional): Initial height to set before auto-sizing
+
+## Returns
+None (void) - This hook has side effects on the referenced textarea
+
+## Usage Example
+
+```typescript
+import { useAutosizeTextArea } from '@/hooks/use-auto-resize-textarea';
+import { useRef, useState } from 'react';
+
+function AutoResizeTextarea() {
+  const [text, setText] = useState('');
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  // Auto-resize textarea based on content
+  useAutosizeTextArea(textareaRef, text);
+
+  return (
+    <textarea
+      ref={textareaRef}
+      value={text}
+      onChange={(e) => setText(e.target.value)}
+      placeholder="Start typing... The textarea will auto-resize!"
+      style={{ minHeight: '40px', resize: 'none' }}
+    />
+  );
+}
+```
+
+## Usage with Initial Height
+
+```typescript
+import { useAutosizeTextArea } from '@/hooks/use-auto-resize-textarea';
+import { useRef, useState } from 'react';
+
+function CommentBox() {
+  const [comment, setComment] = useState('');
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  // Set initial height and auto-resize
+  useAutosizeTextArea(textareaRef, comment, '60px');
+
+  return (
+    <div className="comment-box">
+      <textarea
+        ref={textareaRef}
+        value={comment}
+        onChange={(e) => setComment(e.target.value)}
+        placeholder="Write your comment..."
+        className="w-full border rounded p-2"
+      />
+    </div>
+  );
+}
+```
+
+## Features
+- **Automatic resizing**: Adjusts height based on content
+- **Initial height support**: Can set a starting height before auto-sizing
+- **Performance optimized**: Only recalculates when value changes
+- **No external dependencies**: Uses native DOM properties
+- **Smooth resizing**: Provides smooth visual transitions
+
+## Implementation Details
+- **Trigger**: Runs whenever `value`, `textAreaRef`, or `initialHeight` changes
+- **Reset method**: Sets height to 'auto' or initial height first
+- **Calculation**: Uses `scrollHeight` property to determine required height
+- **Safety check**: Verifies textarea exists before attempting to resize
+
+## CSS Recommendations
+
+```css
+.auto-resize-textarea {
+  resize: none; /* Disable manual resize */
+  overflow: hidden; /* Hide scrollbars */
+  min-height: 40px; /* Set minimum height */
+  transition: height 0.1s ease; /* Smooth height transitions */
+}
+```
+
+## Common Use Cases
+- **Comment boxes**: Auto-expanding comment inputs
+- **Message composition**: Chat message inputs that grow with content
+- **Note-taking**: Text areas for notes that expand as user types
+- **Form fields**: Multi-line form inputs with dynamic sizing
+- **Code editors**: Simple code input areas
+- **Rich text areas**: Foundation for rich text editors
+
+## Best Practices
+- Always set `resize: none` in CSS to prevent manual resizing conflicts
+- Set a reasonable `min-height` to prevent textarea from becoming too small
+- Consider setting a `max-height` with `overflow-y: auto` for very long content
+- Use with controlled components (useState) for proper value tracking
+- Test with various content types (short text, long paragraphs, line breaks)
+
+## Styling Tips
+```css
+/* Recommended base styles */
+.autosize-textarea {
+  resize: none;
+  overflow: hidden;
+  min-height: 2.5rem;
+  max-height: 300px; /* Optional: prevent excessive height */
+  transition: height 0.15s ease;
+  box-sizing: border-box;
+}
+
+/* When max-height is reached, show scrollbar */
+.autosize-textarea.max-height-reached {
+  overflow-y: auto;
+}
+```
+
+## Accessibility Considerations
+- Maintains all standard textarea accessibility features
+- Screen readers work normally with auto-resizing textareas
+- Focus behavior remains unchanged
+- Keyboard navigation is unaffected
+
+## Performance Notes
+- Very lightweight - no expensive calculations
+- Uses native DOM properties for optimal performance
+- Effect only runs when dependencies change
+- No polling or continuous monitoring required

docs/hooks/useClickAway.md

@@ -0,0 +1,127 @@
+# useClickAway Hook
+
+A custom hook that detects clicks outside of a specified element, commonly used for closing modals, dropdowns, and popovers.
+
+## Location
+`src/hooks/use-click-away.ts`
+
+## Signature
+```typescript
+function useClickAway(
+  ref: React.RefObject<HTMLElement | null>,
+  callback: () => void
+): React.RefObject<HTMLElement | null>
+```
+
+## Parameters
+- `ref`: React ref object pointing to the element to monitor
+- `callback`: Function to execute when a click occurs outside the element
+
+## Returns
+- The same ref object passed as parameter (for convenience)
+
+## Usage Example
+
+```typescript
+import { useClickAway } from '@/hooks/use-click-away';
+import { useRef, useState } from 'react';
+
+function DropdownComponent() {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  // Close dropdown when clicking outside
+  useClickAway(dropdownRef, () => {
+    setIsOpen(false);
+  });
+
+  return (
+    <div>
+      <button onClick={() => setIsOpen(!isOpen)}>
+        Toggle Dropdown
+      </button>
+      
+      {isOpen && (
+        <div ref={dropdownRef} className="dropdown-menu">
+          <p>Dropdown Content</p>
+          <p>Click outside to close</p>
+        </div>
+      )}
+    </div>
+  );
+}
+```
+
+## Alternative Usage with useToggle
+
+```typescript
+import { useClickAway } from '@/hooks/use-click-away';
+import { useToggle } from '@/hooks/use-toggle';
+import { useRef } from 'react';
+
+function ModalComponent() {
+  const [isOpen, { close, toggle }] = useToggle();
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  useClickAway(modalRef, close);
+
+  return (
+    <div>
+      <button onClick={toggle}>Open Modal</button>
+      
+      {isOpen && (
+        <div className="modal-overlay">
+          <div ref={modalRef} className="modal-content">
+            <h2>Modal Content</h2>
+            <p>Click outside to close</p>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+```
+
+## Features
+- **Event delegation**: Uses `mousedown` event for reliable detection
+- **Null safety**: Safely handles cases where ref.current is null
+- **Automatic cleanup**: Removes event listeners on unmount
+- **TypeScript support**: Fully typed with generic HTMLElement support
+- **Performance optimized**: Only adds listeners when ref is available
+
+## Implementation Details
+- **Event type**: Uses `mousedown` instead of `click` for better UX
+- **Event target**: Checks if click target is contained within the referenced element
+- **Cleanup**: Properly removes event listeners in useEffect cleanup function
+- **Dependencies**: Includes callback and ref in dependency array
+
+## Common Use Cases
+- **Dropdown menus**: Close when clicking outside
+- **Modal dialogs**: Close modal on backdrop click
+- **Popover components**: Dismiss popovers when clicking elsewhere
+- **Context menus**: Hide context menus on outside click
+- **Autocomplete**: Close suggestions when clicking away
+- **Date pickers**: Close calendar when clicking outside
+- **Tooltip management**: Hide tooltips on outside interaction
+
+## Event Handling Details
+- **Event**: `mousedown` (more responsive than `click`)
+- **Target**: Uses `event.target as Node` for type safety
+- **Containment**: Uses `element.contains()` to check if click is inside
+- **Bubbling**: Attaches to `document` to catch all clicks
+
+## Best Practices
+- Always check if `ref.current` exists before using
+- Use with state management hooks like `useToggle` for cleaner code
+- Consider accessibility implications (ESC key handling, focus management)
+- Test with keyboard navigation and screen readers
+
+## Accessibility Considerations
+- Should be combined with keyboard event handlers (ESC key)
+- Ensure focus management when closing components
+- Consider ARIA attributes for better screen reader support
+
+## Browser Compatibility
+- Modern browsers with full Event API support
+- Uses standard DOM methods (`addEventListener`, `contains`)
+- No special polyfills required

docs/hooks/useDebouncedCallback.md

@@ -0,0 +1,86 @@
+# useDebouncedCallback Hook
+
+A custom hook that creates a debounced version of a callback function, useful for limiting API calls or expensive operations.
+
+## Location
+`src/hooks/use-debounced-callback.ts`
+
+## Signature
+```typescript
+function useDebouncedCallback(
+  callback: (value: string) => void,
+  delay: number
+): (value: string) => void
+```
+
+## Parameters
+- `callback`: The function to be debounced. Must accept a string parameter.
+- `delay`: The delay in milliseconds before the callback is executed.
+
+## Returns
+- `debouncedCallback`: A debounced version of the original callback function.
+
+## Usage Example
+
+```typescript
+import { useDebouncedCallback } from '@/hooks/use-debounced-callback';
+import { useState } from 'react';
+
+function SearchComponent() {
+  const [query, setQuery] = useState('');
+
+  const debouncedSearch = useDebouncedCallback((searchTerm: string) => {
+    // This will only execute 500ms after the user stops typing
+    console.log('Searching for:', searchTerm);
+    performSearch(searchTerm);
+  }, 500);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setQuery(value);
+    debouncedSearch(value); // This is debounced
+  };
+
+  return (
+    <input
+      type="text"
+      value={query}
+      onChange={handleInputChange}
+      placeholder="Search..."
+    />
+  );
+}
+```
+
+## Features
+- **Automatic cleanup**: Previous timeouts are cleared when new calls are made
+- **Memoized**: The debounced function is memoized to prevent unnecessary re-creations
+- **TypeScript support**: Fully typed with proper parameter inference
+- **Memory safe**: Properly cleans up timeouts to prevent memory leaks
+
+## Implementation Details
+- Uses `useRef` to store the timeout reference
+- Uses `useCallback` to memoize the debounced function
+- Automatically clears previous timeouts before setting new ones
+- Dependencies array includes `callback` and `delay` for proper re-memoization
+
+## Common Use Cases
+- **Search input**: Debounce API calls while user types
+- **Form validation**: Delay validation until user stops typing
+- **Auto-save**: Debounce save operations in editors
+- **Resize handlers**: Limit expensive calculations on window resize
+- **Scroll handlers**: Reduce scroll event processing
+- **API rate limiting**: Prevent excessive API calls
+
+## Performance Benefits
+- Reduces unnecessary function calls
+- Prevents API spam
+- Improves application responsiveness
+- Reduces server load
+- Minimizes expensive computations
+
+## Best Practices
+- Use reasonable delay values (200-500ms for search, 1000ms+ for auto-save)
+- Consider user experience when choosing delay duration
+- Test with real user interaction patterns
+- Monitor for memory leaks in long-running applications