From 4c71bef6d4c337c6ae0587a1212637d5e72bb76a Mon Sep 17 00:00:00 2001 From: Akshat Nema <76521428+akshatnema@users.noreply.github.com> Date: Tue, 26 Mar 2024 09:52:15 +0530 Subject: [PATCH] feat: add prettier rules in eslint (#2807) Co-authored-by: Ansh Goyal --- .eslintrc | 55 +- .prettierignore | 1 - .prettierrc.json | 7 - components/AlgoliaSearch.tsx | 95 ++- components/AsyncAPILogo.tsx | 113 ++- components/Calendar.tsx | 32 +- components/Caption.tsx | 4 +- components/CaseStudyCard.tsx | 17 +- components/ClickableLogo.tsx | 14 +- components/DemoAnimation.tsx | 216 +++--- components/Feedback.tsx | 41 +- .../FinancialSummary/BarChartComponent.tsx | 12 +- components/MacWindow.tsx | 22 +- components/Modal.tsx | 27 +- components/SupportUs/SupportItemsList.ts | 4 +- components/SupportUs/SupportUs.tsx | 58 +- components/buttons/DocsButton.tsx | 12 +- components/buttons/OpenInStudioButton.tsx | 5 +- components/buttons/ScrollButton.tsx | 2 +- components/community/Card.tsx | 30 +- components/community/Header.tsx | 24 +- components/community/Hero.tsx | 8 +- components/community/HomeCard.tsx | 27 +- components/data/buckets.ts | 5 +- components/data/otherFormsData.ts | 3 +- components/docs/Card.tsx | 17 +- components/docs/DocsCards.tsx | 6 +- components/editor/CodeBlock.tsx | 73 +- components/logos/Axway.tsx | 54 +- components/logos/SAP.tsx | 33 +- components/logos/Salesforce.tsx | 67 +- components/logos/Slack.tsx | 72 +- components/navigation/BlogPostItem.tsx | 40 +- components/newsroom/FeaturedBlogPost.tsx | 38 +- components/roadmap/RoadmapColumn.tsx | 15 +- components/slack/Message.tsx | 95 +-- components/slack/index.tsx | 32 +- components/sponsors/GoldSponsors.tsx | 6 +- components/sponsors/SilverSponsors.tsx | 6 +- components/sponsors/SilverSponsorsList.ts | 2 +- components/sponsors/Sponsors.tsx | 13 +- components/sponsors/SponsorsList.ts | 2 +- components/typography/TextLink.tsx | 16 +- package-lock.json | 700 ++++++++++-------- package.json | 4 +- pages/_app.tsx | 8 +- pages/index.tsx | 17 +- 47 files changed, 1182 insertions(+), 968 deletions(-) delete mode 100644 .prettierignore delete mode 100644 .prettierrc.json diff --git a/.eslintrc b/.eslintrc index 3963ed6ebeb..5f2ddb01b1e 100644 --- a/.eslintrc +++ b/.eslintrc @@ -19,7 +19,19 @@ "error", { "singleQuote": true, - "endOfLine": "auto" + "endOfLine": "auto", + "semi": true, + "tabWidth": 2, + "trailingComma": "none", + "arrowParens": "always", + "bracketSpacing": true, + "jsxBracketSameLine": false, + "useTabs": false, + "quoteProps": "as-needed", + "insertPragma": false, + "requirePragma": false, + "jsxSingleQuote": true, + "printWidth": 120 } ], "max-len": [ @@ -27,7 +39,7 @@ { "code": 120, "ignoreUrls": true, - "ignorePattern": "*className=([\\s\\S]*?)*" // Ignore classnames + "ignorePattern": "(className=\\{[\\s\\S]*\\}|.*\\}|'.*'|className='.*')" // Ignore classnames } ] }, @@ -57,13 +69,6 @@ "project": "./tsconfig.json" }, "rules": { - "prettier/prettier": [ - "error", - { - "singleQuote": true, - "endOfLine": "auto" - } - ], "react/destructuring-assignment": "off", // Vscode doesn't support automatically destructuring, it's a pain to add a new variable "react/require-default-props": "off", // Allow non-defined react props as undefined "react/jsx-props-no-spreading": "off", // _app.tsx uses spread operator and also, react-hook-form @@ -71,6 +76,7 @@ "@next/next/no-img-element": "off", // We currently not using next/image because it isn't supported with SSG mode "@next/next/link-passhref": "off", // Only needed when the child of Link wraps an tag "@typescript-eslint/comma-dangle": "off", // Avoid conflict rule between Eslint and Prettier + "@typescript-eslint/indent": "off", // Avoid conflict rule between Eslint and Prettier "@typescript-eslint/consistent-type-imports": "error", // Ensure `import type` is used when it's necessary "no-restricted-syntax": [ "error", @@ -136,26 +142,6 @@ "func-name-matching": "error", "func-names": "off", "func-style": "off", - "function-paren-newline": [ - "error", - "never" - ], - "implicit-arrow-linebreak": [ - "error", - "beside" - ], - "indent": [ - "error", - 2, - { - "VariableDeclarator": { - "var": 1, - "let": 1, - "const": 1 - }, - "SwitchCase": 1 - } - ], "jsx-quotes": [ "error", "prefer-single" @@ -274,7 +260,10 @@ ], "quotes": [ "error", - "single" + "single", + { + "avoidEscape": true + } ], "require-jsdoc": "warn", "semi": "error", @@ -303,6 +292,12 @@ ], "switch-colon-spacing": "error" } + }, + { + "files": ["components/logos/*"], + "rules": { + "max-len": "off" + } } ] } diff --git a/.prettierignore b/.prettierignore deleted file mode 100644 index fa29cdfff91..00000000000 --- a/.prettierignore +++ /dev/null @@ -1 +0,0 @@ -** \ No newline at end of file diff --git a/.prettierrc.json b/.prettierrc.json deleted file mode 100644 index 364b2d386b0..00000000000 --- a/.prettierrc.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "singleQuote": true, - "jsxSingleQuote": true, - "arrowParens": "always", - "trailingComma": "es5", - "printWidth": 120 -} diff --git a/components/AlgoliaSearch.tsx b/components/AlgoliaSearch.tsx index e0c5b5a8f8f..43b3cc7ce6b 100644 --- a/components/AlgoliaSearch.tsx +++ b/components/AlgoliaSearch.tsx @@ -29,7 +29,7 @@ interface IHitProps { __is_child?: () => boolean; __is_first?: () => boolean; __is_last?: () => boolean; - } + }; children: React.ReactNode; } @@ -76,10 +76,7 @@ function transformItems(items: DocSearchHit[]) { url: `${a.pathname}${hash}`, __is_result: () => true, __is_parent: () => item.type === 'lvl1' && items.length > 1 && index === 0, - __is_child: () => item.type !== 'lvl1' && - items.length > 1 && - items[0].type === 'lvl1' && - index !== 0, + __is_child: () => item.type !== 'lvl1' && items.length > 1 && items[0].type === 'lvl1' && index !== 0, __is_first: () => index === 1, __is_last: () => index === items.length - 1 && index !== 0 }; @@ -116,30 +113,32 @@ function Hit({ hit, children }: IHitProps) { function AlgoliaModal({ onClose, initialQuery, indexName }: AlgoliaModalProps) { const router = useRouter(); - return createPortal( { - return `https://github.com/asyncapi/website/issues/new?title=Cannot%20search%20given%20query:%20${query}`; - }} - />, - document.body); + return createPortal( + { + return `https://github.com/asyncapi/website/issues/new?title=Cannot%20search%20given%20query:%20${query}`; + }} + />, + document.body + ); } /** @@ -152,10 +151,7 @@ function isEditingContent(event: KeyboardEvent) { const { tagName } = element as HTMLElement; return ( - (element as HTMLElement).isContentEditable || - tagName === 'INPUT' || - tagName === 'SELECT' || - tagName === 'TEXTAREA' + (element as HTMLElement).isContentEditable || tagName === 'INPUT' || tagName === 'SELECT' || tagName === 'TEXTAREA' ); } @@ -235,27 +231,32 @@ function useDocSearchKeyboardEvents({ isOpen, onOpen, onClose }: IUseDocSearchKe * @description The Algolia search component used for searching the website * @param {React.ReactNode} children - The content of the page */ -export default function AlgoliaSearch({ children } : { children: React.ReactNode }) { +export default function AlgoliaSearch({ children }: { children: React.ReactNode }) { const [isOpen, setIsOpen] = useState(false); const [indexName, setIndexName] = useState(INDEX_NAME); const [initialQuery, setInitialQuery] = useState(); - const onOpen = useCallback((_indexName?: string) => { - if (_indexName) { - setIndexName(_indexName); - } - setIsOpen(true); - }, [setIsOpen, setIndexName]); + const onOpen = useCallback( + (_indexName?: string) => { + if (_indexName) { + setIndexName(_indexName); + } + setIsOpen(true); + }, + [setIsOpen, setIndexName] + ); const onClose = useCallback(() => { setIsOpen(false); }, [setIsOpen]); - const onInput = useCallback((e: React.KeyboardEvent) => { - setIsOpen(true); - setInitialQuery(e.key); - }, - [setIsOpen, setInitialQuery]); + const onInput = useCallback( + (e: React.KeyboardEvent) => { + setIsOpen(true); + setInitialQuery(e.key); + }, + [setIsOpen, setInitialQuery] + ); useDocSearchKeyboardEvents({ isOpen, @@ -269,9 +270,7 @@ export default function AlgoliaSearch({ children } : { children: React.ReactNode - - {children} - + {children} {isOpen && } ); diff --git a/components/AsyncAPILogo.tsx b/components/AsyncAPILogo.tsx index 04d26d95348..6b6a66de3fd 100644 --- a/components/AsyncAPILogo.tsx +++ b/components/AsyncAPILogo.tsx @@ -10,10 +10,24 @@ interface IAsyncAPILogoProps { */ export default function AsyncAPILogo({ className }: IAsyncAPILogoProps) { return ( - + AsyncAPI Logo - + @@ -29,11 +43,25 @@ export default function AsyncAPILogo({ className }: IAsyncAPILogoProps) { - + - + @@ -45,24 +73,67 @@ export default function AsyncAPILogo({ className }: IAsyncAPILogoProps) { - - - - - - - + + + + + + + - - - - - - - - - + + + + + + + + - ); } diff --git a/components/Calendar.tsx b/components/Calendar.tsx index c9f129f114a..754a6c7c96c 100644 --- a/components/Calendar.tsx +++ b/components/Calendar.tsx @@ -29,28 +29,19 @@ export default function Calendar({ className = '', size }: ICalendarProps) { const eventsExist = eventsData.length > 0; return ( -
+
{t('calendar.title')} - {eventsExist ? + {eventsExist ? (
- +
- : -
- {t('calendar.noMeetingsMessage')} -
- } + ) : ( +
{t('calendar.noMeetingsMessage')}
+ )}
); } diff --git a/components/Caption.tsx b/components/Caption.tsx index b31fad6ec6e..043db0b7a16 100644 --- a/components/Caption.tsx +++ b/components/Caption.tsx @@ -10,10 +10,10 @@ interface CaptionProps { * @param {CaptionProps} props - The props for the Caption component. * @param {React.ReactNode} props.children - The content to be displayed as the caption. */ -export default function Caption({ children } : CaptionProps) { +export default function Caption({ children }: CaptionProps) { return (

{children}

); -}; +} diff --git a/components/CaseStudyCard.tsx b/components/CaseStudyCard.tsx index ae5d6ca78a8..241e9b5aa84 100644 --- a/components/CaseStudyCard.tsx +++ b/components/CaseStudyCard.tsx @@ -11,9 +11,7 @@ interface ICaseStudyCardProps { * @description A component that displays a list of case studies in a card format * @param {ICaseStudies} props.studies - The list of case studies to display */ -export default function CaseStudyCard({ - studies = [] -}: ICaseStudyCardProps) { +export default function CaseStudyCard({ studies = [] }: ICaseStudyCardProps) { if (studies.length === 0) { return null; } @@ -22,16 +20,15 @@ export default function CaseStudyCard({
{studies.map((study, index) => ( -
+
- {study.company.name} + {study.company.name} - { study.company.description } + {study.company.description}
diff --git a/components/ClickableLogo.tsx b/components/ClickableLogo.tsx index 8c90adff279..b1bca16a77e 100644 --- a/components/ClickableLogo.tsx +++ b/components/ClickableLogo.tsx @@ -10,15 +10,11 @@ interface IClickableLogoProps { /** * @description A component that displays the AsyncAPI logo as a clickable link - * @param {string} props.href - The URL to link to - * @param {string} props.className - The class name for the component - * @param {string} props.logoClassName - The class name for the logo - */ -export default function ClickableLogo({ - href = '/', - className = 'flex', - logoClassName -}: IClickableLogoProps) { + * @param {string} props.href - The URL to link to + * @param {string} props.className - The class name for the component + * @param {string} props.logoClassName - The class name for the logo + */ +export default function ClickableLogo({ href = '/', className = 'flex', logoClassName }: IClickableLogoProps) { return ( diff --git a/components/DemoAnimation.tsx b/components/DemoAnimation.tsx index aba1b872882..681680b34e5 100644 --- a/components/DemoAnimation.tsx +++ b/components/DemoAnimation.tsx @@ -22,7 +22,9 @@ interface ICursorProps { */ function Cursor({ className = '' }: ICursorProps) { return ( - + ); } @@ -100,82 +102,91 @@ export default function DemoAnimation({ className = '' }: IDemoAnimationProps) { {common} } onFinishedTyping={descriptionCallback}>
-   description: This service is in charge of processing user signups :rocket: +   description: This service is in charge of processing + user signups :rocket:
); } - return renderTyping(common, - callback); + return renderTyping(common, callback); } /** * @description A component that displays channels and operation block */ function renderChannelsOperationBlock(callback: () => void) { - return renderTyping(<> -
- channels: -
-
-   userSignedup: -
-
-     address:'user/signedup' -
-
-     messages: -
-
-       userSignedupMessage: -
-
-         $ref:'#/components/messages/UserSignedUp' -
-
- operations: -
-
-   processUserSignups: -
-
-     action:'receive' -
-
-     channel: -
-
-       $ref: '#/channels/userSignedup' -
- - , - callback); + return renderTyping( + <> +
+ channels: +
+
+   userSignedup: +
+
+     address: + 'user/signedup' +
+
+     messages: +
+
+       userSignedupMessage: +
+
+         $ref: + '#/components/messages/UserSignedUp' +
+
+ operations: +
+
+   processUserSignups: +
+
+     action: + 'receive' +
+
+     channel: +
+
+       $ref: + '#/channels/userSignedup' +
+ + , + callback + ); } /** * @description A component that displays until message payload block */ function renderUntilMessagePayload(callback: () => void) { - return renderTyping(<> -
- components: -
-
-   messages: -
-
-     UserSignedUp: -
-
-       payload: -
-
-         type: object -
- , - callback); + return renderTyping( + <> +
+ components: +
+
+   messages: +
+
+     UserSignedUp: +
+
+       payload: +
+
+         type: + object +
+ , + callback + ); } /** @@ -190,10 +201,15 @@ export default function DemoAnimation({ className = '' }: IDemoAnimationProps) {         properties:
-           displayName: + +           displayName: +
-             type: string + +             type: + + string
); @@ -201,20 +217,20 @@ export default function DemoAnimation({ className = '' }: IDemoAnimationProps) { if (showEmail) { return ( <> - { common } + {common} } onFinishedTyping={descriptionCallback}>
-             description: Name of the user + +             description: + + Name of the user
); } - return renderTyping(<> - { common } - , - callback); + return renderTyping(<>{common}, callback); } /** @@ -229,10 +245,16 @@ export default function DemoAnimation({ className = '' }: IDemoAnimationProps) {           email:
-             type: string + +             type: + + string
-             format: email + +             format: + + email
); @@ -243,40 +265,43 @@ export default function DemoAnimation({ className = '' }: IDemoAnimationProps) { {common} } onFinishedTyping={descriptionCallback}>
-             description: Email of the user + +             description: + + Email of the user
); } - return renderTyping(common, - callback); + return renderTyping(common, callback); } return (
-
+
- { (showEmailDescription || started) && renderInfoBlock(() => setShowInfo(true)) } - { showInfo && renderChannelsOperationBlock(() => setShowChannelsAndOperation(true)) } - { showChannelsAndOperation && renderUntilMessagePayload(() => setShowUntilMessagePayload(true)) } - { (showUntilMessagePayload || showEmail) && renderDisplayName(() => setShowDisplayName(true)) } - { (showDisplayName || showDisplayNameDescription) && renderEmail(() => setShowEmail(true)) } + {(showEmailDescription || started) && renderInfoBlock(() => setShowInfo(true))} + {showInfo && renderChannelsOperationBlock(() => setShowChannelsAndOperation(true))} + {showChannelsAndOperation && renderUntilMessagePayload(() => setShowUntilMessagePayload(true))} + {(showUntilMessagePayload || showEmail) && renderDisplayName(() => setShowDisplayName(true))} + {(showDisplayName || showDisplayNameDescription) && renderEmail(() => setShowEmail(true))}
-
- +
+ Play with it!

@@ -291,26 +316,31 @@ export default function DemoAnimation({ className = '' }: IDemoAnimationProps) { >

Account Service 1.0.0

-

- This service is in charge of processing user signups 🚀 -

+

This service is in charge of processing user signups 🚀

- RECEIVES user/signedup + RECEIVES{' '} + user/signedup
Accepts the following message:
- Payload Object + Payload{' '} + {' '} + Object
displayName
String
-
Name of the user
+
+ Name of the user +
@@ -332,10 +362,12 @@ export default function DemoAnimation({ className = '' }: IDemoAnimationProps) {
 
{'{'}
-   "displayName": "Eve & Chan", +   "displayName":{' '} + "Eve & Chan",
-   "email": "info@asyncapi.io" +   "email":{' '} + "info@asyncapi.io"
{'}'}
diff --git a/components/Feedback.tsx b/components/Feedback.tsx index 25144f44705..4e2e8943126 100644 --- a/components/Feedback.tsx +++ b/components/Feedback.tsx @@ -56,15 +56,20 @@ export default function Feedback(className: string = '') {
- Thank you for your feedback! + Thank you for your feedback!
- Your contribution has been received and we couldn't be happier. + Your contribution has been received and we couldn't be happier.
- +
- Follow on GitHub + Follow on GitHub
@@ -77,11 +82,9 @@ export default function Feedback(className: string = '') {
- Oops! Something went wrong... -
-
- We were unable to process your feedback + Oops! Something went wrong...
+
We were unable to process your feedback
); @@ -92,19 +95,25 @@ export default function Feedback(className: string = '') {
-
- Was this helpful? -
-
- Help us improve the docs by adding your contribution. -
+
Was this helpful?
+
Help us improve the docs by adding your contribution.
-