Skip to content

feat: data modules circuit-board#529

Merged
LGLabGreg merged 5 commits intomainfrom
feat/circuit-board
May 9, 2026
Merged

feat: data modules circuit-board#529
LGLabGreg merged 5 commits intomainfrom
feat/circuit-board

Conversation

@LGLabGreg
Copy link
Copy Markdown
Owner

@LGLabGreg LGLabGreg commented May 9, 2026

Summary by CodeRabbit

  • New Features

    • Added a new "circuit-board" data-module style for QR code rendering.
  • Documentation

    • Docs and demo pages updated to include and showcase the new style option.
  • Tests

    • Added unit tests to cover the new style and related rendering logic.
  • Other Improvements

    • Demo settings now coerce numeric inputs to numbers for more accurate previews.

Review Change Stack

@vercel
Copy link
Copy Markdown

vercel Bot commented May 9, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
reactqrcode-com Ready Ready Preview, Comment May 9, 2026 2:38pm

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 9, 2026

Warning

Rate limit exceeded

@LGLabGreg has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 9 minutes and 28 seconds before requesting another review.

You’ve run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 648acf70-15da-4ef3-a285-afc3e6ba8691

📥 Commits

Reviewing files that changed from the base of the PR and between 48ceee7 and d25c3f6.

📒 Files selected for processing (14)
  • .changeset/silver-traces-turn.md
  • apps/docs/src/app/data-modules-settings/page.tsx
  • apps/docs/src/app/finder-pattern-inner-settings/page.tsx
  • apps/docs/src/app/finder-pattern-outer-settings/page.tsx
  • apps/docs/src/components/demo/data-modules.tsx
  • apps/docs/src/components/demo/finder-pattern-inner.tsx
  • apps/docs/src/components/demo/finder-pattern-outer.tsx
  • packages/react-qr-code/src/components/data-modules.test.tsx
  • packages/react-qr-code/src/components/data-modules.tsx
  • packages/react-qr-code/src/components/finder-patter-inner.test.tsx
  • packages/react-qr-code/src/components/finder-patterns-inner.tsx
  • packages/react-qr-code/src/types/lib.ts
  • packages/react-qr-code/src/utils/data-modules.ts
  • packages/react-qr-code/src/utils/svg.ts

Walkthrough

This PR adds a new "circuit-board" data module style: extends the DataModulesStyle type, introduces styling constants and utilities for neighbor-aware rendering and SVG path generation, updates DataModules to render traces and pads (two SVG paths), adds tests, updates docs/demo, and includes a changeset.

Changes

Circuit-Board Data Module Style

Layer / File(s) Summary
Type Contract
packages/react-qr-code/src/types/lib.ts
DataModulesStyle union type extends to include 'circuit-board'.
Styling Constants
packages/react-qr-code/src/constants.ts
Adds CIRCUIT_BOARD_LINE_WIDTH and CIRCUIT_BOARD_PAD_RADIUS.
Utility Functions
packages/react-qr-code/src/utils/data-modules.ts
Adds isRenderableDataModule, getRenderableDataModuleNeighbours, line, circuitBoardPad, and circuitBoardShouldDrawPad.
Utility Tests
packages/react-qr-code/src/utils/data-modules.test.ts
Tests for random-size rule, pad-drawing eligibility, renderable-module predicate, and neighbor detection excluding finder patterns.
Component Implementation
packages/react-qr-code/src/components/data-modules.tsx
Adds style === 'circuit-board' rendering: separate trace and pad opcode buffers, neighbor-aware trace/pad generation, and two <path> outputs with circuit-board stroke settings.
Component Tests
packages/react-qr-code/src/components/data-modules.test.tsx
Tests assert DOM attributes, two-path structure, stroke settings, and expected d values for multi-module and standalone circuit-board cases.
Documentation & Demo
apps/docs/public/llms-full.txt, apps/docs/src/app/data-modules-settings/page.tsx, apps/docs/src/components/demo/data-modules.tsx, apps/docs/src/components/demo/main-settings.tsx
Docs and demo UI register 'circuit-board' as an available style and adjust input handling in demo settings.
Release Metadata
.changeset/silver-traces-turn.md
Changeset marks @lglab/react-qr-code for a minor version bump with the circuit-board style addition.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

