|
| 1 | +# CLAUDE.md |
| 2 | + |
| 3 | +This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. |
| 4 | + |
| 5 | +## Commands |
| 6 | + |
| 7 | +```bash |
| 8 | +# Install dependencies |
| 9 | +yarn |
| 10 | + |
| 11 | +# Run tests with coverage |
| 12 | +yarn test |
| 13 | + |
| 14 | +# Run tests in watch mode |
| 15 | +yarn unit |
| 16 | + |
| 17 | +# Lint (ESLint + Flow) |
| 18 | +yarn lint |
| 19 | + |
| 20 | +# Type check only |
| 21 | +yarn flow |
| 22 | + |
| 23 | +# Build (transpile lib/ to build/) |
| 24 | +yarn build |
| 25 | + |
| 26 | +# Run dev server with examples |
| 27 | +yarn dev |
| 28 | + |
| 29 | +# Build examples for production |
| 30 | +yarn build-example |
| 31 | +``` |
| 32 | + |
| 33 | +Run a single test file: |
| 34 | +```bash |
| 35 | +npx jest __tests__/Resizable.test.js |
| 36 | +``` |
| 37 | + |
| 38 | +Run tests matching a pattern: |
| 39 | +```bash |
| 40 | +npx jest --testNamePattern="snapshot" |
| 41 | +``` |
| 42 | + |
| 43 | +## Architecture |
| 44 | + |
| 45 | +This is a React component library providing resizable functionality via two main components: |
| 46 | + |
| 47 | +### Core Components (`lib/`) |
| 48 | + |
| 49 | +- **Resizable.js** - 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. |
| 50 | + |
| 51 | +- **ResizableBox.js** - Stateful wrapper around `<Resizable>`. Manages width/height state internally and renders a `<div>` with those dimensions. Simpler API for common use cases. |
| 52 | + |
| 53 | +- **propTypes.js** - Shared Flow types and PropTypes definitions. Exports `resizableProps` object and types like `ResizeHandleAxis`, `ResizeCallbackData`, etc. |
| 54 | + |
| 55 | +- **utils.js** - Helper `cloneElement()` that merges `style` and `className` when cloning React elements. |
| 56 | + |
| 57 | +### Key Implementation Details |
| 58 | + |
| 59 | +- Resize handles are rendered as `<DraggableCore>` wrappers around handle elements |
| 60 | +- Handle positions: `'s'`, `'w'`, `'e'`, `'n'`, `'sw'`, `'nw'`, `'se'`, `'ne'` |
| 61 | +- The `runConstraints()` method applies min/max constraints and aspect ratio locking with slack tracking |
| 62 | +- Position tracking via `lastHandleRect` compensates for element repositioning during north/west drags |
| 63 | +- `transformScale` prop adjusts deltas when parent has CSS transform scaling |
| 64 | + |
| 65 | +### Build Output |
| 66 | + |
| 67 | +`yarn build` transpiles `lib/*.js` to `build/` and copies source files as `*.js.flow` for Flow consumers. |
| 68 | + |
| 69 | +## Testing |
| 70 | + |
| 71 | +Tests use Jest with Enzyme for shallow/mount rendering. Test files in `__tests__/` mirror the lib structure. Snapshot tests verify render output; unit tests verify resize behavior, constraint handling, and callback data. |
0 commit comments