feat: migrate community components to typescript #2759
Conversation
devilkiller-ag
requested review from
quetzalliwrites,
asyncapi-bot-eve,
derberg,
akshatnema,
magicmatatjahu,
anshgoyalevil and
Mayaleeeee
as code owners
✅ Deploy Preview for asyncapi-website ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
components/community/Card.tsx
Outdated
| <Link href={link} target='_blank'> | ||
| <a target={link.includes('http') ? '_blank' : undefined}> |
There was a problem hiding this comment.
Please follow this guide to either merge anchor with Link or add legacyBehavior prop to Link component.
Do this for all such usages in this PR
components/community/Header.tsx
Outdated
| // eslint-disable-next-line no-unused-vars, unused-imports/no-unused-vars | ||
| className = '' |
There was a problem hiding this comment.
You can include className prop to add className to the top-level div below.
components/community/Hero.tsx
Outdated
| // eslint-disable-next-line no-unused-vars, unused-imports/no-unused-vars | ||
| className = '' |
There was a problem hiding this comment.
You can include className prop to add className to the top-level div below
components/community/Header.tsx
Outdated
| @@ -18,7 +18,7 @@ interface HeaderProps { | |||
| export default function Header({ | |||
| // eslint-disable-next-line no-unused-vars, unused-imports/no-unused-vars | |||
| className = '' | |||
| }: HeaderProps): JSX.Element { | |||
| }: HeaderProps): React.ReactNode { | |||
There was a problem hiding this comment.
@anshgoyalevil We should not use React.ReactNode here because it's being used inside the JSX in Hero.tsx. Due to this, using React.ReactNode is causing a build error.
There was a problem hiding this comment.
I have changed this back to JSX.Element for now, let me know if there is any other option.
There was a problem hiding this comment.
Maybe you should then remove it all together, as suggested by Akshat
components/community/Hero.tsx
Outdated
| */ | ||
| export default function Hero({ | ||
| className = '' | ||
| }: HeroProps): React.ReactNode { |
There was a problem hiding this comment.
| }: HeroProps): React.ReactNode { | |
| }: HeroProps) { |
Don't specify the return type of functional components, that are exported by default. It will be taken automatically by Typescript.
components/community/HomeCard.tsx
Outdated
|
|
||
| > |
components/community/Header.tsx
Outdated
| */ | ||
| export default function Header({ | ||
| className = '' | ||
| }: HeaderProps): JSX.Element { |
There was a problem hiding this comment.
| }: HeaderProps): JSX.Element { | |
| }: HeaderProps) { |
components/community/Card.tsx
Outdated
| btnText, | ||
| btnBg, | ||
| link | ||
| }: SmallHomeCardProp): React.ReactNode { |
There was a problem hiding this comment.
| }: SmallHomeCardProp): React.ReactNode { | |
| }: SmallHomeCardProp) { |
components/community/Card.tsx
Outdated
| icon, | ||
| tagline, | ||
| taglineBg, | ||
| type = 'large', |
There was a problem hiding this comment.
define enum for this type in the types/community folder.
components/community/Card.tsx
Outdated
| * @param {string} props.btnBg - The background color for the button. | ||
| * @param {string} props.link - The link for the button. | ||
| */ | ||
| export default function SmallHomeCard({ |
There was a problem hiding this comment.
Why the component has been named as SmallHomeCard?
There was a problem hiding this comment.
This name is used in the master branch. But I think it will be more accurate to name it Card. Also, it's not used anywhere in the master branch except for writing its own test.
components/community/HomeCard.tsx
Outdated
| btnText, | ||
| link, | ||
| className | ||
| } : HomeCardProp) : React.ReactNode { |
There was a problem hiding this comment.
| } : HomeCardProp) : React.ReactNode { | |
| } : HomeCardProp) { |
No need to define return type for the functional components.
There was a problem hiding this comment.
Sorry for this. I have rectified this now.
Description
This PR migrates the following components to TypeScript
Related issue(s)
#2636