Tailwind linting #65
Tailwind linting #65
Conversation
update packages prettier .eslintrc have prettier check .json files
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThis update focuses on enhancing code quality and consistency. It involves formatting tweaks for Tailwind CSS classes, prettier configurations, and implementing eslint strictness for warnings. It also adds npm-lint hooks for the 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 as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
|
for whoever merges this, make sure to do a merge commit (and not squash and merge) to maintain the commit hashes added to .git-blame-ignore-revs |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
Outside diff range and nitpick comments (2)
server/app/login/GitHubOAuthComponent.tsx (1)
Line range hint
35-38: Add explicit button type to prevent unintended form submissions.The button should include a
type="button"attribute to ensure it does not inadvertently submit a form if nested inside one.- <button + <button type="button" onClick={handleGitHubLogin} className="flex w-full items-center justify-center gap-3 rounded-md bg-[#24292F] px-3 py-2 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#24292F]" >server/app/query/view/[id]/charts.tsx (1)
Line range hint
92-92: Use modern JavaScript features for better readability and performance.Replace
Math.powwith the exponentiation operator**to make the code more concise and modern.- parseFloat((valueNum / Math.pow(k, i)).toFixed(2)) + + parseFloat((valueNum / k**i).toFixed(2)) +
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (1)
server/package-lock.jsonis excluded by!**/package-lock.json
Files selected for processing (15)
- .git-blame-ignore-revs (1 hunks)
- .pre-commit-config.yaml (2 hunks)
- server/.eslintrc.json (1 hunks)
- server/app/alert.tsx (2 hunks)
- server/app/footer.tsx (2 hunks)
- server/app/header.tsx (6 hunks)
- server/app/login/GitHubOAuthComponent.tsx (1 hunks)
- server/app/login/page.tsx (1 hunks)
- server/app/page.tsx (1 hunks)
- server/app/query/create/page.tsx (15 hunks)
- server/app/query/layout.tsx (1 hunks)
- server/app/query/view/[id]/charts.tsx (1 hunks)
- server/app/query/view/[id]/components.tsx (4 hunks)
- server/app/query/view/[id]/page.tsx (11 hunks)
- server/package.json (2 hunks)
Files skipped from review due to trivial changes (6)
- .git-blame-ignore-revs
- server/app/alert.tsx
- server/app/footer.tsx
- server/app/header.tsx
- server/app/query/layout.tsx
- server/app/query/view/[id]/components.tsx
Additional context used
Biome
server/app/login/GitHubOAuthComponent.tsx
[error] 35-38: 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)
server/app/query/view/[id]/charts.tsx
[error] 92-92: Use the '**' operator instead of 'Math.pow'.
Unsafe fix: Use the '**' operator instead of 'Math.pow'.
(lint/style/useExponentiationOperator)
server/app/page.tsx
[error] 67-67: Provide a valid value for the attribute href.
The href attribute should be a valid a URL
Check this thorough explanation to better understand the context.(lint/a11y/useValidAnchor)
server/app/query/view/[id]/page.tsx
[error] 289-289: Using the role attribute 'list' on the 'ul' element is redundant, because it is implied by the semantic 'ul' element.
Unsafe fix: Remove the role attribute.
(lint/a11y/noRedundantRoles)
[error] 39-39: isNaN is unsafe. It attempts a type coercion. Use Number.isNaN instead.
See the MDN documentation for more details.
Unsafe fix: Use Number.isNaN instead.(lint/suspicious/noGlobalIsNan)
[error] 200-203: 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] 248-251: 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] 296-296: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
server/app/query/create/page.tsx
[error] 218-223: 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)
[error] 243-251: 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)
[error] 233-239: 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)
Additional comments not posted (45)
server/.eslintrc.json (1)
2-2: Approved addition of Tailwind CSS linting plugin.The inclusion of the "tailwindcss" plugin should enhance style consistency across the project.
Verification successful
Verified inclusion and configuration of Tailwind CSS linting plugin.
The "eslint-plugin-tailwindcss" is correctly installed and configured in the ESLint settings.
server/package.json:"eslint-plugin-tailwindcss": "^3.17.4"server/.eslintrc.json:"extends": ["next/core-web-vitals", "plugin:tailwindcss/recommended"]Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify that the Tailwind CSS plugin is installed and configured correctly. # Check if the plugin is installed grep '"eslint-plugin-tailwindcss"' server/package.json # Check if the plugin is included in the ESLint configuration grep '"plugin:tailwindcss/recommended"' server/.eslintrc.jsonLength of output: 236
server/app/login/GitHubOAuthComponent.tsx (1)
40-40: Approved the updated text for clarity and emphasis.The change to make the button text more prominent is a positive UI adjustment.
server/package.json (2)
9-10: Approved the stricter linting rules and the addition of a lint fix script.Enforcing zero warnings will help maintain high code quality. The lint fix script provides a convenient way to address linting issues.
46-52: Approved the updated package versions.Upgrading to the latest versions of
eslint-plugin-tailwindcssandtailwindcsssupports the goal of improved linting and styling.server/app/login/page.tsx (1)
33-38: Approved the reordering of class names for consistency.Reordering the class names improves readability and adheres to Tailwind CSS conventions.
server/app/query/view/[id]/charts.tsx (1)
120-120: Ensure consistent class naming.The class name has been adjusted to follow a more logical ordering and adherence to Tailwind CSS conventions.
server/app/page.tsx (3)
29-29: Ensure consistent class naming and structure.The class names are reordered to improve readability and maintain Tailwind CSS conventions.
36-36: Ensure consistency in class naming and structure.The class names are adjusted to follow a logical order and include size utility classes.
43-43: Ensure accessibility and usability.The
hrefattribute should point to a valid URL to improve accessibility and usability. Currently, it points to a placeholder which might not be intended.- <a href="#"> + <a href="https://github.com/private-attribution/draft/">Likely invalid or redundant comment.
server/app/query/view/[id]/page.tsx (17)
130-130: Ensure consistent class naming and structure.The class names are reordered to improve readability and maintain Tailwind CSS conventions.
132-132: Ensure consistency in typography and layout.The class names and text sizes are adjusted to maintain visual consistency and readability.
147-147: Ensure consistent class naming and structure.The class names are reordered to improve readability and maintain Tailwind CSS conventions.
163-163: Ensure consistency in typography and layout.The class names and text sizes are adjusted to maintain visual consistency and readability.
187-187: Ensure consistent class naming and structure.The class names are reordered to improve readability and maintain Tailwind CSS conventions.
199-199: Ensure consistent class naming and structure.The class names are reordered to improve readability and maintain Tailwind CSS conventions.
202-202: Ensure consistent class naming and structure.The class names are reordered to improve readability and maintain Tailwind CSS conventions.
204-204: Ensure consistent class naming and structure.The class names are reordered to improve readability and maintain Tailwind CSS conventions.
207-207: Ensure consistent class naming and structure.The class names are reordered to improve readability and maintain Tailwind CSS conventions.
223-223: Ensure consistent class naming and structure.The class names are reordered to improve readability and maintain Tailwind CSS conventions.
250-250: Ensure consistent class naming and structure.The class names are reordered to improve readability and maintain Tailwind CSS conventions.
252-252: Ensure consistent class naming and structure.The class names are reordered to improve readability and maintain Tailwind CSS conventions.
255-255: Ensure consistent class naming and structure.The class names are reordered to improve readability and maintain Tailwind CSS conventions.
269-269: Ensure consistent class naming and structure.The class names are reordered to improve readability and maintain Tailwind CSS conventions.
290-290: Ensure consistent class naming and structure.The class names are reordered to improve readability and maintain Tailwind CSS conventions.
302-302: Ensure consistent class naming and structure.The class names are reordered to improve readability and maintain Tailwind CSS conventions.
314-314: Ensure consistent class naming and structure.The class names are reordered to improve readability and maintain Tailwind CSS conventions.
server/app/query/create/page.tsx (19)
87-87: Ensure consistent class naming and structure.The class names are reordered to improve readability and maintain Tailwind CSS conventions.
89-89: Ensure consistency in typography and layout.The class names and text sizes are adjusted to maintain visual consistency and readability.
212-212: Ensure consistent class naming and structure.The class names are reordered to improve readability and maintain Tailwind CSS conventions.
214-214: Ensure consistency in typography and layout.The class names and text sizes are adjusted to maintain visual consistency and readability.
255-255: Ensure consistent class naming and structure.The class names are reordered to improve readability and maintain Tailwind CSS conventions.
275-275: Ensure consistent class naming and structure.The class names are reordered to improve readability and maintain Tailwind CSS conventions.
281-281: Ensure consistent class naming and structure.The class names are reordered to improve readability and maintain Tailwind CSS conventions.
296-296: Ensure consistent class naming and structure.The class names are reordered to improve readability and maintain Tailwind CSS conventions.
317-317: Ensure consistent class naming and structure.The class names are reordered to improve readability and maintain Tailwind CSS conventions.
355-355: Ensure consistent class naming and structure.The class names are reordered to improve readability and maintain Tailwind CSS conventions.
360-360: Ensure consistent class naming and structure.The class names are reordered to improve readability and maintain Tailwind CSS conventions.
382-382: Ensure consistent class naming and structure.The class names are reordered to improve readability and maintain Tailwind CSS conventions.
387-387: Ensure consistent class naming and structure.The class names are reordered to improve readability and maintain Tailwind CSS conventions.
408-408: Ensure consistent class naming and structure.The class names are reordered to improve readability and maintain Tailwind CSS conventions.
413-413: Ensure consistent class naming and structure.The class names are reordered to improve readability and maintain Tailwind CSS conventions.
519-519: Ensure consistent class naming and structure.The class names are reordered to improve readability and maintain Tailwind CSS conventions.
529-529: Ensure consistent class naming and structure.The class names are reordered to improve readability and maintain Tailwind CSS conventions.
545-545: Ensure consistent class naming and structure.The class names are reordered to improve readability and maintain Tailwind CSS conventions.
577-577: Ensure consistent class naming and structure.The class names are reordered to improve readability and maintain Tailwind CSS conventions.
improved linting for tailwind classes!
Summary by CodeRabbit
Chores
server/directory.server/package.jsonfor improved code quality and maintenance.Style
Header,LoginPage,Footer, andQueryPage.