Support grid layouts in the STACK flow component

[DonOmalVindula]

Purpose

The STACK flow component in @thunderid/react always renders its children as a flex row/column, so layouts like a 2 x 2 button grid (four login options, two per row) are impossible even though the EmbeddedFlowComponent.items property ("Number of items across the main axis (for Stack grid-like layouts)") already exists in @thunderid/javascript. This PR makes the renderer honor items.

Approach

• In AuthOptionFactory's Stack case, items is the number of slots across the main axis and direction picks that axis: row (default) makes it the column count (items: 2 with four buttons renders a 2 x 2 grid), and column makes it the row count with children flowing into further columns.
• Grid mode requires items >= 2. Stacks with a single slot or no items keep the existing flex layout unchanged, so flows authored before this change render exactly as before.
• items is parsed defensively from the SDK's string | number type: malformed values ("2invalid"), zero, and negatives fall back to flex, and the slot count is clamped so a mistyped value cannot render thousands of cells.
• These are the same semantics as the ThunderID flow builder canvas and the product Gate renderer, which share a getStackGridSx helper in the companion PR.

Related Issues

• Refs Unable to create a 2 x 2 button grid layout using Stack component thunderid#3703

Related PRs

• Companion Gate/renderer fix: Support grid layouts in the STACK flow element thunderid#4365

Checklist

• Followed the contribution guidelines.
• Manual test round performed and verified.
• Documentation provided. (Add links if there are any)
• Tests provided. (Add links if there are any)
  • Unit Tests
  • Integration Tests
• Breaking changes. (Fill if applicable)

Security checks

• Followed secure coding standards in WSO2 Secure Coding Guidelines
• Confirmed that this PR doesn't commit any keys, passwords, tokens, usernames, or other secrets.

Summary by CodeRabbit

• New Features

  • Improved stack layouts with responsive CSS grid support.
  • Added configurable row and column arrangements, including reverse directions.
  • Large layout values are safely capped at 12 slots.
  • Invalid or unsupported layout values continue to use the existing flex layout.

• Chores

  • Added ignore rules for Vitest test attachment files.

[coderabbitai]

📝 Walkthrough

Walkthrough

The PR adds bounded CSS Grid rendering for embedded stack components, preserves flex fallback behavior for invalid configurations, adds coverage for the layout variants, and ignores Vitest attachment artifacts.

Changes

Stack grid layout

Layer / File(s)	Summary
Bounded stack grid rendering packages/react/src/components/presentation/auth/AuthOptionFactory.tsx, packages/react/src/components/presentation/auth/__tests__/AuthOptionFactory.test.tsx	The Stack renderer validates and clamps items, selects grid tracks and flow based on direction and justification, preserves flex fallback behavior, and tests the supported cases.

Vitest artifact ignoring

Layer / File(s)	Summary
Vitest attachment ignore rule .gitignore	Adds .vitest-attachments/ to the ignored paths.

Estimated code review effort: 2 (Simple) | ~10 minutes

Suggested reviewers: brionmario

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title is concise and accurately summarizes the main change: adding grid layout support to the STACK flow component.
Description check	✅ Passed	The description matches the required template and includes the key sections, implementation details, issue link, PR link, and checklist.
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.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

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/src/components/presentation/auth/AuthOptionFactory.tsx`:
- Around line 740-743: Update the slot-count validation in the items calculation
to require Number.isInteger(parsedItems) alongside the existing finite and
minimum checks, so fractional values retain the flex fallback before
MAX_STACK_ITEMS clamping. Add a regression case covering a fractional string
such as "2.5" and verify it does not enable grid mode.

🪄 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: 58b7f69a-a964-42a0-ba0c-5ab907f76eec

📥 Commits

Reviewing files that changed from the base of the PR and between adc7ef1 and ba92aa1.

⛔ Files ignored due to path filters (3)

• packages/react/.vitest-attachments/27677941df85b03d5d2cfa78a06ab03580dd9ac6.png is excluded by !**/*.png
• packages/react/.vitest-attachments/3dab8c5a94eed1b7587e7dbb5fed1db2c644801d.png is excluded by !**/*.png
• packages/react/.vitest-attachments/5a7d509e64e503baebcb9f280cb5bd323b6d722e.png is excluded by !**/*.png

📒 Files selected for processing (3)

• .gitignore
• packages/react/src/components/presentation/auth/AuthOptionFactory.tsx
• packages/react/src/components/presentation/auth/__tests__/AuthOptionFactory.test.tsx