StickyNotes Component

Create a sticky notes app using React that allows users to add, edit, drag, and remove colorful sticky notes inside a container.

Requirements

• Render a container area boundary for sticky notes.
• Display a fixed add button "+" in the right bottom corner of the screen which will add a new note when clicked. Use lucide-icon "Plus"

• Sticky Notes Display
  • Each sticky note is a draggable colored block with a textarea for text input. With a placeholder "Enter Text"
  • Notes should have random pastel colors chosen from a predefined set.
  • Position notes in a grid layout initially (3 columns).
  • The note being dragged should follow mouse movement inside the container.
  • A close button on each note removes it.Use lucide-icon "X"
  • Clicking Textarea inside a note allows editing note content.
  • Scrolling inside the container should scroll content as normal.
  • Notes do not overlap on creation — new notes get the next position in rows/columns.
• Drag & Drop Behavior
  • Clicking and dragging a note moves it around.
  • Dragging is disabled when interacting inside the textarea.
  • Mouse release stops dragging and fixes note position.
  • The last interacted note should render on top of other notes.

Edge Cases & Constraints

• Notes cannot be dragged outside container bounds.
• Textarea interactions do not trigger dragging.
• Container scrolls automatically to bottom when new note is added.
• Notes maintain their positions when dragged and after page re-render.
• Notes start aligned in a 3-column grid with gaps.
• Initial note position is (0,0) and adjusted automatically on layout.
• Adding/removing notes updates layout and state properly.

Testing Requirements

1. Data Test IDs (required for testing):

• data-testid="sticky-notes-container" — The container for sticky notes
• data-testid="sticky-note" — Each sticky note
• data-testid="close-button" — Close button on a note
• data-testid="note-textarea" — Textarea inside a note
• data-testid="add-note-button" — Button to add a new note
• data-testid="icon-close" – Lucide X icon inside the close button.
• data-testid="icon-add" – Lucide Plus icon inside the add button.