Skip to content

CLAUDE.md

Latest commit

 

History

History
78 lines (50 loc) · 3.6 KB

CLAUDE.md

File metadata and controls

78 lines (50 loc) · 3.6 KB
Raw

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Commands

Yarn 4, pinned in package.json and run through Corepack: run corepack enable once, then yarn install. Use Node.js 24 (what CI runs). Node.js 25 and later no longer bundle Corepack; there, install it first with npm install -g corepack.

# Install dependencies
yarn install

# Run tests with coverage
yarn test

# Run tests in watch mode
yarn unit

# Lint (ESLint)
yarn lint

# Type check only (tsc --noEmit)
yarn typecheck

# Build (Babel transpile of lib/ to build/, plus .d.ts via tsc)
yarn build

# Run dev server with examples
yarn dev

# Build examples for production
yarn build-example

Run a single test file:

npx jest __tests__/Resizable.test.tsx

Run tests matching a pattern:

npx jest --testNamePattern="snapshot"

Architecture

This is a React component library providing resizable functionality via two main components:

Core Components (lib/, TypeScript)

  • Resizable.tsx - Stateless base component. Wraps a child element with draggable resize handles using react-draggable's DraggableCore. Computes size changes from drag deltas, applies constraints, and invokes callbacks. Does not manage state - parent must set width/height props from callback data.

  • ResizableBox.tsx - Stateful wrapper around <Resizable>. Manages width/height state internally and renders a <div> with those dimensions. Simpler API for common use cases.

  • propTypes.ts - Shared TypeScript types and PropTypes definitions. Exports resizableProps object and types like ResizeHandleAxis, ResizeCallbackData, etc.

  • utils.ts - Helper cloneElement() that merges style and className when cloning React elements.

Key Implementation Details

  • Resize handles are rendered as <DraggableCore> wrappers around handle elements
  • Handle positions: 's', 'w', 'e', 'n', 'sw', 'nw', 'se', 'ne'
  • The runConstraints() method applies min/max constraints and aspect ratio locking with slack tracking
  • Position tracking via lastHandleRect compensates for element repositioning during north/west drags
  • transformScale prop adjusts deltas when parent has CSS transform scaling
  • Delta base is lastSize, not props.width/height (see PR #255). Between consecutive onResize calls, the parent may not have re-rendered yet, so this.props.width is stale. The component accumulates from lastSize to avoid drift. Consequence: dimensionsChanged must also be compared against the base (baseWidth/baseHeight), not props, otherwise zero-delta calls fire spurious callbacks.

Dependency Notes

  • ESLint is pinned to ^9.x. ESLint 10 removed scopeManager.addGlobals, which @babel/eslint-parser 7.x still calls (TypeError: scopeManager.addGlobals is not a function). The parser fix lives in v8 RCs, but those require Babel core v8 (also pre-release). Stay on ESLint 9 until both stabilize together.

Build Output

yarn build transpiles lib/*.{ts,tsx} to build/ with Babel and emits .d.ts files with tsc --project tsconfig.build.json. The build-artifact suite in __tests__/integration/end-to-end.test.tsx only runs when build/ exists, so build before yarn test (CI does).

Testing

Tests use Jest with @testing-library/react (jsdom). Test files are in __tests__/ (Resizable.test.tsx, ResizableBox.test.tsx, ssr.test.ts, integration/). Snapshot tests verify render output; unit tests verify resize behavior, constraint handling, and callback data; the integration tests drive real DOM events through react-draggable.