{"owner":"react-grid-layout","repo":"react-draggable","hasSkills":true,"hasMcp":false,"mcpConfig":null,"found":["CLAUDE.md"],"skills":{"CLAUDE.md":"# CLAUDE.md\n\nThis file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.\n\n## Build Commands\n\n**This project uses Yarn, not npm.** Always use `yarn` for package management.\n\nThis project uses Make for builds. Key commands:\n\n- `make build` - Full build (cleans, then builds CJS and web bundles)\n- `make lint` - Runs Flow type checker, ESLint, and TypeScript type checking on typings\n- `make test` - Runs unit tests via Vitest\n- `make test-browser` - Runs browser tests via Puppeteer (requires build first)\n- `make test-all` - Runs both unit and browser tests\n- `make dev` - Starts webpack dev server with example page at localhost:8080\n\nYarn scripts:\n- `yarn test` - Run unit tests (jsdom environment)\n- `yarn test:watch` - Run unit tests in watch mode\n- `yarn test -- path/to/test.jsx` - Run a single test file\n- `yarn test -- -t \"test name\"` - Run tests matching a pattern\n- `yarn test:browser` - Build and run browser tests (Puppeteer)\n- `yarn test:all` - Run all tests\n- `yarn test:coverage` - Run tests with coverage report\n\nPre-commit hooks run `make lint` and `make test` automatically.\n\n## Test Architecture\n\nTests are split into two categories:\n\n1. **Unit tests** (`test/*.test.{js,jsx}`) - Run in jsdom via Vitest\n   - Fast, no browser required\n   - Test component logic, callbacks, prop handling\n   - Some coordinate-based tests skipped (require real browser)\n\n2. **Browser tests** (`test/browser/*.test.js`) - Run in headless Chrome via Puppeteer\n   - Test actual drag behavior with real coordinate calculations\n   - Test transforms, axis constraints, bounds, scale\n\n### Test Utilities\n\n`test/testUtils.js` provides helpers for simulating drag events:\n- `simulateDrag(element, {from, to})` - Complete drag operation\n- `startDrag(element, {x, y})` / `moveDrag({x, y})` / `endDrag(element, {x, y})` - Step-by-step drag\n- `simulateTouchDrag(element, {from, to})` - Touch event drag\n\n## Architecture\n\n### Component Hierarchy\n\n**DraggableCore** (`lib/DraggableCore.js`) - Low-level component that handles raw drag events\n- Maintains minimal internal state (just `dragging`, `lastX`, `lastY`)\n- Manages mouse/touch event binding and cleanup\n- Provides `onStart`, `onDrag`, `onStop` callbacks with position data\n- Use this when you need full control over positioning\n\n**Draggable** (`lib/Draggable.js`) - High-level wrapper around DraggableCore\n- Manages position state, bounds checking, axis constraints\n- Applies CSS transforms or SVG transform attributes\n- Supports controlled (`position` prop) and uncontrolled (`defaultPosition`) modes\n- Adds dragging-related CSS classes\n\n### Key Utilities\n\n- `lib/utils/domFns.js` - DOM helpers: event binding, CSS transforms, user-select hacks\n- `lib/utils/positionFns.js` - Position calculations: bounds checking, grid snapping, delta computations\n- `lib/utils/getPrefix.js` - Browser prefix detection for CSS transforms\n\n### Build Outputs\n\n- `build/cjs/` - CommonJS build (Babel)\n- `build/web/react-draggable.min.js` - UMD browser bundle (Webpack)\n\n### Type Systems\n\nThe codebase uses Flow for internal type checking (`// @flow` annotations) and ships TypeScript definitions in `typings/index.d.ts`. Both must stay in sync when modifying component props or types.\n\n## Key Patterns\n\n### nodeRef Pattern\nTo avoid ReactDOM.findDOMNode deprecation warnings in Strict Mode, components accept a `nodeRef` prop:\n```jsx\nconst nodeRef = React.useRef(null);\n<Draggable nodeRef={nodeRef}>\n  <div ref={nodeRef}>Content</div>\n</Draggable>\n```\n\n### Callback Return Values\nReturning `false` from `onStart`, `onDrag`, or `onStop` cancels the drag operation.\n\n### CSS Transform Approach\nDragging uses CSS transforms (`translate`) rather than absolute positioning, allowing draggable elements to work regardless of their CSS position value.\n\n## Release Process\n\n- Update CHANGELOG.md\n- `make release-patch`, `make release-minor`, or `make release-major`\n- `make publish`\n"},"files":{"CLAUDE.md":"# CLAUDE.md\n\nThis file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.\n\n## Build Commands\n\n**This project uses Yarn, not npm.** Always use `yarn` for package management.\n\nThis project uses Make for builds. Key commands:\n\n- `make build` - Full build (cleans, then builds CJS and web bundles)\n- `make lint` - Runs Flow type checker, ESLint, and TypeScript type checking on typings\n- `make test` - Runs unit tests via Vitest\n- `make test-browser` - Runs browser tests via Puppeteer (requires build first)\n- `make test-all` - Runs both unit and browser tests\n- `make dev` - Starts webpack dev server with example page at localhost:8080\n\nYarn scripts:\n- `yarn test` - Run unit tests (jsdom environment)\n- `yarn test:watch` - Run unit tests in watch mode\n- `yarn test -- path/to/test.jsx` - Run a single test file\n- `yarn test -- -t \"test name\"` - Run tests matching a pattern\n- `yarn test:browser` - Build and run browser tests (Puppeteer)\n- `yarn test:all` - Run all tests\n- `yarn test:coverage` - Run tests with coverage report\n\nPre-commit hooks run `make lint` and `make test` automatically.\n\n## Test Architecture\n\nTests are split into two categories:\n\n1. **Unit tests** (`test/*.test.{js,jsx}`) - Run in jsdom via Vitest\n   - Fast, no browser required\n   - Test component logic, callbacks, prop handling\n   - Some coordinate-based tests skipped (require real browser)\n\n2. **Browser tests** (`test/browser/*.test.js`) - Run in headless Chrome via Puppeteer\n   - Test actual drag behavior with real coordinate calculations\n   - Test transforms, axis constraints, bounds, scale\n\n### Test Utilities\n\n`test/testUtils.js` provides helpers for simulating drag events:\n- `simulateDrag(element, {from, to})` - Complete drag operation\n- `startDrag(element, {x, y})` / `moveDrag({x, y})` / `endDrag(element, {x, y})` - Step-by-step drag\n- `simulateTouchDrag(element, {from, to})` - Touch event drag\n\n## Architecture\n\n### Component Hierarchy\n\n**DraggableCore** (`lib/DraggableCore.js`) - Low-level component that handles raw drag events\n- Maintains minimal internal state (just `dragging`, `lastX`, `lastY`)\n- Manages mouse/touch event binding and cleanup\n- Provides `onStart`, `onDrag`, `onStop` callbacks with position data\n- Use this when you need full control over positioning\n\n**Draggable** (`lib/Draggable.js`) - High-level wrapper around DraggableCore\n- Manages position state, bounds checking, axis constraints\n- Applies CSS transforms or SVG transform attributes\n- Supports controlled (`position` prop) and uncontrolled (`defaultPosition`) modes\n- Adds dragging-related CSS classes\n\n### Key Utilities\n\n- `lib/utils/domFns.js` - DOM helpers: event binding, CSS transforms, user-select hacks\n- `lib/utils/positionFns.js` - Position calculations: bounds checking, grid snapping, delta computations\n- `lib/utils/getPrefix.js` - Browser prefix detection for CSS transforms\n\n### Build Outputs\n\n- `build/cjs/` - CommonJS build (Babel)\n- `build/web/react-draggable.min.js` - UMD browser bundle (Webpack)\n\n### Type Systems\n\nThe codebase uses Flow for internal type checking (`// @flow` annotations) and ships TypeScript definitions in `typings/index.d.ts`. Both must stay in sync when modifying component props or types.\n\n## Key Patterns\n\n### nodeRef Pattern\nTo avoid ReactDOM.findDOMNode deprecation warnings in Strict Mode, components accept a `nodeRef` prop:\n```jsx\nconst nodeRef = React.useRef(null);\n<Draggable nodeRef={nodeRef}>\n  <div ref={nodeRef}>Content</div>\n</Draggable>\n```\n\n### Callback Return Values\nReturning `false` from `onStart`, `onDrag`, or `onStop` cancels the drag operation.\n\n### CSS Transform Approach\nDragging uses CSS transforms (`translate`) rather than absolute positioning, allowing draggable elements to work regardless of their CSS position value.\n\n## Release Process\n\n- Update CHANGELOG.md\n- `make release-patch`, `make release-minor`, or `make release-major`\n- `make publish`\n"},"items":[{"name":"CLAUDE.md","path":"CLAUDE.md","title":"CLAUDE.md","content":"# CLAUDE.md\n\nThis file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.\n\n## Build Commands\n\n**This project uses Yarn, not npm.** Always use `yarn` for package management.\n\nThis project uses Make for builds. Key commands:\n\n- `make build` - Full build (cleans, then builds CJS and web bundles)\n- `make lint` - Runs Flow type checker, ESLint, and TypeScript type checking on typings\n- `make test` - Runs unit tests via Vitest\n- `make test-browser` - Runs browser tests via Puppeteer (requires build first)\n- `make test-all` - Runs both unit and browser tests\n- `make dev` - Starts webpack dev server with example page at localhost:8080\n\nYarn scripts:\n- `yarn test` - Run unit tests (jsdom environment)\n- `yarn test:watch` - Run unit tests in watch mode\n- `yarn test -- path/to/test.jsx` - Run a single test file\n- `yarn test -- -t \"test name\"` - Run tests matching a pattern\n- `yarn test:browser` - Build and run browser tests (Puppeteer)\n- `yarn test:all` - Run all tests\n- `yarn test:coverage` - Run tests with coverage report\n\nPre-commit hooks run `make lint` and `make test` automatically.\n\n## Test Architecture\n\nTests are split into two categories:\n\n1. **Unit tests** (`test/*.test.{js,jsx}`) - Run in jsdom via Vitest\n   - Fast, no browser required\n   - Test component logic, callbacks, prop handling\n   - Some coordinate-based tests skipped (require real browser)\n\n2. **Browser tests** (`test/browser/*.test.js`) - Run in headless Chrome via Puppeteer\n   - Test actual drag behavior with real coordinate calculations\n   - Test transforms, axis constraints, bounds, scale\n\n### Test Utilities\n\n`test/testUtils.js` provides helpers for simulating drag events:\n- `simulateDrag(element, {from, to})` - Complete drag operation\n- `startDrag(element, {x, y})` / `moveDrag({x, y})` / `endDrag(element, {x, y})` - Step-by-step drag\n- `simulateTouchDrag(element, {from, to})` - Touch event drag\n\n## Architecture\n\n### Component Hierarchy\n\n**DraggableCore** (`lib/DraggableCore.js`) - Low-level component that handles raw drag events\n- Maintains minimal internal state (just `dragging`, `lastX`, `lastY`)\n- Manages mouse/touch event binding and cleanup\n- Provides `onStart`, `onDrag`, `onStop` callbacks with position data\n- Use this when you need full control over positioning\n\n**Draggable** (`lib/Draggable.js`) - High-level wrapper around DraggableCore\n- Manages position state, bounds checking, axis constraints\n- Applies CSS transforms or SVG transform attributes\n- Supports controlled (`position` prop) and uncontrolled (`defaultPosition`) modes\n- Adds dragging-related CSS classes\n\n### Key Utilities\n\n- `lib/utils/domFns.js` - DOM helpers: event binding, CSS transforms, user-select hacks\n- `lib/utils/positionFns.js` - Position calculations: bounds checking, grid snapping, delta computations\n- `lib/utils/getPrefix.js` - Browser prefix detection for CSS transforms\n\n### Build Outputs\n\n- `build/cjs/` - CommonJS build (Babel)\n- `build/web/react-draggable.min.js` - UMD browser bundle (Webpack)\n\n### Type Systems\n\nThe codebase uses Flow for internal type checking (`// @flow` annotations) and ships TypeScript definitions in `typings/index.d.ts`. Both must stay in sync when modifying component props or types.\n\n## Key Patterns\n\n### nodeRef Pattern\nTo avoid ReactDOM.findDOMNode deprecation warnings in Strict Mode, components accept a `nodeRef` prop:\n```jsx\nconst nodeRef = React.useRef(null);\n<Draggable nodeRef={nodeRef}>\n  <div ref={nodeRef}>Content</div>\n</Draggable>\n```\n\n### Callback Return Values\nReturning `false` from `onStart`, `onDrag`, or `onStop` cancels the drag operation.\n\n### CSS Transform Approach\nDragging uses CSS transforms (`translate`) rather than absolute positioning, allowing draggable elements to work regardless of their CSS position value.\n\n## Release Process\n\n- Update CHANGELOG.md\n- `make release-patch`, `make release-minor`, or `make release-major`\n- `make publish`\n","category":"root","tokens":986}]}