Refactor/herbatica UI ux report - #478
Conversation
|
Review changes with Changed Files |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Review limit reached
More reviews will be available in 40 minutes and 51 seconds. Learn how PR review limits work. Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file). ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based credits. 🚦 How do rate limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Run ID: 📒 Files selected for processing (1)
WalkthroughThe PR updates marketing copy, link rendering, hero carousel interaction, product-detail tab state, and catalog status filter normalisation. ChangesHerbatika UI updates
Catalog status filters
Sequence Diagram(s)sequenceDiagram
participant usePageRestoreKey
participant HomepageHeroCarouselSection
participant HeroCarousel
participant CarouselRoot
participant HeroBannerCard
participant NextLink
usePageRestoreKey->>HomepageHeroCarouselSection: increment restoreKey on persisted pageshow
HomepageHeroCarouselSection->>HeroCarousel: pass banners and restoreKey
HeroCarousel->>CarouselRoot: set key={restoreKey} and render slides
HeroCarousel->>HeroBannerCard: attach onClickCapture and onPointerDownCapture
HeroBannerCard->>NextLink: forward capture handlers
CarouselRoot->>HeroCarousel: report drag status changes
HeroCarousel->>HeroBannerCard: prevent navigation after drag
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (3 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
✨ Simplify code
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. Comment |
Greptile SummaryThis PR delivers a set of UI/UX improvements across the Herbatika storefront: fixing carousel drag-to-navigate, making phone numbers tappable links, collapsing the mobile product-detail accordion, and introducing a supported-status-filter allowlist that keeps unknown URL query values from leaking into the catalog API.
Confidence Score: 5/5Safe to merge — changes are well-scoped UI/UX fixes with no risk to data integrity or auth flows. All changes are isolated UI and filter-layer fixes. The drag-suppression logic correctly uses capture-phase events and a ref to avoid stale closures; the status-filter allowlist is applied at every relevant boundary (parser, API params, facet items); the accordion collapsibility and optional section state are handled consistently between the mobile and desktop rendering paths. No files require special attention. Important Files Changed
Flowchart%%{init: {'theme': 'neutral'}}%%
flowchart TD
A[User pointer down on slide] --> B[onPointerDownCapture\ndidDragRef = false]
B --> C{User drags?}
C -- Yes --> D[onDragStatusChange dragging\ndidDragRef = true]
D --> E[Click fires after drag]
E --> F{event.detail === 0?\nkeyboard click?}
F -- Yes --> G[Reset ref, allow navigation]
F -- No --> H{didDragRef === true?}
H -- Yes --> I[preventDefault + stopPropagation\nReset ref — navigation blocked]
H -- No --> J[Allow navigation]
C -- No --> K[Click fires normally]
K --> L[didDragRef === false → allow navigation]
M[User navigates away\nbfcache stores page state] --> N[pageshow event\nevent.persisted = true]
N --> O[setRestoreKey prev + 1]
O --> P[key prop changes on Carousel.Root\nForces full remount]
%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
flowchart TD
A[User pointer down on slide] --> B[onPointerDownCapture\ndidDragRef = false]
B --> C{User drags?}
C -- Yes --> D[onDragStatusChange dragging\ndidDragRef = true]
D --> E[Click fires after drag]
E --> F{event.detail === 0?\nkeyboard click?}
F -- Yes --> G[Reset ref, allow navigation]
F -- No --> H{didDragRef === true?}
H -- Yes --> I[preventDefault + stopPropagation\nReset ref — navigation blocked]
H -- No --> J[Allow navigation]
C -- No --> K[Click fires normally]
K --> L[didDragRef === false → allow navigation]
M[User navigates away\nbfcache stores page state] --> N[pageshow event\nevent.persisted = true]
N --> O[setRestoreKey prev + 1]
O --> P[key prop changes on Carousel.Root\nForces full remount]
Reviews (4): Last reviewed commit: "fix(herbatika): use stable footer link k..." | Re-trigger Greptile |
![greptile-apps[bot]](https://avatars.github.com/in/867647?s=60&v=4){kind=small}
![coderabbitai[bot]](https://avatars.github.com/in/347564?s=60&v=4){kind=small}
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/homepage/sections/homepage-hero-carousel-section.tsx`:
- Around line 119-164: The HeroCarousel click suppression logic is incorrectly
blocking keyboard-initiated activation because didDragRef can remain true after
a drag ends; update handleSlideClickCapture in HeroCarousel to distinguish
keyboard synthetic clicks from pointer clicks, and allow clicks with no pointer
activity (for example by checking the click event’s detail) to proceed while
keeping the drag-prevention behavior for dragged slides.
🪄 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: 0f5d3114-900a-40e1-916b-3428d8cb6f12
📒 Files selected for processing (8)
apps/herbatika/src/assets/benefits/index.tsapps/herbatika/src/components/checkout/checkout-header.tsxapps/herbatika/src/components/herbatika-footer.tsxapps/herbatika/src/components/herbatika-header.tsxapps/herbatika/src/components/homepage/sections/homepage-hero-carousel-section.tsxapps/herbatika/src/components/product-detail.tsxapps/herbatika/src/components/product-detail/sections/product-detail-media-column.tsxapps/herbatika/src/components/product-detail/sections/product-detail-tabs.tsx
💤 Files with no reviewable changes (2)
- apps/herbatika/src/components/product-detail/sections/product-detail-media-column.tsx
- apps/herbatika/src/components/checkout/checkout-header.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.tsxapps/herbatika/src/components/herbatika-footer.tsxapps/herbatika/src/components/product-detail/sections/product-detail-tabs.tsxapps/herbatika/src/components/herbatika-header.tsxapps/herbatika/src/components/homepage/sections/homepage-hero-carousel-section.tsxapps/herbatika/src/assets/benefits/index.ts
**/*.{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/herbatika-footer.tsxapps/herbatika/src/components/product-detail/sections/product-detail-tabs.tsxapps/herbatika/src/components/herbatika-header.tsxapps/herbatika/src/components/homepage/sections/homepage-hero-carousel-section.tsxapps/herbatika/src/assets/benefits/index.ts
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/herbatika-footer.tsxapps/herbatika/src/components/product-detail/sections/product-detail-tabs.tsxapps/herbatika/src/components/herbatika-header.tsxapps/herbatika/src/components/homepage/sections/homepage-hero-carousel-section.tsxapps/herbatika/src/assets/benefits/index.ts
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/herbatika-footer.tsxapps/herbatika/src/components/product-detail/sections/product-detail-tabs.tsxapps/herbatika/src/components/herbatika-header.tsxapps/herbatika/src/components/homepage/sections/homepage-hero-carousel-section.tsxapps/herbatika/src/assets/benefits/index.ts
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/herbatika-footer.tsx apps/herbatika/src/components/product-detail/sections/product-detail-tabs.tsx apps/herbatika/src/components/herbatika-header.tsx apps/herbatika/src/components/homepage/sections/homepage-hero-carousel-section.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/herbatika-footer.tsx apps/herbatika/src/components/product-detail/sections/product-detail-tabs.tsx apps/herbatika/src/components/herbatika-header.tsx apps/herbatika/src/components/homepage/sections/homepage-hero-carousel-section.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/herbatika-footer.tsx apps/herbatika/src/components/product-detail/sections/product-detail-tabs.tsx apps/herbatika/src/components/herbatika-header.tsx apps/herbatika/src/components/homepage/sections/homepage-hero-carousel-section.tsx apps/herbatika/src/assets/benefits/index.ts 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/herbatika-footer.tsx apps/herbatika/src/components/product-detail/sections/product-detail-tabs.tsx apps/herbatika/src/components/herbatika-header.tsx apps/herbatika/src/components/homepage/sections/homepage-hero-carousel-section.tsx apps/herbatika/src/assets/benefits/index.ts 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/herbatika-footer.tsx apps/herbatika/src/components/product-detail/sections/product-detail-tabs.tsx apps/herbatika/src/components/herbatika-header.tsx apps/herbatika/src/components/homepage/sections/homepage-hero-carousel-section.tsx apps/herbatika/src/assets/benefits/index.ts 🧠 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/herbatika-footer.tsx apps/herbatika/src/components/product-detail/sections/product-detail-tabs.tsx apps/herbatika/src/components/herbatika-header.tsx apps/herbatika/src/components/homepage/sections/homepage-hero-carousel-section.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/herbatika-footer.tsx apps/herbatika/src/components/product-detail/sections/product-detail-tabs.tsx apps/herbatika/src/components/herbatika-header.tsx apps/herbatika/src/components/homepage/sections/homepage-hero-carousel-section.tsx apps/herbatika/src/assets/benefits/index.ts 🔇 Additional comments (8) apps/herbatika/src/assets/benefits/index.ts (1) 10-28: LGTM! apps/herbatika/src/components/herbatika-footer.tsx (1) 6-74: LGTM! Also applies to: 121-124, 136-136, 159-167 apps/herbatika/src/components/herbatika-header.tsx (1) 6-6: LGTM! Also applies to: 117-130 apps/herbatika/src/components/product-detail.tsx (1) 26-28: LGTM! apps/herbatika/src/components/product-detail/sections/product-detail-tabs.tsx (1) 15-17: LGTM! Also applies to: 41-41, 66-66, 103-108 apps/herbatika/src/components/homepage/sections/homepage-hero-carousel-section.tsx (3) 21-69: LGTM! 71-117: LGTM! 177-214: LGTM!
There was a problem hiding this comment.
Actionable comments posted: 1
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/herbatika-footer.tsx (1)
111-111: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winrefactor: split
HerbatikaFooterinto smaller sectionsThis file is now 234 lines, so it has drifted past the Herbatika soft limit. Please extract the contact block and/or the navigation/bottom sections into small local components before this grows further. As per coding guidelines, "apps/herbatika/src/**/*.{ts,tsx,js,jsx}: 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/herbatika-footer.tsx` at line 111, HerbatikaFooter has grown past the soft file-size limit, so split the component into smaller local pieces. Refactor HerbatikaFooter by extracting the contact block and/or the navigation/bottom section into separate helper components within the same file or nearby local components, while keeping the existing HerbatikaFooter composition and behavior unchanged.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.
Inline comments:
In `@apps/herbatika/src/components/herbatika-footer.tsx`:
- Line 159: The footer link list is using a presentation value as the React key,
which can remount items on copy edits and collide on duplicate labels. Update
the key in the footer links render inside the herbatika-footer component to use
the stable identifier from the link object, specifically the href property, so
each item keeps a consistent key even if the label changes.
---
Outside diff comments:
In `@apps/herbatika/src/components/herbatika-footer.tsx`:
- Line 111: HerbatikaFooter has grown past the soft file-size limit, so split
the component into smaller local pieces. Refactor HerbatikaFooter by extracting
the contact block and/or the navigation/bottom section into separate helper
components within the same file or nearby local components, while keeping the
existing HerbatikaFooter composition and behavior unchanged.
🪄 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: f9424775-46ae-4221-abd8-ad5ee2d0c1d7
📒 Files selected for processing (6)
apps/herbatika/src/components/category/use-category-facet-items.tsapps/herbatika/src/components/herbatika-footer.tsxapps/herbatika/src/components/homepage/sections/homepage-hero-carousel-section.tsxapps/herbatika/src/lib/storefront/catalog-query-state/params.tsapps/herbatika/src/lib/storefront/catalog-query-state/parsers.tsapps/herbatika/src/lib/storefront/catalog-query-state/status-filters.ts
📜 Review details
⏰ Context from checks skipped due to timeout. (1)
- GitHub Check: Greptile Review
⚠️ CI failures not shown inline (2)
GitHub Actions: CI / main: Refactor/herbatica UI ux report
Conclusion: failure
##[group]❌ > nx run herbatika:lint
�[2m$ biome check�[22m
src/components/homepage/sections/homepage-hero-carousel-section.tsx:155:5 assist/source/useSortedAttributes FIXABLE ━━━━━━━━━━
× The attributes are not sorted.
154 │ return (
> 155 │ <Carousel.Root
│ ^^^^^^^^^^^^^^
> 156 │ aspectRatio="none"
...
> 169 │ }}
> 170 │ >
│ ^
171 │ <Carousel.Slides className={slidesClassName} slides={slides} />
172 │ {hasOverflow ? (
i Safe fix: Sort the JSX props.
158 158 │ key={restoreKey}
159 159 │ loop={hasOverflow}
160 │ - ······size="full"
161 │ - ······slideCount={slides.length}
162 │ - ······slidesPerMove={1}
163 │ - ······slidesPerPage={slidesPerPage}
164 │ - ······spacing={spacing}
165 │ - ······onDragStatusChange={(details)·=>·{
166 │ - ········if·(details.type·===·"dragging")·{
167 │ - ··········didDragRef.current·=·true
168 │ - ········}
169 │ - ······}}
160 │ + ······onDragStatusChange={(details)·=>·{
161 │ + ········if·(details.type·===·"dragging")·{
162 │ + ··········didDragRef.current·=·true
163 │ + ········}
164 │ + ······}}
165 │ + ······size="full"
166 │ + ······slideCount={slides.length}
167 │ + ······slidesPerMove={1}
168 │ + ······slidesPerPage={slidesPerPage}
169 │ + ······spacing={spacing}
170 170 │ >
171 171 │ <Carousel.Slides className={slidesClassName} slides={slides} />
src/components/homepage/sections/homepage-hero-carousel-section.tsx format ━━━━━━━━━━━━━━━━━━━━━━━━━
× Formatter would have printed the following content:
125 125 │ }: HeroCarouselProps) {
126 126 │ const didDragRef = useRef(false)
127 │ - ··const·handleSlidePointerDownCapture:·PointerEventHandler<HTMLAnchorElement>·=
12...
GitHub Actions: CI / 0_main.txt: Refactor/herbatica UI ux report
Conclusion: failure
##[group]❌ > nx run herbatika:lint
�[2m$ biome check�[22m
src/components/homepage/sections/homepage-hero-carousel-section.tsx:155:5 assist/source/useSortedAttributes FIXABLE ━━━━━━━━━━
× The attributes are not sorted.
154 │ return (
> 155 │ <Carousel.Root
│ ^^^^^^^^^^^^^^
> 156 │ aspectRatio="none"
...
> 169 │ }}
> 170 │ >
│ ^
171 │ <Carousel.Slides className={slidesClassName} slides={slides} />
172 │ {hasOverflow ? (
i Safe fix: Sort the JSX props.
158 158 │ key={restoreKey}
159 159 │ loop={hasOverflow}
160 │ - ······size="full"
161 │ - ······slideCount={slides.length}
162 │ - ······slidesPerMove={1}
163 │ - ······slidesPerPage={slidesPerPage}
164 │ - ······spacing={spacing}
165 │ - ······onDragStatusChange={(details)·=>·{
166 │ - ········if·(details.type·===·"dragging")·{
167 │ - ··········didDragRef.current·=·true
168 │ - ········}
169 │ - ······}}
160 │ + ······onDragStatusChange={(details)·=>·{
161 │ + ········if·(details.type·===·"dragging")·{
162 │ + ··········didDragRef.current·=·true
163 │ + ········}
164 │ + ······}}
165 │ + ······size="full"
166 │ + ······slideCount={slides.length}
167 │ + ······slidesPerMove={1}
168 │ + ······slidesPerPage={slidesPerPage}
169 │ + ······spacing={spacing}
170 170 │ >
171 171 │ <Carousel.Slides className={slidesClassName} slides={slides} />
src/components/homepage/sections/homepage-hero-carousel-section.tsx format ━━━━━━━━━━━━━━━━━━━━━━━━━
× Formatter would have printed the following content:
125 125 │ }: HeroCarouselProps) {
126 126 │ const didDragRef = useRef(false)
127 │ - ··const·handleSlidePointerDownCapture:·PointerEventHandler<HTMLAnchorElement>·=
12...
🧰 Additional context used
📓 Path-based instructions (11)
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/lib/storefront/catalog-query-state/status-filters.tsapps/herbatika/src/components/category/use-category-facet-items.tsapps/herbatika/src/lib/storefront/catalog-query-state/params.tsapps/herbatika/src/lib/storefront/catalog-query-state/parsers.tsapps/herbatika/src/components/herbatika-footer.tsxapps/herbatika/src/components/homepage/sections/homepage-hero-carousel-section.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/lib/storefront/catalog-query-state/status-filters.tsapps/herbatika/src/components/category/use-category-facet-items.tsapps/herbatika/src/lib/storefront/catalog-query-state/params.tsapps/herbatika/src/lib/storefront/catalog-query-state/parsers.tsapps/herbatika/src/components/herbatika-footer.tsxapps/herbatika/src/components/homepage/sections/homepage-hero-carousel-section.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/lib/storefront/catalog-query-state/status-filters.tsapps/herbatika/src/components/category/use-category-facet-items.tsapps/herbatika/src/lib/storefront/catalog-query-state/params.tsapps/herbatika/src/lib/storefront/catalog-query-state/parsers.tsapps/herbatika/src/components/herbatika-footer.tsxapps/herbatika/src/components/homepage/sections/homepage-hero-carousel-section.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/lib/storefront/catalog-query-state/status-filters.tsapps/herbatika/src/components/category/use-category-facet-items.tsapps/herbatika/src/lib/storefront/catalog-query-state/params.tsapps/herbatika/src/lib/storefront/catalog-query-state/parsers.tsapps/herbatika/src/components/herbatika-footer.tsxapps/herbatika/src/components/homepage/sections/homepage-hero-carousel-section.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/lib/storefront/catalog-query-state/status-filters.tsapps/herbatika/src/components/category/use-category-facet-items.tsapps/herbatika/src/lib/storefront/catalog-query-state/params.tsapps/herbatika/src/lib/storefront/catalog-query-state/parsers.tsapps/herbatika/src/components/herbatika-footer.tsxapps/herbatika/src/components/homepage/sections/homepage-hero-carousel-section.tsx
apps/herbatika/src/lib/storefront/**/*.{ts,tsx}
📄 CodeRabbit inference engine (apps/herbatika/AGENTS.md)
In Herbatika storefront composition, prefer the preset surface from
@techsio/storefront-data: shared hooks, flows, query keys, query options, cache policy, and SSR helpers.
Files:
apps/herbatika/src/lib/storefront/catalog-query-state/status-filters.tsapps/herbatika/src/lib/storefront/catalog-query-state/params.tsapps/herbatika/src/lib/storefront/catalog-query-state/parsers.ts
apps/herbatika/src/lib/**/*.{ts,tsx}
📄 CodeRabbit inference engine (apps/herbatika/AGENTS.md)
Keep app-local storefront code thin: SDK instance, field defaults, localized text, toasts, analytics, form DTOs, address adapters, and Herbatika-specific read models can stay in app code. Move repeated backend communication, query key construction, cache sync, and mutation invalidation into libs/storefront-data.
Files:
apps/herbatika/src/lib/storefront/catalog-query-state/status-filters.tsapps/herbatika/src/lib/storefront/catalog-query-state/params.tsapps/herbatika/src/lib/storefront/catalog-query-state/parsers.ts
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/lib/storefront/catalog-query-state/status-filters.tsapps/herbatika/src/components/category/use-category-facet-items.tsapps/herbatika/src/lib/storefront/catalog-query-state/params.tsapps/herbatika/src/lib/storefront/catalog-query-state/parsers.tsapps/herbatika/src/components/herbatika-footer.tsxapps/herbatika/src/components/homepage/sections/homepage-hero-carousel-section.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/lib/storefront/catalog-query-state/status-filters.tsapps/herbatika/src/components/category/use-category-facet-items.tsapps/herbatika/src/lib/storefront/catalog-query-state/params.tsapps/herbatika/src/lib/storefront/catalog-query-state/parsers.tsapps/herbatika/src/components/herbatika-footer.tsxapps/herbatika/src/components/homepage/sections/homepage-hero-carousel-section.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/herbatika-footer.tsx apps/herbatika/src/components/homepage/sections/homepage-hero-carousel-section.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/herbatika-footer.tsx apps/herbatika/src/components/homepage/sections/homepage-hero-carousel-section.tsx 🧠 Learnings (2) 📚 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/lib/storefront/catalog-query-state/status-filters.ts apps/herbatika/src/components/category/use-category-facet-items.ts apps/herbatika/src/lib/storefront/catalog-query-state/params.ts apps/herbatika/src/lib/storefront/catalog-query-state/parsers.ts apps/herbatika/src/components/herbatika-footer.tsx apps/herbatika/src/components/homepage/sections/homepage-hero-carousel-section.tsx 📚 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/herbatika-footer.tsx apps/herbatika/src/components/homepage/sections/homepage-hero-carousel-section.tsx 🪛 GitHub Actions: CI / 0_main.txt apps/herbatika/src/components/homepage/sections/homepage-hero-carousel-section.tsx [error] 155-170: Biome check failed (useSortedAttributes). The JSX attributes are not sorted for <Carousel.Root>. Safe fix: Sort the JSX props. [error] 127-131: Biome check failed (format). Formatter would have printed different line-wrapping for 'handleSlidePointerDownCapture: PointerEventHandler'. 🪛 GitHub Actions: CI / main apps/herbatika/src/components/homepage/sections/homepage-hero-carousel-section.tsx [error] 155-170: Biome check (assist/source/useSortedAttributes) failed: The JSX attributes are not sorted. Safe fix: Sort the JSX props for <Carousel.Root>. [error] 127-130: Biome check (format) failed: Formatter would have reformatted handleSlidePointerDownCapture type annotation/line breaks. 🔇 Additional comments (6) apps/herbatika/src/components/homepage/sections/homepage-hero-carousel-section.tsx (1) 134-138: LGTM! apps/herbatika/src/lib/storefront/catalog-query-state/status-filters.ts (1) 1-15: LGTM! apps/herbatika/src/lib/storefront/catalog-query-state/parsers.ts (1) 10-28: LGTM! apps/herbatika/src/lib/storefront/catalog-query-state/params.ts (1) 3-3: LGTM! Also applies to: 66-66, 102-102 apps/herbatika/src/components/category/use-category-facet-items.ts (1) 5-5: LGTM! Also applies to: 23-29 apps/herbatika/src/components/herbatika-footer.tsx (1) 28-72: LGTM! Also applies to: 122-137
|
🎉 This PR is included in version 0.19.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
1 participant
Summary by CodeRabbit
New Features
Bug Fixes
Chores