fix: convert example to typescript to fix build; fit locked aspect ratio with least squares

[manbearwiz]

• Convert example to TS
• Fix failing build
• Fix locked aspect ratio resize not tracking cursor Wrong size when resizing diagonally with lockAspectRatio #222

New:
https://github.com/user-attachments/assets/10029704-3316-478f-a8ef-138fb690f222

Old:
https://github.com/user-attachments/assets/3d44790b-971b-4279-a00c-abdb32b9c7be

Summary by CodeRabbit

• Improvements
  • Refined aspect ratio locking calculation method for more accurate resizing behavior.
  • Enhanced TypeScript type definitions for resize callbacks and component configuration, improving IDE support and type safety.
  • Updated build configuration for improved development workflow.

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR refines the aspect ratio constraint calculation in the resizable component library and strengthens TypeScript typing across examples and build configuration. The core change replaces a delta-based branching approach with weighted projection for lockAspectRatio constraints, validated by updated test expectations. Example code receives improved type safety through explicit ResizeCallbackData typing and expanded state tracking, while the build config transitions the test example to use the TypeScript entrypoint.

Changes

Aspect Ratio Constraint and Type Safety Improvements

Layer / File(s)	Summary
Aspect ratio constraint calculation and test validation lib/Resizable.tsx, __tests__/Resizable.test.tsx	The lockAspectRatio constraint calculation projects the proposed (width, height) pair onto the constraint line using a weighted formula instead of branching on which delta deviates more. Test expectations are updated to validate the new formula based on the average of width and height deltas rather than the maximum.
Example component TypeScript typing examples/ExampleLayout.tsx	Global version constants replace runtime assumptions with declare const declarations, ResizeCallbackData is imported and used for typed callback parameters, CustomResizeHandle receives a proper forwardRef generic signature, component State expands to track absolute geometry (absoluteWidth, absoluteHeight, absoluteLeft, absoluteTop), and resize handler methods are typed with React.SyntheticEvent and ResizeCallbackData.
Build configuration entry point update webpack.config.js	Test entry point is updated from ./examples/example.js to ./examples/example.tsx to build from the TypeScript example file instead of JavaScript.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Poem

🐰 Constraints now flow with weighted grace,
Types define each interface space,
Aspect ratios find their perfect line,
From delta branches to calculus divine,
Build and test in harmony align!

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the two main changes: converting example to TypeScript and implementing a least squares approach for locked aspect ratio resizing.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

• Generate code and open pull requests
• Plan features and break down work
• Investigate incidents and troubleshoot customer tickets together
• Automate recurring tasks and respond to alerts with triggers
• Summarize progress and report instantly

Built for teams:

• Shared memory across your entire org—no repeating context
• Per-thread sandboxes to safely plan and execute work
• Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started

---

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 and usage tips.}

[STRML]

Thanks!