feat(apps/herbatika): add new Next.js app with deps and assets - #259
feat(apps/herbatika): add new Next.js app with deps and assets#259KaiUweCZE wants to merge 18 commits into
Conversation
Add a new Herbatika Next.js application scaffold under apps/herbatika. Include package.json with scripts (dev, build, start, lint, format), application dependencies (Next 16, React 19, Medusa SDK, TanStack Query, etc.) and devDependencies (Biome, Tailwind v4, TypeScript, etc.) to standardize local development and CI workflows.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
You do not have enough credits to review this pull request. Please purchase more credits to continue. |
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the
WalkthroughThis change introduces a new Next.js application called "herbatika" to the monorepo. It includes project configuration, build setup, global styling with Tailwind CSS, a root layout component, and an initial landing page. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
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 |
Mesa DescriptionTL;DRAdded a new Next.js application, What changed?New Application Scaffold & Configuration
Public Assets
Application Structure & Pages
Design Tokens & Styling
Description generated by Mesa. Update settings |
![coderabbitai[bot]](https://avatars.github.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
📜 Review details
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (7)
apps/herbatika/pnpm-lock.yamlis excluded by!**/pnpm-lock.yamlapps/herbatika/public/file.svgis excluded by!**/*.svgapps/herbatika/public/globe.svgis excluded by!**/*.svgapps/herbatika/public/next.svgis excluded by!**/*.svgapps/herbatika/public/vercel.svgis excluded by!**/*.svgapps/herbatika/public/window.svgis excluded by!**/*.svgapps/herbatika/src/app/favicon.icois excluded by!**/*.ico
📒 Files selected for processing (9)
apps/herbatika/.gitignoreapps/herbatika/biome.jsonapps/herbatika/next.config.tsapps/herbatika/package.jsonapps/herbatika/postcss.config.mjsapps/herbatika/src/app/globals.cssapps/herbatika/src/app/layout.tsxapps/herbatika/src/app/page.tsxapps/herbatika/tsconfig.json
🧰 Additional context used
📓 Path-based instructions (1)
**/package.json
📄 CodeRabbit inference engine (CLAUDE.md)
Use pnpm CLI to add dependencies; never edit package.json directly
Files:
apps/herbatika/package.json
🧠 Learnings (28)
📓 Common learnings
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-09-07T21:28:54.320Z
Learning: Prefer Modern.js for frontend apps (Next.js 15+ may be used when necessary)
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: apps/frontend-demo/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:29:55.558Z
Learning: Applies to apps/frontend-demo/src/components/@(atoms|molecules|organisms)/*.tsx : In each component TSX file, import its token CSS (e.g., import './_component-name.css')
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: apps/frontend-demo/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:29:55.558Z
Learning: Applies to apps/frontend-demo/src/components/@(atoms|molecules|organisms)/*.tsx : Use functional components and hooks for implementation
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: apps/frontend-demo/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:29:55.558Z
Learning: Applies to apps/frontend-demo/src/tokens/app-components/@(atoms|molecules|organisms|templates|pages)/_*.css : Organize app component token CSS under apps/frontend-demo/src/tokens/app-components/{atoms,molecules,organisms,templates,pages}/_component-name.css
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-09-07T21:28:54.320Z
Learning: Applies to libs/ui/**/*.{ts,tsx} : Implement UI library components using Zag.js for React and Tailwind CSS for styling
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: apps/frontend-demo/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:29:55.558Z
Learning: Applies to apps/frontend-demo/src/components/@(atoms|molecules|organisms)/*.tsx : Place app-specific components in apps/frontend-demo/src/components/[atoms|molecules|organisms]/component-name.tsx
📚 Learning: 2025-09-07T21:28:54.320Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-09-07T21:28:54.320Z
Learning: Prefer Modern.js for frontend apps (Next.js 15+ may be used when necessary)
Applied to files:
apps/herbatika/src/app/page.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/app/page.tsxapps/herbatika/src/app/layout.tsx
📚 Learning: 2025-09-07T21:29:55.558Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: apps/frontend-demo/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:29:55.558Z
Learning: Applies to apps/frontend-demo/src/components/@(atoms|molecules|organisms)/*.tsx : Use Tailwind classes mapped to tokens (e.g., bg-button-bg, p-button-sm); never use arbitrary CSS variable values like bg-[var(--...)] or p-[var(--...)]
Applied to files:
apps/herbatika/src/app/globals.css
📚 Learning: 2025-10-27T07:13:36.526Z
Learnt from: KaiUweCZE
Repo: NMIT-WR/new-engine PR: 168
File: libs/ui/src/atoms/input.tsx:16-17
Timestamp: 2025-10-27T07:13:36.526Z
Learning: In Tailwind CSS v4, theme configuration is done using CSS files with the `theme` directive, not tailwind.config.js. Theme variables like `--color-input-ring` defined in `theme` blocks automatically generate corresponding utility classes (e.g., `ring-input-ring`).
Applied to files:
apps/herbatika/src/app/globals.css
📚 Learning: 2025-09-07T21:29:55.558Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: apps/frontend-demo/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:29:55.558Z
Learning: Applies to apps/frontend-demo/src/tokens/app-components.css : Always add new component token CSS imports to apps/frontend-demo/src/tokens/app-components.css
Applied to files:
apps/herbatika/src/app/globals.cssapps/herbatika/src/app/layout.tsx
📚 Learning: 2025-09-07T21:30:50.058Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:30:50.058Z
Learning: Applies to libs/ui/src/{atoms,molecules}/**/*.tsx : Do not use arbitrary Tailwind values in class names (e.g., bg-[#ff0000], bg-[var(--...)]); use token classes instead
Applied to files:
apps/herbatika/src/app/globals.css
📚 Learning: 2025-09-07T21:29:55.558Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: apps/frontend-demo/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:29:55.558Z
Learning: Applies to apps/frontend-demo/src/components/providers.tsx : Use next-themes Provider in apps/frontend-demo/src/components/providers.tsx to enable dark mode via Tailwind 'dark:'
Applied to files:
apps/herbatika/src/app/globals.css
📚 Learning: 2025-09-07T21:30:50.058Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:30:50.058Z
Learning: Applies to libs/ui/**/{tailwind.config.js,tailwind.config.ts,tailwind.config.cjs,tailwind.config.mjs} : Do not add Tailwind config files to this project
Applied to files:
apps/herbatika/src/app/globals.cssapps/herbatika/tsconfig.jsonapps/herbatika/next.config.tsapps/herbatika/postcss.config.mjsapps/herbatika/.gitignore
📚 Learning: 2025-09-07T21:29:55.558Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: apps/frontend-demo/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:29:55.558Z
Learning: Applies to apps/frontend-demo/{apps/frontend-demo,libs/ui}/src/tokens/**/{components,app-components}/**/_*.css : Component token files should import semantic tokens (e.g., import "../../_semantic.css") and primarily reference variables from _semantic.css
Applied to files:
apps/herbatika/src/app/globals.css
📚 Learning: 2025-10-22T11:18:06.281Z
Learnt from: KaiUweCZE
Repo: NMIT-WR/new-engine PR: 151
File: libs/ui/src/tokens/components/molecules/_product-card.css:1-1
Timestamp: 2025-10-22T11:18:06.281Z
Learning: Token files in libs/ui/src/tokens/components/{atoms,molecules}/_*.css do not require explicit imports of semantic token files; semantic token references via var() resolve correctly within the theme static block architecture used in this project.
Applied to files:
apps/herbatika/src/app/globals.css
📚 Learning: 2025-10-24T13:43:25.253Z
Learnt from: KaiUweCZE
Repo: NMIT-WR/new-engine PR: 167
File: libs/ui/src/molecules/tabs.tsx:41-45
Timestamp: 2025-10-24T13:43:25.253Z
Learning: In libs/ui/src/molecules/tabs.tsx, using Tailwind arbitrary value syntax to reference Zag.js CSS variables (e.g., w-(--width), h-(--height)) for the indicator element is the correct pattern. These CSS variables are dynamically set by getIndicatorProps() based on active tab dimensions and should not be removed.
Applied to files:
apps/herbatika/src/app/globals.css
📚 Learning: 2025-09-07T21:29:55.558Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: apps/frontend-demo/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:29:55.558Z
Learning: Applies to apps/frontend-demo/src/components/@(atoms|molecules|organisms)/*.tsx : In each component TSX file, import its token CSS (e.g., import './_component-name.css')
Applied to files:
apps/herbatika/src/app/globals.cssapps/herbatika/tsconfig.jsonapps/herbatika/next.config.tsapps/herbatika/src/app/layout.tsx
📚 Learning: 2025-10-27T14:25:01.394Z
Learnt from: KaiUweCZE
Repo: NMIT-WR/new-engine PR: 150
File: libs/ui/src/organisms/header.tsx:15-18
Timestamp: 2025-10-27T14:25:01.394Z
Learning: In Tailwind CSS v4, breakpoints are defined using `--breakpoint-<name>` custom properties in `theme` blocks (e.g., `--breakpoint-header-desktop: 48rem`). This automatically generates both min-width responsive variants (e.g., `header-desktop:`) and max-width variants (e.g., `max-header-desktop:`).
Applied to files:
apps/herbatika/src/app/globals.css
📚 Learning: 2025-09-07T21:28:54.320Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-09-07T21:28:54.320Z
Learning: Use Biome for linting and formatting across the repository
Applied to files:
apps/herbatika/biome.json
📚 Learning: 2025-12-18T23:21:59.842Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: apps/medusa-be/CLAUDE.md:0-0
Timestamp: 2025-12-18T23:21:59.842Z
Learning: Applies to apps/medusa-be/**/*.{ts,tsx,js,jsx} : Use Biome with `ultracite` preset for linting; run `bunx biome check --write .`
Applied to files:
apps/herbatika/biome.jsonapps/herbatika/package.json
📚 Learning: 2025-09-07T21:29:55.558Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: apps/frontend-demo/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:29:55.558Z
Learning: Run bunx biome check --write . (root) and bunx tsc --noEmit (apps/frontend-demo) before committing
Applied to files:
apps/herbatika/biome.json
📚 Learning: 2025-12-18T00:49:27.735Z
Learnt from: BleedingDev
Repo: NMIT-WR/new-engine PR: 233
File: libs/address/package.json:5-41
Timestamp: 2025-12-18T00:49:27.735Z
Learning: In libs/address with rslib v0.18 bundleless+dts configuration: JavaScript files emit to `dist/**` (e.g., `dist/i18n/en.js`) while TypeScript declaration files emit to `dist/src/**` (e.g., `dist/src/i18n/en.d.ts`). The package.json exports should reflect this structure with `types` paths pointing to `./dist/src/...` and `import` paths pointing to `./dist/...`.
Applied to files:
apps/herbatika/tsconfig.json
📚 Learning: 2025-12-18T23:21:59.842Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: apps/medusa-be/CLAUDE.md:0-0
Timestamp: 2025-12-18T23:21:59.842Z
Learning: Applies to apps/medusa-be/**/*.ts : Use TypeScript with strict type checking; run `npx tsc --noEmit` to typecheck
Applied to files:
apps/herbatika/tsconfig.jsonapps/herbatika/next.config.ts
📚 Learning: 2025-12-17T06:18:52.717Z
Learnt from: redeyecz
Repo: NMIT-WR/new-engine PR: 0
File: :0-0
Timestamp: 2025-12-17T06:18:52.717Z
Learning: In apps/medusa-be/src/admin/**/*.{ts,tsx}: Type duplication between admin UI and backend is intentional. The admin UI is a separate Vite React app with its own tsconfig, isolated from backend types by design.
Applied to files:
apps/herbatika/tsconfig.jsonapps/herbatika/next.config.ts
📚 Learning: 2025-12-18T23:21:59.842Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: apps/medusa-be/CLAUDE.md:0-0
Timestamp: 2025-12-18T23:21:59.842Z
Learning: Applies to apps/medusa-be/**/*.{ts,tsx,js,jsx} : Declare each variable with its own const/let statement, never use semicolons to separate multiple declarations on one line
Applied to files:
apps/herbatika/tsconfig.jsonapps/herbatika/next.config.ts
📚 Learning: 2025-09-07T21:28:54.320Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-09-07T21:28:54.320Z
Learning: Applies to apps/{medusa-fe,medusa-demo}/**/*.{ts,tsx} : Import UI components via the alias paths (e.g., `libs/ui/atoms/button`, `libs/ui/molecules/dialog`) rather than relative paths
Applied to files:
apps/herbatika/tsconfig.json
📚 Learning: 2025-12-18T23:21:59.842Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: apps/medusa-be/CLAUDE.md:0-0
Timestamp: 2025-12-18T23:21:59.842Z
Learning: Applies to apps/medusa-be/src/jobs/**/*.ts : Export `config = { name, schedule }` object from job files; schedule uses standard cron syntax (e.g., `"*/5 * * * *"`)
Applied to files:
apps/herbatika/tsconfig.jsonapps/herbatika/next.config.ts
📚 Learning: 2025-09-07T21:29:55.558Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: apps/frontend-demo/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:29:55.558Z
Learning: Applies to apps/frontend-demo/src/components/@(atoms|molecules|organisms)/*.tsx : Define component props with TypeScript interfaces
Applied to files:
apps/herbatika/tsconfig.json
📚 Learning: 2025-09-07T21:30:50.058Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:30:50.058Z
Learning: Applies to libs/ui/src/{atoms,molecules}/[a-z0-9-]*.tsx : Component files must be placed under src/atoms or src/molecules and named in kebab-case (component-name.tsx)
Applied to files:
apps/herbatika/tsconfig.json
📚 Learning: 2025-12-18T23:21:59.842Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: apps/medusa-be/CLAUDE.md:0-0
Timestamp: 2025-12-18T23:21:59.842Z
Learning: Applies to apps/medusa-be/src/admin/**/*.{ts,tsx} : Admin environment variables use `import.meta.env.VITE_*` prefix; access `.DEV` and `.PROD` flags in Vite React app
Applied to files:
apps/herbatika/next.config.tsapps/herbatika/src/app/layout.tsx
📚 Learning: 2025-12-18T00:38:38.035Z
Learnt from: BleedingDev
Repo: NMIT-WR/new-engine PR: 0
File: :0-0
Timestamp: 2025-12-18T00:38:38.035Z
Learning: In the NMIT-WR/new-engine repository, the pnpm workspace configuration includes `minimumReleaseAgeExclude: ['medusajs/*']` to prevent CI/install failures when Medusa packages are published within the 24-hour minimum release age window, while keeping `minimumReleaseAge` enabled for supply-chain safety.
Applied to files:
apps/herbatika/package.json
📚 Learning: 2025-09-07T21:29:55.558Z
Learnt from: CR
Repo: NMIT-WR/new-engine PR: 0
File: apps/frontend-demo/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:29:55.558Z
Learning: Applies to apps/frontend-demo/src/components/@(atoms|molecules|organisms)/*.tsx : Do not hardcode colors or spacing in JSX/TSX; use design tokens and/or tv()
Applied to files:
apps/herbatika/src/app/layout.tsx
🧬 Code graph analysis (2)
apps/herbatika/next.config.ts (1)
apps/frontend-demo/next.config.js (1)
nextConfig(2-39)
apps/herbatika/src/app/layout.tsx (1)
apps/frontend-demo/src/components/providers.tsx (1)
Providers(47-64)
🔇 Additional comments (13)
apps/herbatika/postcss.config.mjs (1)
1-7: LGTM!The PostCSS configuration correctly integrates Tailwind CSS v4 using the
@tailwindcss/postcssplugin. The minimal configuration is appropriate for a new Next.js app scaffold.apps/herbatika/.gitignore (1)
1-41: LGTM!The gitignore configuration is comprehensive and appropriate for a Next.js application in a monorepo setup, correctly excluding build outputs, dependencies, environment files, and development artifacts.
apps/herbatika/package.json (2)
1-40: Verify framework choice and use pnpm to add dependencies.Two concerns:
Framework choice: Based on learnings, Modern.js is preferred for frontend apps, with Next.js 15+ used only when necessary. Please confirm that Next.js 16 is required for this application.
Package management: As per coding guidelines, dependencies should be added using pnpm CLI commands rather than editing package.json directly. Please use
pnpm addcommands to populate this manifest.Based on learnings and coding guidelines.
19-21: Confirm compatibility with workspace dependencies.Next.js 16.1.1 and React 19.2.3 are production-ready and compatible with each other. React 19.2.3 (released 11 December 2025) includes an important security patch for React Server Components, so using this version is recommended. Ensure that
@medusajs/js-sdk,@tanstack/react-query, and workspace packages like@techsio/ui-kitsupport React 19 before merging.apps/herbatika/biome.json (1)
1-37: LGTM!The Biome configuration is well-structured with appropriate settings for a Next.js application:
- VCS integration enabled for better Git workflow
- Formatter configured with consistent indentation
- Linter rules tailored for Next.js and React
noUnknownAtRulesdisabled (necessary for Tailwind CSS v4@themeand@importdirectives)- Import organization automation enabled
apps/herbatika/src/app/page.tsx (2)
3-65: Template code ready for customisation.This appears to be Next.js starter template code with Vercel branding and deployment links. Whilst functional for initial setup, you'll likely want to replace this with Herbatika-specific content.
39-39: Consider using theme tokens instead of arbitrary colour values.The hover states use arbitrary hex colour values (
bg-[#383838],dark:hover:bg-[#ccc]). While this is acceptable in application code, consider defining these colours as theme tokens inglobals.cssfor consistency and maintainability.Example:
@theme inline { --color-button-hover: #383838; --color-button-hover-dark: #ccc; }Then use:
hover:bg-button-hover dark:hover:bg-button-hover-dark⛔ Skipped due to learnings
Learnt from: CR Repo: NMIT-WR/new-engine PR: 0 File: apps/frontend-demo/CLAUDE.md:0-0 Timestamp: 2025-09-07T21:29:55.558Z Learning: Applies to apps/frontend-demo/src/components/@(atoms|molecules|organisms)/*.tsx : Use Tailwind classes mapped to tokens (e.g., bg-button-bg, p-button-sm); never use arbitrary CSS variable values like bg-[var(--...)] or p-[var(--...)]Learnt from: CR Repo: NMIT-WR/new-engine PR: 0 File: apps/frontend-demo/CLAUDE.md:0-0 Timestamp: 2025-09-07T21:29:55.558Z Learning: Applies to apps/frontend-demo/src/components/@(atoms|molecules|organisms)/*.tsx : Do not hardcode colors or spacing in JSX/TSX; use design tokens and/or tv()Learnt from: CR Repo: NMIT-WR/new-engine PR: 0 File: libs/ui/CLAUDE.md:0-0 Timestamp: 2025-09-07T21:30:50.058Z Learning: Applies to libs/ui/src/{atoms,molecules}/**/*.tsx : Do not use arbitrary Tailwind values in class names (e.g., bg-[#ff0000], bg-[var(--...)]); use token classes insteadLearnt from: CR Repo: NMIT-WR/new-engine PR: 0 File: libs/ui/CLAUDE.md:0-0 Timestamp: 2025-09-07T21:30:50.058Z Learning: Applies to libs/ui/src/{atoms,molecules}/**/*.tsx : Do not use direct semantic tokens like bg-primary; use component-specific token classes (e.g., bg-button-bg-primary)Learnt from: CR Repo: NMIT-WR/new-engine PR: 0 File: libs/ui/CLAUDE.md:0-0 Timestamp: 2025-09-07T21:30:50.058Z Learning: Applies to libs/ui/src/{atoms,molecules}/**/*.tsx : Component implementations should use tv() with token-based classes (no raw Tailwind arbitrary values)Learnt from: KaiUweCZE Repo: NMIT-WR/new-engine PR: 151 File: libs/ui/stories/molecules/product-card.stories.tsx:214-227 Timestamp: 2025-10-03T08:38:48.431Z Learning: Story files in libs/ui/stories/**/*.tsx can use semantic tokens (e.g., bg-accent, text-accent-fg, hover:bg-accent-hover) for demonstration purposes, unlike component implementation files which should use component-specific token classes.Learnt from: CR Repo: NMIT-WR/new-engine PR: 0 File: apps/frontend-demo/CLAUDE.md:0-0 Timestamp: 2025-09-07T21:29:55.558Z Learning: Applies to apps/frontend-demo/src/components/@(atoms|molecules|organisms)/*.tsx : In each component TSX file, import its token CSS (e.g., import './_component-name.css')Learnt from: CR Repo: NMIT-WR/new-engine PR: 0 File: apps/frontend-demo/CLAUDE.md:0-0 Timestamp: 2025-09-07T21:29:55.558Z Learning: Applies to apps/frontend-demo/src/components/providers.tsx : Use next-themes Provider in apps/frontend-demo/src/components/providers.tsx to enable dark mode via Tailwind 'dark:'Learnt from: CR Repo: NMIT-WR/new-engine PR: 0 File: apps/frontend-demo/CLAUDE.md:0-0 Timestamp: 2025-09-07T21:29:55.558Z Learning: Applies to apps/frontend-demo/{apps/frontend-demo,libs/ui}/src/tokens/**/{components,app-components}/**/_*.css : Follow token naming: allowed prefixes (e.g., --color-, --spacing-) and avoid forbidden patterns (e.g., --layout-*, over-specific names)Learnt from: KaiUweCZE Repo: NMIT-WR/new-engine PR: 167 File: libs/ui/src/molecules/tabs.tsx:41-45 Timestamp: 2025-10-24T13:43:25.253Z Learning: In libs/ui/src/molecules/tabs.tsx, using Tailwind arbitrary value syntax to reference Zag.js CSS variables (e.g., w-(--width), h-(--height)) for the indicator element is the correct pattern. These CSS variables are dynamically set by getIndicatorProps() based on active tab dimensions and should not be removed.apps/herbatika/src/app/globals.css (1)
11-12: The Geist font variables are properly defined. The layout component correctly importsGeistandGeist_Monofromnext/font/googleand configures them with the CSS variable names--font-geist-sansand--font-geist-mono(layout.tsx, lines 6-14). These variables are then applied to the body element (line 29), making them available to the global styles. The globals.css references are correct and will function as intended without any silent fallbacks.Likely an incorrect or invalid review comment.
apps/herbatika/next.config.ts (2)
19-25: ThecacheLifeAPI is stable in Next.js 16.The cacheLife configuration is an officially stable API as of Next.js 16 (the previous
unstable_prefix was removed). ThecacheLifeobject pattern in next.config is documented and supported, with no breaking changes expected. The configuration shown is correct.
6-7: These features are officially supported. React Compiler 1.0.0 is fully compatible with React 19.2.3, and Next.js 16 includes native support forreactCompiler: truewith the Babel plugin automatically configured. ThecacheComponentsoption is documented as stable in Next.js 16 (unifying Partial Pre-Rendering and cache directives) and poses no production concerns. The configuration is correct and follows official Next.js 16 patterns.Likely an incorrect or invalid review comment.
apps/herbatika/src/app/layout.tsx (3)
6-14: LGTM!Font configuration follows Next.js best practices correctly, using appropriate variable names and the Latin subset for Czech language support.
16-19: LGTM!Metadata export is correctly typed and contains appropriate content for the Herbatika e-shop.
21-35: The layout component implementation is correct. Next.js 16.1.1, as specified inpackage.json, is the current stable version (released 22 December 2025), so no version concerns exist. Regarding the framework choice: whilst learnings indicate Modern.js is preferred for frontend applications, the decision to use Next.js 16+ appears to have been made at the architectural level. If framework reconsideration is needed, that should be addressed as a broader project discussion rather than within this component review.Likely an incorrect or invalid review comment.
| body { | ||
| background: var(--background); | ||
| color: var(--foreground); | ||
| font-family: Arial, Helvetica, sans-serif; | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Inconsistent font family usage.
The @theme block defines --font-sans referencing var(--font-geist-sans) (line 11), but the body element uses Arial, Helvetica, sans-serif directly (line 25). This creates an inconsistency.
Consider using the theme token instead:
🔎 Proposed fix
body {
background: var(--background);
color: var(--foreground);
- font-family: Arial, Helvetica, sans-serif;
+ font-family: var(--font-sans);
}🤖 Prompt for AI Agents
In apps/herbatika/src/app/globals.css around lines 22 to 26, the body currently
hardcodes "Arial, Helvetica, sans-serif" which is inconsistent with the theme
token --font-sans defined earlier; replace the hardcoded font-family with the
theme variable (e.g., font-family: var(--font-sans);) and ensure any desired
fallbacks are included in the --font-sans definition so the body uses the
centralized theme token.
| import type { Metadata } from "next"; | ||
| import { Geist, Geist_Mono } from "next/font/google"; | ||
| import "./globals.css"; | ||
| import { Providers } from "./providers"; |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Check for providers.tsx files in herbatika app
fd -t f "providers.tsx" apps/herbatika/ 2>/dev/null || echo "No providers.tsx found in apps/herbatika"
# List the structure of apps/herbatika/src/app/ to understand what exists
echo "--- Structure of apps/herbatika/src/app/ ---"
fd -t f . apps/herbatika/src/app/ 2>/dev/null | head -20
# Check if frontend-demo providers exist for comparison
echo "--- Checking frontend-demo providers ---"
fd -t f "providers.tsx" apps/frontend-demo/ 2>/dev/null || echo "No providers.tsx found in apps/frontend-demo"Repository: NMIT-WR/new-engine
Length of output: 331
🏁 Script executed:
#!/bin/bash
# View the full layout.tsx to confirm the Providers component is actually being used
echo "--- apps/herbatika/src/app/layout.tsx ---"
cat -n apps/herbatika/src/app/layout.tsx
echo ""
echo "--- apps/frontend-demo/src/components/providers.tsx (for reference) ---"
cat -n apps/frontend-demo/src/components/providers.tsxRepository: NMIT-WR/new-engine
Length of output: 3373
Create the missing Providers component file.
The Providers component is imported at line 4 and used at line 31, but the file apps/herbatika/src/app/providers.tsx does not exist. This will cause a build or runtime failure. Create this file with the necessary providers (QueryClientProvider, ThemeProvider, etc.), following the implementation pattern from apps/frontend-demo/src/components/providers.tsx as a reference.
| "paths": { | ||
| "@/*": ["./src/*"] | ||
| } |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Add explicit baseUrl for path alias clarity.
While the paths configuration may work with moduleResolution: "bundler", it's more explicit and safer to set baseUrl: "." in the compilerOptions to ensure path aliases resolve correctly.
🔎 Proposed fix
}
],
+ "baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| "paths": { | |
| "@/*": ["./src/*"] | |
| } | |
| "baseUrl": ".", | |
| "paths": { | |
| "@/*": ["./src/*"] | |
| } |
🤖 Prompt for AI Agents
In apps/herbatika/tsconfig.json around lines 21 to 23, the tsconfig declares a
"paths" alias but lacks an explicit "baseUrl"; add baseUrl set to "." under
compilerOptions so the path alias "@/*": ["./src/*"] resolves reliably (e.g.,
add "baseUrl": "." alongside the existing compilerOptions entries), then run a
quick TypeScript compile or editor reload to confirm aliases resolve.
Add a new Herbatika Next.js application scaffold under apps/herbatika. Include package.json with scripts (dev, build, start, lint, format), application dependencies (Next 16, React 19, Medusa SDK, TanStack Query, etc.) and devDependencies (Biome, Tailwind v4, TypeScript, etc.) to standardize local development and CI workflows.
…into feat/herbatika
1 participant
Add a new Herbatika Next.js application scaffold under apps/herbatika.
Include package.json with scripts (dev, build, start, lint, format),
application dependencies (Next 16, React 19, Medusa SDK, TanStack Query, etc.)
and devDependencies (Biome, Tailwind v4, TypeScript, etc.) to standardize
local development and CI workflows.
Summary by CodeRabbit
New Features
Chores
✏️ Tip: You can customize this high-level summary in your review settings.