Add prettier config and run prettier #99
Conversation
WalkthroughThe changes in this pull request primarily involve updates to code formatting and style consistency across various files in the project. Key modifications include the introduction of semicolons, standardization of string delimiters from double quotes to single quotes, and reordering of import statements. Additionally, new configuration files for Prettier and updates to existing ones enhance formatting rules. The project dependencies have also been updated, particularly for Prettier, to ensure a consistent development environment. Changes
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 44
🧹 Outside diff range and nitpick comments (17)
package.json (1)
28-29: LGTM! Consider consolidating prettier in devDependencies.The addition of prettier to devDependencies is correct, as it's a development tool. However, based on the AI summary, prettier also exists in the dependencies section. Consider removing it from dependencies and keeping it only in devDependencies.
"devDependencies": { "biome": "^0.3.3", "check-dependency-version-consistency": "^4.1.0", "prettier": "^3.3.3" }, "dependencies": { "@babel/runtime": "^7.24.4", "ajv": "^8.12.0", - "prettier": "^3.3.3", "node-gyp": "^10.1.0", "turbo": "^2.1.3", "typescript": "^5.4.5" },apps/vite/src/components/extras/MetalPrice.tsx (1)
Line range hint
12-39: Consider extracting metal data to a configuration object.The JSX structure is well-formatted, but the metal card data could be extracted to improve maintainability.
const METAL_DATA = [ { name: 'छापावाल', image: 'https://uxwing.com/wp-content/themes/uxwing/download/banking-finance/gold-icon.png', price: 965000, unit: 'प्रति तोला' }, // ... other metals ]; // Then in JSX: {METAL_DATA.map(metal => ( <MetalPriceCard key={metal.name} metalName={metal.name} metalImage={metal.image} price={metal.price} unit={metal.unit} /> ))}apps/vite/README.md (1)
Line range hint
34-49: LGTM! Consider adding a note about plugin installation.The ESLint configuration example is well-structured and properly demonstrates React plugin integration. However, since this is a README file, it would be helpful to include the npm/yarn command for installing the required dependencies.
Add installation instructions before the configuration example:
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config: + +```bash +npm install --save-dev eslint-plugin-react +# or +yarn add -D eslint-plugin-react +``` +apps/vite/src/components/calendar/Today.tsx (2)
9-26: Enhance accessibility with ARIA labels.Consider adding appropriate ARIA labels to improve screen reader support for the date information.
- <div className=" flex-row items-center rounded-lg border bg-white p-4 shadow-md"> + <div className=" flex-row items-center rounded-lg border bg-white p-4 shadow-md" role="region" aria-label="Today's Calendar"> - <div className="flex h-16 w-16 flex-col items-center justify-center gap-1 rounded-lg bg-gray-200 text-center"> + <div className="flex h-16 w-16 flex-col items-center justify-center gap-1 rounded-lg bg-gray-200 text-center" aria-label="Current Date">
Based on the gathered information, I can now provide the final response.
Self-host icons and implement dynamic time calculations
The review comment's concerns are valid as:
- The icons8.com URL is only used in this file (Today.tsx), and the codebase already has established icon directories at
apps/vite/public/icons/andapps/vite/src/components/icons/- No existing time calculation utilities were found, and the times are indeed hardcoded
Action items:
- Create SVG components for sunrise and sunset icons in
apps/vite/src/components/icons/following the existing pattern (see EventIcon.tsx and ListIcon.tsx)- Implement a time calculation utility to dynamically compute sunrise and sunset times
- Replace the external icon URLs with the local SVG components
- Replace hardcoded times (१७:३९) with computed values
🔗 Analysis chain
Line range hint
28-41: Consider improving reliability and maintainability.
- The sunrise/sunset times appear to be hardcoded. Consider making these dynamic.
- External image dependencies from icons8.com could cause reliability issues if the service is down.
Consider:
- Implementing a time calculation utility for dynamic values
- Self-hosting the icons in your assets directory
Let me try a different search strategy to verify the concerns.
This will help us:
- Find all occurrences of icons8.com across the codebase
- Understand if there's an existing pattern for importing images
- Identify if there are dedicated directories for assets
Let me analyze the results to provide a comprehensive verification of the review comment.
Let me check what icons are available in the local assets directories before making the final recommendation.
This will help us:
- See if there are existing icons we can reuse
- Check if there are any SVG components for sunrise/sunset icons
Then we can make a proper recommendation about self-hosting vs. using external icons.
Let me check one last thing to verify if there's any time calculation utility already present in the codebase.
This will help us understand if there's existing functionality for time calculations before making the final recommendation.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Check if icons are used elsewhere in the codebase rg --type tsx --type jsx "icons8.com" -lLength of output: 68
Script:
#!/bin/bash # Search for icons8.com URLs in all files rg "icons8\.com" -l # Search for any image imports or asset references rg -t js -t jsx -t ts -t tsx "import.*\.(png|svg|jpg|jpeg)" -l # Look for potential asset directories fd -t d "assets|images|icons"Length of output: 350
Script:
#!/bin/bash # Check contents of icon directories for potential sunrise/sunset icons fd -t f . "apps/vite/public/icons/" "apps/vite/src/assets/" "apps/vite/src/components/icons/" # Check if there are any SVG icon components that might be related rg -t ts -t tsx "(sunrise|sunset)" "apps/vite/src/components/icons/"Length of output: 954
Script:
#!/bin/bash # Look for any time/date calculation utilities rg -g '*.{ts,tsx,js,jsx}' -l "(getSunrise|getSunset|calculateTime|sunTime)" # Check if there are any date/time utilities in specific utility folders fd -t f . "utils" "helpers" "lib" | grep -i "time\|date"Length of output: 327
apps/vite/src/components/SingleCalendarEvent.tsx (1)
Line range hint
44-57: Extract date formatting options to a constantThe date formatting options are used in multiple places. Consider extracting them to reusable constants.
+const DATE_FORMAT_OPTIONS = { + weekday: { weekday: 'long' } as const; + full: { + month: 'long', + day: 'numeric', + year: 'numeric' + } as const; +}; // Then use them in the component: .toLocaleDateString( isNepaliLanguage ? 'ne-NP' : 'en-US', - { weekday: 'long' } + DATE_FORMAT_OPTIONS.weekday ) .toLocaleDateString( isNepaliLanguage ? 'ne-NP' : 'en-US', - { - month: 'long', - day: 'numeric', - year: 'numeric', - } + DATE_FORMAT_OPTIONS.full )apps/vite/src/components/calendar/CalendarGrid.tsx (2)
Line range hint
7-15: Consider extracting day names to constants or i18n.While the current implementation is clean, extracting the day names array to a constant or i18n configuration would improve maintainability and support potential internationalization requirements.
+const WEEK_DAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] as const; const CalendarGrid: React.FC = () => { return ( <div className="rounded-xl border border-indigo-200"> <div className="grid grid-cols-7 rounded-t-3xl border-b border-indigo-200"> - {['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map((day) => ( + {WEEK_DAYS.map((day) => (🧰 Tools
🪛 Biome
[error] 1-1: All these imports are only used as types.
Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
Safe fix: Use import type.(lint/style/useImportType)
Based on the gathered information, I can now provide the final response:
Fixed grid size of 35 cells is problematic and needs dynamic calculation
The current implementation uses a hardcoded
Array(35)which assumes a fixed 5-week calendar grid (7x5). This is incorrect because:
- A month can span across 4 to 6 weeks depending on the month length (28-31 days) and the starting day of the week
- The component doesn't take any props for date/month information, making it impossible to render the correct dates
- The rendered dates are just sequential numbers (index + 1) without any actual date logic
Suggested improvements:
- Accept month and year as props
- Calculate the number of days in the month using the Nepali calendar utilities (seen in other files)
- Account for the starting day of the week to determine the total grid size
- Use the actual date objects for rendering instead of array indices
🔗 Analysis chain
Line range hint
17-19: Consider dynamic grid size calculation.Using a fixed size of 35 cells might not correctly handle months with different lengths or weeks. Consider calculating the grid size based on the actual month data.
Let me gather more information about the calendar grid implementation to verify this concern properly.
Let me gather one more piece of information to understand how the calendar dates are being handled in the component.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Check if there's any month/date handling logic elsewhere in the codebase rg -g '!*.test.*' -g '!*.spec.*' "new Date|getMonth|getDate" ./apps/vite/src/Length of output: 5125
Script:
#!/bin/bash # Check the calendar grid implementation and any month-related calculations rg -g '!*.test.*' -g '!*.spec.*' -A 10 "Array\(35\)" ./apps/vite/src/ # Also check for any calendar-related utilities or helper functions ast-grep --pattern 'function $FUNC($$$) { $$$ getMonth($$$) $$$ }'Length of output: 1308
Script:
#!/bin/bash # Check the full implementation of CalendarGrid component and its props cat ./apps/vite/src/components/calendar/CalendarGrid.tsx # Also check if there are any month-specific calculations in the parent components rg -g '!*.test.*' -g '!*.spec.*' "daysInMonth|monthDays|numberOfDays" ./apps/vite/src/Length of output: 2534
🧰 Tools
🪛 Biome
[error] 21-21: Avoid using the index of an array as key property in an element.
This is the source of the key value.
The order of the items may change, and this also affects performances and component state.
Check the React documentation.(lint/suspicious/noArrayIndexKey)
apps/vite/src/components/calendar/Panchang.tsx (1)
26-26: Remove unnecessary template literalThe template literal isn't needed here since there's no string interpolation or special characters.
- <div className={`mb-8`}> + <div className="mb-8">🧰 Tools
🪛 Biome
[error] 26-26: Do not use template literals if interpolation and special-character handling are not needed.
Unsafe fix: Replace with string literal
(lint/style/noUnusedTemplateLiteral)
apps/vite/src/pages/DateConverter.tsx (1)
Line range hint
75-81: Extract complex date formatting logic.The template literal for Nepali date formatting is complex and would be more maintainable if extracted into a separate function.
+ function formatNepaliDate(date: NepaliDate): string { + return `${nepaliNumber(`${date.getYear()}`)} ${ + nepaliMonths[date.getMonth()] + } ${nepaliNumber( + `${date.getDate()}, ${date + .getDateObject() + .toLocaleString('ne-NP', { weekday: 'long' })}`, + )}`; + } - {`${nepaliNumber(`${nepaliDate.getYear()}`)} ${ - nepaliMonths[nepaliDate.getMonth()] - } ${nepaliNumber( - `${nepaliDate.getDate()}, ${nepaliDate - .getDateObject() - .toLocaleString('ne-NP', { weekday: 'long' })}`, - )}`} + {formatNepaliDate(nepaliDate)}apps/vite/src/pages/PrivacyPolicy.tsx (1)
104-105: Consider enhancing email link accessibility.The email link could benefit from additional accessibility attributes to improve user experience.
Consider updating the email link with these improvements:
-<a href="mailto:[email protected]">[email protected]</a> +<a + href="mailto:[email protected]" + aria-label="Email us at [email protected]" + className="underline hover:text-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500" +> + [email protected] +</a>apps/vite/src/components/Navbar.tsx (2)
63-65: Consider running Prettier with Tailwind class sortingWhile the formatting is consistent, the Tailwind classes could benefit from the configured prettier-plugin-tailwindcss sorting for better organization. For example, classes like 'rounded-md', 'px-3', 'py-2' could be sorted in a consistent order across all className attributes.
Also applies to: 106-108
Line range hint
84-93: Simplify redundant conditional renderingThe current implementation has redundant conditions that render the same output.
Consider simplifying the logic:
- {status === 'LOGGED_IN' ? ( - <UserSettings - status={status} - photoUrl={data.profilePictureUrl} - /> - ) : status === 'NOT_LOGGED_IN' ? ( - <UserSettings status={status} /> - ) : ( - <UserSettings status={status} /> - )} + <UserSettings + status={status} + {...(status === 'LOGGED_IN' ? { photoUrl: data.profilePictureUrl } : {})} + />apps/vite/src/components/EventDetailsDialog.tsx (1)
110-112: Consider using template literals for cleaner string formatting.Instead of explicit space concatenation, template literals would be more readable.
-{' '} -{event.location} +{` ${event.location}`}apps/vite/src/constants/nepaliDateData.ts (1)
Line range hint
1-95: Consider adding TypeScript type definitions and documentation.To improve type safety and maintainability, consider:
- Adding type definitions for the data structure
- Including documentation about the data source and validation process
Here's a suggested implementation:
/** * Represents the number of days in each month of a Nepali year. * Index 0: Year number * Index 1-12: Number of days in each month (Baisakh to Chaitra) */ type NepaliYearData = [number, ...number[]]; /** * Maps Nepali years to their corresponding calendar data. * Source: [Add source documentation here] */ interface NepaliDateData { [year: string]: NepaliYearData; } const nepaliDateData: NepaliDateData = { // ... existing data };apps/vite/src/components/MonthCalendar.tsx (1)
129-137: Fix JSX element and className template literal.Two minor issues to address:
- The span element should be self-closing
- The template literal is unnecessary for a static string
- <span - key={i} - style={{ - backgroundColor: color ? colors[color] : '#475569', - }} - className={classNames( - `mx-[1px] inline-block h-1 w-1 rounded-full`, - )} - ></span> + <span + key={`event-color-${color}-${dayIdx}`} + style={{ + backgroundColor: color ? colors[color] : '#475569', + }} + className={classNames( + 'mx-[1px] inline-block h-1 w-1 rounded-full' + )} + />🧰 Tools
🪛 Biome
[error] 129-137: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
[error] 135-135: Do not use template literals if interpolation and special-character handling are not needed.
Unsafe fix: Replace with string literal
(lint/style/noUnusedTemplateLiteral)
[error] 130-130: Avoid using the index of an array as key property in an element.
This is the source of the key value.
The order of the items may change, and this also affects performances and component state.
Check the React documentation.(lint/suspicious/noArrayIndexKey)
apps/vite/src/components/AddEventModal.tsx (1)
Line range hint
208-224: Enhance color selection accessibilityAdd proper aria labels to color selection inputs for better screen reader support.
<input key={idx} type="radio" name="colorId" value={color} + aria-label={`Select ${color} color`} style={{ backgroundColor: colors[color], }} className={`m-1 h-6 w-6 cursor-pointer appearance-none rounded-full border border-gray-300 shadow-sm outline-none focus:outline-blue-600`} />🧰 Tools
🪛 Biome
[error] 222-222: Do not use template literals if interpolation and special-character handling are not needed.
Unsafe fix: Replace with string literal
(lint/style/noUnusedTemplateLiteral)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (1)
bun.lockbis excluded by!**/bun.lockb
📒 Files selected for processing (64)
- .prettierrc (1 hunks)
- apps/vite/.prettierrc (1 hunks)
- apps/vite/README.md (3 hunks)
- apps/vite/eslint.config.js (2 hunks)
- apps/vite/index.html (2 hunks)
- apps/vite/package.json (2 hunks)
- apps/vite/postcss.config.js (1 hunks)
- apps/vite/public/site.webmanifest (1 hunks)
- apps/vite/src/App.tsx (2 hunks)
- apps/vite/src/Body.tsx (2 hunks)
- apps/vite/src/components/AddEventModal.tsx (5 hunks)
- apps/vite/src/components/AnnouncementAlert.tsx (1 hunks)
- apps/vite/src/components/DarkModeProvider.tsx (2 hunks)
- apps/vite/src/components/Debugger.tsx (1 hunks)
- apps/vite/src/components/DropDown.tsx (3 hunks)
- apps/vite/src/components/EventDetailsDialog.tsx (3 hunks)
- apps/vite/src/components/Footer.tsx (1 hunks)
- apps/vite/src/components/InstallBtn.tsx (2 hunks)
- apps/vite/src/components/MonthCalendar.tsx (5 hunks)
- apps/vite/src/components/Navbar.tsx (5 hunks)
- apps/vite/src/components/NepaliDatePicker.tsx (5 hunks)
- apps/vite/src/components/Octocat.tsx (1 hunks)
- apps/vite/src/components/SingleCalendarEvent.tsx (4 hunks)
- apps/vite/src/components/SingleUserEvent.tsx (3 hunks)
- apps/vite/src/components/Spinner.tsx (2 hunks)
- apps/vite/src/components/SplitButton.tsx (2 hunks)
- apps/vite/src/components/UserSettings.tsx (4 hunks)
- apps/vite/src/components/YearMonthPicker.tsx (4 hunks)
- apps/vite/src/components/calendar/CalendarGrid.tsx (2 hunks)
- apps/vite/src/components/calendar/CalendarHeader.tsx (5 hunks)
- apps/vite/src/components/calendar/EventList.tsx (1 hunks)
- apps/vite/src/components/calendar/Panchang.tsx (3 hunks)
- apps/vite/src/components/calendar/Today.tsx (2 hunks)
- apps/vite/src/components/calendar/UpcomingEvent.tsx (2 hunks)
- apps/vite/src/components/extras/CurrencyConverterCard.tsx (2 hunks)
- apps/vite/src/components/extras/DateConverter.tsx (6 hunks)
- apps/vite/src/components/extras/MetalPrice.tsx (2 hunks)
- apps/vite/src/components/extras/MetalPriceCard.tsx (2 hunks)
- apps/vite/src/components/icons/EventIcon.tsx (2 hunks)
- apps/vite/src/components/icons/ListIcon.tsx (3 hunks)
- apps/vite/src/constants/availableYears.ts (1 hunks)
- apps/vite/src/constants/colors.ts (1 hunks)
- apps/vite/src/constants/mahina.ts (1 hunks)
- apps/vite/src/constants/nepaliDateData.ts (1 hunks)
- apps/vite/src/helper/api.ts (1 hunks)
- apps/vite/src/helper/bullions.ts (2 hunks)
- apps/vite/src/helper/dates.ts (2 hunks)
- apps/vite/src/helper/nepaliNumber.ts (1 hunks)
- apps/vite/src/helper/useLanguage.ts (1 hunks)
- apps/vite/src/helper/utils.ts (1 hunks)
- apps/vite/src/i18next.ts (1 hunks)
- apps/vite/src/lib/sw-helper.ts (2 hunks)
- apps/vite/src/main.tsx (1 hunks)
- apps/vite/src/pages/About.tsx (1 hunks)
- apps/vite/src/pages/Calendar2.tsx (3 hunks)
- apps/vite/src/pages/DateConverter.tsx (3 hunks)
- apps/vite/src/pages/GoogleApiDisclosure.tsx (1 hunks)
- apps/vite/src/pages/Home.tsx (3 hunks)
- apps/vite/src/pages/PrivacyPolicy.tsx (1 hunks)
- apps/vite/src/pages/UpcomingEvents.tsx (2 hunks)
- apps/vite/src/service-worker/sw.ts (4 hunks)
- apps/vite/tailwind.config.js (1 hunks)
- apps/vite/vite.config.ts (1 hunks)
- package.json (1 hunks)
✅ Files skipped from review due to trivial changes (27)
- apps/vite/.prettierrc
- apps/vite/eslint.config.js
- apps/vite/postcss.config.js
- apps/vite/public/site.webmanifest
- apps/vite/src/Body.tsx
- apps/vite/src/components/AnnouncementAlert.tsx
- apps/vite/src/components/Debugger.tsx
- apps/vite/src/components/Footer.tsx
- apps/vite/src/components/Octocat.tsx
- apps/vite/src/components/Spinner.tsx
- apps/vite/src/components/icons/EventIcon.tsx
- apps/vite/src/components/icons/ListIcon.tsx
- apps/vite/src/constants/availableYears.ts
- apps/vite/src/constants/colors.ts
- apps/vite/src/constants/mahina.ts
- apps/vite/src/helper/api.ts
- apps/vite/src/helper/bullions.ts
- apps/vite/src/helper/nepaliNumber.ts
- apps/vite/src/helper/useLanguage.ts
- apps/vite/src/helper/utils.ts
- apps/vite/src/i18next.ts
- apps/vite/src/lib/sw-helper.ts
- apps/vite/src/main.tsx
- apps/vite/src/pages/Calendar2.tsx
- apps/vite/src/pages/GoogleApiDisclosure.tsx
- apps/vite/tailwind.config.js
- apps/vite/vite.config.ts
🧰 Additional context used
🪛 Gitleaks
apps/vite/index.html
56-56: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
🪛 Biome
apps/vite/src/components/AddEventModal.tsx
[error] 14-14: All these imports are only used as types.
Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
Safe fix: Use import type.(lint/style/useImportType)
[error] 24-24: Use Number.parseInt instead of the equivalent global.
ES2015 moved some globals into the Number namespace for consistency.
Safe fix: Use Number.parseInt instead.(lint/style/useNumberNamespace)
[error] 25-25: Use Number.parseInt instead of the equivalent global.
ES2015 moved some globals into the Number namespace for consistency.
Safe fix: Use Number.parseInt instead.(lint/style/useNumberNamespace)
apps/vite/src/components/DarkModeProvider.tsx
[error] 1-1: The default import is only used as a type.
Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
Safe fix: Use import type.(lint/style/useImportType)
apps/vite/src/components/DropDown.tsx
[error] 1-1: Some named imports are only used as types.
This import is only used as a type.
Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
Safe fix: Add inline type keywords.(lint/style/useImportType)
[error] 49-49: Avoid using the index of an array as key property in an element.
This is the source of the key value.
The order of the items may change, and this also affects performances and component state.
Check the React documentation.(lint/suspicious/noArrayIndexKey)
apps/vite/src/components/EventDetailsDialog.tsx
[error] 13-13: All these imports are only used as types.
Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
Safe fix: Use import type.(lint/style/useImportType)
[error] 118-125: Provide an explicit type prop for the button element.
The default type of a button is submit, which causes the submission of a form when placed inside a
formelement. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset(lint/a11y/useButtonType)
apps/vite/src/components/InstallBtn.tsx
[error] 1-1: The default import is only used as a type.
Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
Safe fix: Use import type.(lint/style/useImportType)
[error] 98-98: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
(lint/a11y/useKeyWithClickEvents)
apps/vite/src/components/MonthCalendar.tsx
[error] 113-113: Use === instead of ==. == is only allowed when comparing against
null== is only allowed when comparing against null
Using == may be unsafe if you are relying on type coercion
Unsafe fix: Use ===(lint/suspicious/noDoubleEquals)
[error] 129-137: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
[error] 135-135: Do not use template literals if interpolation and special-character handling are not needed.
Unsafe fix: Replace with string literal
(lint/style/noUnusedTemplateLiteral)
[error] 130-130: Avoid using the index of an array as key property in an element.
This is the source of the key value.
The order of the items may change, and this also affects performances and component state.
Check the React documentation.(lint/suspicious/noArrayIndexKey)
apps/vite/src/components/NepaliDatePicker.tsx
[error] 33-33: Use === instead of ==. == is only allowed when comparing against
null== is only allowed when comparing against null
Using == may be unsafe if you are relying on type coercion
Unsafe fix: Use ===(lint/suspicious/noDoubleEquals)
[error] 1-1: Some named imports are only used as types.
This import is only used as a type.
Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
Safe fix: Add inline type keywords.(lint/style/useImportType)
[error] 90-90: Use === instead of ==. == is only allowed when comparing against
null== is only allowed when comparing against null
Using == may be unsafe if you are relying on type coercion
Unsafe fix: Use ===(lint/suspicious/noDoubleEquals)
[error] 91-91: Use Number.parseInt instead of the equivalent global.
ES2015 moved some globals into the Number namespace for consistency.
Safe fix: Use Number.parseInt instead.(lint/style/useNumberNamespace)
[error] 92-92: Use Number.parseInt instead of the equivalent global.
ES2015 moved some globals into the Number namespace for consistency.
Safe fix: Use Number.parseInt instead.(lint/style/useNumberNamespace)
[error] 94-94: Use Number.parseInt instead of the equivalent global.
ES2015 moved some globals into the Number namespace for consistency.
Safe fix: Use Number.parseInt instead.(lint/style/useNumberNamespace)
apps/vite/src/components/SingleCalendarEvent.tsx
[error] 1-1: All these imports are only used as types.
Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
Safe fix: Use import type.(lint/style/useImportType)
[error] 3-3: All these imports are only used as types.
Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
Safe fix: Use import type.(lint/style/useImportType)
apps/vite/src/components/SingleUserEvent.tsx
[error] 3-3: All these imports are only used as types.
Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
Safe fix: Use import type.(lint/style/useImportType)
apps/vite/src/components/SplitButton.tsx
[error] 1-1: All these imports are only used as types.
Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
Safe fix: Use import type.(lint/style/useImportType)
apps/vite/src/components/UserSettings.tsx
[error] 11-12: Provide a text alternative through the alt, aria-label or aria-labelledby attribute
Meaningful alternative text on elements helps users relying on screen readers to understand content's purpose within a page.
If the content is decorative, redundant, or obscured, consider hiding it from assistive technologies with the aria-hidden attribute.(lint/a11y/useAltText)
[error] 13-14: Provide a text alternative through the alt, aria-label or aria-labelledby attribute
Meaningful alternative text on elements helps users relying on screen readers to understand content's purpose within a page.
If the content is decorative, redundant, or obscured, consider hiding it from assistive technologies with the aria-hidden attribute.(lint/a11y/useAltText)
[error] 29-29: Use !== instead of !=. != is only allowed when comparing against
null!= is only allowed when comparing against null
Using != may be unsafe if you are relying on type coercion
Unsafe fix: Use !==(lint/suspicious/noDoubleEquals)
[error] 37-37: Avoid the words "image", "picture", or "photo" in img element alt text.
Screen readers announce img elements as "images", so it is not necessary to redeclare this in alternative text.
(lint/a11y/noRedundantAlt)
[error] 42-42: Use === instead of ==. == is only allowed when comparing against
null== is only allowed when comparing against null
Using == may be unsafe if you are relying on type coercion
Unsafe fix: Use ===(lint/suspicious/noDoubleEquals)
[error] 43-43: Use === instead of ==. == is only allowed when comparing against
null== is only allowed when comparing against null
Using == may be unsafe if you are relying on type coercion
Unsafe fix: Use ===(lint/suspicious/noDoubleEquals)
[error] 66-66: Use !== instead of !=. != is only allowed when comparing against
null!= is only allowed when comparing against null
Using != may be unsafe if you are relying on type coercion
Unsafe fix: Use !==(lint/suspicious/noDoubleEquals)
[error] 71-71: Use === instead of ==. == is only allowed when comparing against
null== is only allowed when comparing against null
Using == may be unsafe if you are relying on type coercion
Unsafe fix: Use ===(lint/suspicious/noDoubleEquals)
[error] 81-81: Use === instead of ==. == is only allowed when comparing against
null== is only allowed when comparing against null
Using == may be unsafe if you are relying on type coercion
Unsafe fix: Use ===(lint/suspicious/noDoubleEquals)
[error] 97-97: Use === instead of ==. == is only allowed when comparing against
null== is only allowed when comparing against null
Using == may be unsafe if you are relying on type coercion
Unsafe fix: Use ===(lint/suspicious/noDoubleEquals)
[error] 98-98: Provide an explicit type prop for the button element.
The default type of a button is submit, which causes the submission of a form when placed inside a
formelement. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset(lint/a11y/useButtonType)
[error] 102-102: Provide an explicit type prop for the button element.
The default type of a button is submit, which causes the submission of a form when placed inside a
formelement. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset(lint/a11y/useButtonType)
apps/vite/src/components/YearMonthPicker.tsx
[error] 22-22: Use === instead of ==. == is only allowed when comparing against
null== is only allowed when comparing against null
Using == may be unsafe if you are relying on type coercion
Unsafe fix: Use ===(lint/suspicious/noDoubleEquals)
[error] 30-30: Use === instead of ==. == is only allowed when comparing against
null== is only allowed when comparing against null
Using == may be unsafe if you are relying on type coercion
Unsafe fix: Use ===(lint/suspicious/noDoubleEquals)
apps/vite/src/components/calendar/CalendarGrid.tsx
[error] 1-1: All these imports are only used as types.
Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
Safe fix: Use import type.(lint/style/useImportType)
apps/vite/src/components/calendar/CalendarHeader.tsx
[error] 1-1: The default import is only used as a type.
Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
Safe fix: Use import type.(lint/style/useImportType)
[error] 40-40: Provide an explicit type prop for the button element.
The default type of a button is submit, which causes the submission of a form when placed inside a
formelement. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset(lint/a11y/useButtonType)
[error] 47-47: Provide an explicit type prop for the button element.
The default type of a button is submit, which causes the submission of a form when placed inside a
formelement. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset(lint/a11y/useButtonType)
[error] 67-67: Provide an explicit type prop for the button element.
The default type of a button is submit, which causes the submission of a form when placed inside a
formelement. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset(lint/a11y/useButtonType)
[error] 88-88: Provide an explicit type prop for the button element.
The default type of a button is submit, which causes the submission of a form when placed inside a
formelement. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset(lint/a11y/useButtonType)
[error] 91-91: Provide an explicit type prop for the button element.
The default type of a button is submit, which causes the submission of a form when placed inside a
formelement. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset(lint/a11y/useButtonType)
[error] 94-94: Provide an explicit type prop for the button element.
The default type of a button is submit, which causes the submission of a form when placed inside a
formelement. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset(lint/a11y/useButtonType)
[error] 99-99: Provide an explicit type prop for the button element.
The default type of a button is submit, which causes the submission of a form when placed inside a
formelement. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset(lint/a11y/useButtonType)
apps/vite/src/components/calendar/EventList.tsx
[error] 1-1: All these imports are only used as types.
Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
Safe fix: Use import type.(lint/style/useImportType)
[error] 25-25: Avoid using the index of an array as key property in an element.
This is the source of the key value.
The order of the items may change, and this also affects performances and component state.
Check the React documentation.(lint/suspicious/noArrayIndexKey)
apps/vite/src/components/calendar/Panchang.tsx
[error] 26-26: Do not use template literals if interpolation and special-character handling are not needed.
Unsafe fix: Replace with string literal
(lint/style/noUnusedTemplateLiteral)
apps/vite/src/components/calendar/Today.tsx
[error] 46-53: Provide an explicit type prop for the button element.
The default type of a button is submit, which causes the submission of a form when placed inside a
formelement. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset(lint/a11y/useButtonType)
apps/vite/src/components/calendar/UpcomingEvent.tsx
[error] 1-1: All these imports are only used as types.
Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
Safe fix: Use import type.(lint/style/useImportType)
apps/vite/src/components/extras/CurrencyConverterCard.tsx
[error] 1-1: The default import is only used as a type.
Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
Safe fix: Use import type.(lint/style/useImportType)
[error] 50-55: A form label must be associated with an input.
Consider adding a
fororhtmlForattribute to the label element or moving the input element to inside the label element.(lint/a11y/noLabelWithoutControl)
[error] 69-74: A form label must be associated with an input.
Consider adding a
fororhtmlForattribute to the label element or moving the input element to inside the label element.(lint/a11y/noLabelWithoutControl)
[error] 19-19: Use Number.parseFloat instead of the equivalent global.
ES2015 moved some globals into the Number namespace for consistency.
Safe fix: Use Number.parseFloat instead.(lint/style/useNumberNamespace)
apps/vite/src/components/extras/DateConverter.tsx
[error] 1-1: The default import is only used as a type.
Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
Safe fix: Use import type.(lint/style/useImportType)
[error] 33-34: A form label must be associated with an input.
Consider adding a
fororhtmlForattribute to the label element or moving the input element to inside the label element.(lint/a11y/noLabelWithoutControl)
apps/vite/src/components/extras/MetalPriceCard.tsx
[error] 1-1: All these imports are only used as types.
Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
Safe fix: Use import type.(lint/style/useImportType)
apps/vite/src/helper/dates.ts
[error] 4-4: All these imports are only used as types.
Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
Safe fix: Use import type.(lint/style/useImportType)
apps/vite/src/pages/About.tsx
[error] 218-221: Provide a text alternative through the alt, aria-label or aria-labelledby attribute
Meaningful alternative text on elements helps users relying on screen readers to understand content's purpose within a page.
If the content is decorative, redundant, or obscured, consider hiding it from assistive technologies with the aria-hidden attribute.(lint/a11y/useAltText)
apps/vite/src/pages/Home.tsx
[error] 7-7: Some named imports are only used as types.
This import is only used as a type.
This import is only used as a type.
Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
Safe fix: Add inline type keywords.(lint/style/useImportType)
[error] 20-20: Use Number.parseInt instead of the equivalent global.
ES2015 moved some globals into the Number namespace for consistency.
Safe fix: Use Number.parseInt instead.(lint/style/useNumberNamespace)
[error] 21-21: Use Number.parseInt instead of the equivalent global.
ES2015 moved some globals into the Number namespace for consistency.
Safe fix: Use Number.parseInt instead.(lint/style/useNumberNamespace)
apps/vite/src/pages/UpcomingEvents.tsx
[error] 3-3: All these imports are only used as types.
Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
Safe fix: Use import type.(lint/style/useImportType)
🔇 Additional comments (44)
.prettierrc (1)
2-4: LGTM! Configuration changes align with common best practices.The updated configuration enforces:
- Trailing commas in all possible places (helps with cleaner git diffs)
- Mandatory semicolons (prevents ASI issues)
- Single quotes for strings (consistency)
apps/vite/src/App.tsx (3)
1-9: Well-organized import statements!The imports follow a clear and logical organization pattern with appropriate grouping and spacing:
- Side effects
- External dependencies
- Internal modules
- Local imports
Line range hint
11-22: Clean component implementation with proper provider hierarchy!The component structure is well-organized with appropriate provider nesting and consistent formatting.
Line range hint
1-24: Formatting changes align perfectly with PR objectives!The changes demonstrate successful implementation of Prettier configuration:
- Consistent use of single quotes
- Well-organized import statements
- Clean, consistent spacing and indentation
apps/vite/src/pages/UpcomingEvents.tsx (2)
Line range hint
11-27: LGTM! Formatting changes look good.The formatting changes are consistent with the PR objectives, and the underlying logic remains correct and well-structured.
🧰 Tools
🪛 Biome
[error] 3-3: All these imports are only used as types.
Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
Safe fix: Use import type.(lint/style/useImportType)
30-30: LGTM! Export statement is properly formatted.The export statement follows the new formatting standards.
apps/vite/src/components/SplitButton.tsx (4)
1-3: LGTM! Import statements are properly formatted.The single quotes usage aligns with the new Prettier configuration.
🧰 Tools
🪛 Biome
[error] 1-1: All these imports are only used as types.
Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
Safe fix: Use import type.(lint/style/useImportType)
9-12: LGTM! Props interface is well-typed.The type definitions are clear and properly formatted with semicolons.
33-33: LGTM! Export statement is properly formatted.
Line range hint
15-30: LGTM! Component implementation is clean and well-formatted.The Tailwind classes are properly sorted and the component logic is well-structured.
✅ Verification successful
Let me check the package.json to verify if the plugin is properly configured.
Let me check the package.json dependencies to verify if the plugin is installed and then look for prettier configuration in other possible locations.
Tailwind class sorting is properly configured
The verification confirms that
prettier-plugin-tailwindcssis correctly installed as a dev dependency inapps/vite/package.json. Since Prettier 3.0, the plugin is automatically loaded when installed and doesn't require explicit configuration. The Tailwind classes in the component are indeed properly sorted, which indicates the plugin is working as expected.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Verify prettier-plugin-tailwindcss is properly configured # Description: Check if the plugin is listed in prettier config # Test: Look for tailwind plugin in prettier config rg -l "prettier-plugin-tailwindcss" --type json --type jsLength of output: 80
Script:
#!/bin/bash # Check the prettier-plugin-tailwindcss configuration in package.json cat apps/vite/package.json | jq '.prettier' # Also check for any .prettierrc files that might contain the configuration fd -e prettierrc -e .prettierrc.json -e .prettierrc.jsLength of output: 105
Script:
#!/bin/bash # Check if prettier-plugin-tailwindcss is listed in dependencies cat apps/vite/package.json | jq '.dependencies, .devDependencies' # Look for prettier config in package.json or other common config files fd -e json -e js -e yaml -e yml | rg -l 'prettier|.prettierrc'Length of output: 1610
🧰 Tools
🪛 Biome
[error] 1-1: All these imports are only used as types.
Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
Safe fix: Use import type.(lint/style/useImportType)
apps/vite/src/components/extras/MetalPrice.tsx (2)
1-4: LGTM! Import statements are properly organized.The imports are now correctly sorted with React import first, followed by local imports.
42-42: LGTM! Export statement is properly formatted.apps/vite/README.md (1)
25-25: LGTM! Consistent with new formatting standards.The addition of the semicolon aligns with the PR's goal of standardizing code formatting across the project.
apps/vite/package.json (3)
10-12: LGTM: Scripts section changes are well-structured.The new Prettier scripts provide clear commands for both checking (
prettier:list) and fixing (prettier:fix) formatting issues, which aligns well with the PR objectives.
51-54: Review major version upgrades for core dependencies.Several core dependencies have major version updates:
- TypeScript: ^5.5.3
- Vite: ^5.4.8
- Tailwind: ^3.4.14
These updates might introduce breaking changes. Please ensure:
- The project builds successfully
- All TypeScript types are compatible
- Vite configuration is updated for v5
35-35: Verify Prettier plugin configuration.The addition of Prettier plugins aligns with the PR objectives:
@ianvs/prettier-plugin-sort-importsfor import sortingprettier-plugin-tailwindcssfor Tailwind class sortingEnsure these plugins are properly configured in the
.prettierrcfile.#!/bin/bash # Check if prettier config exists and includes the plugins rg -A 10 'prettier-plugin-sort-imports|prettier-plugin-tailwindcss' .prettierrc || echo "Prettier config not found or plugins not configured"Also applies to: 48-49
apps/vite/src/components/calendar/Today.tsx (2)
1-4: LGTM! Import statements are well-organized.The imports follow a logical grouping with React imports first, followed by local imports.
53-56: LGTM! Export statement is correct.apps/vite/src/components/SingleCalendarEvent.tsx (1)
72-72: LGTM!The export statement is clean and follows the standard pattern.
apps/vite/src/components/calendar/CalendarGrid.tsx (1)
3-5: LGTM! Clean component structure with well-organized Tailwind classes.The component follows React best practices and the Tailwind classes are properly formatted according to the new Prettier configuration.
apps/vite/src/components/calendar/Panchang.tsx (3)
1-7: LGTM: Improved type definitions formattingThe function signatures and type definitions are now properly formatted with clear separation, improving code readability.
Also applies to: 21-23
Line range hint
74-89: LGTM: Well-structured component implementationThe component structure is clean and follows React best practices with proper separation of concerns and consistent prop usage.
35-35: LGTM: Consistent Tailwind CSS class orderingThe Tailwind CSS classes are properly ordered according to the prettier-plugin-tailwindcss rules, improving code consistency and readability.
apps/vite/src/service-worker/sw.ts (4)
1-10: Well-organized imports!The imports are logically grouped between external dependencies and internal modules, with all necessary Workbox modules properly imported.
11-14: Type declarations look good!The TypeScript declarations are properly defined, with correct extension of ExtendableEvent interface.
Line range hint
34-83: Well-implemented caching strategies!The caching configuration is well-structured with:
- Appropriate cache strategies for different resource types
- Reasonable cache expiration times
- Proper handling of response statuses
Line range hint
34-83: Verify route caching patterns.Let's ensure all critical routes are properly cached.
✅ Verification successful
Let me gather more information about API endpoints and route patterns in the codebase to make a comprehensive verification.
Let me try a different approach to search for API endpoints and network requests.
Based on the search results, I can now provide a final verification of the route caching patterns.
The current service worker caching configuration is appropriate and complete
The implemented caching strategies cover all critical routes used in the application:
Font resources are properly cached:
- Google Fonts API (
fonts.googleapis.com)- Google Fonts Static files (
fonts.gstatic.com)API endpoints are correctly handled:
- The
/api/*pattern with NetworkFirst strategy covers all API calls found in the codebase:
- Calendar events endpoints
- User profile endpoints
- Google Calendar integration endpoints
Static assets:
- Precaching is implemented using
precacheAndRoute(self.__WB_MANIFEST)which handles all static assets automaticallyThe caching configuration aligns well with the actual network requests found in the codebase, with appropriate cache strategies for each type of resource. No additional routes requiring caching were identified.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Search for any additional route patterns in the codebase that might need caching rg -g '*.{ts,js}' "fetch\(['\"].*api.*['\"]" --type-add 'ts:*.{ts,tsx}' --type-add 'js:*.{js,jsx}'Length of output: 228
Script:
#!/bin/bash # Search for API route definitions and usages echo "=== Searching for API route definitions ===" rg -g '*.{ts,js}' "router\.(get|post|put|delete)" --type-add 'ts:*.{ts,tsx}' --type-add 'js:*.{js,jsx}' -A 1 echo -e "\n=== Searching for fetch calls and axios requests ===" rg -g '*.{ts,js}' "(fetch|axios)\.(get|post|put|delete)?\(.*" --type-add 'ts:*.{ts,tsx}' --type-add 'js:*.{js,jsx}' -A 1 echo -e "\n=== Searching for static asset imports ===" rg -g '*.{ts,js}' "import.*\.(svg|png|jpg|jpeg|gif|woff2?|ttf|eot)" --type-add 'ts:*.{ts,tsx}' --type-add 'js:*.{js,jsx}'Length of output: 676
Script:
#!/bin/bash # Search for API-related patterns with broader context echo "=== Searching for API routes and endpoints ===" rg -g '*.{ts,js}' "/api/" --type-add 'ts:*.{ts,tsx}' --type-add 'js:*.{js,jsx}' -B 1 -A 1 echo -e "\n=== Searching for network requests with broader patterns ===" rg -g '*.{ts,js}' "(fetch|axios)" --type-add 'ts:*.{ts,tsx}' --type-add 'js:*.{js,jsx}' -B 1 -A 1 echo -e "\n=== Looking for route configurations ===" rg -g '*.{ts,js}' "(registerRoute|createRouter|routes\s*=|routes:)" --type-add 'ts:*.{ts,tsx}' --type-add 'js:*.{js,jsx}' -B 1 -A 1Length of output: 7440
apps/vite/src/pages/Home.tsx (3)
Line range hint
53-69: LGTM! Well-implemented data fetchingThe React Query implementation follows best practices with:
- Proper query key composition
- Loading state handling
- Offline-first network mode
Line range hint
71-89: LGTM! Clean rendering implementationThe component rendering logic is well-structured with proper conditional rendering and component composition.
22-22: Verify the year range constraintsThe validation uses a hard-coded year range (2075-2082). Please verify if these constraints are still valid and consider making them configurable.
✅ Verification successful
Let me search for more context about year validations in the codebase to understand if there are any configuration files or other validation patterns.
Let me check for any available years data or configuration that might be defining these year ranges.
Let me check the available years configuration to understand if these year constraints are defined in a configuration file.
The year range validation is correctly aligned with available data
The validation check
year >= 2075 && year <= 2082matches exactly with the available calendar data years defined inavailableYears.ts. These constraints are not arbitrary but correspond to the actual calendar data files available in the system (from 2075 BS to 2082 BS). Making these values configurable would not provide any benefit since they are bound by the actual calendar data availability.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Search for other occurrences of year validation to ensure consistency rg -l "2075.*2082" .Length of output: 53
Script:
#!/bin/bash # Search for any year validation patterns or configurations rg "year.*[<>=]" -A 2 # Look for any constants or configuration files related to years fd -e ts -e js -e json | xargs rg "(MIN|MAX)_YEAR|yearConfig|YEAR_"Length of output: 3410
Script:
#!/bin/bash # Look for available years data or configuration rg "availableYears" -B 2 -A 2 # Check for any data files that might contain year configurations fd -e json | xargs rg "2075|2082"Length of output: 314000
Script:
#!/bin/bash # Check contents of availableYears.ts cat apps/vite/src/constants/availableYears.tsLength of output: 414
apps/vite/src/components/DropDown.tsx (2)
17-22: LGTM!The props destructuring is well-formatted and follows TypeScript best practices.
34-37: LGTM!The multi-line formatting of the icon component improves readability.
apps/vite/src/pages/DateConverter.tsx (1)
1-9: LGTM! Import organization follows best practices.The imports are well-organized following the conventional grouping pattern: React core, third-party libraries, and local imports.
apps/vite/src/components/UserSettings.tsx (1)
Line range hint
1-124: LGTM with the formatting changes.The formatting changes align well with the PR objectives. I've suggested some improvements above for:
- Accessibility (adding alt text to images)
- Type safety (using strict equality operators)
- Form safety (adding button type attributes)
Once these are addressed, the code will be both well-formatted and more robust.
🧰 Tools
🪛 Biome
[error] 11-12: Provide a text alternative through the alt, aria-label or aria-labelledby attribute
Meaningful alternative text on elements helps users relying on screen readers to understand content's purpose within a page.
If the content is decorative, redundant, or obscured, consider hiding it from assistive technologies with the aria-hidden attribute.(lint/a11y/useAltText)
[error] 13-14: Provide a text alternative through the alt, aria-label or aria-labelledby attribute
Meaningful alternative text on elements helps users relying on screen readers to understand content's purpose within a page.
If the content is decorative, redundant, or obscured, consider hiding it from assistive technologies with the aria-hidden attribute.(lint/a11y/useAltText)
[error] 29-29: Use !== instead of !=. != is only allowed when comparing against
null!= is only allowed when comparing against null
Using != may be unsafe if you are relying on type coercion
Unsafe fix: Use !==(lint/suspicious/noDoubleEquals)
[error] 37-37: Avoid the words "image", "picture", or "photo" in img element alt text.
Screen readers announce img elements as "images", so it is not necessary to redeclare this in alternative text.
(lint/a11y/noRedundantAlt)
[error] 39-45: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
Unsafe fix: Use a SelfClosingElement instead
(lint/style/useSelfClosingElements)
[error] 42-42: Use === instead of ==. == is only allowed when comparing against
null== is only allowed when comparing against null
Using == may be unsafe if you are relying on type coercion
Unsafe fix: Use ===(lint/suspicious/noDoubleEquals)
[error] 43-43: Use === instead of ==. == is only allowed when comparing against
null== is only allowed when comparing against null
Using == may be unsafe if you are relying on type coercion
Unsafe fix: Use ===(lint/suspicious/noDoubleEquals)
apps/vite/src/pages/PrivacyPolicy.tsx (1)
3-3: LGTM! Tailwind classes are properly organized.The Tailwind classes follow a logical order and maintain consistency with the prettier-plugin-tailwindcss configuration.
apps/vite/src/components/Navbar.tsx (2)
1-11: Well-organized import statements!The imports follow a clear and logical grouping pattern:
- External dependencies
- Internal modules
- Local imports
This organization improves code readability and maintainability.
16-20: LGTM - Consistent formatting in navigation configurationThe navigation array follows consistent formatting with proper indentation and single quotes.
apps/vite/src/components/EventDetailsDialog.tsx (1)
25-27: LGTM!The interface is well-defined with proper TypeScript types and consistent formatting.
apps/vite/src/constants/nepaliDateData.ts (1)
92-92: Please verify the source of the 2090 calendar data.The new entry follows the correct format and appears consistent with surrounding years. However, since this is calendar data that will be used for date calculations, please confirm the source and validation of these values.
apps/vite/src/components/calendar/CalendarHeader.tsx (1)
7-11: LGTM! Clean component interface and state managementThe component interface is well-typed and the state management is implemented correctly.
apps/vite/src/components/MonthCalendar.tsx (3)
1-20: LGTM! Well-organized imports.The imports are properly organized into external and internal dependencies with appropriate spacing.
48-74: LGTM! Clean hook usage and state management.The component's props are well-typed, and hooks are used appropriately.
Line range hint
154-220: LGTM! Well-implemented i18n and event handling.The internationalization implementation and event rendering logic are well-structured and maintainable.
apps/vite/src/pages/About.tsx (1)
1-237: LGTM: Clean and consistent formattingThe formatting changes align well with modern React/TypeScript conventions and the PR's objective of implementing Prettier formatting.
🧰 Tools
🪛 Biome
[error] 218-221: Provide a text alternative through the alt, aria-label or aria-labelledby attribute
Meaningful alternative text on elements helps users relying on screen readers to understand content's purpose within a page.
If the content is decorative, redundant, or obscured, consider hiding it from assistive technologies with the aria-hidden attribute.(lint/a11y/useAltText)
| { | ||
| "trailingComma": "es5", | ||
| "semi": false, | ||
| "singleQuote": false, | ||
| "trailingComma": "all", | ||
| "semi": true, | ||
| "singleQuote": true, | ||
| "arrowParens": "always", | ||
| "printWidth": 80 | ||
| } |
There was a problem hiding this comment.
Configure the mentioned Prettier plugins.
The PR objectives mention adding two Prettier plugins:
- prettier-plugin-tailwindcss
- prettier-plugin-sort-imports
However, these plugins are not configured in this file. Please add the necessary plugin configurations to ensure consistent formatting across the project.
Add the following configuration:
{
"trailingComma": "all",
"semi": true,
"singleQuote": true,
"arrowParens": "always",
- "printWidth": 80
+ "printWidth": 80,
+ "plugins": [
+ "prettier-plugin-tailwindcss",
+ "@ianvs/prettier-plugin-sort-imports"
+ ],
+ "importOrder": ["^@core/(.*)$", "^@server/(.*)$", "^@ui/(.*)$", "^[./]"],
+ "importOrderSeparation": true,
+ "importOrderSortSpecifiers": true
}📝 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.
| { | |
| "trailingComma": "es5", | |
| "semi": false, | |
| "singleQuote": false, | |
| "trailingComma": "all", | |
| "semi": true, | |
| "singleQuote": true, | |
| "arrowParens": "always", | |
| "printWidth": 80 | |
| } | |
| { | |
| "trailingComma": "all", | |
| "semi": true, | |
| "singleQuote": true, | |
| "arrowParens": "always", | |
| "printWidth": 80, | |
| "plugins": [ | |
| "prettier-plugin-tailwindcss", | |
| "@ianvs/prettier-plugin-sort-imports" | |
| ], | |
| "importOrder": ["^@core/(.*)$", "^@server/(.*)$", "^@ui/(.*)$", "^[./]"], | |
| "importOrderSeparation": true, | |
| "importOrderSortSpecifiers": true | |
| } |
| import { DayData } from "@miti/types" | ||
| import NepaliDate from 'nepali-datetime'; | ||
|
|
||
| import { DayData } from '@miti/types'; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Use import type for type-only imports.
Since DayData is only used as a type, we should use the import type syntax to ensure proper tree-shaking.
-import { DayData } from '@miti/types';
+import type { DayData } from '@miti/types';📝 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.
| import { DayData } from '@miti/types'; | |
| import type { DayData } from '@miti/types'; |
🧰 Tools
🪛 Biome
[error] 3-3: All these imports are only used as types.
Importing the types with import type ensures that they are removed by the compilers and avoids loading unnecessary modules.
Safe fix: Use import type.(lint/style/useImportType)
| @@ -25,13 +25,13 @@ | |||
| }, | |||
| "devDependencies": { | |||
| "biome": "^0.3.3", | |||
| "check-dependency-version-consistency": "^4.1.0" | |||
| "check-dependency-version-consistency": "^4.1.0", | |||
| "prettier": "^3.3.3" | |||
There was a problem hiding this comment.
Add required Prettier plugins mentioned in PR objectives.
The PR objectives mention adding two Prettier plugins:
- prettier-plugin-tailwindcss
- prettier-plugin-sort-imports
These plugins are missing from the dependencies.
Add the missing plugins to devDependencies:
"devDependencies": {
"biome": "^0.3.3",
"check-dependency-version-consistency": "^4.1.0",
"prettier": "^3.3.3",
+ "prettier-plugin-tailwindcss": "^0.5.12",
+ "prettier-plugin-sort-imports": "^3.2.0"
},Committable suggestion was skipped due to low confidence.
| const data = await fetchGoldSilverRates(); | ||
| console.log(data); | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consider adding error handling to the fetchGoldSilverRates call.
While the formatting looks good, the handleClick function currently only logs the data without handling potential errors.
const handleClick = async () => {
- const data = await fetchGoldSilverRates();
- console.log(data);
+ try {
+ const data = await fetchGoldSilverRates();
+ console.log(data);
+ } catch (error) {
+ console.error('Failed to fetch metal rates:', error);
+ }
};📝 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.
| const data = await fetchGoldSilverRates(); | |
| console.log(data); | |
| }; | |
| try { | |
| const data = await fetchGoldSilverRates(); | |
| console.log(data); | |
| } catch (error) { | |
| console.error('Failed to fetch metal rates:', error); | |
| } | |
| }; |
| <p className="mb-6 text-sm text-gray-600"> | ||
| कात्तिक ०४, २०८१ - 20 Oct, 2024 | ||
| </p> |
There was a problem hiding this comment.
Replace hardcoded date with dynamic date calculation.
The component contains a hardcoded date which will become outdated. Consider using a date utility to generate this dynamically.
- <p className="mb-6 text-sm text-gray-600">
- कात्तिक ०४, २०८१ - 20 Oct, 2024
- </p>
+ <p className="mb-6 text-sm text-gray-600">
+ {/* TODO: Add proper Nepali date conversion utility */}
+ {new Date().toLocaleDateString('en-US', {
+ day: 'numeric',
+ month: 'short',
+ year: 'numeric'
+ })}
+ </p>Committable suggestion was skipped due to low confidence.
| setIsAllDayEvent(!isAllDayEvent); | ||
| setEventStartDate(new Date(eventStartDate)); | ||
| setEventEndDate(new Date(eventEndDate)); |
There was a problem hiding this comment.
Avoid mutating date objects directly
Create new Date instances instead of mutating the existing ones to prevent potential side effects.
- setEventStartDate(new Date(eventStartDate));
- setEventEndDate(new Date(eventEndDate));
+ setEventStartDate(date => new Date(date.getTime()));
+ setEventEndDate(date => new Date(date.getTime()));📝 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.
| setIsAllDayEvent(!isAllDayEvent); | |
| setEventStartDate(new Date(eventStartDate)); | |
| setEventEndDate(new Date(eventEndDate)); | |
| setIsAllDayEvent(!isAllDayEvent); | |
| setEventStartDate(date => new Date(date.getTime())); | |
| setEventEndDate(date => new Date(date.getTime())); |
| useEffect(() => { | ||
| if (!calendarList) return | ||
| setSelectedCalendar(calendarList[0]?.value || "") | ||
| }, [calendarList]) | ||
| if (!calendarList) return; | ||
| setSelectedCalendar(calendarList[0]?.value || ''); | ||
| }, [calendarList]); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Simplify calendar selection initialization
The calendar selection can be initialized directly in the useState call or moved to a useMemo if complex logic is needed.
- const [selectedCalendar, setSelectedCalendar] = useState<string | number>('');
-
- useEffect(() => {
- if (!calendarList) return;
- setSelectedCalendar(calendarList[0]?.value || '');
- }, [calendarList]);
+ const [selectedCalendar, setSelectedCalendar] = useState<string | number>(
+ () => calendarList?.[0]?.value ?? ''
+ );Committable suggestion was skipped due to low confidence.
| function getCombinedDateTime(date: Date, time: string) { | ||
| const timeParts = time.split(":") | ||
| date.setHours(parseInt(timeParts[0] ?? "", 10)) | ||
| date.setMinutes(parseInt(timeParts[1] ?? "", 10)) | ||
| return date.toISOString() | ||
| const timeParts = time.split(':'); | ||
| date.setHours(parseInt(timeParts[0] ?? '', 10)); | ||
| date.setMinutes(parseInt(timeParts[1] ?? '', 10)); | ||
| return date.toISOString(); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Enhance date/time parsing robustness
- Use
Number.parseIntinstead of globalparseIntfor better consistency with ES2015. - Add input validation to handle potential invalid time formats.
function getCombinedDateTime(date: Date, time: string) {
+ if (!/^\d{1,2}:\d{1,2}$/.test(time)) {
+ throw new Error('Invalid time format. Expected HH:MM');
+ }
const timeParts = time.split(':');
- date.setHours(parseInt(timeParts[0] ?? '', 10));
- date.setMinutes(parseInt(timeParts[1] ?? '', 10));
+ date.setHours(Number.parseInt(timeParts[0] ?? '0', 10));
+ date.setMinutes(Number.parseInt(timeParts[1] ?? '0', 10));
return date.toISOString();
}📝 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.
| function getCombinedDateTime(date: Date, time: string) { | |
| const timeParts = time.split(":") | |
| date.setHours(parseInt(timeParts[0] ?? "", 10)) | |
| date.setMinutes(parseInt(timeParts[1] ?? "", 10)) | |
| return date.toISOString() | |
| const timeParts = time.split(':'); | |
| date.setHours(parseInt(timeParts[0] ?? '', 10)); | |
| date.setMinutes(parseInt(timeParts[1] ?? '', 10)); | |
| return date.toISOString(); | |
| function getCombinedDateTime(date: Date, time: string) { | |
| if (!/^\d{1,2}:\d{1,2}$/.test(time)) { | |
| throw new Error('Invalid time format. Expected HH:MM'); | |
| } | |
| const timeParts = time.split(':'); | |
| date.setHours(Number.parseInt(timeParts[0] ?? '0', 10)); | |
| date.setMinutes(Number.parseInt(timeParts[1] ?? '0', 10)); | |
| return date.toISOString(); | |
| } |
🧰 Tools
🪛 Biome
[error] 24-24: Use Number.parseInt instead of the equivalent global.
ES2015 moved some globals into the Number namespace for consistency.
Safe fix: Use Number.parseInt instead.(lint/style/useNumberNamespace)
[error] 25-25: Use Number.parseInt instead of the equivalent global.
ES2015 moved some globals into the Number namespace for consistency.
Safe fix: Use Number.parseInt instead.(lint/style/useNumberNamespace)
| . We would love to hear from you. For issues, feature-requests and | ||
| contribution check out our github repo{' '} | ||
| <a | ||
| href="https://github.com/PoskOfficial/Miti " |
There was a problem hiding this comment.
Remove extra space in GitHub URL
There's an extra space at the end of the GitHub repository URL which should be removed.
Apply this change:
- href="https://github.com/PoskOfficial/Miti "
+ href="https://github.com/PoskOfficial/Miti"📝 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.
| href="https://github.com/PoskOfficial/Miti " | |
| href="https://github.com/PoskOfficial/Miti" |
| <img | ||
| className="mt-3" | ||
| src="https://contrib.rocks/image?repo=PoskOfficial/Miti" | ||
| /> |
There was a problem hiding this comment.
Add alt text for accessibility
The contributors image lacks alternative text, which is required for screen reader accessibility. This should be added to ensure all users can understand the content.
Apply this change:
<img
className="mt-3"
src="https://contrib.rocks/image?repo=PoskOfficial/Miti"
+ alt="GitHub contributors to PoskOfficial/Miti"
/>📝 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.
| <img | |
| className="mt-3" | |
| src="https://contrib.rocks/image?repo=PoskOfficial/Miti" | |
| /> | |
| <img | |
| className="mt-3" | |
| src="https://contrib.rocks/image?repo=PoskOfficial/Miti" | |
| alt="GitHub contributors to PoskOfficial/Miti" | |
| /> |
🧰 Tools
🪛 Biome
[error] 218-221: Provide a text alternative through the alt, aria-label or aria-labelledby attribute
Meaningful alternative text on elements helps users relying on screen readers to understand content's purpose within a page.
If the content is decorative, redundant, or obscured, consider hiding it from assistive technologies with the aria-hidden attribute.(lint/a11y/useAltText)
| "semi": true, | ||
| "singleQuote": true, |
There was a problem hiding this comment.
can you please revert these changes, no semicolon and double quote is preferred.
and add the bracketSmameLine to false and completely remove biomejs from the repo.
thanks.
There was a problem hiding this comment.
- Will not include removal of biomejs in this PR. Can you create issue for me and will do it on another PR?
- Personally prefer semicolon over no semicolon. It's give clear visual representation of end of command. Can we add semi?
- singleQuote -> ✅
Changes in vite folder only
Summary by CodeRabbit
New Features
Bug Fixes
Documentation
Style
Chores
package.jsonto improve development tooling.