Conversation
Owner
gfazioli
commented
Apr 2, 2026
gfazioli
commented
- *** ✨ feat: upgrade to Mantine 9, React 19, and TypeScript 6 with new angle-based compare geometry**
- *** ✨ feat: upgrade to Mantine 9 with angle-based geometry, keyboard nav, and enhanced docs**
- *** ✨ feat: upgrade to Mantine 9 with angle geometry, labels, auto-play, and enhanced interaction modes**
- *** ✨ feat: upgrade to Mantine 9, React 19, and TypeScript 6 with oxlint migration**
…ngle-based compare geometry * Upgrade @mantine/core and @mantine/hooks to 9.0.0 across root and docs workspaces * Upgrade React to 19.2.4 and TypeScript to 6.0.2 for full compatibility with Mantine v9 * Replace direction prop with angle-based geometry engine supporting arbitrary divider angles (0-360°) * Add minDragBound and maxDragBound props for constraining slider movement range * Migrate formatter from Prettier (.prettierrc.mjs) to oxfmt (.oxfmtrc.json) with updated format scripts * Upgrade Storybook to v10.x and update main.ts/preview.tsx configuration accordingly * Update CompareProps.story.tsx with new angle, minDragBound, and maxDragBound controls * Update README to reflect Mantine 9.x, React 19, and the new angle-based API * Align tsconfig.json and tsconfig.build.json with updated module resolution and compiler settings * Update yarn.lock and all devDependencies to their latest compatible versions
…v, and enhanced docs * Replace `Classes.module.css` with `Compare.module.css` to follow Mantine naming conventions * Add arbitrary angle divider system (0-360°) using Sutherland-Hodgman polygon clipping for clip-path * Implement full keyboard navigation with arrow keys (±1%), Shift+arrow (±10%), Home/End support * Add ARIA slider role with `aria-valuenow`, `aria-valuemin`, `aria-valuemax` for accessibility * Add comprehensive test suite covering all variants, keyboard interaction, ARIA attributes, and ref forwarding * Create new keyboard navigation demo and update Styles API demo for the docs site * Update docs.mdx with sections for angle, diagonal angle, drag boundaries, and keyboard navigation * Add CLAUDE.md with project architecture, commands, and component implementation details * Update package.json keywords to target `mantine-v9` and README to require Mantine 9 and React 19 * Add new Storybook stories for angle variants, drag bounds, keyboard navigation, and callbacks
…, and enhanced interaction modes * Rewrite Compare component for Mantine 9 with factory pattern, React 19, and TypeScript 6 support * Add angle-based divider system (0-360°) using Sutherland-Hodgman polygon clipping for diagonal comparisons * Implement auto-play animation with requestAnimationFrame and configurable easing (linear, ease-in, ease-out, ease-in-out, spring) * Add leftLabel and rightLabel props for overlay text labels with semi-transparent dark background styling * Add disabled state that blocks all interactions and renders with reduced opacity via data-disabled attribute * Add handleOnly mode to restrict drag to the circular handle button instead of the full slider line * Add sliderColor and sliderWidth props exposed as CSS custom variables for slider divider customization * Add full keyboard accessibility with Arrow keys, Shift+Arrow, Home/End and configurable step sizes * Add comprehensive test suite covering all variants, ARIA attributes, keyboard navigation, labels, and refs * Add new demo pages (autoPlay, disabled, handleOnly, labels, sliderStyling) and update docs with complete feature documentation
…t migration * Upgrade Mantine core and hooks to v9.0.0 across root and docs workspaces * Upgrade React and React DOM to 19.2.4 and TypeScript to 6.0.2 * Replace ESLint with oxlint for faster linting and add oxfmt for formatting * Add new oxlint.config.ts with comprehensive rule set including React, TypeScript, JSX a11y, and Jest plugins * Remove eslint.config.mjs and tsconfig.eslint.json as they are no longer needed * Update Compare component to use Mantine 9 factory pattern with ref extraction from props * Simplify docs/tsconfig.json by removing plugins and paths configuration * Update CLAUDE.md to reflect Mantine 9, React 19, and TypeScript 6 requirements * Upgrade Storybook to v10.x and other devDependencies to latest compatible versions * Update yarn.lock to reflect all dependency changes
Contributor
There was a problem hiding this comment.
Pull request overview
Upgrades @gfazioli/mantine-compare to the Mantine v9 / React 19 / TypeScript 6 toolchain, while significantly expanding the Compare component’s capabilities (angle-based geometry, labels, keyboard navigation, disabled state, auto-play, styling controls) and updating docs, Storybook, and lint/format tooling accordingly.
Changes:
- Migrates TypeScript configs and workspace tooling (Oxlint/Oxfmt, Storybook v10, moduleResolution
bundler). - Extends
Comparewith new props (controlledposition, labels, keyboard controls, disabled/handleOnly, auto-play, slider styling, viewport callback) plus CSS variables and Styles API updates. - Expands tests and docs/demos to cover new behaviors and API surface.
Reviewed changes
Copilot reviewed 34 out of 36 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| tsconfig.json | Switches TS module resolution to bundler. |
| tsconfig.eslint.json | Removes ESLint-specific TS config (linting migrated away from ESLint). |
| tsconfig.build.json | Narrows build include scope and sets rootDir for declaration build. |
| README.md | Updates overview + adds feature list reflecting new API and Mantine 9/React 19 requirements. |
| package/src/index.ts | Exports newly introduced CompareVariant type. |
| package/src/CompareProps.story.tsx | Adjusts prop spreading order in story usage. |
| package/src/Compare.tsx | Implements new props/features (controlled/uncontrolled, labels, disabled, keyboard, auto-play, slider styling vars, viewport detection, ref merging). |
| package/src/Compare.test.tsx | Adds tests for ARIA/keyboard/ref/labels/disabled/etc. |
| package/src/Compare.story.tsx | Adds Storybook stories demonstrating new behaviors and props. |
| package/src/Compare.module.css | Adds disabled styling, label styles, and slider CSS variable support. |
| package/src/Classes.module.css | Removes unused/legacy CSS module. |
| package/package.json | Updates package keywords metadata. |
| package.json | Migrates scripts/tooling (Oxlint/Oxfmt), bumps core deps (Mantine 9, React 19, TS 6), updates Storybook deps. |
| oxlint.config.ts | Adds Oxlint configuration and rule set for the repo. |
| jsdom.mocks.cjs | Adds IntersectionObserver mock needed for viewport detection hooks in tests. |
| eslint.config.mjs | Removes ESLint flat config (linting migrated away from ESLint). |
| docs/tsconfig.json | Aligns docs TS config with ES2015 target + bundler resolution. |
| docs/styles-api/Compare.styles-api.ts | Updates Styles API selectors and exposed CSS vars list. |
| docs/package.json | Bumps docs Mantine/TypeScript versions to v9 / v6. |
| docs/docs.mdx | Adds documentation sections for new props/features (labels, disabled, styling, handleOnly, auto-play, keyboard). |
| docs/demos/index.ts | Registers new demos. |
| docs/demos/Compare.demo.stylesApi.tsx | Updates Styles API demo to reflect new component purpose/props. |
| docs/demos/Compare.demo.sliderStyling.tsx | Adds demo for sliderColor/sliderWidth. |
| docs/demos/Compare.demo.labels.tsx | Adds labels demo. |
| docs/demos/Compare.demo.keyboard.tsx | Adds keyboard navigation demo. |
| docs/demos/Compare.demo.handleOnly.tsx | Adds handle-only drag demo. |
| docs/demos/Compare.demo.disabled.tsx | Adds disabled state demo. |
| docs/demos/Compare.demo.configurator.tsx | Enhances configurator (more props + content switcher). |
| docs/demos/Compare.demo.autoPlay.tsx | Adds auto-play demo. |
| CLAUDE.md | Adds repo-specific contributor guidance (commands, architecture, behaviors). |
| .storybook/preview.tsx | Updates Storybook preview setup to v10 patterns + theme toolbar integration. |
| .storybook/main.ts | Updates Storybook config for v10 and addon-themes. |
| .prettierrc.mjs | Removes Prettier configuration (formatting migrated to oxfmt). |
| .oxfmtrc.json | Adds oxfmt formatting configuration. |
| .github/workflows/pull_request.yml | Updates workflow naming and Node setup to use .nvmrc. |
- Drop IntersectionObserver hook and onVisible prop from Compare component - Update docs, README, and tests to reflect removal and new autoPlay behavior - Add controlled position demo and autoPlay easing options - Enhance CSS for focus-visible and hover interactions
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.