feat(components): add Resizable component (DS-5253)#426
Open
KamilEmeleev wants to merge 6 commits into
Open
Conversation
# Conflicts: # packages/components/src/components/index.ts
|
Visit the preview URL for this PR (updated for commit 87225a0): https://react-koobiq-next--prs-426-pzcif9ld.web.app (expires Sat, 01 Aug 2026 08:20:32 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: fc29847d4a9e5cb1adf458c76a9b681c76e2eeff |
There was a problem hiding this comment.
Pull request overview
Adds a new Resizable component to @koobiq/react-components, providing resizable containers with composable resize handles, constraints, keyboard/touch/mouse support, and localized accessibility labels.
Changes:
- Introduces
ResizableandResizable.Handlewith state/interaction hooks, styling, and public types. - Adds Storybook stories + MDX documentation describing usage, constraints, keyboard interaction, and CSS variables.
- Adds a comprehensive Vitest suite and wires the component into exports + API extractor/public API guard.
Reviewed changes
Copilot reviewed 20 out of 20 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| tools/public_api_guard/components/Resizable.api.md | Adds generated API report for the new public component/types. |
| tools/api-extractor/config.json | Registers Resizable for API extractor processing. |
| packages/components/src/components/Resizable/types.ts | Defines and exports public prop/types and direction utilities. |
| packages/components/src/components/Resizable/ResizableHandle.tsx | Implements the resizable handle component (polymorphic, a11y/interaction wiring). |
| packages/components/src/components/Resizable/ResizableContext.ts | Provides context + guard hook for handle usage inside Resizable. |
| packages/components/src/components/Resizable/Resizable.tsx | Implements Resizable root and compounds .Handle. |
| packages/components/src/components/Resizable/Resizable.test.tsx | Adds interaction, constraints, controlled/uncontrolled, and a11y behavior tests. |
| packages/components/src/components/Resizable/Resizable.stories.tsx | Adds Storybook stories demonstrating common scenarios and composition. |
| packages/components/src/components/Resizable/Resizable.module.css | Adds base/handle positioning and cursor styles with CSS variable hooks. |
| packages/components/src/components/Resizable/Resizable.mdx | Adds documentation page for the new component. |
| packages/components/src/components/Resizable/index.ts | Exports Resizable and related public types from the component folder. |
| packages/components/src/components/Resizable/hooks/utils.ts | Adds shared math/validation helpers (bounds, clamping, direction helpers). |
| packages/components/src/components/Resizable/hooks/useResizableState.ts | Adds controlled/uncontrolled state management and resize calculations. |
| packages/components/src/components/Resizable/hooks/useResizableHandle.ts | Adds handle a11y + interaction props (useMove, focus ring, i18n labels). |
| packages/components/src/components/Resizable/hooks/useResizable.ts | Adds root DOM props, observed sizing, and context value wiring. |
| packages/components/src/components/Resizable/hooks/types.ts | Defines internal hook-level types and the direction constants/tuples. |
| packages/components/src/components/Resizable/hooks/intl.json | Adds localized default strings for handle labels (ru/en). |
| packages/components/src/components/Resizable/hooks/index.ts | Exports hook modules for internal component assembly. |
| packages/components/src/components/Resizable/stories/styles.module.css | Adds story-only styling for demos (layout/panels/handles). |
| packages/components/src/components/index.ts | Re-exports Resizable from the package components entry point. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
rmnturov
approved these changes
Jul 27, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.

No description provided.