Skip to content

feat(components): add Resizable component (DS-5253)#426

Open
KamilEmeleev wants to merge 6 commits into
mainfrom
feat/ds-5253
Open

feat(components): add Resizable component (DS-5253)#426
KamilEmeleev wants to merge 6 commits into
mainfrom
feat/ds-5253

Conversation

@KamilEmeleev

Copy link
Copy Markdown
Collaborator

No description provided.

@KamilEmeleev KamilEmeleev added the enhancement New feature or request label Jul 17, 2026
@KamilEmeleev
KamilEmeleev requested a review from rmnturov July 17, 2026 14:16
@KamilEmeleev
KamilEmeleev marked this pull request as ready for review July 17, 2026 14:20
# Conflicts:
#	packages/components/src/components/index.ts
@github-actions

github-actions Bot commented Jul 17, 2026

Copy link
Copy Markdown

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

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 Resizable and Resizable.Handle with 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

Copy link
Copy Markdown

Странно, что в неактивном состоянии есть ховер. Ховеры обычно как раз и показывают возможность взаимодействовать. Я советую убрать ховер
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants