Vldszn/2025 07 24 migrate to tailwind 4 and tailwind eslint plugin by VladSez · Pull Request #125 · VladSez/easy-invoice-pdf

VladSez · 2025-07-24T21:55:10Z

Summary by CodeRabbit

Style
- Reformatted all CSS class assignments across the app to use multiline template literals for improved readability and consistency.
- Minor adjustments to the order and style of some utility classes (e.g., shadow, focus, and RTL classes).
- Updated several shadow and focus styles for enhanced visual consistency.
Chores
- Upgraded and added development dependencies for Tailwind CSS, ESLint, and related plugins.
- Updated and reorganized ESLint and Prettier configurations for improved linting and formatting.
- Adjusted VSCode workspace settings for Tailwind CSS and linting compatibility.
Refactor
- Replaced or removed legacy Tailwind configuration and global CSS files, introducing a new global stylesheet with expanded theming, dark mode, and animation support.
- Simplified PostCSS configuration for plugin management.
Bug Fixes
- Ensured compatibility with Tailwind CSS v4 and improved border color consistency across themes.
Documentation
- No user-facing documentation changes included.

changeset-bot · 2025-07-24T21:55:13Z

⚠️ No Changeset found

Latest commit: b2a4610

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

vercel · 2025-07-24T21:55:14Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
pdf-invoice-generator	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 24, 2025 9:58pm

coderabbitai · 2025-07-24T21:55:20Z

Walkthrough

This update introduces comprehensive changes to the project's styling infrastructure and codebase. It migrates Tailwind CSS configuration from a TypeScript config file to a global CSS file, updates dependencies and linting configurations for Tailwind v4 compatibility, and systematically refactors all JSX className assignments to use multiline template literals. Minor adjustments to shadow, focus, and utility classes are made for consistency. No functional logic is altered.

Changes

Files/Groups	Change Summary
tailwind.config.ts, src/app/globals.css, src/globals.css	Tailwind config file deleted; new global CSS file added with custom properties, themes, animations, and utilities.
package.json, postcss.config.mjs	Tailwind, PostCSS, and related dependencies upgraded and consolidated for v4; new plugins and parser added.
eslint.config.mjs, .prettierrc.js, .vscode/settings.json	Linting and formatting configs updated for Tailwind v4, ESM compatibility, and better Tailwind linting.
components.json, src/app/layout.tsx	Tailwind CSS entry and global CSS import paths updated for new structure.
src/app/globals.css, src/app/(app)/components/, src/components/	All className strings refactored to multiline template literals; minor utility class adjustments (e.g., shadows).
src/app/(app)/, src/app/[locale]/, src/app/changelog/*	ClassName attributes in all pages/components converted to template literals; no logic changes.
src/components/ui/, src/components/etc/	UI and utility components' className strings reformatted; minor reordering and shadow/focus utility tweaks.
src/app/api/generate-invoice/*	Minor: blank line added and logging on rate limit exceeded.
tailwind.config.ts	Tailwind config file removed; theming and animation now in global CSS.

Sequence Diagram(s)

sequenceDiagram
    participant Dev as Developer
    participant Tailwind as Tailwind CSS
    participant App as Application Components
    participant GlobalCSS as src/globals.css

    Dev->>Tailwind: Remove tailwind.config.ts
    Dev->>GlobalCSS: Add comprehensive global CSS with custom properties, themes, and utilities
    Dev->>App: Refactor all className strings to multiline template literals
    App->>GlobalCSS: Import and use global CSS for all styling and theming
    App->>Tailwind: Use Tailwind classes via global CSS, no direct config

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

feat: stripe invoice template, new CTA toasts, cleanup landing page + other improvements #118: Both PRs introduce and enhance the Stripe invoice template feature, including UI components for invoice PDF rendering, form fields for template and logo selection, and integration of custom call-to-action toasts. They also share changes in invoice PDF viewer components and invoice form logic to support multiple templates and error handling.

Poem

A bunny hopped through fields of code,
With Tailwind’s breeze, the styles bestowed.
Out went the config, in came the theme,
Multiline classes—so neat and clean!
Now every page and every view,
Is styled anew with pastel hue.
🐇✨

Note

⚡️ Unit Test Generation is now available in beta!

Learn more here, or try it out under "Finishing Touches" below.

✨ Finishing Touches

📝 Generate Docstrings

🧪 Generate unit tests

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch vldszn/2025-07-24_migrate-to-tailwind-4-and-tailwind-eslint-plugin

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Explain this complex logic.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai explain this code block.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and explain its main purpose.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR.
@coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
@coderabbitai generate unit tests to generate unit tests for this PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

socket-security · 2025-07-24T21:56:00Z

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Package	Supply Chain Security	Quality
eslint-config-next@15.2.3 ⏵ 15.4.3		⁺¹
@typescript-eslint/parser@8.38.0
knip@5.55.1 ⏵ 5.62.0	⁺¹	⁺⁷

View full report

coderabbitai

Actionable comments posted: 16

🔭 Outside diff range comments (3)

src/app/(app)/components/invoice-pdf-download-multiple-languages.tsx (1)
93-97: Slash in zipFileName will break downloads on Windows.

You correctly normalised invoiceNumberFormatted, but the zip filename still uses the raw invoiceNumber, so "2024/07" becomes an invalid path part.
-      const zipFileName = `invoice-${invoiceNumber}-${languages}-archive.zip`;
+      const zipFileName = `invoice-${invoiceNumberFormatted}-${languages}-archive.zip`;
src/components/seller-dialog.tsx (1)
1-4: Missing "use client" directive – this component will break in RSC mode

SellerDialog makes heavy use of useState, useEffect, localStorage, etc.
Without the "use client" pragma Next.js will treat the file as a Server Component and compilation will fail at runtime.
+/* eslint-disable @next/next/no-document-import-in-page */
+'use client';
 import { Button } from "@/components/ui/button";
src/app/(app)/components/invoice-form/sections/invoice-items.tsx (1)

120-139: Absolute delete-button container can overflow on small screens

Using -top-10 -right-3 may push the button outside the scrollable viewport on mobile. Consider using an inset inside the fieldset header (top-2 right-2) or wrapping the fieldset in relative padding.

♻️ Duplicate comments (1)

src/components/ui/money-input.tsx (1)

118-120: Same invalid ring-3 utility as flagged earlier

This instance has the same issue described in the Textarea component. Please replace or extend the Tailwind config.

🧹 Nitpick comments (19)

src/globals.css (2)
78-115: Consider consolidating duplicate theme definitions.

There appear to be two @theme blocks with overlapping variable definitions. The first @theme inline block (lines 78-115) and the second @theme block (lines 126-171) both define radius and color variables.

Consider consolidating these into a single @theme block to avoid redundancy:
-@theme inline {
-  --color-background: var(--background);
-  /* ... other color mappings ... */
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  /* ... other mappings ... */
-}

@theme {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  /* ... all mappings consolidated here ... */
  
  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);
  
  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;
  --animate-heartbeat: heartbeat 3s ease-in-out infinite 25s;
  
  /* keyframes stay the same */
}
Also applies to: 126-171

200-202: Consider making font family more flexible.

The hardcoded Arial font family might be too restrictive. Consider using a more flexible font stack or CSS custom property.
body {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: var(--font-sans, system-ui, -apple-system, sans-serif);
}
Or define it as a custom property in the :root selector for better customization.
src/app/(app)/components/invoice-pdf-download-multiple-languages.tsx (1)
114-115: Remove stale commented prop.

variant="inverted" looks obsolete after the MultiSelect refactor. Commented code adds noise and tends to rot—delete it unless it will be re-enabled imminently.
-        // variant="inverted"
.vscode/settings.json (1)
2-8: Consider switching eslint fix-on-save from “explicit” to “always”.

"source.fixAll.eslint": "explicit" requires the user to manually pick the quick-fix command instead of running automatically on every save.
For teams that expect lint errors to be fixed automatically on save (the common convention), change the value to "always".
-    "source.fixAll.eslint": "explicit"
+    "source.fixAll.eslint": "always"
This prevents “why didn’t my classes get re-ordered?” confusion and aligns with the zero-friction DX you’re setting up with Tailwind-aware linting.
src/components/ui/alert-dialog.tsx (1)
115-118: Minor: follow existing cn style for single-line literals.

For consistency with the rest of the file (e.g. AlertDialogTitle) wrap these shorter class lists as plain strings:
-    className={cn(`
-      text-sm text-slate-500
-      dark:text-slate-400
-    `, className)}
+    className={cn("text-sm text-slate-500 dark:text-slate-400", className)}
Same for mt-2 sm:mt-0 block below.

Also applies to: 146-148
src/app/changelog/layout.tsx (2)
149-172: Avoid the extra div.container wrapper – Tailwind already scopes width.

The header now contains:
<div class="container h-auto px-3 py-2 ...">
  <div class="flex h-full ...">
container already applies horizontal padding, so the outer px-3 duplicates padding and shrinks the layout at small breakpoints.
-        <div className={`
-          container h-auto px-3 py-2
-          sm:h-16 sm:py-0
-        `}>
+        <div className={`
+          container h-auto py-2
+          sm:h-16 sm:py-0
+        `}>
Keeps spacing identical while avoiding double-padding.

192-195: Prefer semantic size utilities over manual padding duplication.

BlackGoToAppButton accepts className – the component already sets px-3 sm:px-8.
Passing the same values from the parent couples layout too tightly; leave it empty unless you want to override defaults.
-              <BlackGoToAppButton className={`
-                px-3
-                sm:px-8
-              `}>
+              <BlackGoToAppButton>
src/components/ui/disclosure.tsx (2)
97-100: Reuse the shared cn util for consistency & plugin support.

Using a raw template literal here bypasses twMerge and the Tailwind ESLint rule configured to watch cn().
Switch to:
-                    className={`
-                      ml-auto size-6 shrink-0 rounded-full p-1 transition-all duration-200
-                      hover:bg-gray-200
-                    `}
+                    className={cn(
+                      "ml-auto size-6 shrink-0 rounded-full p-1 transition-all duration-200",
+                      "hover:bg-gray-200"
+                    )}
This keeps class-deduplication consistent and silences no-unregistered-classes.

133-136: Same cn() / linting point applies to panel padding.
-        className={`
-          pt-2 pr-4 pb-4 pl-0
-          [&:has([data-slot=disclosure-group])_&]:px-11
-        `}
+        className={cn(
+          "pt-2 pr-4 pb-4 pl-0",
+          "[&:has([data-slot=disclosure-group])_&]:px-11"
+        )}
Maintains merge safety and linter compatibility.
src/components/go-to-app-button-cta.tsx (1)
27-30: Micro-nit: drop template literal for a single string

The ArrowRight icon only receives two classes. Wrapping them in a multiline template literal adds six bytes and an extra parsing step with no readability gain.
-<ArrowRight className={`
-  mr-2 h-5 w-5 transition-transform
-  group-hover:scale-110
-`} />
+<ArrowRight className="mr-2 h-5 w-5 transition-transform group-hover:scale-110" />
src/components/ui/label.tsx (1)

15-20: Order violation flagged by ESLint Tailwind plugin

text-xs font-medium text-balance … breaks the enforced class-order rule (typography classes should follow layout/display). Either:

Re-order to satisfy better-tailwindcss/enforce-consistent-class-order, or

Downgrade the rule severity for this file if you deliberately keep logical grouping.

Keeps the CI green and avoids noisy diffs later.
src/components/ui/tooltip.tsx (1)
48-50: Class string inside template literal contains redundant back-ticks

Unlike the big block above, this is a single-line literal; a normal string is clearer.
-<TooltipPrimitive.Arrow
-  className={`my-px border-slate-200 fill-white drop-shadow-[0_1px_0_hsl(var(--border))]`}
/>
+<TooltipPrimitive.Arrow className="my-px border-slate-200 fill-white drop-shadow-[0_1px_0_hsl(var(--border))]" />
src/app/(app)/components/invoice-form/sections/seller-information.tsx (1)
166-171: Factor out duplicated switch classes

The identical five-line template literal is repeated four times. Extracting it into a const switchBase = \...`` keeps the file DRY and guarantees all toggles stay visually consistent after future tweaks.
- className={`
-   h-5 w-8
-   [&_span]:size-4
-   data-[state=checked]:[&_span]:translate-x-3
-   data-[state=checked]:[&_span]:rtl:-translate-x-3
- `}
+ className={switchBase}
Small refactor, big maintenance win.

Also applies to: 274-279, 351-356, 429-434
src/components/subscribe-input.tsx (2)
70-71: Class-order rule still fails – run eslint --fix

better-tailwindcss/enforce-consistent-class-order expects animate-in first, then effect utilities, then duration.
Running eslint --fix will auto-sort; keeping the rule green avoids CI noise.

105-107: Nit: avoid anonymous template literals for one-liner

The icon wrapper only contains positioning & color — a plain string keeps the file smaller:
-<Mail className={`
-  absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-muted-foreground
-`} />
+<Mail className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
src/app/[locale]/about/page.tsx (1)

176-181: Header container classes duplicated across files – extract constant

container h-auto px-3 py-2 sm:h-16 sm:py-0 appears in multiple pages; exporting a SiteHeader or headerBase constant keeps the design system single-source.
src/app/(app)/components/invoice-form/sections/invoice-items.tsx (1)
72-77: Switch base classes repeated 11× – factor out for maintainability

The five-line template literal defining size & transform is copy-pasted for every Switch. Move it to:
const switchBase =
  "h-5 w-8 [&_span]:size-4 data-[state=checked]:[&_span]:translate-x-3 data-[state=checked]:[&_span]:rtl:-translate-x-3";
