v4 - #28
Open
nerdyman wants to merge 86 commits into
Open
Conversation
…loses #24 BREAKING CHANGE: The library now requires the `useReactImageTurntable` hook to be called and its props passed.
…s` length changes
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
nerdyman
changed the title
This was
linked to
issues
Dec 6, 2023
This was
linked to
issues
Dec 16, 2023
…ive index to zero when image count changes to a length below the active index
…om `useReactImageTurntable` to `ref`
…avoid jitter when changing between 18 and 36 images
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 11
Note
Due to the large number of review comments, Critical, Major severity comments were prioritized as inline comments.
🟡 Minor comments (13)
README.md-9-16 (1)
9-16: 📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick winFix the CI badge link.
The badge links to
nerdyman/react-compare-slider, not this repository, so it reports the wrong workflow status.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@README.md` around lines 9 - 16, Fix the CI badge link in the README by changing the GitHub Actions URL from nerdyman/react-compare-slider to nerdyman/react-image-turntable while preserving the existing workflow query and badge markup.README.md-79-83 (1)
79-83: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winUse one setter name consistently.
The output table documents
setActiveImageIndex, but the example callssetActiveIndex. Align the example and API table with the implemented hook contract.Also applies to: 112-114
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@README.md` around lines 79 - 83, Use one setter name consistently for the hook API: update the README example and output table to match the implemented hook contract, using either setActiveIndex or setActiveImageIndex everywhere as appropriate. Check the related example section and the corresponding props table, including the additionally referenced lines.README.md-104-105 (1)
104-105: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winUse
autoRotate.enabledin the example
The public option type exposesautoRotate.enabled, so this snippet should useenabledhere instead ofdisabledto match the documented API.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@README.md` around lines 104 - 105, Update the useReactImageTurntable example’s autoRotate configuration to use the documented enabled property instead of disabled, while preserving the intended rotation behavior and interval.lib/src/ReactImageTurntable.tsx-51-51 (1)
51-51: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winCorrect the fallback image total.
For an array of 48 images, the first fallback label currently says “Turntable 1 of 49”.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@lib/src/ReactImageTurntable.tsx` at line 51, The fallback alt text in the ReactImageTurntable image rendering should use the actual image count, not an incremented total. Update the fallback expression to reference images.length while retaining the existing index numbering.lib/src/useReactImageTurntable.ts-18-36 (1)
18-36: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winNormalise negative initial indexes.
initialImageIndex={-1}is stored unchanged; Line 35 only corrects values above the upper bound. This leaves every image hidden and exposesaria-valuenow="0". Initialise and reconcile both bounds.Proposed fix
- const [activeImageIndex, setActiveImageIndexUnsafe] = useState(initialImageIndex); + const [activeImageIndex, setActiveImageIndexUnsafe] = useState(() => + initialImageIndex < 0 || initialImageIndex > imagesCount ? 0 : initialImageIndex, + ); useEffect(() => { - if (activeImageIndex > imagesCount) setActiveImageIndexUnsafe(0); + if (activeImageIndex < 0 || activeImageIndex > imagesCount) { + setActiveImageIndexUnsafe(0); + } }, [activeImageIndex, imagesCount]);🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@lib/src/useReactImageTurntable.ts` around lines 18 - 36, Normalize the initial image index and reconcile both bounds instead of only values above the maximum. Update the initialization using the same bounds as setActiveImageIndex, and modify the useEffect associated with activeImageIndex/imagesCount to reset indexes when activeImageIndex is below 0 or above imagesCount, ensuring aria-valuenow and image visibility remain valid.example/src/demos/advanced-controls.tsx-38-108 (1)
38-108: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winAvoid storing
NaNfrom these number inputsexample/src/demos/advanced-controls.tsx:41-108— clearing the fields feedsvalueAsNumber === NaNinto state. That leavesactiveImageIndexinvalid, makesautoRotate.intervalfall through to a zero-delay timer, and breaks drag sensitivity whenmovementSensitivitybecomesNaN. Keep the previous value until the input contains a finite number.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@example/src/demos/advanced-controls.tsx` around lines 38 - 108, Number inputs in the advanced controls store NaN when cleared, invalidating activeImageIndex, autoRotate.interval, and movementSensitivity. Update the onChange handlers for these inputs to only call their setters when ev.target.valueAsNumber is finite, otherwise preserve the existing state; apply this to the active image index, auto-rotate interval, and movement sensitivity controls.example/src/index.css-81-89 (1)
81-89: 📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick winRemove the deprecated
clipdeclaration.Stylelint flags
clipas deprecated, andclip-path: inset(50%)already supplies the required clipping behaviour.Suggested fix
.sr-only:not(:focus):not(:active) { - clip: rect(0 0 0 0); clip-path: inset(50%);🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@example/src/index.css` around lines 81 - 89, Remove the deprecated `clip` declaration from the `.sr-only:not(:focus):not(:active)` rule, keeping `clip-path: inset(50%)` and the remaining accessibility styles unchanged.Source: Linters/SAST tools
example/tests/react-image-turntable.spec.tsx-228-228 (1)
228-228: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winExpect two images, not three.
CustomImagePropsTestprovides two images, so the default alt text should beTurntable 1 of 2; the current assertion will fail regardless of component behaviour.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@example/tests/react-image-turntable.spec.tsx` at line 228, The assertion in CustomImagePropsTest expects the wrong image count; update the primary image alt-text expectation from “Turntable 1 of 3” to “Turntable 1 of 2” to match the two provided images.example/vite.config.ts-12-12 (1)
12-12: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winTreat an empty
PORTas unset.
Number('')is0, soPORT=""selects port 0 instead of falling back to 3000. Trim and validate the string before numeric conversion.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@example/vite.config.ts` at line 12, Treat an empty or whitespace-only PORT environment value as unset in the Vite configuration. Trim process.env.PORT before converting it, then validate the trimmed value is numeric; use that number only when valid, otherwise fall back to port 3000.package.json-2-9 (1)
2-9: 🔒 Security & Privacy | 🟡 Minor | ⚡ Quick winMark the workspace root as private.
Only the library package is intended for publication, but this root manifest is publishable as written. Add
"private": trueto prevent accidental release. (docs.npmjs.com)🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@package.json` around lines 2 - 9, Add "private": true to the workspace root package.json manifest near the package metadata, ensuring the root package cannot be accidentally published while leaving the library package publishable..github/workflows/main.yml-49-60 (1)
49-60: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winFetch full history for SonarQube analysis
.github/workflows/main.yml:20-21—actions/checkoutstill uses the default shallow clone. Setfetch-depth: 0here so SonarQube has enough history for branch/new-code analysis and issue attribution.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In @.github/workflows/main.yml around lines 49 - 60, Update the actions/checkout step in the workflow to set fetch-depth: 0, ensuring the SonarQube Scan step receives the repository’s complete history for branch and new-code analysis..gitignore-16-17 (1)
16-17: 🗄️ Data Integrity & Integration | 🟡 Minor | ⚡ Quick winEnsure
lib/README.mdandlib/LICENSEare included before publish.npm pack --dry-runexcludes both files fromlib, so the release flow still needs to generate or copy them before publishing the package.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In @.gitignore around lines 16 - 17, Update the release or build flow to generate or copy README.md and LICENSE into the lib directory before publishing, ensuring npm pack --dry-run includes both files; also adjust the .gitignore entries for lib/README.md and lib/LICENSE if needed so the generated files are available during packaging..vscode/settings.json-2-3 (1)
2-3: 📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick winScope the VS Code formatter to Biome-supported languages
.vscode/settings.jsonsetsbiomejs.biomeas the global default formatter, but Biome still does not format Markdown, so README/docs will be left without a repository-recommended formatter. Use language-specific overrides or add a Markdown formatter recommendation.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In @.vscode/settings.json around lines 2 - 3, Scope the `editor.defaultFormatter` setting in `.vscode/settings.json` to Biome-supported language overrides instead of applying it globally, and add a Markdown-specific formatter recommendation so README and documentation files retain an explicit formatter.
🧹 Nitpick comments (2)
CONTRIBUTING.md (1)
17-18: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winDo not describe Biome as the formatter while formatting is disabled.
biome.jsonsetsformatter.enabledtofalse; either enable it or document the actual formatting tool.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@CONTRIBUTING.md` around lines 17 - 18, Update the tooling section in CONTRIBUTING.md to accurately reflect the repository configuration: since biome.json disables the formatter, do not list Biome as the formatting tool; either enable formatter.enabled in biome.json or document the actual formatter instead, while retaining Biome as the linter.README.md (1)
68-69: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winDocument
autoRotate.counterClockwise.This newly supported option is omitted from the public props table, so users cannot discover the rotation-direction control or its default.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@README.md` around lines 68 - 69, Document the missing autoRotate.counterClockwise option in the README public props table alongside autoRotate.enabled and autoRotate.interval, including its boolean type, default value, and that it controls rotation direction.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In @.github/workflows/main.yml:
- Around line 20-21: Update the checkout step named “🛒 Checkout Repo” to set
actions/checkout’s persist-credentials input to false, preventing the GitHub
token from being retained for subsequent PR build steps.
In @.github/workflows/publish-preview.yml:
- Around line 11-12: The checkout step currently persists the GitHub token into
subsequent preview build steps; update the actions/checkout@v4 configuration in
the workflow’s checkout step to set persist-credentials: false.
- Around line 2-4: Update the workflow’s pull_request trigger to include the
labeled activity type alongside synchronize, ensuring adding the preview label
starts the workflow without requiring a new commit.
- Line 29: Pin the pkg-pr-new CLI used by the publish step instead of resolving
it dynamically through pnpx. Add an exact pkg-pr-new version to the repository’s
dependencies and update the workflow command to invoke it with pnpm exec while
preserving the existing publish arguments.
In `@example/src/index.css`:
- Around line 10-12: Fix the invalid declaration in the `*:focus-visible` rule
by using the `outline` shorthand with `2px solid` or by separating valid
`outline-width` and `outline-style` properties, ensuring the focus outline is
applied.
In `@example/tests/react-image-turntable.spec.tsx`:
- Around line 19-29: Replace the GitHub-hosted image URLs in the turntableProps
test fixtures with stable, checked-in local image fixtures or data URLs,
including the additional image definitions referenced by the comment, while
preserving the existing alt and className assertions.
In `@lib/package.json`:
- Around line 33-36: The CommonJS exports condition incorrectly nests an
"import" key under "require"; update the exports configuration in
lib/package.json so the CJS path uses a "require" key (or a default fallback)
pointing to ./dist/index.cjs, while preserving the types entry.
In `@lib/src/ReactImageTurntable.tsx`:
- Around line 46-67: Update the image rendering in ReactImageTurntable to
collect and spread remaining native img props from each image object onto the
<img>, while ensuring component-controlled props and merged style are applied
correctly. Replace the alt fallback’s truthiness check with nullish handling so
an intentional alt="" is preserved, and use images.length rather than
images.length + 1 in the generated fallback.
In `@lib/src/types.ts`:
- Around line 3-14: Add the required counterClockwise option to
ReactImageTurntableAutoRotateProps in lib/src/types.ts, then update the
auto-rotation logic in useReactImageTurntable to read and honor it by advancing
in reverse when enabled, while preserving forward rotation by default.
In `@lib/tsdown.config.ts`:
- Line 3: Update the package.json import in the module initialization to
destructure its default export, then read browserslist from that parsed object
instead of the import namespace. Use the existing packageJson reference in
lib/tsdown.config.ts and preserve the JSON import attributes.
In `@README.md`:
- Around line 66-70: Update the README props table so the `images` entry matches
the `{ src, alt }` objects used throughout the examples, documenting the actual
public image item type; alternatively, revise every example to use strings
consistently, but ensure the table and examples agree.
---
Minor comments:
In @.github/workflows/main.yml:
- Around line 49-60: Update the actions/checkout step in the workflow to set
fetch-depth: 0, ensuring the SonarQube Scan step receives the repository’s
complete history for branch and new-code analysis.
In @.gitignore:
- Around line 16-17: Update the release or build flow to generate or copy
README.md and LICENSE into the lib directory before publishing, ensuring npm
pack --dry-run includes both files; also adjust the .gitignore entries for
lib/README.md and lib/LICENSE if needed so the generated files are available
during packaging.
In @.vscode/settings.json:
- Around line 2-3: Scope the `editor.defaultFormatter` setting in
`.vscode/settings.json` to Biome-supported language overrides instead of
applying it globally, and add a Markdown-specific formatter recommendation so
README and documentation files retain an explicit formatter.
In `@example/src/demos/advanced-controls.tsx`:
- Around line 38-108: Number inputs in the advanced controls store NaN when
cleared, invalidating activeImageIndex, autoRotate.interval, and
movementSensitivity. Update the onChange handlers for these inputs to only call
their setters when ev.target.valueAsNumber is finite, otherwise preserve the
existing state; apply this to the active image index, auto-rotate interval, and
movement sensitivity controls.
In `@example/src/index.css`:
- Around line 81-89: Remove the deprecated `clip` declaration from the
`.sr-only:not(:focus):not(:active)` rule, keeping `clip-path: inset(50%)` and
the remaining accessibility styles unchanged.
In `@example/tests/react-image-turntable.spec.tsx`:
- Line 228: The assertion in CustomImagePropsTest expects the wrong image count;
update the primary image alt-text expectation from “Turntable 1 of 3” to
“Turntable 1 of 2” to match the two provided images.
In `@example/vite.config.ts`:
- Line 12: Treat an empty or whitespace-only PORT environment value as unset in
the Vite configuration. Trim process.env.PORT before converting it, then
validate the trimmed value is numeric; use that number only when valid,
otherwise fall back to port 3000.
In `@lib/src/ReactImageTurntable.tsx`:
- Line 51: The fallback alt text in the ReactImageTurntable image rendering
should use the actual image count, not an incremented total. Update the fallback
expression to reference images.length while retaining the existing index
numbering.
In `@lib/src/useReactImageTurntable.ts`:
- Around line 18-36: Normalize the initial image index and reconcile both bounds
instead of only values above the maximum. Update the initialization using the
same bounds as setActiveImageIndex, and modify the useEffect associated with
activeImageIndex/imagesCount to reset indexes when activeImageIndex is below 0
or above imagesCount, ensuring aria-valuenow and image visibility remain valid.
In `@package.json`:
- Around line 2-9: Add "private": true to the workspace root package.json
manifest near the package metadata, ensuring the root package cannot be
accidentally published while leaving the library package publishable.
In `@README.md`:
- Around line 9-16: Fix the CI badge link in the README by changing the GitHub
Actions URL from nerdyman/react-compare-slider to nerdyman/react-image-turntable
while preserving the existing workflow query and badge markup.
- Around line 79-83: Use one setter name consistently for the hook API: update
the README example and output table to match the implemented hook contract,
using either setActiveIndex or setActiveImageIndex everywhere as appropriate.
Check the related example section and the corresponding props table, including
the additionally referenced lines.
- Around line 104-105: Update the useReactImageTurntable example’s autoRotate
configuration to use the documented enabled property instead of disabled, while
preserving the intended rotation behavior and interval.
---
Nitpick comments:
In `@CONTRIBUTING.md`:
- Around line 17-18: Update the tooling section in CONTRIBUTING.md to accurately
reflect the repository configuration: since biome.json disables the formatter,
do not list Biome as the formatting tool; either enable formatter.enabled in
biome.json or document the actual formatter instead, while retaining Biome as
the linter.
In `@README.md`:
- Around line 68-69: Document the missing autoRotate.counterClockwise option in
the README public props table alongside autoRotate.enabled and
autoRotate.interval, including its boolean type, default value, and that it
controls rotation direction.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: b264d114-41f7-422a-90ca-8d341b7a0c24
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (56)
.coderabbit.yaml.eslintignore.eslintrc.github/workflows/main.yml.github/workflows/publish-preview.yml.gitignore.husky/post-merge.husky/pre-commit.nvmrc.prettierignore.vscode/extensions.json.vscode/settings.json.zed/settings.jsonCONTRIBUTING.mdREADME.mdbiome.jsonexample/.gitignoreexample/README.mdexample/index.htmlexample/package.jsonexample/src/App.tsxexample/src/ErrorPage.tsxexample/src/Test.tsxexample/src/demos/Advanced.tsxexample/src/demos/Basic.tsxexample/src/demos/advanced-controls.tsxexample/src/index.cssexample/src/main.tsxexample/tests/browser-commands.tsexample/tests/react-image-turntable.spec.tsxexample/tests/vitest.browser.setup.tsexample/tsconfig.jsonexample/tsconfig.node.jsonexample/vite.config.tsexample/vitest.browser.config.tslefthook.ymllib/.gitignorelib/.release-it.jsonlib/package.jsonlib/src/ReactImageTurntable.tsxlib/src/index.tslib/src/types.tslib/src/useReactImageTurntable.tslib/tsconfig.jsonlib/tsdown.config.tspackage.jsonplaywright.config.tspnpm-workspace.yamlsrc/ReactImageTurntable.tsxsrc/hooks.tssrc/index.tssrc/types.tstest/ExampleRepo.spec.tstest/baseFixtures.tstsconfig.jsontsup.config.ts
💤 Files with no reviewable changes (15)
- tsconfig.json
- src/types.ts
- .husky/post-merge
- .eslintignore
- tsup.config.ts
- src/ReactImageTurntable.tsx
- .eslintrc
- .prettierignore
- test/baseFixtures.ts
- example/src/Test.tsx
- src/index.ts
- src/hooks.ts
- test/ExampleRepo.spec.ts
- .husky/pre-commit
- playwright.config.ts
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@lib/tsdown.config.ts`:
- Around line 11-12: Update the lib/package.json types field to reference
dist/index.d.mts, aligning the package metadata with the ESM-only declarations
already exposed by exports; remove any CJS declaration reference.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: 56cac449-d80b-4b1e-8d9d-f7058e359a8f
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (5)
.zed/settings.jsonREADME.mdlib/package.jsonlib/src/ReactImageTurntable.tsxlib/tsdown.config.ts
✅ Files skipped from review due to trivial changes (1)
- README.md
🚧 Files skipped from review as they are similar to previous changes (2)
- .zed/settings.json
- lib/src/ReactImageTurntable.tsx
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@lib/src/react-image-turntable.tsx`:
- Around line 52-53: Update the image drag configuration around
handleImgDragStart so draggable={true} permits native image dragging: only
attach the preventDefault-based onDragStart handler when dragging is disabled,
while preserving the existing handler behavior for non-draggable images.
- Around line 54-63: Update the image style object in the turntable component so
the caller-provided style is spread before the component-controlled layout and
interaction properties. Ensure the turntable’s opacity and pointerEvents values
remain authoritative for inactive images, while preserving the existing
controlled values and other custom styles.
In `@lib/src/use-react-image-turntable.ts`:
- Around line 55-58: Update useReactImageTurntable to handle an empty images
array before the counter-clockwise decrement in the auto-rotation logic. Prefer
rejecting empty input at the hook/API boundary; otherwise make auto-rotation
return without changing the active index when imagesCount indicates no images,
while preserving existing wraparound behavior for non-empty arrays.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: b60a895e-53b3-4bc9-b903-ffcf48aa3d25
📒 Files selected for processing (9)
.github/workflows/main.ymlREADME.mdexample/src/demos/advanced-controls.tsxexample/tests/react-image-turntable.spec.tsxlib/src/index.tslib/src/react-image-turntable.tsxlib/src/types.tslib/src/use-react-image-turntable.tspackage.json
🚧 Files skipped from review as they are similar to previous changes (6)
- lib/src/index.ts
- lib/src/types.ts
- .github/workflows/main.yml
- package.json
- example/src/demos/advanced-controls.tsx
- README.md
There was a problem hiding this comment.
Pull request overview
This PR delivers the v4 refactor of react-image-turntable, moving to a workspace layout (lib + example), introducing the new useReactImageTurntable hook-driven API, modernizing build/lint/test tooling, and updating docs + CI accordingly.
Changes:
- Replaced the old
src/component/state implementation withlib/exports:useReactImageTurntablehook +ReactImageTurntablecomponent. - Migrated testing from Playwright E2E + NYC instrumentation to Vitest Browser Mode (Playwright provider) with a11y checks.
- Switched tooling to Biome + Lefthook, updated CI (Sonar + bundle analysis), and updated README/CONTRIBUTING for the new structure.
Reviewed changes
Copilot reviewed 53 out of 57 changed files in this pull request and generated 9 comments.
Show a summary per file
| File | Description |
|---|---|
| tsup.config.ts | Removed legacy tsup build config (replaced by lib/tsdown.config.ts). |
| tsconfig.json | Removed root TS config (moved/split into workspace configs). |
| playwright.config.ts | Removed legacy Playwright E2E configuration. |
| test/ExampleRepo.spec.ts | Removed legacy Playwright E2E spec. |
| test/baseFixtures.ts | Removed legacy Playwright coverage fixture. |
| src/types.ts | Removed legacy public types (replaced by lib/src/types.ts). |
| src/hooks.ts | Removed legacy internal hook (replaced by lib/src/use-react-image-turntable.ts). |
| src/ReactImageTurntable.tsx | Removed legacy component implementation (replaced by lib/src/react-image-turntable.tsx). |
| src/index.ts | Removed legacy entry point (replaced by lib/src/index.ts). |
| README.md | Updated docs for new hook-first API, demos, and badges. |
| pnpm-workspace.yaml | Added lib/** workspace package and pnpm build allowance for lefthook. |
| package.json | Converted to workspace root scripts/tooling (Biome/Lefthook) and test orchestration. |
| lib/package.json | Introduced v4 library package metadata, exports, engines, and scripts. |
| lib/src/index.ts | New library entry point exporting component, hook, and types. |
| lib/src/types.ts | New public API types for hook/component. |
| lib/src/use-react-image-turntable.ts | New core hook implementation (state, autorotate, input bindings). |
| lib/src/react-image-turntable.tsx | New component rendering + accessibility attributes + styling. |
| lib/tsdown.config.ts | New build/package checking config (ATTW/publint enabled). |
| lib/tsconfig.json | New library TS config. |
| lib/.release-it.json | Library-scoped release-it configuration. |
| lib/.gitignore | Ignores generated stats report output. |
| lefthook.yml | Replaced Husky hooks with Lefthook + Biome formatting on commit. |
| .husky/pre-commit | Removed Husky pre-commit hook. |
| .husky/post-merge | Removed Husky post-merge hook. |
| .prettierignore | Removed Prettier ignore (Biome now used). |
| .eslintrc | Removed ESLint config (Biome now used). |
| .eslintignore | Removed ESLint ignore file. |
| biome.json | Added Biome configuration for formatting/linting. |
| .vscode/settings.json | Updated editor defaults to Biome. |
| .vscode/extensions.json | Updated recommended extension to Biome. |
| .zed/settings.json | Added Zed editor configuration for Biome formatting/actions. |
| CONTRIBUTING.md | Updated contributor guidance for new repo/workspace structure. |
| .gitignore | Updated ignores for workspace artifacts and generated files. |
| .nvmrc | Updated Node selection used by CI and local dev. |
| .github/workflows/main.yml | Updated CI: install/playwright deps, build lib, vitest browser tests, Sonar scan, bundle analysis. |
| .github/workflows/publish-preview.yml | Added PR-labeled preview publishing workflow. |
| example/package.json | Updated example app deps/scripts; added Vitest browser tests + coverage. |
| example/vite.config.ts | Updated Vite config (sourcemaps/minify off; safer Number.isNaN). |
| example/vitest.browser.config.ts | Added Vitest browser-mode config + coverage setup. |
| example/tests/react-image-turntable.spec.tsx | Added new browser-based a11y + interaction + autorotate tests. |
| example/tests/browser-commands.ts | Added Vitest browser commands for pointer interactions. |
| example/tests/vitest.browser.setup.ts | Added Vitest setup (axe matchers + CSS import). |
| example/src/App.tsx | Reworked example into a router-driven demo app (Advanced/Basic). |
| example/src/ErrorPage.tsx | Added router error page. |
| example/src/demos/Basic.tsx | Added basic demo using the new hook API. |
| example/src/demos/Advanced.tsx | Added advanced demo with external state control + autorotate controls. |
| example/src/demos/advanced-controls.tsx | Added advanced demo UI controls for state manipulation. |
| example/src/main.tsx | Simplified entry; removed legacy debug test wrapper. |
| example/src/Test.tsx | Removed legacy E2E test harness component. |
| example/src/index.css | Overhauled styling and accessibility helpers for the new demo. |
| example/index.html | Updated root element semantics (<main id="root">). |
| example/tsconfig.json | Expanded includes to tests; updated moduleResolution/types. |
| example/tsconfig.node.json | Updated moduleResolution to bundler. |
| example/README.md | Updated example README + StackBlitz badge. |
| example/.gitignore | Ignored Vitest browser attachments/screenshots. |
| .coderabbit.yaml | Added CodeRabbit configuration. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
… when images are not empty
…s with a single `classNames` object - class values are the same
|
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.
use clientdirective to module #25autoRotate.counterClockwiseprop #31node16flag https://www.npmjs.com/package/@arethetypeswrong/cli#profilesSummary by CodeRabbit
New Features
Documentation
Chores