Repository navigation
feat(herbatika): add fullscreen product gallery - #481
Conversation
|
Review changes with Changed Files |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Run ID: 📒 Files selected for processing (1)
📜 Recent review details
|
Greptile SummaryThis PR adds a fullscreen product gallery to Herbatika product pages. The main changes are:
Confidence Score: 5/5This looks safe to merge.
Important Files Changed
Reviews (5): Last reviewed commit: "fix(herbatika): lazy-load inactive galle..." | Re-trigger Greptile |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
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
`@apps/herbatika/src/components/product-detail/sections/product-detail-gallery-lightbox.tsx`:
- Around line 122-123: The Carousel.Previous and Carousel.Next controls in
product-detail-gallery-lightbox.tsx are using a hard-coded bg-white value
instead of the app’s tokenized surface/background utility. Update both button
classNames to use the matching Herbatika token-based background class so they
follow the theme in branded and dark variants, keeping the rest of the Carousel
button styling unchanged.
In
`@apps/herbatika/src/components/product-detail/sections/product-detail-media-column.tsx`:
- Around line 227-230: The “Spustiť chat” CTA in product-detail-media-column.tsx
is pointing to the wrong destination; update the LinkButton rendered with
NextLink so it routes to the actual contact/chat flow instead of "/". Use the
existing CTA setup in this component to locate the LinkButton and restore the
intended chat entry target, keeping the label and destination consistent.
- Around line 78-101: The lightbox open trigger is only applied in the fallback
Button path, so gallery items that render through item.content lose fullscreen
access. Update product-detail-media-column’s gallery item rendering so the same
open handlers (handleMainImageClick, handleMainImagePointerDown,
handleMainImagePointerUp, cancelPendingOpen) are available for both item.content
and the fallback image branch, either by wrapping both branches in a shared
interactive container or by moving the trigger logic to a wrapper that always
renders.
🪄 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: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: b5f57721-2191-411e-bd5c-6069454e8c37
📒 Files selected for processing (2)
apps/herbatika/src/components/product-detail/sections/product-detail-gallery-lightbox.tsxapps/herbatika/src/components/product-detail/sections/product-detail-media-column.tsx
📜 Review details
⏰ Context from checks skipped due to timeout. (3)
- GitHub Check: Greptile Review
- GitHub Check: main
- GitHub Check: Analyze (javascript-typescript)
⚠️ CI failures not shown inline (1)
GitHub Check: Kilo Code Review: Kilo Code Review failed
Conclusion: failure
Review failed: The message could not be delivered
🧰 Additional context used
📓 Path-based instructions (9)
apps/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Import UI components using the
@techsio/ui-kitnamespace, not@libs/ui, for runtime apps
Files:
apps/herbatika/src/components/product-detail/sections/product-detail-gallery-lightbox.tsxapps/herbatika/src/components/product-detail/sections/product-detail-media-column.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Run Biome linting and formatting only on changed files using 'bunx biome check --write path/to/file'
Files:
apps/herbatika/src/components/product-detail/sections/product-detail-gallery-lightbox.tsxapps/herbatika/src/components/product-detail/sections/product-detail-media-column.tsx
apps/herbatika/**
📄 CodeRabbit inference engine (AGENTS.md)
apps/herbatika/**: Read apps/herbatika/AGENTS.md before editing Herbatika app and follow its specific configuration which overrides root assumptions
Herbatika app runs on http://localhost:3001 and routes work through libs/ui/skills and libs/storefront-data/skills workflows
Files:
apps/herbatika/src/components/product-detail/sections/product-detail-gallery-lightbox.tsxapps/herbatika/src/components/product-detail/sections/product-detail-media-column.tsx
apps/**/!(medusa-be)/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use modern React patterns and React 19 for frontend applications in the monorepo
Files:
apps/herbatika/src/components/product-detail/sections/product-detail-gallery-lightbox.tsxapps/herbatika/src/components/product-detail/sections/product-detail-media-column.tsx
apps/herbatika/src/**/*.{jsx,tsx}
📄 CodeRabbit inference engine (apps/herbatika/AGENTS.md)
apps/herbatika/src/**/*.{jsx,tsx}: Use internal UI primitives/components from@techsio/ui-kitinstead of native controls in app code. Avoid raw , , , <textarea>, , inline SVG icons. For Next.js links/images, prefer the UI-kit component with next/link or next/image adapter support when that component exposes it. Files: apps/herbatika/src/components/product-detail/sections/product-detail-gallery-lightbox.tsx apps/herbatika/src/components/product-detail/sections/product-detail-media-column.tsx apps/herbatika/src/**/*.{jsx,tsx,css} 📄 CodeRabbit inference engine (apps/herbatika/AGENTS.md) Use token-based utility classes instead of raw Tailwind palette/spacing values. Prefer tokenized classes like p-200, mt-300, gap-150, text-success, bg-danger over raw Tailwind values like p-4, mt-8, bg-red-600. Files: apps/herbatika/src/components/product-detail/sections/product-detail-gallery-lightbox.tsx apps/herbatika/src/components/product-detail/sections/product-detail-media-column.tsx apps/herbatika/src/** 📄 CodeRabbit inference engine (apps/herbatika/AGENTS.md) apps/herbatika/src/**: Put Herbatika visual differences in src/styles/tokens/**; avoid JSX className overrides that duplicate UI-kit component props/tokens. Use kebab-case for file names and PascalCase for React component names in Herbatika. Files: apps/herbatika/src/components/product-detail/sections/product-detail-gallery-lightbox.tsx apps/herbatika/src/components/product-detail/sections/product-detail-media-column.tsx apps/herbatika/src/**/*.{ts,tsx} 📄 CodeRabbit inference engine (apps/herbatika/AGENTS.md) apps/herbatika/src/**/*.{ts,tsx}: Use explicit package subpath imports from @techsio/storefront-data. Do not import from package roots or dist/. Keep server-only and client-only boundaries explicit in Herbatika app code; use 'server-only' and 'getServerQueryClient' for Server Component/SSR data paths. Files: apps/herbatika/src/components/product-detail/sections/product-detail-gallery-lightbox.tsx apps/herbatika/src/components/product-detail/sections/product-detail-media-column.tsx apps/herbatika/src/**/*.{ts,tsx,js,jsx} 📄 CodeRabbit inference engine (apps/herbatika/AGENTS.md) Keep source files at a soft limit of ~200 lines; exceeding this should trigger refactor consideration. Files: apps/herbatika/src/components/product-detail/sections/product-detail-gallery-lightbox.tsx apps/herbatika/src/components/product-detail/sections/product-detail-media-column.tsx 🧠 Learnings (2) 📚 Learning: 2025-12-16T19:45:17.746Z Learnt from: BleedingDev Repo: NMIT-WR/new-engine PR: 207 File: libs/ui/src/molecules/select.tsx:50-50 Timestamp: 2025-12-16T19:45:17.746Z Learning: When reviewing Tailwind classes in TSX/TS files, prefer using square brackets for arbitrary CSS values and complex expressions. Specifically: - Do not use the parentheses syntax (z-(--z-index)) for anything beyond simple CSS variable references; this syntax auto-wraps in var() and cannot handle calc or complex functions. - Use the square brackets syntax (e.g., h-[calc(var(--available-height)-var(--spacing-content))]) for calc expressions, var with calc, and any complex CSS expressions. This rule applies broadly to Tailwind v4 usage in TSX code across the project. Applied to files: apps/herbatika/src/components/product-detail/sections/product-detail-gallery-lightbox.tsx apps/herbatika/src/components/product-detail/sections/product-detail-media-column.tsx 📚 Learning: 2026-06-14T17:05:00.817Z Learnt from: KaiUweCZE Repo: TechsioCZ/new-engine PR: 442 File: apps/herbatika/src/components/reviews/product-review-token-page.tsx:36-42 Timestamp: 2026-06-14T17:05:00.817Z Learning: When reviewing code in apps/herbatika that calls `useProducts(input: ProductListInput, options?)`, treat `enabled` provided inside the first argument (`input`) as intentional and valid. The `ProductListInput` type includes an optional `enabled?: boolean` (via `BaseStorefrontProductListInput & { enabled?: boolean }`), and the hook infrastructure strips `enabled` before constructing the HTTP request and query key (following the same `stripListInput` behavior used elsewhere). Therefore, do NOT flag `useProducts({ enabled: ... , ... }, options)` as a contract violation; `enabled` belongs in the input object, not in the `options` argument. Applied to files: apps/herbatika/src/components/product-detail/sections/product-detail-gallery-lightbox.tsx apps/herbatika/src/components/product-detail/sections/product-detail-media-column.tsx
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/herbatika/src/components/product-detail/sections/product-detail-media-column.tsx (1)
32-120: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winrefactor: extract the gallery item preparation
This component is now 243 lines, and the new state/handler/map block is a good extraction boundary. Consider moving the lightbox trigger state and
galleryItemsWithFallbackconstruction into a small hook/helper to keep the Herbatika source file near the soft limit. As per coding guidelines,apps/herbatika/src/**/*.{ts,tsx}: Keep source files at a soft limit of ~200 lines; exceeding this should trigger refactor consideration.🤖 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 `@apps/herbatika/src/components/product-detail/sections/product-detail-media-column.tsx` around lines 32 - 120, The new state, pointer handlers, and galleryItemsWithFallback mapping in product-detail-media-column are pushing the component beyond the soft file-size limit. Extract the lightbox selection logic and gallery preparation into a small hook or helper (for example around handleOpenLightbox, handleMainImagePointerDown, and galleryItemsWithFallback) so the ProductDetailMediaColumn component stays focused and closer to the ~200-line guideline.Source: Coding guidelines
🤖 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.
Outside diff comments:
In
`@apps/herbatika/src/components/product-detail/sections/product-detail-media-column.tsx`:
- Around line 32-120: The new state, pointer handlers, and
galleryItemsWithFallback mapping in product-detail-media-column are pushing the
component beyond the soft file-size limit. Extract the lightbox selection logic
and gallery preparation into a small hook or helper (for example around
handleOpenLightbox, handleMainImagePointerDown, and galleryItemsWithFallback) so
the ProductDetailMediaColumn component stays focused and closer to the ~200-line
guideline.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: e2d284d0-cb5d-40c2-9dfd-beaa42791c45
📒 Files selected for processing (4)
apps/herbatika/src/components/homepage/sections/homepage-hero-carousel-section.tsxapps/herbatika/src/components/product-detail.tsxapps/herbatika/src/components/product-detail/sections/product-detail-gallery-lightbox.tsxapps/herbatika/src/components/product-detail/sections/product-detail-media-column.tsx
📜 Review details
⏰ Context from checks skipped due to timeout. (2)
- GitHub Check: Greptile Review
- GitHub Check: main
⚠️ CI failures not shown inline (1)
GitHub Check: Kilo Code Review: Kilo Code Review failed
Conclusion: failure
Review failed: The message could not be delivered
🧰 Additional context used
📓 Path-based instructions (9)
apps/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Import UI components using the
@techsio/ui-kitnamespace, not@libs/ui, for runtime apps
Files:
apps/herbatika/src/components/product-detail.tsxapps/herbatika/src/components/homepage/sections/homepage-hero-carousel-section.tsxapps/herbatika/src/components/product-detail/sections/product-detail-gallery-lightbox.tsxapps/herbatika/src/components/product-detail/sections/product-detail-media-column.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Run Biome linting and formatting only on changed files using 'bunx biome check --write path/to/file'
Files:
apps/herbatika/src/components/product-detail.tsxapps/herbatika/src/components/homepage/sections/homepage-hero-carousel-section.tsxapps/herbatika/src/components/product-detail/sections/product-detail-gallery-lightbox.tsxapps/herbatika/src/components/product-detail/sections/product-detail-media-column.tsx
apps/herbatika/**
📄 CodeRabbit inference engine (AGENTS.md)
apps/herbatika/**: Read apps/herbatika/AGENTS.md before editing Herbatika app and follow its specific configuration which overrides root assumptions
Herbatika app runs on http://localhost:3001 and routes work through libs/ui/skills and libs/storefront-data/skills workflows
Files:
apps/herbatika/src/components/product-detail.tsxapps/herbatika/src/components/homepage/sections/homepage-hero-carousel-section.tsxapps/herbatika/src/components/product-detail/sections/product-detail-gallery-lightbox.tsxapps/herbatika/src/components/product-detail/sections/product-detail-media-column.tsx
apps/**/!(medusa-be)/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use modern React patterns and React 19 for frontend applications in the monorepo
Files:
apps/herbatika/src/components/product-detail.tsxapps/herbatika/src/components/homepage/sections/homepage-hero-carousel-section.tsxapps/herbatika/src/components/product-detail/sections/product-detail-gallery-lightbox.tsxapps/herbatika/src/components/product-detail/sections/product-detail-media-column.tsx
apps/herbatika/src/**/*.{jsx,tsx}
📄 CodeRabbit inference engine (apps/herbatika/AGENTS.md)
apps/herbatika/src/**/*.{jsx,tsx}: Use internal UI primitives/components from@techsio/ui-kitinstead of native controls in app code. Avoid raw , , , <textarea>, , inline SVG icons. For Next.js links/images, prefer the UI-kit component with next/link or next/image adapter support when that component exposes it. Files: apps/herbatika/src/components/product-detail.tsx apps/herbatika/src/components/homepage/sections/homepage-hero-carousel-section.tsx apps/herbatika/src/components/product-detail/sections/product-detail-gallery-lightbox.tsx apps/herbatika/src/components/product-detail/sections/product-detail-media-column.tsx apps/herbatika/src/**/*.{jsx,tsx,css} 📄 CodeRabbit inference engine (apps/herbatika/AGENTS.md) Use token-based utility classes instead of raw Tailwind palette/spacing values. Prefer tokenized classes like p-200, mt-300, gap-150, text-success, bg-danger over raw Tailwind values like p-4, mt-8, bg-red-600. Files: apps/herbatika/src/components/product-detail.tsx apps/herbatika/src/components/homepage/sections/homepage-hero-carousel-section.tsx apps/herbatika/src/components/product-detail/sections/product-detail-gallery-lightbox.tsx apps/herbatika/src/components/product-detail/sections/product-detail-media-column.tsx apps/herbatika/src/** 📄 CodeRabbit inference engine (apps/herbatika/AGENTS.md) apps/herbatika/src/**: Put Herbatika visual differences in src/styles/tokens/**; avoid JSX className overrides that duplicate UI-kit component props/tokens. Use kebab-case for file names and PascalCase for React component names in Herbatika. Files: apps/herbatika/src/components/product-detail.tsx apps/herbatika/src/components/homepage/sections/homepage-hero-carousel-section.tsx apps/herbatika/src/components/product-detail/sections/product-detail-gallery-lightbox.tsx apps/herbatika/src/components/product-detail/sections/product-detail-media-column.tsx apps/herbatika/src/**/*.{ts,tsx} 📄 CodeRabbit inference engine (apps/herbatika/AGENTS.md) apps/herbatika/src/**/*.{ts,tsx}: Use explicit package subpath imports from @techsio/storefront-data. Do not import from package roots or dist/. Keep server-only and client-only boundaries explicit in Herbatika app code; use 'server-only' and 'getServerQueryClient' for Server Component/SSR data paths. Files: apps/herbatika/src/components/product-detail.tsx apps/herbatika/src/components/homepage/sections/homepage-hero-carousel-section.tsx apps/herbatika/src/components/product-detail/sections/product-detail-gallery-lightbox.tsx apps/herbatika/src/components/product-detail/sections/product-detail-media-column.tsx apps/herbatika/src/**/*.{ts,tsx,js,jsx} 📄 CodeRabbit inference engine (apps/herbatika/AGENTS.md) Keep source files at a soft limit of ~200 lines; exceeding this should trigger refactor consideration. Files: apps/herbatika/src/components/product-detail.tsx apps/herbatika/src/components/homepage/sections/homepage-hero-carousel-section.tsx apps/herbatika/src/components/product-detail/sections/product-detail-gallery-lightbox.tsx apps/herbatika/src/components/product-detail/sections/product-detail-media-column.tsx 🧠 Learnings (2) 📚 Learning: 2025-12-16T19:45:17.746Z Learnt from: BleedingDev Repo: NMIT-WR/new-engine PR: 207 File: libs/ui/src/molecules/select.tsx:50-50 Timestamp: 2025-12-16T19:45:17.746Z Learning: When reviewing Tailwind classes in TSX/TS files, prefer using square brackets for arbitrary CSS values and complex expressions. Specifically: - Do not use the parentheses syntax (z-(--z-index)) for anything beyond simple CSS variable references; this syntax auto-wraps in var() and cannot handle calc or complex functions. - Use the square brackets syntax (e.g., h-[calc(var(--available-height)-var(--spacing-content))]) for calc expressions, var with calc, and any complex CSS expressions. This rule applies broadly to Tailwind v4 usage in TSX code across the project. Applied to files: apps/herbatika/src/components/product-detail.tsx apps/herbatika/src/components/homepage/sections/homepage-hero-carousel-section.tsx apps/herbatika/src/components/product-detail/sections/product-detail-gallery-lightbox.tsx apps/herbatika/src/components/product-detail/sections/product-detail-media-column.tsx 📚 Learning: 2026-06-14T17:05:00.817Z Learnt from: KaiUweCZE Repo: TechsioCZ/new-engine PR: 442 File: apps/herbatika/src/components/reviews/product-review-token-page.tsx:36-42 Timestamp: 2026-06-14T17:05:00.817Z Learning: When reviewing code in apps/herbatika that calls `useProducts(input: ProductListInput, options?)`, treat `enabled` provided inside the first argument (`input`) as intentional and valid. The `ProductListInput` type includes an optional `enabled?: boolean` (via `BaseStorefrontProductListInput & { enabled?: boolean }`), and the hook infrastructure strips `enabled` before constructing the HTTP request and query key (following the same `stripListInput` behavior used elsewhere). Therefore, do NOT flag `useProducts({ enabled: ... , ... }, options)` as a contract violation; `enabled` belongs in the input object, not in the `options` argument. Applied to files: apps/herbatika/src/components/product-detail.tsx apps/herbatika/src/components/homepage/sections/homepage-hero-carousel-section.tsx apps/herbatika/src/components/product-detail/sections/product-detail-gallery-lightbox.tsx apps/herbatika/src/components/product-detail/sections/product-detail-media-column.tsx 🔇 Additional comments (5) apps/herbatika/src/components/homepage/sections/homepage-hero-carousel-section.tsx (2) 127-131: Formatting-only change: multi-line generic type annotation improves readability. LGTM! 161-170: Formatting-only change: prop reordering for consistency. LGTM! apps/herbatika/src/components/product-detail.tsx (1) 26-28: LGTM! apps/herbatika/src/components/product-detail/sections/product-detail-gallery-lightbox.tsx (1) 65-67: LGTM! Also applies to: 90-90, 121-125 apps/herbatika/src/components/product-detail/sections/product-detail-media-column.tsx (1) 189-195: LGTM! Also applies to: 233-233
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
`@apps/herbatika/src/components/product-detail/sections/use-product-detail-gallery-state.tsx`:
- Around line 63-73: The gallery image fallback in useProductDetailGalleryState
is eagerly loading every mapped PDP slide, which should only happen for the
active/visible image. Update the FallbackImage props so loading is conditional
rather than always eager, using the existing active-slide logic in this hook
(and matching the lightbox behavior) to keep only the current image prioritized
while the rest load lazily.
🪄 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: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 99808738-7775-4ea1-bee6-7f150c4ec767
📒 Files selected for processing (2)
apps/herbatika/src/components/product-detail/sections/product-detail-media-column.tsxapps/herbatika/src/components/product-detail/sections/use-product-detail-gallery-state.tsx
📜 Review details
⏰ Context from checks skipped due to timeout. (1)
- GitHub Check: main
⚠️ CI failures not shown inline (1)
GitHub Check: Kilo Code Review: Kilo Code Review failed
Conclusion: failure
Review failed: The message could not be delivered
🧰 Additional context used
📓 Path-based instructions (9)
apps/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Import UI components using the
@techsio/ui-kitnamespace, not@libs/ui, for runtime apps
Files:
apps/herbatika/src/components/product-detail/sections/use-product-detail-gallery-state.tsxapps/herbatika/src/components/product-detail/sections/product-detail-media-column.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Run Biome linting and formatting only on changed files using 'bunx biome check --write path/to/file'
Files:
apps/herbatika/src/components/product-detail/sections/use-product-detail-gallery-state.tsxapps/herbatika/src/components/product-detail/sections/product-detail-media-column.tsx
apps/herbatika/**
📄 CodeRabbit inference engine (AGENTS.md)
apps/herbatika/**: Read apps/herbatika/AGENTS.md before editing Herbatika app and follow its specific configuration which overrides root assumptions
Herbatika app runs on http://localhost:3001 and routes work through libs/ui/skills and libs/storefront-data/skills workflows
Files:
apps/herbatika/src/components/product-detail/sections/use-product-detail-gallery-state.tsxapps/herbatika/src/components/product-detail/sections/product-detail-media-column.tsx
apps/**/!(medusa-be)/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use modern React patterns and React 19 for frontend applications in the monorepo
Files:
apps/herbatika/src/components/product-detail/sections/use-product-detail-gallery-state.tsxapps/herbatika/src/components/product-detail/sections/product-detail-media-column.tsx
apps/herbatika/src/**/*.{jsx,tsx}
📄 CodeRabbit inference engine (apps/herbatika/AGENTS.md)
apps/herbatika/src/**/*.{jsx,tsx}: Use internal UI primitives/components from@techsio/ui-kitinstead of native controls in app code. Avoid raw , , , <textarea>, , inline SVG icons. For Next.js links/images, prefer the UI-kit component with next/link or next/image adapter support when that component exposes it. Files: apps/herbatika/src/components/product-detail/sections/use-product-detail-gallery-state.tsx apps/herbatika/src/components/product-detail/sections/product-detail-media-column.tsx apps/herbatika/src/**/*.{jsx,tsx,css} 📄 CodeRabbit inference engine (apps/herbatika/AGENTS.md) Use token-based utility classes instead of raw Tailwind palette/spacing values. Prefer tokenized classes like p-200, mt-300, gap-150, text-success, bg-danger over raw Tailwind values like p-4, mt-8, bg-red-600. Files: apps/herbatika/src/components/product-detail/sections/use-product-detail-gallery-state.tsx apps/herbatika/src/components/product-detail/sections/product-detail-media-column.tsx apps/herbatika/src/** 📄 CodeRabbit inference engine (apps/herbatika/AGENTS.md) apps/herbatika/src/**: Put Herbatika visual differences in src/styles/tokens/**; avoid JSX className overrides that duplicate UI-kit component props/tokens. Use kebab-case for file names and PascalCase for React component names in Herbatika. Files: apps/herbatika/src/components/product-detail/sections/use-product-detail-gallery-state.tsx apps/herbatika/src/components/product-detail/sections/product-detail-media-column.tsx apps/herbatika/src/**/*.{ts,tsx} 📄 CodeRabbit inference engine (apps/herbatika/AGENTS.md) apps/herbatika/src/**/*.{ts,tsx}: Use explicit package subpath imports from @techsio/storefront-data. Do not import from package roots or dist/. Keep server-only and client-only boundaries explicit in Herbatika app code; use 'server-only' and 'getServerQueryClient' for Server Component/SSR data paths. Files: apps/herbatika/src/components/product-detail/sections/use-product-detail-gallery-state.tsx apps/herbatika/src/components/product-detail/sections/product-detail-media-column.tsx apps/herbatika/src/**/*.{ts,tsx,js,jsx} 📄 CodeRabbit inference engine (apps/herbatika/AGENTS.md) Keep source files at a soft limit of ~200 lines; exceeding this should trigger refactor consideration. Files: apps/herbatika/src/components/product-detail/sections/use-product-detail-gallery-state.tsx apps/herbatika/src/components/product-detail/sections/product-detail-media-column.tsx 🧠 Learnings (2) 📚 Learning: 2025-12-16T19:45:17.746Z Learnt from: BleedingDev Repo: NMIT-WR/new-engine PR: 207 File: libs/ui/src/molecules/select.tsx:50-50 Timestamp: 2025-12-16T19:45:17.746Z Learning: When reviewing Tailwind classes in TSX/TS files, prefer using square brackets for arbitrary CSS values and complex expressions. Specifically: - Do not use the parentheses syntax (z-(--z-index)) for anything beyond simple CSS variable references; this syntax auto-wraps in var() and cannot handle calc or complex functions. - Use the square brackets syntax (e.g., h-[calc(var(--available-height)-var(--spacing-content))]) for calc expressions, var with calc, and any complex CSS expressions. This rule applies broadly to Tailwind v4 usage in TSX code across the project. Applied to files: apps/herbatika/src/components/product-detail/sections/use-product-detail-gallery-state.tsx apps/herbatika/src/components/product-detail/sections/product-detail-media-column.tsx 📚 Learning: 2026-06-14T17:05:00.817Z Learnt from: KaiUweCZE Repo: TechsioCZ/new-engine PR: 442 File: apps/herbatika/src/components/reviews/product-review-token-page.tsx:36-42 Timestamp: 2026-06-14T17:05:00.817Z Learning: When reviewing code in apps/herbatika that calls `useProducts(input: ProductListInput, options?)`, treat `enabled` provided inside the first argument (`input`) as intentional and valid. The `ProductListInput` type includes an optional `enabled?: boolean` (via `BaseStorefrontProductListInput & { enabled?: boolean }`), and the hook infrastructure strips `enabled` before constructing the HTTP request and query key (following the same `stripListInput` behavior used elsewhere). Therefore, do NOT flag `useProducts({ enabled: ... , ... }, options)` as a contract violation; `enabled` belongs in the input object, not in the `options` argument. Applied to files: apps/herbatika/src/components/product-detail/sections/use-product-detail-gallery-state.tsx apps/herbatika/src/components/product-detail/sections/product-detail-media-column.tsx 🔇 Additional comments (1) apps/herbatika/src/components/product-detail/sections/product-detail-media-column.tsx (1) 12-12: LGTM! Also applies to: 29-60, 101-107, 145-145
|
🎉 This PR is included in version 0.19.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Summary
Adds a fullscreen product gallery/lightbox to PDP images.
Task
Notion: https://www.notion.so/pegak/Galerie-na-product-detailu-38b36e86b6ce80fca851cd1344efd705?v=36536e86b6ce805ca18a000cce0316d2&source=copy_link
Inspiration
Chakra UI lightbox carousel pattern:
https://chakra-ui.com/docs/components/carousel#lightbox
Summary by CodeRabbit