and then className={switchBase} – easier to tweak later.
src/components/ui/command.tsx (1)
130-134: Minor: back-ticks inside cn reduce tree-shake

cn(\ … `, className)` allocates a new template literal on every render. For static strings prefer a plain string to keep memory pressure lower:
-className={cn(`
-  -mx-1 h-px bg-slate-200
-  dark:bg-slate-800
-`, className)}
+className={cn("-mx-1 h-px bg-slate-200 dark:bg-slate-800", className)}
src/components/seller-management.tsx (1)
419-423: Trim excess whitespace in multi-line template literal

Indentation inside the template string is emitted as literal spaces, producing class names with leading spaces (" bg-red-500"). While browsers ignore the extra whitespace, it:

Slightly inflates the HTML payload.

Trips Tailwind’s JIT class extraction if a future purge step is more strict.

Recommend using cn (already imported) for multi-line readability without the whitespace side-effect:
- className={`
-   bg-red-500 text-red-50
-   hover:bg-red-500/90
- `}
+ className={cn(
+   "bg-red-500 text-red-50",
+   "hover:bg-red-500/90"
+ )}

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5be6254 and b2a4610.

⛔ Files ignored due to path filters (1)

pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (67)

.prettierrc.js (1 hunks)
.vscode/settings.json (1 hunks)
components.json (1 hunks)
eslint.config.mjs (2 hunks)
package.json (2 hunks)
postcss.config.mjs (1 hunks)
src/app/(app)/components/android-pdf-viewer.tsx (5 hunks)
src/app/(app)/components/cta-toasts/index.tsx (8 hunks)
src/app/(app)/components/index.tsx (7 hunks)
src/app/(app)/components/invoice-form/index.tsx (10 hunks)
src/app/(app)/components/invoice-form/sections/buyer-information.tsx (2 hunks)
src/app/(app)/components/invoice-form/sections/general-information.tsx (6 hunks)
src/app/(app)/components/invoice-form/sections/invoice-items.tsx (13 hunks)
src/app/(app)/components/invoice-form/sections/seller-information.tsx (4 hunks)
src/app/(app)/components/invoice-pdf-download-link.tsx (1 hunks)
src/app/(app)/components/invoice-pdf-download-multiple-languages.tsx (1 hunks)
src/app/(app)/components/invoice-pdf-viewer.tsx (1 hunks)
src/app/(app)/loading.tsx (2 hunks)
src/app/(app)/page.client.tsx (12 hunks)
src/app/[locale]/about/loading.tsx (8 hunks)
src/app/[locale]/about/page.tsx (13 hunks)
src/app/api/generate-invoice/render-pdf-on-server.tsx (1 hunks)
src/app/api/generate-invoice/route.tsx (1 hunks)
src/app/changelog/[slug]/page.tsx (13 hunks)
src/app/changelog/components/date-time.tsx (1 hunks)
src/app/changelog/layout.tsx (6 hunks)
src/app/changelog/page.tsx (2 hunks)
src/app/confirm-subscription/page.tsx (3 hunks)
src/app/globals.css (0 hunks)
src/app/layout.tsx (2 hunks)
src/app/not-found.tsx (2 hunks)
src/components/buyer-dialog.tsx (5 hunks)
src/components/buyer-management.tsx (4 hunks)
src/components/etc/github-logo.tsx (1 hunks)
src/components/footer.tsx (6 hunks)
src/components/go-to-app-button-cta.tsx (2 hunks)
src/components/project-logo-description.tsx (2 hunks)
src/components/seller-dialog.tsx (7 hunks)
src/components/seller-management.tsx (4 hunks)
src/components/subscribe-input.tsx (3 hunks)
src/components/ui/accordion.tsx (2 hunks)
src/components/ui/alert-dialog.tsx (6 hunks)
src/components/ui/badge.tsx (1 hunks)
src/components/ui/button-helper.tsx (1 hunks)
src/components/ui/button.tsx (1 hunks)
src/components/ui/command.tsx (8 hunks)
src/components/ui/dialog.tsx (5 hunks)
src/components/ui/disclosure.tsx (2 hunks)
src/components/ui/dropdown-menu.tsx (9 hunks)
src/components/ui/form.tsx (3 hunks)
src/components/ui/input-helper-message.tsx (1 hunks)
src/components/ui/input.tsx (1 hunks)
src/components/ui/label.tsx (1 hunks)
src/components/ui/money-input.tsx (3 hunks)
src/components/ui/multi-select.tsx (6 hunks)
src/components/ui/popover.tsx (1 hunks)
src/components/ui/select-native.tsx (2 hunks)
src/components/ui/separator.tsx (1 hunks)
src/components/ui/switch.tsx (1 hunks)
src/components/ui/tabs.tsx (3 hunks)
src/components/ui/textarea.tsx (1 hunks)
src/components/ui/toasts/error-generating-pdf-toast.tsx (2 hunks)
src/components/ui/tooltip.tsx (1 hunks)
src/components/video.tsx (1 hunks)
src/globals.css (1 hunks)
src/mdx-components.tsx (5 hunks)
tailwind.config.ts (0 hunks)

💤 Files with no reviewable changes (2)

src/app/globals.css
tailwind.config.ts

🧰 Additional context used

📓 Path-based instructions (2)

**/*.{ts,tsx}

📄 CodeRabbit Inference Engine (.cursor/rules/error-handling.mdc)

**/*.{ts,tsx}: Model expected errors as return values in Server Actions
Use Zod for form validation and type inference
Define reusable validation schemas
Handle expected errors (form validation, API responses) with try/catch and return typed error objects
Use the ActionResponse interface pattern for server action error handling in TypeScript
Use Zod schemas and z.infer for form validation and type inference in TypeScript

**/*.{ts,tsx}: Use TypeScript for all code; prefer interfaces over types.
Avoid enums; use objects with as const instead.
Use the "function" keyword for pure functions.
Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.
Use console.log({}) syntax for debugging.

Files:

src/app/not-found.tsx
src/components/ui/tooltip.tsx
src/app/api/generate-invoice/route.tsx
src/components/ui/button-helper.tsx
src/mdx-components.tsx
src/components/ui/alert-dialog.tsx
src/app/api/generate-invoice/render-pdf-on-server.tsx
src/components/video.tsx
src/app/(app)/components/invoice-pdf-download-multiple-languages.tsx
src/components/ui/input-helper-message.tsx
src/app/changelog/layout.tsx
src/app/layout.tsx
src/components/ui/money-input.tsx
src/components/project-logo-description.tsx
src/components/ui/textarea.tsx
src/components/ui/disclosure.tsx
src/app/(app)/loading.tsx
src/components/ui/popover.tsx
src/app/(app)/components/invoice-pdf-download-link.tsx
src/components/ui/badge.tsx
src/components/go-to-app-button-cta.tsx
src/app/changelog/components/date-time.tsx
src/components/ui/button.tsx
src/components/ui/accordion.tsx
src/components/ui/separator.tsx
src/app/[locale]/about/loading.tsx
src/app/(app)/page.client.tsx
src/app/changelog/page.tsx
src/components/ui/switch.tsx
src/components/etc/github-logo.tsx
src/app/(app)/components/invoice-form/sections/seller-information.tsx
src/app/(app)/components/invoice-pdf-viewer.tsx
src/components/ui/multi-select.tsx
src/app/confirm-subscription/page.tsx
src/app/(app)/components/android-pdf-viewer.tsx
src/components/ui/dialog.tsx
src/components/ui/form.tsx
src/components/ui/toasts/error-generating-pdf-toast.tsx
src/components/ui/label.tsx
src/app/(app)/components/cta-toasts/index.tsx
src/components/ui/tabs.tsx
src/components/seller-dialog.tsx
src/app/(app)/components/index.tsx
src/app/(app)/components/invoice-form/sections/buyer-information.tsx
src/app/[locale]/about/page.tsx
src/components/ui/dropdown-menu.tsx
src/components/ui/select-native.tsx
src/components/seller-management.tsx
src/components/subscribe-input.tsx
src/components/buyer-dialog.tsx
src/components/buyer-management.tsx
src/components/ui/input.tsx
src/app/changelog/[slug]/page.tsx
src/components/ui/command.tsx
src/components/footer.tsx
src/app/(app)/components/invoice-form/sections/general-information.tsx
src/app/(app)/components/invoice-form/sections/invoice-items.tsx
src/app/(app)/components/invoice-form/index.tsx

**/*.tsx

📄 CodeRabbit Inference Engine (.cursor/rules/error-handling.mdc)

**/*.tsx: Use error boundaries for unexpected errors
Implement client-side validation for immediate feedback
Display user-friendly messages for expected errors
Catch unexpected errors (runtime errors, network issues) with error boundaries
Show generic user-friendly fallback UI for unexpected errors
Wrap React components with ErrorBoundary and provide a FallbackComponent for error handling

**/*.tsx: Favor named exports for components.
Use functional components with TypeScript interfaces.
Prefer Conditional (ternary) operator (? :) over Logical AND operator (&&) in React components.
Use declarative JSX.
Use Shadcn UI, Radix, and Tailwind for components and styling.
Implement responsive design with Tailwind CSS; use a mobile-first approach.
Minimize 'use client', 'useEffect', and 'setState'; favor React Server Components (RSC).
Wrap client components in Suspense with fallback.
Use dynamic loading for non-critical components.
Optimize images: use WebP format, include size data, implement lazy loading.
Use 'nuqs' for URL search parameter state management.
Limit 'use client': Favor server components and Next.js SSR. Use only for Web API access in small components.

Files:

src/app/not-found.tsx
src/components/ui/tooltip.tsx
src/app/api/generate-invoice/route.tsx
src/components/ui/button-helper.tsx
src/mdx-components.tsx
src/components/ui/alert-dialog.tsx
src/app/api/generate-invoice/render-pdf-on-server.tsx
src/components/video.tsx
src/app/(app)/components/invoice-pdf-download-multiple-languages.tsx
src/components/ui/input-helper-message.tsx
src/app/changelog/layout.tsx
src/app/layout.tsx
src/components/ui/money-input.tsx
src/components/project-logo-description.tsx
src/components/ui/textarea.tsx
src/components/ui/disclosure.tsx
src/app/(app)/loading.tsx
src/components/ui/popover.tsx
src/app/(app)/components/invoice-pdf-download-link.tsx
src/components/ui/badge.tsx
src/components/go-to-app-button-cta.tsx
src/app/changelog/components/date-time.tsx
src/components/ui/button.tsx
src/components/ui/accordion.tsx
src/components/ui/separator.tsx
src/app/[locale]/about/loading.tsx
src/app/(app)/page.client.tsx
src/app/changelog/page.tsx
src/components/ui/switch.tsx
src/components/etc/github-logo.tsx
src/app/(app)/components/invoice-form/sections/seller-information.tsx
src/app/(app)/components/invoice-pdf-viewer.tsx
src/components/ui/multi-select.tsx
src/app/confirm-subscription/page.tsx
src/app/(app)/components/android-pdf-viewer.tsx
src/components/ui/dialog.tsx
src/components/ui/form.tsx
src/components/ui/toasts/error-generating-pdf-toast.tsx
src/components/ui/label.tsx
src/app/(app)/components/cta-toasts/index.tsx
src/components/ui/tabs.tsx
src/components/seller-dialog.tsx
src/app/(app)/components/index.tsx
src/app/(app)/components/invoice-form/sections/buyer-information.tsx
src/app/[locale]/about/page.tsx
src/components/ui/dropdown-menu.tsx
src/components/ui/select-native.tsx
src/components/seller-management.tsx
src/components/subscribe-input.tsx
src/components/buyer-dialog.tsx
src/components/buyer-management.tsx
src/components/ui/input.tsx
src/app/changelog/[slug]/page.tsx
src/components/ui/command.tsx
src/components/footer.tsx
src/app/(app)/components/invoice-form/sections/general-information.tsx
src/app/(app)/components/invoice-form/sections/invoice-items.tsx
src/app/(app)/components/invoice-form/index.tsx

🧠 Learnings (65)

📓 Common learnings

Learnt from: CR
PR: VladSez/easy-invoice-pdf#0
File: .cursor/rules/shared.mdc:0-0
Timestamp: 2025-07-20T22:00:19.380Z
Learning: Applies to **/*.tsx : Use Shadcn UI, Radix, and Tailwind for components and styling.

Learnt from: CR
PR: VladSez/easy-invoice-pdf#0
File: .cursor/rules/shared.mdc:0-0
Timestamp: 2025-07-20T22:00:19.380Z
Learning: Applies to **/*.tsx : Implement responsive design with Tailwind CSS; use a mobile-first approach.

Learnt from: CR
PR: VladSez/easy-invoice-pdf#0
File: .cursor/rules/shared.mdc:0-0
Timestamp: 2025-07-20T22:00:19.380Z
Learning: Applies to **/*.tsx : Use functional components with TypeScript interfaces.

Learnt from: CR
PR: VladSez/easy-invoice-pdf#0
File: .cursor/rules/shared.mdc:0-0
Timestamp: 2025-07-20T22:00:19.380Z
Learning: Applies to **/*.tsx : Minimize 'use client', 'useEffect', and 'setState'; favor React Server Components (RSC).

Learnt from: CR
PR: VladSez/easy-invoice-pdf#0
File: .cursor/rules/shared.mdc:0-0
Timestamp: 2025-07-20T22:00:19.380Z
Learning: Applies to **/*.tsx : Use declarative JSX.

Learnt from: CR
PR: VladSez/easy-invoice-pdf#0
File: .cursor/rules/project-structure.mdc:0-0
Timestamp: 2025-07-20T21:59:55.483Z
Learning: Applies to {components,app}/**/*.tsx : Keep client state minimal

.prettierrc.js (2)

Learnt from: CR
PR: VladSez/easy-invoice-pdf#0
File: .cursor/rules/shared.mdc:0-0
Timestamp: 2025-07-20T22:00:19.380Z
Learning: Applies to **/*.tsx : Use Shadcn UI, Radix, and Tailwind for components and styling.

Learnt from: CR
PR: VladSez/easy-invoice-pdf#0
File: .cursor/rules/shared.mdc:0-0
Timestamp: 2025-07-20T22:00:19.380Z
Learning: Applies to **/*.tsx : Optimize images: use WebP format, include size data, implement lazy loading.

src/app/not-found.tsx (13)

Learnt from: CR
PR: VladSez/easy-invoice-pdf#0
File: .cursor/rules/project-structure.mdc:0-0
Timestamp: 2025-07-20T21:59:55.483Z
Learning: Applies to app/**/page.tsx : Keep page components lean

Learnt from: CR
PR: VladSez/easy-invoice-pdf#0
File: .cursor/rules/project-structure.mdc:0-0
Timestamp: 2025-07-20T21:59:55.483Z
Learning: Applies to components/**/*.tsx : Components: PascalCase.tsx

Learnt from: CR
PR: VladSez/easy-invoice-pdf#0
File: .cursor/rules/error-handling.mdc:0-0
Timestamp: 2025-07-20T21:59:36.257Z
Learning: Applies to **/*.tsx : Show generic user-friendly fallback UI for unexpected errors

Learnt from: CR
PR: VladSez/easy-invoice-pdf#0
File: .cursor/rules/shared.mdc:0-0
Timestamp: 2025-07-20T22:00:19.380Z
Learning: Applies to **/*.tsx : Use 'nuqs' for URL search parameter state management.

Learnt from: CR
PR: VladSez/easy-invoice-pdf#0
File: .cursor/rules/project-structure.mdc:0-0
Timestamp: 2025-07-20T21:59:55.483Z
Learning: Applies to {components,app}/**/*.tsx : Keep client state minimal

Learnt from: CR
PR: VladSez/easy-invoice-pdf#0
File: .cursor/rules/error-handling.mdc:0-0
Timestamp: 2025-07-20T21:59:36.257Z
Learning: Applies to **/*.tsx : Display user-friendly messages for expected errors

Learnt from: CR
PR: VladSez/easy-invoice-pdf#0
File: .cursor/rules/shared.mdc:0-0
Timestamp: 2025-07-20T22:00:19.380Z
Learning: Applies to **/*.tsx : Minimize 'use client', 'useEffect', and 'setState'; favor React Server Components (RSC).

Learnt from: CR
PR: VladSez/easy-invoice-pdf#0
File: .cursor/rules/project-structure.mdc:0-0
Timestamp: 2025-07-20T21:59:55.483Z
Learning: Applies to app/**/page.tsx : Extract business logic to separate files

Learnt from: CR
PR: VladSez/easy-invoice-pdf#0
File: .cursor/rules/shared.mdc:0-0
Timestamp: 2025-07-20T22:00:19.380Z
Learning: Applies to **/*.tsx : Favor named exports for components.

Learnt from: CR
PR: VladSez/easy-invoice-pdf#0
File: .cursor/rules/project-structure.mdc:0-0
Timestamp: 2025-07-20T21:59:55.483Z
Learning: Applies to app/**/*.tsx : Use Server Components when possible

Learnt from: CR
PR: VladSez/easy-invoice-pdf#0
File: .cursor/rules/error-handling.mdc:0-0
Timestamp: 2025-07-20T21:59:36.257Z
Learning: Applies to **/*.tsx : Catch unexpected errors (runtime errors, network issues) with error boundaries

Learnt from: CR
PR: VladSez/easy-invoice-pdf#0
File: .cursor/rules/error-handling.mdc:0-0
Timestamp: 2025-07-20T21:59:36.257Z
Learning: Applies to **/*.tsx : Wrap React components with ErrorBoundary and provide a FallbackComponent for error handling

Learnt from: CR
PR: VladSez/easy-invoice-pdf#0
File: .cursor/rules/error-handling.mdc:0-0
Timestamp: 2025-07-20T21:59:36.257Z
Learning: Applies to **/*.tsx : Use error boundaries for unexpected errors

src/components/ui/tooltip.tsx (10)

Learnt from: CR
PR: VladSez/easy-invoice-pdf#0
File: .cursor/rules/shared.mdc:0-0
Timestamp: 2025-07-20T22:00:19.380Z
Learning: Applies to **/*.tsx : Use Shadcn UI, Radix, and Tailwind for components and styling.

Learnt from: CR
PR: VladSez/easy-invoice-pdf#0
File: .cursor/rules/project-structure.mdc:0-0
Timestamp: 2025-07-20T21:59:55.483Z
Learning: Applies to components/**/*.tsx : Components: PascalCase.tsx

Learnt from: CR
PR: VladSez/easy-invoice-pdf#0
File: .cursor/rules/shared.mdc:0-0
Timestamp: 2025-07-20T22:00:19.380Z
Learning: Applies to **/*.tsx : Use functional components with TypeScript interfaces.

Learnt from: CR
PR: VladSez/easy-invoice-pdf#0
File: .cursor/rules/project-structure.mdc:0-0
Timestamp: 2025-07-20T21:59:55.483Z
Learning: Applies to components/**/*.tsx : Keep components small and focused

Learnt from: CR
PR: VladSez/easy-invoice-pdf#0
File: .cursor/rules/shared.mdc:0-0
Timestamp: 2025-07-20T22:00:19.380Z
Learning: Applies to **/*.tsx : Favor named exports for components.

Learnt from: CR
PR: VladSez/easy-invoice-pdf#0
File: .cursor/rules/shared.mdc:0-0
Timestamp: 2025-07-20T22:00:19.380Z
Learning: Applies to **/*.tsx : Use declarative JSX.

Learnt from: CR
PR: VladSez/easy-invoice-pdf#0
File: .cursor/rules/shared.mdc:0-0
Timestamp: 2025-07-20T22:00:19.380Z
Learning: Applies to **/*.tsx : Prefer Conditional (ternary) operator (? :) over Logical AND operator (&&) in React components.

Learnt from: CR
PR: VladSez/easy-invoice-pdf#0
File: .cursor/rules/shared.mdc:0-0
Timestamp: 2025-07-20T22:00:19.380Z
Learning: Applies to **/*.tsx : Implement responsive design with Tailwind CSS; use a mobile-first approach.

Learnt from: CR
PR: VladSez/easy-invoice-pdf#0
File: .cursor/rules/project-structure.mdc:0-0
Timestamp: 2025-07-20T21:59:55.483Z
Learning: Applies to {components,app}/**/*.tsx : Keep client state minimal

Learnt from: CR
PR: VladSez/easy-invoice-pdf#0
File: .cursor/rules/shared.mdc:0-0
Timestamp: 2025-07-20T22:00:19.380Z
Learning: Applies to **/*.{ts,tsx} : Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.

src/components/ui/button-helper.tsx (7)

Learnt from: CR
PR: VladSez/easy-invoice-pdf#0
File: .cursor/rules/project-structure.mdc:0-0
Timestamp: 2025-07-20T21:59:55.483Z
Learning: Applies to components/**/*.tsx : Components: PascalCase.tsx

Learnt from: CR
PR: VladSez/easy-invoice-pdf#0
File: .cursor/rules/shared.mdc:0-0
Timestamp: 2025-07-20T22:00:19.380Z
Learning: Applies to **/*.tsx : Favor named exports for components.

Learnt from: CR
PR: VladSez/easy-invoice-pdf#0
File: .cursor/rules/shared.mdc:0-0
Timestamp: 2025-07-20T22:00:19.380Z
Learning: Applies to **/*.tsx : Use Shadcn UI, Radix, and Tailwind for components and styling.

Learnt from: CR
PR: VladSez/easy-invoice-pdf#0
File: .cursor/rules/project-structure.mdc:0-0
Timestamp: 2025-07-20T21:59:55.483Z
Learning: Applies to app/**/page.tsx : Keep page components lean

Learnt from: CR
PR: VladSez/easy-invoice-pdf#0
File: .cursor/rules/shared.mdc:0-0
Timestamp: 2025-07-20T22:00:19.380Z
Learning: Applies to **/*.tsx : Implement responsive design with Tailwind CSS; use a mobile-first approach.

Learnt from: CR
PR: VladSez/easy-invoice-pdf#0
File: .cursor/rules/project-structure.mdc:0-0
Timestamp: 2025-07-20T21:59:55.483Z
Learning: Applies to {components,app}/**/*.tsx : Keep client state minimal

Learnt from: CR
PR: VladSez/easy-invoice-pdf#0
File: .cursor/rules/shared.mdc:0-0
Timestamp: 2025-07-20T22:00:19.380Z
Learning: Applies to **/*.tsx : Use functional components with TypeScript interfaces.

src/mdx-components.tsx (10)