Poem

I hop between modules, traces bright,
I sketch small pads in circuit light,
Neighbors tell me where to flow,
Paths and pads in tidy row,
A QR garden where electrons bite 🐰🔧

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The PR title 'feat: data modules circuit-board' directly and clearly describes the main change: adding a new 'circuit-board' style to the data modules component, which is the primary feature across all modified files.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/circuit-board

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 `@packages/react-qr-code/src/components/data-modules.test.tsx`:
- Around line 84-86: The test is asserting the wrong SVG path index: it
currently checks paths[0] (the traces path) for absence of pad geometry; change
the assertion to check paths[1] (the pads path) instead so the test actually
verifies that interior junctions (e.g. module at 10.5,10.5) are omitted from
pads—use the same matcher with dataModulesUtils.circuitBoardPad(10.5, 10.5,
CIRCUIT_BOARD_PAD_RADIUS) but target paths[1] rather than paths[0].
🪄 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: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 7f3fa094-930c-495a-8ed4-0aac81fea39d

📥 Commits

Reviewing files that changed from the base of the PR and between 141c21b and 04ed30a.

📒 Files selected for processing (10)
  • .changeset/silver-traces-turn.md
  • apps/docs/public/llms-full.txt
  • apps/docs/src/app/data-modules-settings/page.tsx
  • apps/docs/src/components/demo/data-modules.tsx
  • packages/react-qr-code/src/components/data-modules.test.tsx
  • packages/react-qr-code/src/components/data-modules.tsx
  • packages/react-qr-code/src/constants.ts
  • packages/react-qr-code/src/types/lib.ts
  • packages/react-qr-code/src/utils/data-modules.test.ts
  • packages/react-qr-code/src/utils/data-modules.ts

Comment thread packages/react-qr-code/src/components/data-modules.test.tsx Outdated
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 `@apps/docs/src/components/demo/main-settings.tsx`:
- Around line 24-27: The handler is currently writing NaN or empty-string into
numeric QR props; update the setQrProps update in the event handler (referencing
setQrProps, qrProps, e.target, key) so that for type === 'number' you parse the
value (const parsed = Number(value)) and only assign parsed when value !== ''
and Number.isFinite(parsed); otherwise remove or set the numeric property to
undefined (or leave the previous value) to avoid storing '' or NaN in qrProps.
🪄 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: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 977dde4c-db49-4bc7-bb66-02e78a44bad6

📥 Commits

Reviewing files that changed from the base of the PR and between 04ed30a and 48ceee7.

📒 Files selected for processing (3)
  • apps/docs/src/components/demo/main-settings.tsx
  • packages/react-qr-code/src/components/data-modules.test.tsx
  • packages/react-qr-code/src/components/data-modules.tsx
✅ Files skipped from review due to trivial changes (1)
  • packages/react-qr-code/src/components/data-modules.test.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
  • packages/react-qr-code/src/components/data-modules.tsx

Comment thread apps/docs/src/components/demo/main-settings.tsx
Add microchip finder pattern inner style, square corners and smaller
isolated cell for circuit-board, alphabetised demo style lists.
Collapse the <g>-with-two-paths circuit-board renderer into the
single filled <path> shared by every other style. Traces become thin
filled rectangles extended traceHalf past both endpoints so junction
cells fill cleanly under nonzero fill rule. Pad circle is wound
clockwise to match.
@LGLabGreg LGLabGreg merged commit 7e489c5 into main May 9, 2026
5 checks passed
@LGLabGreg LGLabGreg deleted the feat/circuit-board branch May 9, 2026 14:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant