Lovable sync 1779811798#465
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
|
Warning Review limit reached
More reviews will be available in 34 minutes and 51 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the 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 include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (13)
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
|
This pull request has been ignored for the connected project Preview Branches by Supabase. |
There was a problem hiding this comment.
Pull request overview
This PR standardizes product grid “column density” behavior across multiple pages by centralizing column CSS classes and the localStorage key used to persist the chosen column count, and adds new unit/E2E coverage and test hooks (data-testid) for the selector and grids.
Changes:
- Centralizes
STORAGE_KEY(grid column persistence) and introducesCOLUMN_CLASSESfor consistent responsive grid layouts. - Updates multiple pages/hooks to persist
gridColumnsusing the shared storage key and refines responsive clamping logic. - Adds
data-testidhooks plus new unit tests and a new Playwright spec for column selector behavior.
Reviewed changes
Copilot reviewed 13 out of 13 changed files in this pull request and generated 15 comments.
Show a summary per file
| File | Description |
|---|---|
| src/pages/products/FavoritesPage.tsx | Switches to shared STORAGE_KEY import for grid columns. |
| src/pages/filters/useFiltersPageState.ts | Persists grid columns to shared storage key and adds viewport-based clamping. |
| src/pages/collections/useCollectionsPageState.ts | Persists grid columns to shared storage key. |
| src/hooks/products/useCatalogState.ts | Persists grid columns to shared storage key and updates viewport-based clamping. |
| src/components/replenishments/ReplenishmentProductGrid.tsx | Persists grid columns to shared storage key. |
| src/components/replenishments/grid-layout.ts | Reuses centralized COLUMN_CLASSES for grid column classes. |
| src/components/products/VirtualizedProductGrid.tsx | Adds data-testid hooks for container/rows to support E2E. |
| src/components/products/ProductGrid.tsx | Reuses centralized COLUMN_CLASSES instead of local mapping. |
| src/components/products/LayoutPopover.tsx | Adds data-testid to trigger; adjusts popover width. |
| src/components/products/ColumnSelector.tsx | Exposes STORAGE_KEY, getDefaultColumns, and COLUMN_CLASSES; updates selector behavior & test hooks. |
| src/components/products/ColumnSelector.test.tsx | Adds new unit tests for ColumnSelector behavior/accessibility/persistence. |
| src/components/novelties/NoveltyProductGrid.tsx | Reuses centralized COLUMN_CLASSES and shared storage persistence. |
| e2e/column-selector.spec.ts | Adds Playwright spec for column switching, persistence, accessibility, and visual snapshots. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| 8: "grid-cols-3 sm:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8", | ||
| }; | ||
| // Usando as classes centralizadas para garantir consistência em todos os grids do sistema. | ||
| const columnClasses = COLUMN_CLASSES; |
| @@ -0,0 +1,103 @@ | |||
| import { render, screen, fireEvent, waitFor, act } from "@testing-library/react"; | |||
| const options = [3, 4, 5, 6, 8]; | ||
| options.forEach(cols => { | ||
| expect(screen.getByRole("radio", { name: `${cols} colunas` })).toBeInTheDocument(); | ||
| }); |
| [3, 4, 5, 6, 8].forEach(cols => { | ||
| expect(screen.getByRole("radio", { name: `${cols} colunas` })).toBeInTheDocument(); | ||
| }); |
| [3, 4, 5, 6, 8].forEach(cols => { | ||
| expect(screen.getByRole("radio", { name: `${cols} colunas` })).toBeInTheDocument(); | ||
| }); |
| // Responsive clamp: force appropriate columns on small screens | ||
| useEffect(() => { | ||
| const handleResize = () => { | ||
| const w = window.innerWidth; | ||
| if (w < 768 && gridColumns > 3) { | ||
| setGridColumns(3); | ||
| let maxCols: ColumnCount = 3; | ||
| if (w >= 1536) maxCols = 8; | ||
| else if (w >= 1280) maxCols = 6; | ||
| else if (w >= 1024) maxCols = 5; | ||
| else if (w >= 768) maxCols = 4; |
| if (gridColumns > maxCols) { | ||
| setGridColumns(maxCols); | ||
| } |
| const renderSelector = (value: any = 5, onChange = vi.fn()) => { | ||
| return render( | ||
| <TooltipProvider> | ||
| <ColumnSelector value={value} onChange={onChange} /> | ||
| </TooltipProvider> |
| await page.getByTestId("layout-popover-trigger").click(); | ||
|
|
||
| // Test 3 columns | ||
| const option3 = page.getByTestId("column-option-3"); | ||
| await option3.click(); |
| // Stabilize UI for snapshots (freeze animations, hide loaders) | ||
| await page.addInitScript(() => { | ||
| const style = document.createElement('style'); | ||
| style.innerHTML = ` |
adm01-debug
force-pushed
the
lovable-sync-1779811798
branch
from
ffcd32c to
c24c2a1
Compare
📋 Descrição
🎯 Tipo de mudança
🔗 Issues relacionadas
Closes #
Refs #
🌐 Sistemas afetados
🧪 Como testar
✅ Checklist pré-merge
Qualidade
npx tsc --noEmitpassa sem errosnpm run test)Segurança
console.logcom payloads sensíveis (usarlogger.*)Documentação
mem://) se a mudança afetar arquitetura/regras_backup_*_YYYYMMDDse destrutivasUI
📸 Screenshots (se UI)
🔄 Plano de rollback
Summary by cubic
Made the product grid column selector consistent, accessible, and persistent across pages. Centralized responsive grid classes and added unit/E2E coverage for reliability.
localStorageunderproduct-grid-columns, with safe fallback viagetDefaultColumns.COLUMN_CLASSESshared by Products, Favorites, Novelties, Replenishments, Collections, and Filters; includes viewport-based resize clamping.aria-checked, keyboard support (Enter/Space), and clear focus styles.data-testidhooks on the layout trigger and grid containers/rows.Written for commit c24c2a1. Summary will update on new commits. Review in cubic