Feature/accordion widget clean

[desireddymohithreddy0925]

Description

This PR implements an AnimatedAccordion component in @termuijs/ui that accepts multiple collapsible sections. It properly leverages @termuijs/motion physics (stepSpring) to smoothly animate the opening and closing of content panels. To prevent regressing and clashing with the existing Accordion widget from @termuijs/widgets, it is exposed uniquely as AnimatedAccordion. It properly handles wide unicode graphemes via stringWidth().

Related Issue

Closes #2860

Which package(s)?

@termuijs/ui

Type of Change

• 🐛 Bug fix (type:bug)
• ✨ Feature (type:feature)
• 📝 Docs (type:docs)
• 🧪 Tests (type:testing)
• ♻️ Refactor (type:refactor)
• 🎨 Design / UX (type:design)
• ♿ Accessibility (type:accessibility)
• ⚡ Performance (type:performance)
• 🔧 DevOps / CI (type:devops)
• 🔒 Security (type:security)

Checklist

• ⭐ You starred the repo. The never rules are respected.
• 🧪 Tests are included or updated.
• 🏗️ bun run build passes locally.
• 🧹 bun run lint and bun run typecheck pass locally.
• 📦 The scope is strictly confined to the packages specified.

Summary by CodeRabbit

• New Features

  • Added an animated accordion component with expandable and collapsible sections.
  • Supports smooth height transitions and configurable single- or multiple-section expansion.
  • Exposed accordion components and configuration options through the UI package.

• Tests

  • Added coverage for initial collapsed state, click-based toggling, and exclusive expansion behavior.

[coderabbitai]

📝 Walkthrough

Walkthrough

Introduces an exported AnimatedAccordion widget with spring-animated item expansion, optional exclusive opening, and public option types. Adds Vitest coverage for initial rendering and click-driven toggling.

Changes

Animated accordion

Layer / File(s)	Summary
Accordion item rendering and animation packages/ui/src/AnimatedAccordion.ts	Adds item options and implements open state, click toggling, spring-based height animation, and clipped content rendering.
Accordion coordination and validation packages/ui/src/AnimatedAccordion.ts, packages/ui/src/AnimatedAccordion.test.ts, packages/ui/src/index.ts	Adds container-level item management and exclusive expansion, re-exports the widget and option types, and tests initial rendering and toggle behavior.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant AnimatedAccordionItem
  participant AnimatedAccordion
  participant Screen
  User->>AnimatedAccordionItem: Click item header
  AnimatedAccordionItem->>AnimatedAccordion: Notify accordion
  AnimatedAccordion->>AnimatedAccordionItem: Close other open items
  AnimatedAccordion->>AnimatedAccordionItem: Set target content heights
  AnimatedAccordion->>Screen: Render animated stacked layout

Loading

Suggested labels: level:intermediate

Suggested reviewers: karanjot786

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Title check	❓ Inconclusive	The title is related to the accordion feature, but it is vague and doesn't clearly state the main change.	Use a concise type: short description title like feat: add animated accordion widget.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description check	✅ Passed	The PR description covers the feature, issue link, package, type, and checklist, but some template sections are left empty.
Linked Issues check	✅ Passed	The new AnimatedAccordion meets the issue's needs: multiple items, open-state control, animated height changes, and vertically stacked panels.
Out of Scope Changes check	✅ Passed	The changes stay within the accordion widget scope, with only implementation, exports, and tests added.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 5

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/ui/src/AnimatedAccordion.ts`:
- Line 63: Update both _renderSelf overrides in AnimatedAccordion to accept
Screen instead of any, and import Screen from `@termuijs/core`. Preserve the
protected visibility and void return type so the overrides match
Widget._renderSelf.
- Around line 114-125: The parent click handler in AnimatedAccordion must no
longer perform exclusive sibling-closing logic; clear that handler so
AnimatedAccordionItem exclusively owns header-click behavior and toggles the
selected item. Move or preserve the exclusive-close behavior in the item’s click
handler, ensuring siblings close before the selected item toggles. Update the
related expectations in packages/ui/src/AnimatedAccordion.test.ts at lines 34-46
to verify the single-owner behavior.
- Around line 11-37: Update AnimatedAccordionItem to be keyboard-operable by
setting focusable to true and adding handleKey(event: KeyEvent) that responds to
lowercase enter and space keys by calling this.toggle() and this.markDirty().
Preserve the existing click handler behavior.
- Around line 65-74: Update the header rendering in AnimatedAccordion using
grapheme-aware, display-width mapping rather than string indices, so each
terminal cell receives the correct character and wide or clustered characters
occupy their full width. Build the mapped header before calling setCell, and use
the caps.unicode fallback values for the open and closed triangle markers
instead of hardcoded symbols.
- Around line 141-145: Update the accordion measurement flow around
_renderSelf() and setTargetHeight() so the desired open content height is
captured separately before item.content.rect.height is overwritten by the
animated spring height. Pass that stable measured height to setTargetHeight(),
retaining the clipped rect only for rendering the current animation state.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 465d1ad8-de1d-430b-98f2-2846433d0762

📥 Commits

Reviewing files that changed from the base of the PR and between 61eaa4e and 687e3ff.

📒 Files selected for processing (3)

• packages/ui/src/AnimatedAccordion.test.ts
• packages/ui/src/AnimatedAccordion.ts
• packages/ui/src/index.ts