chore(frontend)/prettier tooling #43
Conversation
WalkthroughThis pull request introduces a comprehensive code formatting and styling update across the frontend project. The changes primarily focus on enhancing code consistency by reordering class names, adding trailing commas and semicolons, and improving the overall code structure. The modifications span multiple files, including configuration files for ESLint, Prettier, and various React components, with an emphasis on maintaining the existing functionality while improving code readability. Changes
Poem
Finishing Touches
🪧 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: 0
🧹 Nitpick comments (2)
frontend/src/components/ForBuilders/IntegrateSection/GetInTouch.tsx (2)
16-16: Consider removing redundant flex classes.The className contains both
flex-columnandflex flex-colwhich appear to serve the same purpose. Consider removing one of them to maintain cleaner styles.- <div className="flex-column mt-16 flex flex-col items-center justify-center"> + <div className="mt-16 flex flex-col items-center justify-center">
Line range hint
3-4: Remove commented code.Instead of keeping commented code in the codebase, consider removing it entirely. If needed later, the code can be retrieved from version control history.
-// import Image from "next/image"; - import Button from "@/components/Button"; ... - {/* <Image - src={integrateData.getInTouchSection.background.url} - alt="Get In Touch Image Background" - width="900" - height="400" - className="absolute z-[0]" - /> */}Also applies to: 28-35
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (76)
frontend/.eslintrc.json(1 hunks)frontend/.lintstagedrc.json(1 hunks)frontend/.prettierignore(1 hunks)frontend/.prettierrc(1 hunks)frontend/package.json(1 hunks)frontend/src/components/Button.tsx(2 hunks)frontend/src/components/Community/CommunitiesSection.tsx(2 hunks)frontend/src/components/Community/CommunityCard.tsx(2 hunks)frontend/src/components/Community/hero.tsx(2 hunks)frontend/src/components/Cooperative/MemberSection/LearnMore.tsx(2 hunks)frontend/src/components/Cooperative/MemberSection/index.tsx(1 hunks)frontend/src/components/Cooperative/ReportSection/DropdownContainer.tsx(5 hunks)frontend/src/components/Cooperative/ReportSection/ReportCard.tsx(2 hunks)frontend/src/components/Cooperative/ReportSection/index.tsx(1 hunks)frontend/src/components/Cooperative/hero.tsx(2 hunks)frontend/src/components/CtaCard.tsx(1 hunks)frontend/src/components/Dropdown/DropdownItemButton.tsx(1 hunks)frontend/src/components/Dropdown/index.tsx(3 hunks)frontend/src/components/Earn/Hero.tsx(3 hunks)frontend/src/components/Earn/TabSection/CuratorTabContent/KlerosScoutSection.tsx(3 hunks)frontend/src/components/Earn/TabSection/CuratorTabContent/index.tsx(3 hunks)frontend/src/components/Earn/TabSection/JurorTabContent/CourtsSection.tsx(2 hunks)frontend/src/components/Earn/TabSection/JurorTabContent/EnterCourtSection.tsx(1 hunks)frontend/src/components/Earn/TabSection/JurorTabContent/index.tsx(2 hunks)frontend/src/components/Earn/TabSection/index.tsx(2 hunks)frontend/src/components/ExternalLink.tsx(2 hunks)frontend/src/components/Footer.tsx(3 hunks)frontend/src/components/ForBuilders/Hero.tsx(2 hunks)frontend/src/components/ForBuilders/IntegrateSection/GetInTouch.tsx(1 hunks)frontend/src/components/ForBuilders/IntegrateSection/LearnMore.tsx(1 hunks)frontend/src/components/ForBuilders/IntegrateSection/index.tsx(1 hunks)frontend/src/components/ForBuilders/UseCasesSection/DAOSection/Header.tsx(1 hunks)frontend/src/components/ForBuilders/UseCasesSection/DAOSection/KeyChallenges/Header.tsx(1 hunks)frontend/src/components/ForBuilders/UseCasesSection/DAOSection/KeyChallenges/HowKlerosSolvesIt.tsx(3 hunks)frontend/src/components/ForBuilders/UseCasesSection/DAOSection/LearnMore.tsx(1 hunks)frontend/src/components/ForBuilders/UseCasesSection/DAOSection/index.tsx(0 hunks)frontend/src/components/ForBuilders/UseCasesSection/UseCasesCards.tsx(1 hunks)frontend/src/components/ForBuilders/UseCasesSection/index.tsx(1 hunks)frontend/src/components/Navbar/AppsDropdownContent/Card.tsx(2 hunks)frontend/src/components/Navbar/AppsDropdownContent/index.tsx(2 hunks)frontend/src/components/Navbar/DesktopNavigation.tsx(3 hunks)frontend/src/components/Navbar/MobileMenu.tsx(4 hunks)frontend/src/components/Navbar/ResourcesDropdownContent/index.tsx(3 hunks)frontend/src/components/Navbar/index.tsx(4 hunks)frontend/src/components/PNKToken/BuySection/Exchanges.tsx(1 hunks)frontend/src/components/PNKToken/BuySection/FeaturedExchange.tsx(1 hunks)frontend/src/components/PNKToken/BuySection/index.tsx(1 hunks)frontend/src/components/PNKToken/Explorers.tsx(1 hunks)frontend/src/components/PNKToken/Hero.tsx(2 hunks)frontend/src/components/PNKToken/TokenNeedSection/index.tsx(1 hunks)frontend/src/components/PNKToken/TokenomicsSection/Stat.tsx(1 hunks)frontend/src/components/PNKToken/TokenomicsSection/TokenStatDisplay.tsx(1 hunks)frontend/src/components/PNKToken/TokenomicsSection/index.tsx(1 hunks)frontend/src/components/Tab.tsx(2 hunks)frontend/src/components/Tag.tsx(1 hunks)frontend/src/components/TrustedBy.tsx(1 hunks)frontend/src/components/home/Hero.tsx(3 hunks)frontend/src/pages/_app.tsx(1 hunks)frontend/src/pages/cooperative.tsx(2 hunks)frontend/src/pages/earn.tsx(3 hunks)frontend/src/pages/for-builders.tsx(1 hunks)frontend/src/pages/index.tsx(1 hunks)frontend/src/pages/pnk-token.tsx(1 hunks)frontend/src/queries/community/hero.ts(2 hunks)frontend/src/queries/cooperative/hero.ts(0 hunks)frontend/src/queries/earn/tabs-data.ts(2 hunks)frontend/src/queries/footer.tsx(2 hunks)frontend/src/queries/home/hero.tsx(1 hunks)frontend/src/queries/partners.tsx(1 hunks)frontend/src/queries/pnk-token/hero.ts(1 hunks)frontend/src/queries/pnk-token/tokenomics.ts(1 hunks)frontend/src/styles/globals.css(2 hunks)frontend/src/styles/index.ts(1 hunks)frontend/src/styles/responsiveSize.ts(1 hunks)frontend/src/utils/getStrapiURL.tsx(1 hunks)frontend/src/utils/graphQLClient.tsx(1 hunks)
💤 Files with no reviewable changes (2)
- frontend/src/queries/cooperative/hero.ts
- frontend/src/components/ForBuilders/UseCasesSection/DAOSection/index.tsx
✅ Files skipped from review due to trivial changes (63)
- frontend/src/components/ForBuilders/IntegrateSection/LearnMore.tsx
- frontend/.prettierignore
- frontend/src/utils/getStrapiURL.tsx
- frontend/src/components/Button.tsx
- frontend/src/utils/graphQLClient.tsx
- frontend/src/pages/cooperative.tsx
- frontend/src/components/PNKToken/BuySection/FeaturedExchange.tsx
- frontend/src/components/ForBuilders/UseCasesSection/UseCasesCards.tsx
- frontend/src/components/Navbar/index.tsx
- frontend/.prettierrc
- frontend/src/components/ForBuilders/UseCasesSection/DAOSection/Header.tsx
- frontend/src/pages/index.tsx
- frontend/src/styles/globals.css
- frontend/src/components/PNKToken/TokenomicsSection/Stat.tsx
- frontend/src/pages/_app.tsx
- frontend/src/components/PNKToken/TokenomicsSection/index.tsx
- frontend/src/components/Cooperative/MemberSection/index.tsx
- frontend/src/components/Dropdown/index.tsx
- frontend/src/components/Community/hero.tsx
- frontend/src/components/Earn/TabSection/JurorTabContent/EnterCourtSection.tsx
- frontend/src/components/Earn/TabSection/index.tsx
- frontend/src/components/Navbar/DesktopNavigation.tsx
- frontend/src/components/Tag.tsx
- frontend/src/components/PNKToken/Explorers.tsx
- frontend/src/components/ForBuilders/IntegrateSection/index.tsx
- frontend/src/styles/index.ts
- frontend/src/pages/for-builders.tsx
- frontend/src/components/Cooperative/ReportSection/index.tsx
- frontend/src/components/ExternalLink.tsx
- frontend/src/components/Navbar/MobileMenu.tsx
- frontend/src/styles/responsiveSize.ts
- frontend/src/components/CtaCard.tsx
- frontend/src/queries/partners.tsx
- frontend/src/components/Community/CommunitiesSection.tsx
- frontend/src/components/ForBuilders/UseCasesSection/DAOSection/LearnMore.tsx
- frontend/src/components/Cooperative/ReportSection/ReportCard.tsx
- frontend/src/components/Dropdown/DropdownItemButton.tsx
- frontend/src/components/TrustedBy.tsx
- frontend/src/components/ForBuilders/UseCasesSection/index.tsx
- frontend/src/queries/earn/tabs-data.ts
- frontend/src/components/ForBuilders/UseCasesSection/DAOSection/KeyChallenges/Header.tsx
- frontend/src/components/ForBuilders/UseCasesSection/DAOSection/KeyChallenges/HowKlerosSolvesIt.tsx
- frontend/src/components/home/Hero.tsx
- frontend/src/components/Navbar/ResourcesDropdownContent/index.tsx
- frontend/src/components/Cooperative/ReportSection/DropdownContainer.tsx
- frontend/src/components/Earn/TabSection/CuratorTabContent/index.tsx
- frontend/src/queries/pnk-token/tokenomics.ts
- frontend/src/pages/earn.tsx
- frontend/src/components/PNKToken/TokenomicsSection/TokenStatDisplay.tsx
- frontend/src/components/Community/CommunityCard.tsx
- frontend/src/components/PNKToken/TokenNeedSection/index.tsx
- frontend/src/components/Tab.tsx
- frontend/src/components/Navbar/AppsDropdownContent/index.tsx
- frontend/src/components/Cooperative/hero.tsx
- frontend/src/components/PNKToken/BuySection/Exchanges.tsx
- frontend/src/components/Navbar/AppsDropdownContent/Card.tsx
- frontend/src/components/PNKToken/BuySection/index.tsx
- frontend/src/components/Earn/TabSection/JurorTabContent/CourtsSection.tsx
- frontend/src/components/PNKToken/Hero.tsx
- frontend/src/queries/home/hero.tsx
- frontend/src/components/Earn/TabSection/JurorTabContent/index.tsx
- frontend/src/components/Earn/Hero.tsx
- frontend/src/queries/footer.tsx
🔇 Additional comments (14)
frontend/src/components/Earn/TabSection/CuratorTabContent/KlerosScoutSection.tsx (3)
20-21: LGTM! Class reordering maintains visual structure.The reordering of classes follows a logical grouping:
- Container styling (
rounded-2xl bg-background-1)- Layout properties (
flex flex-col gap-8 px-6 py-8 md:px-8 md:py-12)
24-24: LGTM! Consistent class name organization across elements.The class reordering follows a consistent pattern throughout the component:
- Base properties first (flex, dimensions)
- Followed by spacing/padding
- Responsive modifiers (md:) at the end
Also applies to: 33-33, 41-43, 55-55
41-43: Verify the background image positioning.While the class reordering looks correct, the specific background position values (
bg-[-314px]andbg-[0px]) might need visual verification to ensure the image still aligns properly across different screen sizes.Please confirm that the background image positioning remains visually correct after the class reordering, particularly at the mobile breakpoint where it shifts from -314px to 0px.
frontend/src/components/Cooperative/MemberSection/LearnMore.tsx (3)
15-19: LGTM! Clean formatting of className stringThe multiline formatting and class ordering follow good practices and improve readability.
20-20: LGTM! Consistent class orderingThe className formatting follows the same logical ordering pattern as other elements.
35-35: LGTM! Consistent formattingThe Image component's className follows the established formatting pattern.
frontend/src/queries/pnk-token/hero.ts (1)
18-23: Verify GraphQL schema compatibility for the newurlfieldThe addition of the
urlfield totokenExplorersappears to be a functional change rather than just formatting. Please ensure this field exists in the GraphQL schema to prevent runtime errors.frontend/src/queries/community/hero.ts (1)
4-10: Verify GraphQL schema compatibility for Community type changesThe addition of the
urlfield to theCommunitytype appears to be a functional change. Please ensure this matches the GraphQL schema definition.frontend/src/components/Footer.tsx (1)
22-27: LGTM! Clean formatting changesThe changes are purely formatting-related and align well with Prettier's standard formatting rules:
- Consistent class name ordering
- Proper JSX indentation
- Standardized attribute formatting
Also applies to: 31-31, 33-41, 46-47, 63-65
frontend/.lintstagedrc.json (1)
3-3: LGTM! Correct Prettier integrationThe Prettier command is correctly placed before ESLint in the lint-staged pipeline, which is the recommended order to avoid formatting conflicts.
frontend/package.json (1)
29-34: LGTM! Dependencies are well-chosen for Prettier integration.The added dependencies form a complete set for integrating Prettier with ESLint and Tailwind CSS. The versions are recent and stable.
frontend/.eslintrc.json (1)
2-8: LGTM! ESLint and Prettier integration is properly configured.The extends array is correctly ordered with Prettier configs last to ensure proper rule overrides.
frontend/src/components/ForBuilders/Hero.tsx (1)
16-16: LGTM! Class names are properly formatted.The reordering of Tailwind classes follows the recommended ordering pattern and improves readability.
Also applies to: 18-18, 56-56
frontend/src/pages/pnk-token.tsx (1)
58-65: LGTM! Async operations are properly formatted.The multi-line formatting of GraphQL requests improves readability while maintaining functionality.
✅ Deploy Preview for kleros-website-v2 ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
Summary by CodeRabbit
Release Notes
Code Quality and Formatting
Development Dependencies
eslint-config-prettiereslint-plugin-prettierprettierprettier-plugin-tailwindcssType Definitions
Styling
These changes improve code quality and maintainability without introducing significant functional modifications.